@props(['id', 'maxWidth' => 'md', 'title' => '', 'mergeClass' => '', 'titleClass' => '', 'headerPadding' => 'py-4','placeItems' => 'items-center', 'hideClose' => false])

@php
    $maxWidth = [
        'xs' => 'max-w-xs',
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        'xl' => 'max-w-xl',
        '2xl' => 'max-w-2xl',
        '3xl' => 'max-w-3xl',
        '4xl' => 'max-w-4xl',
        '5xl' => 'max-w-5xl',
        '6xl' => 'max-w-6xl',
        '7xl' => 'max-w-7xl',
    ][$maxWidth];
@endphp

<div id="{{ $id }}" {{ $attributes->merge(['class' => 'fixed inset-0 overflow-y-auto hidden z-50']) }}>
    <div class="flex {{ $placeItems }} justify-center min-h-screen w-full px-4 max-w-[500px] mx-auto">
        <!-- Modal overlay -->
        <div class="fixed inset-0 bg-black opacity-50"></div>

        <!-- Modal content -->
        <div class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all w-full mx-auto text-left py-3 px-3">
            <div class="flex justify-between items-center {{ $headerPadding }}">
                @if (isset($icon))
                    <div class="inset-y-0 start-0 flex gap-2 items-center ps-3.5 pointer-events-none justify-center mx-auto">
                        {{ $icon }}
                    </div>
                @endif

                @if ($title)
                    <h2 class="{{ $titleClass }} font-bold text-gray-900 space-x-4 mx-auto modal-title">{{ $title }}</h2>
                @endif

                <!-- Close button -->
                @unless($hideClose)
                    <button onclick="closeModal('{{ $id }}')"
                        class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700 close-modal">
                        <svg width="29" height="28" viewBox="0 0 29 28" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect x="0.5" width="28" height="28" rx="14" fill="#E8EAED" />
                            <rect x="2.5" y="2" width="24" height="24" rx="12" fill="#F6F6F6" />
                            <path
                                d="M18.2916 10.9721L17.5278 10.2083L14.4999 13.2363L11.472 10.2083L10.7083 10.9721L13.7362 14L10.7083 17.0279L11.472 17.7917L14.4999 14.7638L17.5278 17.7917L18.2916 17.0279L15.2637 14L18.2916 10.9721Z"
                                fill="#333333" />
                        </svg>
                    </button>
                @endunless
            </div>
            <!-- Modal content -->
            {{ $slot }}
        </div>
    </div>
</div>

<script>
    function openModal(id) {
        document.getElementById(id).classList.remove('hidden');
    }

    function closeModal(id) {
        document.getElementById(id).classList.add('hidden');
    }
</script>