{{--
    Le tiroir « Facturer des impayés » (v1.11.0 §E, maquette écran 6). Une
    seule racine. Sur téléphone, le tiroir prend toute la largeur, les puces
    de mois passent sur trois colonnes et le pied reste collé en bas.
--}}
<div class="relative flex min-h-full flex-col gap-4 pb-24">
    <div>
        <div class="text-lg font-semibold text-gray-950 dark:text-white">Facturer des impayés — {{ $client->raison_sociale }}</div>
        @if ($contrat)
            <div class="text-sm text-gray-500">{{ $contrat->periodicite_label }} · {{ dh($contrat->montant_ht) }} HT par période</div>
        @endif
    </div>

    {{-- Les raccourcis --}}
    <div class="flex flex-wrap gap-2">
        @foreach (array_merge(['echu', 'echu_prochaine'], array_map(fn ($a) => 'annee_'.$a, array_keys($cartes)), ['personnaliser']) as $cle)
            <button type="button" wire:click="appliquerRaccourci('{{ $cle }}')"
                @class([
                    'rounded-full border px-3 py-1 text-sm transition',
                    'border-primary-500 bg-primary-50 font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' => $raccourci === $cle,
                    'border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5' => $raccourci !== $cle,
                ])>{{ $this->libelleRaccourci($cle) }}</button>
        @endforeach
    </div>

    {{-- Les périodes, par année --}}
    @forelse ($cartes as $annee => $periodes)
        <div class="space-y-2">
            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ $annee }}</div>

            @foreach ($periodes as $carte)
                @php
                    $etat = $this->etat($carte);
                    $cochable = $carte['statut'] === 'cochable';
                    $choisis = $mois[$carte['id']] ?? [];
                @endphp
                <div wire:key="carte-{{ $carte['id'] }}" @class([
                    'rounded-xl border p-3',
                    'border-primary-300 bg-primary-50/50 dark:border-primary-500/40 dark:bg-primary-500/5' => $etat !== 'rien',
                    'border-gray-200 dark:border-white/10' => $etat === 'rien' && $cochable,
                    'border-gray-100 bg-gray-50 opacity-60 dark:border-white/5 dark:bg-white/5' => ! $cochable,
                ])>
                    <div class="flex items-center gap-3">
                        <button type="button" @disabled(! $cochable) wire:click="basculerPeriode({{ $carte['id'] }})"
                            aria-label="Choisir la période"
                            @class([
                                'flex h-6 w-6 shrink-0 items-center justify-center rounded border text-sm font-bold',
                                'border-primary-600 bg-primary-600 text-white' => $etat !== 'rien',
                                'border-gray-300 bg-white dark:border-white/20 dark:bg-transparent' => $etat === 'rien',
                                'cursor-not-allowed' => ! $cochable,
                            ])>{{ $etat === 'tout' ? '✓' : ($etat === 'partiel' ? '–' : '') }}</button>

                        <div class="min-w-0 flex-1">
                            <div class="font-medium text-gray-950 dark:text-white">
                                {{ $carte['libelle'] }} · {{ $carte['dates'] }}
                                @if ($carte['prescrite'])
                                    <span class="ms-1 rounded bg-gray-200 px-1.5 py-0.5 text-xs text-gray-700 dark:bg-white/10 dark:text-gray-300" title="Plus de cinq ans : prescrite (art. 391 DOC)">prescrite</span>
                                @endif
                            </div>
                            <div class="text-xs text-gray-500">
                                @if ($carte['statut'] === 'facturee')
                                    Déjà facturée — facture {{ $carte['facture'] }}
                                @elseif ($carte['statut'] === 'payee')
                                    Payée
                                @elseif ($etat === 'partiel')
                                    Échéance n° {{ $carte['numero'] }} · {{ count($choisis) }} mois sur {{ $carte['mois'] }} choisis
                                @elseif ($carte['echue'])
                                    Échéance n° {{ $carte['numero'] }} · en retard de {{ $carte['retard'] }}
                                @else
                                    Échéance n° {{ $carte['numero'] }} · à venir
                                @endif
                            </div>
                        </div>

                        @if ($cochable && $carte['mois'] > 1)
                            <button type="button" wire:click="deplier({{ $carte['id'] }})" class="text-sm text-primary-600 hover:underline dark:text-primary-400">
                                Mois {{ in_array($carte['id'], $depliees, true) ? '▾' : '▸' }}
                            </button>
                        @endif

                        <div class="w-28 text-end font-semibold tabular-nums">
                            @if ($carte['statut'] === 'facturee')
                                <span class="text-xs font-normal text-gray-500">Facturée</span>
                            @endif
                            {{ dh($etat === 'partiel' ? $this->montantDe($carte) : $carte['montant']) }}
                        </div>
                    </div>

                    @if ($cochable && in_array($carte['id'], $depliees, true))
                        <div class="mt-3 grid grid-cols-3 gap-2 sm:grid-cols-6">
                            @foreach ($carte['noms_mois'] as $i => $nom)
                                <button type="button" wire:click="basculerMois({{ $carte['id'] }}, {{ $i }})"
                                    @class([
                                        'rounded-lg border px-2 py-1.5 text-center text-xs',
                                        'border-primary-500 bg-primary-600 text-white' => in_array($i, $choisis, true),
                                        'border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300' => ! in_array($i, $choisis, true),
                                    ])>
                                    <div class="font-medium">{{ $nom }}</div>
                                    <div class="tabular-nums">{{ number_format($carte['montants_mois'][$i] ?? 0, 2, ',', ' ') }}</div>
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @empty
        <div class="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-white/10">
            Aucune échéance à facturer pour ce dossier.
        </div>
    @endforelse

    {{-- La présentation --}}
    <div class="space-y-2">
        <div class="text-sm font-semibold">Présentation sur la facture</div>
        <div class="flex flex-wrap gap-2">
            <button type="button" wire:click="$set('presentation', 'par_periode')"
                @class([
                    'rounded-lg border px-3 py-1.5 text-sm',
                    'border-primary-500 bg-primary-50 font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' => $presentation === 'par_periode',
                    'border-gray-300 dark:border-white/10' => $presentation !== 'par_periode',
                ])>Une ligne par période</button>
            <button type="button" @disabled($raisonRecap !== null) wire:click="$set('presentation', 'recapitulative')"
                title="{{ $raisonRecap }}"
                @class([
                    'rounded-lg border px-3 py-1.5 text-sm',
                    'border-primary-500 bg-primary-50 font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' => $presentation === 'recapitulative',
                    'border-gray-300 dark:border-white/10' => $presentation !== 'recapitulative',
                    'cursor-not-allowed opacity-50' => $raisonRecap !== null,
                ])>Une ligne récapitulative</button>
        </div>
        @if ($raisonRecap)
            <div class="text-xs text-gray-500">Ligne récapitulative : {{ $raisonRecap }}</div>
        @endif
        <div class="text-xs text-gray-500">
            Désignation : « Domiciliation — {{ $client->raison_sociale }} — période du … au … (N mois) ». Choisir des mois scinde
            l'échéance : les mois choisis vont sur la facture, les autres restent dus et facturables plus tard. Les périodes
            déjà facturées ou payées sont grisées : impossible de facturer deux fois.
        </div>
    </div>

    @if ($erreur)
        <div class="rounded-lg border border-danger-300 bg-danger-50 p-3 text-sm text-danger-800 dark:border-danger-500/40 dark:bg-danger-500/10 dark:text-danger-300">
            {{ $erreur }}
        </div>
    @endif

    {{-- Le pied collant --}}
    <div class="sticky bottom-0 z-10 -mx-1 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-gray-200 bg-white/95 p-3 shadow-lg backdrop-blur dark:border-white/10 dark:bg-gray-900/95">
        <div class="font-semibold tabular-nums">
            {{ $total['periodes'] }} période{{ $total['periodes'] > 1 ? 's' : '' }} · TTC {{ dh($total['ttc']) }}
        </div>
        @if ($this->peutFacturer())
            <div class="flex flex-wrap gap-2">
                <x-filament::button color="gray" wire:click="valider('brouillon')" :disabled="$total['periodes'] === 0" wire:loading.attr="disabled">Brouillon</x-filament::button>
                <x-filament::button color="primary" wire:click="valider('emettre')" :disabled="$total['periodes'] === 0" wire:loading.attr="disabled">Émettre</x-filament::button>
                <x-filament::button color="success" icon="heroicon-o-envelope" wire:click="valider('envoyer')" :disabled="$total['periodes'] === 0" wire:loading.attr="disabled">Émettre et envoyer</x-filament::button>
            </div>
        @else
            <div class="text-xs text-gray-500">Seul un utilisateur qui émet les factures peut facturer.</div>
        @endif
    </div>
</div>