<?php
/**
 * newsitepopup.php
 * Homepage Load হলে, একটার পর একটা (Swipe করে দেখা যায়)
 * Image-Popup দেখানোর জন্য — GetBannerList.php-এর আসল ছবি দিয়ে।
 */
?>
<div id="sitePopOverlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9998; align-items:center; justify-content:center; padding:16px;">
    <div style="max-width:420px; width:100%; position:relative;">
        <button onclick="closeSitePopup()" style="position:absolute; top:-6px; right:-6px; background:#fff; border:none; color:#000; width:30px; height:30px; border-radius:50%; font-size:16px; cursor:pointer; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.4);">✕</button>

        <!-- ✅ Swipe করে দেখার জন্য Horizontal Scroll -->
        <div id="sitePopScroller" style="display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:14px; gap:0; -webkit-overflow-scrolling:touch;">
        </div>

        <!-- Dot Indicator -->
        <div id="sitePopDots" style="display:flex; justify-content:center; gap:6px; margin-top:12px;"></div>
    </div>
</div>

<style>
    #sitePopScroller::-webkit-scrollbar { display: none; }
    #sitePopScroller { scrollbar-width: none; }
    .site-pop-slide { flex: 0 0 100%; scroll-snap-align: center; }
</style>

<script>
(function() {
    if (sessionStorage.getItem('sitePopupSeen')) return;

    async function loadSitePopup() {
        try {
            const res = await fetch('/deepanshu/api/webapi/GetBannerList.php');
            const data = await res.json();
            const images = (data.data || []).map(b => b.bannerUrl).filter(Boolean);
            if (images.length === 0) return;

            const scroller = document.getElementById('sitePopScroller');
            const dots = document.getElementById('sitePopDots');

            scroller.innerHTML = images.map(url =>
                `<div class="site-pop-slide"><img src="${url}" style="width:100%; display:block; border-radius:14px;"></div>`
            ).join('');

            dots.innerHTML = images.map((_, i) =>
                `<span class="site-pop-dot" style="width:7px; height:7px; border-radius:50%; background:${i === 0 ? '#ffd54f' : 'rgba(255,255,255,.4)'};"></span>`
            ).join('');

            // ✅ Scroll করার সময়, নিচের Dot Update হওয়া
            scroller.addEventListener('scroll', () => {
                const index = Math.round(scroller.scrollLeft / scroller.offsetWidth);
                document.querySelectorAll('.site-pop-dot').forEach((dot, i) => {
                    dot.style.background = i === index ? '#ffd54f' : 'rgba(255,255,255,.4)';
                });
            });

            document.getElementById('sitePopOverlay').style.display = 'flex';
        } catch (e) {}
    }

    window.closeSitePopup = function() {
        document.getElementById('sitePopOverlay').style.display = 'none';
        sessionStorage.setItem('sitePopupSeen', '1');
    };

    setTimeout(loadSitePopup, 500);
})();
</script>
