$(function() {
    $('[data-bs-toggle="popover"]').popover({
        trigger: 'click',
        placement: "bottom",
        html: true
    });

    // const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    // const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    $.validator.setDefaults({
        ignore: [], // hidden
        invalidHandler: function (form, validator) { // 커스텀 포커스 핸들링
            if (validator.numberOfInvalids()) {
                if (typeof validator.containers[0] != "undefined") {
                    let id = validator.containers[0].getAttribute("id");
                    let target = document.getElementById(id);
                }
                setTimeout(function () {
                    if (typeof target !== "undefined") {
                        target.parentNode.scrollIntoView();
                    } else {
                        validator.currentForm.parentNode.parentNode.scrollIntoView();
                    }
                }, 1);
            }
        }
    });

    $(".date-picker").datepicker({
        dayViewHeaderFormat: 'YYYY MMMM',
        format: 'YYYY-MM-DD',
        useCurrent: false,
        dateFormat: 'yy-mm-dd',	// 날짜 포맷이다. 보통 yy-mm-dd 를 많이 사용하는것 같다.
        prevText: '이전 달',	// 마우스 오버시 이전달 텍스트
        nextText: '다음 달',	// 마우스 오버시 다음달 텍스트
        closeText: '닫기', // 닫기 버튼 텍스트 변경
        currentText: '오늘', // 오늘 텍스트 변경
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더중 월 표시를 위한 부분
        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더 중 월 표시를 위한 부분
        dayNames: ['일', '월', '화', '수', '목', '금', '토'], // 한글 캘린더 요일 표시 부분
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], // 한글 요일 표시 부분
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], // 한글 요일 표시 부분
        showMonthAfterYear: true, // true : 년 월  false : 월 년 순으로 보여줌
        yearSuffix: '년',
        showButtonPanel: true, // 오늘로 가는 버튼과 달력 닫기 버튼 보기 옵션
        onClose: function(value) {
            let date = getOnlyDigit(value);
            if(date) {
                this.value = moment(date, "YYYY-MM-DD").format("YYYY-MM-DD");
            }else{
                this.value = "";
            }
        }
    });

    layerPopup.init();
});

// 회원 로그아웃
$(document).on("click", "a#logout", function() {
    document.getElementById('logoutForm').submit();
    return false;
});

const layerPopup =
    {
        // 초기화
        init: function () {
            let layerPops = document.getElementsByClassName("layer-pops");
            for (let i in layerPops) {
                let pop = layerPops.item(i);
                if (pop !== null) {
                    let isDisplay = Cookies.get('layerPop_' + pop.dataset.key);
                    if (isDisplay !== 'Y') {
                        pop.style.display = "block";
                        $(pop).draggable({
                            drag: function (e) {
                                e.target.style.transform = "none";
                            },
                        });
                    }
                }
            }
        },

        // 닫기
        close: function(e) {
            e.parentNode.parentNode.style.display = "none";
        },

        // 오늘 하루 안보기
        expire: function(e) {
            let layer = e.parentNode.parentNode;
            let key = layer.dataset.key;
            let second = (Number(layer.dataset.disableHours) / 86400);
            Cookies.set('layerPop_' + key, 'Y', {expires: second});
            layer.style.display = "none";
        }
    };
// 팝업 - 오늘 하루 안보기
$(document).on("click", "#layerPops .layer-pops .btn-closed", function () {
    layerPopup.expire(this);
});
// 팝업 - 닫기
$(document).on("click", "#layerPops .layer-pops .btn-cancel", function () {
    layerPopup.close(this);
});