// intialization plugins
$(document).ready(function () {
    //animation icon toggler of navbar
    $(`.navbar-toggler`).click(function () {
        $(`.navbar-toggler`).toggleClass(`active`);
    });

    //Wow intit
    wow = new WOW({
        boxClass: "wow",
        animateClass: "animated",
        offset: 200,
        mobile: true,
        live: false,
    });
    wow.init();

    //fancybox
    $("[data-fancybox]").fancybox({
        selector: '[data-fancybox="images"]',
        // loop: true
    });

    //  loader
    // $(window).on("load", function() {
    //     $("#preloader").addClass("isdone");
    // });
});

// Swiper
$(document).ready(function () {
    //////////////////// hero_swiper  ////////////////////
    var hero_swiper = new Swiper(".header .hero_swiper", {
        // loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        autoplay: {
            delay: 5000,
        },
        effect: "fade",
        navigation: {
            nextEl: ".header .swiper-button-next",
            prevEl: ".header .swiper-button-prev",
        },
        pagination: {
            el: ".header .swiper-pagination",
            type: "fraction",
        },
    });

    //////////////////// feedback_swiper  ////////////////////
    var hero_swiper = new Swiper(".feedback_sec .feedback_swiper", {
        // loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        // autoplay: {
        //     delay: 5000,
        // },
        navigation: {
            nextEl: ".feedback_sec .swiper-button-next",
            prevEl: ".feedback_sec .swiper-button-prev",
        },
        pagination: {
            el: ".feedback_sec .swiper-pagination",
            type: "fraction",
            formatFractionCurrent: function (number) {
                return number;
            },
            formatFractionTotal: function (number) {
                return number;
            },
        },
    });

    //////////////////// services_swiper  ////////////////////
    var swiper = new Swiper(".services_sec .services_swiper", {
        loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
            pauseOnMouseEnter: false,
        },
        navigation: {
            nextEl: ".services_sec .swiper-button-next",
            prevEl: ".services_sec .swiper-button-prev",
        },
        pagination: {
            el: ".services_sec .swiper-pagination",
            clickable: true,
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
        },
    });

    //////////////////// statics_sec slider  ////////////////////
    var swiper = new Swiper(".statics_sec .bg-slider", {
        slidesPerView: 1,
        loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        effect: "fade",
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            pauseOnMouseEnter: false,
        },
        navigation: false,
        pagination: false,
    });

    //////////////////// product imgs slider  ////////////////////
    var swiper = new Swiper(".prod_card .img-slider", {
        slidesPerView: 1,
        loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 15,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            pauseOnMouseEnter: false,
        },
        navigation: false,
        pagination: {
            el: ".swiper-pagination",
            // type: 'fraction',
            clickable: true,
        },
    });

    //////////////////// partners slider  ////////////////////
    var swiper = new Swiper(".partners-slider", {
        loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 50,
        // autoplay: {
        //     delay: 2500,
        // },
        navigation: false,
        pagination: {
            el: ".partners-slider .swiper-pagination",
            clickable: true,
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
        },
    });

    //////////////////// Swiper  ////////////////////
    // var swiper = new Swiper(' .swiper-container', {
    //     // loop: true,
    //     speed: 900,
    //     slidesPerView: 1,
    //     spaceBetween: 15,
    //     // autoplay: {
    //     //     delay: 2500,
    //     // },
    //     //In Tabs
    //     // observer: true,
    //     // observeParents: true,
    //     navigation: {
    //         nextEl: '.swiper-button-next',
    //         prevEl: '.swiper-button-prev',
    //     },
    //     pagination: {
    //         el: '.swiper-pagination',
    //         clickable: true
    //     },
    //     breakpoints: {
    //         640: {
    //             slidesPerView: 2,
    //             spaceBetween: 20,
    //         },
    //         768: {
    //             slidesPerView: 3,
    //             spaceBetween: 20,
    //         },
    //         1024: {
    //             slidesPerView: 5,
    //             spaceBetween: 20,
    //             // Prevent swiper in lg screens
    //             // allowTouchMove: false,
    //             // preventClicks: false
    //         },
    //     }
    // });
});

