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

{% block title %}Impayés{% endblock %}
{% block page_title %}Paiements{% endblock %}

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

    <div class="card mb-6 p-5">
        <p class="text-sm text-slate-500">Total restant à encaisser</p>
        <p class="mt-1 text-2xl font-semibold text-red-600">{{ outstanding|fcfa }}</p>
        <p class="text-xs text-slate-500">{{ dossiers.totalItemCount }} dossier{{ dossiers.totalItemCount > 1 ? 's' }} non soldé{{ dossiers.totalItemCount > 1 ? 's' }} (hors annulés)</p>
    </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">Dossier</th>
                        <th class="px-5 py-3">Client</th>
                        <th class="px-5 py-3">Statut</th>
                        <th class="px-5 py-3">Agent</th>
                        <th class="px-5 py-3 text-right">Honoraires</th>
                        <th class="px-5 py-3 text-right">Payé</th>
                        <th class="px-5 py-3 text-right">Solde</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for dossier in dossiers %}
                        <tr class="hover:bg-slate-50">
                            <td class="px-5 py-3"><a href="{{ path('app_dossier_show', {id: dossier.id}) }}" class="font-semibold text-brand-700 hover:underline">{{ dossier.reference }}</a></td>
                            <td class="px-5 py-3">{{ dossier.client.fullName }}<p class="text-xs text-slate-500">{{ dossier.client.phone }}</p></td>
                            <td class="px-5 py-3">{{ include('dossier/_status.html.twig') }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ dossier.assignedAgent ? dossier.assignedAgent.fullName : '—' }}</td>
                            <td class="px-5 py-3 text-right">{{ dossier.feeAmount|fcfa }}</td>
                            <td class="px-5 py-3 text-right text-emerald-700">{{ dossier.paidAmount|fcfa }}</td>
                            <td class="px-5 py-3 text-right font-semibold text-red-600">{{ dossier.balance|fcfa }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="7" class="px-5 py-10 text-center text-slate-500">Aucun impayé.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if dossiers.pageCount > 1 %}
            <div class="border-t border-slate-100 px-5 py-3">{{ knp_pagination_render(dossiers) }}</div>
        {% endif %}
    </div>
{% endblock %}