{{--
    Une option sélectionnable (pack, atelier, activité, dîner).

    $option      : tableau présenté par CropaRegistrationService
    $groupe      : nom du groupe → `name` de la radio, ce qui rend le choix exclusif
    $showPrice   : afficher le prix (packs et dîners)
    $askConjoint : poser la question du conjoint sous l'option retenue
    $accompagnants : nombre d'accompagnants deja enregistres pour ce dîner
    $prixMaxCreneau : prix le plus eleve du creneau, pour hierarchiser les dîners
--}}
@php
    $showPrice = $showPrice ?? false;
    $askConjoint = $askConjoint ?? false;
    $accompagnants = $accompagnants ?? 0;
    $inputId = 'opt-'.$option['id'];

    // Hors du pack retenu : l'option reste visible mais grisée, pour que
    // l'internaute voie ce à quoi son pack ne lui donne pas accès.
    $horsPack = $option['hors_pack'] ?? false;
    $bloque = $option['full'] || $horsPack;

    // Hierarchie des dîners : la formule la plus chere du creneau est mise en
    // avant, les autres restent sobres. On se fonde sur le prix et non sur un
    // code en dur, pour que la regle tienne si les libelles changent.
    $rang = '';

    if ($askConjoint && ($prixMaxCreneau ?? 0) > 0) {
        $rang = $option['prix'] >= $prixMaxCreneau ? ' is-premium' : ' is-discret';
    }
@endphp

<div class="option-row{{ $rang }}{{ $option['selected'] && ! $horsPack ? ' is-selected' : '' }}{{ $option['full'] ? ' is-full' : '' }}{{ $horsPack ? ' is-hors-pack' : '' }}">
    <label class="option-main" for="{{ $inputId }}">
        <input class="form-check-input cropa-option"
               type="radio"
               name="{{ $groupe }}"
               id="{{ $inputId }}"
               value="{{ $option['id'] }}"
               data-price="{{ (int) $option['prix'] }}"
               data-titre="{{ $option['titre'] }}"
               data-addons="{{ $askConjoint ? '1' : '0' }}"
               @checked($option['selected'] && ! $horsPack)
               @disabled($bloque)>

        <span class="option-body">
            <span class="option-title">{{ $option['titre'] }}</span>

            @if ($option['description'])
                <span class="session-meta d-block">{{ $option['description'] }}</span>
            @endif

            {{-- Ni horaire ni salle sous l'intitule : l'horaire figure deja dans
                 le titre du creneau, et la salle dans la colonne de droite. --}}

            @if ($option['remaining'] !== null && ! $horsPack)
                <span class="d-block mt-1 small">
                    @if ($option['full'])
                        <span class="badge bg-secondary">Complet</span>
                    @elseif ($option['remaining'] <= 10)
                        <span class="badge bg-warning text-dark">
                            Plus que {{ $option['remaining'] }} place{{ $option['remaining'] > 1 ? 's' : '' }}
                        </span>
                    @endif
                </span>
            @endif
        </span>

        {{-- Colonne de droite : le prix quand il y en a un, sinon la salle.
             Le mot « Inclus » a été retiré à la demande du client. --}}
        <span class="option-price">
            @if ($showPrice && $option['prix'] > 0)
                {{ (int) $option['prix'] }} TND
            @elseif ($option['salle'])
                <span class="option-salle">{{ $option['salle'] }}</span>
            @endif
        </span>
    </label>

    {{-- Accompagnants : le dîner utilise le mecanisme `multi_use` du projet, une
         ligne `participant_workshops` par personne, toutes au meme tarif. Le bloc
         est affiche par le JS sous l'option de dîner retenue. --}}
    @if ($askConjoint)
        @php
            $max = (int) ($option['multi_use_max'] ?: \App\Services\CropaRegistrationService::ACCOMPAGNANTS_MAX);
        @endphp

        <div class="option-conjoint {{ $option['selected'] ? '' : 'd-none' }}"
             data-conjoint-block="{{ $option['id'] }}">
            <label class="fw-semibold small mb-2 d-block" for="accompagnants-{{ $option['id'] }}">
                Nombre d'accompagnants
            </label>

            {{-- Compteur : deux boutons encadrant la valeur. Le champ reste un
                 input nombre, pour rester utilisable au clavier et sur mobile. --}}
            {{-- `data-touche` : une valeur deja enregistree est un choix explicite,
                 que le defaut « chambre double » ne doit pas ecraser au chargement. --}}
            <div class="cropa-compteur" data-max="{{ $max }}"
                 @if ($option['selected'] && $accompagnants > 0) data-touche="1" @endif>
                <button type="button" class="cropa-compteur-btn" data-pas="-1"
                        aria-label="Retirer un accompagnant">−</button>

                <input type="number"
                       class="cropa-compteur-valeur cropa-accompagnants"
                       name="accompagnants"
                       id="accompagnants-{{ $option['id'] }}"
                       value="{{ $option['selected'] ? $accompagnants : 0 }}"
                       min="0"
                       max="{{ $max }}"
                       step="1"
                       inputmode="numeric"
                       data-price="{{ (int) $option['prix'] }}">

                <button type="button" class="cropa-compteur-btn" data-pas="1"
                        aria-label="Ajouter un accompagnant">+</button>
            </div>

            <div class="session-meta mt-2">
                {{ (int) $option['prix'] }} TND par accompagnant.
            </div>
        </div>
    @endif
</div>