{{--
    Modale de confirmation générique — incluse une seule fois dans layouts/app.blade.php
    ──────────────────────────────────────────────────────────────────────────────────────
    USAGE JavaScript :
        openConfirmModal({
            title        : 'Titre',
            icon         : '⚠️',          // emoji affiché dans le header
            headerClass  : 'from-red-700 to-rose-600',  // classes Tailwind du gradient header
            body         : '<p>...</p>',   // HTML libre pour le corps
            confirmText  : 'Oui, confirmer',
            confirmClass : 'bg-red-600 hover:bg-red-700',
            onConfirm    : () => { ... }   // callback ou null pour soumettre un form
        });
--}}
<div id="global_confirm_modal"
     class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 transition-opacity"
     role="dialog" aria-modal="true" aria-labelledby="gcm_title">

    {{-- Fond flou --}}
    <div id="gcm_backdrop"
         class="absolute inset-0 cursor-pointer"></div>

    {{-- Fenêtre --}}
    <div id="gcm_panel"
         class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-out"
         style="animation: gcmIn .18s ease-out">

        {{-- Header (icône et titre centrés) --}}
        <div class="text-center mb-6">
            <div id="gcm_icon" class="text-5xl mb-3">⚙️</div>
            <h3 id="gcm_title" class="text-lg font-bold text-gray-800 dark:text-gray-100">Confirmation</h3>
            <p id="gcm_subtitle" class="text-sm text-gray-500 dark:text-gray-400 mt-2 hidden"></p>
        </div>

        {{-- Corps (HTML libre) --}}
        <div id="gcm_body" class="mb-6 space-y-4 text-sm text-gray-500 dark:text-gray-400 text-center"></div>

        {{-- Pied --}}
        <div class="flex gap-4 justify-center">
            <button type="button"
                    id="gcm_cancel"
                    class="px-6 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-bold hover:bg-gray-200 dark:hover:bg-gray-600 transition">
                Annuler
            </button>
            <button type="button"
                    id="gcm_confirm"
                    class="px-6 py-2 text-white rounded-lg font-bold hover:opacity-90 transition shadow">
                Confirmer
            </button>
        </div>
    </div>
</div>

{{-- Modale héritage : suppression (DELETE form) — conservée pour compatibilité --}}
<div id="global_delete_modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 transition-opacity">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 border border-red-200 dark:border-red-800">
        <div class="text-center mb-6">
            <div class="text-5xl mb-3">🗑️</div>
            <h3 id="global_delete_title" class="text-lg font-bold text-gray-800 dark:text-gray-100">Confirmer la suppression</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                <span id="global_delete_irreversible">Cette action est <strong>irréversible</strong>.<br></span>
                <span id="global_delete_message">L'élément sera définitivement supprimé.</span>
            </p>
        </div>
        
        <form id="global_delete_form" method="POST" action="">
            @csrf
            @method('DELETE')
            
            <div class="flex gap-4 justify-center">
                <button type="button" onclick="closeDeleteModal()"
                        class="px-6 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-bold hover:bg-gray-200 dark:hover:bg-gray-600 transition">
                    Annuler
                </button>
                <button type="submit" id="global_delete_btn"
                        class="px-6 py-2 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700 transition shadow">
                    Oui, supprimer
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    @keyframes gcmIn {
        from { opacity: 0; transform: scale(.95) translateY(6px); }
        to   { opacity: 1; transform: scale(1)   translateY(0); }
    }
</style>

<script>
/* ═══════════════════════════════════════════════════════════════════════════
   Modale de confirmation générique
   ═══════════════════════════════════════════════════════════════════════════ */
(function () {
    const modal      = document.getElementById('global_confirm_modal');
    const iconEl     = document.getElementById('gcm_icon');
    const titleEl    = document.getElementById('gcm_title');
    const subtitleEl = document.getElementById('gcm_subtitle');
    const bodyEl     = document.getElementById('gcm_body');
    const confirmBtn = document.getElementById('gcm_confirm');
    const cancelBtn  = document.getElementById('gcm_cancel');

    let _callback = null;

    /**
     * Ouvre la modale générique de confirmation.
     *
     * @param {Object} opts
     * @param {string}   opts.title        Titre (requis)
     * @param {string}   [opts.subtitle]   Sous-titre (optionnel)
     * @param {string}   [opts.icon]       Emoji affiché (ex: '⚠️')
     * @param {string}   opts.body         HTML libre pour le corps (requis)
     * @param {string}   [opts.confirmText]  Texte du bouton de confirmation
     * @param {string}   [opts.confirmClass] Classes Tailwind du bouton de confirmation (ex: 'bg-red-600 hover:bg-red-700')
     * @param {Function} opts.onConfirm    Callback appelé si l'utilisateur confirme
     */
    window.openConfirmModal = function (opts) {
        iconEl.textContent     = opts.icon     || '⚙️';
        titleEl.textContent    = opts.title    || 'Confirmation';
        
        if (opts.subtitle) {
            subtitleEl.textContent = opts.subtitle;
            subtitleEl.classList.remove('hidden');
        } else {
            subtitleEl.textContent = '';
            subtitleEl.classList.add('hidden');
        }

        // Corps
        bodyEl.innerHTML = opts.body || '';

        // Bouton confirmer
        const cText  = opts.confirmText  || 'Confirmer';
        const cClass = opts.confirmClass || 'bg-blue-600 hover:bg-blue-700';
        confirmBtn.textContent = cText;
        confirmBtn.className   = `px-6 py-2 text-white rounded-lg font-bold transition shadow ${cClass}`;

        // Callback
        _callback = opts.onConfirm || null;

        // Affichage
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    };

    window.closeConfirmModal = function () {
        modal.classList.add('hidden');
        document.body.style.overflow = '';
        _callback = null;
    };

    confirmBtn.addEventListener('click', function () {
        const cb = _callback;
        closeConfirmModal();
        if (typeof cb === 'function') cb();
    });

    cancelBtn.addEventListener('click', closeConfirmModal);

    document.getElementById('gcm_backdrop').addEventListener('click', closeConfirmModal);

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            closeConfirmModal();
        }
    });
}());

/* ═══════════════════════════════════════════════════════════════════════════
   Modale de suppression DELETE (héritage — conservée pour compatibilité)
   ═══════════════════════════════════════════════════════════════════════════ */
function openDeleteModal(actionUrl, message, title, btnText, showIrreversible) {
    message          = message         ?? "Êtes-vous sûr de vouloir supprimer cet élément ?";
    title            = title           ?? "Confirmer la suppression";
    btnText          = btnText         ?? "Oui, supprimer";
    showIrreversible = showIrreversible ?? true;

    document.getElementById('global_delete_form').action      = actionUrl;
    document.getElementById('global_delete_message').innerHTML = message;
    document.getElementById('global_delete_title').innerText   = title;
    document.getElementById('global_delete_btn').innerText     = btnText;

    const irreversibleText = document.getElementById('global_delete_irreversible');
    irreversibleText.classList.toggle('hidden', !showIrreversible);

    document.getElementById('global_delete_modal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('global_delete_modal').classList.add('hidden');
}

document.getElementById('global_delete_modal').addEventListener('click', function (e) {
    if (e.target === this) closeDeleteModal();
});

document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !document.getElementById('global_delete_modal').classList.contains('hidden')) {
        closeDeleteModal();
    }
});
</script>