{% extends 'index.html' %}
{% load humanize %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-2 text-primary text-center">Income & Expense Summary</h2>
    {% if selected_year %}
        <h4 class="mb-4 text-muted text-center">Year: {{ selected_year }}</h4>
    {% else %}
        <h4 class="mb-4 text-muted text-center">All Years</h4>
    {% endif %}

    <!-- Year Selection Dropdown -->
    <form method="get" class="mb-4">
        <div class="row g-2 align-items-center">
            <div class="col-auto">
                <label for="year" class="form-label fw-bold">Select Year:</label>
            </div>
            <div class="col-auto">
                <select name="year" id="year" class="form-select" onchange="this.form.submit()">
                    <option value="">All Years</option>
                    {% for year in available_years %}
                        <option value="{{ year.year }}" {% if selected_year|slugify == year.year|slugify %}selected{% endif %}>
                            {{ year.year }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </form>
    <!-- Print Button -->
    <a href="{% url 'print_category_summary' %}?year={{ selected_year }}" target="_blank" class="btn btn-primary mb-4">Print Summary</a>

    <!-- Income Categories -->
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-success text-white">
            <h3 class="mb-0">Income Categories</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Category</th>
                            <th class="text-end">Amount  </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in income_category_totals %}
                            <tr>
                                <td>  {{ row.category__category }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}  </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted">No income category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if income_category_totals %}
                        <tr class="fw-bold">
                            <td class="bg-success text-white">Total:</td>
                            <td class="text-end bg-success text-white">$ {{ income_category_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Income Sub-Categories -->
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-success text-white">
            <h3 class="mb-0">Income Sub-Categories</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Sub-Category</th>
                            <th class="text-end">Amount  </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in income_subcategory_totals %}
                            <tr>
                                <td>  {{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}  </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted">No income sub-category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if income_subcategory_totals %}
                        <tr class="fw-bold">
                            <td class="bg-success text-white">Total:</td>
                            <td class="text-end bg-success text-white">$ {{ income_subcategory_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Expense Categories -->
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-danger text-white">
            <h3 class="mb-0">Expense Categories</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Category</th>
                            <th class="text-end">Amount  </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in expense_category_totals %}
                            <tr>
                                <td>  {{ row.category__category }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}  </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted">No expense category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if expense_category_totals %}
                        <tr class="fw-bold">
                            <td class="bg-danger text-white">Total:</td>
                            <td class="text-end bg-danger text-white">$ {{ expense_category_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Expense Sub-Categories -->
    <div class="card mb-4 shadow-sm">
        <div class="card-header bg-danger text-white">
            <h3 class="mb-0">Expense Sub-Categories</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Sub-Category</th>
                            <th class="text-end">Amount  </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in expense_subcategory_totals %}
                            <tr>
                                <td>  {{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end ps-5">$ {{ row.total|floatformat:2|intcomma }}  </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted">No expense sub-category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if expense_subcategory_totals %}
                        <tr class="fw-bold">
                            <td class="bg-danger text-white">Total:</td>
                            <td class="text-end bg-danger text-white">$ {{ expense_subcategory_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row p-5 mb-5">
            <div class="col-sm-6">
                <h4 class="mb-4 text-end">Year: {{ selected_year }}</h4>
            </div>
            <div class="col-sm-6">
                <h4 class="text-end">{{ selected_year }} Income:    $ {{ income_category_total|floatformat:2|intcomma }}</h4>
                <h4 class="text-end">{{ selected_year }} Expenses:    $ {{ expense_category_total|floatformat:2|intcomma }}</h4>
                <h4 class="text-end">{{ selected_year }} Net:    $ {{ net_profit|floatformat:2|intcomma }}</h4>
            </div>
        </div>
    </div>
</div>
{% endblock %}