// cards_wrapper
$(document).on("mouseenter", ".about_cards .cards_wrapper .box", function () {
    $(this).closest(".cards_wrapper").find(".box").removeClass("active");

    $(this).addClass("active");
});

// GSAP
$(document).ready(function () {
    gsap.registerPlugin(ScrollTrigger);

    document.querySelectorAll(".counter").forEach((counter) => {
        let finalValue = parseInt(counter.innerText.replace("+", ""));
        let obj = { val: 0 };

        gsap.to(obj, {
            val: finalValue,
            duration: 1.5,
            ease: "power1.out",
            scrollTrigger: {
                trigger: ".statics_sec",
                start: "top 75%",
                once: true,
            },
            onUpdate: () => {
                counter.innerText = "+" + Math.floor(obj.val);
            },
        });
    });

    /*  menu-track  */
    const track = document.querySelector(".menu-track");
    const loopWidth = track.scrollWidth / 2;
    gsap.to(track, {
        x: -loopWidth,
        duration: 80,
        ease: "none",
        repeat: -1,
        modifiers: {
            x: gsap.utils.unitize((v) => parseFloat(v) % loopWidth),
        },
    });
});

// gsap scripts
// Run only if window width > 991px
if (window.innerWidth > 991) {
    
    $(function () {
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

        // ---------- ScrollSmoother ----------
        let smoother = ScrollSmoother.create({
            wrapper: "#smooth-wrapper",
            content: "#smooth-content",
            smooth: 1.1,
            effects: true,
        });

        ScrollTrigger.refresh();

        // gs image parallax
        const parallaxImages = document.querySelectorAll(".gs-img-parallax");
        parallaxImages.forEach((container) => {
            const img = container.querySelector("img");
            container.style.overflow = "hidden";
            // effect Parallax + Zoom
            gsap.to(img, {
                yPercent: -20,
                scale: 1.2,
                ease: "none",
                scrollTrigger: {
                    trigger: container,
                    start: "top bottom",
                    end: "bottom top",
                    scrub: 1,
                    // pin: true,
                },
            });
        });
    });

}

window.addEventListener("load", () => {
    const loader = document.getElementById("loader");
    setTimeout(() => {
        loader.classList.add("loading");
        setTimeout(() => {
            loader.classList.add("loaded");
        }, 2000);
    }, 2000);
});

// letters animation
window.addEventListener("load", () => {
    const smoother = window.ScrollSmoother ? ScrollSmoother.get() : null;

    document.querySelectorAll(".letters-line").forEach((title) => {
        if (title.dataset.lettersProcessed) return;
        title.dataset.lettersProcessed = true;

        function processTextNodes(element) {
            const walker = document.createTreeWalker(
                element,
                NodeFilter.SHOW_TEXT,
                null,
                false,
            );
            const textNodes = [];
            let node;
            while ((node = walker.nextNode())) {
                if (node.textContent.trim() !== "") textNodes.push(node);
            }

            textNodes.forEach((textNode) => {
                const text = textNode.textContent;
                const parent = textNode.parentNode;

                const words = text.split(/(\s+)/);
                const fragment = document.createDocumentFragment();

                words.forEach((word) => {
                    if (word.trim() === "") {
                        fragment.appendChild(document.createTextNode(word));
                    } else {
                        const wordWrapper = document.createElement("span");
                        wordWrapper.className = "word";
                        wordWrapper.style.display = "inline-block";
                        wordWrapper.style.whiteSpace = "nowrap";
                        wordWrapper.innerHTML = word;

                        fragment.appendChild(wordWrapper);
                    }
                });

                parent.replaceChild(fragment, textNode);
            });
        }

        processTextNodes(title);

        gsap.fromTo(
            title.querySelectorAll(".word"),
            {
                scale: 2,
                filter: "blur(100px)",
                opacity: 0,
                y: 50,
            },
            {
                scrollTrigger: {
                    trigger: title,
                    scroller: smoother ? smoother.scrollContainer : window,
                    start: "top 80%",
                    toggleActions: "play none none reverse",
                },
                scale: 1,
                filter: "blur(0px)",
                opacity: 1,
                y: 0,
                duration: 0.8,
                delay: -0.3,
                stagger: 0.15,
                ease: "power4.out",
            },
        );
    });

    ScrollTrigger.refresh();
});
