{{-- v1.14.0 — les paiements du client : ce qui est à régler, comment payer, « J'ai payé », l'historique. --}}
<x-portail.client titre="Paiements" actif="paiements">
    <h1 class="pt-h1">Paiements</h1>

    <div class="pt-grid-cote">
        <div class="large">
            @if ($prochaine)
                @php $periode = $prochaine->periode(); $echue = $prochaine->date_echeance?->lt(today()); @endphp
                <section @class(['pt-card', 'pt-a-regler', 'echue' => $echue]) aria-label="À régler">
                    <p class="k">{{ $echue ? 'Échue depuis le' : 'À régler avant le' }} {{ $prochaine->date_echeance?->format('d/m/Y') }}</p>
                    <p class="m">{{ dh($du['echu']['montant'] > 0 ? $du['echu']['montant'] : $prochaine->montant_ttc) }} <small>TTC</small></p>
                    <p class="pt-small" style="margin:0">
                        @if ($du['echu']['nombre'] > 1)
                            {{ $du['echu']['nombre'] }} échéances échues
                        @else
                            Période du {{ $periode['debut']->format('d/m/Y') }} au {{ $periode['fin']->format('d/m/Y') }}
                        @endif
                    </p>
                    <div class="boutons">
                        <a href="#recu" class="pt-btn p sm" onclick="document.getElementById('recu').open = true"><x-portail.icone nom="up"/>J'ai payé : déposer mon reçu</a>
                        <button type="button" class="pt-btn o sm" onclick="{{ \App\Support\SortieDocument::gestionnaire($espace->lien('client', 'avis', $prochaine->id), 'Avis d\'échéance') }}"><x-portail.icone nom="down"/>Avis d'échéance</button>
                    </div>
                </section>
            @elseif ($frise && $frise['prochaine']['payer'] && $frise['montant'])
                {{-- Une demande en cours : le contrat n'a pas encore d'échéancier, le devis donne le montant. --}}
                <section class="pt-card pt-a-regler" aria-label="À régler">
                    <p class="k">Pour lancer votre domiciliation</p>
                    <p class="m">{{ dh($frise['montant']) }} <small>TTC</small></p>
                    <p class="pt-small" style="margin:0">La première période, selon votre devis. Dès réception, nous faisons légaliser votre contrat.</p>
                    <div class="boutons">
                        <a href="#recu" class="pt-btn p sm" onclick="document.getElementById('recu').open = true"><x-portail.icone nom="up"/>J'ai payé : déposer mon reçu</a>
                    </div>
                </section>
            @elseif ($frise && ! $frise['paye'])
                <div class="pt-alert v"><x-portail.icone nom="clock"/><span>Rien à régler pour l'instant : le montant s'affichera ici après notre appel, une fois votre contrat établi.</span></div>
            @else
                <div class="pt-alert g"><x-portail.icone nom="check"/><span>Vous êtes à jour : aucune échéance ouverte.</span></div>
            @endif

            <details class="pt-card" id="recu" @if ($errors->hasAny(['montant', 'date_paiement', 'recu']) || $prochaine || ($frise['montant'] ?? null)) open @endif>
                <summary class="pt-resume-sec"><span class="pt-ic v"><x-portail.icone nom="up"/></span><span class="grow"><b>J'ai payé</b><span>Déposez la photo ou le PDF de votre reçu de virement.</span></span></summary>
                <form method="POST" action="{{ route('portail.client.recu') }}" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:14px;margin-top:14px">
                    @csrf
                    <input type="hidden" name="installment_id" value="{{ $prochaine?->id }}">
                    <div class="pt-grille2">
                        <div class="pt-field">
                            <label for="montant">Montant</label>
                            <div class="pt-prefixe fin"><span>DH</span><input id="montant" name="montant" class="pt-input @error('montant') err @enderror" inputmode="decimal" value="{{ old('montant', $prochaine ? number_format((float) $prochaine->montant_ttc, 2, '.', '') : (($frise['montant'] ?? null) ? number_format((float) $frise['montant'], 2, '.', '') : '')) }}" required></div>
                            @error('montant')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                        </div>
                        <div class="pt-field">
                            <label for="date_paiement">Date du paiement</label>
                            <input id="date_paiement" type="date" name="date_paiement" class="pt-input @error('date_paiement') err @enderror" value="{{ old('date_paiement', today()->toDateString()) }}" max="{{ today()->toDateString() }}" required>
                            @error('date_paiement')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <fieldset class="pt-field">
                        <legend>Mode</legend>
                        <div class="pt-puces">
                            @foreach (['Virement', 'Versement', 'Chèque', 'Espèces'] as $m)
                                <label class="pt-puce pt-puce-radio"><input type="radio" name="mode" value="{{ $m }}" @checked(old('mode', 'Virement') === $m)>{{ $m }}</label>
                            @endforeach
                        </div>
                    </fieldset>
                    <label @class(['pt-scan', 'pt-depot', 'err' => $errors->has('recu')])>
                        <span class="pt-ic v lg"><x-portail.icone nom="cam"/></span>
                        <span><span class="t">Photo ou PDF du reçu</span><span class="d">{{ $errors->first('recu') ?: '10 Mo au plus' }}</span></span>
                        <input type="file" name="recu" accept="application/pdf,image/*,.heic,.heif" required onchange="this.closest('label').querySelector('.t').textContent = this.files[0]?.name || 'Fichier choisi'">
                    </label>
                    <button class="pt-btn p block">Envoyer le reçu</button>
                    <p class="pt-hint" style="margin:0">Nous enregistrons votre paiement après l'avoir rapproché de notre relevé. La facture vous parvient alors par e-mail.</p>
                </form>
            </details>

            @if ($declares->isNotEmpty())
                <section class="pt-lines" aria-label="Reçus envoyés">
                    <div class="pt-card-t"><h2>Reçus envoyés</h2></div>
                    @foreach ($declares as $d)
                        @php $ton = $d->statut === 'encaisse' ? 'g' : ($d->statut === 'refuse' ? 'r' : 'b'); @endphp
                        <div class="pt-line">
                            <span class="pt-ic {{ $ton }}"><x-portail.icone :nom="$d->statut === 'encaisse' ? 'check' : ($d->statut === 'refuse' ? 'refuse' : 'clock')"/></span>
                            <div class="grow"><div class="tt">{{ dh($d->montant) }}</div><div class="dd">Payé le {{ $d->date_paiement->format('d/m/Y') }} · déclaré le {{ $d->created_at->format('d/m') }}{{ $d->statut === 'refuse' && $d->motif ? ' · '.$d->motif : '' }}</div></div>
                            <span class="end court"><span class="pt-chip {{ $ton }}">{{ $d->statut === 'a_encaisser' ? 'En vérification' : \App\Models\PaiementDeclare::statuts()[$d->statut] }}</span></span>
                        </div>
                    @endforeach
                </section>
            @endif

            <section class="pt-lines" aria-label="Historique">
                <div class="pt-card-t"><h2>Historique</h2></div>
                @foreach ($ouvertes->skip(1)->take(3) as $e)
                    @php $passee = $e->date_echeance?->lt(today()); @endphp
                    <div @class(['pt-line', 'alerte' => $passee])>
                        <span class="pt-ic {{ $passee ? 'r' : 'n' }}"><x-portail.icone :nom="$passee ? 'warn' : 'clock'"/></span>
                        <div class="grow"><div class="tt">{{ $passee ? 'Échéance échue' : 'Période suivante' }}</div><div @class(['dd', 'r' => $passee])>Échéance le {{ $e->date_echeance?->format('d/m/Y') }}</div></div>
                        <span class="end court"><b>{{ dh($e->montant_ttc) }}</b></span>
                    </div>
                @endforeach
                @foreach ($factures as $facture)
                    <div class="pt-line">
                        <span class="pt-ic {{ $facture->estPayee() ? 'g' : 'v' }}"><x-portail.icone :nom="$facture->estPayee() ? 'check' : 'doc'"/></span>
                        <div class="grow">
                            <div class="tt">Facture {{ $facture->numero }} · {{ dh($facture->total_ttc) }}</div>
                            <div class="dd">{{ $facture->estPayee() && $facture->payee_at ? 'Payée le '.$facture->payee_at->format('d/m/Y') : 'Émise le '.$facture->date?->format('d/m/Y') }}{{ $facture->mode_reglement ? ' · '.mb_strtolower($facture->mode_reglement) : '' }}</div>
                        </div>
                        <span class="end court">@include('portail.partiels.sortie', ['url' => $espace->lien('client', 'facture', $facture->id), 'titre' => 'Facture '.$facture->numero])</span>
                    </div>
                @endforeach
                @if ($factures->isEmpty() && $ouvertes->count() <= 1)
                    <div class="pt-line"><div class="grow"><div class="dd">Vos factures s'afficheront ici après chaque paiement.</div></div></div>
                @endif
            </section>
        </div>

        <aside class="cote">
            <section class="pt-card" id="comment" aria-label="Comment payer" style="display:flex;flex-direction:column;gap:12px">
                <h2 class="pt-h3">Comment payer</h2>
                @if ($compte)
                    <div>
                        <p class="pt-small pt-muted" style="margin:0">Par virement au compte</p>
                        <p style="margin:0;font-weight:700">{{ $compte->name }}</p>
                        @if ($compte->rib)
                            <p class="pt-rib">{{ $compte->rib }}</p>
                            <button type="button" class="pt-btn o sm" onclick="navigator.clipboard?.writeText({{ \Illuminate\Support\Js::from($compte->rib) }}); this.textContent = 'RIB copié'">Copier le RIB</button>
                        @endif
                    </div>
                @endif
                <div>
                    <p class="pt-small pt-muted" style="margin:0">Référence à porter sur le virement</p>
                    <p style="margin:0;font-weight:800;font-size:17px">{{ $reference }}</p>
                </div>
                <div>
                    <p class="pt-small pt-muted" style="margin:0">Ou au bureau, aux heures d'ouverture</p>
                    <p class="pt-small" style="margin:0">{{ setting('societe.siege') }}</p>
                </div>
            </section>
        </aside>
    </div>
</x-portail.client>