// Æû¸ÞÀÏ placehold Ãß°¡
$(function() {
    if ($(".tbl_formmail").length > 0) {
        var $form = $(".tbl_formmail");
        $form.find('input[name=name]').attr('placeholder', 'Name');
        $form.find('input[name=name]').attr('class', 'input-border-bottom');
        $form.find('input[name=receiver_email]').attr('placeholder', 'Email');
        $form.find('input[name=receiver_email]').attr('class', 'input-border-bottom');
        $form.find('input[name=title1]').attr('placeholder', 'Subject');
        $form.find('input[name=title1]').attr('class', 'input-border-bottom');
        $form.find('textarea[name=description1]').attr('placeholder', 'Your Message');
        $form.find('textarea[name=description1]').attr('class', 'input-border-bottom');
    }
});




// tbl_formmail_sub1
$(function() {
    if ($(".tbl_formmail_sub").length > 0) {
        var $form = $(".tbl_formmail_sub");
        $form.find('input[name=name]').attr('placeholder', 'Name');
        $form.find('input[name=name]').attr('class', 'big-input');
        $form.find('input[name=receiver_email]').attr('placeholder', 'Email');
        $form.find('input[name=receiver_email]').attr('class', 'big-input');
        $form.find('input[name=title1]').attr('placeholder', 'Subject');
        $form.find('input[name=title1]').attr('class', 'big-input');
        $form.find('input[name=add1]').attr('placeholder', 'Phone Number');
        $form.find('input[name=add1]').attr('class', 'big-input');
        $form.find('textarea[name=description1]').attr('placeholder', 'Your Message');
        $form.find('textarea[name=description1]').attr('class', 'big-input');
    }
});




// tbl_formmail_sub2
$(function() {
    if ($(".tbl_formmail_sub2").length > 0) {
        var $form = $(".tbl_formmail_sub2");

        // ±âÁ¸ placeholder ¼¼Æà (±×´ë·Î µÎ¼Åµµ µÇ°í ÇÊ¿ä ¾øÀ¸¸é »èÁ¦)
        $form.find('input[name=name]').attr('placeholder', '¼ºÇÔ').addClass('input-border-bottom');
        $form.find('input[name=receiver_email]').attr('placeholder', 'À̸ÞÀÏ').addClass('input-border-bottom');
        $form.find('input[name=title1]').attr('placeholder', 'Á¦¸ñ').addClass('input-border-bottom');
        $form.find('input[name=add1]').attr('placeholder', '¿¬¶ôó').addClass('input-border-bottom');
        $form.find('input[name=add3]').attr('placeholder', '¿¹½ÄÀå¼Ò').addClass('input-border-bottom');
        $form.find('input[name=add4]').attr('placeholder', '1¼øÀ§ ÁöÁ¤Ç÷¡³Ê').addClass('input-border-bottom');
        $form.find('textarea[name=description1]').attr('placeholder', '±âŸ¹®ÀÇ»çÇ×').addClass('input-border-bottom');


        // 🔹 ¿¹½ÄÀÏ / ½Ã°£ (add2) ¡æ ±³Ã¼
        var $add2 = $form.find('input[name=add2]');
        if ($add2.length > 0) {
            $add2.replaceWith(`
        <div class="wedding-datetime">
          <label>¿¹½ÄÀÏ</label><br>
          <input type="date" name="wedding_date" class="input-border-bottom"><br><br>
          <label>¿¹½Ä ½Ã°£</label><br>
          <select name="wedding_time" class="input-border-bottom">
            <option value="">-- ½Ã°£ ¼±Åà --</option>
            <option value="10:00">10:00</option>
            <option value="11:00">11:00</option>
            <option value="12:00">12:00</option>
            <option value="13:00">13:00</option>
            <option value="14:00">14:00</option>
            <option value="15:00">15:00</option>
            <option value="16:00">16:00</option>
            <option value="17:00">17:00</option>
            <option value="18:00">18:00</option>
          </select>
        </div>
      `);
        }
    }
});




