/home/moonrcjl/template.moontelict.com/vorix/js/active.js
"use strict";

// Mobile Dropdown Menu

function mobileDropdownMenu() {
    let sbdropdown = document.querySelectorAll('.vorix-dd').length;

    if (sbdropdown > 0) {
        let navUrl = document.querySelectorAll('.navbar-nav li ul');
        let navUrlLen = navUrl.length;

        for (let i = 0; i < navUrlLen; i++) {
            navUrl[i].insertAdjacentHTML('beforebegin', '<div class="dropdown-toggler"><i class="bi bi-caret-down-fill"></i></div>');
        }

        let ddtroggler = document.querySelectorAll('.dropdown-toggler');
        let ddtrogglerlen = ddtroggler.length;

        for (let i = 0; i < ddtrogglerlen; i++) {
            ddtroggler[i].addEventListener('click', function () {
                let ddNext = ddtroggler[i].nextElementSibling;
                slideToggle(ddNext, 300);
            });
        }
    }
}

window.addEventListener('load', mobileDropdownMenu);

// Sticky Header

let navarToggler = document.querySelector('.navbar-toggler');
let header = document.querySelector('.header-area');

if (navarToggler) {
    navarToggler.addEventListener('click', function () {
        header.classList.toggle('mobile-menu-open');
    });
}

if (header) {
    function stickyNavigation() {
        if (window.pageYOffset > 10) {
            header.classList.add('sticky-on');
        } else {
            header.classList.remove('sticky-on');
        }
    }

    window.addEventListener('load', stickyNavigation);
    window.addEventListener('scroll', stickyNavigation);
}

// Anchor Prevent Default

let anchor = document.querySelectorAll('a[href="#"]');

if (anchor.length > 0) {
    for (let i = 0; i < anchor.length; i++) {
        anchor[i].addEventListener('click', function (e) {
            e.preventDefault();
        });
    }
}

// Search Form

const searchButton = document.getElementById('searchButton');
const searchClose = document.getElementById('searchClose');
const searchFormPopup = document.querySelector('.search-form-popup');
const searchOverlay = document.getElementById('searchOverlay');

if (searchButton) {
    searchButton.addEventListener('click', () => {
        searchFormPopup.classList.add('open');
        searchOverlay.classList.add('open');
    });
    searchClose.addEventListener('click', () => {
        searchFormPopup.classList.remove('open');
        searchOverlay.classList.remove('open');
    });
}

// Hero Swiper
const heroSwiperEl = document.querySelector('.hero-swiper');
const heroNextSlideEl = document.querySelector('.hero-next-slide');

if (heroSwiperEl && heroNextSlideEl) {
    const heroSwiper = new Swiper(heroSwiperEl, {
        loop: true,
        slidesPerView: 1,
        spaceBetween: 30,
        grabCursor: true,
        effect: "creative",
        creativeEffect: {
            prev: {
                shadow: true,
                translate: [0, 0, -400],
            },
            next: {
                translate: ["100%", 0, 0],
            },
        },
        autoplay: {
            delay: 4000000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.hero-button-next',
            prevEl: '.hero-button-prev',
        },
        pagination: {
            el: ".hero-pagination",
            type: "fraction",
        },
        on: {
            init: function () {
                updateNextSlideBg();
            },
            slideChangeTransitionStart: function () {
                updateNextSlideBg();
            }
        }
    });

    function updateNextSlideBg() {
        const nextSlide = document.querySelector('.hero-swiper .swiper-slide-next');
        if (nextSlide) {
            let bgImage = nextSlide.style.backgroundImage;

            if (!bgImage || bgImage === 'none') {
                bgImage = getComputedStyle(nextSlide).backgroundImage;
            }

            heroNextSlideEl.style.backgroundImage = bgImage;
        }
    }
}

// Service Slide
const serviceSwiper = document.querySelector('.service-swiper')

if (serviceSwiper) {
    new Swiper('.service-swiper', {
        loop: true,
        slidesPerView: 4,
        spaceBetween: 30,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.service-button-next',
            prevEl: '.service-button-prev',
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            480: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            576: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
            1200: {
                slidesPerView: 4,
                spaceBetween: 30,
            },
        },
    });
}

// Service Slide
const serviceSwiperTwo = document.getElementById('serviceSwiperTwo')

if (serviceSwiperTwo) {
    new Swiper(serviceSwiperTwo, {
        loop: true,
        slidesPerView: 4,
        spaceBetween: 30,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.service-button-next',
            prevEl: '.service-button-prev',
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            480: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            576: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            992: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
        },
    });
}

// Service Slide

const serviceSwiperThree = document.querySelector('.service-two-swiper');

if (serviceSwiperThree) {
    new Swiper(serviceSwiperThree, {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination-2",
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            480: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1200: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
        },
    });
}

