{{-- Popup Ads Modal Component --}}
{{-- Receives ads data from Blade via getPopupAds() helper --}}
{{-- Filters by localStorage seen status and audience targeting --}}

@php
    $popupAds = getPopupAds();
    $isManagedUser = Auth::check() && method_exists(Auth::user(), 'isManaged') && Auth::user()->isManaged();

    // Filter out non_managed ads for managed users (users under a vendor) server-side
    if ($isManagedUser) {
        $popupAds = $popupAds->filter(fn ($ad) => $ad['target_audience'] !== 'non_managed');
    }
@endphp

@if($popupAds->count() > 0)
<div id="popup-ad-modal" style="display: none;">
    <div class="popup-ad-overlay"></div>
    <div class="popup-ad-content">
        <button type="button" class="popup-ad-close" id="popup-ad-close-btn" aria-label="إغلاق">&times;</button>
        <div class="popup-ad-body">
            <a id="popup-ad-link" href="#" target="_blank" rel="noopener" style="display: none;">
                <img id="popup-ad-image" src="" alt="" class="popup-ad-img" />
            </a>
            <img id="popup-ad-image-no-link" src="" alt="" class="popup-ad-img" style="display: none;" />
        </div>
    </div>
</div>

<style>
    #popup-ad-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }

    .popup-ad-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }

    .popup-ad-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 550px;
        width: 90%;
        max-height: 85vh;
        border-radius: 12px;
        overflow: hidden;
        background: var(--color-bg-primary, #fff);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        animation: popupAdFadeIn 0.3s ease;
    }

    .popup-ad-close {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .popup-ad-close:hover {
        background: var(--color-primary-500, rgba(0, 0, 0, 0.75));
        transform: scale(1.1);
    }

    .popup-ad-body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup-ad-img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
        border-radius: 12px;
    }

    #popup-ad-link {
        display: block;
        text-decoration: none;
        line-height: 0;
    }

    @keyframes popupAdFadeIn {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @media (max-width: 576px) {
        .popup-ad-content {
            width: 95%;
            max-width: none;
            border-radius: 8px;
        }
        .popup-ad-img { border-radius: 8px; }
        .popup-ad-close { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 1.2rem; }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var popupAdsData = @json($popupAds->values());

        var modal = document.getElementById('popup-ad-modal');
        var closeBtn = document.getElementById('popup-ad-close-btn');
        var linkEl = document.getElementById('popup-ad-link');
        var imgLink = document.getElementById('popup-ad-image');
        var imgNoLink = document.getElementById('popup-ad-image-no-link');
        var overlay = modal ? modal.querySelector('.popup-ad-overlay') : null;

        if (!modal || !popupAdsData || popupAdsData.length === 0) return;

        // Filter: localStorage seen status only (audience already filtered server-side)
        var unseenAds = popupAdsData.filter(function(ad) {
            var key = 'popup_ad_' + ad.id + '_' + ad.updated_at;
            return !localStorage.getItem(key);
        });

        if (unseenAds.length === 0) return;

        var currentIndex = 0;

        function showAd(index) {
            if (index >= unseenAds.length) {
                modal.style.display = 'none';
                return;
            }
            var ad = unseenAds[index];

            if (ad.link_url) {
                linkEl.href = ad.link_url;
                imgLink.src = ad.image_url;
                imgLink.alt = ad.title || '';
                linkEl.style.display = 'block';
                imgNoLink.style.display = 'none';
            } else {
                imgNoLink.src = ad.image_url;
                imgNoLink.alt = ad.title || '';
                imgNoLink.style.display = 'block';
                linkEl.style.display = 'none';
            }

            modal.style.display = 'block';
        }

        function closeAd() {
            var ad = unseenAds[currentIndex];
            localStorage.setItem('popup_ad_' + ad.id + '_' + ad.updated_at, '1');
            currentIndex++;
            showAd(currentIndex);
        }

        closeBtn.addEventListener('click', closeAd);
        if (overlay) overlay.addEventListener('click', closeAd);

        showAd(0);
    });
</script>
@endif