/*
 * Name     : main.js
 * Version  : 1.1.0
 * Author   : 1px studio
 * Date     : 2024-03-08
 * Desc     : multiple slides (news, event swiper)
 * -------------------------------------------------
 */
$(function(){
    // script break in sub page
    if (document.getElementById("isIndex")==null) { return; }

    /* 레이어 팝업 */
    (function e() {
        function t(e) {
            e.hide()
        }
        $(".px-layer-popup .btn-cookie-close").on("click", function(e) {
            let i = $(this).closest(".px-layer-popup")
              , s = i.attr("id");
            e.preventDefault(),
            $.cookie(s, "1", {
                expires: 1
            }),
            t(i)
        }),
        $(".px-layer-popup .btn-normal-close").on("click", function(e) {
            let i = $(this).closest(".px-layer-popup");
            e.preventDefault(),
            t(i)
        })
    }
    )();

    /* AOS (스크롤시 transition 효과 라이브러리) */
    AOS.init({
        duration: 1200,
        // once: true 이 옵션은 스크롤 효과를 최초 한번만 실행합니다. 
    });

    
    $(".text-box").eq(0).addClass("on");
    

    /* 메인 슬라이드 swiper */
    var main_swiper = new Swiper(".main-swiper", {
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        speed: 800,
        loop: true,
        effect: "creative",
        creativeEffect: {
            prev: {
                translate: [0, 0, -400],
            },
            next: {
                translate: ["100%", 0, 0],
            },
        },
        navigation: {
            nextEl: ".main-slide .swiper-button-next",
            prevEl: ".main-slide .swiper-button-prev",
        },
        pagination: {
            el: ".main-slide .swiper-pagination",
            type: "fraction",
            clickable: true,
            formatFractionCurrent: function (number) {
                return ('0' + number).slice(-2);
            },
            formatFractionTotal: function (number) {
                return ('0' + number).slice(-2);
            },
        },
    });
    main_swiper.on('slideChange', function (e) {
        var idx = e.realIndex+1;
        $(".text-box").removeClass("on");
        $(".text-box[data-slide='"+idx+"']").addClass("on");
    });
    /* 메인 슬라이드 PC/모바일 이미지 전환 */
    function mainSlideImageSet() {
        let imgs = $(".main-slide-img");
        if (!imgs[0].hasAttribute("data-src")) {
            return false;
        }
        if (window.innerWidth <= 1200 && !$(imgs[0]).hasClass("mb")) {
            imgs.each((i, el) => {
                var pcSrc = el.src;
                el.src = el.getAttribute('data-src');
                el.setAttribute('data-src', pcSrc);
                el.className = 'main-slide-img mb';
            });
        } else if (this.window.innerWidth > 1200 && $(imgs[0]).hasClass("mb")) {
            imgs.each((i, el) => {
                var mobileSrc = el.src;
                el.src = el.getAttribute('data-src');
                el.setAttribute('data-src', mobileSrc);
                el.className = 'main-slide-img';
            });
        }
    }
    mainSlideImageSet();
    window.addEventListener('resize', mainSlideImageSet);

    
    /* 제품소식 게시판 추출 */
    function newsBoardExtraction(_id) {
        if ($(_id+"table.article-list").length==0) {return;}

        let gl = $(_id+"table.article-list > tbody > tr");
        let boards = [];
        gl.each((i, el) => {
            let a = $(el).find(".board_output_gallery_img > a");
            let t = $(el).find("tr:last-child > td");
            let href = a.attr("href");
            let src = a.find("img").attr("src");
            let title_tag = t.find(".board_output_gallery_subject a");
            let desc_tag = t.find(".board_output_gallery_description");
            let title = title_tag.text().trim();
            let desc = desc_tag.text().trim();
            title_tag.remove();
            desc_tag.remove();
            let category = t.text().trim();
            boards.push({category: category, title: title, desc: desc, href: href, src: src});
        });
        $(_id+"table.article-list").remove();
        
        let code = '';
        boards.forEach((board) => {
            code += '<div class="swiper-slide"><a href="'+board.href+'">';
            code += '<img class="news-slide-img" src="'+board.src+'">';
            if (board.category.trim().length > 0) {
                code += '<p class="font-product-s-2-SB">'+board.category+'</p>'
            }
            if (board.title.trim().length > 0) {
                code += '<h3 class="font-product-m-1-SB">'+board.title+'</h3>';
            }
            if (board.desc.trim().length > 0) {
                code += '<p class="font-product-s-2">'+board.desc+'</p>';
            }
            code += '</a></div>';
        });
        $(_id+".news-swiper .swiper-wrapper").html(code);
    }
    function setNewsSwiper(){
        let news = $(".news");
        $.each(news, function(i, dom) {
            var dom_id = "#"+dom.id+" ";

            newsBoardExtraction(dom_id);
            var news_swiper = new Swiper(dom_id+".news-swiper", {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 20,
                navigation: {
                    nextEl: dom_id+".swiper-button-next",
                    prevEl: dom_id+".swiper-button-prev",
                },
                scrollbar: {
                    el: dom_id+'.swiper-scrollbar',
                    draggable: true,
                },
                breakpoints: {
                    480: {
                        slidesPerView: 2,
                        slidesPerGroup: 2,
                    },
                    768: {
                        slidesPerView: 3,
                        slidesPerGroup: 3,
                    },
                    1100: {
                        slidesPerView: 4,
                        slidesPerGroup: 4,
                    }
                },
            });
        });
    }
    setNewsSwiper();
    


    /* 이벤트 게시판 추출 */
    function eventBoardExtraction(_id) {
        // 코딩형 썸네일 
        if ($(_id+"table.board_output").length==0) {
            let imgs = $(_id+".preview-box .slide-img");
            let thumb = '';
            imgs.each((i, el) => {
                thumb += '<div class="swiper-slide"><img class="thumb-img" src="'+el.src+'"></div>';
            });
            $(_id+".event-swiper-thumb .swiper-wrapper").html(thumb);

        // 게시판 연동형 슬라이드+썸네일 
        } else {
            let vl = $(_id+"table.board_output table.board_output > tbody > tr > td");
            if (vl.length == 0) {return;}
            let boards = [];
            vl.each((i, el) => {
                let imgTag = $(el).find(".board_output_gallery_img");
                let tdTag = $(el).find("tr:last-child > td");
    
                let href = imgTag.find("a").attr("href");
                let src = imgTag.find("img").attr("src");
                let title = tdTag.find(".board_output_gallery_subject").text().trim();
                let desc = tdTag.find(".board_output_gallery_description").text();
                
                boards.push({title: title, desc: desc, href: href, src: src});
            });
            $(_id+"table.board_output").remove();
            
            let code = '';
            let thumb = '';
            boards.forEach((board) => {
                code += '<div class="swiper-slide"><a href="'+board.href+'">';
                code += '<img class="slide-img" src="'+board.src+'">';
                code += '<div class="hover-bg"><i class="bi bi-arrow-right"></i></div>';
                code += '<div class="hover-text">';
                code += '<div class="font-event-l">'+board.title+'</div>';
                code += '<div class="font-event-s br-mb-none">'+board.desc+'</div>';
                code += '</div></a></div>';
    
                thumb += '<div class="swiper-slide"><img class="thumb-img" src="'+board.src+'"></div>';
            });
            
            $(_id+".event-swiper .swiper-wrapper").html(code);
            $(_id+".event-swiper-thumb .swiper-wrapper").html(thumb);
        }

    }
    function setEventSwiper(){
        let event = $(".event");
        $.each(event, function(i, dom) {
            var dom_id = "#"+dom.id+" ";

            eventBoardExtraction(dom_id);
            var event_swiper_thumb = new Swiper(dom_id+".event-swiper-thumb", {
                spaceBetween: 10,
                slidesPerView: "auto",
                freeMode: true,
                watchSlidesProgress: true,
            });
            var event_swiper = new Swiper(dom_id+".event-swiper", {
                spaceBetween: 10,
                speed: 800,
                navigation: {
                    nextEl: dom_id+".swiper-button-next",
                    prevEl: dom_id+".swiper-button-prev",
                },
                thumbs: {
                    swiper: event_swiper_thumb,
                },
            });
        });
    }
    setEventSwiper();

});