@php
    $promoRows = \Illuminate\Support\Facades\DB::table('configurations')
        ->whereIn('key', ['promo_banner_enabled', 'promo_banner_image', 'promo_banner_link'])
        ->pluck('value', 'key');

    $promoPopupEnabled = ($promoRows['promo_banner_enabled'] ?? '0') === '1';
    $promoPopupImage   = $promoRows['promo_banner_image'] ?? null;
    $promoPopupLink    = $promoRows['promo_banner_link'] ?? '';
@endphp

@if ($promoPopupEnabled && $promoPopupImage)
    <div
        id="promo-popup-overlay"
        class="promo-popup-overlay"
        role="dialog"
        aria-modal="true"
        aria-label="Special offer"
    >
        <div class="promo-popup-box">
            <button type="button" id="promo-popup-close" class="promo-popup-close" aria-label="Close">&times;</button>

            @if ($promoPopupLink)
                <a href="{{ $promoPopupLink }}" class="promo-popup-link">
                    <img src="{{ Storage::url($promoPopupImage) }}" alt="Special offer" class="promo-popup-image">
                </a>
            @else
                <img src="{{ Storage::url($promoPopupImage) }}" alt="Special offer" class="promo-popup-image">
            @endif
        </div>
    </div>

    <style>
        /* Hidden by default; only shown when the .promo-open class is added. */
        .promo-popup-overlay {
            display: none;
            position: fixed;
            inset: 0;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.6);
            z-index: 99999;
        }

        .promo-popup-overlay.promo-open {
            display: flex;
        }

        .promo-popup-box {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
        }

        .promo-popup-image {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 85vh;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
        }

        .promo-popup-close {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 40px;
            height: 40px;
            padding: 0;
            border: none;
            border-radius: 9999px;
            background: #ffffff;
            color: #111111;
            font-size: 24px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
            z-index: 1;
        }

        .promo-popup-close:hover {
            background: #f3f3f3;
        }

        /* Keep the close button on-screen on small devices. */
        @media (max-width: 640px) {
            .promo-popup-close {
                top: 4px;
                right: 4px;
            }
        }
    </style>

    <script>
        (function () {
            var SNOOZE_KEY  = 'ps_promo_popup_snooze';   // localStorage: epoch ms to stay hidden until (set on close)
            var SESSION_KEY = 'ps_promo_popup_shown';    // sessionStorage: shown once this browsing session
            var SNOOZE_MS   = 24 * 60 * 60 * 1000;       // 24 hours

            var overlay = document.getElementById('promo-popup-overlay');
            var closeBtn = document.getElementById('promo-popup-close');
            if (!overlay || !closeBtn) return;

            // Respect the 24h snooze and once-per-session rules.
            try {
                var snoozeUntil = parseInt(localStorage.getItem(SNOOZE_KEY) || '0', 10);
                if (snoozeUntil && Date.now() < snoozeUntil) return;
                if (sessionStorage.getItem(SESSION_KEY)) return;
            } catch (e) {}

            var shown = false;

            function isOpen() {
                return overlay.classList.contains('promo-open');
            }

            function scrolledPercent() {
                var doc = document.documentElement;
                var scrollable = doc.scrollHeight - window.innerHeight;
                if (scrollable <= 0) return 100; // page too short to scroll — count as fully scrolled
                return ((window.scrollY || doc.scrollTop || 0) / scrollable) * 100;
            }

            function showPopup() {
                if (shown) return;
                shown = true;
                overlay.classList.add('promo-open');
                try { sessionStorage.setItem(SESSION_KEY, '1'); } catch (e) {}
                window.removeEventListener('scroll', maybeShow);
                window.removeEventListener('resize', maybeShow);
            }

            function closePopup() {
                overlay.classList.remove('promo-open');
                try { localStorage.setItem(SNOOZE_KEY, String(Date.now() + SNOOZE_MS)); } catch (e) {}
            }

            function maybeShow() {
                if (scrolledPercent() >= 50) showPopup();
            }

            window.addEventListener('scroll', maybeShow, { passive: true });
            window.addEventListener('resize', maybeShow);
            window.addEventListener('load', maybeShow);
            maybeShow(); // handle short pages / already-scrolled state

            closeBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                closePopup();
            });

            overlay.addEventListener('click', function (e) {
                if (e.target === overlay) closePopup(); // click on the dark backdrop
            });

            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && isOpen()) closePopup();
            });
        })();
    </script>
@endif