
// Sticky Header
document.addEventListener("DOMContentLoaded", () => {
    const header = document.querySelector(".header");

    function stickyHeader() {
        if (window.scrollY > 20) {
            header.classList.add("header_sticky");
        } else {
            header.classList.remove("header_sticky");
        }
    }

    // Run once on load
    stickyHeader();

    // Update on scroll
    window.addEventListener("scroll", stickyHeader);
});

// category_toggle
document.addEventListener("DOMContentLoaded", function () {
    const toggles = document.querySelectorAll(".category_toggle");
    const productBoxes = document.querySelectorAll(".product_box");

    function activateCategory(categoryId) {
        // Remove active state from all toggles and dots
        toggles.forEach(t => t.classList.remove("active"));

        // Add active to all toggles (and dots) with the same category
        document.querySelectorAll(`[data-category="${categoryId}"]`).forEach(el => {
            el.classList.add("active");
        });

        // Hide all product boxes
        productBoxes.forEach(box => {
            box.style.opacity = "0";
            box.style.zIndex = "0";
            box.classList.remove("active");
        });

        // Show the target product box smoothly
        const targetBox = document.getElementById(categoryId);
        if (targetBox) {
            targetBox.classList.add("active");
            targetBox.style.zIndex = "10";
            setTimeout(() => {
                targetBox.style.opacity = "1";
            }, 20); // short delay for CSS transition
        }
    }

    // Click events for all toggles and dots
    toggles.forEach(toggle => {
        toggle.addEventListener("click", function () {
            const targetCategory = this.getAttribute("data-category");
            activateCategory(targetCategory);
        });
    });

    // Initialize first active
    const firstActive = document.querySelector(".category_dot.active");
    if (firstActive) {
        activateCategory(firstActive.getAttribute("data-category"));
    } else if (productBoxes.length > 0) {
        activateCategory(productBoxes[0].id);
    }
});

// seller_slider
new Swiper('.seller_slider', {
    pagination: {
        el: '.swiper-pagination',
    },
    speed: 1000,
    spaceBetween: 16,
    navigation: {
        nextEl: '.seller_slider_wrapper .swiper-button-next',
        prevEl: '.seller_slider_wrapper .swiper-button-prev',
    },
    breakpoints: {
        0: { // mobile
            slidesPerView: 1,
        },
        768: { // small tablets
            slidesPerView: 2,
        },
        992: { // desktops
            slidesPerView: 3,
        },
        1160: {
            slidesPerView: 4,
        }
    }
});

// review_slider
new Swiper('.review_slider', {
    pagination: {
        el: '.swiper-pagination',
    },
    speed: 1000,
    spaceBetween: 16,
    navigation: {
        nextEl: '.review_slider_wrapper .swiper-button-next',
        prevEl: '.review_slider_wrapper .swiper-button-prev',
    },
    slidesPerView: 5,
    breakpoints: {
        0: { // mobile
            slidesPerView: 1,
        },
        768: { // small tablets
            slidesPerView: 3,
            loop: true,
            centeredSlides: true,
        },
        992: { // desktops
            enabled: false,
        }
    }
});

// Accordion
document.addEventListener("DOMContentLoaded", function () {
    initAccordions();
});

function initAccordions() {
    // Select all accordion containers
    const accordions = document.querySelectorAll(".accordion_v1");

    accordions.forEach(accordion => {
        const buttons = accordion.querySelectorAll(".accordion_button");

        buttons.forEach(button => {
            button.addEventListener("click", () => {
                const item = button.closest(".accordion_item");
                const isActive = item.classList.contains("active");

                // Close all items inside only this accordion
                accordion.querySelectorAll(".accordion_item").forEach(i => {
                    i.classList.remove("active");
                    p.classList.remove("hidden");
                    m.classList.add("hidden");
                });

                // Open the clicked one if it wasn’t active
                if (!isActive) {
                    item.classList.add("active");
                    plus.classList.add("hidden");
                    minus.classList.remove("hidden");
                }
            });
        });
    });
}

// btn_Wrap
document.addEventListener("DOMContentLoaded", function () {
    const items = document.querySelectorAll(".accordion_item");

    items.forEach(item => {
        item.addEventListener("click", function () {
            // Remove 'active' from all items
            items.forEach(i => i.classList.remove("active"));

            // Add 'active' only to the clicked one
            this.classList.add("active");
        });
    });
});

