jQuery(document).on('ready', function() {
    var $ = jQuery;
    var booksSliders = $('.featured-slider__active');

    booksSliders.each(function(index) {
        var slideToShow = parseInt($(this).attr('data-slideToshow'), 10);
        var getNexPrev = $(this).attr('data-nav');
        var getInfinite = $(this).attr('data-loop');
        var getAutoplay = $(this).attr('data-autoplay');
        var getDots = $(this).attr('data-dots');
        // Ensure slidesToShow is an odd number for centerMode to work properly
        if (slideToShow % 2 === 0) {
            slideToShow += 1; // Make it an odd number if it's even
        }

        var showNextPrev = true;
        if (getNexPrev === "true") {
            showNextPrev = true;
        } else if (getNexPrev === "false") {
            showNextPrev = false;
        } else {
            showNextPrev = Boolean(getNexPrev);
        }

        var showInfinite = true;
        if (getInfinite === "true") {
            showInfinite = true;
        } else if (getInfinite === "false") {
            showInfinite = false;
        } else {
            showInfinite = Boolean(getInfinite);
        }

        var showAutoplay = true;
        if (getAutoplay === "true") {
            showAutoplay = true;
        } else if (getAutoplay === "false") {
            showAutoplay = false;
        } else {
            showAutoplay = Boolean(getAutoplay);
        }

        // Initialize Slick Slider
        var slider = $(this).slick({
            slidesToShow: slideToShow,
            slidesToScroll: 1,
            arrows: showNextPrev,
            infinite: showInfinite,
            autoplay: showAutoplay,
            speed: 2000,
            dots: false,
            nextArrow: '<div class="slick-next"><i class="rswpthemes-icon icon-arrow-right-solid"></i></div>',
            prevArrow: '<div class="slick-prev"><i class="rswpthemes-icon icon-arrow-left-solid"></i></div>',
            responsive: [
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 1,
                    }
                },
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 1,
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        adaptiveHeight: true
                    }
                }
            ]
        });

        // Function to add custom classes
        function addCustomClasses(currentSlide) {
            // Remove custom classes from all slides
            slider.find('.slick-slide').removeClass('active-item-one active-item-two current-slider active-item-three');

            // Find the current, previous, and next slides relative to the center
            var current = $(slider.find('.slick-slide[data-slick-index="' + currentSlide + '"]'));
            var prev = $(slider.find('.slick-slide[data-slick-index="' + (currentSlide - 1) + '"]'));
            var next = $(slider.find('.slick-slide[data-slick-index="' + (currentSlide + 1) + '"]'));

            // Handle infinite loop slides
            if (prev.length === 0) {
                prev = slider.find('.slick-slide').last();
            }
            if (next.length === 0) {
                next = slider.find('.slick-slide').first();
            }

            // Add custom classes to the current and neighboring slides
            current.addClass('current-slider active-item-two');
            prev.addClass('active-item-one');
            next.addClass('active-item-three');
        }

        // Add classes after the slide transition ends
        slider.on('afterChange', function(event, slick, currentSlide) {
            addCustomClasses(currentSlide);
        });

        // Add custom classes when the slider is initialized
        slider.on('init', function(event, slick) {
            addCustomClasses(slick.currentSlide);
        });

        // Trigger the init event to ensure classes are applied on load
        slider.slick('slickGoTo', 0, true);
    });
});