$(document).ready(function(){
    let thumb_swiper = new Swiper(".thumb_slider", {
        spaceBetween: 16,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
        navigation: {
            nextEl: ".thumb_slider-next",
            prevEl: ".thumb_slider-prev",
        },
        on: {

            slideChangeTransitionEnd : function() {
                videoControl();
            },

        }
    });
    let pd_swiper = new Swiper(".pd_slider", {
        thumbs: {
            swiper: thumb_swiper,
        },
        on: {

            slideChangeTransitionEnd : function() {
                videoControl();
            },

        }
    });

    $(".rel_list .tab_list li a").click(function(e){
        e.preventDefault();

        var tabId = $(this).attr("data-tab");
        var parent = $(this).parents("li");

        $(".rel_list .tab_list li").removeClass("active");
        $(".rel_list .tab_cont .cont_item").removeClass("active");

        parent.addClass("active");
        $("#"+tabId).addClass("active");

        // listImgResize();
    });

    let rel_swiper1 = new Swiper(".rel_slider1", {
        slidesPerView: 5,
        slidesPerGroup: 5,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider1-next",
            prevEl: ".rel_slider1-prev",
        },
        observer: true,
        observeParents: true
    });

    let rel_swiper2 = new Swiper(".rel_slider2", {
        slidesPerView: 5,
        slidesPerGroup: 5,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider2-next",
            prevEl: ".rel_slider2-prev",
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper3 = new Swiper(".rel_slider3", {
        slidesPerView: 5,
        slidesPerGroup: 5,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider3-next",
            prevEl: ".rel_slider3-prev",
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper4 = new Swiper(".rel_slider4", {
        slidesPerView: 5,
        slidesPerGroup: 5,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider4-next",
            prevEl: ".rel_slider4-prev",
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper5 = new Swiper(".rel_slider5", {
        slidesPerView: 5,
        slidesPerGroup: 5,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider5-next",
            prevEl: ".rel_slider5-prev",
        },
        observer: true,
        observeParents: true
    });
    let rel_slider6 = new Swiper(".rel_slider6", {
        slidesPerView: 4,
        slidesPerGroup: 4,
        // loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".rel_slider3-next",
            prevEl: ".rel_slider3-prev",
        },
        observer: true,
        observeParents: true
    });
    //  rel_slider7은 blade 에 있습니다.
    // let rel_slider7 = new Swiper(".rel_slider7", {
    //     slidesPerView: 1,
    //     slidesPerGroup: 1,
    //     loop: true,
    //     // loopFillGroupWithBlank: true,
    //     navigation: {
    //         nextEl: ".rel_slider7-next",
    //         prevEl: ".rel_slider7-prev",
    //     },
    //     pagination: {
    //         el: ".swiper-pagination",
    //         clickable: true
    //     },
    // });


    let animation1 = bodymovin.loadAnimation({
        container: $('#sample_btn_ico')[0],
        path: '/v2/img/lottie/button_loader.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });

    let animation2 = bodymovin.loadAnimation({
        container: $('#pdp_inquiry_ico')[0],
        path: '/v2/img/lottie/button_loader_white.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });

    $(".no_sample_btn").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        let el = $(this).find(".snackbar");
        if(el.css("display") == "block") {
            el.css("display", "none");
        } else {
            el.css("display", "block");
            if (!$(this).hasClass('restock_alarm')) {
                setTimeout(function() {
                    el.css("display", "none");
                }, 6000);
            }
        }
    });

    // 샘플 배송 안내 이미지
    let sampleGuideTl = gsap.timeline({repeat:-1});
    let sampleGuide_targets = document.querySelectorAll(".service_info_sample .info_img img");

    let sampleGuide_numberOfTargets = sampleGuide_targets.length

    let sampleGuide_duration = 0.75 //change this
    let sampleGuide_pause = 1 // change this

    let sampleGuide_stagger = sampleGuide_duration + sampleGuide_pause
    let sampleGuide_repeatDelay = (sampleGuide_stagger * (sampleGuide_numberOfTargets - 1)) + sampleGuide_pause

    sampleGuideTl
        .from(sampleGuide_targets, {x:-40, duration:sampleGuide_duration, opacity:0, stagger:{
                each:sampleGuide_stagger,
                repeat:-1,
                repeatDelay:sampleGuide_repeatDelay
            }})
        .to(sampleGuide_targets, {x:0, duration:sampleGuide_duration, opacity:0, stagger:{
                each:sampleGuide_stagger,
                repeat:-1,
                repeatDelay:sampleGuide_repeatDelay
            }}, sampleGuide_stagger);

    let stock_alarm_icon1 = bodymovin.loadAnimation({
        container: $('#stock_alarm_icon1')[0],
        path: '/v2/img/lottie/alert_tooltip.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });
    let stock_alarm_icon2 = bodymovin.loadAnimation({
        container: $('#stock_alarm_icon2')[0],
        path: '/v2/img/lottie/alert_tooltip.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });
});

function videoControl () {
    $(".pd_slider_w .slider_item").each(function() {
        let video = $(this).find("video").get(0);
        if (video) {
            video.pause();
        }
    });

    $(".thumb_slider_w .slider_item").each(function() {
        if ($(this).hasClass("swiper-slide-thumb-active")) {
            let i = $(this).index();
            let video = $(".pd_slider_w .slider_item").eq(i).find(".pd_video").get(0);
            if (video) {
                video.play();
            }
        }
    });
}

function expandFn(obj) {
    console.log(obj);
    if($(obj).next(".expand_cont").css("display") == "block") {
        $(obj).parents(".expand_item").removeClass("open");
        $(obj).next(".expand_cont").slideUp();
    } else {
        $(obj).parents(".expand_item").addClass("open");
        $(obj).next(".expand_cont").slideDown();

        window.dataLayer.push({
            event: 'detail_open_click',
            click_target: obj.innerText.trim()
        });
    }
}

//  커스텀 툴링
$(document).ready(function() {
    $('.tooling_inquiry').on('click', function() {
        $('.tooling_visible').show();
        $('.tooling_hidden').hide();
    });
    $('.tooling_cancel').on('click', function() {
        $('.tooling_visible').hide();
        $('.tooling_hidden').show();
    });

    $('.option_title.unchecked').next().hide();
    $('.option_required').hide();

    $('.option_title').on('click', function() {
        if ($(this).hasClass('unchecked')) {
            $(this).removeClass('unchecked');
            $(this).addClass('checked');
            $(this).next().slideDown();
        } else {
            $(this).removeClass('checked');
            $(this).addClass('unchecked');
            $(this).next().slideUp();
        }
    })

    //  커스텀 툴링 - 체크박스 또는 INPUT 입력
    $('.reshape input[type=checkbox], .resize input[type=checkbox]').on('click', function() {
        if ($(this).is(':checked')) {
            $(this).parent().parent().next().children().addClass('tooling_outline');
            $(this).parent().parent().next().children().focus();
        } else {
            $(this).parent().parent().next().children().removeClass('tooling_outline');
        }
    });
    $('.reshape input[type=text], .resize input[type=number]').on('keyup', function() {
        if (($(this).val() !== '') && !($(this).parent().prev().children().children().is(':checked'))) {
            $(this).addClass('tooling_outline');
            $(this).parent().prev().children().children().prop('checked', true);
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.material input[type=text]').on('keyup', function() {
        if (($(this).val() !== '')) {
            $(this).addClass('tooling_outline');
        } else {
            $(this).removeClass('tooling_outline');
        }
        if (($('input[name=material_which]').val() !== '') && ($('input[name=material_what]').val() !== '')) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.sustainability input[type=checkbox]').on('click', function() {
        if ($('input[name=sustainability]:checked').length !== 0) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.logo input[type=radio]').on('click', function() {
        if (($('input[name=effect]:checked').length !== 0) && ($('input[name=area]:checked').length !== 0)) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.metallization input[type=checkbox]').on('click', function() {
        if ($('input[name=metallization]:checked').length !== 0) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
})