@php
    /**
     * Overlay global para Filament.
     * - Se muestra durante requests de Livewire (acciones CRUD y navegación interna de Filament).
     * - También puede mostrarse en navegación con recarga completa (beforeunload).
     */
@endphp

{{-- Overlay para acciones Livewire (CRUD / navegación interna) --}}
<div wire:teleport="body">
    <div
        wire:loading.delay
        aria-live="polite"
        aria-busy="true"
        class="fixed inset-0 z-50 grid place-items-center bg-white/80 backdrop-blur-sm"
    >
        <div class="w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-lg ring-1 ring-gray-900/5">
            <div class="flex flex-col items-center gap-4">
                <img
                    src="{{ asset('images/order-flow.png') }}"
                    alt="Order Flow"
                    class="h-14 w-14 object-contain"
                    loading="eager"
                />

                <div class="flex items-center gap-3">
                    <div
                        class="h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-gray-700"
                        aria-hidden="true"
                    ></div>
                    <div class="text-sm font-medium text-gray-900">Cargando…</div>
                </div>
            </div>
        </div>
    </div>

{{-- Overlay para navegación con recarga completa (fallback sin SPA) --}}
    <div
        id="page-loading-overlay"
        aria-live="polite"
        aria-busy="true"
        class="fixed inset-0 z-50 hidden place-items-center bg-white/80 backdrop-blur-sm"
    >
        <div class="w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-lg ring-1 ring-gray-900/5">
            <div class="flex flex-col items-center gap-4">
                <img
                    src="{{ asset('images/order-flow.png') }}"
                    alt="Order Flow"
                    class="h-14 w-14 object-contain"
                    loading="eager"
                />

                <div class="flex items-center gap-3">
                    <div
                        class="h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-gray-700"
                        aria-hidden="true"
                    ></div>
                    <div class="text-sm font-medium text-gray-900">Cargando…</div>
                </div>
            </div>
        </div>
    </div>

<script>
    (function () {
        if (window.__orderFlowLoadingOverlayInitialized) return;
        window.__orderFlowLoadingOverlayInitialized = true;

        const overlay = document.getElementById('page-loading-overlay');
        if (!overlay) return;

        // Muestra overlay al navegar (recarga completa).
        window.addEventListener('beforeunload', function () {
            overlay.classList.remove('hidden');
            overlay.classList.add('grid');
        });

        // Asegura ocultarlo cuando el navegador restaura la página.
        window.addEventListener('pageshow', function () {
            overlay.classList.add('hidden');
            overlay.classList.remove('grid');
        });
    })();
</script>
</div>