$(document).ready(function () {

    // top btn
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#top').fadeIn();
        } else {
            $('#top').fadeOut();
        }
    });

    $('#top a').click(function (e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 500);
    });

    // sitemap
    $('.open').on('click', function (e) {
        e.preventDefault();
        $('#siteMap').addClass('open');
    });

    $('#siteMap .button').on('click', function (e) {
        e.preventDefault();
        $('#siteMap').removeClass('open');
    });

    initVisualSlider();
    initProductSlider();

    // main visual
    function initVisualSlider() {
        $(".main-visual-slide").each(function () {
            var $slider = $(this);

            $slider.on("init", function () {
                $("#VisualCon .slick-dots").find("li").eq(0).addClass("active-item");
            });

            $slider.on("afterChange", function (event, slick, currentSlide) {
                $("#VisualCon .slick-dots").find("li").removeClass("active-item");
                $("#VisualCon .slick-dots").find("li").eq(currentSlide).addClass("active-item");
            });

            $slider.slick({
                slidesToShow: 1,
                autoplay: true,
                dots: true,
                arrows: true,
                speed: 1000,
                easing: "easeInOutQuint",
                pauseOnHover: false,
                prevArrow: "#visualCon .prev-btn",
                nextArrow: "#visualCon .next-btn",

                customPaging: function (slider, i) {
                    const slideNum = $(slider.$slides[i]).data("title");
                    return (
                        '<a class="progress-con">' +
                        '<div class="progress-bar">' +
                        '<span class="progressing"></span>' +
                        '</div>' +
                        '<strong class="num">' + slideNum + '</strong>' +
                        '</a>'
                    );
                },

                responsive: [
                    {
                        breakpoint: 1240,
                        settings: {
                            arrows: false,
                        },
                    },
                ],
            });
        });
    }

    // product slider, pagination
    function initProductSlider() {
        var $productSlide = $('.main-product-slide');
        var $pagingInfo = $('.pagingInfo');
        var $current = $pagingInfo.find('.current');
        var $total = $pagingInfo.find('.total');

        $productSlide.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            infinite: true,
            speed: 1200,
            autoplaySpeed: 3000,
            dots: false,
            draggable: true,
            centerMode: true,

            prevArrow: '.main-product-controls .prev-btn',
            nextArrow: '.main-product-controls .next-btn',
        });

        // 페이지네이션
        $total.text("0" + $productSlide.slick("getSlick").slideCount);

        //first 설정
        $productSlide.on('init', function (event, slick) {
            $(".main-product-item").removeClass("first");
            $(".slick-center").addClass("first");
            updatePagination(slick, 0);
        });

        $productSlide.on('afterChange', function (event, slick, currentSlide) {
            $(".main-product-item").removeClass("first");
            $(".slick-center").addClass("first");
            updatePagination(slick, currentSlide);

        });
        $productSlide.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            // currentSlide는 인덱스이므로, slick.$slides 배열을 사용하여 슬라이드 DOM 요소를 가져옵니다
            var currentSlideElement = slick.$slides[currentSlide];

            // currentSlideElement에 'test' 클래스를 추가
            $(currentSlideElement).addClass('test');

            // 모든 .main-product-item에서 active-test 클래스를 제거
            $(".main-product-item").removeClass("active-test");

            // nextSlide는 이동할 슬라이드의 인덱스입니다.
            var nextSlideElement = slick.$slides[nextSlide];

            // nextSlide가 center로 올 때 slick-center 클래스를 체크
            if ($(nextSlideElement).hasClass("slick-center")) {
                $(nextSlideElement).addClass("active-item");
            }
        });




        function updatePagination(slick, currentSlide) {
            var slideNumber = (currentSlide + 1).toString().padStart(2, '0');
            var totalSlides = slick.slideCount.toString().padStart(2, '0');
            $current.text(slideNumber);
            $total.text(totalSlides);
        }
    }

});