var _____WB$wombat$assign$function_____=function(name){return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name))||self[name];};if(!self.__WB_pmw){self.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opens = _____WB$wombat$assign$function_____("opens");
    const carouselContainers = Array.from(document.querySelectorAll('.carousel-container'));
    
 
    carouselContainers.forEach(carousel => {
        const arrowRight = carousel.querySelector('#arrow-right');
        const arrowLeft = carousel.querySelector('#arrow-left');
        const carouselWrapper = carousel.querySelector('.carousel-wrapper');

        const cards = Array.from(carouselWrapper.querySelectorAll('.slide'))

        // Carousel slide on touch
        let startX = 0;
        let isDragging = false;
        let translate = 0;
        let currentCard = 0;
        let cardWidth;

        let finalCardIndicator;
        let positionCounter = 0;

        if (window.innerWidth <= 500) {
            finalCardIndicator = cards.length - 1
        }

        if (window.innerWidth < 1000 && window.innerWidth > 500) {
            finalCardIndicator = cards.length - 3
        }

        if (window.innerWidth > 1000) {
            // for large screen, showing 4 cards at the same time
            finalCardIndicator = cards.length - 4
        }

        window.addEventListener('resize', (e) => {
            cards.forEach(el => el.style.transform = `translateX(-0%)`);
            arrowLeft.classList.add('hide');
            currentCard = 0;
            if (finalCardIndicator > currentCard) {
                arrowRight.classList.remove('hide');
            }

            if (window.innerWidth <= 500) {
                finalCardIndicator = cards.length - 1
            }

            if (window.innerWidth < 1040 && window.innerWidth > 500) {
                finalCardIndicator = cards.length - 3
            }

            if (window.innerWidth > 1000) {
                // for large screen, showing 4 cards at the same time
                finalCardIndicator = cards.length - 4
            }

        
    
        })

        function lastAndFirstCardCheck() {
            if (finalCardIndicator != currentCard) {
                arrowRight.classList.remove('hide');
            } else {
                arrowRight.classList.add('hide');
            }

            if (currentCard > 0) {
                arrowLeft.classList.remove('hide')
            } else {
                arrowLeft.classList.add('hide')
            }
            
            // if (currentCard === 0) {
            //     arrowLeft.classList.add('hide')
            // }
        }


        arrowRight.addEventListener('click', () => {
            currentCard ++
            cardWidth = getCardWidth();
            translate = -currentCard * cardWidth; 
            lastAndFirstCardCheck()
            updateCarouselPosition();
        })

        arrowLeft.addEventListener('click', () => {
            currentCard --
            cardWidth = getCardWidth();
            translate = -currentCard * cardWidth;

            lastAndFirstCardCheck()
            updateCarouselPosition();
        })

        function getCardWidth() {
            return carousel.querySelector(".slide").offsetWidth;
        }

        function getCardCount() {
            return carousel.querySelectorAll(".slide").length;
        }

        function handleDragStart(event) {
            isDragging = true;
            startX = event.type === "touchstart" ? event.touches[0].clientX : event.clientX;
            translate = -currentCard * getCardWidth();
        }

        function handleDragMove(event) {
            if(!isDragging) return;
            const currentX = event.type === "touchmove" ? event.touches[0].clientX : event.clientX;
            const diffX = currentX - startX;
            translate += diffX;
            startX = currentX;

            updateCarouselPosition();
        }

        function handleDragEnd() {
            isDragging = false;
            cardWidth = getCardWidth();
            const threshold = cardWidth * 0.15;

            if (Math.abs(translate - (-currentCard * cardWidth)) > threshold) {
                currentCard -= Math.sign(translate - (-currentCard * cardWidth));
                currentCard = Math.min(Math.max(0, currentCard), getCardCount() - 1)
            }

            translate = -currentCard * cardWidth;

            lastAndFirstCardCheck()
            updateCarouselPosition();
        }



        function updateCarouselPosition() {
            carouselWrapper.style.transform = `translateX(${translate}px)`;
        }

        carouselWrapper.addEventListener('touchstart', handleDragStart)
        carouselWrapper.addEventListener('touchmove', handleDragMove)
        carouselWrapper.addEventListener('touchend', handleDragEnd)


    })
    

    // const arrowRight = document.querySelector('#arrow-right');
    // const arrowLeft = document.querySelector('#arrow-left');
    // // const carouselContainer = document.querySelector('.carousel-container');
    // const carouselWrapper = document.querySelector('.carousel-wrapper');

    // const cards = Array.from(carouselWrapper.querySelectorAll('.slide'))

    // // Carousel slide on touch
    // let startX = 0;
    // let isDragging = false;
    // let translate = 0;
    // let currentCard = 0;
    // let cardWidth;

    // let finalCardIndicator;
    // let positionCounter = 0;

    // if (window.innerWidth <= 500) {
    //     finalCardIndicator = cards.length - 1
    // }

    // if (window.innerWidth < 1000 && window.innerWidth > 500) {
    //     finalCardIndicator = cards.length - 3
    // }

    // if (window.innerWidth > 1000) {
    //     // for large screen, showing 4 cards at the same time
    //     finalCardIndicator = cards.length - 4
    // }

    // window.addEventListener('resize', (e) => {
    //     cards.forEach(el => el.style.transform = `translateX(-0%)`);
    //     arrowLeft.classList.add('hide');
    //     currentCard = 0;
    //     if (finalCardIndicator > currentCard) {
    //         arrowRight.classList.remove('hide');
    //     }

    //     if (window.innerWidth <= 500) {
    //         finalCardIndicator = cards.length - 1
    //     }

    //     if (window.innerWidth < 1040 && window.innerWidth > 500) {
    //         finalCardIndicator = cards.length - 2
    //     }

    //     if (window.innerWidth > 1000) {
    //         // for large screen, showing 4 cards at the same time
    //         finalCardIndicator = cards.length - 4
    //     }

    
   
    // })


    // function lastAndFirstCardCheck() {
    //     if (finalCardIndicator != currentCard) {
    //         arrowRight.classList.remove('hide');
    //     } else {
    //         arrowRight.classList.add('hide');
    //     }

    //     if (currentCard > 0) {
    //         arrowLeft.classList.remove('hide')
    //     } else {
    //         arrowLeft.classList.add('hide')
    //     }
        
    //     // if (currentCard === 0) {
    //     //     arrowLeft.classList.add('hide')
    //     // }
    // }


    // arrowRight.addEventListener('click', () => {
    //     currentCard ++
    //     cardWidth = getCardWidth();
    //     translate = -currentCard * cardWidth; 
    //     lastAndFirstCardCheck()
    //     updateCarouselPosition();
    // })

    // arrowLeft.addEventListener('click', () => {
    //     currentCard --
    //     cardWidth = getCardWidth();
    //     translate = -currentCard * cardWidth;

    //     lastAndFirstCardCheck()
    //     updateCarouselPosition();
    // })

    // function getCardWidth() {
    //     return document.querySelector(".slide").offsetWidth;
    // }

    // function getCardCount() {
    //     return document.querySelectorAll(".slide").length;
    // }

    // function handleDragStart(event) {
    //     isDragging = true;
    //     startX = event.type === "touchstart" ? event.touches[0].clientX : event.clientX;
    //     translate = -currentCard * getCardWidth();
    // }

    // function handleDragMove(event) {
    //     if(!isDragging) return;
    //     const currentX = event.type === "touchmove" ? event.touches[0].clientX : event.clientX;
    //     const diffX = currentX - startX;
    //     translate += diffX;
    //     startX = currentX;

    //     updateCarouselPosition();
    // }

    // function handleDragEnd() {
    //     isDragging = false;
    //     cardWidth = getCardWidth();
    //     const threshold = cardWidth * 0.15;

    //     if (Math.abs(translate - (-currentCard * cardWidth)) > threshold) {
    //         currentCard -= Math.sign(translate - (-currentCard * cardWidth));
    //         currentCard = Math.min(Math.max(0, currentCard), getCardCount() - 1)
    //     }

    //     translate = -currentCard * cardWidth;

    //     lastAndFirstCardCheck()
    //     updateCarouselPosition();
    // }



    // function updateCarouselPosition() {
    //     carouselWrapper.style.transform = `translateX(${translate}px)`;
    // }

    // carouselWrapper.addEventListener('touchstart', handleDragStart)
    // carouselWrapper.addEventListener('touchmove', handleDragMove)
    // carouselWrapper.addEventListener('touchend', handleDragEnd)
}