// ════════════════════════════════════════════════════════════════
// إضافة صورة الحزمة الاقتصادية فوق عنصر salla-installment
// ════════════════════════════════════════════════════════════════

(function addInstallmentImage() {
    function insertImage() {
        try {
            const installment = document.querySelector('salla-installment');
            
            if (!installment) {
                // المحاولة مرة أخرى بعد 500ms
                setTimeout(insertImage, 500);
                return;
            }
            
            // التحقق من عدم إضافة الصورة مسبقاً
            if (installment.querySelector('.custom-installment-image')) {
                return;
            }
            
            // إنشاء عنصر الصورة
            const imageContainer = document.createElement('div');
            imageContainer.className = 'custom-installment-image';
            imageContainer.innerHTML = `
                <style>
                    .custom-installment-image {
                        width: 100%;
                        margin-bottom: 15px;
                    }
                    
                    .custom-installment-image img {
                        width: 100%;
                        height: auto;
                        display: block;
                        border-radius: 8px;
                    }
                    
                    @media (max-width: 768px) {
                        .custom-installment-image {
                            margin-bottom: 10px;
                        }
                    }
                </style>
                <img src="https://img.imgdd.com/d6115937-5349-4c4e-91aa-ecfcdb3a6d90.png" alt="الحزمة الاقتصادية">
            `;
            
            // إدراج الصورة قبل محتوى salla-installment
            installment.insertBefore(imageContainer, installment.firstChild);
            
        } catch (error) {
            console.warn('خطأ في إضافة صورة التقسيط:', error);
        }
    }
    
    // تشغيل الدالة عند تحميل الصفحة
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', insertImage);
    } else {
        insertImage();
    }
    
    // إعادة التشغيل عند تغيير الصفحة في Salla (SPA)
    if (typeof salla !== 'undefined' && salla.event && typeof salla.event.on === 'function') {
        salla.event.on('page::loaded', insertImage);
    }
    
    // مراقبة إضافة العنصر للصفحة (MutationObserver)
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.tagName === 'SALLA-INSTALLMENT') {
                        insertImage();
                    }
                });
            }
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

// ════════════════════════════════════════════════════════════════
// نهاية كود إضافة صورة الحزمة الاقتصادية
// ════════════════════════════════════════════════════════════════













document.addEventListener('DOMContentLoaded', () => {
    // جيب كل الـ sections مش أول واحدة بس
    const sections = document.querySelectorAll('section.s-block.s-block--banners');

    sections.forEach(section => {
        const bannerDivs = section.querySelectorAll('.lazy__bg');

        bannerDivs.forEach(div => {
            const imageUrl = div.getAttribute('data-bg');
            
            if (!imageUrl) return;
            
            const parent = div.parentNode;
            
            parent.style.display = 'block';
            
            const img = document.createElement('img');
            img.src = imageUrl;
            img.alt = '';
            img.className = 'w-full h-full object-contain';
            img.loading = 'lazy';
            img.style.width = '100%';
            img.style.height = '100%';
            img.style.display = 'block';
            
            parent.replaceChild(img, div);
        });
    });
});



// كود JavaScript لتحويل الأقسام الموجودة إلى Swiper بدون تعديل HTML

// ═══════════════════════════════════════════════════════════════
// دالة لتحميل Swiper تلقائياً إذا لم يكن موجود
// ═══════════════════════════════════════════════════════════════
function loadSwiper(callback) {
    // التحقق من وجود Swiper
    if (typeof Swiper !== 'undefined') {
        callback();
        return;
    }
    
    // تحميل Swiper CSS
    const swiperCSS = document.createElement('link');
    swiperCSS.rel = 'stylesheet';
    swiperCSS.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
    document.head.appendChild(swiperCSS);
    
    // تحميل Swiper JS
    const swiperJS = document.createElement('script');
    swiperJS.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
    swiperJS.onload = function() {
        callback();
    };
    document.head.appendChild(swiperJS);
}

