{{-- v1.15.0 §D5 — « Faire une demande » et « Mes demandes » : une seule file avec MOBDIE, un e-mail à chaque étape. --}}
@php
    use App\Models\DemandeClient;
    use App\Support\Prestations;

    $choisi = old('type', $type);
    $cochees = old('options', collect($actuelles)->filter(fn ($o) => $o !== 'base')->keys()->all());
    $tons = [DemandeClient::RECUE => 'o', DemandeClient::EN_COURS => 'b', DemandeClient::FAITE => 'g', DemandeClient::REFUSEE => 'n'];
    $aides = [
        'numerisation' => 'Choisissez le pli : nous le scannons et vous l\'envoyons par e-mail.',
        'attestation' => 'Une attestation de domiciliation, envoyée par e-mail.',
        'retrait_tiers' => 'La personne qui viendra retirer vos plis : son nom et son lien avec vous. Elle présentera sa pièce d\'identité au bureau.',
        'changer_offre' => 'Cochez les options que vous voulez : nous vous envoyons la nouvelle version du contrat à accepter.',
        'autre' => 'Dites-nous en quelques mots ce que vous souhaitez.',
    ];
@endphp
<x-portail.client titre="Demandes" actif="demandes">
    <div class="pt-head">
        <div>
            <h1 class="pt-h1">Mes demandes</h1>
            <p class="pt-lead">Un scan, une attestation, une personne autorisée, une option en plus : vous recevez un e-mail à chaque étape.</p>
        </div>
    </div>

    <section class="pt-card" id="nouvelle" style="display:flex;flex-direction:column;gap:16px" aria-label="Faire une demande">
        <h2 class="pt-h3" style="margin:0">Faire une demande</h2>
        <form method="POST" action="{{ route('portail.client.demandes.enregistrer') }}" style="display:flex;flex-direction:column;gap:16px" data-demande>
            @csrf
            <fieldset class="pt-field">
                <legend>Votre demande</legend>
                <div class="pt-puces" role="radiogroup">
                    @foreach ($types as $cle => $libelle)
                        <label class="pt-puce" style="cursor:pointer;display:inline-flex;gap:6px;align-items:center">
                            <input type="radio" name="type" value="{{ $cle }}" @checked($choisi === $cle) required data-type style="accent-color:var(--violet)">{{ $libelle }}
                        </label>
                    @endforeach
                </div>
                @error('type')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
                @foreach ($aides as $cle => $aide)
                    <p class="pt-hint" data-pour="{{ $cle }}" @if ($choisi !== $cle) hidden @endif style="margin:6px 0 0">{{ $aide }}</p>
                @endforeach
            </fieldset>

            <div class="pt-field" data-pour="numerisation" @if ($choisi !== 'numerisation') hidden @endif>
                <label for="courrier_id">Pli concerné</label>
                <select id="courrier_id" name="courrier_id" class="pt-select pt-input">
                    <option value="">—</option>
                    @foreach ($plis as $p)
                        <option value="{{ $p->id }}" @selected((int) old('courrier_id', $pli) === $p->id)>{{ $p->date_reception?->format('d/m/Y') }} · {{ $p->expediteur ?: 'expéditeur non précisé' }}</option>
                    @endforeach
                </select>
                @error('courrier_id')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
            </div>

            <div class="pt-field" data-pour="retrait_tiers" @if ($choisi !== 'retrait_tiers') hidden @endif>
                <label for="tiers_nom">Personne autorisée : nom et lien</label>
                <input id="tiers_nom" name="tiers_nom" class="pt-input @error('tiers_nom') err @enderror" value="{{ old('tiers_nom') }}" placeholder="M. Chabrak, mon père" maxlength="160">
                <p class="pt-hint" style="margin:4px 0 0">Jamais le numéro de sa pièce : elle la présentera au bureau.</p>
                @error('tiers_nom')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
            </div>

            @if ($reference && $options->isNotEmpty())
                <div class="pt-field" data-pour="changer_offre" @if ($choisi !== 'changer_offre') hidden @endif>
                    <span style="font-weight:700">Les options voulues</span>
                    <div class="pt-lines" style="margin-top:8px">
                        @foreach ($options as $o)
                            @php $incluse = ($actuelles[$o->code] ?? null) === 'formule'; @endphp
                            <label class="pt-line" style="cursor:{{ $incluse ? 'default' : 'pointer' }}{{ $incluse ? ';opacity:.65' : '' }}">
                                <input type="checkbox" name="options[]" value="{{ $o->code }}" data-prix="{{ $incluse ? 0 : $o->prixPour($mois) }}"
                                    @checked($incluse || in_array($o->code, (array) $cochees, true)) @if ($incluse) onclick="return false" @endif style="width:20px;height:20px;accent-color:var(--violet);flex:none">
                                <div class="grow"><div class="tt">{{ $o->libelle }}</div>@if ($o->description)<div class="dd">{{ $o->description }}</div>@endif</div>
                                <span class="end court">{{ $incluse ? 'incluse' : '+ '.dh($o->prixPour($mois), 0) }}</span>
                            </label>
                        @endforeach
                    </div>
                    <p style="margin:8px 0 0">Nouveau total : <b data-total data-base="{{ $base }}">{{ dh($reference['montant_ttc'], 0) }}</b> TTC par {{ Prestations::periode($reference['periodicite']) }} <span class="pt-small pt-muted">(aujourd'hui : {{ dh($reference['montant_ttc'], 0) }})</span></p>
                </div>
            @endif

            <div class="pt-field">
                <label for="detail">Précisions</label>
                <textarea id="detail" name="detail" class="pt-input @error('detail') err @enderror" rows="3" maxlength="2000" style="height:auto">{{ old('detail') }}</textarea>
                @error('detail')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
            </div>

            <button class="pt-btn p" style="align-self:flex-start"><x-portail.icone nom="check"/>Envoyer ma demande</button>
        </form>
    </section>

    <section class="pt-lines" aria-label="Mes demandes">
        <div class="pt-card-t"><h2>Mes demandes</h2></div>
        @forelse ($demandes as $d)
            <div class="pt-line">
                <span class="pt-ic v"><x-portail.icone nom="doc"/></span>
                <div class="grow">
                    <div class="tt">{{ $d->libelleType() }}</div>
                    <div class="dd">Le {{ $d->created_at?->format('d/m/Y') }}{{ $d->detail ? ' · '.\Illuminate\Support\Str::limit($d->detail, 90) : '' }}{{ $d->reponse && in_array($d->statut, ['faite', 'refusee'], true) ? ' · '.($d->statut === 'refusee' ? 'Motif : ' : '').\Illuminate\Support\Str::limit($d->reponse, 120) : '' }}</div>
                </div>
                <span class="end court"><span class="pt-chip {{ $tons[$d->statut] ?? 'n' }}">{{ $d->libelleStatut() }}</span></span>
            </div>
        @empty
            <div class="pt-line"><div class="grow"><div class="dd">Aucune demande pour le moment.</div></div></div>
        @endforelse
    </section>

    <script>
        (function () {
            const form = document.querySelector('[data-demande]');
            if (! form) { return; }
            const montrer = () => {
                const type = (form.querySelector('[data-type]:checked') || {}).value;
                form.querySelectorAll('[data-pour]').forEach(el => { el.hidden = el.dataset.pour !== type; });
            };
            const total = () => {
                const cible = form.querySelector('[data-total]');
                if (! cible) { return; }
                let somme = parseFloat(cible.dataset.base || '0');
                form.querySelectorAll('input[name="options[]"]:checked').forEach(c => { somme += parseFloat(c.dataset.prix || '0'); });
                cible.textContent = new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(somme) + ' DH';
            };
            form.addEventListener('change', () => { montrer(); total(); });
            montrer(); total();
        })();
    </script>
</x-portail.client>