// Portfolio Swiper

const portfolioSwiper = document.querySelector('.portfolio-swiper');

if (portfolioSwiper) {
    new Swiper('.portfolio-swiper', {
        loop: true,
        slidesPerView: 2,
        spaceBetween: 60,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.portfolio-button-next',
            prevEl: '.portfolio-button-prev',
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            480: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            576: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 30,
            }
        },
    });
}

// Testimonial Slide

const testimonialSwiper = document.querySelector('.testimonial-swiper');

if (testimonialSwiper) {
    new Swiper(testimonialSwiper, {
        loop: true,
        spaceBetween: 30,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}

// Testimonial Slide Two

const testimonialSlider = document.getElementById('testimonialsSlider');

if (testimonialSlider) {
    new Swiper(testimonialSlider, {
        loop: true,
        spaceBetween: 30,
        slidesPerView: 2,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination-two",
            clickable: true,
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
            },
            768: {
                slidesPerView: 2,
            }
        },
    });
}

// Testimonial Slide Two

const testimonialSliderTwo = document.getElementById('testimonialSwiperTwo');

if (testimonialSliderTwo) {
    new Swiper(testimonialSliderTwo, {
        loop: true,
        spaceBetween: 30,
        slidesPerView: 3,
        centeredSlides: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.testimonial-button-next',
            prevEl: '.testimonial-button-prev',
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
            },
            768: {
                slidesPerView: 2,
            },
            992: {
                slidesPerView: 3,
            },
        },
    });
}

// Team Slider

const teamSlider = document.getElementById('teamSlider');

if (teamSlider) {
    new Swiper(teamSlider, {
        loop: true,
        spaceBetween: 30,
        slidesPerView: 2,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".team-pagination",
            clickable: true,
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
            },
            576: {
                slidesPerView: 2,
            },
            992: {
                slidesPerView: 3,
            },
            1200: {
                slidesPerView: 4,
            }
        },
    });
}

// Service Card

const cards = document.querySelectorAll('.service-slide-card');

if (cards.length > 0) {
    cards.forEach((card) => {
        const heading = card.querySelector('h2');
        const paragraph = card.querySelector('p');
        paragraph.style.bottom = `-${paragraph.offsetHeight + 200}px`;

        card.addEventListener('mouseenter', () => {
            const paragraphHeight = paragraph.offsetHeight;
            heading.style.bottom = `${paragraphHeight + 50}px`;
            paragraph.style.bottom = '45px';
            cards.forEach((c) => c.classList.remove('active'));
            card.classList.add('active');
        });

        card.addEventListener('mouseleave', () => {
            heading.style.bottom = '38px';
            paragraph.style.bottom = `-${paragraph.offsetHeight + 200}px`;
        });
    });
}

// Catagory Slide

const catagorySlide = document.getElementById('catagorySlide');

if (catagorySlide) {
    Marquee3k.init();
}

// Counter Up

let counterlen = document.querySelectorAll(".counter").length;

if (counterlen > 0) {
    let counterUp = window.counterUp.default;

    let callback = entries => {
        entries.forEach(entry => {
            let counterElement = entry.target
            if (entry.isIntersecting && !counterElement.classList.contains('is-visible')) {
                counterUp(counterElement, {
                    duration: 2000,
                    delay: 20
                });
                counterElement.classList.add('is-visible');
            }
        });
    }

    let IO = new IntersectionObserver(callback, {
        threshold: 1
    });

    let counterUpClass = document.querySelectorAll('.counter');
    let counterUpClasslen = counterUpClass.length;

    for (let i = 0; i < counterUpClasslen; i++) {
        IO.observe(counterUpClass[i]);
    }
}

// Password Visibility

let cratePassword = document.getElementById('cratePassword');
let passwordButton = document.querySelector('.create-password-label');

if (cratePassword) {
    function passwordHideShow() {
        if (cratePassword.type === 'password') {
            cratePassword.type = 'text';
            passwordButton.innerHTML = 'visibility_off';
        } else {
            cratePassword.type = 'password';
            passwordButton.innerHTML = 'visibility';
        }
    }
    passwordButton.addEventListener('click', passwordHideShow);
}

// Scroll to Top

let scrollButton = document.getElementById('scrollTopButton');
let topdistance = 600;

if (scrollButton) {
    window.addEventListener('scroll', function () {
        if (document.body.scrollTop > topdistance || document.documentElement.scrollTop > topdistance) {
            scrollButton.classList.add('scrolltop-show');
            scrollButton.classList.remove('scrolltop-hide');
        } else {
            scrollButton.classList.add('scrolltop-hide');
            scrollButton.classList.remove('scrolltop-show');
        }
    });

    scrollButton.addEventListener('click', function () {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    });
}

// Video Popup

