$(function () {
  toggleTimeLayer();
});

function toggleTimeLayer() {

  // 시/분 select 옵션 생성
  $(".time_layer_wrap").each(function () {
    const $wrap = $(this);
    createOptions($wrap.find(".hour"), 24, "");
    createOptions($wrap.find(".minute"), 60, "");
  });

  /** 공통 옵션 생성 함수 */
  function createOptions($select, max, unit) {
    $select.empty();
    $select.append(`<option value="">${unit}</option>`);

    for (let i = 0; i < max; i++) {
      const num = i < 10 ? "0" + i : i;
      $select.append(`<option value="${num}">${num}${unit}</option>`);
    }
  }

  // input 클릭 → 레이어 열기/닫기
  $(".time_input").on("click", function () {
    const $wrap = $(this).closest(".time_layer_wrap");
    const $layer = $wrap.find(".time_layer");

    $(".time_layer").not($layer).removeClass("active"); // 다른 레이어 닫기
    $layer.toggleClass("active");
  });

  // "확인" 버튼 클릭 → 값 적용
  $(".time_layer .btn").on("click", function () {
    const $wrap = $(this).closest(".time_layer_wrap");
    const hour = $wrap.find(".hour").val();
    const minute = $wrap.find(".minute").val();

    if (hour === "" || minute === "") {
      alert("시간과 분을 모두 선택해주세요.");
      return;
    }

    $wrap.find(".time_input").val(`${hour}:${minute}`);
    $wrap.find(".time_layer").removeClass("active");
  });

  // 외부 클릭 시 레이어 닫기
  $(document).on("click", function (e) {
    if (!$(e.target).closest(".time_layer_wrap").length) {
      $(".time_layer").removeClass("active");
    }
  });

}