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


{% block title %}Income Statement{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- Year Selection Form -->
    <div class="card shadow-sm mb-5">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Year Filter</h5>
        </div>
        <div class="card-body bg-light">
            <form method="get" class="row g-3 align-items-center justify-content-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>
            </form>
        </div>
    </div>

    <!-- Financial Statement -->
    <div class="card shadow-lg border-0">
        <div class="card-header bg-primary text-white text-center py-3">
            <h2 class="mb-0">Airborne Images</h2>
            <h3 class="mb-0">Income Statement</h3>
        </div>
        <div class="card-body">
            <!-- Income Section -->
            <div class="mb-5">
                <h3 class="text-success mb-4">Income</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-success">
                            <tr>
                                <th class="px-4">Subcategory</th>
                                <th class="text-end px-4">Total Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in income_transactions %}
                            <tr>
                                <td class="px-4">{{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end px-4">$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted py-3">No income transactions found.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr class="table-light">
                                <td class="fw-bold px-4">Total Income</td>
                                <td class="fw-bold text-end px-4">$ {{ total_income|floatformat:2|intcomma }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Expense Section -->
            <div class="mb-5">
                <h3 class="text-danger mb-4">Expenses</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-danger">
                            <tr>
                                <th class="px-4">Subcategory</th>
                                <th class="text-end px-4">Total Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in expense_transactions %}
                            <tr>
                                <td class="px-4">{{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end px-4">-$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted py-3">No expense transactions found.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr class="table-light">
                                <td class="fw-bold px-4">Total Expenses</td>
                                <td class="fw-bold text-end px-4">$ {{ total_expenses|floatformat:2|intcomma }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Net Profit/Loss -->
            <div class="card bg-light p-3">
                <div class="d-flex justify-content-end align-items-center">
                    <h4 class="fw-bold me-3 mb-0">Net Profit/Loss:</h4>
                    <h4 class="mb-0 {% if net_profit >= 0 %}text-success{% else %}text-danger{% endif %}">
                        $ {{ net_profit|floatformat:2|intcomma }}
                    </h4>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}