// video controls
document.addEventListener("DOMContentLoaded", function (event) {

    // Get all videos
    var videos = document.getElementsByClassName("video__play-button");
    var video_fullscreen = document.getElementsByClassName("video__fullscreen-button");

    // Loop through all videos
    for (var i = 0; i < videos.length; i++) {
        // On click play button
        videos[i].onclick = function () {

            // Find video element
            video = this.nextElementSibling;
            video_wrapper = this.parentElement;
            console.log(video_wrapper);
            console.log(video);

            // Play video
            if (video.paused == true) {
                // Play the video
                video.play();
                video.setAttribute('data-state', 'play');
                video.setAttribute('data-state-reload', 'false');
                video_wrapper.setAttribute('data-state', 'play');

                // Update the button text to 'Pause'
                // this.innerHTML = "Pause";
                this.setAttribute('data-button-state', 'play');
                this.setAttribute('data-button-state-reload', 'false');
            } else {
                // Pause the video
                video.pause();
                video.setAttribute('data-state', 'pause');
                video_wrapper.setAttribute('data-state', 'pause');

                // Update the button text to 'Play'
                // this.innerHTML = "Play";
                this.setAttribute('data-button-state', 'pause');
            }

            // When video is ended
            video.onended = (event) => {
                // Pause the video
                video.setAttribute('data-state', 'pause');
                video.setAttribute('data-state-reload', 'true');

                // Update the button text to 'Play'
                this.setAttribute('data-button-state', 'pause');
                this.setAttribute('data-button-state-reload', 'true');
            };

        }

    }


    // Loop through all videos
    for (var i = 0; i < video_fullscreen.length; i++) {
        // On click play button
        video_fullscreen[i].onclick = function () {

            // Find video element
            video = this.nextElementSibling.nextElementSibling;

            if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }

        }

    }

});

// marquee
// new Marquee(element, {
//     speed: 60,
//     gap: 30,
//     pauseOnHover: false,
// });

// search_box
document.addEventListener("DOMContentLoaded", function () {
    const searchBoxes = document.querySelectorAll(".search_box");

    searchBoxes.forEach(searchBox => {
        const searchBtn = searchBox.querySelector(".search_btn");
        const searchToggle = searchBox.querySelector(".search_toggle");
        const searchHide = searchBox.querySelector(".search_hide");
        const searchField = searchBox.querySelector(".search_field");

        // Toggle search field on button click
        searchBtn.addEventListener("click", function (e) {
            e.stopPropagation();

            const isActive = searchField.classList.toggle("active");

            if (isActive) {
                searchToggle.classList.add("hidden");
                searchHide.classList.remove("hidden");
                searchField.classList.remove("pointer-events-none");
            } else {
                hideSearch();
            }
        });

        // Close search when clicking outside
        document.addEventListener("click", function (e) {
            if (!searchBox.contains(e.target)) {
                hideSearch();
            }
        });

        // Function to hide search
        function hideSearch() {
            searchField.classList.remove("active");
            searchField.classList.add("pointer-events-none");
            searchToggle.classList.remove("hidden");
            searchHide.classList.add("hidden");
        }
    });
});

// dropdown
document.addEventListener("DOMContentLoaded", function () {
    const dropdownLinks = document.querySelectorAll(".dropdown a");

    dropdownLinks.forEach(link => {
        link.addEventListener("click", function (e) {
            e.preventDefault(); // prevent link navigation (optional)

            const currentDropdown = this.closest(".dropdown");

            // Remove 'active' from all dropdowns except the current one
            document.querySelectorAll(".dropdown").forEach(drop => {
                if (drop !== currentDropdown) {
                    drop.classList.remove("active");
                }
            });

            // Toggle 'active' on the clicked dropdown
            currentDropdown.classList.toggle("active");
        });
    });
});

// menu_toggle
document.addEventListener("DOMContentLoaded", function () {
    const menuToggles = document.querySelectorAll(".menu_toggle");
    const body = document.body;
    const primaryMenu = document.querySelector(".primary_menu");

    menuToggles.forEach(btn => {
        btn.addEventListener("click", function (e) {
            e.stopPropagation(); // prevent click from reaching body
            body.classList.toggle("menu_active");
            body.classList.toggle("overflow-hidden");
        });
    });

    // Close menu when clicking outside .primary_menu
    document.addEventListener("click", function (e) {
        if (!primaryMenu.contains(e.target) && !e.target.closest(".menu_toggle")) {
            body.classList.remove("menu_active", "overflow-hidden");
        }
    });
});
