@php
    use Illuminate\Support\Facades\Storage;

    $popupImage = $popup?->imagen ? Storage::url($popup->imagen) : null;
    $popupMobileImage = $popup?->imagen_movil ? Storage::url($popup->imagen_movil) : null;
@endphp

@if ($popup && $popupImage)
    <div
        id="popup-front"
        class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/75 px-4 py-8"
        data-popup-id="{{ $popup->id }}"
        data-popup-enlace="{{ $popup->enlace }}"
        data-popup-nueva-pestana="{{ $popup->nueva_pestana ? '1' : '0' }}"
    >
        <div class="relative w-full max-w-[680px]">

            <button
                type="button"
                id="popup-close"
                class="absolute right-[10px] top-[10px] z-20 flex  items-center justify-center rounded-full bg-transparent text-base leading-none text-white   hover:bg-transparent"
                aria-label="Cerrar popup"
            >
                Cerrar
            </button>

            <button
                type="button"
                id="popup-image-button"
                class="block w-full overflow-hidden rounded-xl border border-white/30 bg-transparent p-0 shadow-2xl"
                aria-label="{{ $popup->titulo }}"
            >
                <picture>
                    @if ($popupMobileImage)
                        <source
                            media="(max-width: 768px)"
                            srcset="{{ $popupMobileImage }}"
                        >
                    @endif

                    <img
                        id="popup-image"
                        src="{{ $popupImage }}"
                        alt="{{ $popup->titulo }}"
                        loading="lazy"
                        decoding="async"
                        class="block h-auto max-h-[85vh] w-full object-contain"
                    >
                </picture>
            </button>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const popupWrapper = document.getElementById('popup-front');
            const popupClose = document.getElementById('popup-close');
            const popupImageButton = document.getElementById('popup-image-button');
            const popupImage = document.getElementById('popup-image');
    
            if (!popupWrapper || !popupClose || !popupImageButton || !popupImage) {
                return;
            }
    
            const popupId = popupWrapper.dataset.popupId;
            const popupEnlace = popupWrapper.dataset.popupEnlace;
            const nuevaPestana = popupWrapper.dataset.popupNuevaPestana === '1';
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
            let popupLoaded = false;
            let popupShown = false;
            let popupTimer = null;
    
            function loadPopup() {
                if (popupLoaded) {
                    return;
                }
    
                popupLoaded = true;
    
                if (popupTimer) {
                    clearTimeout(popupTimer);
                }
    
                window.removeEventListener('scroll', handleFirstScroll);
    
                if (popupImage.complete && popupImage.naturalWidth > 0) {
                    showPopup();
                    return;
                }
    
                popupImage.onload = function () {
                    showPopup();
                };
            }
    
            function showPopup() {
                if (popupShown) {
                    return;
                }
    
                popupShown = true;
    
                popupWrapper.classList.remove('hidden');
                popupWrapper.classList.add('flex');
    
                document.body.classList.add('overflow-hidden');
    
                registerImpression();
            }
    
            function closePopup() {
                popupWrapper.classList.add('hidden');
                popupWrapper.classList.remove('flex');
    
                document.body.classList.remove('overflow-hidden');
            }
    
            function registerImpression() {
                fetch(`/popup/${popupId}/impresion`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                }).catch(function (error) {
                    console.error('Error registrando impresión:', error);
                });
            }
    
            function registerClick() {
                fetch(`/popup/${popupId}/clic`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                }).catch(function (error) {
                    console.error('Error registrando clic:', error);
                });
            }
    
            function handleFirstScroll() {
                loadPopup();
            }
    
            popupClose.addEventListener('click', function () {
                closePopup();
            });
    
            popupWrapper.addEventListener('click', function (event) {
                if (event.target === popupWrapper) {
                    closePopup();
                }
            });
    
            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closePopup();
                }
            });
    
            popupImageButton.addEventListener('click', function () {
                registerClick();
    
                if (popupEnlace) {
                    if (nuevaPestana) {
                        window.open(popupEnlace, '_blank', 'noopener,noreferrer');
                    } else {
                        window.location.href = popupEnlace;
                    }
    
                    return;
                }
    
                closePopup();
            });
    
            window.addEventListener('scroll', handleFirstScroll, {
                once: true,
                passive: true,
            });
    
            popupTimer = setTimeout(function () {
                loadPopup();
            }, 20000);
        });
    </script>
@endif