/* 時間差判定範例 例 01 ==================
==================================
==================================*/
const currentTime = new Date();

/* flat-pickr 設定*/
config = {
  enableTime: true, //可選時與分
  dateFormat: "Y-m-d H:i",
  time_24hr: true, //24 時制
  minuteIncrement: 15, //分鐘每次選擇間隔單位
  allowInput: true, //可輸入控制
  minDate: "today", //可選最小時間
  maxDate: currentTime.setMonth(currentTime.getMonth() + 1), //可選最大時間
  onChange: function (selectedDates, dateStr, instance) {
    checkDateTime(dateStr, instance);
    console.log(
      `例 01：你現在點選的是 ${instance.input.id}，時間為 ${dateStr}`
    );
  }
};

flatpickr(".dateSelector", config);

/* 操作 */
const dateAlert = document.querySelector(".dateAlert");

let startDateValue = null;
let endDateValue = null;

function checkDateTime(dateStr, instance) {
  const elementId = instance.input.id;

  if (elementId === "startDate") {
    startDateValue = dateStr;
  } else {
    endDateValue = dateStr;
  }

  if (startDateValue > endDateValue) {
    dateAlert.classList.remove("d-none");
  } else {
    dateAlert.classList.add("d-none");
  }
}

/* 時間差判定範例 例 02 ==================
==================================
==================================*/
/* flat-pickr 設定*/
config = {
  enableTime: true, //可選時與分
  dateFormat: "Y/m/d H:i", //時間格式
  dateFormat: "Y-m-d H:i",
  time_24hr: true, //24 時制
  minuteIncrement: 15, //分鐘每次選擇間隔單位
  allowInput: true, //可輸入控制
  minDate: moment().format("YYYY/MM/DD"), //可選最小時間，搭配 moment.js 使用
  maxDate: moment().add(1, "months").format("YYYY/MM/DD") //可選最大時間，搭配 moment.js 使用
};

flatpickr(".dateSelector2", config);

/* 操作 */
const startDate2 = document.getElementById("startDate2");
const endDate2 = document.getElementById("endDate2");
const dateAlert2 = document.querySelector(".dateAlert2");

startDate2.addEventListener("change", checkDateTime2);
endDate2.addEventListener("change", checkDateTime2);

function checkDateTime2() {
  const startDateValue = moment(startDate2.value, "YYYY/MM/DD HH:mm");
  const endDateValue = moment(endDate2.value, "YYYY/MM/DD HH:mm");

  if (startDateValue.isValid() && endDateValue.isValid()) {
    //計算時間間距，以小時為單位
    const diffTime = endDateValue.diff(startDateValue, "hours");

    if (diffTime < 0) {
      dateAlert2.classList.remove("d-none");
    } else {
      dateAlert2.classList.add("d-none");
    }
  }
}

/* 傳值範例 ==================
==================================
==================================*/
/* flat-pickr 設定 */
const Ainput = flatpickr("#Ainput", {
  enableTime: true, //可選時與分
  dateFormat: "Y/m/d H:i", //時間格式
  time_24hr: true, //24 時制
  minuteIncrement: 15, //分鐘每次選擇間隔單位
  onChange: function (selectedDates, dateStr) {
    //selectedDates 是陣列，內容為選定日期時間 ISO 8601 格式
    //dateStr 是透過 flatpickr 格式化時間的 selectedDated[0]
    console.log(selectedDates);
    console.log(`你點擊的時間是 ${dateStr}`);
  }
});
const Binput = flatpickr("#Binput", {
  enableTime: true, //可選時與分
  dateFormat: "Y/m/d H:i", //時間格式
  time_24hr: true, //24 時制
  minuteIncrement: 15 //分鐘每次選擇間隔單位
});

/* 操作 */
const btnSendTime = document.getElementById("sendTime");
btnSendTime.addEventListener("click", function () {
  // 獲取 Ainput 的值，得到 ISO 8601 格式的時間字串
  const selectedDate = Ainput.selectedDates[0];

  if (selectedDate) {
    // 設定 Binput 的值為 Ainput 的值
    Binput.setDate(selectedDate);
  }
});