@props(['modalId' => 'delete-modal', 'title' => 'Confirmer la suppression', 'message' => 'Êtes-vous sûr de vouloir supprimer cet élément ? Cette action est irréversible.'])

<!-- Modale de confirmation de suppression réutilisable -->
<div id="{{ $modalId }}" class="hidden fixed inset-0 z-[70]" role="dialog" aria-modal="true">
    <!-- Overlay avec flou -->
    <div class="fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-all duration-300" onclick="closeModal('{{ $modalId }}')"></div>
    
    <!-- Contenu centré -->
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="{{ $modalId }}-content">
            <!-- En-tête rouge -->
            <div class="bg-red-600 px-6 py-4 rounded-t-lg flex items-center justify-between">
                <h3 class="text-lg font-semibold text-white">
                    {{ $title }}
                </h3>
                <button type="button" onclick="closeModal('{{ $modalId }}')" class="text-white hover:text-gray-200 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            
            <!-- Corps -->
            <div class="px-6 py-6">
                <p class="text-sm text-gray-700">
                    {{ $message }}
                </p>
            </div>
            
            <!-- Pied avec boutons -->
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end gap-2">
                <button type="button" onclick="closeModal('{{ $modalId }}')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
                    Annuler
                </button>
                <button type="button" id="{{ $modalId }}-confirm-btn" class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded transition-colors">
                    Supprimer
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // Fonction pour ouvrir le modal
    function openModal(modalId, confirmCallback) {
        const modal = document.getElementById(modalId);
        const content = document.getElementById(modalId + '-content');
        const confirmBtn = document.getElementById(modalId + '-confirm-btn');
        
        if (!modal || !content) return;
        
        // Stocker le callback
        if (confirmCallback) {
            confirmBtn.onclick = function() {
                confirmCallback();
                closeModal(modalId);
            };
        }
        
        // Afficher le modal
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        
        // Animer l'apparition
        setTimeout(() => {
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }, 10);
    }
    
    // Fonction pour fermer le modal
    function closeModal(modalId) {
        const modal = document.getElementById(modalId);
        const content = document.getElementById(modalId + '-content');
        
        if (!modal || !content) return;
        
        // Animer la fermeture
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        
        // Cacher après l'animation
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }, 300);
    }
    
    // Fermer avec Échap
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modals = document.querySelectorAll('[id$="-modal"]:not(.hidden)');
            modals.forEach(modal => closeModal(modal.id));
        }
    });
</script>
