$(function () {
  if ($(".input_calendar").length > 0) {
    setTimeout(function () {
      calendar();
    }, 100)

  }

  
})

// header, footer 공통 영역 불러오기
window.addEventListener('load', function () {
  var allElements = document.getElementsByTagName('*');
  Array.prototype.forEach.call(allElements, function (el) {
    var includePath = el.dataset.includePath;
    if (includePath) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          header();
          el.outerHTML = this.responseText;

        }
      };
      xhttp.open('GET', includePath, true);
      xhttp.send();
    }
  });
});

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  if ($(".wrap").find("#calendar").length > 0) {
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      titleFormat: function (date) {
        year = date.date.year;
        month = date.date.month + 1;

        return year + "년 " + month + "월";
      },
      locale: "ko",
      buttonText: {
        today: "오늘"
      },
      height: "auto",
      dayCellContent: function (info) {
        var number = document.createElement('a');
        number.classList.add('fc-daygrid-day-number');
        number.innerHTML = info.dayNumberText.replace("일", "");
        if (info.view.type === 'dayGridMonth') {
          return {
            html: number.outerHTML
          };
        }
        return {
          domNodes: []
        }
      },
      events: [{
        title: '조정절차 관련 일정',
        start: '2024-10-15',
      }]
    });
    calendar.render();
  }

});

