(function ($) {
	"use strict";
    const container = document.querySelector(".what-we-do-section");
    const progress = document.querySelector(".what-to-do-progress-list");
    const progressBarActive = document.querySelector(".what-to-do-progress-bar-active");
    const progressBarEmpty = document.querySelector(".what-to-do-progress-bar-empty");

    (function($){
        $(document).ready(function(){
            const items = document.querySelectorAll(".card:not(.slider-img)");
            const progressItems = document.querySelectorAll(".what-to-do-progress-item");
            const imgItems = document.querySelectorAll(".slider-img");
            const pageItems = document.querySelectorAll(".page-item");
            let currentSlide = 0;
            let scrollCounter           = $('.scroll-counter');
            let scrollCounterSpan       = scrollCounter.find('span');
            let scrollCounterHeight     = scrollCounter.height();

        // on init
            var totalCounter    = (items.length < 10) ? '0'+items.length : items.length;
            var pgCounter       = $("#page-counter");

            pgCounter.find('.total').html(totalCounter);

            scrollCounter.height(scrollCounter.find('span.active').height());
            scrollCounter.bind("mousewheel", function() {
                return false;
            });

        // Set custom index
            items.forEach((card, index) => {
                card.style.setProperty('--custom-index', index);
            });
            progressItems.forEach((item, index) => {
                item.style.setProperty('--custom-index', index);
            });
            imgItems.forEach((card, index) => {
                card.style.setProperty('--custom-index', index);
            });

            $(".slider-nav div").on("click", function(e) {
                e.preventDefault();

                if ($(this).hasClass("prev")) {
                    currentSlide--;
                } else {
                    currentSlide++;
                }

                if (currentSlide < 0) {
                    currentSlide = items.length - 1;
                } else if (currentSlide >= items.length) {
                    currentSlide = 0;
                }
                handleSlide(currentSlide);

                return false;
            });

            $(".card-deck.slider-split .card").on("click", function(e) {
                let cardIndex = $(this).data('index');
                currentSlide = cardIndex-1;
                handleSlide(cardIndex-1);
            });

            $(".what-to-do-progress-item").on("click", function(e) {
                let cardIndex = $(this).data('index');
                currentSlide = cardIndex-1;
                handleSlide(cardIndex-1);
            });

            const handleSlide = (elementIndex) => {
            //console.log("handle slide");

                $(".card:not(slider-img)").removeClass("show-card");
                $(".slider-img").removeClass("show-img");
                $(".what-to-do-progress-item").removeClass("what-to-do-progress-active");

                items.forEach((card, index) => {
                    if (index > 0 && index <= elementIndex) {
                        card.classList.add("show-card");
                    }
                });

            };

        });
})(jQuery);

})(jQuery);