//jQuery(document).ready(function ($) {
//    $('.product-image-slider').each(function () {
//        let slider = $(this);
//        let items = slider.find('.slider-item');
//        let currentIndex = 0;
//
//        function showSlide(index) {
//            items.removeClass('active');
//            $(items[index]).addClass('active');
//        }
//
//        slider.siblings('.slider-prev').click(function () {
//            currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
//            showSlide(currentIndex);
//        });
//
//        slider.siblings('.slider-next').click(function () {
//            currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
//            showSlide(currentIndex);
//        });
//
//        // Initialize
//        showSlide(currentIndex);
//    });
//});
//
jQuery(document).ready(function($) {
    $('.product-image-slider').each(function() {
        let slider = $(this);
        let items = slider.find('.slider-item');
        let currentIndex = 0;

        // Add dots container
        let dotsContainer = $('<div class="slider-dots"></div>');
        slider.after(dotsContainer);

        items.each(function(i) {
            let dot = $('<span class="slider-dot"></span>');
            if (i === 0) dot.addClass('active');
            dot.on('click', function() {
                currentIndex = i;
                showSlide(currentIndex);
            });
            dotsContainer.append(dot);
        });

        function updateDots(index) {
            dotsContainer.find('.slider-dot').removeClass('active')
                .eq(index).addClass('active');
        }

        function showSlide(index) {
            items.removeClass('active');
            $(items[index]).addClass('active');
            updateDots(index);
        }

        slider.siblings('.slider-prev').click(function() {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
            showSlide(currentIndex);
        });

        slider.siblings('.slider-next').click(function() {
            currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
            showSlide(currentIndex);
        });

        // Swipe support for mobile
        let touchStartX = 0;
        let touchEndX = 0;

        slider.on('touchstart', function(e) {
            touchStartX = e.originalEvent.touches[0].clientX;
        });

        slider.on('touchend', function(e) {
            touchEndX = e.originalEvent.changedTouches[0].clientX;
            handleSwipe();
        });

        function handleSwipe() {
            let deltaX = touchEndX - touchStartX;
            if (Math.abs(deltaX) > 50) {
                if (deltaX < 0) {
                    currentIndex = (currentIndex + 1) % items.length;
                } else {
                    currentIndex = (currentIndex - 1 + items.length) % items.length;
                }
                showSlide(currentIndex);
            }
        }

        // Init
        showSlide(currentIndex);
    });
});