// 달력팝업
function calendar() {

  // 캘린더 고유 클래스 추가
  $(".input_calendar").not(".start_date,.end_date").each(function (idx, itm) {
    idx += 1;
    $(itm).addClass("input_calendar" + idx);
  });

  $(".start_date").each(function (idx, itm) {
    idx += 1;
    $(itm).addClass("start_date" + idx);
    $(itm).attr("id", "start_date" + idx);
  });

  $(".end_date").each(function (idx, itm) {
    idx += 1;
    $(itm).addClass("end_date" + idx);
    $(itm).attr("id", "end_date" + idx);
    $(itm).find(".duet-date__input").attr("id", "end_date" + idx);
  });

  setTimeout(function () {

    calendarTitle(); // 달력 타이틀
    calednarCaption(); // 달력 caption
  }, 100)



  // input value 값 추가, 검색 시 input value 값 안없어지게.
  var start_duetValue = $("duet-date-picker.start_date").val();
  var end_duetValue = $("duet-date-picker.end_date").val();
  var startcalendar_name = $(".start_date").attr("name");
  var endcalendar_name = $(".end_date").attr("name");

  //달력 입력창 최대 입력 수 10자 제한('.' 포함)
  $("input.duet-date__input").attr("maxlength", "10");

  var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/
  var duetdateleng = $("duet-date-picker").length + 1;

  var calendarNum = [];
  var startDateNum = [];
  var endDateNum = [];
  setTimeout(function () {
    for (var i = 1; i < duetdateleng; i++) {
      calendarNum[i] = document.querySelector(".input_calendar" + i);
      if (calendarNum[i] !== null) {
        calendarNum[i].dateAdapter = {
          parse: function parse() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
            var createDate = arguments.length > 1 ? arguments[1] : undefined
            var matches = value.match(DATE_FORMAT)

            if (matches) {
              return createDate(matches[3], matches[2], matches[1])
            }
          },
          format: function format(date) {
            if (date.getMonth() < 9) {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            } else {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            }
          },
        }

        // 달력 플러그인 실행
        calendarNum[i].localization = {
          placeholder: '날짜 입력',
          selectedDateMessage: 'Selected date is',
          prevMonthLabel: '이전 달 보기',
          nextMonthLabel: '다음 달 보기',
          monthSelectLabel: '달 선택',
          yearSelectLabel: '년도 선택',
          closeLabel: '달력 닫기',
          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
          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월'],
          identifier: "input_date",
          name: "input_date"
        }

        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
        calendarNum[i].addEventListener("duetClose", function (e) {
          startDt = e.target;
          startDtVal = e.target.value;
          startSub = startDtVal.replace(/\-/g, '');
          var inputName = $(this).attr("name");
        });

        setTimeout(function () {
          $("duet-date-picker").not(".start_date,.end_date").find(".duet-date__input").each(function (idx, itm) {
            idx += 1;
            $(itm).attr("name", "input_date" + idx);
            $(itm).attr("id", "input_date" + idx);
          });
          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
        }, 100)
      }



    }

    // 시작날짜

    for (var i = 1; i < duetdateleng; i++) {
      startDateNum[i] = document.querySelector(".start_date" + i);
      if (startDateNum[i] !== null) {
        startDateNum[i].dateAdapter = {
          parse: function parse() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
            var createDate = arguments.length > 1 ? arguments[1] : undefined
            var matches = value.match(DATE_FORMAT)

            if (matches) {
              return createDate(matches[3], matches[2], matches[1])
            }
          },
          format: function format(date) {
            if (date.getMonth() < 9) {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            } else {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            }
          },
        }

        // 달력 플러그인 실행
        startDateNum[i].localization = {
          placeholder: '날짜 입력',
          selectedDateMessage: 'Selected date is',
          prevMonthLabel: '이전 달 보기',
          nextMonthLabel: '다음 달 보기',
          monthSelectLabel: '달 선택',
          yearSelectLabel: '년도 선택',
          closeLabel: '달력 닫기',
          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
          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월'],
          identifier: "start_date",
          name: "start_date"
        }


        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
        startDateNum[i].addEventListener("duetClose", function (e) {
          startDt = e.target;
          startDtVal = e.target.value;
          startSub = startDtVal.replace(/\-/g, '');
          var inputName = $(startDt).attr("id");
          $(".start_date").each(function (idx, itm) {
            $(this).find(".duet-date__input").attr("id", inputName);
            /*$(this).find(".duet-date__input").attr("name", inputName);*/
            $(this).find(".duet-date__input").attr("value", startDtVal);
            /*$(this).find(".duet-date__input").next().attr("name", inputName + "_submit");*/
            $(this).find(".duet-date__input").next().attr("value", startSub);
          });
        });

        //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
        startDateNum[i].addEventListener("duetChange", function (e) {
          startDt = e.target;
          var startDateNum = startDt.id;
          startDateNum = startDateNum.replace("start_date", "");
          startDtVal = e.target.value;
          // var n = i - 1;
          var endDtVal = $(".end_date" + startDateNum).find(".duet-date__input").val();
          endDtVal = endDtVal.replace(/[.]/gi, '');
          startDtVal = startDtVal.replace(/[.]/gi, '');
          if (startDtVal > endDtVal && endDtVal != "") {
            e.target.value = "";
            alert("시작일이 종료일보다 클 수 없습니다.");
          } else {}
        });

        setTimeout(function () {
          $("duet-date-picker.start_date .duet-date__input").each(function (idx, itm) {
            idx += 1;
            $(itm).attr("name", "start_date" + idx);
            $(itm).attr("id", "start_date" + idx);
          });
          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
        }, 100)

        startDateNum[i].addEventListener("duetFocus", function (e) {
          calendarSetting();
        });
      }

    }

    // 종료날짜

    for (var i = 1; i < duetdateleng; i++) {
      endDateNum[i] = document.querySelector(".end_date" + i);
      if (endDateNum[i] !== null) {
        endDateNum[i].dateAdapter = {
          parse: function parse() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
            var createDate = arguments.length > 1 ? arguments[1] : undefined
            var matches = value.match(DATE_FORMAT)

            if (matches) {
              return createDate(matches[3], matches[2], matches[1])
            }
          },
          format: function format(date) {
            if (date.getMonth() < 9) {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat('0', date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            } else {
              if (date.getDate() < 10) {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat('0', date.getDate())
              } else {
                return ""
                  .concat(date.getFullYear(), ".")
                  .concat(date.getMonth() + 1, ".")
                  .concat(date.getDate())
              }
            }
          },
        }

        // 달력 플러그인 실행
        endDateNum[i].localization = {
          placeholder: '날짜 입력',
          selectedDateMessage: 'Selected date is',
          prevMonthLabel: '이전 달 보기',
          nextMonthLabel: '다음 달 보기',
          monthSelectLabel: '달 선택',
          yearSelectLabel: '년도 선택',
          closeLabel: '달력 닫기',
          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
          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월'],
          identifier: "end_date",
          name: "end_date"
        }

        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
        endDateNum[i].addEventListener("duetClose", function (e) {
          endDt = e.target;
          endDtVal = e.target.value;
          endSub = endDtVal.replace(/\-/g, '');
          var inputName = $(this).attr("name");
          console.log(inputName)
          $(".end_date").each(function (idx, itm) {
            $(itm).find(".duet-date__input").attr("id", inputName);
            /*$(itm).find(".duet-date__input").attr("name", inputName);*/
            $(itm).find(".duet-date__input").attr("value", endDtVal);
            /*$(itm).find(".duet-date__input").next().attr("name", inputName + "_submit");*/
            $(itm).find(".duet-date__input").next().attr("value", endSub);
          });
        });

        //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
        endDateNum[i].addEventListener("duetChange", function (e) {
          endDt = e.target;
          endDtVal = e.target.value;
          var endDateNum = endDt.id;
          endDateNum = endDateNum.replace("end_date", "");
          // var n = i - 1
          var startDtVal = $(".start_date" + endDateNum).find(".duet-date__input").val();
          startDtVal = startDtVal.replace(/[.]/gi, '');
          endDtVal = endDtVal.replace(/[.]/gi, '');
          //console.log(startDtVal,endDtVal)
          //console.log("2",startDtVal,endDtVal);
          if (endDtVal < startDtVal) {
            e.target.value = "";
            alert("종료일이 시작일보다 작을 수 없습니다.");
          } else {}
        });

        setTimeout(function () {
          $("duet-date-picker.end_date").each(function (idx, itm) {
            idx += 1;
            /*$(itm).attr("name", "end_date" + idx);*/
            $(itm).attr("id", "end_date" + idx);
          });
          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
        }, 100)

        endDateNum[i].addEventListener("duetFocus", function (e) {
          calendarSetting();
        });
      }

    }

    //input에 value 값 추가
    $(".duet-date__input").focusout(function () {
      var thisVal = $(this).val();
      $(this).closest(".hydrated").attr("value", thisVal);
      $(this).attr("value", thisVal);
      $(this).next('input[type=hidden]').attr("value", thisVal);
      /*var startVal = $('.startDate .duet-date__input').val();
      var endVal = $('.endDate .duet-date__input').val();*/

      var startName, endName;


      if ($(this).closest(".hydrated").is(".start_date")) {
        var startNum = $(this).closest(".start_date").attr("id");
        startNum = startNum.replace("start_date", "");
        var startVal = $('#start_date' + startNum).find('.duet-date__input').val();
        var endVal = $('#end_date' + startNum).find('.duet-date__input').val();
        startName = $('#start_date' + startNum);
        endName = $('#end_date' + startNum);
        calendarMsgKey(this, startVal, endVal, startName, endName);
      } else if ($(this).closest(".hydrated").is(".end_date")) {
        var endNum = $(this).closest(".end_date").attr("id");
        endNum = endNum.replace("end_date", "");
        var startVal = $('#start_date' + endNum).find('.duet-date__input').val();
        var endVal = $('#end_date' + endNum).find('.duet-date__input').val();
        startName = $('#start_date' + endNum).attr("id");
        endName = $('#end_date' + endNum).attr("id");
        calendarMsgKey(this, startVal, endVal, startName, endName);
      }
    });



  }, 10)

  function calendarMsgKey(ipt, startVal, endVal, startName, endName) {
    startVal = startVal.replace(/[-]/gi, '');
    endVal = endVal.replace(/[-]/gi, '');
    if ($(ipt).closest(".input_calendar").is(".start_date") > 0) {
      if (startVal > endVal && $(ipt).closest(".input_calendar").is(".start_date") == true && endVal != "") {
        alert("시작일이 종료일보다 클 수 없습니다.");
        ipt.value = "";
      } else if (startVal > endVal && $(ipt).closest(".input_calendar").is(".end_date") == true && startVal != "") {
        if ($("duet-date-picker.end_date").val() == "") {

        } else {
          alert("종료일이 시작일보다 작을 수 없습니다.");
          ipt.value = "";
        }
      } else {}
    } else {
      if (startVal > endVal && $(ipt).is("#" + startName) == true && endVal != "") {
        alert("시작일이 종료일보다 클 수 없습니다.");
        ipt.value = "";
      } else if (startVal > endVal && $(ipt).is("#" + endName) == true && startVal != "") {
        if ($("duet-date-picker.end_date").val() == "") {

        } else {
          alert("종료일이 시작일보다 작을 수 없습니다.");
          ipt.value = "";
        }
      } else {}
    }

  }

  function dateSetting(objValue) {
    var v = objValue.replace("--", "-");
    //console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
    if (v.match(/^\d{4}$/) !== null) {
      if (event.keyCode == "8") {
        // 백스페이스 키를 누를 때 '.' 안생기게
      } else {
        v = v + '-';
      }
    } else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
      if (event.keyCode == "8") {
        // 백스페이스 키를 누를 때 '.' 안생기게
      } else {
        v = v + '-';
      }
    }

    // '-' 막기
    if (event.keyCode == "190" || event.keyCode == "110") {
      event.preventDefault();
      return v;
    } else {}


    return v;
  }


}


