/*
 * Name     : main.js
 * Version  : 1.1.0
 * Author   : 1px studio
 * Product  : prime03
 * Date     : 2024-09-26
 * Desc     : multiple section (product/blog swiper, notice)
 * -------------------------------------------------
 */
$(function(){
    /* PRIME COMMON : s */
    // 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)
        })
    }
    )();
    /* PRIME COMMON : e */



    /* 스크롤 시 이벤트 */
    gsap.registerPlugin(ScrollTrigger);
    let bannerGsap = gsap.timeline();
    bannerGsap.to(".banner-text .word-wrap .word", {scrollTrigger: {trigger: ".banner-text", scrub:3, start: "0% 80%", end: "100% 80%"}, transform: "translateY(0px)", opacity: 1, duration: 1, stagger: 0.1, ease: "power2.out"});


    /* MAIN SLIDE swiper */
    function main_slider() {
        const progressCircle = document.querySelector(".main-slide .autoplay-progress svg.fill");
        const autoplayDelay = 3500;
        let main_swiper = new Swiper(".main-swiper", {
            direction: "vertical",
            speed: 1000,
            loop: true,
            slidesPerView: 1,
            spaceBetween: 0,
            allowTouchMove: false,
            centeredSlides: true,
            navigation: {
                nextEl: ".main-slide .swiper-button-next",
                prevEl: ".main-slide .swiper-button-prev",
            },
            pagination: {
                el: ".main-slide .swiper-pagination",
            },
            navigation: {
                nextEl: ".main-slide .m-next",
                prevEl: ".main-slide .m-prev",
            },
            autoplay: {
                delay: autoplayDelay,
                disableOnInteraction: false
            },
            on: {
                init : function () {
                    $('.main-swiper').addClass('load-init');
                    $(".main-slide .swiper-pagination").append('<div class="swiper-pause"><i class="bi bi-pause"></i></div>');
                },
                autoplayTimeLeft(swiper, time, percentage) {
                    progressCircle.style.setProperty("--progress", 1-percentage);
                    
                },
                slideChange: function(swiper) {
                    for (let i=0; i < swiper.slides.length; i++) {
                        let index = swiper.activeIndex==i ? 0 : swiper.activeIndex-i;
                        let half_height = swiper.height * 0.5;
                        let translate = index * half_height;
                        swiper.slides[i].querySelector('.main-slide-bg-wrap').style.transform = 'translate3d(0, ' + translate + 'px, 0)';

                        $('.main-swiper').removeClass('load-init');
                    }
                    $(".swiper-pause").removeClass("stop");
                },
                touchStart: function(swiper) {
                    for (let i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = '';
                    }
                },
                setTransition: function(swiper, speed) {
                    for (let i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = speed + 'ms';
                        swiper.slides[i].querySelector('.main-slide-bg-wrap').style.transition = speed + 'ms';
                    }
                },
            }
        });
        $(".swiper-pause").on("click", function(e){
            $(this).toggleClass("stop");
            if ($(this).hasClass("stop")) {
                main_swiper.autoplay.pause();
            } else {
                main_swiper.autoplay.resume();
            }
        });
    }
    main_slider();
    

    /* product 게시판 추출 */
    function product_extraction(_id) {
        if ($(_id+".article-list").length == 0) return;
        let list = $(_id+".article-list > tbody > tr > td");
        let html = `<div class="swiper-wrapper">`;
        let aos_delay = 0;
        list.each(function(){
            let href = $(this).find("a").attr("href");
            let src = $(this).find(".board_output_imgs").attr("src");
            let subject_tag = $(this).find(".board_output_gallery_subject a");
            let desc_tag = $(this).find(".board_output_gallery_description");
            let td = $(this).find("tr:last-child > td");
            let subject = subject_tag.text().trim();
            let desc = desc_tag.text().trim();
            subject_tag.remove();
            desc_tag.remove();
            let category = td.text().trim();
            html += `
            <div class="p-item swiper-slide">
                <a href="${href}" class="p-link">
                    <img src="${src}" alt="${subject}" data-aos="fade-zoom-in" data-aos-delay="${aos_delay}" data-aos-easing="ease-out-cubic">
                    <div class="p-text-wrap">
                        <h4 class="p-title ellipsis-1">${subject}</h4>
                        <span class="p-bar"></span>
                        <p class="p-text ellipsis-2">${desc}</p>
                        <p class="p-date">#${category}</p>
                    </div>
                </a>
            </div>`;
            aos_delay += 150;
        });
        html += '</div>';
        $(_id+".product-swiper").html(html);
        $(_id+".article-list").remove();
    }

    /* PRODUCT swiper 슬라이드 */
    function set_product_swiper() {
        let product_list = $(".product");
        product_list.each(function(){
            let product_id = "#"+this.id+" ";
            product_extraction(product_id);

            new Swiper(product_id+".product-swiper", {
                slidesPerView: "auto",
                spaceBetween: 15,
                slidesOffsetAfter: 15,
                resizeObserver: false,
                pagination: {
                    el: product_id+".swiper-pagination",
                    type: "progressbar",
                },
                navigation: {
                    nextEl: product_id+".p-navi-next",
                    prevEl: product_id+".p-navi-prev",
                    disabledClass: "p-navi-disabled",
                },
            });
        })
    }
    set_product_swiper();
    
    // 메인 비즈니스 섹션 슬라이드

    var business_slide = new Swiper(".main-business-swiper", {
        slidesPerView: "auto",
        spaceBetween: 50,
        centeredSlides: true,
        loop: true,
        autoplay: {
            delay: 3500,
            disableOnInteraction: false,
        }
      });

    
    /* blog 게시판 추출 */
    function blog_extraction(_id) {
        if ($(_id+".article-list").length == 0) return;

        let list = $(_id+".article-list tr");
        let html = ``;
        let aos_delay = 0;
        list.each(function(i){
            let href = $(this).find("a").attr("href");
            let src = $(this).find(".board_output_imgs").attr("src");
            let subject = $(this).find("td.bd_out1").text().trim();
            let desc = $(this).find("td").eq(2).text().trim();
            let date = $(this).find("td").eq(3).text();
            let category = $(this).find("td").last().text();
            let aos = i < 4 ? `data-aos="fade-zoom-in" data-aos-delay="${aos_delay}" data-aos-easing="ease-out-cubic"` : '';
            html += `
            <div class="b-item col-3 swiper-slide">
                <a href="${href}" class="b-link">
                    <div class="b-img-wrap" ${aos}>
                        <img src="${src}" alt="${subject}">
                        <div class="cate">${category}</div>
                    </div>
                    <div class="b-text-wrap">
                        <h4 class="b-title ellipsis-1">${subject}</h4>
                        <p class="b-text ellipsis-3">${desc}</p>
                        <p class="date">${date}</p>
                        <p class="more">Read more</p>
                    </div>
                </a>
            </div>`;
        });
        $(_id+".blog-swiper .swiper-wrapper").empty().html(html);
        aos_delay += 150;
    }
    

    /* BLOG swiper 슬라이드 */
    function set_blog_swiper() {
        let blog_list = $(".blog");
        blog_list.each(function(){
            let blog_id = "#"+this.id+" ";
            
            blog_extraction(blog_id);
            new Swiper(blog_id+".blog-swiper", {
                slidesPerView: 1,
                spaceBetween: 0,
                resizeObserver: false,
                pagination: {
                    el: blog_id+".swiper-pagination",
                    type: "progressbar",
                },
                navigation: {
                    nextEl: blog_id+".b-navi-next",
                    prevEl: blog_id+".b-navi-prev",
                    disabledClass: "b-navi-disabled",
                },
                breakpoints: {
                    480: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    990: {
                      slidesPerView: 4,
                      spaceBetween: 15,
                    },
                },
            });
        });
    }
    set_blog_swiper();


    /* 공지사항 추출 */
    function init_notice() {
        if ($(".notice .article-list").length == 0) return;

        let notice_list = $(".notice");
        notice_list.each(function(){
            let list = $(this).find(".article-list tr");
            let html = "";
            let aos_delay = 0;
            list.each(function(i){
                let a = $(this).find("a");
                let href = a.attr("href");
                let subject = a.text().trim();
                let date = $(this).find("td").eq(2).text();
                let desc = $(this).find("td").last().text();
                let open = i == 0 ? "open" : "";
                let line = i == 0 ? "n-line-1" : "n-line-2";
                html += `
                <div class="row ${line} pt-30">
                    <div class="col-sm-2 col-3">
                        <p class="n-date">${date}</p>
                    </div>
                    <div class="col-lg-9 col-sm-8 col-6">
                        <h4 class="n-title pb-30">${subject}</h4>
                        <p class="n-text pb-30 ${open}">${desc}</p>
                    </div>
                    <div class="col-lg-1 col-sm-2 col-3 text-center">
                        <a href="${href}" class="n-more">MORE +</a>
                    </div>
                </div>`;
            });
            $(this).find(".tbl").html(html);
            $(this).find(".article-list").remove();
            aos_delay += 150;
        });
    }
    init_notice();

    /* NOTICE open */
    $("section.notice .n-title").on("click", function(e){
        $(this).next(".n-text").toggleClass("open");
    });


    /* PRIME05 - product board + slide */
    function productBoardExtraction(_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">';
            code += '<a href="'+board.href+'">';
            code += '<div class="product-img">';
            code += '<img src="'+board.src+'" alt="'+board.title+'">';
            code += '<div class="product-hover">';
            code += '<span>View product</span></div></div>';
            code += '<div class="product-text">';
            code += '<h5 class="product-title">'+board.title+'</h5>';
            code += '</div></a></div>';
        });
        $(_id+".product-swiper .swiper-wrapper").html(code);
    }
    function setProductSwiper(){
        let product = $(".product-prime05");
        $.each(product, function(i, dom) {
            var dom_id = "#"+dom.id+" ";

            productBoardExtraction(dom_id);
            let product_swiper = new Swiper(dom_id+".product-swiper", {
                slidesPerView: 1,
                spaceBetween: 22,
                freeMode: false,
                navigation: {
                    nextEl: dom_id+".swiper-next",
                    prevEl: dom_id+".swiper-prev",
                },
                breakpoints: {
                    480: {
                        slidesPerView: 2,
                    },
                    768: {
                        slidesPerView: 3,
                        freeMode: {
                            enabled: true,
                            sticky: false,
                        },
                    },
                    992: {
                        slidesPerView: 4,
                        freeMode: {
                            enabled: true,
                            sticky: false,
                        },
                    },
                },
            });
        });
    }
    setProductSwiper();

    /* PRIME05 - product swiper mobile buttons */
    $(".product-prime05 .swiper-mobile-buttons button").on("click", function(e){
        if ($(this).hasClass("prev")) {
            $(".product-prime05 .swiper-prev").trigger("click");
        } else {
            $(".product-prime05 .swiper-next").trigger("click");
        }
    });

    function blogBoardExtraction(_id) {
        if ($(_id+"table.article-list").length==0) {return;}

        let gl = $(_id+"table.article-list > tbody > tr");
        let regex = RegExp(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/);
        let boards = [];
        gl.each((i, el) => {
            let a = $(el).find("a");
            let href = a.attr("href");
            let src = a.find("img").attr("src");
            let title = $(el).find(".bd_out1").text().trim();
            let date = $(el).find("td").eq(3).text().trim();
            if (regex.test(date)) {
                date = date.substr(5,5).replace("-", ".");
            }
            
            boards.push({title: title, date: date, href: href, src: src});
        });
        $(_id+"table.article-list").remove();
        
        let code1 = '<div class="col-4"><div class="blog-img" data-aos="fade-up">';
        let code2 = '<div class="col-md-8 col-12"><div class="blog-list" data-aos="fade-up">';

        boards.forEach((board, i) => {
            let active = i==0 ? ' active' : '';
            code1 += '<img class="'+active+'" src="'+board.src+'" alt="'+board.title+'">';
            
            code2 += '<a href="'+board.href+'" class="blog-row'+active+'">';
            code2 += '<img src="'+board.src+'" alt="'+board.title+'">';
            code2 += '<div class="blog-date">'+board.date+'</div>';
            code2 += '<div class="blog-title">'+board.title+'</div>';
            code2 += '<button class="blog-link">More</button></a>';
        });
        code1 += '</div></div>';
        code2 += '</div></div>';
        
        $(_id+".blog-box").html(code1 + code2);
    }
    
    function setBlogSwiper(){
        let blog = $(".blog-prime05");
        $.each(blog, function(i, dom) {
            var dom_id = "#"+dom.id+" ";
            blogBoardExtraction(dom_id);
        });
    }
    setBlogSwiper();


    /* PRIME05 - blog mouseover */
    $(".blog-prime05 .blog-row").on("mouseover", function(e){
        $(this).siblings(".blog-row").removeClass("active");
        $(this).addClass("active");
        let idx = $(this).index();
        console.log("active", idx);
        let imgs = $(this).parents(".blog-prime05").find(".blog-img img");
        imgs.removeClass("active");
        imgs.eq(idx).addClass("active");
    });


    AOS.init({
        duration: 600,
        once: true
    });

});