{{--
    Pont iframe -> page parente (lot B).
    Inclus uniquement quand le formulaire est affiché dans le popup (?modal=1).
    Intercepte la soumission du formulaire principal, la poste en AJAX (Accept JSON),
    puis relaie le résultat au listing parent via postMessage — sans navigation.

    IMPORTANT — ordre des handlers :
    backend.js (validation HTML5 .needs-validation) et payment-validation.js attachent
    leurs handlers SUR LE FORMULAIRE et peuvent appeler stopPropagation() quand le
    formulaire est invalide. Un listener sur `document` ne serait alors jamais atteint
    (d'où le bug "rien ne se passe" quand un champ requis masqué est invalide).
    On attache donc le pont DIRECTEMENT sur le <form> : stopPropagation() n'empêche pas
    les autres listeners du même élément de s'exécuter. On respecte e.defaultPrevented
    (validation montant / HTML5) pour ne pas poster un formulaire invalide, et on affiche
    le retour visuel Bootstrap (was-validated) afin que l'opérateur voie le champ fautif.
--}}
<script>
    (function () {
        var csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

        function notifyParent(payload) {
            try {
                window.parent.postMessage(Object.assign({ source: 'participant-modal' }, payload), '*');
            } catch (e) { /* noop */ }
        }

        function bindBridge() {
            var form = document.querySelector('.page-content form[method="POST"], .page-content form[method="post"]');
            if (!form || form.dataset._bridgeBound) return;
            form.dataset._bridgeBound = '1';

            form.addEventListener('submit', function (e) {
                // Validation déjà rejetée (montant invalide, champ requis...) :
                // on ne poste pas, et on révèle le retour visuel Bootstrap.
                if (e.defaultPrevented) {
                    form.classList.add('was-validated');
                    var firstInvalid = form.querySelector(':invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                    return;
                }

                e.preventDefault();

                var submitBtn = e.submitter || form.querySelector('[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.dataset._label = submitBtn.innerHTML;
                    submitBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Traitement...';
                }

                @if (($showProcessingOverlay ?? false))
                    showProcessingOverlay();
                @endif

                // FormData inclut le submitter (ex. bouton name="__next" value="validate")
                // sur les navigateurs récents. Fallback explicite pour les anciens.
                var data = new FormData(form, submitBtn);
                if (submitBtn && submitBtn.name && !data.has(submitBtn.name)) {
                    data.append(submitBtn.name, submitBtn.value);
                }

                fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: data
                })
                .then(function (res) {
                    return res.json().then(function (json) {
                        return { status: res.status, json: json };
                    }).catch(function () {
                        return { status: res.status, json: null };
                    });
                })
                .then(function (r) {
                    if (r.status >= 200 && r.status < 300 && r.json && r.json.success) {
                        // Enchaînement vers un autre écran (ex. ajout -> validation)
                        if (r.json.redirect) {
                            notifyParent({
                                type: 'participant-redirect',
                                url: r.json.redirect,
                                title: r.json.redirect_title || 'Inscription'
                            });
                            return;
                        }
                        notifyParent({
                            type: 'participant-saved',
                            user_id: r.json.user_id,
                            code: r.json.code,
                            badge_url: r.json.badge_url
                        });
                        return;
                    }
                    // Erreurs (422 validation serveur, ou autre) : réafficher le formulaire
                    restoreSubmit(submitBtn);
                    if (r.status === 422 && r.json && r.json.errors) {
                        showErrors(form, r.json.errors, r.json.message);
                    } else {
                        showErrors(form, null, (r.json && r.json.message) || 'Une erreur est survenue.');
                    }
                })
                .catch(function () {
                    restoreSubmit(submitBtn);
                    showErrors(form, null, 'Erreur réseau. Veuillez réessayer.');
                });
            }, false);
        }

        function restoreSubmit(btn) {
            hideProcessingOverlay();
            if (btn) {
                btn.disabled = false;
                if (btn.dataset._label) btn.innerHTML = btn.dataset._label;
            }
        }

        // Overlay "traitement en cours" : la dernière étape de validation peut prendre
        // un peu de temps (génération badge, e-mail). On couvre le formulaire d'un voile
        // avec un spinner pour signaler clairement le traitement.
        function showProcessingOverlay() {
            var overlay = document.getElementById('modal-processing-overlay');
            if (!overlay) {
                overlay = document.createElement('div');
                overlay.id = 'modal-processing-overlay';
                overlay.innerHTML =
                    '<div class="mpo-card">' +
                    '<span class="mpo-spinner" role="status" aria-hidden="true"></span>' +
                    '<div class="mpo-text">Traitement en cours…</div>' +
                    '</div>';
                document.body.appendChild(overlay);

                var style = document.createElement('style');
                style.textContent =
                    '#modal-processing-overlay{position:fixed;inset:0;z-index:20000;' +
                    'background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;}' +
                    '#modal-processing-overlay .mpo-card{display:flex;flex-direction:column;align-items:center;' +
                    'gap:16px;padding:28px 36px;}' +
                    '#modal-processing-overlay .mpo-spinner{width:48px;height:48px;border-radius:50%;' +
                    'border:4px solid rgba(233,30,99,.2);border-top-color:#e91e63;' +
                    'animation:mpo-spin .8s linear infinite;display:block;}' +
                    '#modal-processing-overlay .mpo-text{color:#444;font-size:15px;font-weight:500;}' +
                    '@keyframes mpo-spin{to{transform:rotate(360deg);}}';
                document.head.appendChild(style);
            }
            overlay.style.display = 'flex';
        }

        function hideProcessingOverlay() {
            var overlay = document.getElementById('modal-processing-overlay');
            if (overlay) {
                overlay.style.display = 'none';
            }
        }

        function showErrors(form, errors, message) {
            var box = form.querySelector('.modal-bridge-errors');
            if (!box) {
                box = document.createElement('div');
                box.className = 'alert alert-danger modal-bridge-errors';
                form.prepend(box);
            }
            var html = message ? ('<strong>' + message + '</strong>') : '';
            if (errors) {
                html += '<ul class="mb-0 mt-1">';
                Object.keys(errors).forEach(function (k) {
                    (errors[k] || []).forEach(function (msg) {
                        html += '<li>' + msg + '</li>';
                    });
                });
                html += '</ul>';
            }
            box.innerHTML = html;
            box.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        // On lie le pont APRÈS les autres validateurs (backend.js en defer +
        // payment-validation.js sur $(document).ready) pour que notre handler du
        // formulaire s'exécute en dernier et puisse lire e.defaultPrevented fiablement.
        // window.load survient après tous les ready/defer.
        if (document.readyState === 'complete') {
            bindBridge();
        } else {
            window.addEventListener('load', bindBridge);
        }
    })();
</script>