$(document).ready(function() {

    var wind = $(window);


    wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 200,
        mobile: false,
        live: false
    });
    wow.init();


    $(".toggle-active").on("click", function(){
        $(this).toggleClass("active")
    })



    // ---------- dividar animation -----------
    const dividar = document.querySelector('.dividar');
    window.addEventListener('scroll', () => {
        // Calculate scroll percentage
        const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
        // Interpolate clip-path based on scroll percent
        const clipX = scrollPercent * 100; // x position of second and third points
        dividar.style.clipPath = `polygon(0 0, ${clipX}% 0, ${clipX}% 100%, 0 100%)`;
    });


    // ---------- to top -----------
    $('.to-top').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });

    $(".toggle-mega-btn").click(function(){
        $(this).toggleClass("active");
        $(".megamenu").toggleClass("active");
    })


});


// ------------ swiper sliders -----------
$(document).ready(function() {

    // ------------ products-slider -----------
    var swiper = new Swiper('.products-slider', {
        slidesPerView: 5,
        spaceBetween: 30,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 1.3,
                centeredSlides: true,
                spaceBetween: 10,
                loop: true,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 5,
            }
        }
    });


    // ------------ brands-slider -----------
    var swiper = new Swiper('.brands-slider', {
        slidesPerView: 8,
        spaceBetween: 10,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 2.2,
                centeredSlides: true,
                spaceBetween: 10,
                loop: true,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 6,
            },
            1200: {
                slidesPerView: 8,
            }
        }
    });


    // ------------ products-slider -----------
    var swiper = new Swiper('.products-slider-st2', {
        slidesPerView: 5,
        spaceBetween: 5,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 1.3,
                centeredSlides: true,
                spaceBetween: 10,
                loop: true,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 6,
            }
        }
    });


    // ------------ links slider -----------
    var swiper = new Swiper('.links-navbar .links-slider', {
        slidesPerView: 5,
        spaceBetween: 5,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 1.3,
                centeredSlides: true,
                spaceBetween: 10,
                loop: true,
            },
            480: {
                slidesPerView: 2,
            },
            787: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 6,
            }
        }
    });

    
    // ------------ categories slider -----------
    var swiper = new Swiper('.categories-sec .categories-slider', {
        slidesPerView: 10,
        spaceBetween: 0,
        // centeredSlides: true,
        speed: 1000,
        pagination: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        loop: false,
        breakpoints: {
            0: {
                slidesPerView: 2,
                centeredSlides: true,
                spaceBetween: 10,
                loop: true,
            },
            480: {
                slidesPerView: 3,
            },
            787: {
                slidesPerView: 5,
            },
            991: {
                slidesPerView: 8,
            },
            1200: {
                slidesPerView: 10,
            }
        }
    });


    // marq slider 
    var swiper = new Swiper('.login-imgs-sliders .marq-slider', {
        slidesPerView: "auto",
        spaceBetween: 5,
        centeredSlides: true,
        pagination: false,
        navigation: false,
        mousewheel: false,
        keyboard: true,
        speed: 5000,
        observer: true,
        observeParents: true,
        allowTouchMove: false,
            autoplay: {
                delay: 1,
            },
            loop: true,
    });


});


// ------------ modal code input ----------
$(document).ready(function() {
    window.onload = function() {
        const inputs = document.querySelectorAll('.code-group .item');
        inputs[0].focus();
        inputs.forEach((input, index) => {
            input.addEventListener('input', (event) => {
                if (isNaN(event.target.value)) {
                    input.value = '';
                    input.classList.remove('focused');
                    return;
                }
                if (input.value.length === 1) {
                    input.classList.add('focused');
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                } else {
                    input.classList.remove('focused');
                }
            });

            input.addEventListener('keydown', (event) => {
                if (event.key === 'Backspace' && input.value.length === 0) {
                    input.classList.remove('focused');
                    if (index > 0) {
                        inputs[index - 1].focus();
                        inputs[index - 1].value = ''; // Optionally clear previous input on backspace
                    }
                }
            });
        });
    };
});

// ------------ SHOW HED PASS ----------
$(document).ready(function() {
    $(".show_hide_password .show_pass").on('click', function(event) {
        event.preventDefault();
        if($(this).siblings("input").attr("type") == "text"){
            $(this).siblings("input").attr('type', 'password');
            $(this).addClass( "fa-eye-slash" );
            $(this).removeClass( "fa-eye" );
        }else if($(this).siblings("input").attr("type") == "password"){
            $(this).siblings("input").attr('type', 'text');
            $(this).removeClass( "fa-eye-slash" );
            $(this).addClass( "fa-eye" );
        }
    });
}); 

// ------------ modal countdown ----------
$(document).ready(function() {
    function startCountdown(duration) {
        let timer = duration, minutes, seconds;
        const countdownElement = document.querySelector('.code-countdown');
        const resendBtn = document.getElementById('resend-btn');
        const interval = setInterval(() => {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);
    
            // Format time with leading zeros
            seconds = seconds < 10 ? "0" + seconds : seconds;
            countdownElement.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                clearInterval(interval);
                countdownElement.textContent = "";
                
                // Remove the 'd-none' class from the resend button when time is up
                resendBtn.classList.remove('d-none');
            }
        }, 1000);
    }

    const myModal = document.getElementById('modal-code');
    myModal.addEventListener('shown.bs.modal', function () {
        startCountdown(120);
    });
});


// ------------ modal code input ----------
$(document).ready(function() {
    window.onload = function() {
        const inputs = document.querySelectorAll('.code-group .item');
        inputs[0].focus();
        inputs.forEach((input, index) => {
            input.addEventListener('input', (event) => {
                if (isNaN(event.target.value)) {
                    input.value = '';
                    input.classList.remove('focused');
                    return;
                }
                if (input.value.length === 1) {
                    input.classList.add('focused');
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                } else {
                    input.classList.remove('focused');
                }
            });

            input.addEventListener('keydown', (event) => {
                if (event.key === 'Backspace' && input.value.length === 0) {
                    input.classList.remove('focused');
                    if (index > 0) {
                        inputs[index - 1].focus();
                        inputs[index - 1].value = ''; // Optionally clear previous input on backspace
                    }
                }
            });
        });
    };
});
