{% extends 'base.html.twig' %}

{% block title %}Mes paiements — Bubul{% endblock %}

{% block body %}
<div class="max-w-[1400px] mx-auto">

    {# ================================================================
       EN-TÊTE — le total y vit désormais
       La carte pleine largeur qui s'intercalait entre le titre et le
       tableau a disparu : le total est l'information principale de la
       page, sa place est au niveau du titre, pas dans un bloc de plus.
       ================================================================ #}
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 pb-6 border-b border-gray-200">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Mes paiements',
            subtitle: 'Les virements que Bubul vous a déjà versés.',
            icon: 'wallet',
            backHref: path('app_commercial_dashboard'),
            backLabel: 'Retour au tableau de bord'
        } only %}

        {# Sous filtre, le grand chiffre est celui de la PÉRIODE, et son libellé le
           dit. Le cumul depuis l'origine reste lisible en dessous, jamais en
           concurrence de taille : le grand nombre doit toujours être la somme des
           lignes affichées sous lui. #}
        <div data-total-verse class="shrink-0 lg:text-right">
            <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
                Total versé{% if range.isActive() %} — {{ range.label() }}{% endif %}
            </div>
            <div class="text-3xl font-bold text-success tabular-nums mt-1">{{ total|number_format(2, ',', ' ') }} €</div>
            <div class="text-xs text-gray-500 mt-1">
                {{ payouts|length }} virement{{ payouts|length > 1 ? 's' : '' }}
                {%- if range.isActive() %}
                    · <span class="tabular-nums">{{ totalGlobal|number_format(2, ',', ' ') }} €</span> depuis l'origine
                {%- elseif dernierVirementLe %}
                    · dernier le {{ dernierVirementLe }}
                {%- endif %}
            </div>
        </div>
    </div>

    <div class="mt-6 mb-6">
        {% include '_molecules/month-range-filter/month-range-filter.html.twig' with {
            action: path('app_commercial_paiements'),
            months: moisDisponibles,
            start: range.startMonthInput(),
            end: range.endMonthInput()
        } only %}
    </div>

    {# ================================================================
       QUATRE COLONNES — le calcul au dépliage
       « Commission acquise » et « Report entrant » sortent des colonnes :
       ils n'intéressent que la ligne qu'on interroge, et six colonnes ne
       tiennent pas sur un téléphone. S'y ajoute la colonne muette du
       chevron, tout à droite : la ligne entière est le déclencheur.
       ================================================================ #}
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        {% if payouts|length > 0 %}
            <div class="overflow-x-auto overflow-y-hidden">
                <table class="w-full min-w-[520px]">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Mois</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Montant viré</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Viré le</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Référence</th>
                            {# La colonne du chevron : sans libellé, elle n'annonce rien
                               d'autre que le fait que la ligne se déplie. #}
                            <th class="px-4 sm:px-6 py-3 w-px"><span class="sr-only">Détail</span></th>
                        </tr>
                    </thead>

                    {# Un <tbody> par virement : c'est ce qui permet au contrôleur de
                       porter à la fois la ligne sommaire et sa ligne de détail. Le
                       détail est rendu VISIBLE ; le contrôleur le replie à connect().
                       Sans JavaScript, la page montre tout — dégradé mais juste. #}
                    {% for payout in payouts %}
                        <tbody data-controller="shared--collapsible"
                               data-shared--collapsible-open-value="false"
                               class="border-b border-gray-100 last:border-b-0">
                            {# C'est la LIGNE ENTIÈRE qui déplie, pas le seul libellé du mois :
                               la cible de clic est ce que l'œil désigne. Le <tr> porte donc le
                               rôle, l'état et le clavier ; le chevron n'est plus qu'un
                               indicateur, posé tout à droite au bout de la ligne. #}
                            <tr data-paiement-ligne
                                data-shared--collapsible-target="trigger"
                                data-action="click->shared--collapsible#toggle keydown.enter->shared--collapsible#toggle keydown.space->shared--collapsible#toggle"
                                role="button"
                                tabindex="0"
                                aria-expanded="false"
                                class="cursor-pointer hover:bg-gray-50/60 focus-visible:bg-gray-50 focus-visible:outline-none transition-colors duration-150">
                                <td class="px-4 sm:px-6 py-3 whitespace-nowrap text-sm font-semibold text-gray-900">{{ payout.period|mois_fr }}</td>
                                <td class="px-4 sm:px-6 py-3 text-right text-sm font-semibold text-gray-900 tabular-nums whitespace-nowrap">{{ payout.amountPayable|number_format(2, ',', ' ') }} €</td>
                                <td class="px-4 sm:px-6 py-3 text-sm text-gray-500 tabular-nums whitespace-nowrap">{{ payout.paidAt ? payout.paidAt|date('d/m/Y') : '—' }}</td>
                                <td class="px-4 sm:px-6 py-3 text-sm text-gray-500 font-mono">{{ payout.reference ?: '—' }}</td>
                                <td class="px-4 sm:px-6 py-3 text-right w-px">
                                    <span data-shared--collapsible-target="icon" class="text-gray-400 inline-flex shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs' } only %}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="p-0">
                                    {# La cible du contrôleur est ce <div>, jamais le <tr> :
                                       shared--collapsible pose `display: block`, ce qui
                                       détruirait une ligne de tableau. #}
                                    <div data-shared--collapsible-target="content" class="bg-gray-50/60">
                                        <div class="px-4 sm:px-6 py-3 flex flex-wrap gap-x-10 gap-y-2 justify-end">
                                            <div class="text-right">
                                                <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Commission acquise</div>
                                                <div class="text-sm text-gray-700 tabular-nums">{{ payout.commissionAmount|number_format(2, ',', ' ') }} €</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Report entrant</div>
                                                <div class="text-sm text-gray-700 tabular-nums">{{ payout.carryOverIn|number_format(2, ',', ' ') }} €</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Montant viré</div>
                                                <div class="text-sm font-semibold text-gray-900 tabular-nums">{{ payout.amountPayable|number_format(2, ',', ' ') }} €</div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    {% endfor %}
                </table>
            </div>
        {% else %}
            <div class="p-8">
                {% if range.isActive() %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucun virement sur cette période',
                        description: 'Élargissez la période, ou affichez tous vos virements.',
                        icon: 'wallet', variant: 'minimal',
                        actionText: 'Tout voir',
                        actionHref: path('app_commercial_paiements')
                    } only %}
                {% else %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucun virement reçu',
                        description: 'Les versements sont mensuels, par virement bancaire, à l\'initiative de l\'administration : un mois n\'est versable qu\'une fois clos. Suivez ce qui vous est dû depuis vos transactions.',
                        icon: 'wallet', variant: 'minimal',
                        actionText: 'Voir mes transactions',
                        actionHref: path('app_commercial_transactions')
                    } only %}
                {% endif %}
            </div>
        {% endif %}
    </section>
</div>
{% endblock %}