// source --> https://www.matdesign.nl/wp-content/plugins/video-carousel/public/js/script.js 
jQuery(document).ready(function($) {
    $('.vc-carousel').each(function() {
        var $carousel = $(this);
        var autoplay = $carousel.data('autoplay') === true; // Ensure boolean comparison
        var autoplaySpeed = parseInt($carousel.data('transition-speed'), 10) || 2000; // Set autoplaySpeed to 2000ms (2 seconds)
        var transitionSpeed = parseInt($carousel.data('transition-speed'), 10) || 50000;
        var navArrows = $carousel.data('nav-arrows') === false; // Ensure boolean comparison
        var sliderCount = parseInt($carousel.data('slider-count'), 10) || 3;

        // Log the settings for debugging
        console.log('Initializing carousel with settings:', {
            autoplay: autoplay,
            autoplaySpeed: autoplaySpeed, // Use the updated autoplaySpeed
            transitionSpeed: transitionSpeed,
            navArrows: navArrows,
            sliderCount: sliderCount
        });

        // Initialize Slick carousel
        $carousel.slick({
            autoplay: autoplay,
            autoplaySpeed: transitionSpeed,
            arrows: navArrows, // Slick expects a boolean here
            slidesToShow: sliderCount,
            slidesToScroll: 1,
            adaptiveHeight: true,
            infinite: true,
            prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
            nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
            
            responsive: [
                {
                    breakpoint: 768, // Adjust the breakpoint as needed
                    settings: {
                        slidesToShow: 1, // Show 1 slide on mobile devices
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 1024, // Optional: Adjust for tablet view if needed
                    settings: {
                        slidesToShow: 3, // Show 2 slides for tablet view
                        slidesToScroll: 1
                    }
                }
            ],
            pauseOnHover: false,

            }).on('init', function(event, slick) {
                console.log('Slick carousel initialized:', slick);
            }).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
                console.log('Before change from slide', currentSlide, 'to', nextSlide);
            }).on('afterChange', function(event, slick, currentSlide) {
                console.log('After change to slide', currentSlide);
        
        });

        // Initialize Fancybox for video playback
        $('[data-fancybox]').fancybox({
            iframe: {
                css: {
                    width: '800px',
                    height: '450px'
                }
            },
            youtube: {
                controls: 1,
                showinfo: 0
            },
            vimeo: {
                color: 'f00'
            }
        });
    });
});