// ═══════════════════════════════════════════════════════════════
// تشغيل الكود بعد تحميل الصفحة
// ═══════════════════════════════════════════════════════════════
document.addEventListener('DOMContentLoaded', function() {
    
    // تحميل Swiper أولاً ثم تشغيل باقي الكود
    loadSwiper(function() {
        
        // دالة لتحويل القسم إلى Swiper
        function convertToSwiper(section, swiperClass, direction) {
            // البحث عن div الـ grid
            const gridDiv = section.querySelector('.grid');
            
            if (!gridDiv) {
                return;
            }
            
            // إضافة كلاسات Swiper للـ container
            gridDiv.classList.add('swiper', swiperClass);
            gridDiv.classList.remove('grid', 'md:grid-cols-3', 'two-row', 'grid-flow-row', 'gap-3', 'sm:gap-8');
            gridDiv.setAttribute('dir', direction);
            
            // إنشاء swiper-wrapper
            const swiperWrapper = document.createElement('div');
            swiperWrapper.className = 'swiper-wrapper';
            
            // نقل جميع العناصر إلى swiper-slide
            const bannerEntries = Array.from(gridDiv.querySelectorAll('.banner-entry'));
            
            // إضافة العناصر الأصلية
            bannerEntries.forEach(entry => {
                const slide = document.createElement('div');
                slide.className = 'swiper-slide';
                slide.appendChild(entry.cloneNode(true));
                swiperWrapper.appendChild(slide);
            });
            
            // تكرار العناصر مرة تانية
            bannerEntries.forEach(entry => {
                const slide = document.createElement('div');
                slide.className = 'swiper-slide';
                slide.appendChild(entry.cloneNode(true));
                swiperWrapper.appendChild(slide);
                entry.remove();
            });
            
            // إضافة swiper-wrapper إلى الـ container
            gridDiv.appendChild(swiperWrapper);
        }
        
        // تحويل القسم الأول (section:nth-child(12))
        const section1 = document.querySelector('body.index section:nth-child(12)');
        if (section1) {
            convertToSwiper(section1, 'bannerSwiper1', 'rtl');
        }
        
        // تحويل القسم الثاني (section:nth-child(13))
        const section2 = document.querySelector('body.index section:nth-child(13)');
        if (section2) {
            convertToSwiper(section2, 'bannerSwiper2', 'ltr');
        }
        
        // الانتظار قليلاً ثم تهيئة Swiper
        setTimeout(function() {
            
            // تهيئة القسم الأول - حركة RTL (من اليمين لليسار)
            if (document.querySelector('.bannerSwiper1')) {
                try {
                    const swiper1 = new Swiper('.bannerSwiper1', {
                        rtl: true,
                        direction: 'horizontal',
                        loop: true,
                        slidesPerView: 3,
                        spaceBetween: 10,
                        centeredSlides: false,
                        
                        effect: 'slide',
                        speed: 1000,
                        
                        autoplay: {
                            delay: 3500,
                            disableOnInteraction: false,
                        },
                        
                        breakpoints: {
                            320: {
                                slidesPerView: 4,
                                spaceBetween: 10,
                            },
                            640: {
                                slidesPerView: 4,
                                spaceBetween: 10,
                            },
                            768: {
                                slidesPerView: 4,
                                spaceBetween: 15,
                            },
                            1024: {
                                slidesPerView: 5,
                                spaceBetween: 15,
                            },
                            1280: {
                                slidesPerView: 5,
                                spaceBetween: 20,
                            },
                            1536: {
                                slidesPerView: 5,
                                spaceBetween: 20,
                            },
                        },
                    });
                } catch (error) {
                    // Handle error silently
                }
            }
            
            // تهيئة القسم الثاني - حركة LTR (من اليسار لليمين) - عكس الأول
            if (document.querySelector('.bannerSwiper2')) {
                try {
                    const swiper2 = new Swiper('.bannerSwiper2', {
                        rtl: false,
                        direction: 'horizontal',
                        loop: true,
                        slidesPerView: 3,
                        spaceBetween: 10,
                        centeredSlides: false,
                        
                        effect: 'slide',
                        speed: 1000,
                        
                        autoplay: {
                            delay: 3500,
                            disableOnInteraction: false,
                            reverseDirection: true,
                        },
                        
                        breakpoints: {
                            320: {
                                slidesPerView: 4,
                                spaceBetween: 10,
                            },
                            640: {
                                slidesPerView: 4,
                                spaceBetween: 10,
                            },
                            768: {
                                slidesPerView: 4,
                                spaceBetween: 15,
                            },
                            1024: {
                                slidesPerView: 5,
                                spaceBetween: 15,
                            },
                            1280: {
                                slidesPerView: 5,
                                spaceBetween: 20,
                            },
                            1536: {
                                slidesPerView: 5,
                                spaceBetween: 20,
                            },
                        },
                    });
                } catch (error) {
                    // Handle error silently
                }
            }
            
        }, 200);
        
    });
    
});


// كود JavaScript لتحويل الأقسام الموجودة إلى Swiper بدون تعديل HTML

document.addEventListener('DOMContentLoaded', function() {
    
    // اختيار الـ section المحدد
const section = document.querySelector('body.index section:nth-child(6)');

if (section) {
    // البحث عن الـ div الذي يحتوي على md:grid-cols-3
    const gridDiv = section.querySelector('.md\\:grid-cols-3');
    
    if (gridDiv) {
        // إزالة container من الـ section
        section.classList.remove('container');
        
        // إضافة container للـ div
        gridDiv.classList.add('container');
    }
}
    
});