@extends('frontend.jpt.layout.mainlayout')

@section('content')
    <section class="cover-background full-screens py-0 md-h-250px sm-h-250px"
        style="background-image:url({{ URL::asset('/assets/frontend/jpt/img/banner-1.jpg') }});">
        {{-- <div class="opacity-very-light bg-black"></div> --}}
        <div class="opacity-light bg-black"></div>
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-300px sm-h-300px">
                <div class="col-xl-10 col-lg-10 col-md-10 position-relative z-index-1 mt-5">
                    <div class="d-flex justify-content-center">
                        <h3 class="alt-font text-white fw-600 text-center letter-spacing-2px pt-2 pt-sm-0 mt-5">Inscription
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-4 pb-4">
        <div class="container">
            {{-- <h3 class="alt-font text-dark-gray fw-600 text-center mb-4">Inscription aux Journées Parapharmaceutiques 2026
            </h3> --}}

            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">

                            <!-- Indicateur d'étapes -->
                            {{-- <div class="registration-steps mb-5">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="step active" data-step="1">
                                        <div class="step-circle">1</div>
                                        <div class="step-label d-none d-md-block">Email & Téléphone</div>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step" data-step="2">
                                        <div class="step-circle">2</div>
                                        <div class="step-label d-none d-md-block">Informations personnelles</div>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step" data-step="3">
                                        <div class="step-circle">3</div>
                                        <div class="step-label d-none d-md-block">Transport</div>
                                    </div>
                                </div>
                            </div> --}}

                            <!-- Étape 1 : Email & Téléphone -->
                            <div id="step1" class="registration-step">
                                <form id="step1Form">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="email" class="form-label">Email <span
                                                    class="asterisk">*</span></label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                required placeholder="votre@email.com">
                                            <div class="invalid-feedback" id="email-error"></div>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="phone" class="form-label">Téléphone <span
                                                    class="asterisk">*</span></label>
                                            <input type="tel" class="form-control" id="phone" name="phone"
                                                required placeholder="+216 XX XXX XXX">
                                            <div class="invalid-feedback" id="phone-error"></div>
                                        </div>
                                    </div>

                                    <!-- Message d'erreur/success -->
                                    <div id="step1Message" class="alert d-none"></div>

                                    <!-- Bouton continuer -->
                                    <div class="d-flex justify-content-between mt-4">
                                        <div></div> <!-- Espace vide pour aligner -->
                                        <button type="button" id="continueStep1"
                                            class="btn btn-medium btn-rounded btn-green-color">
                                            Continuer <i class="fas fa-arrow-right ms-2"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <!-- Étape 2 : Informations personnelles -->
                            <div id="step2" class="registration-step d-none">
                                <form id="step2Form">
                                    @csrf
                                    <!-- Ajouter des champs hidden pour email et phone -->
                                    <input type="hidden" id="step2_email" name="email">
                                    <input type="hidden" id="step2_phone" name="phone">
                                    <div class="row">
                                        <!-- Civilité -->
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label">Civilité <span class="asterisk">*</span></label>
                                            <div class="d-flex gap-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="civilite"
                                                        id="civilite_mr" value="Mr" required>
                                                    <label class="form-check-label" for="civilite_mr">
                                                        Mr
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="civilite"
                                                        id="civilite_mme" value="Mme" required>
                                                    <label class="form-check-label" for="civilite_mme">
                                                        Mme
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Prénom -->
                                        <div class="col-md-6 mb-3">
                                            <label for="prenom" class="form-label">Prénom <span
                                                    class="asterisk">*</span></label>
                                            <input type="text" class="form-control" id="prenom" name="prenom"
                                                required placeholder="Prénom">
                                        </div>

                                        <!-- Nom -->
                                        <div class="col-md-6 mb-3">
                                            <label for="nom" class="form-label">Nom <span
                                                    class="asterisk">*</span></label>
                                            <input type="text" class="form-control" id="nom" name="nom"
                                                required placeholder="Nom">
                                        </div>

                                        <!-- Pays -->
                                        <div class="col-md-6 mb-3">
                                            <label for="pays" class="form-label">
                                                Pays <span class="asterisk">*</span>
                                            </label>

                                            <select class="form-select" id="pays" name="pays" required>
                                                <option value="">Sélectionner un pays</option>

                                                @foreach ($countries as $country)
                                                    <option value="{{ $country }}"
                                                        {{ old('pays', 'TUNISIE') == $country ? 'selected' : '' }}>
                                                        {{ $country }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Gouvernorat (visible seulement si Tunisie) -->
                                        <div class="col-md-6 mb-3" id="gouvernorat-container">
                                            <label for="gouvernorat" class="form-label">Gouvernorat <span
                                                    class="asterisk">*</span></label>
                                            <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>

                                        <!-- Ville -->
                                        <div class="col-md-6 mb-3">
                                            <label for="ville" class="form-label">Ville / Délégation <span
                                                    class="asterisk">*</span></label>
                                            <input type="text" class="form-control" id="ville" name="ville"
                                                required placeholder="Ville">
                                        </div>

                                        <!-- Domaine d'activité -->
                                        <div class="col-md-12 mb-3">
                                            <label for="domaine_activite" class="form-label">Domaine d'activité <span
                                                    class="asterisk">*</span></label>
                                            <select class="form-select" id="domaine_activite" name="domaine_activite"
                                                required>
                                                <option value="">Sélectionner un domaine</option>
                                                <option value="Pharmacien">Pharmacien</option>
                                                <option value="Propriétaire de Parapharmacie">Propriétaire de Parapharmacie
                                                </option>
                                                <option value="Préparateur en pharmacie">Préparateur en pharmacie</option>
                                                <option value="Membre d'une parapharmacie">Membre d'une parapharmacie
                                                </option>
                                                <option value="Grossiste">Grossiste</option>
                                                <option value="Importateur de produits parapharmaceutiques">Importateur de
                                                    produits parapharmaceutiques</option>
                                                <option value="Fabriquant de produits parapharmaceutiques">Fabriquant de
                                                    produits parapharmaceutiques</option>
                                                <option value="Distributeur de produits parapharmaceutiques">Distributeur
                                                    de produits parapharmaceutiques</option>
                                                <option value="Médecin">Médecin</option>
                                                <option value="Dentiste">Dentiste</option>
                                                <option value="Startup">Startup</option>
                                                <option value="Journaliste">Journaliste</option>
                                                <option value="Influenceuse(r)">Influenceuse(r)</option>
                                                <option value="Autre">Autre</option>
                                            </select>
                                        </div>

                                        <!-- Organisme/Société -->
                                        <div class="col-md-6 mb-3">
                                            <label for="organisme" class="form-label">Organisme / Société <span
                                                    class="asterisk">*</span></label>
                                            <input type="text" class="form-control" id="organisme" name="organisme"
                                                required placeholder="Nom de l'organisme ou société">
                                        </div>

                                        <!-- Fonction -->
                                        <div class="col-md-6 mb-3">
                                            <label for="fonction" class="form-label">Fonction</label>
                                            <input type="text" class="form-control" id="fonction" name="fonction"
                                                placeholder="Votre fonction">
                                        </div>
                                    </div>

                                    <!-- Boutons navigation -->
                                    <div class="d-flex justify-content-between mt-4">
                                        <button type="button" id="backToStep1"
                                            class="btn btn-medium btn-rounded btn-light">
                                            <i class="fas fa-arrow-left me-2"></i> Retour
                                        </button>
                                        <button type="button" id="continueStep2"
                                            class="btn btn-medium btn-rounded btn-green-color">
                                            Continuer <i class="fas fa-arrow-right ms-2"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <!-- Étape 3 : Transport -->
                            <div id="step3" class="registration-step d-none">
                                <form id="step3Form">
                                    @csrf
                                    <!-- Section Transport (dynamique) -->
                                    <div id="transport-section" class="d-none">
                                        <h5 class="text-dark-gray fw-600 mb-3">Transport organisé</h5>

                                        <!-- Question Transport -->
                                        <div class="mb-4">
                                            <label class="form-label">Souhaitez-vous un transport organisé ? *</label>
                                            <div class="d-flex gap-3 mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio"
                                                        name="transport_organise" id="transport_oui" value="oui">
                                                    <label class="form-check-label" for="transport_oui">
                                                        Oui
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio"
                                                        name="transport_organise" id="transport_non" value="non"
                                                        checked>
                                                    <label class="form-check-label" for="transport_non">
                                                        Non
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Options Transport (visible seulement si Oui) -->
                                        <div id="transport-options" class="d-none">
                                            <!-- Jour du transport -->
                                            <div class="mb-3">
                                                <label class="form-label">Jour du transport *</label>
                                                <div class="d-flex gap-3">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio"
                                                            name="jour_transport" id="jour_vendredi" value="vendredi">
                                                        <label class="form-check-label" for="jour_vendredi">
                                                            Vendredi 23 janvier
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio"
                                                            name="jour_transport" id="jour_samedi" value="samedi">
                                                        <label class="form-check-label" for="jour_samedi">
                                                            Samedi 24 janvier
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Point de départ (automatique) -->
                                            <div class="mb-4">
                                                <label class="form-label">Point de départ</label>
                                                <div class="form-control bg-light">
                                                    <span id="point-depart-text"></span> – Centre-ville
                                                </div>
                                                <small class="text-muted">Ce point est déterminé automatiquement en
                                                    fonction de votre gouvernorat.</small>
                                            </div>

                                            <!-- Texte officiel du transport -->
                                            <div class="alert alert-info mb-4">
                                                <p class="mb-2"><strong>Important :</strong></p>
                                                <ul class="mb-0 ps-3">
                                                    <li>Le transport organisé n'est confirmé qu'après l'atteinte du nombre
                                                        minimum requis de participants, par gouvernorat ou ville de départ.
                                                    </li>
                                                    <li>Une seule personne par pharmacie ou par parapharmacie peut
                                                        bénéficier du transport pris en charge par l'organisation.</li>
                                                    <li>La confirmation définitive du transport (lieu, horaire et point de
                                                        rassemblement) sera communiquée ultérieurement aux participants
                                                        concernés.</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Message si pas de transport disponible -->
                                    <div id="no-transport-message" class="alert alert-info d-none">
                                        <p class="mb-0">Le transport organisé n'est pas disponible pour votre
                                            gouvernorat. Vous pouvez continuer votre inscription.</p>
                                    </div>

                                    <!-- Boutons navigation -->
                                    <div class="d-flex justify-content-between mt-4">
                                        <button type="button" id="backToStep2"
                                            class="btn btn-medium btn-rounded btn-light">
                                            <i class="fas fa-arrow-left me-2"></i> Retour
                                        </button>
                                        <button type="submit" id="submitRegistration"
                                            class="btn btn-medium btn-rounded btn-green-color">
                                            <i class="fas fa-check me-2"></i> Finaliser l'inscription
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .registration-steps {
            display: none;
            padding: 0 1rem;
        }

        .registration-steps .d-flex {
            position: relative;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .step.active .step-circle {
            background: #28a745;
            color: white;
        }

        .step-label {
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: #6c757d;
            text-align: center;
            white-space: nowrap;
        }

        .step.active .step-label {
            color: #28a745;
            font-weight: 500;
        }

        .step-line {
            flex: 1;
            height: 2px;
            background: #e9ecef;
            margin: 0 10px;
            position: relative;
            top: -20px;
            z-index: 1;
        }

        .registration-step {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .btn-light {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            color: #495057;
        }

        .btn-light:hover {
            background-color: #e9ecef;
            border-color: #dee2e6;
        }

        #transport-options {
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                max-height: 0;
            }

            to {
                opacity: 1;
                max-height: 500px;
            }
        }

        /* Ajoutez ceci dans votre style existant */
        @media (max-width: 768px) {
            .step-line {
                top: 0px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Définir csrfToken ici
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                document.querySelector('input[name="_token"]')?.value ||
                '{{ csrf_token() }}';

            // Vérifier que le token est bien récupéré
            console.log('CSRF Token:', csrfToken);

            let currentStep = 1;
            let emailVerified = false;
            let step2Data = {};
            let gouvernorat = '';

            // Gouvernorats éligibles au transport
            /*
            const transportGovernorats = ['SOUSSE', 'MONASTIR', 'SFAX', 'MAHDIA', 'GABÈS', 'KAIROUAN', 'GAFSA',
                'MÉDENINE'
            ];
            */

            const transportGovernorats = [];

            // Éléments DOM
            const steps = document.querySelectorAll('.step');
            const stepDivs = document.querySelectorAll('.registration-step');

            // Étape 1
            const continueStep1Btn = document.getElementById('continueStep1');
            const step1Form = document.getElementById('step1Form');
            const step1Message = document.getElementById('step1Message');

            // Étape 2
            const backToStep1Btn = document.getElementById('backToStep1');
            const continueStep2Btn = document.getElementById('continueStep2');
            const step2Form = document.getElementById('step2Form');
            const paysSelect = document.getElementById('pays');
            const gouvernoratContainer = document.getElementById('gouvernorat-container');
            const gouvernoratSelect = document.getElementById('gouvernorat');

            // Étape 3
            const backToStep2Btn = document.getElementById('backToStep2');
            const submitRegistrationBtn = document.getElementById('submitRegistration');
            const transportSection = document.getElementById('transport-section');
            const noTransportMessage = document.getElementById('no-transport-message');
            const transportOui = document.getElementById('transport_oui');
            const transportNon = document.getElementById('transport_non');
            const transportOptions = document.getElementById('transport-options');
            const pointDepartText = document.getElementById('point-depart-text');

            // Gestion du pays/gouvernorat
            paysSelect.addEventListener('change', function() {
                if (this.value === 'TUNISIE') {
                    gouvernoratContainer.classList.remove('d-none');
                    gouvernoratSelect.required = true;
                } else {
                    gouvernoratContainer.classList.add('d-none');
                    gouvernoratSelect.required = false;
                    gouvernorat = '';
                }
            });

            // Gestion du gouvernorat
            gouvernoratSelect.addEventListener('change', function() {
                gouvernorat = this.value;
            });

            // Gestion du transport
            transportOui.addEventListener('change', function() {
                if (this.checked) {
                    transportOptions.classList.remove('d-none');
                }
            });

            transportNon.addEventListener('change', function() {
                if (this.checked) {
                    transportOptions.classList.add('d-none');
                }
            });

            // Fonction pour changer d'étape
            function goToStep(step) {
                // Mise à jour des indicateurs
                steps.forEach(s => {
                    if (parseInt(s.dataset.step) === step) {
                        s.classList.add('active');
                    } else {
                        s.classList.remove('active');
                    }
                });

                // Mise à jour des contenus
                stepDivs.forEach(div => {
                    if (div.id === 'step' + step) {
                        div.classList.remove('d-none');
                    } else {
                        div.classList.add('d-none');
                    }
                });

                currentStep = step;

                // Gestion spécifique à l'étape 3
                if (step === 3) {
                    if (transportGovernorats.includes(gouvernorat)) {
                        transportSection.classList.remove('d-none');
                        noTransportMessage.classList.add('d-none');
                        pointDepartText.textContent = gouvernorat;
                    } else {
                        transportSection.classList.add('d-none');
                        noTransportMessage.classList.remove('d-none');
                    }
                }
            }

            // Étape 1 : Vérification email/téléphone
            continueStep1Btn.addEventListener('click', function() {
                const formData = new FormData(step1Form);
                const email = document.getElementById('email').value;
                const phone = document.getElementById('phone').value;

                fetch("{{ route('inscription.check.email.phone') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Email/téléphone disponibles
                            step1Message.className = 'alert alert-success';
                            step1Message.textContent = data.message;
                            step1Message.classList.remove('d-none');

                            // Stocker l'email et téléphone pour les étapes suivantes
                            step2Data.email = formData.get('email');
                            step2Data.phone = formData.get('phone');

                            document.getElementById('step2_email').value = email;
                            document.getElementById('step2_phone').value = phone;

                            // Passer à l'étape 2
                            setTimeout(() => {
                                goToStep(2);
                            }, 1000);

                        } else if (data.email_exists) {
                            // Email existe déjà
                            step1Message.className = 'alert alert-warning';
                            step1Message.innerHTML = data.message;
                            step1Message.classList.remove('d-none');

                            // Afficher le bouton pour envoyer le lien d'authentification
                            const authBtn = document.createElement('button');
                            authBtn.className = 'btn btn-medium btn-rounded btn-red-color mt-2';
                            authBtn.innerHTML =
                                '<i class="fas fa-envelope me-2"></i>Envoyer le lien d\'authentification';
                            authBtn.type = 'button';
                            authBtn.addEventListener('click', function() {
                                sendAuthLink(formData.get('email'));
                            });

                            /*step1Message.appendChild(document.createElement('br'));
                            step1Message.appendChild(authBtn);*/

                        } else {
                            // Autre erreur
                            step1Message.className = 'alert alert-danger';
                            step1Message.textContent = data.message;
                            step1Message.classList.remove('d-none');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        step1Message.className = 'alert alert-danger';
                        step1Message.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                        step1Message.classList.remove('d-none');
                    });
            });

            // Fonction pour envoyer le lien d'authentification
            function sendAuthLink(email) {
                const formData = new FormData();
                formData.append('email', email);

                fetch("{{ route('inscription.send.auth.link') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            step1Message.className = 'alert alert-success';
                            step1Message.textContent = data.message;
                        } else {
                            step1Message.className = 'alert alert-danger';
                            step1Message.textContent = data.message;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        step1Message.className = 'alert alert-danger';
                        step1Message.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                    });
            }

            // Étape 2 : Enregistrement des informations personnelles
            continueStep2Btn.addEventListener('click', function() {
                if (!step2Form.checkValidity()) {
                    step2Form.reportValidity();
                    return;
                }

                const formData = new FormData(step2Form);

                fetch("{{ route('inscription.register.step2') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Stocker le token de session
                            window.registrationSessionToken = data.session_token;

                            // Récupérer le gouvernorat
                            const gouvernorat = document.getElementById('gouvernorat').value;

                            // Gouvernorats éligibles au transport
                            /* const transportGovernorats = ['SOUSSE', 'MONASTIR', 'SFAX', 'MAHDIA',
                                'GABÈS', 'KAIROUAN', 'GAFSA', 'MÉDENINE'
                            ]; */

                            const transportGovernorats = [];

                            // Si le gouvernorat n'est PAS dans la liste éligible, passer directement à la finalisation
                            if (!transportGovernorats.includes(gouvernorat)) {
                                // Créer un formulaire virtuel pour l'étape 3 avec transport_organise = 'non'
                                const step3FormData = new FormData();
                                step3FormData.append('transport_organise', 'non');
                                step3FormData.append('session_token', window.registrationSessionToken);

                                // Appeler directement registerStep3
                                fetch("{{ route('inscription.register.step3') }}", {
                                        method: 'POST',
                                        headers: {
                                            'X-CSRF-TOKEN': csrfToken,
                                            'Accept': 'application/json'
                                        },
                                        body: step3FormData
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            window.location.href = data.redirect_url ||
                                                '/inscription/confirmation';
                                        } else {
                                            alert(data.message ||
                                                'Une erreur est survenue lors de l\'inscription.'
                                            );
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Error:', error);
                                        alert('Une erreur est survenue. Veuillez réessayer.');
                                    });
                            } else {
                                // Si éligible au transport, aller à l'étape 3 normale
                                goToStep(3);
                            }
                        } else {
                            alert(data.message || 'Une erreur est survenue.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Une erreur est survenue. Veuillez réessayer.');
                    });
            });

            // Étape 3 : Finalisation de l'inscription
            submitRegistrationBtn.addEventListener('click', function(e) {
                e.preventDefault();

                if (!step3Form.checkValidity()) {
                    step3Form.reportValidity();
                    return;
                }

                const formData = new FormData(step3Form);

                // Ajouter le token de session
                if (window.registrationSessionToken) {
                    formData.append('session_token', window.registrationSessionToken);
                }

                fetch("{{ route('inscription.register.step3') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.location.href = data.redirect_url || '/inscription/confirmation';
                        } else {
                            alert(data.message || 'Une erreur est survenue lors de l\'inscription.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Une erreur est survenue. Veuillez réessayer.');
                    });
            });

            // Navigation retour
            backToStep1Btn.addEventListener('click', function() {
                goToStep(1);
            });

            backToStep2Btn.addEventListener('click', function() {
                goToStep(2);
            });
        });
    </script>
@endsection