/* Add custom Js styles below */ 
document.querySelectorAll('.slide--cat-entry i').forEach((icon, index) => {
  const img = document.createElement('img');
  img.className = 'cat-img';
  
  // هنا غير الصور حسب الترتيب
  const images = [
    'https://i.postimg.cc/rpHT97V2/Group-1-1.png',
    'https://i.postimg.cc/y88sfXXx/Group-2.png',
    'https://i.postimg.cc/qMLpXZKW/Group-2-1.png',
    'https://i.postimg.cc/CLYF8VRj/Group-2-2.png'
  ];
  
  img.src = images[index];
  img.alt = icon.nextElementSibling.innerText;
  
  icon.replaceWith(img);
});

/*-------------------------*/
// البحث عن الكلاس المطلوب مع شرط وجود الصورة
function initBannerSlider() {
    // التحقق من وجود السلايدر مسبقاً لمنع التكرار
    if (document.querySelector('.custom-banner-slider')) {
        console.log('السلايدر موجود مسبقاً');
        return;
    }

    // البحث عن العنصر الذي يحتوي على الكلاسات المطلوبة
    const bannerElement = document.querySelector('.banner.banner--fixed.overflow-hidden');
    
    if (!bannerElement) {
        console.log('لم يتم العثور على العنصر المطلوب');
        return;
    }

    // التحقق من وجود الصورة المحددة
    const targetImageUrl = 'https://cdn.salla.sa/form-builder/gFdQxYTNFeNGFbtwU7MTrZtZ9EicsCq2VZBfxIBI.webp';
    const images = bannerElement.querySelectorAll('img');
    let hasTargetImage = false;

    images.forEach(img => {
        if (img.src === targetImageUrl) {
            hasTargetImage = true;
        }
    });

    if (!hasTargetImage) {
        console.log('لم يتم العثور على الصورة المطلوبة');
        return;
    }

    // إخفاء البنر الأصلي
    bannerElement.style.display = 'none';

    // صور السلايدر
    const sliderImages = [
        'https://i.postimg.cc/9FpV60h6/g-Fd-Qx-YTNFe-NGFbtw-U7-MTr-Zt-Z9-Eics-Cq2-VZBfx-IBI.webp',
        'https://i.postimg.cc/MKxq3Rh0/g4-Bn6-YSw-R5x-U7-A19-Rvdfgkoe8f-Tag1pet3-Prv-Pyy.webp',
        'https://i.postimg.cc/HWbTt3Ps/0m-Fj-Vo-Dgd-XYlo-D214r-Bw7-QRPJ3-A7tp-ETEJp-CS3-CM.webp',
        'https://i.postimg.cc/Hn0Hss77/I1-Wx-OZMqbd-Y3-NAa9-Psmve-G9-Ns-AAXhx-OZo-RWIJn-W8.webp'
    ];

    // إنشاء CSS للسلايدر
    const sliderCSS = `
        <style>
        .custom-banner-slider {
            position: relative;
            width: 100%;
            max-width: 1117px;
            height: 720px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            background: #000;
        }

        .custom-slider-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .custom-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }

        .custom-slide.active {
            opacity: 1;
        }

        .custom-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .custom-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #333;
            z-index: 10;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .custom-nav-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-50%) scale(1.1);
        }

        .custom-prev {
            left: 20px;
        }

        .custom-next {
            right: 20px;
        }

        .custom-dots-container {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .custom-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.8);
        }

        .custom-dot.active {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.2);
        }

        /* التجاوب مع الأجهزة المحمولة */
        @media (max-width: 768px) {
            .custom-banner-slider {
                height: 400px;
                margin: 10px;
                border-radius: 8px;
            }

            .custom-nav-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .custom-prev {
                left: 10px;
            }

            .custom-next {
                right: 10px;
            }

            .custom-dots-container {
                bottom: 15px;
            }

            .custom-dot {
                width: 10px;
                height: 10px;
            }
        }

        @media (max-width: 480px) {
            .custom-banner-slider {
                height: 250px;
                margin: 5px;
                border-radius: 6px;
            }

            .custom-nav-btn {
                width: 35px;
                height: 35px;
                font-size: 14px;
            }

            .custom-prev {
                left: 5px;
            }

            .custom-next {
                right: 5px;
            }

            .custom-dots-container {
                bottom: 10px;
                gap: 8px;
            }

            .custom-dot {
                width: 8px;
                height: 8px;
            }
        }
        </style>
    `;

    // إضافة CSS إلى الـ head
    document.head.insertAdjacentHTML('beforeend', sliderCSS);

    // إنشاء HTML للسلايدر
    const sliderHTML = `
        <div class="custom-banner-slider">
            <div class="custom-slider-wrapper">
                ${sliderImages.map((img, index) => `
                    <div class="custom-slide ${index === 0 ? 'active' : ''}">
                        <img src="${img}" alt="بنر ${index + 1}" loading="lazy">
                    </div>
                `).join('')}
            </div>
            
            <button class="custom-nav-btn custom-prev" onclick="customSliderPrev()">&#8249;</button>
            <button class="custom-nav-btn custom-next" onclick="customSliderNext()">&#8250;</button>
            
            <div class="custom-dots-container">
                ${sliderImages.map((_, index) => `
                    <div class="custom-dot ${index === 0 ? 'active' : ''}" onclick="customSliderGoTo(${index})"></div>
                `).join('')}
            </div>
        </div>
    `;

    // إدراج السلايدر في مكان البنر الأصلي
    bannerElement.insertAdjacentHTML('afterend', sliderHTML);

    // متغيرات السلايدر
    let currentSlide = 0;
    const totalSlides = sliderImages.length;

    // وظائف التحكم في السلايدر
    window.customSliderNext = function() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateSlider();
    };

    window.customSliderPrev = function() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateSlider();
    };

    window.customSliderGoTo = function(index) {
        currentSlide = index;
        updateSlider();
    };

    function updateSlider() {
        const slides = document.querySelectorAll('.custom-slide');
        const dots = document.querySelectorAll('.custom-dot');

        slides.forEach((slide, index) => {
            slide.classList.toggle('active', index === currentSlide);
        });

        dots.forEach((dot, index) => {
            dot.classList.toggle('active', index === currentSlide);
        });
    }

    // تشغيل تلقائي للسلايدر
    setInterval(() => {
        window.customSliderNext();
    }, 5000); // كل 5 ثواني

    console.log('تم إنشاء السلايدر بنجاح!');
}

// منع التكرار باستخدام متغير عام
window.customSliderInitialized = window.customSliderInitialized || false;

// تشغيل السكريبت عند تحميل الصفحة
if (!window.customSliderInitialized) {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            if (!window.customSliderInitialized) {
                initBannerSlider();
                window.customSliderInitialized = true;
            }
        });
    } else {
        initBannerSlider();
        window.customSliderInitialized = true;
    }

    // تشغيل السكريبت أيضاً في حالة تحميل محتوى ديناميكي (مرة واحدة فقط)
    setTimeout(function() {
        if (!window.customSliderInitialized) {
            initBannerSlider();
            window.customSliderInitialized = true;
        }
    }, 1000);
}