@extends('frontend.cropa.layouts.master')

@section('title', 'Mon inscription - ' . ($event->title ?? 'CROPA'))

@php
    $titres = [
        'packs' => 'Choisissez votre pack',
        'ateliers' => 'Choisissez vos ateliers',
        'activites' => 'Choisissez vos activités sociales',
        'recap' => 'Récapitulatif de votre inscription',
    ];

    $numero = array_search($etape, $etapes, true) + 1;
    $dernier = $etape === 'recap';

    // Les packs qui couvrent le samedi : eux seuls ouvrent le bloc « Dîner ».
    $groupesSamedi = [
        \App\Services\CropaRegistrationService::JOURS['samedi'],
        \App\Services\CropaRegistrationService::JOURS['les2'],
    ];

    $packsSamedi = $etape === 'packs'
        ? collect($packs)->whereIn('groupe', $groupesSamedi)->pluck('id')->values()
        : collect();
@endphp

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-8">

            <div class="cropa-card p-4">

                <h2 class="h5 mb-1">{{ $titres[$etape] }}</h2>

                @if ($etape === 'packs')
                    {{-- Phrase reprise telle quelle de la page « PACKS D'INSCRIPTION »
                         du programme officiel. --}}
                    <p class="mb-2">
                        La participation donne droit à l'accès aux ateliers et aux activités
                        sociales, sur inscription obligatoire à l'avance.
                    </p>
                    <p class="session-meta mb-4">
                        Votre pack détermine les journées auxquelles vous assistez, et donc les
                        ateliers et activités qui vous seront proposés.
                    </p>
                @elseif ($etape !== 'recap')
                    <p class="session-meta mb-4">
                        Un seul choix par créneau. Les options grisées ne sont pas comprises
                        dans votre pack.
                    </p>
                @endif

                @if ($participant?->code_pre_registration)
                    <div class="session-meta mb-4">
                        Code d'inscription : <strong>{{ $participant?->code_pre_registration }}</strong>
                    </div>
                @endif

                <form id="form-etape" data-etape="{{ $etape }}">

                    @if ($etape === 'packs')
                        <div class="cropa-group is-pack">
                            <div class="cropa-group-title">
                                Les Packs
                            </div>

                            {{-- Presentation en cartes, 3 par ligne sur desktop, comme la
                                 page « PACKS D'INSCRIPTION » du programme officiel. La
                                 couleur vient de la journee couverte, portee par le
                                 `groupe` du pack. --}}
                            <div class="cropa-packs-grid">
                                @foreach ($packs as $pack)
                                    @include('frontend.cropa.partials.pack-carte', ['pack' => $pack])
                                @endforeach
                            </div>
                        </div>

                        {{-- Dîner du samedi : rendu systématiquement, mais montré par le
                             JS uniquement si le pack coché couvre le samedi. --}}
                        @foreach ($creneaux as $creneau)
                            <div class="cropa-group is-{{ $creneau['type'] }} d-none" data-bloc-diner>
                                <div class="cropa-group-title">
                                    {{ $creneau['label'] }}
                                    @if ($creneau['horaire'])
                                        <span class="session-meta">{{ $creneau['horaire'] }}</span>
                                    @endif
                                </div>

                                @php
                                    // Le dîner le plus cher du creneau est mis en avant.
                                    $prixMaxCreneau = collect($creneau['options'])->max('prix');
                                @endphp

                                @foreach ($creneau['options'] as $option)
                                    @include('frontend.cropa.partials.option', [
                                        'option' => $option,
                                        'groupe' => $creneau['groupe'],
                                        'showPrice' => true,
                                        'askConjoint' => true,
                                        'accompagnants' => $accompagnants,
                                        'prixMaxCreneau' => $prixMaxCreneau,
                                    ])
                                @endforeach

                                @include('frontend.cropa.partials.ne-pas-participer', [
                                    'groupe' => $creneau['groupe'],
                                    'selectionne' => collect($creneau['options'])->every(fn ($o) => ! $o['selected']),
                                ])
                            </div>
                        @endforeach

                    @elseif ($etape === 'recap')

                        @if (empty($lignes))
                            <div class="alert alert-warning">
                                Vous n'avez encore rien sélectionné.
                            </div>
                        @else
                            <div class="cropa-recap mb-4">
                                @foreach ($lignes as $ligne)
                                    <div class="recap-row">
                                        {{-- Titre seul : l'horaire et la salle ont ete
                                             vus a l'etape du choix. Le badge porte le
                                             nombre de places quand il y a des
                                             accompagnants. --}}
                                        <span>{{ $ligne['titre'] }}@if ($ligne['quantite'] > 1)<span class="recap-qte">&times;{{ $ligne['quantite'] }}</span>@endif</span>
                                        {{-- Colonne reservee aux tarifs. --}}
                                        <span class="text-nowrap">
                                            @if ($ligne['prix'] > 0)
                                                {{ (int) $ligne['prix'] }} TND
                                            @endif
                                        </span>
                                    </div>
                                @endforeach

                                {{-- Total en cloture de la liste, comme sur la page
                                     de confirmation. --}}
                                <div class="recap-row fw-semibold border-0 pt-3">
                                    <span>Total</span>
                                    <span id="total-display">{{ (int) $total }} TND</span>
                                </div>
                            </div>
                        @endif

                        {{-- Demande libre : reprise dans `participants.comment`, que le
                             backoffice affiche déjà sur la fiche du participant. --}}
                        <div class="cropa-group is-pack mt-4">
                            <div class="cropa-group-title">
                                <label class="mb-0" for="commentaire">Avez-vous une demande supplémentaire</label>
                                <span class="session-meta">Facultatif</span>
                            </div>

                            <textarea class="form-control" id="commentaire" name="comment" rows="3"
                                maxlength="1000">{{ $participant?->comment }}</textarea>
                        </div>

                        {{-- Modes de paiement : saisis au backoffice (table `paiements`),
                             comme pour les autres événements de la plateforme. --}}
                        @if ($modesPaiement->isNotEmpty())
                            <div class="cropa-group is-pack mt-4">
                                <div class="cropa-group-title">
                                    Mode de paiement
                                </div>

                                @foreach ($modesPaiement as $mode)
                                    <div class="option-row{{ $participant?->paiement_mode === $mode ? ' is-selected' : '' }}">
                                        <label class="option-main" for="paiement-{{ Str::slug($mode) }}">
                                            <input class="form-check-input cropa-paiement" type="radio"
                                                name="paiement_mode" id="paiement-{{ Str::slug($mode) }}"
                                                value="{{ $mode }}" @checked($participant?->paiement_mode === $mode)>
                                            <span class="option-body">
                                                <span class="option-title">{{ $mode }}</span>
                                            </span>
                                        </label>
                                    </div>
                                @endforeach

                                <div class="form-text mt-3">
                                    @include('frontend.cropa.partials.reglement')
                                </div>
                            </div>
                        @endif

                    @else

                        {{-- Ateliers et activités sociales : les deux journées sont
                             affichées, celles hors du pack retenu sont grisées. --}}
                        @forelse ($creneaux as $creneau)
                            {{-- `is-formation` / `is-social` / `is-addons` : la couleur du bloc
                                 vient du type, comme les codes couleur du programme. --}}
                            <div class="cropa-group is-{{ $creneau['type'] }}{{ $creneau['hors_pack'] ? ' is-hors-pack' : '' }}">
                                <div class="cropa-group-title">
                                    {{ $creneau['label'] }}
                                    @if ($creneau['horaire'])
                                        <span class="session-meta">{{ $creneau['horaire'] }}</span>
                                    @endif
                                </div>

                                @foreach ($creneau['options'] as $option)
                                    @include('frontend.cropa.partials.option', [
                                        'option' => $option,
                                        'groupe' => $creneau['groupe'],
                                        'showPrice' => false,
                                    ])
                                @endforeach

                                @include('frontend.cropa.partials.ne-pas-participer', [
                                    'groupe' => $creneau['groupe'],
                                    'selectionne' => collect($creneau['options'])->every(fn ($o) => ! $o['selected']),
                                    'horsPack' => $creneau['hors_pack'],
                                ])
                            </div>
                        @empty
                            <div class="alert alert-info">
                                Aucune option n'est proposée à cette étape.
                            </div>
                        @endforelse

                    @endif

                    <div class="alert alert-danger d-none" id="choix-errors"></div>

                    {{-- Le total figure en cloture du recapitulatif, avec les choix,
                         et non dans ce bandeau : en cours de tunnel il ne
                         refleterait qu'une selection partielle. --}}
                    <div class="cropa-total d-flex justify-content-end align-items-center flex-wrap gap-3">
                        <div class="d-flex align-items-center gap-2">
                            <a href="{{ $numero > 1
                                ? route('cropa.inscription.etape', ['etape' => $etapes[$numero - 2]])
                                : route('cropa.home', ['modifier' => 1]) }}"
                                class="btn btn-lg btn-outline-secondary">← Retour</a>

                            <button type="submit" class="btn btn-cropa btn-lg" id="btn-valider">
                                {{ $dernier ? 'Valider mon inscription →' : 'Continuer →' }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const form = document.getElementById('form-etape');
            if (!form) return;

            const csrf = document.querySelector('meta[name="csrf-token"]').content;
            const btn = document.getElementById('btn-valider');
            const errors = document.getElementById('choix-errors');
            const totalEl = document.getElementById('total-display');
            const etape = form.dataset.etape;

            const URL_STORE = @json(route('cropa.inscription.store', ['etape' => $etape]));

            // Les packs qui couvrent le samedi : eux seuls donnent accès au dîner.
            // C'est le `groupe` qui porte la journée (pack_sam / pack_2j), pas le
            // code — les codes sont de simples numéros (PACK1…PACK9).
            const PACKS_SAMEDI = @json($packsSamedi);

            /** Les options réellement retenues (l'abstention porte une valeur vide). */
            function retenus() {
                return Array.from(form.querySelectorAll('input[type="radio"].cropa-option:checked'))
                    .filter((r) => r.value !== '');
            }

            /** Le dîner n'est proposé qu'avec un pack couvrant le samedi. */
            function majBlocDiner() {
                const blocs = form.querySelectorAll('[data-bloc-diner]');
                if (!blocs.length) return;

                const pack = form.querySelector('input[name="pack"]:checked');
                const ouvert = !!pack && PACKS_SAMEDI.includes(parseInt(pack.value, 10));

                blocs.forEach((bloc) => {
                    bloc.classList.toggle('d-none', !ouvert);

                    // Pack sans samedi : on retombe sur « Ne pas participer », sans
                    // quoi un dîner resterait coché dans un bloc devenu invisible.
                    if (!ouvert) {
                        const skip = bloc.querySelector('input[data-skip="1"]');
                        if (skip) skip.checked = true;
                    }
                });

                majDefautAccompagnants(pack);
            }

            /**
             * Une chambre double suppose un accompagnant : le compteur demarre a 1.
             * On ne force cette valeur que tant que l'internaute n'a pas touche au
             * compteur lui-meme — son choix explicite prime toujours.
             */
            function majDefautAccompagnants(pack) {
                const doubleRoom = !!pack && pack.dataset.chambreDouble === '1';

                form.querySelectorAll('.cropa-compteur').forEach((compteur) => {
                    if (compteur.dataset.touche === '1') return;

                    const champ = compteur.querySelector('.cropa-compteur-valeur');
                    const max = parseInt(compteur.dataset.max, 10) || 0;

                    champ.value = doubleRoom ? Math.min(1, max) : 0;
                    majCompteur(compteur);
                });
            }

            /** Le nombre d'accompagnants saisi sous le dîner retenu. */
            function nbAccompagnants() {
                const diner = retenus().find((r) => r.dataset.addons === '1');
                if (!diner) return 0;

                const champ = champAccompagnants(diner.value);

                return champ ? parseInt(champ.value, 10) || 0 : 0;
            }

            function champAccompagnants(dinerId) {
                const bloc = form.querySelector(`[data-conjoint-block="${dinerId}"]`);

                return bloc && bloc.querySelector('.cropa-accompagnants');
            }

            // Compteur : les boutons bornent la valeur entre 0 et le max du dîner.
            form.querySelectorAll('.cropa-compteur').forEach((compteur) => {
                const champ = compteur.querySelector('.cropa-compteur-valeur');
                const max = parseInt(compteur.dataset.max, 10) || 0;

                compteur.querySelectorAll('.cropa-compteur-btn').forEach((btn) => {
                    btn.addEventListener('click', () => {
                        const pas = parseInt(btn.dataset.pas, 10) || 0;
                        const valeur = parseInt(champ.value, 10) || 0;

                        champ.value = Math.max(0, Math.min(max, valeur + pas));
                        compteur.dataset.touche = '1';
                        majCompteur(compteur);
                        refresh();
                    });
                });

                // Saisie directe au clavier : on reborne sans surprendre l'internaute.
                champ.addEventListener('input', () => {
                    const valeur = parseInt(champ.value, 10);

                    if (!Number.isNaN(valeur)) {
                        champ.value = Math.max(0, Math.min(max, valeur));
                    }

                    compteur.dataset.touche = '1';
                    majCompteur(compteur);
                    refresh();
                });

                majCompteur(compteur);
            });

            /** Grise le bouton qui ne peut plus rien faire. */
            function majCompteur(compteur) {
                const champ = compteur.querySelector('.cropa-compteur-valeur');
                const max = parseInt(compteur.dataset.max, 10) || 0;
                const valeur = parseInt(champ.value, 10) || 0;

                compteur.querySelectorAll('.cropa-compteur-btn').forEach((btn) => {
                    const pas = parseInt(btn.dataset.pas, 10) || 0;
                    btn.disabled = pas < 0 ? valeur <= 0 : valeur >= max;
                });
            }

            /** Total courant, recalculé côté client puis confirmé par le serveur. */
            function refresh() {
                majBlocDiner();

                const rows = retenus();
                const diner = rows.find((r) => r.dataset.addons === '1') || null;

                // Le bloc des accompagnants ne s'affiche que sous le dîner retenu.
                form.querySelectorAll('[data-conjoint-block]').forEach((bloc) => {
                    const visible = diner && bloc.dataset.conjointBlock === diner.value;
                    bloc.classList.toggle('d-none', !visible);
                });

                // `.pack-carte` comme `.option-row` : sans cela, revenir sur
                // l'etape des packs laisserait l'ancienne carte marquee choisie.
                form.querySelectorAll('.option-row, .pack-carte').forEach((row) => {
                    const input = row.querySelector('input[type="radio"]');
                    row.classList.toggle('is-selected', !!input && input.checked && !input.disabled);
                });

                let total = 0;
                rows.forEach((r) => {
                    total += parseFloat(r.dataset.price || 0);
                });

                // Chaque accompagnant compte pour un tarif de dîner supplementaire.
                total += nbAccompagnants() * parseFloat(diner?.dataset.price || 0);

                // Au recapitulatif, le total vient du serveur : il porte sur toutes
                // les etapes, alors que cet ecran ne contient aucune option cochable
                // (seuls les modes de paiement y sont des radios). Le recalculer ici
                // donnerait 0. Ailleurs, l'affichage suit la selection en cours.
                if (totalEl && etape !== 'recap') {
                    totalEl.textContent = total + ' TND';
                }
            }

            form.addEventListener('change', refresh);

            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                errors.classList.add('d-none');

                const rows = retenus();
                const diner = rows.find((r) => r.dataset.addons === '1') || null;
                const paiement = form.querySelector('input[name="paiement_mode"]:checked');

                // Le pack est obligatoire : on le signale sans aller jusqu'au
                // serveur, qui applique la même règle.
                if (etape === 'packs' && !form.querySelector('input[name="pack"]:checked')) {
                    return signaler('Merci de choisir un pack pour poursuivre.');
                }

                if (form.querySelector('input[name="paiement_mode"]') && !paiement) {
                    return signaler('Merci de choisir un mode de paiement.');
                }

                btn.disabled = true;
                const libelle = btn.textContent;
                btn.textContent = 'Enregistrement…';

                const response = await fetch(URL_STORE, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        choix: rows.map((r) => parseInt(r.value, 10)),
                        accompagnants: diner ? nbAccompagnants() : 0,
                        paiement_mode: paiement ? paiement.value : '',
                        comment: (form.querySelector('#commentaire') || {}).value || '',
                    }),
                });

                const body = await response.json().catch(() => ({}));

                if (response.ok && body.success) {
                    window.location.href = body.redirect;
                    return;
                }

                btn.disabled = false;
                btn.textContent = libelle;

                errors.innerHTML = (body.errors ?
                    Object.values(body.errors).flat() : [body.message ||
                        'Une erreur est survenue. Merci de réessayer.'
                    ]
                ).map((m) => `<div>${m}</div>`).join('');
                errors.classList.remove('d-none');
            });

            function signaler(message) {
                errors.innerHTML = `<div>${message}</div>`;
                errors.classList.remove('d-none');
                errors.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            }

            refresh();
        })();
    </script>
@endpush