@props([
    'id' => 'hospitalUrgentCaseDetailsModal',
    'title' => 'Urgent Case Information',
])

@php
    $bodyId = $id . 'Body';
@endphp

<div id="{{ $id }}" class="fixed inset-0 z-50 hidden" aria-hidden="true">
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="absolute inset-0 bg-neutral-900/60" data-hospital-urgent-details-modal-overlay></div>

        <div class="relative w-full max-w-4xl rounded-sm border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex items-center justify-between gap-3 border-b border-neutral-200 px-4 py-3 dark:border-neutral-700">
                <div class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ $title }}</div>
                <button type="button" class="rounded-sm border border-neutral-200 px-3 py-1 text-sm text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800" data-hospital-urgent-details-modal-close>
                    Close
                </button>
            </div>

            <div id="{{ $bodyId }}" class="max-h-[75vh] overflow-y-auto p-4">
                <div class="text-sm text-neutral-600 dark:text-neutral-300">Loading...</div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const modalId = @json($id);
        const bodyId = @json($bodyId);

        const modal = document.getElementById(modalId);
        const modalBody = document.getElementById(bodyId);

        if (!modal || !modalBody) return;

        const openModal = async (url) => {
            modal.classList.remove('hidden');
            modal.setAttribute('aria-hidden', 'false');
            modalBody.innerHTML = '<div class="text-sm text-neutral-600 dark:text-neutral-300">Loading...</div>';

            try {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!response.ok) throw new Error('Failed to load');

                const html = await response.text();
                modalBody.innerHTML = html;
            } catch (e) {
                modalBody.innerHTML = '<div class="text-sm text-red-600">Could not load urgent case details.</div>';
            }
        };

        const closeModal = () => {
            modal.classList.add('hidden');
            modal.setAttribute('aria-hidden', 'true');
            modalBody.innerHTML = '';
        };

        document.addEventListener('click', (event) => {
            const openBtn = event.target.closest('.js-open-hospital-urgent-details');
            if (openBtn) {
                event.preventDefault();
                const url = openBtn.getAttribute('data-hospital-urgent-details-url') || openBtn.getAttribute('href');
                if (url) openModal(url);
                return;
            }

            if (event.target.matches('[data-hospital-urgent-details-modal-overlay]') || event.target.closest('[data-hospital-urgent-details-modal-close]')) {
                closeModal();
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
                closeModal();
            }
        });
    })();
</script>