// إنشاء عنصر جديد للصورة
var imgElement = document.createElement("img");

// التحقق من لغة الموقع
var isArabic = document.documentElement.lang === "ar";  // أو تحقق من أي عنصر يعبر عن اللغة

// تعيين مصدر الصورة والرابط بناءً على اللغة
if (isArabic) {
    imgElement.src = "https://img.imgdd.com/6cf8b627-6376-4c6f-a2fc-98a56584e05e.png"; // الصورة للعربي
    imgElement.onclick = function() {
        window.location.href = "https://eshfaa.store/ar/%D8%A7%D9%84%D8%AA%D8%AD%D8%A7%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B7%D8%A8%D9%8A%D8%A9/c2019251775"; // الرابط للعربي
    };
} else {
    imgElement.src = "https://img.imgdd.com/a87a6313-8aef-4135-baef-a304ed073519.png"; // الصورة للإنجليزي
    imgElement.onclick = function() {
        window.location.href = "https://eshfaa.store/en/Medical-tests/c2019251775"; // الرابط للإنجليزي
    };
}

// تعيين بعض الأنماط للصورة إذا كنت تريد تخصيص شكلها
imgElement.style.width = "100%";  // يمكنك تغيير الحجم حسب رغبتك
imgElement.style.height = "auto"; // يمكنك تعديل الحجم حسب الحاجة

// العثور على الـ div الذي يحتوي على الـ banners
var gridContainer = document.querySelector(".grid.md\\:grid-cols-3");

// إضافة الصورة داخل الـ div
gridContainer.appendChild(imgElement);




/****added Slider Section *********/

(function() {
    // Image URLs for the slider
    const sliderImages = [
        'https://i.postimg.cc/KvPFGPhY/2000-638228f805594.png',
        'https://i.postimg.cc/fRszmHfX/6-Dhs2-O6-X-400x400.jpg',
        'https://i.postimg.cc/bJ48JLvZ/images-1.png',
        'https://i.postimg.cc/0yC8fpV4/images-2.png',
        'https://i.postimg.cc/qBC4Yfmy/images-35.jpg',
        'https://i.postimg.cc/KvSxh9VV/images-37.jpg',
        'https://i.postimg.cc/VkzwdJzW/images-43.jpg',
        'https://i.postimg.cc/W1Svrs3L/images-44.jpg',
        'https://i.postimg.cc/J0J8BJyP/images-5.png',
        'https://i.postimg.cc/Jh4RdGgz/images-5.jpg',
        'https://i.postimg.cc/Bv6GBRL8/images-54.jpg'
    ];

    // Create slider HTML structure
    function createSliderHTML() {
        return `
            <section class="slider-section" style="width: 100%;  padding: 0 20px; position: relative;">
                <div class="slider-container" style="max-width: 90%; margin: 0 auto; position: relative; display: flex; justify-content: center;">
                    <div class="swiper" id="mainSlider" style="width: 100%; height: 300px; margin: 0 20px;">
                        <div class="swiper-wrapper">
                            ${sliderImages.map((img, index) => `
                                <div class="swiper-slide" style="position: relative; overflow: hidden; border-radius: 15px;">
                                    <img src="${img}" alt="Slide ${index + 1}" style="width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; border-radius: 15px;" loading="lazy">
                                </div>
                            `).join('')}
                        </div>
                    </div>
                </div>
            </section>
        `;
    }

    // Add CSS styles
    function addSliderStyles() {
        const styles = `
            <style>
                /* Slider responsive styles */
                .slider-section .swiper-slide img:hover {
                    transform: scale(1.05);
                }
                
                /* Center the section */
                .slider-section {
                    display: flex;
                    justify-content: center;
                }

                /* Mobile responsive */
                @media (max-width: 768px) {
                    .slider-section {
                        margin: 20px 0;
                        padding: 0 10px;
                    }
                    
                    .slider-section .swiper {
                        height: 250px !important;
                        margin: 0 20px !important;
                    }

                    .slider-section .swiper-slide img {
                        object-fit: contain;
                        height: 250px !important;
                    }
                    
                    .swiper-wrapper {
                        gap: 5px !important;
                    }
                }

                @media (max-width: 480px) {
                    .slider-section .swiper {
                        height: 220px !important;
                        margin: 0 15px !important;
                    }
                    
                    .slider-section .swiper-slide img {
                        object-fit: contain;
                        height: 220px !important;
                    }
                    
                    .swiper-wrapper {
                        gap: 5px !important;
                    }
                }

                /* RTL Support */
                [dir="rtl"] .slider-section .swiper-button-next {
                    left: -60px !important;
                    right: auto !important;
                }
                
                [dir="rtl"] .slider-section .swiper-button-prev {
                    right: -60px !important;
                    left: auto !important;
                }
            </style>
        `;
        
        document.head.insertAdjacentHTML('beforeend', styles);
    }

    // Load Swiper JS if not already loaded
    function loadSwiperJS(callback) {
        if (typeof Swiper !== 'undefined') {
            callback();
            return;
        }
        
        // Load Swiper CSS
        const swiperCSS = document.createElement('link');
        swiperCSS.rel = 'stylesheet';
        swiperCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.7/swiper-bundle.min.css';
        document.head.appendChild(swiperCSS);
        
        // Load Swiper JS
        const swiperJS = document.createElement('script');
        swiperJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.7/swiper-bundle.min.js';
        swiperJS.onload = callback;
        document.head.appendChild(swiperJS);
    }

    // Initialize Swiper
    function initializeSwiper() {
        const swiper = new Swiper('#mainSlider', {
            // Basic settings
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            speed: 800,
            
            // Effects
            effect: 'slide',
            grabCursor: true,
            
            // Pagination
            pagination: {
                el: '.swiper-pagination',
                clickable: false,
                enabled: false,
            },
            
            // Responsive breakpoints
            breakpoints: {
                320: {
                    slidesPerView: 2,
                    spaceBetween: 5,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                },
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 20,
                }
            },
            
            // Advanced settings
            preloadImages: false,
            lazy: {
                loadPrevNext: true,
            },
            
            // Touch settings
            touchRatio: 1,
            touchAngle: 45,
            simulateTouch: true,
            
            // Keyboard control
            keyboard: {
                enabled: true,
                onlyInViewport: true,
            },
            
            // Mouse wheel
            mousewheel: {
                enabled: false,
            },
            
            // Auto height
            autoHeight: false,
        });

        // Add hover pause functionality
        const swiperContainer = document.querySelector('#mainSlider');
        swiperContainer.addEventListener('mouseenter', () => {
            swiper.autoplay.stop();
        });
        
        swiperContainer.addEventListener('mouseleave', () => {
            swiper.autoplay.start();
        });

        console.log('Salla Slider initialized successfully!');
    }

    // Main initialization function
    function initSlider() {
        // Find the body element with class 'index' and footer element
        const body = document.querySelector('body.index');
        const footer = document.querySelector('footer.store-footer');
        
        if (!body || !footer) {
            console.error('Either body.index or footer.store-footer element not found.');
            return;
        }

        // Add styles
        addSliderStyles();

        // Insert slider HTML before footer within the body.index
        footer.insertAdjacentHTML('beforebegin', createSliderHTML());

        // Load Swiper and initialize
        loadSwiperJS(() => {
            // Small delay to ensure DOM is ready
            setTimeout(initializeSwiper, 100);
        });
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSlider);
    } else {
        initSlider();
    }
})();

