{{--
    v1.15.0 §B — l'étape « Formule & options » : la formule, les options en
    plus, le rythme de paiement, l'article 2 tel qu'il sera écrit, puis
    l'envoi. Le total se recalcule à chaque case, sans recharger.
--}}
@php
    use App\Livewire\Portail\Inscription;
    use App\Support\Prestations;

    $mois = (int) ($formule?->periodicite_mois ?: 6);
    $groupe = $groupes->first(fn ($g) => $g->contains('id', $formuleId));
    $rythmes = $groupe && $groupe->pluck('periodicite_mois')->unique()->count() > 1 ? $groupe : null;
    $libellesInclus = $optionsEnLigne->whereIn('code', $inclus)->pluck('libelle');
    $nombreEnLettres = fn (int $n) => [1 => 'cette option', 2 => 'ces deux options', 3 => 'ces trois options'][$n] ?? 'ces '.$n.' options';
@endphp
<div class="pt-form-t">
    <h1>Formule & options</h1>
    <p class="pt-lead">Choisissez votre formule et ajoutez les options utiles : le total se met à jour à chaque case.</p>
</div>

<div class="pt-sec-f" id="champ-formuleId">
    <h2>Votre formule</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px" role="radiogroup" aria-label="Formule">
        @foreach ($groupes as $g)
            @php
                $montree = $g->firstWhere('id', $formuleId) ?? $g->first();
                $choisie = $g->contains('id', $formuleId);
                $inclusDe = $optionsEnLigne->whereIn('code', $montree->codesInclus())->pluck('libelle');
            @endphp
            <button type="button" wire:key="formule-{{ $montree->id }}" wire:click="choisirFormule({{ $montree->id }})"
                role="radio" aria-checked="{{ $choisie ? 'true' : 'false' }}"
                class="pt-card" style="text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit;color:inherit;{{ $choisie ? 'border:2px solid var(--violet);background:var(--violet-50)' : '' }}">
                <span style="display:flex;justify-content:space-between;align-items:center;gap:8px">
                    <b style="font-size:16px">{{ $montree->libelle }}</b>
                    @if ($choisie)<span class="pt-chip v"><x-portail.icone nom="check"/>Choisie</span>@endif
                </span>
                @if ($montree->description)<span class="pt-small pt-muted">{{ $montree->description }}</span>@endif
                @if ($inclusDe->isNotEmpty())<span class="pt-small">Inclut : {{ $inclusDe->map(fn ($l) => mb_strtolower($l))->implode(', ') }}</span>@endif
                <span style="font-size:20px;font-weight:800;margin-top:4px">{{ dh($montree->montant_ttc, 0) }} <span class="pt-small pt-muted" style="font-weight:600">TTC {{ $montree->libellePeriode() }}</span></span>
                @if ($montree->tarifDe)<span class="pt-small pt-muted">Prix de votre cabinet</span>@endif
            </button>
        @endforeach
    </div>
    @error('formuleId')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
</div>

@if ($optionsEnLigne->isNotEmpty())
    <div class="pt-sec-f">
        <h2>Options en plus</h2>
        <div class="pt-lines">
            @foreach ($optionsEnLigne as $option)
                @php
                    $incluse = in_array($option->code, $inclus, true);
                    $cochee = $incluse || in_array($option->code, $options, true);
                @endphp
                <label class="pt-line" wire:key="option-{{ $option->code }}" style="cursor:{{ $incluse ? 'default' : 'pointer' }}{{ $incluse ? ';opacity:.65' : '' }}">
                    <input type="checkbox" style="width:20px;height:20px;accent-color:var(--violet);flex:none" aria-label="{{ $option->libelle }}"
                        @checked($cochee) @disabled($incluse) wire:click="basculerOption('{{ $option->code }}')">
                    <div class="grow"><div class="tt">{{ $option->libelle }}</div>@if ($option->description)<div class="dd">{{ $option->description }}</div>@endif</div>
                    <span class="end court">
                        @if ($incluse)
                            <span class="pt-chip n">incluse</span>
                        @else
                            <b style="white-space:nowrap">+ {{ dh($option->prixPour($mois), 0) }}</b>
                        @endif
                    </span>
                </label>
            @endforeach
        </div>
        @error('options')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
        @error('options.*')<p class="pt-msg err"><x-portail.icone nom="alert"/>{{ $message }}</p>@enderror
    </div>
