jQuery(document).ready(function($) {
    $('.rzcps-container').each(function () {
        const container = $(this);
        const marquee = container.find('.rzcps');
        const isVertical = container.hasClass('vertical');
        const isSlide = container.hasClass('slide');

        if (!isSlide) return;

        const items = marquee.find('.item');
        const speed = parseInt(container.data('speed')) || 50;
        const visible = isVertical ? parseInt(container.data('visible')) || items : 1; // default 1 for horizontal
        const interval = speed * 20;
        const total = items.length;
        let currentIndex = 0;

        // Apply styles for both vertical and horizontal
        if (isVertical) {
            // Vertical sliding logic
            let tallest = 0;
            items.each(function () {
                tallest = Math.max(tallest, $(this).outerHeight(true));
            });
            items.css('height', tallest + 'px');
            const itemHeight = tallest; 
            marquee.css({
                display: 'flex',
                flexDirection: 'column',
                transition: 'transform 0.5s ease',
                willChange: 'transform',
                height: itemHeight * total + 'px',
            });

            // Set the container's height
            container.css('height', itemHeight * visible + 'px');

            function slideToVertical(index) {
                const distance = -itemHeight * index;
                marquee.css('transform', `translateY(${distance}px)`);
            }

            slideToVertical(currentIndex);

            let timer = setInterval(() => {
                const maxIndex = total - visible;
                currentIndex = (currentIndex + 1) > maxIndex ? 0 : currentIndex + 1;
                slideToVertical(currentIndex);
            }, interval);

            container.hover(() => clearInterval(timer), () => {
                timer = setInterval(() => {
                    const maxIndex = total - visible;
                    currentIndex = (currentIndex + 1) > maxIndex ? 0 : currentIndex + 1;
                    slideToVertical(currentIndex);
                }, interval);
            });

        } else {
            // Horizontal sliding logic
            container.css('position', 'relative').css('overflow', 'hidden');

            // Force full width for each item
            items.css({
                width: '100%',
                flexShrink: 0,
            });

            // Set .rzcps to horizontal row and wide enough to hold all items
            marquee.css({
                display: 'flex',
                flexDirection: 'row',
                width: `${100 * total}%`,
                transition: 'transform 0.5s ease'
            });

            function slideToHorizontal(index) {
                const percent = -(100 * index);
                marquee.css('transform', `translateX(${percent}%)`);
            }

            slideToHorizontal(currentIndex);

            let timer = setInterval(() => {
                currentIndex = (currentIndex + 1) % total;
                slideToHorizontal(currentIndex);
            }, interval);

            container.hover(() => clearInterval(timer), () => {
                timer = setInterval(() => {
                    currentIndex = (currentIndex + 1) % total;
                    slideToHorizontal(currentIndex);
                }, interval);
            });
        }
    });
});