// Enhanced language switcher with text replacement only
document.addEventListener('DOMContentLoaded', () => {
    // Replace flags with text
    document.querySelectorAll('.top-navbar span.flag.iti__flag.iti__gb.rounded-sm').forEach(flag => {
        flag.outerHTML = '<span>English</span>';
    });

    document.querySelectorAll('.top-navbar span.flag.iti__flag.iti__sa.rounded-sm').forEach(flag => {
        flag.outerHTML = '<span>العربية</span>';
    });
    
    // Initial banner URL update when page loads
    setTimeout(updateBannerUrlsOnly, 1000);
});

// Enhanced MutationObserver for banner content only
const contentObserver = new MutationObserver(function(mutations) {
    let shouldUpdateBannerUrls = false;
    
    mutations.forEach(function(mutation) {
        // Check for new banner elements only
        if (mutation.type === 'childList') {
            const addedNodes = Array.from(mutation.addedNodes);
            addedNodes.forEach(node => {
                if (node.nodeType === 1) { // Element node
                    // Check if banner elements were added
                    if (node.classList && (node.classList.contains('banner-entry') || 
                        node.querySelector && node.querySelector('.banner-entry'))) {
                        shouldUpdateBannerUrls = true;
                    }
                }
            });
        }
    });
    
    if (shouldUpdateBannerUrls) {
        setTimeout(updateBannerUrlsOnly, 100);
    }
});

// Observe only the banner sections for dynamic content changes
contentObserver.observe(document.body, {
    childList: true,
    subtree: true
});

// WhatsApp link updater with MutationObserver
const observer = new MutationObserver(function(mutationsList, observer) {
    const link = document.querySelector('footer > div.store-footer__inner > div > div:nth-child(2) > salla-menu > div > div > a:nth-child(4)');
    if (link) {
        link.setAttribute('href', 'https://wa.me/966537445169');
        link.setAttribute('target', '_blank');
        observer.disconnect();
    }
});

observer.observe(document.body, { childList: true, subtree: true });