let parent = document.querySelector('.product-index');

if (parent) {
    // Function to enforce the attribute
    function enforceShowControls(slider) {
        if (slider) {
            slider.setAttribute('show-controls', '');
        }
    }

    // Observe changes in the parent container
    let observer = new MutationObserver(() => {
        let slider = document.querySelector('.product-index salla-slider[id^="sub-cats"]');
        if (slider) enforceShowControls(slider);
    });

    // Start observing the parent for child changes
    observer.observe(parent, { childList: true, subtree: true });

    // Apply to any existing slider initially
    let initialSlider = document.querySelector('.product-index salla-slider[id^="sub-cats"]');
    if (initialSlider) enforceShowControls(initialSlider);
}
salla.onReady(() => {
    if (salla.config.get('page.slug') !== 'index') return;

    salla.api.product.categories(1518284224)
        .then(response => {
            if (!response || !response.data || !response.data.sub_categories) return;
            
            const subCategories = response.data.sub_categories;
            if (!subCategories.length) return;

            // Define custom image mappings for specific subcategories
            const customImageMap = {

            };
          
            const sliderWrapper = document.createElement('div');
            sliderWrapper.className = "s-block s-block-sub-categories";

            const sliderWrapperInner = document.createElement('div');
            sliderWrapperInner.className = "mx-auto max-w-7xl lg:px-8";

            const titleBlock = document.createElement('div');
            titleBlock.className = "lg:mx-0 mb-8 text-center home-block-title";
            titleBlock.innerHTML = `
                <h2 class="text-3xl font-bold tracking-tight text-store-text-primary sm:text-4xl">جميع الحقائب</h2>
                <p class="mt-2 text-lg leading-8 text-store-text-secondary">التصنيفات</p>
                <div class="my-2 mx-auto w-28 h-0 border-2 border-primary home-block-line"></div>
            `;

            const sliderParent = document.createElement('div');
            sliderParent.className = "container";
            
            const sliderElement = document.createElement('salla-slider');
            sliderElement.id = "sub-cats-slider-" + subCategories.length;
            sliderElement.setAttribute('type', 'carousel');
            sliderElement.setAttribute('show-controls', 'true');
            sliderElement.setAttribute('slider-config', JSON.stringify({'show-controls': true}));
            sliderElement.setAttribute('controls-outer', 'true');

            const itemsContainer = document.createElement('div');
            itemsContainer.setAttribute('slot', 'items');

            const defaultBagIcon = " "; 

            subCategories.forEach(subCategory => {
                const slide = document.createElement('div');
                slide.className = "swiper-slide slide--one-sixth text-center group";
                slide.id = subCategory.id_;
                
                // Check if the subcategory name exists in customImageMap, otherwise use API image or default
                const imageSrc = customImageMap[subCategory.name.toLowerCase()] || subCategory.image || defaultBagIcon;

                slide.innerHTML = `
                    <a href="${subCategory.url}" class="flex flex-col items-center justify-center">
                        <div class="overflow-hidden rounded-2xl">
                            <img class="aspect-[14/13] w-full rounded-2xl lazy object-cover group-hover:scale-110 duration-400" 
                                 src="${imageSrc}" 
                                 alt="${subCategory.name}" 
                                 loading="lazy"
                                 onerror="this.onerror=null; this.src='${defaultBagIcon}'; this.style.backgroundColor='#f5f5f5'; this.style.padding='8px'; this.style.borderRadius='50%';">
                        </div>
                        <span class="text-sm mt-2 text-store-text-primary">${subCategory.name}</span>
                    </a>
                `;

                itemsContainer.appendChild(slide);
            });

            sliderWrapper.appendChild(sliderWrapperInner); 
            sliderElement.setAttribute('show-controls', true);
            sliderElement.appendChild(itemsContainer);
            sliderWrapperInner.appendChild(titleBlock); 
            sliderParent.appendChild(sliderElement);
            sliderWrapperInner.appendChild(sliderParent);
            const targetElement = document.querySelector('.s-block--slider-with-bg');
            if (targetElement) {
                targetElement.insertAdjacentElement('beforebegin', sliderWrapper);
            }
        })
        .catch(error => console.error("Error fetching category details:", error));
});