function calendarSetting() {
  $('.calendar_wrap').each(function () {
    $(this).find('.duet-date__input').attr('onkeydown', 'this.value=dateSetting(this.value);');
    $(this).find('.duet-date__input').attr('onblur', 'this.value=dateSetting(this.value);');
  });
}

function dateSetting(objValue) {
  var v = objValue.replace("--", "-");
  //console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
  if (v.match(/^\d{4}$/) !== null) {
    if (event.keyCode == "8") {
      // 백스페이스 키를 누를 때 '.' 안생기게
    } else {
      v = v + '-';
    }
  } else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
    if (event.keyCode == "8") {
      // 백스페이스 키를 누를 때 '.' 안생기게
    } else {
      v = v + '-';
    }
  }

  // '-' 막기
  if (event.keyCode == "190" || event.keyCode == "110") {
    event.preventDefault();
    return v;
  } else {}


  return v;
}

function calednarCaption() {
  // 이전, 다음달 클릭 시 table caption 변경
  $(".duet-date__prev").on("click", function () {
    var monthText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--month").val();
    var yearText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--year").val();
    monthText = Number(monthText) + 1;
    monthText = monthText + "월";
    yearText = yearText + "년 ";
    $(this).closest(".duet-date__dialog-content").find(".duet-date__table caption").remove();
    $(this).closest(".duet-date__dialog-content").find(".duet-date__table").prepend("<caption>" + yearText + monthText + " 달력입니다.</caption>");
  });

  $(".duet-date__next").on("click", function () {
    var monthText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--month").val();
    var yearText = $(this).closest(".duet-date__dialog-content").find(".duet-date__select--year").val();
    monthText = Number(monthText) + 1;
    monthText = monthText + "월";
    yearText = yearText + "년 ";
    $(this).closest(".duet-date__dialog-content").find(".duet-date__table caption").remove();
    $(this).closest(".duet-date__dialog-content").find(".duet-date__table").prepend("<caption>" + yearText + monthText + " 달력입니다.</caption>");
  });
}

function calendarTitle() {
  setTimeout(function () {
    $(".start_date .duet-date__input").attr("title", "시작날짜를 YYYY.MM.DD 형식으로 입력해주세요");
    $(".end_date .duet-date__input").attr("title", "종료날짜를 YYYY.MM.DD 형식으로 입력해주세요");

    //웹접근성>달력 버튼 title추가
    $(".duet-date__input-wrapper .duet-date__toggle").attr("title", "달력팝업 열림");
  }, 100)
}