{% extends 'base.html' %}
{% load humanize %}
{% block title %}My Financials{% endblock %}

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

    <!-- HEADER -->
    <div class="page-header mb-4">
        <h4><i class="bi bi-wallet2"></i> My Financials</h4>
        <p class="text-muted">Track your rent, payments, and outstanding balances</p>
    </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">Total Billed</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">Total Paid</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="stat-card shadow-sm">
                <div class="stat-value text-danger">KES {{ total_balance|intcomma }}</div>
                <div class="stat-label">Outstanding Balance</div>
            </div>
        </div>

    </div>

    <!-- INVOICES -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">

            <h6 class="mb-3">Invoices</h6>

            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>Unit</th>
                            <th>Amount</th>
                            <th>Paid</th>
                            <th>Balance</th>
                            <th>Due Date</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i in invoices %}
                        <tr>

                            <td>{{ i.unit.unit_number|default:"-" }}</td>

                            <td>KES {{ i.amount|intcomma }}</td>

                            <td>KES {{ i.total_paid|intcomma }}</td>

                            <td>
                                <strong class="{% if i.balance > 0 %}text-danger{% else %}text-success{% endif %}">
                                    KES {{ i.balance|intcomma }}
                                </strong>
                            </td>

                            <td>
                                {{ i.due_date|date:"M d, Y" }}
                                {% if i.status == 'pending' %}
                                    <br><small class="text-warning">Due Soon</small>
                                {% elif i.status == 'overdue' %}
                                    <br><small class="text-danger">Overdue</small>
                                {% endif %}
                            </td>

                            <td>
                                <span class="badge 
                                    {% if i.status == 'paid' %}bg-success
                                    {% elif i.status == 'partial' %}bg-warning text-dark
                                    {% elif i.status == 'overdue' %}bg-danger
                                    {% else %}bg-secondary{% endif %}">
                                    {{ i.status|title }}
                                </span>
                            </td>

                            <td>
                                {% if i.balance > 0 %}
                                    <a href="{% url 'initiate_payment' i.id %}"
                                       class="btn btn-sm btn-success">
                                        Pay Now
                                    </a>
                                {% else %}
                                    <span class="text-success fw-semibold">Paid</span>
                                {% endif %}
                            </td>

                        </tr>

                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                No invoices found
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>

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

            <h6 class="mb-3">Payment History</h6>

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>Unit</th>
                            <th>Amount</th>
                            <th>Transaction Date</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for p in payments %}
                        <tr>
                            <td>{{ p.unit.unit_number|default:"-" }}</td>
                            <td class="text-success">KES {{ p.amount|intcomma }}</td>
                            <td>{{ p.created_at|date:"M d, Y H:i" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="3" class="text-center text-muted py-4">
                                No payments found
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>
{% endblock %}