// Banners Swiper Script
// File: banners-swiper.js

(function() {
    'use strict';
    
    // انتظار تحميل الصفحة
    function initBannersSwiper() {
        // البحث عن السيكشن
        const section = document.querySelector('.s-block--banners');
        if (!section) {
            console.warn('Banners section not found');
            return;
        }
        
        // حذف السويبر القديم إن كان موجود
        const oldSwiper = section.querySelector('.swiper');
        if (oldSwiper && oldSwiper.swiper) {
            oldSwiper.swiper.destroy(true, true);
        }
        
        // البحث عن الكونتينر
        let container = section.querySelector('.grid, .swiper, .banners-swiper');
        if (!container) {
            container = section.querySelector('div');
        }
        
        // جمع كل الروابط والصور
        const links = Array.from(section.querySelectorAll('a[href*="categories"]'));
        
        if (links.length === 0) {
            console.warn('No banner links found');
            return;
        }
        
        console.log(`Found ${links.length} banners`);
        
        // بناء HTML جديد
        const swiperHTML = `
            <div class="swiper myBannersSwiper">
                <div class="swiper-wrapper">
                    ${links.map(link => {
                        const bgDiv = link.querySelector('.lazy__bg, div[style*="background-image"]');
                        const bgUrl = bgDiv ? 
                            (bgDiv.getAttribute('data-bg') || 
                             bgDiv.style.backgroundImage.replace(/url\(['"]?(.+?)['"]?\)/, '$1')) 
                            : '';
                        
                        return `
                            <div class="swiper-slide">
                                <a href="${link.href}" class="banner-link">
                                    <div class="banner-img" style="background-image: url('${bgUrl}')"></div>
                                </a>
                            </div>
                        `;
                    }).join('')}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        `;
        
        // استبدال المحتوى
        section.innerHTML = swiperHTML;
        
        // إضافة CSS
        if (!document.getElementById('banners-swiper-style')) {
            const style = document.createElement('style');
            style.id = 'banners-swiper-style';
            style.textContent = `
                .myBannersSwiper {
                    width: 100%;
                    height: auto;
                    padding-bottom: 50px;
                }
                
                .myBannersSwiper .swiper-wrapper {
                    display: flex;
                    align-items: stretch;
                }
                
                .myBannersSwiper .swiper-slide {
                    width: calc(33.333% - 8px);
                    height: auto;
                }
                
                .myBannersSwiper .banner-link {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    overflow: hidden;
                    transition: transform 0.3s ease;
                }
                
                .myBannersSwiper .banner-link:hover {
                    transform: scale(1.05);
                }
                
                .myBannersSwiper .banner-img {
                    width: 100%;
                    height: 0;
                    padding-bottom: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    position: relative;
                }
                
                .myBannersSwiper .swiper-pagination {
                    bottom: -10px !important;
                    text-align: center;
                }
                
                .myBannersSwiper .swiper-pagination-bullet {
                    width: 8px;
                    height: 8px;
                    background: #000;
                    opacity: 0.3;
                    margin: 0 4px;
                    transition: all 0.3s ease;
                }
                
                .myBannersSwiper .swiper-pagination-bullet-active {
                    opacity: 1;
                    width: 20px;
                    border-radius: 4px;
                }
                
                /* للشاشات الصغيرة جداً */
                @media (max-width: 480px) {
                    .myBannersSwiper .swiper-slide {
                        width: calc(33.333% - 6px);
                    }
                }
            `;
            document.head.appendChild(style);
        }
        
        // تحميل Swiper إذا لم يكن موجود
        if (typeof Swiper === 'undefined') {
            loadSwiperLibrary(initializeSwiperInstance);
        } else {
            initializeSwiperInstance();
        }
    }
    
    // تحميل مكتبة Swiper
    function loadSwiperLibrary(callback) {
        // تحميل CSS
        if (!document.querySelector('link[href*="swiper"]')) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
            document.head.appendChild(link);
        }
        
        // تحميل JS
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
        script.onload = callback;
        document.head.appendChild(script);
    }
    
    // تهيئة السويبر
    function initializeSwiperInstance() {
        setTimeout(() => {
            const swiperInstance = new Swiper('.myBannersSwiper', {
                slidesPerView: 3,
                spaceBetween: 12,
                slidesPerGroup: 3,
                loop: false,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                speed: 800,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    dynamicBullets: true,
                    dynamicMainBullets: 3,
                },
                breakpoints: {
                    320: {
                        slidesPerView: 3,
                        spaceBetween: 8,
                        slidesPerGroup: 1,
                    },
                    480: {
                        slidesPerView: 3,
                        spaceBetween: 12,
                        slidesPerGroup: 1,
                    }
                },
                on: {
                    init: function() {
                        console.log('✅ Banners Swiper initialized successfully!');
                        console.log(`Total slides: ${this.slides.length}`);
                    }
                }
            });
        }, 100);
    }
    
    // تشغيل عند تحميل الصفحة
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initBannersSwiper);
    } else {
        initBannersSwiper();
    }
    
})();