/*
 * Name     : sub.js
 * Version  : 1.0.0
 * Product  : prime05
 * Author   : 1px studio
 * Date     : 2025.09.22
 * Desc     : 테라커피 new, popup board, find map 추가 
---------------------------------------------------
*/
$(function() {
    
    // script break in main page
    if (document.getElementById("isIndex")!=null) { return; }

    // global variables
    // init
    navigation_init();
    zoom_gallery_init();
    masonry_init();
    youtube_gallery_init();
    dropdown_submenu_init();
    newpage_init();
    popup_board_init();
    find_map_init();
    office_map_init();

    // navigation active
    function navigation_init() {
        const currentURL = window.location.href;
        
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function() {
            let $this = $(this);
            if ( currentURL.indexOf($this.find('>a').attr('href')) > -1 ) {
                $this.find('>a').addClass('active');
            }
        });

        if (!$('.breadcrumb-navbar .navdepth-wrapper').length ) return false;
        
        $('.breadcrumb-navbar .navbar-wrapper > li').each(function() {
            let $this = $(this);
            if ( currentURL.indexOf($this.find('>a').attr('href')) > -1 ) {
                let a = $this.find('>a');
                $('.breadcrumb-navbar .navdepth-wrapper').append('<li><a href="'+a[0].href+'">'+a[0].innerText+'</a></li>');
            }
        });
        
    }

    function zoom_gallery_init() {
        $('.zoom-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            closeOnContentClick: false,
            closeBtnInside: false,
            mainClass: 'mfp-with-zoom mfp-img-mobile',
            image: {
                verticalFit: true,
            },
            gallery: {
                enabled: true
            },
            zoom: {
                enabled: true,
                duration: 300, // don't foget to change the duration also in CSS
                opener: function(element) {
                    return element.find('img');
                }
            } 
        });
    }

    function masonry_init() {
        if ( $('.masonry-group').length ) {
            const masonryGroup = $('.masonry-group');

            masonryGroup.imagesLoaded(function() {
                masonryGroup.isotope({
                    itemSelector: '.gallery-item',
                    columnWidth: '.grid-sizer',
                    masonry: {
                        gutter: 20
                    }
                });
            });

            $('.category-button-wrapper .button-filter').on('click', (e) => {
                e.preventDefault();
                let $this = $(e.currentTarget);
                let filterValue = $this.data('filter');

                $('.category-button-wrapper .button-filter').removeClass('active');
                $this.addClass('active');
                masonryGroup.isotope({ filter: filterValue });
            });
        }
    }

    function youtube_gallery_init() {
        const modal = $('#youtubeModal');
        const videoFrame = modal.find('.youtube-wrapper>iframe');
        const videoString = 'https://www.youtube.com/embed/';

        $('.play-youtube').on('click', (e) => {
            e.preventDefault();
            let $this = $(e.currentTarget);
            let videoID = $this.attr('href').split('v=')[1];

            modal.modal('show');
            videoFrame.attr('src', videoString + videoID);
        });

        modal.on('hidden.bs.modal', () => {
            videoFrame.attr('src', '');
        });
    }

    function dropdown_submenu_init() {
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        let menuName = [];
        let menuLink = [];
        let currentTitle = '';
        let html = '';

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function () {
            let el = $(this);
            
            menuName.push($.trim(el.find('>a').text()));
            menuLink.push(el.find('>a').attr('href'));

            if ( el.find('>a').hasClass('active') ) currentTitle = $.trim(el.find('>a').text());
        });

        html = `
            <div class="dropdown-wrapper d-md-none">
                <div class="dropdown">
                    <a class="button-dropdown" href="javascript:void(0)" role="button" data-bs-toggle="dropdown" aria-expanded="false">${currentTitle}</a>

                    <div class="dropdown-menu">
        `;

        for ( let i = 0; i < menuName.length; i++ ) {
            html += `<a class="dropdown-item" href="${menuLink[i]}">${menuName[i]}</a>`;
        }

        html += `
                    </div>
                </div>
            </div>`;

        $('.breadcrumb-navbar .container-xl').append(html);
    }

    // new page
    function newpage_init() {
        if ( !$('section.new-page').length ) return false;

        var poster_swiper_thumb = new Swiper(".poster-swiper-thumb", {
            spaceBetween: 10,
            slidesPerView: 3,
            watchSlidesProgress: true,
            pagination: {
                el: ".poster-swiper-thumb .swiper-pagination",
                clickable: true,
                bulletClass: "tera-bullet",
                bulletActiveClass: "tera-bullet-active"
            },
            breakpoints: {
                768: {
                    slidesPerView: 4,
                    spaceBetween: 14,
                },
            },
        });
        var poster_swiper = new Swiper(".poster-swiper", {
            spaceBetween: 0,
            speed: 800,
            autoplay: {
                delay: 4500,
                disableOnInteraction: false,
            },
            thumbs: {
                swiper: poster_swiper_thumb,
            },
        });

        var newmenu_swiper = new Swiper(".newmenu-swiper", {
            spaceBetween: 10,
            slidesPerView: 1,
            pagination: {
                el: ".newmenu-swiper .swiper-pagination",
                clickable: true,
                bulletClass: "tera-bullet",
                bulletActiveClass: "tera-bullet-active"
            },
            breakpoints: {
                768: {
                    slidesPerView: 3,
                    spaceBetween: 14,
                },
            },
        });
    }

    // drink, dessert page
    function popup_board_init() {
        if ( !$('section.popup-board').length ) return false;
        let articles = $("section.popup-board table.photo-article-list table table");
        let html = '<div class="row tera mx-n2 mx-md-n3">';
        window.factorArray = [];
        articles.each(function(idx, article){
            let src = $(article).find("img")[0].src;
            let href = $(article).find("a")[0].href;
            let title = $(article).find(".gallery_title").text();
            let content = $(article).find(".gallery_cont").text();
            let fonts = $(article).find(".gallery_etc font");
            let factors = [];
            fonts.each(function(){
                let text = $(this).text().split(" : ");
                factors.push({"name": text[0], "value": text[1]});
            });
            fonts.remove();
            window.factorArray.push(factors);
            let eng = $(article).find(".gallery_etc").text().replace(/[\t\,\[\]\n]/ig, '');
            eng = eng.trim().replace('이름 : ', '');
            html += `<div class="col-12 col-sm-6 col-lg-3 col-photo p-2 px-md-2">
                        <div class="article-card" data-bs-toggle="modal" data-bs-target="#popupBoardModal" data-tera-idx="${idx}" data-cont="${content}" data-eng-name="${eng}">
                            <figure>
                                <img src="${src}" alt="${title}">
                                <figcaption>
                                    <h4>${title}</h4>
                                </figcaption>
                            </figure>
                        </div>
                    </div>`;
        });
        html += '</div>';

        $("section.popup-board .article-wrapper").empty().append(html);

        $("section.popup-board .article-card").on("click", function(e){
            let idx = $(this).data("teraIdx");
            let factors = window.factorArray[idx];
            let src = $(this).find("img")[0].src;
            let title = $(this).find("h4").text();
            let engname = $(this).data("engName");

            $("#popupBoardModal").find(".factor-wrapper img")[0].src = src;
            $("#popupBoardModal").find(".name-box h6").text(title);
            $("#popupBoardModal").find(".name-box .eng").text(engname);
            
            let html = "";
            factors.forEach(function(factor, i){
                if (factor.name!="카테고리") {
                    if (factor.name=="설명글") {
                        $("#popupBoardModal").find(".name-box .desc").text(factor.value);
                    } else {
                        html += `<div class="col-12 col-sm-6">
                            <label for="val${i}">${factor.name}</label>
                            <input type="text" readonly class="form-control" id="val${i}" value="${factor.value}">
                        </div>`;
                    }
                }
            })
            $("#popupBoardModal").find(".factor-box .row").html(html);
        });
        $("#popupBoardModal .btn-close").on("click", function(){
            $("#popupBoardModal").modal("hide");
        })
    }

    
    
    // find page
    function find_map_init() {
        if ( !$('section.map-type').length ) return false;

        let mapList = $(".board-gallery.map-type .photo-article-list table table");
        let latList = [];
        let infoList = [];
        let html = '<div class="accordion" id="shopAccordion">';
        mapList.each((i, _this) => {
            let name = $(_this).find(".gallery_title").text();
            let src = $(_this).find("img")[0].src;
            let fonts = $(_this).find("font");
            let addr = "";
            let phone = "";
            let time = "";
            let regex = new RegExp(/\[[0-9.\,\s]+\]/g);
            fonts.each(function(j, font){
                let split = $(font).text().split(" : ");
                let lat_test = regex.exec(split[1]);
                if (lat_test && lat_test[0]) {
                    let ll = lat_test[0].slice(1, lat_test[0].length-1);
                    latList.push(ll);
                } else if (j==0) {
                    addr = split[1];
                } else if (j==1) {
                    phone = split[1];
                } else if (j==2) {
                    time = split[1];
                }
            });
            infoList.push({name: name, src: src, addr: addr, phone: phone, time: time});
            html += `<div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${i}" aria-expanded="false" aria-controls="collapse${i}">
                                <div class="shop-name">${name}</div>
                                <div class="shop-addr">${addr}</div>
                            </button>
                        </h2>
                        <div id="collapse${i}" class="accordion-collapse collapse" data-bs-parent="#shopAccordion">
                            <div class="accordion-body">
                                <div class="shop-img"><img src="${src}" alt="${name}"></div>
                                <div class="shop-info">
                                    <p><strong>전화번호</strong>${phone}</p>
                                    <p><strong>운영시간</strong>${time}</p>
                                </div>
                            </div>
                        </div>
                    </div>`;
        });
        html += '</div>';
        $(".article-wrapper").html(html);

        // 지도 
        let map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(37.572283, 126.869909),
            zoom: 12
        });

        latList.forEach((ll, i) => {
            let latLng = ll.replaceAll(" ", "").split(",");

            let pos = new naver.maps.LatLng(latLng[0], latLng[1]);
            let marker = makeMarker(map, pos);
            let contentString = makeContentString(infoList[i]);
            let infowindow = new naver.maps.InfoWindow({
                content: contentString
            });
            
            naver.maps.Event.addListener(marker, "click", function(e) {
                if (infowindow.getMap()) {
                    infowindow.close();
                } else {
                    infowindow.open(map, marker);
                }
            });
            infowindow.open(map, marker);
        });
        
        function makeContentString(obj) {
            return `<div class="map-info">
                        <div class="info-img">
                            <img src="${obj.src}">
                        </div>
                        <h4>${obj.name}</h4>
                        <div class="info-txt">
                            <p class="addr">${obj.addr}</p>
                            <p>${obj.phone}</p>
                            <p>${obj.time}</p>
                        </div>
                    </div>`;
        }
    }

    function makeMarker(map, position) {
        let HOME_PATH = $("#tplCode").val();
        let ICON_SPRITE_IMAGE_URL = HOME_PATH +'/img/onepixel/images/sub/tera-pin.png';
        let marker = new naver.maps.Marker({
            map: map,
            position: position,
            icon: {
                url: ICON_SPRITE_IMAGE_URL,
                size: new naver.maps.Size(65, 64), // 이미지 크기
                origin: new naver.maps.Point(0, 0), // 스프라이트 이미지에서 클리핑 위치
                anchor: new naver.maps.Point(32, 32), // 지도상 위치에서 이미지 위치의 offset
            }
        });
        return marker;
    }

    // map page
    function office_map_init() {
        if ( !$('section.location').length ) return false;

        let map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(37.501551, 126.791679),
            zoom: 15
        });
        let pos = new naver.maps.LatLng(37.501551, 126.791679);
        let marker = makeMarker(map, pos);
    }
});