$(document).ready(function(){

    $(".carousel-reference").slick({
        slidesToShow: 4,
        dots: false,
        arrows: true,
        infinite: false,
        nextArrow: '<button class="slick-next"><svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L8 8L1 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
        prevArrow: '<button class="slick-prev"><svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L1 8L8 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
        responsive: [{
            breakpoint: 1500,
            settings: {
                slidesToShow: 3,
            }
        },{
            breakpoint: 980,
            settings: {
                slidesToShow: 2,
            }
        },{
            breakpoint: 760,
            settings: {
                slidesToShow: 1.3,
            }
        }]
    });

    $(".main-slider.slider-container").slick({
        slidesToShow: 1,
        dots: true,
        arrows: false,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
        infinite: true,
    });
    $(".reference-carousel").slick({
        slidesToShow: 1,
        dots: false,
        arrows: false,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 500,
        infinite: true,
      fade: true,
      cssEase: 'linear'
    });
    
    $(".reference-carousel").slick('pause');
    
    $(".carousel-box").hover(function() {
        $(this).children(":first").slick('play')
    }, function(){
        $(this).children(":first").slick('pause')
    })
    
    if($('.main-slider.slider-container').length){
        document.querySelector('.slider-overlay').querySelectorAll('img')[0].classList.add("active");
        $('.main-slider.slider-container').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        $('.slider-text-container div a').removeClass("no-active");
        $('.slider-text-container div a').eq(currentSlide).removeClass("active");
        $('.slider-text-container div a').eq(currentSlide).addClass("no-active");
    
        document.querySelector('.slider-text-container div').querySelectorAll('a')[nextSlide].classList.add("active");
    
        document.querySelector('.slider-overlay').querySelectorAll('img')[currentSlide].classList.remove("active");
        document.querySelector('.slider-overlay').querySelectorAll('img')[nextSlide].classList.add("active");
        
        
    });}
    $(".mini-slider .slider-container").slick({
        slidesToShow: 1,
        dots: true,
        arrows: false,
        infinite: false,
    })

    $(".project-carousel").slick({
        slidesToShow: 3,
        vertical: true,
        verticalSwiping: true,
        dots: false,
        arrows: true,
        infinite: false,
        nextArrow: '<button class="slick-next"><svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L8 8L1 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
        prevArrow: '<button class="slick-prev"><svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L1 8L8 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
        responsive: [{
            breakpoint: 1500,
            settings: {
                slidesToShow: 3
            }
        },{
            breakpoint: 980,
            settings: {
                slidesToShow: 2,
                vertical: false,
                verticalSwiping: false,
            }
        },{
            breakpoint: 760,
            settings: {
                slidesToShow: 2,
                vertical: false,
                verticalSwiping: false,
                autoplay: true,
                autospeed: 1000
            }
        }]
    });

    $(".hamby").click(function(){
        if($(this).hasClass("active")) {
            $(this).removeClass("active")
            $("nav").removeClass("active")
            $("body, html").css({"overflow-y" : "unset"})
        } else {
            $(this).addClass("active")
            $("nav").addClass("active")
            $("body, html").css({"overflow-y" : "hidden"})
        }
    });

    $(".multiselect").click(function(){
        if($(this).hasClass("active")) {
            $(this).removeClass("active")
        } else {
            $(".multiselect").removeClass("active")
            $(this).addClass("active")
        }
    })

    $(".close").click(function(){
        $(".filters").removeClass("active")
    })

    $(".mobile-filters").click(function(){
        $(".filters").addClass("active")
    })

    var lastScrollTop = 0;
    // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
    window.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
    var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
    if (st > lastScrollTop) {
        $("header").addClass("scroll-down")
        $("header").removeClass("scroll-up")
    } else if (st < lastScrollTop || st < 100) {
        $("header").addClass("scroll-up")
        $("header").removeClass("scroll-down")
    } 
    lastScrollTop = st <= 0 ? 0 : st; 
    }, false);
    
    var active = 0;
    $(".companies-nav li").click(function(){
        if($(this).index() != active) {
            active = $(this).index()
            $(".companies-nav li").removeClass("active");
            $(this).addClass("active");
            $(".companies-elements").removeClass("active");
            $(".companies-elements").eq(active).addClass("active");
        }
    })  
    
    // Get the current page URL
    var currentPageURL = window.location.href;

    // Check links in the navigation
    $('nav a').each(function () {
        var href = $(this).attr('href');
        if (currentPageURL.indexOf(href) !== -1) {
            $(this).addClass('active');
        }
    });

    $('div.footer-links a').each(function () {
        var href = $(this).attr('href');
        
        if ((href === '/' && (currentPageURL === 'https://www.lavcevic.hr/' || currentPageURL === 'https://www.lavcevic.hr'))) {
            $(this).addClass('active');
        } else if (currentPageURL.indexOf(href) !== -1 && href !== '/') {
            $(this).addClass('active');
        }
    });
});

document.addEventListener("DOMContentLoaded", function() {
    const animationContainers = document.querySelectorAll(".animation-container");

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateChildren(entry.target);
                startCounterAnimation(entry.target);
            }
        });
    }, { threshold: 0.5 });

    animationContainers.forEach(container => {
        observer.observe(container);
    });

    function animateChildren(container) {
        let elementTime = 0;

        container.querySelectorAll(":scope > *").forEach(child => {
            setTimeout(() => {
                child.classList.add("animation-active");
            }, elementTime);

            elementTime += 300; // Adjust the delay between elements
        });
    }

    function startCounterAnimation(container) {
        const animatedElements = container.querySelectorAll('.number');
        animatedElements.forEach((animatedElement, index) => {
            if (!animatedElement.dataset.counterAnimated) {
                const delay = animatedElement.dataset.delay ? parseInt(animatedElement.dataset.delay) * 1000 : 0; // Convert seconds to milliseconds
                setTimeout(() => {
                    animateCounter(animatedElement, parseInt(animatedElement.dataset.to, 10), parseInt(animatedElement.dataset.duration, 10));
                    animatedElement.dataset.counterAnimated = true; // Set the flag for the current .number element
                }, delay + index * 300); // Adjust the delay for each element
            }
        });
    }
});

function animateCounter(element, targetValue, duration) {
    const startTime = performance.now();
    let currentCounterValue = 0; // Initial value

    function updateCounter(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        currentCounterValue = Math.floor(progress * targetValue);

        element.textContent = currentCounterValue; // Convert to string before setting

        if (progress < 1) {
            requestAnimationFrame(updateCounter);
        }
    }

    requestAnimationFrame(updateCounter);
}