jQuery(document).ready(function($){

function initCarousel(){

$('.wprg-carousel-container').each(function(){

var $container=$(this);
var $carousel=$container.find('.wprg-carousel');
var $originalItems=$carousel.find('.wprg-carousel-item');

var $prevBtn=$container.find('.wprg-carousel-prev');
var $nextBtn=$container.find('.wprg-carousel-next');
var $dotsContainer=$container.find('.wprg-carousel-dots');

// Récupérer les paramètres depuis les attributs data
var desktopItems=parseInt($container.data('desktop'))||6;
var tabletItems=parseInt($container.data('tablet'))||4;
var mobileItems=parseInt($container.data('mobile'))||2;
var gapSize=parseInt($container.data('gap'))||20;

// Convertir correctement les valeurs des checkboxes
var autoplayValue = $container.data('autoplay');
var autoplay = (autoplayValue === 1 || autoplayValue === "1") ? true : false;

var autoplaySpeed=parseInt($container.data('autoplay-speed'))||3000;

var pauseHoverValue = $container.data('pause-hover');
var pauseHover = (pauseHoverValue === 1 || pauseHoverValue === "1") ? true : false;

var loopValue = $container.data('loop');
var loop = (loopValue === 1 || loopValue === "1") ? true : false;

var showArrowsValue = $container.data('show-arrows');
var showArrows = (showArrowsValue === 1 || showArrowsValue === "1") ? true : false;

var showDotsValue = $container.data('show-dots');
var showDots = (showDotsValue === 1 || showDotsValue === "1") ? true : false;

var animationSpeed=parseInt($container.data('animation-speed'))||300;

var dragScrollValue = $container.data('drag-scroll');
var dragScroll = (dragScrollValue === 1 || dragScrollValue === "1") ? true : false;

// Utiliser loop pour le défilement infini (infinite)
var infinite = loop;

var totalItems=parseInt($container.data('total'))||0;

// ===== IMPLÉMENTATION DU DÉFILEMENT INFINI CORRIGÉE =====
// Sauvegarder le nombre original d'éléments
var originalTotalItems = totalItems;

// Si l'option loop est activée et qu'il y a assez d'éléments, on duplique les éléments
if(loop && originalTotalItems > desktopItems) {
    // Vider le carrousel et reconstruire avec les originaux + clones
    var $allItems = $originalItems.clone();
    
    // Ajouter les originaux
    $carousel.empty();
    $carousel.append($originalItems);
    
    // Ajouter plusieurs copies pour un défilement vraiment infini
    // On ajoute 3 copies pour garantir un défilement infini sans interruption
    for(var copy = 0; copy < 3; copy++) {
        $carousel.append($allItems.clone());
    }
    
    // Mettre à jour la référence des items
    $originalItems = $carousel.find('.wprg-carousel-item');
    
    // Mettre à jour le nombre total d'items
    totalItems = $originalItems.length;
}

// Appliquer les variables CSS dynamiquement
$container[0].style.setProperty('--wprg-desktop', desktopItems);
$container[0].style.setProperty('--wprg-tablet', tabletItems);
$container[0].style.setProperty('--wprg-mobile', mobileItems);
$container[0].style.setProperty('--wprg-gap', gapSize + 'px');

var autoplayInterval=null;
var itemWidth=0;
var currentIndex=0;
var itemsPerView=desktopItems;

var isDragging=false;
var dragMoved=false;

var startX=0;
var startScroll=0;

// Vérifier si on a peu d'éléments
if(originalTotalItems <= desktopItems && originalTotalItems <= tabletItems && originalTotalItems <= mobileItems) {
    $container.addClass('few-items');
} else {
    $container.removeClass('few-items');
}

// Créer les dots si nécessaire (uniquement pour les éléments originaux)
if(showDots && $dotsContainer.length){
    $dotsContainer.empty();
    var dotCount = Math.ceil(originalTotalItems / desktopItems);
    for(var i=0; i<dotCount; i++){
        $dotsContainer.append('<button class="wprg-carousel-dot" data-index="'+i+'"></button>');
    }
    updateActiveDot();
}

// Mettre à jour le dot actif
function updateActiveDot(){
    if(!showDots || !$dotsContainer.length) return;

    var scrollLeft = $carousel.scrollLeft();
    itemWidth = $carousel.find('.wprg-carousel-item').first().outerWidth(true) || 0;

    if(itemWidth === 0) return;

    // Calculer l'index approximatif basé sur la position de défilement
    var approxIndex = Math.round(scrollLeft / (itemWidth * desktopItems));
    
    // En mode loop, on prend le modulo pour rester dans la plage des originaux
    if(loop && originalTotalItems > 0) {
        approxIndex = approxIndex % Math.ceil(originalTotalItems / desktopItems);
    }
    
    var maxIndex = Math.ceil(originalTotalItems / desktopItems) - 1;
    currentIndex = Math.min(approxIndex, maxIndex);

    $dotsContainer.find('.wprg-carousel-dot').removeClass('active');
    $dotsContainer.find('.wprg-carousel-dot[data-index="'+currentIndex+'"]').addClass('active');
}

// Navigation par dots
$dotsContainer.on('click','.wprg-carousel-dot',function(e){
    e.preventDefault();

    var index = $(this).data('index');
    itemWidth = $carousel.find('.wprg-carousel-item').first().outerWidth(true) || 0;

    var targetScroll = index * itemWidth * desktopItems;

    $carousel.animate({
        scrollLeft: targetScroll
    }, animationSpeed, function() {
        updateActiveDot();
    });
});

// Fonction pour gérer le défilement infini - CORRIGÉE pour garder le sens gauche->droite
function handleInfiniteScroll() {
    if(!loop || originalTotalItems <= desktopItems) return;
    
    var scrollLeft = $carousel.scrollLeft();
    itemWidth = $carousel.find('.wprg-carousel-item').first().outerWidth(true) || 0;
    
    if(itemWidth === 0) return;
    
    var originalSetWidth = itemWidth * originalTotalItems;
    
    // CORRECTION: Repositionnement seamless uniquement vers l'avant (gauche -> droite)
    // Si on dépasse la zone des originaux (vers la fin)
    if(scrollLeft >= originalSetWidth * 3) { // On utilise *3 car on a 3 copies
        // Repositionner au début de la zone des originaux sans effet visuel
        var newPosition = scrollLeft - originalSetWidth;
        $carousel.scrollLeft(newPosition);
    }
    // On ne repositionne JAMAIS vers la droite (pas de condition scrollLeft <= 0)
    // Cela évite l'effet de retour en arrière
}

/* ARROWS - Le bouton précédent est désactivé en mode loop pour forcer le sens unique */

$prevBtn.on('click',function(e){

    e.preventDefault();

    // En mode loop, on désactive complètement le bouton précédent
    // pour forcer le défilement uniquement de gauche à droite
    if(loop && originalTotalItems > desktopItems) {
        return; // Ne rien faire - pas de défilement vers la gauche
    }

    var w = $carousel.find('.wprg-carousel-item').first().outerWidth(true);
    var currentScroll = $carousel.scrollLeft();
    var newScroll = currentScroll - (w * desktopItems);

    // En mode normal, on s'arrête au début
    $carousel.animate({
        scrollLeft: Math.max(0, newScroll)
    }, animationSpeed, function() {
        updateActiveDot();
    });

});

$nextBtn.on('click',function(e){

    e.preventDefault();

    var w = $carousel.find('.wprg-carousel-item').first().outerWidth(true);
    var currentScroll = $carousel.scrollLeft();
    var newScroll = currentScroll + (w * desktopItems);

    // En mode loop, on permet le défilement continu vers l'avant
    if(loop && originalTotalItems > desktopItems) {
        $carousel.animate({
            scrollLeft: newScroll
        }, animationSpeed, function() {
            handleInfiniteScroll();
            updateActiveDot();
        });
    } else {
        // En mode normal, on s'arrête à la fin
        var maxScroll = $carousel[0].scrollWidth - $carousel.width();
        $carousel.animate({
            scrollLeft: Math.min(maxScroll, newScroll)
        }, animationSpeed, function() {
            updateActiveDot();
        });
    }

});

/* DRAG DESKTOP - On permet le glissement dans les deux sens mais le repositionnement reste fluide */

$carousel.on('mousedown',function(e){

    if(!dragScroll) return;

    isDragging = true;
    dragMoved = false;

    startX = e.pageX;
    startScroll = $carousel.scrollLeft();

    $carousel.addClass('dragging');

});

$(document).on('mousemove',function(e){

    if(!isDragging) return;

    var dx = e.pageX - startX;

    if(Math.abs(dx) > 5){
        dragMoved = true;
    }

    $carousel.scrollLeft(startScroll - dx);

});

$(document).on('mouseup',function(){

    if(!isDragging) return;

    isDragging = false;

    // En mode loop, on repositionne uniquement si on a dépassé vers la droite
    if(loop && dragMoved && originalTotalItems > desktopItems) {
        handleInfiniteScroll();
    }

    updateActiveDot();

    setTimeout(function(){
        dragMoved = false;
    }, 50);

    $carousel.removeClass('dragging');

});

/* SCROLL EVENT */

$carousel.on('scroll', function(){
    updateActiveDot();
    
    // Appeler handleInfiniteScroll pendant le défilement pour un repositionnement plus fluide
    // Uniquement vers la droite
    if(loop && originalTotalItems > desktopItems && !isDragging) {
        handleInfiniteScroll();
    }
});

/* CLICK ITEM - CORRIGÉ POUR GÉRER LES ÉLÉMENTS CLONÉS */

$carousel.on('click','.wprg-carousel-item',function(e){

    if(dragMoved){
        return;
    }

    // Trouver l'élément original correspondant (pour les clones)
    var $clickedItem = $(this);
    var originalIndex = $clickedItem.data('index');
    var $originalItem;

    // Calculer l'index original en prenant le modulo
    if(loop && originalTotalItems > 0) {
        var modIndex = ((originalIndex - 1) % originalTotalItems) + 1;
        $originalItem = $originalItems.filter('[data-index="' + modIndex + '"]').first();
    } else {
        $originalItem = $clickedItem;
    }

    if($originalItem && $originalItem.length) {
        openPopup($originalItem);
    }

});

/* AUTOPLAY - CORRIGÉ POUR DÉFILER UNIQUEMENT DE GAUCHE À DROITE */

function startAutoplay(){

    if(!autoplay) return;

    clearInterval(autoplayInterval);

    autoplayInterval = setInterval(function(){

        if(!isDragging){

            var w = $carousel.find('.wprg-carousel-item').first().outerWidth(true);
            var currentScroll = $carousel.scrollLeft();

            if(loop && originalTotalItems > desktopItems) {
                // En mode loop, on avance toujours vers la droite
                var newScroll = currentScroll + w;
                
                $carousel.animate({
                    scrollLeft: newScroll
                }, animationSpeed, function() {
                    handleInfiniteScroll();
                    updateActiveDot();
                });
            } else {
                // En mode normal, on gère la fin
                var maxScroll = $carousel[0].scrollWidth - $carousel.width();
                if(currentScroll >= maxScroll - 5){
                    if(loop){
                        $carousel.animate({
                            scrollLeft: 0
                        }, animationSpeed, function(){
                            updateActiveDot();
                        });
                    }
                } else {
                    $carousel.animate({
                        scrollLeft: currentScroll + w
                    }, animationSpeed, function(){
                        updateActiveDot();
                    });
                }
            }
        }

    }, autoplaySpeed);
}

// Démarrer l'autoplay si activé
if(autoplay && originalTotalItems > desktopItems){
    startAutoplay();
}

// Pause au survol
if(pauseHover && autoplay && originalTotalItems > desktopItems){
    $container.on('mouseenter', function(){
        clearInterval(autoplayInterval);
    }).on('mouseleave', function(){
        startAutoplay();
    });
}

// Mettre à jour la largeur au redimensionnement
$(window).on('resize', function(){
    // Recalculer les variables selon la taille d'écran
    var width = $(window).width();
    if(width <= 768) {
        itemsPerView = mobileItems;
    } else if(width <= 1024) {
        itemsPerView = tabletItems;
    } else {
        itemsPerView = desktopItems;
    }
    updateActiveDot();
});

});

}

/* POPUP - INCHANGÉ */

function openPopup($item){

    var $data = $item.find('.wprg-reel-data');

    var type = $data.find('.wprg-video-type').text();
    var source = $data.find('.wprg-video-source').text();

    var $popup = $("#wprg-popup");
    var $video = $popup.find(".wprg-popup-video");

    $video.empty();

    if(type === "youtube"){

        $video.html('<iframe src="'+source+'" frameborder="0" allowfullscreen></iframe>');

    } else {

        $video.html('<video controls autoplay playsinline><source src="'+source+'" type="video/mp4"></video>');

    }

    $popup.addClass("active");

    $("body").css("overflow","hidden");

}

function closePopup(){

    $("#wprg-popup").removeClass("active");

    $("body").css("overflow","");

}

$(document).on("click",".wprg-popup-close",function(e){

    e.preventDefault();
    closePopup();

});

$(document).on("click",".wprg-popup-overlay",function(){

    closePopup();

});

$(document).on("keyup",function(e){

    if(e.key === "Escape"){
        closePopup();
    }

});

initCarousel();

// Réinitialiser au redimensionnement de la fenêtre
$(window).on('resize', function(){
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        $('.wprg-carousel-container').each(function(){
            var $container = $(this);
            var desktopItems = parseInt($container.data('desktop')) || 6;
            var tabletItems = parseInt($container.data('tablet')) || 4;
            var mobileItems = parseInt($container.data('mobile')) || 2;
            var gapSize = parseInt($container.data('gap')) || 20;
            var totalItems = parseInt($container.data('total')) || 0;
            var loopValue = $container.data('loop');
            var loop = (loopValue === 1 || loopValue === "1") ? true : false;

            // Réappliquer les variables CSS
            $container[0].style.setProperty('--wprg-desktop', desktopItems);
            $container[0].style.setProperty('--wprg-tablet', tabletItems);
            $container[0].style.setProperty('--wprg-mobile', mobileItems);
            $container[0].style.setProperty('--wprg-gap', gapSize + 'px');

            // Vérifier le nombre d'éléments
            if(totalItems <= desktopItems && totalItems <= tabletItems && totalItems <= mobileItems) {
                $container.addClass('few-items');
            } else {
                $container.removeClass('few-items');
            }
        });
    }, 250);
});

});