@php
  $etapes = [
    1 => ['label' => 'État civil',     'hint' => 'Adhérent principal'],
    2 => ['label' => "Pièce d'identité", 'hint' => 'CNI · Passeport · Électorale'],
    3 => ['label' => 'Téléphones',     'hint' => 'Vérification OTP'],
    4 => ['label' => 'Ayants droit',   'hint' => 'Enfants ≤ 17 ans'],
    5 => ['label' => 'Récapitulatif',  'hint' => 'Soumission'],
  ];
@endphp

<x-slot:breadcrumb>
  <x-cmu.breadcrumb :items="[
    ['label' => auth()->user()?->etablissement?->nom_officiel ?? 'Établissement', 'href' => null],
    ['label' => 'Tableau de bord', 'href' => '#'],
    ['label' => 'Nouvel enrôlement'],
  ]" />
</x-slot>

<x-slot:topbarActions>
  <span class="text-xs text-cmu-ink">
    <strong class="text-cmu-charcoal">{{ \App\Support\Fg::dateLongueFr(now()) }}</strong>
    · {{ now()->format('H:i') }}
  </span>
</x-slot>

<x-slot:sidebarNav>
  <x-cmu.nav-menu />
</x-slot>

<div>

  {{-- Confirmation post-soumission --}}
  @if(request('confirme'))
    <div class="mb-6 px-4 py-3 bg-cmu-green-50 border border-cmu-green-200 rounded-cmu-lg flex items-center gap-3"
         x-data="{ ius: '{{ request('confirme') }}' }">
      <span class="w-8 h-8 rounded-full bg-cmu-green-700 text-white flex items-center justify-center text-sm font-bold">✓</span>
      <div class="flex-1 text-sm">
        <div class="font-semibold text-cmu-green-900">Dossier soumis à la validation centrale.</div>
        <div class="text-cmu-ink">IUS attribué :
          <span class="font-mono bg-white px-2 py-0.5 rounded border border-cmu-green-200">{{ \App\Support\Fg::ius(request('confirme')) }}</span>
        </div>
      </div>
      <a href="/cmu/enrolement/nouveau" class="cmu-btn-primary">Nouvel enrôlement</a>
    </div>
  @endif

  {{-- Page header --}}
  <x-cmu.page-header eyebrow="Nouveau dossier"
                     description="Saisissez les informations du citoyen ainsi que de ses ayants droit. Après soumission, le dossier sera transmis à la validation centrale.">
    <x-slot:actions>
      <div class="flex flex-col items-end gap-1.5 text-xs text-cmu-ink">
        <span>Brouillon</span>
        <span class="font-mono text-cmu-green-700 bg-cmu-green-50 px-2.5 py-1 rounded-md">{{ $draft_id }}</span>
      </div>
    </x-slot>
    Enrôlement d'un <em>adhérent AMU</em>
  </x-cmu.page-header>

  {{-- Stepper --}}
  <div class="cmu-stepper mb-6">
    @foreach($etapes as $num => $etape)
      @php
        $estActif = $etape_courante === $num;
        $estFait = $etape_courante > $num;
        $clickable = $num < $etape_courante;
      @endphp
      <div @class(['cmu-step', 'active' => $estActif, 'done' => $estFait])
           @if($clickable) wire:click="revenirEtape({{ $num }})" @endif>
        @if($num < 5)
          <div @class(['cmu-step-line', 'done' => $estFait])></div>
        @endif
        <div class="cmu-step-circle">
          @if($estFait)
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 13l4 4L19 7"/></svg>
          @else
            {{ $num }}
          @endif
        </div>
        <div class="cmu-step-label">{{ $etape['label'] }}</div>
        <div class="cmu-step-hint">{{ $etape['hint'] }}</div>
      </div>
    @endforeach
  </div>

  {{-- Wizard grid --}}
  <div class="cmu-wizard-grid">

    {{-- FORMULAIRE (colonne gauche) --}}
    <div class="cmu-wizard-panel">

      <div class="cmu-wizard-panel-header">
        <div class="cmu-wizard-step-label">Étape {{ $etape_courante }} / 5</div>
        <h2>{{ $etapes[$etape_courante]['label'] }}</h2>
        <p>{{ $etapes[$etape_courante]['hint'] }}</p>
      </div>

      <div class="cmu-wizard-panel-body">

        {{-- ========= ÉTAPE 1 : État civil ========= --}}
        @if($etape_courante === 1)
        <div class="cmu-step-content">
          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Identité</div>
            <div class="cmu-form-grid cols-3">
              <div class="cmu-form-field">
                <label class="cmu-form-label">Civilité <span class="req">*</span></label>
                <div class="cmu-radio-group cols-3">
                  @foreach(['M.', 'Mme', 'Mlle'] as $civ)
                    <button type="button" wire:click="$set('civilite', '{{ $civ }}')"
                            @class(['cmu-radio-pill', 'active' => $civilite === $civ])>
                      <span class="pill-dot"></span>{{ $civ }}
                    </button>
                  @endforeach
                </div>
              </div>
              <div class="cmu-form-field full">
                <label class="cmu-form-label">Nom <span class="req">*</span></label>
                <input class="cmu-input" wire:model="nom" type="text" placeholder="Ex. CAMARA">
                @error('nom')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field full">
                <label class="cmu-form-label">Prénoms <span class="req">*</span></label>
                <input class="cmu-input" wire:model="prenoms" type="text" placeholder="Ex. Fatoumata">
                @error('prenoms')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Date de naissance <span class="req">*</span></label>
                <input class="cmu-input" wire:model="date_naissance" type="date">
                @error('date_naissance')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Lieu de naissance</label>
                <input class="cmu-input" wire:model="lieu_naissance" type="text" placeholder="Ex. Conakry">
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Sexe <span class="req">*</span></label>
                <div class="cmu-radio-group">
                  @foreach(['M' => 'Homme', 'F' => 'Femme'] as $val => $lbl)
                    <button type="button" wire:click="$set('sexe', '{{ $val }}')"
                            @class(['cmu-radio-pill', 'active' => $sexe === $val])>
                      <span class="pill-dot"></span>{{ $lbl }}
                    </button>
                  @endforeach
                </div>
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Situation matrimoniale <span class="optional">(optionnel)</span></label>
                <select class="cmu-select" wire:model="situation_matrimoniale">
                  <option value="">—</option>
                  <option value="CELIBATAIRE">Célibataire</option>
                  <option value="MARIE">Marié(e)</option>
                  <option value="DIVORCE">Divorcé(e)</option>
                  <option value="VEUF">Veuf(ve)</option>
                </select>
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Nationalité</label>
                <input class="cmu-input" wire:model="nationalite" type="text">
              </div>
              <div class="cmu-form-field full">
                <label class="cmu-form-label">Profession déclarée <span class="optional">(activité justifiant le profil de cotisation)</span></label>
                <input class="cmu-input" wire:model="profession_declaree" type="text" placeholder="Ex. Commerçante marché Niger">
              </div>
            </div>
          </div>

          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Résidence</div>
            <div class="cmu-form-grid cols-3">
              <div class="cmu-form-field">
                <label class="cmu-form-label">Région <span class="req">*</span></label>
                <select class="cmu-select" wire:model="region_residence">
                  <option value="">Sélectionner</option>
                  @foreach(['Boké','Conakry','Faranah','Kankan','Kindia','Labé','Mamou','Nzérékoré'] as $r)
                    <option value="{{ $r }}">{{ $r }}</option>
                  @endforeach
                </select>
                @error('region_residence')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Préfecture <span class="req">*</span></label>
                <input class="cmu-input" wire:model="prefecture_residence" type="text">
                @error('prefecture_residence')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Quartier</label>
                <input class="cmu-input" wire:model="quartier_residence" type="text">
              </div>
              <div class="cmu-form-field full">
                <label class="cmu-form-label">Adresse complète</label>
                <textarea class="cmu-input" wire:model="adresse_complete" rows="2" placeholder="Rue, immeuble, repère…"></textarea>
              </div>
            </div>
          </div>
        </div>
        @endif

        {{-- ========= ÉTAPE 2 : Pièce d'identité ========= --}}
        @if($etape_courante === 2)
        <div class="cmu-step-content">
          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Type et référence</div>
            <div class="cmu-form-grid">
              <div class="cmu-form-field full">
                <label class="cmu-form-label">Type de pièce <span class="req">*</span></label>
                <div class="cmu-radio-group cols-4">
                  @foreach(['CNI' => "Carte d'identité", 'PASSEPORT' => 'Passeport', 'CARTE_ELECTORALE' => 'Carte électorale', 'ACTE_NAISSANCE' => 'Acte de naissance'] as $val => $lbl)
                    <button type="button" wire:click="$set('piece_type', '{{ $val }}')"
                            @class(['cmu-radio-pill', 'active' => $piece_type === $val])>
                      <span class="pill-dot"></span>{{ $lbl }}
                    </button>
                  @endforeach
                </div>
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Numéro <span class="req">*</span></label>
                <input class="cmu-input" wire:model="piece_numero" type="text">
                @error('piece_numero')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Lieu de délivrance</label>
                <input class="cmu-input" wire:model="piece_lieu_delivrance" type="text">
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Date de délivrance</label>
                <input class="cmu-input" wire:model="piece_date_delivrance" type="date">
              </div>
              <div class="cmu-form-field">
                <label class="cmu-form-label">Date d'expiration</label>
                <input class="cmu-input" wire:model="piece_date_expiration" type="date">
              </div>
            </div>
          </div>

          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Scans</div>
            <div class="cmu-upload-row">
              @foreach ([['recto', 'Recto', $piece_recto_chemin, $piece_recto_nom], ['verso', 'Verso', $piece_verso_chemin, $piece_verso_nom]] as [$face, $libelle, $chemin, $nomFichier])
              <div>
                <label @class(['cmu-upload-zone', 'uploaded' => $chemin])>
                  <input type="file" accept="image/jpeg,image/png,.pdf" wire:model="piece_{{ $face }}" class="hidden">
                  <div class="cmu-upload-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                  </div>
                  <div class="cmu-upload-title">{{ $libelle }} <span class="optional">(facultatif)</span></div>
                  <div class="cmu-upload-hint" wire:loading.remove wire:target="piece_{{ $face }}">
                    @if ($chemin)
                      <span class="block truncate font-medium text-cmu-green-700">{{ $nomFichier ?: 'Scan enregistré' }}</span>
                    @else
                      JPG, PNG ou PDF · max 5 Mo
                    @endif
                  </div>
                  <div class="cmu-upload-hint" wire:loading wire:target="piece_{{ $face }}">Envoi en cours…</div>
                  <div class="cmu-upload-check">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg>
                  </div>
                </label>
                @if ($chemin)
                  <button type="button" wire:click="retirerScan('{{ $face }}')"
                          class="text-xs text-cmu-red-700 underline cursor-pointer mt-1">Retirer</button>
                @endif
                @error('piece_'.$face)<div class="text-xs text-cmu-red-700 mt-2">{{ $message }}</div>@enderror
              </div>
              @endforeach
            </div>
            <div class="cmu-upload-hint mt-2">
              Les scans sont facultatifs : le dossier peut être soumis sans pièce jointe.
              La validation centrale signalera simplement leur absence.
            </div>
          </div>
        </div>
        @endif

        {{-- ========= ÉTAPE 3 : Téléphones et OTP ========= --}}
        @if($etape_courante === 3)
        <div class="cmu-step-content">
          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Téléphones (jusqu'à 2)</div>

            @foreach($telephones as $i => $t)
              <div @class(['cmu-phone-card', 'is-cotisation' => $t['est_principal']])>
                <div class="flex items-center justify-between mb-2">
                  <div class="text-sm font-semibold text-cmu-ink">
                    {{ $i === 0 ? 'Téléphone principal (cotisation)' : 'Téléphone secondaire' }}
                  </div>
                  @if($t['est_principal'])
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10.5px] font-bold bg-cmu-gold-400 text-cmu-green-900">
                      ● PRÉLÈVEMENT
                    </span>
                  @endif
                </div>
                <div class="cmu-form-grid">
                  <div class="cmu-form-field">
                    <label class="cmu-form-label">Numéro
                      @if($i === 0) <span class="req">*</span> @else <span class="optional">(optionnel)</span> @endif
                    </label>
                    <input class="cmu-input" wire:model="telephones.{{ $i }}.numero" type="tel" placeholder="+224 6XX XX XX XX">
                    @error('telephones.'.$i.'.numero')<div class="text-xs text-cmu-red-700 mt-1">{{ $message }}</div>@enderror
                  </div>
                  <div class="cmu-form-field">
                    <label class="cmu-form-label">Opérateur</label>
                    <div class="cmu-radio-group">
                      <button type="button" wire:click="$set('telephones.{{ $i }}.operateur', 'MTN')"
                              @class(['cmu-radio-pill', 'active' => $t['operateur'] === 'MTN'])>
                        <span class="pill-dot"></span>MTN
                      </button>
                      <button type="button" wire:click="$set('telephones.{{ $i }}.operateur', 'ORANGE')"
                              @class(['cmu-radio-pill', 'active' => $t['operateur'] === 'ORANGE'])>
                        <span class="pill-dot"></span>Orange
                      </button>
                    </div>
                  </div>
                </div>
                <div class="mt-3 flex items-center gap-2">
                  @if(! $t['est_verifie'])
                    <button type="button" wire:click="envoyerOtp({{ $i }})" class="cmu-btn-ghost inline-flex items-center gap-2">
                      {{ $t['otp_envoye'] ? 'Renvoyer OTP' : 'Envoyer OTP' }}
                    </button>
                  @endif
                  @if($t['otp_envoye'] && ! $t['est_verifie'])
                    <input class="cmu-input max-w-[160px] tracking-widest font-mono"
                           wire:model.defer="telephones.{{ $i }}.otp_saisi" placeholder="6 chiffres" maxlength="6">
                    <button type="button" wire:click="verifierOtp({{ $i }})" class="cmu-btn-primary">Vérifier</button>
                  @endif
                  @if($t['est_verifie'])
                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-cmu-green-700">
                      <span class="w-4 h-4 rounded-full bg-cmu-green-600 text-white flex items-center justify-center text-[10px]">✓</span>
                      Vérifié par OTP
                    </span>
                  @endif
                </div>
                @if(session('otp_info_'.$i))
                  <div class="mt-2 text-xs text-cmu-gold-700 bg-cmu-gold-50 border border-cmu-gold-200 rounded-md px-3 py-1.5">
                    {{ session('otp_info_'.$i) }}
                  </div>
                @endif
                @error('telephones.'.$i.'.otp_saisi')<div class="text-xs text-cmu-red-700 mt-2">{{ $message }}</div>@enderror
              </div>
            @endforeach
          </div>
        </div>
        @endif

        {{-- ========= ÉTAPE 4 : Profil + Ayants droit ========= --}}
        @if($etape_courante === 4)
        <div class="cmu-step-content">
          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Profil de cotisation</div>
            <div class="cmu-profil-grid">
              @foreach($profils as $p)
                <div wire:click="$set('profil_cotisant_id', {{ $p->id }})"
                     @class(['cmu-profil-card', 'active' => $profil_cotisant_id === $p->id])>
                  {{-- Le montant de cotisation n'est volontairement pas affiché
                       ici : le profil se choisit sur l'activité réelle du
                       demandeur et le justificatif qu'il peut produire, pas sur
                       le prix. Le montant retenu apparaît au récapitulatif. --}}
                  <div class="cmu-profil-card-code">{{ $p->code }}</div>
                  <div class="cmu-profil-card-label">{{ $p->libelle }}</div>
                  <div class="text-[11px] text-cmu-ink leading-snug mt-1 opacity-75">{{ $p->justificatif_requis }}</div>
                </div>
              @endforeach
            </div>
            @error('profil_cotisant_id')<div class="text-xs text-cmu-red-700 mt-2">{{ $message }}</div>@enderror
          </div>

          <div class="cmu-form-section">
            <div class="cmu-form-section-title">Ayants droit (optionnel)</div>
            <div class="cmu-ayant-intro">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 17 12 22 22 17"/><path d="M2 12 12 17 22 12"/></svg>
              <p>Les <strong>enfants de moins de 18 ans</strong> peuvent être ajoutés sans cotisation supplémentaire. Ils perdront le bénéfice AMU au 18ᵉ anniversaire.</p>
            </div>

            @foreach($ayants_droit as $i => $a)
              <div class="cmu-ayant-card">
                <div class="cmu-ayant-avatar">{{ mb_strtoupper(mb_substr($a['prenoms'] ?: '?', 0, 1).mb_substr($a['nom'] ?: '', 0, 1)) }}</div>
                <div class="cmu-ayant-info grid grid-cols-2 md:grid-cols-5 gap-2">
                  <input class="cmu-input" wire:model="ayants_droit.{{ $i }}.nom" placeholder="Nom" type="text">
                  <input class="cmu-input" wire:model="ayants_droit.{{ $i }}.prenoms" placeholder="Prénoms" type="text">
                  <input class="cmu-input" wire:model="ayants_droit.{{ $i }}.date_naissance" type="date">
                  <select class="cmu-select" wire:model="ayants_droit.{{ $i }}.sexe">
                    <option value="M">Homme</option>
                    <option value="F">Femme</option>
                  </select>
                  <select class="cmu-select" wire:model="ayants_droit.{{ $i }}.lien_parente">
                    <option value="FILS">Fils</option>
                    <option value="FILLE">Fille</option>
                    <option value="ENFANT_ADOPTIF">Adoptif</option>
                    <option value="ENFANT_A_CHARGE">À charge</option>
                  </select>
                </div>
                <button type="button" wire:click="retirerAyantDroit({{ $i }})"
                        class="w-8 h-8 rounded-md flex items-center justify-center text-cmu-ink hover:bg-cmu-red-100 hover:text-cmu-red-600 transition">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                </button>
              </div>
            @endforeach

            <button type="button" wire:click="ajouterAyantDroit" class="cmu-btn-add-ayant">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              Ajouter un ayant droit
            </button>
          </div>
        </div>
        @endif

        {{-- ========= ÉTAPE 5 : Récapitulatif ========= --}}
        @if($etape_courante === 5)
        <div class="cmu-step-content space-y-4">
          <div class="p-4 border border-gray-200 rounded-cmu-lg bg-white">
            <div class="font-display text-lg font-semibold text-cmu-green-900 mb-2">État civil</div>
            <div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
              <div><span class="text-cmu-ink text-xs uppercase">Nom complet</span><div class="font-medium">{{ $civilite }} {{ $prenoms }} {{ mb_strtoupper($nom) }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Date de naissance</span><div class="font-medium">{{ $date_naissance ? \App\Support\Fg::dateFr($date_naissance) : '—' }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Sexe</span><div class="font-medium">{{ $sexe === 'M' ? 'Homme' : 'Femme' }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Nationalité</span><div class="font-medium">{{ $nationalite }}</div></div>
              <div class="col-span-2"><span class="text-cmu-ink text-xs uppercase">Résidence</span><div class="font-medium">{{ collect([$quartier_residence, $prefecture_residence, $region_residence])->filter()->implode(' · ') }}</div></div>
            </div>
          </div>

          <div class="p-4 border border-gray-200 rounded-cmu-lg bg-white">
            <div class="font-display text-lg font-semibold text-cmu-green-900 mb-2">Pièce d'identité</div>
            <div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
              <div><span class="text-cmu-ink text-xs uppercase">Type</span><div class="font-medium">{{ $piece_type }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Numéro</span><div class="font-mono">{{ $piece_numero }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Recto</span><div class="font-medium text-cmu-green-700">{{ $piece_recto_chemin ? '✓ joint' : 'non joint' }}</div></div>
              <div><span class="text-cmu-ink text-xs uppercase">Verso</span><div class="font-medium">{{ $piece_verso_chemin ? '✓ joint' : 'non joint' }}</div></div>
            </div>
          </div>

          <div class="p-4 border border-gray-200 rounded-cmu-lg bg-white">
            <div class="font-display text-lg font-semibold text-cmu-green-900 mb-2">Téléphones</div>
            @foreach($telephones as $t)
              @if(!empty($t['numero']))
                <div class="flex items-center gap-3 text-sm py-1">
                  <span class="font-mono">{{ $t['numero'] }}</span>
                  <span class="text-xs bg-gray-100 rounded px-2 py-0.5">{{ $t['operateur'] }}</span>
                  @if($t['est_principal'])<span class="text-xs bg-cmu-gold-400 text-cmu-green-900 rounded px-2 py-0.5 font-semibold">PRÉLÈVEMENT</span>@endif
                  @if($t['est_verifie'])<span class="text-cmu-green-700">✓ OTP vérifié</span>@endif
                </div>
              @endif
            @endforeach
          </div>

          <div class="p-4 border border-gray-200 rounded-cmu-lg bg-white">
            <div class="font-display text-lg font-semibold text-cmu-green-900 mb-2">Profil de cotisation</div>
            @php $p = $profils->firstWhere('id', $profil_cotisant_id); @endphp
            @if($p)
              <div class="text-sm">
                <div class="font-semibold">{{ $p->libelle }} — {{ $p->code }}</div>
                <div class="font-display text-cmu-green-800 text-xl">{{ \App\Support\Fg::gnf($p->cotisation_mois) }} / mois</div>
              </div>
            @else
              <div class="text-cmu-red-700 text-sm">Aucun profil sélectionné.</div>
            @endif
          </div>

          @if(count($ayants_droit) > 0)
          <div class="p-4 border border-gray-200 rounded-cmu-lg bg-white">
            <div class="font-display text-lg font-semibold text-cmu-green-900 mb-2">Ayants droit ({{ count($ayants_droit) }})</div>
            <ul class="space-y-1 text-sm">
              @foreach($ayants_droit as $a)
                @if(!empty($a['nom']))
                  <li>{{ $a['prenoms'] }} {{ mb_strtoupper($a['nom']) }} — {{ $a['lien_parente'] }} — né(e) le {{ $a['date_naissance'] ? \App\Support\Fg::dateFr($a['date_naissance']) : '?' }}</li>
                @endif
              @endforeach
            </ul>
          </div>
          @endif

          <div class="bg-cmu-green-50 border border-cmu-green-100 rounded-cmu-lg p-5">
            <div class="text-xs font-bold uppercase tracking-[0.12em] text-cmu-green-700 mb-2">Déclaration sur l'honneur</div>
            <p class="text-sm text-cmu-ink mb-3 leading-relaxed">
              Je certifie que les informations fournies sont exactes, que l'adhérent ne bénéficie d'aucune autre couverture maladie
              (CNSS, CNPS, IPM), et je comprends qu'une fausse déclaration entraîne l'annulation du dossier et des sanctions.
            </p>
            <label class="flex items-start gap-2 text-sm cursor-pointer">
              <input type="checkbox" wire:model.live="declaration_sur_honneur" class="mt-1 w-[18px] h-[18px]" style="accent-color: #1A5D3A;">
              J'accepte la déclaration sur l'honneur et je soumets le dossier à la validation centrale.
            </label>
            @error('declaration_sur_honneur')<div class="text-xs text-cmu-red-700 mt-2">{{ $message }}</div>@enderror
          </div>

          <div class="bg-cmu-gold-50 border border-cmu-gold-200 rounded-cmu-lg p-4 flex items-center gap-3 text-sm text-cmu-gold-700">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <div>
              <strong>Activation RGB</strong> : le <strong>1ᵉʳ du mois civil</strong> suivant la validation centrale.
              Le premier prélèvement a lieu à la même date.
            </div>
          </div>
        </div>
        @endif

      </div>

      {{-- Footer navigation --}}
      <div class="cmu-wizard-panel-footer">
        <div class="text-xs text-cmu-ink flex items-center gap-1.5">
          <span class="w-2 h-2 rounded-full bg-cmu-green-500"></span>
          Brouillon sauvegardé automatiquement
        </div>
        <div class="flex items-center gap-2">
          @if($etape_courante > 1)
            <button type="button" wire:click="revenirEtape({{ $etape_courante - 1 }})" class="cmu-btn-ghost">← Précédent</button>
          @endif
          @if($etape_courante < 5)
            <button type="button" wire:click="passerAEtapeSuivante" class="cmu-btn-primary"
                    wire:loading.attr="disabled" wire:target="passerAEtapeSuivante">
              <span wire:loading.remove wire:target="passerAEtapeSuivante">Continuer →</span>
              <span wire:loading wire:target="passerAEtapeSuivante">Validation…</span>
            </button>
          @else
            <button type="button" wire:click="soumettreDossier" class="cmu-btn-submit"
                    wire:loading.attr="disabled" wire:target="soumettreDossier">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 13l4 4L19 7"/></svg>
              <span wire:loading.remove wire:target="soumettreDossier">{{ $libelleSoumission ?? 'Soumettre à la validation centrale' }}</span>
              <span wire:loading wire:target="soumettreDossier">Soumission en cours…</span>
            </button>
          @endif
        </div>
      </div>

    </div>

    {{-- ========= PANNEAU RÉCAP (colonne droite, sticky) ========= --}}
    <aside class="cmu-wizard-recap">
      <div class="cmu-wizard-recap-header">
        <div class="cmu-wizard-recap-eyebrow">Dossier en cours</div>
        <div class="cmu-wizard-recap-title">{{ $prenoms ?: '—' }} {{ mb_strtoupper($nom ?: '—') }}</div>
        <div class="cmu-wizard-recap-sub">{{ $draft_id }}</div>
      </div>

      <div class="cmu-wizard-recap-body">
        <div class="flex justify-between border-b border-gray-100 pb-3 mb-3 text-xs">
          <span class="text-cmu-ink">Progression</span>
          <span class="font-bold text-cmu-green-900">Étape {{ $etape_courante }} / 5</span>
        </div>

        @foreach($etapes as $num => $e)
          @php
            $st = $etape_courante > $num ? 'done' : ($etape_courante === $num ? 'active' : 'pending');
          @endphp
          <div @class(['cmu-wizard-recap-item', 'done' => $st === 'done', 'active' => $st === 'active'])>
            <div class="cmu-wizard-recap-item-mark">
              @if($st === 'done')<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg>
              @else{{ $num }}
              @endif
            </div>
            <div class="cmu-wizard-recap-item-body">
              <div class="cmu-wizard-recap-item-label">{{ $e['label'] }}</div>
              <div @class(['cmu-wizard-recap-item-value', 'pending' => $st === 'pending'])>
                @switch($num)
                  @case(1)
                    @if($st === 'pending') En attente
                    @else {{ $prenoms }} {{ mb_strtoupper($nom) }}, né(e) {{ $date_naissance ? \App\Support\Fg::dateFr($date_naissance) : '?' }}
                    @endif
                    @break
                  @case(2)
                    @if($st === 'pending') En attente @else {{ $piece_type }} · {{ $piece_numero ?: '—' }} @endif
                    @break
                  @case(3)
                    @if($st === 'pending') En attente
                    @else
                      {{ $telephones[0]['numero'] ?? '—' }}
                      @if(!empty($telephones[0]['est_verifie'])) · <span class="text-cmu-green-700">OTP ✓</span> @endif
                    @endif
                    @break
                  @case(4)
                    @if($profil_cotisant_id) {{ $profils->firstWhere('id', $profil_cotisant_id)?->libelle }}
                    @elseif($st === 'pending') En attente
                    @else Non renseigné @endif
                    @break
                  @case(5)
                    @if($declaration_sur_honneur) Prêt à soumettre
                    @else Récapitulatif @endif
                    @break
                @endswitch
              </div>
            </div>
          </div>
        @endforeach
      </div>

      <div class="cmu-wizard-recap-footer">
        <div class="cmu-wizard-recap-footer-row">
          <span class="rk">Régime</span>
          <span class="rv">RGB</span>
        </div>
        <div class="cmu-wizard-recap-footer-row">
          <span class="rk">Cotisation mensuelle</span>
          @php $p = $profils->firstWhere('id', $profil_cotisant_id); @endphp
          <span class="rv">{{ $p ? \App\Support\Fg::gnf($p->cotisation_mois) : '—' }}</span>
        </div>
        <div class="cmu-wizard-recap-footer-row">
          <span class="rk">Ayants droit</span>
          <span class="rv">{{ count(array_filter($ayants_droit, fn($a) => !empty($a['nom']))) }}</span>
        </div>
      </div>
    </aside>

  </div>
</div>