// tbl_formmail_sub3
$(function() {
    if ($(".tbl_formmail_sub3").length > 0) {
        var $form = $(".tbl_formmail_sub3");
        $form.find('input[name=name]').attr('placeholder', 'Name');
        $form.find('input[name=name]').attr('class', 'input-bg');
        $form.find('input[name=receiver_email]').attr('placeholder', 'Email');
        $form.find('input[name=receiver_email]').attr('class', 'input-bg');
        $form.find('input[name=title1]').attr('placeholder', 'Subject');
        $form.find('input[name=title1]').attr('class', 'input-bg');
        $form.find('input[name=add1]').attr('placeholder', 'Phone Number');
        $form.find('input[name=add1]').attr('class', 'input-bg');
        $form.find('textarea[name=description1]').attr('placeholder', 'Your Message');
        $form.find('textarea[name=description1]').attr('class', 'input-bg');
    }
});




// tbl_formmail_sub4

$(function() {
  if ($(".tbl_formmail_sub4").length > 0) {
    var $form = $(".tbl_formmail_sub4");


    // ¼ºÇÔ
    var $name = $form.find('input[name=name]');
    if ($name.length > 0) {
      $name.replaceWith(`
        <div class="form-group small-gap">
          <label>¼ºÇÔ *</label>
          <input type="text" name="name" class="bg-transparent medium-input">
        </div>
      `);
    }


    // ¿¬¶ôó
    var $phone = $form.find('input[name=add1]');
    if ($phone.length > 0) {
      $phone.replaceWith(`
        <div class="form-group small-gap">
          <label>¿¬¶ôó *</label>
          <input type="tel" name="add1" class="bg-transparent medium-input">
        </div>
      `);
    }


    // À̸ÞÀÏ
    var $email = $form.find('input[name=receiver_email]');
    if ($email.length > 0) {
      $email.replaceWith(`
        <div class="form-group">
          <label>À̸ÞÀÏ *</label>
          <input type="email" name="receiver_email" class="bg-transparent medium-input">
        </div>
      `);
    }



// ¿¹½ÄÀÏ / ½Ã°£ (PC/¸ð¹ÙÀÏ ¸ðµÎ placeholder Ç¥½Ã + ¹ØÁÙ 3µîºÐ)
var $add3 = $form.find('input[name=add3]');
if ($add3.length > 0) {
  $add3.replaceWith(`
    <div class="form-group small-gap wedding-datetime">
      <label>¿¹½ÄÀÏ / ½Ã°£</label>
      <div class="form-group small-gap datetime-flex"> 
        <div class="date-wrapper">
          <input type="date" id="weddingDate" class="medium-input datetime-item">
          <span class="fake-placeholder">¿¬µµ-¿ù-ÀÏ</span>
        </div>
        <select id="weddingHour" class="medium-input datetime-item hour-item">
          <option value="">½Ã</option>
          ${Array.from({length: 24}, (_, i) => `<option value="${i}">${i}½Ã</option>`).join('')}
        </select>
        <select id="weddingMinute" class="medium-input datetime-item minute-item">
          <option value="">ºÐ</option>
          <option value="00">00ºÐ</option>
          <option value="10">10ºÐ</option>
          <option value="20">20ºÐ</option>
          <option value="30">30ºÐ</option>
          <option value="40">40ºÐ</option>
          <option value="50">50ºÐ</option>
        </select>
      </div>
      <input type="hidden" name="add3" id="finalWeddingDate">
    </div>
  `);


  const weddingInput = document.getElementById("weddingDate");
  const weddingHour = document.getElementById("weddingHour");
  const weddingMinute = document.getElementById("weddingMinute");
  const finalWedding = document.getElementById("finalWeddingDate");


  // ½ºÅ¸ÀÏ(±âÁ¸ ½ºÅ¸ÀÏ µ¤¾î¾²±â + fake placeholder)
  if ($("#datePlaceholderStyle").length === 0) {
    $("head").append(`
      <style id="datePlaceholderStyle">
        .datetime-flex { display:flex; gap:10px; align-items:center; }


        /* ´Þ·Â / ½Ã / ºÐ ¸ðµÎ 3µîºÐ */
        .date-wrapper,
        .datetime-item.hour-item,
        .datetime-item.minute-item {
          flex: 1 1 0;
          min-width: 0;
        }


        /* °øÅë ÀÔ·Â ½ºÅ¸ÀÏ */
        .datetime-item {
          background: transparent;
          border: none;
          border-bottom: 1px solid #ddd !important;
          height: 38px;
          line-height: 38px;
          padding: 0 8px;
          box-sizing: border-box;
          font-size: 13px;
          width: 100%;
        }


        /* ´Þ·Â input */
        .date-wrapper { position:relative; }
        .date-wrapper input.datetime-item {
          width:100%;
          -webkit-appearance: none;
          appearance: none;
        }


        /* fake placeholder */
        .date-wrapper .fake-placeholder {
          position: absolute;
          left: 5px;
          top: 40%;
          transform: translateY(-50%);
          color: #000;
          font-size: 13px;
          pointer-events: none;
          display: block;
          z-index: 3;
        }


        /* ÀϺΠWebKit ºê¶ó¿ìÀú ³»ºÎ ÅؽºÆ® ¿µ¿ª ¿ì¼±¼øÀ§ Á¶Á¤ */
        .date-wrapper input[type="date"]::-webkit-datetime-edit { position: relative; z-index: 1; }


        /* ÇÊ¿ä ½Ã ±âº» clear/spinner ¹öÆ° ¼û±è */
        .date-wrapper input[type="date"]::-webkit-clear-button,
        .date-wrapper input[type="date"]::-webkit-inner-spin-button { display: none; }
      </style>
    `);
  }


  const $fake = $(weddingInput).siblings('.fake-placeholder');


  // hidden input ¾÷µ¥ÀÌÆ®
  function updateFinalValue() {
    const date = weddingInput.value;
    const hour = weddingHour.value;
    const minute = weddingMinute.value;
    let finalValue = date || "";
    if (hour || minute) {
      finalValue += (finalValue ? " " : "") + `${hour.toString().padStart(2,"0")}:${(minute || "00")}`;
    }
    finalWedding.value = finalValue;
  }


  // placeholder Ç¥½Ã/¼û±è
  function updatePlaceholder() {
    if (weddingInput.value) {
      $fake.hide();
      weddingInput.style.color = ""; // ³¯Â¥ ÅؽºÆ® Ç¥½Ã
      weddingInput.style.webkitTextFillColor = "";
    } else {
      $fake.show();
      weddingInput.style.color = "transparent"; // fake placeholder º¸¿©ÁÖ±â
      weddingInput.style.webkitTextFillColor = "transparent";
    }
  }


  // À̺¥Æ® ¹ÙÀεù
  weddingInput.addEventListener('input', updatePlaceholder);
  weddingInput.addEventListener('change', function() { updatePlaceholder(); updateFinalValue(); });
  weddingInput.addEventListener('focus', function() { if (this.showPicker) try { this.showPicker(); } catch(e){} });
  weddingInput.addEventListener('blur', updatePlaceholder);
  weddingInput.addEventListener('click', function() { if (this.showPicker) try { this.showPicker(); } catch(e){}; setTimeout(updatePlaceholder,100); });


  weddingHour.addEventListener('change', updateFinalValue);
  weddingMinute.addEventListener('change', updateFinalValue);


  // ÃʱâÈ­
  updatePlaceholder();
  updateFinalValue();
}





    // ¿¹½ÄÀå¼Ò
    var $add4 = $form.find('input[name=add4]');
    if ($add4.length > 0) {
      $add4.replaceWith(`
        <div class="form-group small-gap">
          <label>¿¹½ÄÀå¼Ò</label>
          <input type="text" name="add4" class="bg-transparent medium-input">
        </div>
      `);
    }


    // ÁöÁ¤Ç÷¡³Ê
    var $add5 = $form.find('input[name=add5]');
    if ($add5.length > 0) {
      $add5.replaceWith(`
        <div class="form-group small-gap">
          <label>ÁöÁ¤Ç÷¡³Ê (¾øÀ¸½Ã¸é ¹«°ü ±âÀç ºÎŹµå¸³´Ï´Ù)</label>
          <input type="text" name="add5" class="bg-transparent medium-input">
        </div>
      `);
    }


    // ±âŸ¹®ÀÇ»çÇ×
    var $desc = $form.find('textarea[name=description1]');
    if ($desc.length > 0) {
      $desc.replaceWith(`
        <div class="form-group small-gap">
          <label>±âŸ¹®ÀÇ»çÇ×</label>
          <textarea name="description1" class="bg-transparent medium-textarea"></textarea>
        </div>
      `);
    }



// --- (±âÁ¸ ½ºÅ©¸³Æ® ³»ºÎ) ---
// üũ¹Ú½º ½ºÅ¸ÀÏ ÅëÇÕ (¿¹½ÄÀÏ ¹ÌÁ¤ + °³ÀÎÁ¤º¸ µ¿ÀÇ)
(function() {
  // CSS ÇÑ ¹ø¸¸ Ãß°¡
  if ($("#customCheckboxStyle").length === 0) {
    $("head").append(`
      <style id="customCheckboxStyle">
        /* ÄÁÅ×ÀÌ³Ê Áß¾Ó Á¤·Ä (°³ÀÎÁ¤º¸ µ¿ÀÇ¿ë µî) */
        .checkbox-center {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          color: #000;
        }


        /* Ä¿½ºÅÒ Ã¼Å©¹Ú½º ¶óº§ */
        .custom-checkbox {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          user-select: none;
        }


        /* ½ÇÁ¦ input ¼û±â±â (È­¸é¿¡¼­ ¾È º¸ÀÌ°Ô) */
        .custom-checkbox input[type="checkbox"] {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          margin: 0;
          padding: 0;
        }


        /* µ¿±×¶ó¹Ì ÀεðÄÉÀÌÅÍ */
        .custom-checkbox .indicator {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          border: 1px solid #232323;
          background: #fff;
          display: inline-block;
          position: relative;
          flex-shrink: 0;
        }


        /* üũµÇ¾úÀ» ¶§ ¹è°æ °ËÁ¤ + ³»ºÎ Èò Á¡ */
        .custom-checkbox input[type="checkbox"]:checked + .indicator {
          background: #000;
        }
        .custom-checkbox input[type="checkbox"]:checked + .indicator::after {
          content: "";
          position: absolute;
          width: 7.5px;
          height: 7.5px;
          border-radius: 50%;
          background: #fff;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }


        /* üũ ¶óº§ ÅؽºÆ® (¼±ÅûçÇ×) */
        .custom-checkbox .cb-text {
          font-size: 13px;
          color: #000;
          user-select: none;
        }


        /* ¿¹½ÄÀÏ ¹ÌÁ¤ ¾È³» ÅؽºÆ® À§Ä¡ (±âÁ¸¿¡ ³ÖÀ¸½Å °Í°ú Ãæµ¹ÇÏÁö ¾Ê°Ô) */
        .undecided-text {
          font-size: 13px;
          color: #333;
          margin-bottom: 8px;
        }
      </style>
    `);
  }


  // ---- ¿¹½ÄÀÏ ¹ÌÁ¤ (add6) ó¸® ----
  const $add6 = $form.find("input[name='add6[]']");
  if ($add6.length > 0) {
    // ±âÁ¸ name Á¦°Å(ÀÌ¹Ì Çϼ̴ٸé Áߺ¹ Á¦°ÅµÇÁö ¾ÊÀ½)
    $add6.removeAttr("name");


    $add6.each(function() {
      var $cb = $(this);


      // ·¡ÇÎ & ÀεðÄÉÀÌÅÍ + ÅؽºÆ® »ðÀÔ
      if (!$cb.parent("label.custom-checkbox").length) {
        // label.custom-checkbox ³»ºÎ ±¸Á¶: <label class="custom-checkbox"><input><span class="indicator"></span><span class="cb-text">¿¹½ÄÀÏ ¹ÌÁ¤</span></label>
        $cb.wrap('<label class="custom-checkbox"></label>');
        $cb.after('<span class="indicator"></span><span class="cb-text">¿¹½ÄÀÏ ¹ÌÁ¤</span>');
      }


      // ¿¹Àü ÄÚµåó·³ ¿¹½ÄÀÏ ¹ÌÁ¤ ¾È³» ¹®±¸¸¦ td ¾Õ¿¡ Ãß°¡ (ÀÖÀ¸¸é Áߺ¹ ¹æÁö)
      if ($cb.closest("td").find('.undecided-text').length === 0) {
        $cb.closest("td").prepend('<div class="undecided-text">¿¹½ÄÀÏ ¹ÌÁ¤ÀÏ °æ¿ì üũ ºÎŹµå¸³´Ï´Ù.</div>');
      }
    });


    // ¼û±è Àü¼Û¿ë input (°ª ¼³Á¤)
    if ($form.find("input[name='add6']").length === 0) {
      $form.append('<input type="hidden" name="add6" value="X">');
    }
    const $hiddenAdd6 = $form.find("input[name='add6']");


    // üũ ¿©ºÎ¿¡ µû¶ó °ª ¼³Á¤
    $add6.on("change", function () {
      $hiddenAdd6.val($(this).is(":checked") ? "O" : "X");
    });


    $add6.trigger("change");
  }


$form.find("input[name='com_formmail_check_safe']").each(function() {
    var $cb = $(this);
    var text = "°³ÀÎÁ¤º¸ ¼öÁý ¹× ÀÌ¿ë µ¿ÀÇ";


    if (!$cb.parent("label.custom-checkbox").length) {
        // 1) ¶óº§·Î °¨½Î±â
        $cb.wrap('<label class="custom-checkbox"></label>');


        // 2) ÅؽºÆ® ¸ÕÀú, indicator ´ÙÀ½, üũ¹Ú½º input´Â µÚ·Î
        $cb.after('<span class="indicator"></span>'); // ÀεðÄÉÀÌÅÍ
        $cb.closest('label.custom-checkbox').prepend('<span class="cb-text">' + text + '</span>');


        // 3) label Àüü¸¦ Áß¾ÓÁ¤·Ä div·Î °¨½Î±â
        $cb.closest('label.custom-checkbox').wrap('<div class="checkbox-center"></div>');
    }
});




})();




    // &#128313; CSS µ¿Àû »ðÀÔ (ÅëÇÕ)
    $("head").append(`
      <style>
        /* ³¯Â¥/½Ã°£ ÀÔ·Â flex */
        .datetime-flex {
          display: flex;
          gap: 10px;
          align-items: center;
        }
        .datetime-flex input,
        .datetime-flex select {
          flex: 1;
          height: 38px;
          line-height: 38px;
          padding: 0 5px;
          text-align: left;
        }


        /* placeholder ±Û¾¾ °ËÁ¤ */
        input::placeholder { color: #000 !important; opacity: 1; }


        /* ±âº» form-group ¿©¹é */
        .form-group { margin-bottom: 29px; }
        .form-group.small-gap { margin-bottom: 5px; }
      </style>



    `);
  }
});