@endif

@if ($conseil)
    {{-- Un conseil, jamais une bascule : le visiteur choisit. --}}
    <div class="pt-alert b">
        <x-portail.icone nom="info"/>
        <div class="grow">La formule <b>{{ $conseil['formule']->libelle }}</b> inclut {{ $nombreEnLettres($conseil['nombre']) }} pour {{ dh($conseil['formule']->montant_ttc, 0) }} / {{ Prestations::periodeDeMois((int) $conseil['formule']->periodicite_mois) }}.</div>
        <button type="button" class="pt-btn o sm" wire:click="choisirFormule({{ $conseil['formule']->id }})">Choisir {{ $conseil['formule']->libelle }}</button>
    </div>
@endif

<div class="pt-sec-f" style="gap:10px">
    <h2>Rythme de paiement</h2>
    @if ($rythmes)
        <div class="pt-puces" role="group" aria-label="Rythme de paiement">
            @foreach ($rythmes as $r)
                <button type="button" @class(['pt-puce', 'on' => $r->id === $formuleId]) aria-pressed="{{ $r->id === $formuleId ? 'true' : 'false' }}" wire:click="choisirFormule({{ $r->id }})">
                    {{ [1 => 'Par mois', 3 => 'Par trimestre', 6 => 'Par semestre'][(int) $r->periodicite_mois] ?? 'À l\'année' }} — {{ dh($r->montant_ttc, 0) }}
                </button>
            @endforeach
        </div>
    @elseif ($formule)
        <p style="margin:0">Payable d'avance, {{ $formule->libellePeriode() }}.</p>
    @endif
</div>

@if ($offre)
    <div class="pt-sec-f" style="gap:10px">
        <button type="button" class="pt-lien" style="align-self:flex-start;font-size:14px" wire:click="$toggle('voirContrat')" aria-expanded="{{ $voirContrat ? 'true' : 'false' }}">
            {{ $voirContrat ? 'Masquer l\'article du contrat' : 'Voir ce qui sera écrit dans mon contrat' }}
        </button>
        @if ($voirContrat && $article)
            <div class="pt-card pt-article-2" style="font-size:14px;line-height:1.55">{!! $article !!}</div>
        @endif
    </div>
@endif

<p class="pt-small pt-muted" style="margin:0">Vous pourrez ajouter ou retirer une option plus tard depuis votre espace.</p>

@if ($offre)
    <div class="pt-seul-mobile">@include('portail.partiels.redevance')</div>
@endif

<div class="pt-card" style="display:flex;flex-direction:column;gap:12px">
    <label class="pt-check">
        <input type="checkbox" wire:model.live="consentement">
        <span>{{ $public ? Inscription::texteClient() : Inscription::texteCabinet() }}</span>
    </label>
    @error('consentement')<p class="pt-msg err" style="margin:0"><x-portail.icone nom="alert"/>Cochez la case pour envoyer la demande.</p>@enderror
    <p class="pt-legal">{{ \App\Support\Portail::mention0908() }}</p>
</div>

@if ($offre)
    {{-- Sur téléphone, le total reste sous les yeux. --}}
    <div class="pt-seul-mobile" style="position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);padding:10px 4px;display:flex;justify-content:space-between;align-items:baseline">
        <span class="pt-small pt-muted">Votre redevance</span>
        <b style="font-size:18px">{{ dh($offre['montant_ttc'], 0) }} <span class="pt-small pt-muted" style="font-weight:600">TTC / {{ Prestations::periode($offre['periodicite']) }}</span></b>
    </div>
@endif