{% extends 'layout/app.html.twig' %}

{% block title %}Paiements{% endblock %}
{% block page_title %}Paiements{% endblock %}

{% block content %}
    {{ include('payment/_tabs.html.twig') }}

    <form method="get" class="card mb-6 flex flex-wrap items-end gap-3 p-4">
        <div><label class="form-label" for="du">Du</label><input type="date" id="du" name="du" value="{{ from|date('Y-m-d') }}" class="form-input"></div>
        <div><label class="form-label" for="au">Au</label><input type="date" id="au" name="au" value="{{ to|date('Y-m-d') }}" class="form-input"></div>
        <div class="min-w-52">
            <label class="form-label" for="encaisse_par">Encaissé par</label>
            <select id="encaisse_par" name="encaisse_par" class="form-input">
                <option value="">Tout le monde</option>
                {% for user in receivers %}
                    <option value="{{ user.id }}" {{ receiver and receiver.id == user.id ? 'selected' }}>{{ user.fullName }} ({{ user.mainRole.label }})</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Filtrer</button>
    </form>

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <div class="card p-5"><p class="text-sm text-slate-500">Encaissé sur la période</p><p class="mt-1 text-2xl font-semibold text-emerald-700">{{ total|fcfa }}</p><p class="text-xs text-slate-500">{{ payments.totalItemCount }} paiement{{ payments.totalItemCount > 1 ? 's' }}</p></div>
        <div class="card p-5"><p class="text-sm text-slate-500">Reste à encaisser (tous dossiers)</p><p class="mt-1 text-2xl font-semibold text-red-600">{{ outstanding|fcfa }}</p><a href="{{ path('app_payment_unpaid') }}" class="text-xs text-brand-700 hover:underline">Voir les impayés →</a></div>
        <div class="card p-5">
            <p class="mb-2 text-sm text-slate-500">Par personne</p>
            {% for row in by_receiver %}
                <p class="flex justify-between text-sm"><span>{{ row.user }}</span><span class="font-medium">{{ row.total|fcfa }}</span></p>
            {% else %}
                <p class="text-sm text-slate-400">—</p>
            {% endfor %}
        </div>
    </div>

    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                    <tr>
                        <th class="px-5 py-3">Date</th>
                        <th class="px-5 py-3">Reçu</th>
                        <th class="px-5 py-3">Dossier</th>
                        <th class="px-5 py-3">Mode</th>
                        <th class="px-5 py-3">Encaissé par</th>
                        <th class="px-5 py-3 text-right">Montant</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for payment in payments %}
                        <tr class="hover:bg-slate-50">
                            <td class="px-5 py-3 text-slate-600">{{ payment.receivedAt|date('d/m/Y') }}</td>
                            <td class="px-5 py-3"><a href="{{ path('app_payment_receipt', {id: payment.id}) }}" target="_blank" data-turbo="false" class="font-mono text-brand-700 hover:underline">{{ payment.receiptNumber }}</a></td>
                            <td class="px-5 py-3"><a href="{{ path('app_dossier_show', {id: payment.dossier.id}) }}" class="font-medium text-slate-900 hover:text-brand-700">{{ payment.dossier.reference }}</a> <span class="text-slate-500">— {{ payment.dossier.client.fullName }}</span></td>
                            <td class="px-5 py-3 text-slate-600">{{ payment.method.label }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ payment.receivedBy.fullName }}</td>
                            <td class="px-5 py-3 text-right font-medium">{{ payment.amount|fcfa }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-5 py-10 text-center text-slate-500">Aucun paiement sur la période.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if payments.pageCount > 1 %}
            <div class="border-t border-slate-100 px-5 py-3">{{ knp_pagination_render(payments) }}</div>
        {% endif %}
    </div>
{% endblock %}