const videoPopup = document.getElementById("videoPopup");
const videoFrame = document.getElementById("videoFrame");
const closeBtn = document.getElementById("videoCloseButton");

if (videoPopup) {
    document.querySelectorAll(".video-btn").forEach(button => {
        button.addEventListener("click", function () {
            let videoUrl = this.getAttribute("data-video");
            if (videoUrl.includes("youtube.com") || videoUrl.includes("youtu.be")) {
                videoUrl += "?autoplay=1";
            } else if (videoUrl.includes("vimeo.com")) {
                videoUrl += "?autoplay=1";
            }
            videoFrame.src = videoUrl;
            videoPopup.style.display = "flex";
        });
    });

    closeBtn.onclick = function () {
        videoPopup.style.display = "none";
        videoFrame.src = "";
    }

    window.onclick = function (event) {
        if (event.target == videoPopup) {
            videoPopup.style.display = "none";
            videoFrame.src = "";
        }
    }
}

// Isotope

let grid = document.querySelector('.vorix-filter');

if (grid) {
    imagesLoaded(grid, function () {
        let iso = new Isotope(grid, {
            itemSelector: '.filter-item',
            percentPosition: true,
            masonry: {
                columnWidth: '.filter-item'
            }
        });

        let filtersElem = document.querySelector('.vorix-filter-nav');

        if (filtersElem) {
            filtersElem.addEventListener('click', function (event) {
                if (!matchesSelector(event.target, 'button')) {
                    return;
                }
                let filterValue = event.target.getAttribute('data-filter');
                iso.arrange({
                    filter: filterValue
                });
            });
        }

        let buttonGroups = document.querySelectorAll('.vorix-filter-nav');
        let buttonGroupslen = buttonGroups.length;

        for (let i = 0; i < buttonGroupslen; i++) {
            let buttonGroup = buttonGroups[i];
            radioButtonGroup(buttonGroup);
        }

        function radioButtonGroup(buttonGroup) {
            buttonGroup.addEventListener('click', function (event) {
                if (!matchesSelector(event.target, 'button')) {
                    return;
                }
                buttonGroup.querySelector('.active').classList.remove('active');
                event.target.classList.add('active');
            });
        }
    });
}

// Progress Bar

const progressBars = document.querySelectorAll('.vorix-progress-bar');

if (progressBars.length > 0) {
    progressBars.forEach(function (progressBar) {
        const value = parseInt(progressBar.getAttribute('data-value'), 10);
        progressBar.style.width = value + '%';
        const spanElements = progressBar.closest('.progress-item').querySelectorAll('.progress-info span');
        if (spanElements.length > 1) {
            const percentSpan = spanElements[1];
            percentSpan.style.marginRight = (100 - value) + '%';
        }
    });
}

// Tooltip Activation

let vorixTooltip = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = vorixTooltip.map(function (sbTooltip) {
    return new bootstrap.Tooltip(sbTooltip);
});

// Toast Activation

let vorixToast = [].slice.call(document.querySelectorAll('.toast'));
let toastList = vorixToast.map(function (sbToast) {
    return new bootstrap.Toast(sbToast);
});
toastList.forEach(toast => toast.show());

// Popover Activation

let vorixPopover = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = vorixPopover.map(function (sbPopover) {
    return new bootstrap.Popover(sbPopover);
});

// Copyright Year

const year = document.getElementById("year");
if (year) {
    const currentYear = new Date().getFullYear();
    year.textContent = currentYear;
}

// Dark/Light Toggle

const themeToggleBtn = document.getElementById('theme-toggle');

if (themeToggleBtn) {
    function applyTheme(theme) {
        document.body.className = theme;
        localStorage.setItem('theme', theme);

        if (theme === 'dark-mode') {
            themeToggleBtn.classList.remove('light-mode-active');
        } else {
            themeToggleBtn.classList.add('light-mode-active');
        }
    }

    function initializeTheme() {
        const savedTheme = localStorage.getItem('theme') || 'dark-mode';
        applyTheme(savedTheme);
    }

    themeToggleBtn.addEventListener('click', () => {
        const currentTheme = document.body.className;
        const newTheme = currentTheme === 'light-mode' ? 'dark-mode' : 'light-mode';
        applyTheme(newTheme);
    });

    initializeTheme();
}

// WOW JS

const wowjs = document.querySelectorAll('.wow').length;

if (wowjs > 0) {
    new WOW().init();
}

// Preloader

let preloader = document.getElementById('preloader');

if (preloader) {
    window.addEventListener('load', function () {
        let fadeOut = setInterval(function () {
            if (!preloader.style.opacity) {
                preloader.style.opacity = 1;
            }
            if (preloader.style.opacity > 0) {
                preloader.style.opacity -= 0.1;
            } else {
                clearInterval(fadeOut);
                preloader.remove();
            }
        }, 100);
    });
}