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

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

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

            @if ($connecte)
                {{-- Connecté sans jour enregistré : typiquement après un magic login,
                 où la session est neuve. Ses informations sont préremplies et
                 modifiables, sauf l'email qui identifie le compte. --}}
                <form method="POST" action="{{ route('cropa.profil.update') }}">
                    @csrf

                    <div class="cropa-card p-4 mb-4">
                        <h2 class="h5 mb-1">Vos informations</h2>
                        <p class="session-meta mb-4">
                            Bonjour {{ $connecte->firstname }} {{ $connecte->name }}, vérifiez vos
                            informations avant de choisir votre pack.
                        </p>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                @foreach ($errors->all() as $erreur)
                                    <div>{{ $erreur }}</div>
                                @endforeach
                            </div>
                        @endif

                        <div class="cropa-field">
                            <label for="p-email" class="form-label">Email</label>
                            <div>
                                {{-- Non modifiable : clé d'identité du compte et adresse
                                 du lien de connexion. --}}
                                <input type="email" class="form-control" id="p-email" value="{{ $connecte->email }}"
                                    disabled readonly>
                                {{-- <div class="form-text">
                                    Pour changer d'adresse, contactez-nous au 29752873.
                                </div> --}}
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-phone" class="form-label">Téléphone <span class="text-danger">*</span></label>
                            <div>
                                <input type="tel" class="form-control" id="p-phone" name="phone"
                                    value="{{ old('phone', $connecte->phone) }}" required>
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-firstname" class="form-label">Prénom <span class="text-danger">*</span></label>
                            <div>
                                <input type="text" class="form-control" id="p-firstname" name="firstname"
                                    value="{{ old('firstname', $connecte->firstname) }}" required>
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-name" class="form-label">Nom <span class="text-danger">*</span></label>
                            <div>
                                <input type="text" class="form-control" id="p-name" name="name"
                                    value="{{ old('name', $connecte->name) }}" required>
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-specialty" class="form-label">Spécialité <span
                                    class="text-danger">*</span></label>
                            <div>
                                @php
                                    // Une spécialité hors liste (saisie via « Autre », ou
                                    // héritée d'un profil créé pour un autre congrès) doit
// rouvrir le champ libre plutôt que d'être perdue.
                                    $specialiteActuelle = old('specialty', $connecte->specialty);
                                    $specialiteLibre = old('specialty_autre', $specialiteActuelle);
                                    $estAutre =
                                        filled($specialiteActuelle) && !$specialites->contains($specialiteActuelle);
                                @endphp

                                <select class="form-select" id="p-specialty" name="specialty" required data-specialty-select
                                    data-autre-cible="p-champ-specialty-autre">
                                    <option value="">Sélectionner une spécialité</option>
                                    @foreach ($specialites as $specialite)
                                        <option value="{{ $specialite }}" @selected($specialiteActuelle === $specialite)>
                                            {{ $specialite }}
                                        </option>
                                    @endforeach
                                    {{-- Dernier choix : ouvre le champ libre ci-dessous. --}}
                                    <option value="Autre" @selected($estAutre)>Autre</option>
                                </select>

                                <div class="mt-2 {{ $estAutre ? '' : 'd-none' }}" id="p-champ-specialty-autre">
                                    <input type="text" class="form-control" name="specialty_autre" id="p-specialty-autre"
                                        maxlength="255" placeholder="Précisez votre spécialité"
                                        value="{{ $estAutre ? $specialiteLibre : '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-country" class="form-label">Pays <span class="text-danger">*</span></label>
                            <div>
                                <select class="form-select" id="p-country" name="country" required>
                                    @foreach ($pays as $unPays)
                                        <option value="{{ $unPays }}" @selected(old('country', $connecte->country ?: 'TUNISIE') === $unPays)>
                                            {{ $unPays }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="p-gouvernorat" class="form-label">Gouvernorat</label>
                            <div>
                                <select class="form-select" id="p-gouvernorat" name="gouvernorat">
                                    <option value="">Sélectionner un gouvernorat</option>
                                    @foreach ($gouvernorats as $gouvernorat)
                                        <option value="{{ $gouvernorat }}" @selected(old('gouvernorat', $connecte->gouvernorat) === $gouvernorat)>
                                            {{ $gouvernorat }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-cropa btn-lg">Continuer →</button>
                    </div>
                </form>
            @else
                <form id="form-inscription" novalidate>

                    {{-- Étape A : identification. L'email et le téléphone identifient une
                 personne sur la plateforme ; si l'un des deux est connu, on envoie
                 un lien de connexion au lieu de créer un doublon. --}}
                    <div class="cropa-card p-4 mb-4">
                        <h2 class="h5 mb-1">Informations personnelles</h2>
                        <p class="session-meta mb-4">Tous les champs marqués * sont obligatoires</p>

                        {{-- Labels devant les champs : `.cropa-field` passe en 2 colonnes
                     à partir de md, et repasse au-dessus sur mobile. --}}
                        <div class="cropa-field">
                            <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                            <div>
                                <input type="email" class="form-control" id="email" name="email" required
                                    autocomplete="email">
                            </div>
                        </div>

                        <div class="cropa-field">
                            <label for="phone" class="form-label">Téléphone <span class="text-danger">*</span></label>
                            <div>
                                {{-- `intl-tel-input` habille ce champ : indicatif Tunisie par défaut. --}}
                                <input type="tel" class="form-control" id="phone" name="phone" required
                                    autocomplete="tel">
                                <div class="invalid-feedback d-block phone-invalid-feedback"></div>
                            </div>
                        </div>

                        {{-- Étape B : le reste du formulaire, révélé si le compte est nouveau --}}
                        <div class="d-none" id="bloc-profil">
                            <div class="cropa-field">
                                <label for="firstname" class="form-label">Prénom <span
                                        class="text-danger">*</span></label>
                                <div>
                                    <input type="text" class="form-control" id="firstname" name="firstname"
                                        autocomplete="given-name">
                                </div>
                            </div>

                            <div class="cropa-field">
                                <label for="name" class="form-label">Nom <span class="text-danger">*</span></label>
                                <div>
                                    <input type="text" class="form-control" id="name" name="name"
                                        autocomplete="family-name">
                                </div>
                            </div>

                            <div class="cropa-field">
                                <label for="specialty" class="form-label">Spécialité <span
                                        class="text-danger">*</span></label>
                                <div>
                                    <select class="form-select" id="specialty" name="specialty" data-specialty-select
                                        data-autre-cible="champ-specialty-autre">
                                        <option value="">Sélectionner une spécialité</option>
                                        @foreach ($specialites as $specialite)
                                            <option value="{{ $specialite }}">{{ $specialite }}</option>
                                        @endforeach
                                        {{-- Dernier choix : ouvre le champ libre ci-dessous. --}}
                                        <option value="Autre">Autre</option>
                                    </select>

                                    <div class="mt-2 d-none" id="champ-specialty-autre">
                                        <input type="text" class="form-control" name="specialty_autre"
                                            id="specialty-autre" maxlength="255" placeholder="Précisez votre spécialité">
                                    </div>

                                </div>
                            </div>

                            <div class="cropa-field">
                                <label for="country" class="form-label">Pays <span class="text-danger">*</span></label>
                                <div>
                                    <select class="form-select" id="country" name="country">
                                        @foreach ($pays as $unPays)
                                            <option value="{{ $unPays }}" @selected($unPays === 'TUNISIE')>
                                                {{ $unPays }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Les gouvernorats sont tunisiens : le champ ne s'affiche que
                         si le pays retenu est la Tunisie. --}}
                            <div class="cropa-field" id="champ-gouvernorat">
                                <label for="gouvernorat" class="form-label">Gouvernorat <span
                                        class="text-danger">*</span></label>
                                <div>
                                    <select class="form-select" id="gouvernorat" name="gouvernorat">
                                        <option value="">Sélectionner un gouvernorat</option>
                                        @foreach ($gouvernorats as $gouvernorat)
                                            <option value="{{ $gouvernorat }}">{{ $gouvernorat }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

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

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-cropa btn-lg" id="btn-continuer">
                            Suivant →
                        </button>
                    </div>
                </form>
            @endif

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Spécialité « Autre » : ouvre un champ libre. Vaut pour les deux formulaires
        // (connecté et anonyme), d'où un bloc à part, avant le garde-fou ci-dessous.
        (function() {
            document.querySelectorAll('[data-specialty-select]').forEach((select) => {
                const bloc = document.getElementById(select.dataset.autreCible);
                if (!bloc) return;

                const champ = bloc.querySelector('input');

                function maj() {
                    const autre = select.value === 'Autre';

                    bloc.classList.toggle('d-none', !autre);

                    if (!champ) return;

                    // `required` suit le seul affichage du champ : un champ caché et
                    // obligatoire bloquerait l'envoi sans rien de visible à corriger.
                    // On ne le lie pas à `select.required`, que le formulaire anonyme
                    // n'active qu'à l'étape B - « Autre » choisi avant serait resté
                    // facultatif. Le serveur applique de toute façon `required_if`.
                    champ.required = autre;

                    if (!autre) champ.value = '';
                }

                select.addEventListener('change', maj);
                maj();
            });
        })();

        (function() {
            // Le formulaire d'identification n'existe pas pour un utilisateur déjà
            // connecté : il ne voit que ses informations personnelles.
            if (!document.getElementById('form-inscription')) return;

            const csrf = document.querySelector('meta[name="csrf-token"]').content;

            const form = document.getElementById('form-inscription');
            const btn = document.getElementById('btn-continuer');
            const errors = document.getElementById('form-errors');
            const info = document.getElementById('form-info');
            const emailInput = document.getElementById('email');
            const phoneInput = document.getElementById('phone');
            const phoneError = document.querySelector('.phone-invalid-feedback');

            // Champ telephone international, meme configuration que la creation de compte
            // Mediknode : Tunisie par defaut, liste d'indicatifs partagee.
            const iti = window.intlTelInput(phoneInput, {
                initialCountry: 'tn',
                onlyCountries: @include('frontend.cropa.partials.phone-countries'),
                utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@20.3.0/build/js/utils.js',
            });

            /** Le numero au format international (E.164), ou la saisie brute en secours. */
            function numeroInternational() {
                const e164 = iti.getNumber();

                return e164 !== '' ? e164 : phoneInput.value.trim();
            }

            /** Valide le numero ; affiche le message sous le champ le cas echeant. */
            function telephoneValide() {
                if (phoneInput.value.trim() === '') {
                    phoneError.textContent = 'Le telephone est obligatoire.';
                    return false;
                }

                if (!iti.isValidNumber()) {
                    phoneError.textContent = 'Veuillez saisir un numero de telephone valide.';
                    return false;
                }

                phoneError.textContent = '';
                return true;
            }

            // Les blocs révélés une fois l'identification passée.
            const blocsProfil = ['bloc-profil']
                .map((id) => document.getElementById(id))
                .filter(Boolean);

            // Les champs qui ne deviennent obligatoires qu'à l'étape B.
            const champsProfil = ['firstname', 'name', 'specialty', 'country']
                .map((id) => document.getElementById(id))
                .filter(Boolean);

            const countrySelect = document.getElementById('country');
            const gouvernoratField = document.getElementById('champ-gouvernorat');
            const gouvernoratInput = document.getElementById('gouvernorat');

            /** Le gouvernorat ne concerne que la Tunisie. */
            function majGouvernorat() {
                if (!countrySelect || !gouvernoratField) return;

                const enTunisie = countrySelect.value === 'TUNISIE';

                gouvernoratField.classList.toggle('d-none', !enTunisie);
                gouvernoratInput.required = enTunisie && profilVisible;

                if (!enTunisie) gouvernoratInput.value = '';
            }

            const URL_CHECK_EMAIL = @json(route('cropa.check-email'));
            const URL_REGISTER = @json(route('cropa.register'));

            // false = on identifie ; true = le profil est affiché, on peut créer le compte.
            let profilVisible = false;

            function post(url, data) {
                return fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(data),
                }).then(async (r) => ({
                    ok: r.ok,
                    status: r.status,
                    body: await r.json().catch(() => ({}))
                }));
            }

            function show(box, messages) {
                box.innerHTML = [].concat(messages).map((m) => `<div>${m}</div>`).join('');
                box.classList.remove('d-none');
            }

            function reset() {
                errors.classList.add('d-none');
                info.classList.add('d-none');
            }

            function busy(state, label) {
                btn.disabled = state;
                btn.textContent = state ? 'Vérification…' : label;
            }

            function afficherProfil() {
                profilVisible = true;
                blocsProfil.forEach((bloc) => bloc.classList.remove('d-none'));
                champsProfil.forEach((champ) => {
                    champ.required = true;
                });
                majGouvernorat();
                // Rétablit le champ « Autre » si la spécialité l'exige encore : l'étape A
                // l'avait remis facultatif en masquant le bloc.
                form.querySelectorAll('[data-specialty-select]')
                    .forEach((s) => s.dispatchEvent(new Event('change')));

                btn.textContent = 'Continuer →';
                document.getElementById('firstname').focus();
            }

            /** Étape A : email/téléphone déjà connus ? */
            async function identifier() {
                busy(true);

                const {
                    ok,
                    status,
                    body
                } = await post(URL_CHECK_EMAIL, {
                    email: emailInput.value,
                    phone: numeroInternational(),
                });

                busy(false, 'Suivant →');

                if (status === 403) {
                    show(errors, body.message);
                    return;
                }

                if (!ok) {
                    show(errors, body.errors ?
                        Object.values(body.errors).flat() :
                        (body.message || 'Une erreur est survenue. Merci de réessayer.'));
                    return;
                }

                // Compte connu : un lien de connexion a été envoyé, on n'affiche pas la suite.
                if (body.status === 'exists') {
                    show(info, body.message);
                    return;
                }

                afficherProfil();
            }

            /** Étape B : création du compte. */
            async function creerLeCompte() {
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                if (!telephoneValide()) {
                    return;
                }

                busy(true);

                // Le numero part au format international : la recherche de doublon par
                // telephone doit comparer des valeurs homogenes.
                const payload = Object.fromEntries(new FormData(form).entries());
                payload.phone = numeroInternational();
                const {
                    ok,
                    body
                } = await post(URL_REGISTER, payload);

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

                busy(false, 'Continuer →');

                if (body.status === 'exists') {
                    show(info, body.message);
                    return;
                }

                show(errors, body.errors ?
                    Object.values(body.errors).flat() :
                    (body.message || 'Une erreur est survenue. Merci de réessayer.'));
            }

            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                reset();

                if (!profilVisible) {
                    // La validation navigateur ne porte encore que sur email et téléphone.
                    if (!form.checkValidity()) {
                        form.reportValidity();
                        return;
                    }
                    if (!telephoneValide()) {
                        return;
                    }
                    await identifier();
                    return;
                }

                await creerLeCompte();
            });

            if (countrySelect) {
                countrySelect.addEventListener('change', majGouvernorat);
            }

            // Changer d'email ou de téléphone après avoir été identifié : on repart de
            // l'étape A, l'identification n'étant plus valable.
            [emailInput, phoneInput].forEach((champ) => {
                champ.addEventListener('input', () => {
                    if (!profilVisible) return;

                    profilVisible = false;
                    blocsProfil.forEach((bloc) => bloc.classList.add('d-none'));
                    champsProfil.forEach((c) => {
                        c.required = false;
                    });
                    if (gouvernoratInput) gouvernoratInput.required = false;
                    // Le champ « Autre » redevient facultatif avec le bloc qui le porte :
                    // caché et obligatoire, il bloquerait `checkValidity()` de l'étape A.
                    form.querySelectorAll('input[name="specialty_autre"]')
                        .forEach((c) => {
                            c.required = false;
                        });
                    btn.textContent = 'Suivant →';
                    reset();
                });
            });
        })();
    </script>
@endpush