@props(['id', 'title', 'action' => '', 'method' => 'POST', 'size' => 'md'])

@php
$sizeClasses = [
'sm' => 'max-w-sm',
'md' => 'max-w-md',
'lg' => 'max-w-lg',
'xl' => 'max-w-2xl',
'2xl' => 'max-w-4xl',
];
$maxWidth = $sizeClasses[$size] ?? $sizeClasses['md'];
@endphp

<div id="{{ $id }}" class="fixed inset-0 z-[60] hidden" role="dialog" aria-modal="true">
    <!-- Overlay -->
    <div class="fixed inset-0  backdrop-blur-md transition-opacity duration-200" data-modal-close="{{ $id }}" onclick="closeModal('{{ $id }}')"></div>

    <!-- Modal Container - centrage vertical et horizontal -->
    <div class="fixed inset-0 overflow-y-auto z-[61] flex min-h-full items-center justify-center p-4 sm:p-6">
        <div class="relative w-full {{ $maxWidth }} my-8">
            <!-- Modal Panel -->
            <div class="relative bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden">
                <!-- Header -->
                <div class="flex items-center justify-between px-6 py-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
                    <h3 class="text-lg font-semibold text-gray-900">{{ $title }}</h3>
                    <button type="button" data-modal-close="{{ $id }}" onclick="closeModal('{{ $id }}')" class="text-gray-400 hover:text-gray-600 rounded-lg p-2 hover:bg-white/80 transition-colors" aria-label="Fermer">
                        <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>

                <!-- Content scrollable -->
                <form action="{{ $action }}" method="{{ $method === 'GET' ? 'GET' : 'POST' }}">
                    @if($method !== 'GET')
                    @csrf
                    @if($method !== 'POST')
                    @method($method)
                    @endif
                    @endif

                    <div class="max-h-[60vh] overflow-y-auto p-6">
                        <div class="space-y-5">
                            {{ $slot }}
                        </div>
                    </div>

                    <!-- Actions fixées en bas -->
                    <div class="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-100">
                        <button type="button" data-modal-close="{{ $id }}" onclick="closeModal('{{ $id }}')" class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            Annuler
                        </button>
                        <button type="submit" class="px-5 py-2.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors shadow-sm hover:shadow">
                            Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
