{% extends 'base.html' %}
{% load humanize %}
{% block title %}Financial Overview{% endblock %}

{% block content %}
<div class="page-container">

    <div class="page-header mb-4">
        <h4><i class="bi bi-cash-coin"></i> Financial Overview</h4>
    </div>

    <!-- KPI -->
    <div class="row g-3 mb-4">

        <div class="col-md-4">
            <div class="stat-card shadow-sm">
                <div class="stat-value">KES {{ total_expected|intcomma }}</div>
                <div class="stat-label">Expected</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card shadow-sm">
                <div class="stat-value">KES {{ total_paid|intcomma }}</div>
                <div class="stat-label">Collected</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card shadow-sm">
                <div class="stat-value">KES {{ total_arrears|intcomma }}</div>
                <div class="stat-label">Arrears</div>
            </div>
        </div>

    </div>

    <!-- FILTER -->
    <form method="get" class="mb-3">
        <select name="building" class="form-select w-25" onchange="this.form.submit()">
            <option value="">All Buildings</option>
            {% for b in buildings %}
                <option value="{{ b.id }}" {% if request.GET.building == b.id|stringformat:"s" %}selected{% endif %}>
                    {{ b.name }}
                </option>
            {% endfor %}
        </select>
    </form>

    <!-- TABLE -->
    <div class="card shadow-sm">
        <div class="card-body">

            <table class="table table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>Unit</th>
                        <th>Tenant</th>
                        <th>Expected</th>
                        <th>Paid</th>
                        <th>Balance</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>
                    {% for row in data %}
                    <tr>
                        <td>{{ row.unit.unit_number }}</td>
                        <td>{{ row.tenant.username|default:"-" }}</td>

                        <td>KES {{ row.expected|intcomma }}</td>
                        <td>KES {{ row.paid|intcomma }}</td>
                        <td>KES {{ row.balance|intcomma }}</td>

                        <td>
                            {% if row.balance <= 0 %}
                                <span class="badge bg-success">Paid</span>
                            {% elif row.paid > 0 %}
                                <span class="badge bg-warning text-dark">Partial</span>
                            {% else %}
                                <span class="badge bg-danger">Unpaid</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center">No data</td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>
{% endblock %}