{% extends 'base.html.twig' %}

{% block title %}Créer ma boutique — YimaShop{% endblock %}

{# Site grand public : pas de modals d'application. #}
{% block app_version_modal %}{% endblock %}
{% block pwa_modals %}{% endblock %}

{% block body %}
{% set input_cls = 'w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:border-teal-500 focus:ring-1 focus:ring-teal-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white' %}
{% set label_cls = 'mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200' %}

{# Étape à afficher au retour serveur (erreurs de validation). #}
{% set e1 = form.firstName.vars.errors|length + form.lastName.vars.errors|length + form.email.vars.errors|length + form.phone.vars.errors|length + form.plainPassword.first.vars.errors|length + form.plainPassword.second.vars.errors|length + form.plainPassword.vars.errors|length %}
{% set e2 = form.companyName.vars.errors|length + form.city.vars.errors|length + form.ninea.vars.errors|length + form.rccm.vars.errors|length + form.logo.vars.errors|length %}
{% set e3 = form.offer.vars.errors|length + form.referralCode.vars.errors|length %}
{% set initialStep = e1 > 0 ? 0 : (e2 > 0 ? 1 : (e3 > 0 ? 2 : 0)) %}
{% set steps = ['Informations', 'Boutique', 'Offre', 'Récapitulatif'] %}

<div class="min-h-screen bg-gray-50 dark:bg-gray-950 lg:grid lg:grid-cols-5">
    {# ---- Colonne marketing ---- #}
    <aside class="hidden bg-teal-600 p-10 text-white lg:col-span-2 lg:flex lg:flex-col lg:justify-between">
        <a href="{{ path('app_home') }}" class="flex items-center">
            <img src="{{ asset('logo-removed.png') }}" alt="YimaShop" class="h-10 w-auto brightness-0 invert">
        </a>
        <div>
            <h2 class="text-3xl font-bold leading-snug">Ouvrez votre boutique en quelques minutes.</h2>
            <ul class="mt-8 space-y-4 text-teal-50">
                {% for t in ['Caisse, stock et crédits dans une seule application', 'Fonctionne même hors connexion', 'Validation rapide par notre équipe', 'Un code de parrainage ? Des mois offerts à la clé'] %}
                    <li class="flex items-start gap-3">
                        <svg class="mt-0.5 h-5 w-5 flex-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        <span>{{ t }}</span>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <p class="text-sm text-teal-100">Déjà inscrit ? <a href="{{ pwaUrl|default('') ?: path('app_login') }}" class="font-semibold underline">Se connecter à l'application</a></p>
    </aside>

    {# ---- Colonne formulaire ---- #}
    <main class="flex items-start justify-center px-5 py-8 sm:py-10 lg:col-span-3">
        <div class="w-full max-w-2xl">
            <div class="mb-6">
                <a href="{{ path('app_home') }}" class="mb-6 inline-flex items-center lg:hidden">
                    <img src="{{ asset('logo-removed.png') }}" alt="YimaShop" class="h-9 w-auto dark:brightness-0 dark:invert">
                </a>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Créer ma boutique</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Votre accès sera activé après validation de votre inscription.</p>
            </div>

            <div class="fixed top-4 right-4 z-50 w-full max-w-sm" data-turbo-temporary>
                {% include 'flowbite_components/layout/_notifications_zone.html.twig' %}
            </div>

            {# ---- Indicateur d'étapes ---- #}
            <ol id="stepper" class="mb-8 flex items-center">
                {% for label in steps %}
                    <li class="flex flex-1 items-center {{ not loop.last ? 'after:mx-2 after:h-0.5 after:flex-1 after:rounded after:bg-gray-200 after:content-[\'\'] dark:after:bg-gray-700' : '' }}" data-goto="{{ loop.index0 }}">
                        <span class="flex items-center gap-2 cursor-pointer">
                            <span class="step-dot flex h-8 w-8 flex-none items-center justify-center rounded-full border-2 border-gray-300 bg-white text-sm font-semibold text-gray-500 dark:border-gray-600 dark:bg-gray-800">{{ loop.index }}</span>
                            <span class="step-label hidden text-sm font-medium text-gray-500 sm:block">{{ label }}</span>
                        </span>
                    </li>
                {% endfor %}
            </ol>

            {{ form_start(form, {'attr': {'id': 'register-form', 'novalidate': 'novalidate', 'enctype': 'multipart/form-data', 'data-initial-step': initialStep}}) }}

                {# ---- Étape 1 : informations ---- #}
                <section class="step" data-step="0">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {# attr fusionné : form_widget remplace la variable `attr` du type, ce qui perdrait maxlength/placeholder. #}
                        <div>{{ form_label(form.firstName, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.firstName, {attr: form.firstName.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.firstName) }}</div>
                        <div>{{ form_label(form.lastName, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.lastName, {attr: form.lastName.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.lastName) }}</div>
                        <div>{{ form_label(form.email, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.email, {attr: form.email.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.email) }}</div>
                        <div>{{ form_label(form.phone, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.phone, {attr: form.phone.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.phone) }}</div>
                        <div>
                            {{ form_label(form.plainPassword.first, null, {label_attr: {class: label_cls}}) }}
                            <div class="relative">
                                {{ form_widget(form.plainPassword.first, {attr: {class: input_cls ~ ' pr-11', 'data-password-input': ''}}) }}
                                <button type="button" data-password-toggle class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-teal-600" aria-label="Afficher ou masquer le mot de passe"></button>
                            </div>
                            {{ form_errors(form.plainPassword.first) }}
                        </div>
                        <div>
                            {{ form_label(form.plainPassword.second, null, {label_attr: {class: label_cls}}) }}
                            <div class="relative">
                                {{ form_widget(form.plainPassword.second, {attr: {class: input_cls ~ ' pr-11', 'data-password-input': ''}}) }}
                                <button type="button" data-password-toggle class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-teal-600" aria-label="Afficher ou masquer le mot de passe"></button>
                            </div>
                            {{ form_errors(form.plainPassword.second) }}
                        </div>
                    </div>
                </section>

                {# ---- Étape 2 : boutique ---- #}
                <section class="step" data-step="1" hidden>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">{{ form_label(form.companyName, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.companyName, {attr: form.companyName.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.companyName) }}</div>
                        <div>{{ form_label(form.city, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.city, {attr: form.city.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.city) }}</div>
                        <div>
                            {{ form_label(form.ninea, null, {label_attr: {class: label_cls}}) }}
                            {{ form_widget(form.ninea, {attr: form.ninea.vars.attr|merge({class: input_cls})}) }}
                            {{ form_help(form.ninea) }}
                            {{ form_errors(form.ninea) }}
                        </div>
                        <div class="sm:col-span-2">{{ form_label(form.rccm, null, {label_attr: {class: label_cls}}) }}{{ form_widget(form.rccm, {attr: form.rccm.vars.attr|merge({class: input_cls})}) }}{{ form_errors(form.rccm) }}</div>
                        <div class="sm:col-span-2">
                            {{ form_label(form.logo, null, {label_attr: {class: label_cls}}) }}
                            {{ form_widget(form.logo, {attr: {class: 'block w-full text-sm text-gray-600 file:mr-3 file:rounded-lg file:border-0 file:bg-teal-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-teal-700 hover:file:bg-teal-100 dark:text-gray-300', accept: 'image/png,image/jpeg,image/webp', 'data-logo-input': ''}}) }}
                            {{ form_errors(form.logo) }}
                            {# Aperçu du logo #}
                            <div id="logo-preview" class="mt-3 hidden items-center gap-3">
                                <button type="button" data-logo-open class="group relative block h-20 w-20 flex-none overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700" title="Cliquer pour agrandir">
                                    <img data-logo-thumb src="" alt="Aperçu du logo" class="h-full w-full object-cover">
                                    <span class="absolute inset-0 hidden items-center justify-center bg-black/40 text-white group-hover:flex">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
                                    </span>
                                </button>
                                <div class="min-w-0">
                                    <p data-logo-name class="truncate text-sm font-medium text-gray-700 dark:text-gray-200"></p>
                                    <button type="button" data-logo-remove class="mt-1 text-xs font-medium text-red-600 hover:underline">Retirer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {# ---- Étape 3 : offre & parrainage ---- #}
                <section class="step" data-step="2" hidden>
                    {% set offerDetails = {
                        'pos': {
                            price: posPrice|default(0),
                            tagline: 'La caisse complète pour votre boutique physique.',
                            reco: false,
                            features: ['Vente, caisse &amp; tickets', 'Stock &amp; inventaire', 'Clients &amp; crédits', 'Fournisseurs &amp; trésorerie', posStorageGb|default(3) ~ ' Go de stockage', posSms|default(50) ~ ' SMS de rappel / mois']
                        },
                        'ecommerce': {
                            price: ecommercePrice|default(0),
                            tagline: 'Vendez aussi en ligne, synchronisé avec votre caisse.',
                            reco: true,
                            features: ['Tout « App seule »', 'Boutique en ligne WooCommerce', 'Synchro produits, stock &amp; images', 'Commande WhatsApp', ecommerceStorageGb|default(10) ~ ' Go de stockage', ecommerceSms|default(150) ~ ' SMS de rappel / mois']
                        },
                        'premium': {
                            price: premiumPrice|default(0),
                            tagline: 'Sans limite, pour les commerces qui tournent fort.',
                            reco: false,
                            features: ['Tout « App seule »', 'Stockage <strong>illimité</strong>', 'SMS de rappel <strong>illimités</strong>', 'Support prioritaire']
                        }
                    } %}
                    <div class="space-y-3">
                        {% for choice in form.offer %}
                            {% set d = offerDetails[choice.vars.value] %}
                            <label class="relative flex cursor-pointer gap-3 rounded-xl border-2 border-gray-200 p-4 transition hover:border-teal-300 has-[:checked]:border-teal-600 has-[:checked]:bg-teal-50 dark:border-gray-700 dark:has-[:checked]:border-teal-600 dark:has-[:checked]:bg-teal-950/30">
                                {% if d and d.reco %}<span class="absolute -top-2.5 right-4 rounded-full bg-teal-600 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white">Recommandé</span>{% endif %}
                                {{ form_widget(choice, {attr: {class: 'mt-1 h-4 w-4 flex-none text-teal-600 focus:ring-teal-500'}}) }}
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-baseline justify-between gap-2">
                                        <span data-offer-name class="font-semibold text-gray-900 dark:text-white">{{ choice.vars.label }}</span>
                                        {% if d %}<span class="whitespace-nowrap text-base font-extrabold text-gray-900 dark:text-white">{{ d.price|number_format(0, ',', ' ') }} <span class="text-xs font-medium text-gray-400">FCFA/mois</span></span>{% endif %}
                                    </div>
                                    {% if d %}
                                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ d.tagline }}</p>
                                        <ul class="mt-2 grid grid-cols-1 gap-1 text-xs text-gray-600 sm:grid-cols-2 dark:text-gray-300">
                                            {% for f in d.features %}
                                                <li class="flex items-start gap-1.5"><svg class="mt-0.5 h-3.5 w-3.5 flex-none text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg><span>{{ f|raw }}</span></li>
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                </div>
                            </label>
                        {% endfor %}
                    </div>
                    {{ form_errors(form.offer) }}
                    <div class="mt-5">
                        {{ form_label(form.referralCode, null, {label_attr: {class: label_cls}}) }}
                        {{ form_widget(form.referralCode, {attr: form.referralCode.vars.attr|merge({class: input_cls, placeholder: 'YIMA-XXXXXX'})}) }}
                        {{ form_errors(form.referralCode) }}
                    </div>
                </section>

                {# ---- Étape 4 : récapitulatif ---- #}
                <section class="step" data-step="3" hidden>
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-teal-700 dark:text-teal-400">Vérifiez vos informations</h2>
                    <div class="space-y-4">
                        {% set card = 'rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900' %}
                        {% set dt = 'text-xs uppercase tracking-wide text-gray-400' %}
                        {% set dd = 'text-sm font-medium text-gray-900 dark:text-white' %}
                        <div class="{{ card }}">
                            <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-200">Gérant
                                <button type="button" data-recap-edit="0" class="ml-auto text-xs font-medium text-teal-600 hover:underline">Modifier</button>
                            </h3>
                            <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div><dt class="{{ dt }}">Nom complet</dt><dd class="{{ dd }}" data-recap="name">—</dd></div>
                                <div><dt class="{{ dt }}">Email</dt><dd class="{{ dd }}" data-recap="email">—</dd></div>
                                <div><dt class="{{ dt }}">Téléphone</dt><dd class="{{ dd }}" data-recap="phone">—</dd></div>
                            </dl>
                        </div>
                        <div class="{{ card }}">
                            <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-200">Boutique
                                <button type="button" data-recap-edit="1" class="ml-auto text-xs font-medium text-teal-600 hover:underline">Modifier</button>
                            </h3>
                            <div class="flex items-start gap-4">
                                <button type="button" data-logo-open data-recap-logo class="hidden h-16 w-16 flex-none overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700" title="Agrandir le logo">
                                    <img data-recap-logo-thumb src="" alt="Logo" class="h-full w-full object-cover">
                                </button>
                                <dl class="grid flex-1 grid-cols-1 gap-3 sm:grid-cols-2">
                                    <div><dt class="{{ dt }}">Nom</dt><dd class="{{ dd }}" data-recap="companyName">—</dd></div>
                                    <div><dt class="{{ dt }}">Ville</dt><dd class="{{ dd }}" data-recap="city">—</dd></div>
                                    <div><dt class="{{ dt }}">NINEA</dt><dd class="{{ dd }}" data-recap="ninea">—</dd></div>
                                    <div><dt class="{{ dt }}">RCCM</dt><dd class="{{ dd }}" data-recap="rccm">—</dd></div>
                                </dl>
                            </div>
                        </div>
                        <div class="{{ card }}">
                            <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-200">Offre &amp; parrainage
                                <button type="button" data-recap-edit="2" class="ml-auto text-xs font-medium text-teal-600 hover:underline">Modifier</button>
                            </h3>
                            <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div><dt class="{{ dt }}">Offre</dt><dd class="{{ dd }}" data-recap="offer">—</dd></div>
                                <div><dt class="{{ dt }}">Code parrainage</dt><dd class="{{ dd }}" data-recap="referralCode">—</dd></div>
                            </dl>
                        </div>
                    </div>
                    <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                        En envoyant votre demande, vous acceptez d'être recontacté par notre équipe pour la validation de votre boutique.
                    </p>
                </section>

                {# ---- Navigation ---- #}
                <div class="mt-8 flex items-center justify-between gap-3">
                    <button type="button" data-prev class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-100 disabled:invisible dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">
                        Précédent
                    </button>
                    <button type="button" data-next class="rounded-lg bg-teal-600 px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                        Suivant
                    </button>
                    <button type="submit" data-submit hidden class="rounded-lg bg-teal-600 px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                        Envoyer ma demande
                    </button>
                </div>
            {{ form_end(form) }}
        </div>
    </main>
</div>

{# ---- Overlay (lightbox) du logo ---- #}
<div id="logo-overlay" class="fixed inset-0 z-[80] hidden items-center justify-center bg-black/80 p-6" role="dialog" aria-modal="true">
    <button type="button" data-logo-close class="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20" aria-label="Fermer">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
    <img data-logo-full src="" alt="Aperçu du logo" class="max-h-full max-w-full rounded-lg object-contain shadow-2xl">
</div>

<script>
(function () {
    var form = document.getElementById('register-form');
    if (!form) { return; }

    /* ---- Œil : bascule type + icône (œil / œil barré) ---- */
    var EYE = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7Z"/><circle cx="12" cy="12" r="2.5"/></svg>';
    var EYE_OFF = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5M9.4 5.2A9.5 9.5 0 0 1 12 5c6 0 9.5 7 9.5 7a15.6 15.6 0 0 1-2.9 3.6M6.2 6.7A15.7 15.7 0 0 0 2.5 12S6 19 12 19a9.3 9.3 0 0 0 3.3-.6"/></svg>';
    form.querySelectorAll('[data-password-toggle]').forEach(function (btn) {
        btn.innerHTML = EYE;
        btn.addEventListener('click', function () {
            var input = btn.parentElement.querySelector('[data-password-input]');
            if (!input) { return; }
            var show = input.type === 'password';
            input.type = show ? 'text' : 'password';
            btn.innerHTML = show ? EYE_OFF : EYE;
        });
    });

    /* ---- Aperçu du logo + overlay ---- */
    var logoInput = form.querySelector('[data-logo-input]');
    var logoPreview = document.getElementById('logo-preview');
    var logoThumb = form.querySelector('[data-logo-thumb]');
    var logoName = form.querySelector('[data-logo-name]');
    var recapLogoBtn = form.querySelector('[data-recap-logo]');
    var recapLogoThumb = form.querySelector('[data-recap-logo-thumb]');
    var overlay = document.getElementById('logo-overlay');
    var overlayImg = overlay ? overlay.querySelector('[data-logo-full]') : null;
    var logoUrl = '';

    function setLogo(file) {
        if (logoUrl) { URL.revokeObjectURL(logoUrl); logoUrl = ''; }
        if (file && file.type && file.type.indexOf('image/') === 0) {
            logoUrl = URL.createObjectURL(file);
            if (logoThumb) { logoThumb.src = logoUrl; }
            if (logoName) { logoName.textContent = file.name; }
            if (recapLogoThumb) { recapLogoThumb.src = logoUrl; }
            if (logoPreview) { logoPreview.classList.remove('hidden'); logoPreview.classList.add('flex'); }
        } else {
            if (logoPreview) { logoPreview.classList.add('hidden'); logoPreview.classList.remove('flex'); }
        }
    }
    if (logoInput) {
        logoInput.addEventListener('change', function () { setLogo(logoInput.files && logoInput.files[0]); });
    }
    var logoRemove = form.querySelector('[data-logo-remove]');
    if (logoRemove) {
        logoRemove.addEventListener('click', function () {
            if (logoInput) { logoInput.value = ''; }
            setLogo(null);
        });
    }
    function openOverlay() {
        if (!overlay || !logoUrl) { return; }
        if (overlayImg) { overlayImg.src = logoUrl; }
        overlay.classList.remove('hidden'); overlay.classList.add('flex');
    }
    function closeOverlay() { if (overlay) { overlay.classList.add('hidden'); overlay.classList.remove('flex'); } }
    form.querySelectorAll('[data-logo-open]').forEach(function (b) { b.addEventListener('click', openOverlay); });
    if (overlay) {
        overlay.addEventListener('click', function (e) { if (e.target === overlay || e.target.closest('[data-logo-close]')) { closeOverlay(); } });
        document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closeOverlay(); } });
    }

    /* ---- Récapitulatif ---- */
    function val(name) {
        var el = form.querySelector('[name$="[' + name + ']"]');
        return el ? el.value.trim() : '';
    }
    function setRecap(key, text) {
        var el = form.querySelector('[data-recap="' + key + '"]');
        if (el) { el.textContent = text && text.length ? text : '—'; }
    }
    function populateRecap() {
        var first = val('firstName'), last = val('lastName');
        setRecap('name', (first + ' ' + last).trim());
        setRecap('email', val('email'));
        setRecap('phone', val('phone'));
        setRecap('companyName', val('companyName'));
        setRecap('city', val('city'));
        setRecap('ninea', val('ninea'));
        setRecap('rccm', val('rccm'));
        var offer = form.querySelector('[name$="[offer]"]:checked');
        var offerName = offer ? offer.closest('label').querySelector('[data-offer-name]') : null;
        setRecap('offer', offerName ? offerName.textContent.trim() : '—');
        setRecap('referralCode', val('referralCode'));
        if (recapLogoBtn) {
            if (logoUrl) { recapLogoBtn.classList.remove('hidden'); }
            else { recapLogoBtn.classList.add('hidden'); }
        }
    }

    /* ---- Stepper ---- */
    var steps = Array.prototype.slice.call(form.querySelectorAll('.step'));
    var stepper = document.getElementById('stepper');
    var dots = stepper ? Array.prototype.slice.call(stepper.querySelectorAll('[data-goto]')) : [];
    var btnPrev = form.querySelector('[data-prev]');
    var btnNext = form.querySelector('[data-next]');
    var btnSubmit = form.querySelector('[data-submit]');
    var current = parseInt(form.getAttribute('data-initial-step') || '0', 10) || 0;

    function paintDots() {
        dots.forEach(function (li, i) {
            var dot = li.querySelector('.step-dot');
            var label = li.querySelector('.step-label');
            dot.className = 'step-dot flex h-8 w-8 flex-none items-center justify-center rounded-full border-2 text-sm font-semibold ';
            if (i < current) {
                dot.className += 'border-teal-600 bg-teal-600 text-white';
                dot.innerHTML = '<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
            } else if (i === current) {
                dot.className += 'border-teal-600 bg-white text-teal-700 dark:bg-gray-900';
                dot.textContent = String(i + 1);
            } else {
                dot.className += 'border-gray-300 bg-white text-gray-500 dark:border-gray-600 dark:bg-gray-800';
                dot.textContent = String(i + 1);
            }
            if (label) { label.className = 'step-label hidden text-sm font-medium sm:block ' + (i <= current ? 'text-teal-700 dark:text-teal-400' : 'text-gray-500'); }
        });
    }

    function show(i) {
        current = Math.max(0, Math.min(steps.length - 1, i));
        steps.forEach(function (s, idx) { s.hidden = idx !== current; });
        var last = current === steps.length - 1;
        btnPrev.disabled = current === 0;
        btnNext.hidden = last;
        btnSubmit.hidden = !last;
        if (last) { populateRecap(); }
        paintDots();
        var top = form.getBoundingClientRect().top + window.scrollY - 90;
        window.scrollTo({ top: top < 0 ? 0 : top, behavior: 'smooth' });
    }

    function validate(i) {
        var invalid = null;
        steps[i].querySelectorAll('input, select, textarea').forEach(function (el) {
            if (el.disabled || el.type === 'file') { return; }
            if (!el.checkValidity()) { if (!invalid) { invalid = el; } }
        });
        if (invalid) { invalid.reportValidity(); return false; }
        if (i === 0) {
            var p = steps[0].querySelectorAll('[data-password-input]');
            if (p.length === 2 && p[0].value !== p[1].value) {
                p[1].setCustomValidity('Les deux mots de passe ne correspondent pas.');
                p[1].reportValidity();
                p[1].addEventListener('input', function () { p[1].setCustomValidity(''); }, { once: true });
                return false;
            }
        }
        return true;
    }

    btnNext.addEventListener('click', function () { if (validate(current)) { show(current + 1); } });
    btnPrev.addEventListener('click', function () { show(current - 1); });
    dots.forEach(function (li, i) {
        li.addEventListener('click', function () {
            if (i < current) { show(i); }
            else if (i > current && validate(current)) { show(current + 1); }
        });
    });
    form.querySelectorAll('[data-recap-edit]').forEach(function (b) {
        b.addEventListener('click', function () { show(parseInt(b.getAttribute('data-recap-edit'), 10) || 0); });
    });

    show(current);
})();
</script>
{% endblock %}