{% extends 'layouts/portal.html.twig' %}
{% block title %}Fees{% endblock %}
{% block content %}
<div class="page-head">
    <div>
        <h1 class="h3">Fees</h1>
        <p class="text-muted mb-0">Unpaid items and recent receipts for {{ student.fullName }}</p>
    </div>
</div>
<form method="get" class="card-soft p-3 mb-3">
    {% if nav_query.student is defined %}<input type="hidden" name="student" value="{{ nav_query.student }}">{% endif %}
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label" for="from">From</label>
            <input type="date" name="from" id="from" class="form-control" value="{{ from|date('Y-m-d') }}">
        </div>
        <div class="col-md-3">
            <label class="form-label" for="to">To</label>
            <input type="date" name="to" id="to" class="form-control" value="{{ to|date('Y-m-d') }}">
        </div>
        <div class="col-md-2">
            <button class="btn btn-brand w-100">Show</button>
        </div>
    </div>
</form>
<div class="card-soft student-list-card mb-3">
    <div class="list-toolbar"><div class="fw-bold">Unpaid{% if template %} · {{ template.name }}{% endif %}</div></div>
    <div class="table-scroll">
        <table class="table table-modern">
            <thead><tr><th>Head</th><th>Period</th><th class="text-end">Amount</th></tr></thead>
            <tbody>
            {% for line in lines %}
                <tr>
                    <td>{{ line.detail.accountHead.name }}</td>
                    <td>{{ line.label }}</td>
                    <td class="text-end">{{ line.amount|number_format(0) }}</td>
                </tr>
            {% else %}
                <tr><td colspan="3"><div class="empty-state">Nothing unpaid in this date range.</div></td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="card-soft student-list-card">
    <div class="list-toolbar"><div class="fw-bold">Recent receipts</div></div>
    <div class="table-scroll">
        <table class="table table-modern">
            <thead><tr><th>Receipt</th><th>Date</th><th class="text-end">Paid</th></tr></thead>
            <tbody>
            {% for invoice in invoices %}
                <tr>
                    <td>{{ invoice.displayId }}</td>
                    <td>{{ invoice.paymentBillingDate ? invoice.paymentBillingDate|date('d M Y') : '—' }}</td>
                    <td class="text-end">{{ invoice.paidAmount|number_format(0) }}</td>
                </tr>
            {% else %}
                <tr><td colspan="3"><div class="empty-state">No receipts yet.</div></td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}