document.addEventListener("DOMContentLoaded", function(){

  const closeButtons = document.querySelectorAll('.popX');
  closeButtons.forEach(button => {
    button.addEventListener('click', () => {
      let modalWrap = button.closest('.modal_wrap');
      if (modalWrap) {
        modalWrap.classList.remove('active');
      }
    });
  });

  const closeBoxButtons = document.querySelectorAll('.popX_box');
  closeBoxButtons.forEach(button => {
    button.addEventListener('click', () => {
      let modalWrapOfform = button.closest('.modal_wrap');
      if (modalWrapOfform) {
        modalWrapOfform.classList.remove('active');
      }
    });
  });

  const scrapElements = document.querySelectorAll(".scrap, .inblock");
  scrapElements.forEach(element => {
    element.addEventListener("click", function(event) {
      console.log('Scrap');
      // element.classList.toggle("active");
      event.preventDefault();
      event.stopPropagation();
    });
  });

  // 'inputBox' 입력 시 테두리 색상 변경
  const inputBoxes = document.querySelectorAll('.inputBox, textarea');
  inputBoxes.forEach(inputBox => {

    // input type이 'text', 'email' 또는 textarea인 경우에만 실행
    if (inputBox.type === 'text' || inputBox.type === 'email' || inputBox.tagName.toLowerCase() === 'textarea') {
      // 페이지 로드 시 이미 값이 있는 경우 테두리 색상 적용
      if (inputBox.value && inputBox.value.trim() !== '') {
        inputBox.style.border = '1px solid #324663';
      }

      // input 이벤트를 감지해서 테두리 색상 변경
      inputBox.addEventListener('input', () => {
        if (inputBox.value.trim() !== '') {
          inputBox.style.border = '1px solid #324663';
        } else {
          inputBox.style.border = '';
        }
      });
    }
  });
  

  // label + input 부모에 li.inputBox일때 active 추가
  $(document).ready(function() {
    $('input[type="checkbox"], input[type="radio"]').each(function() {
      if ($(this).is(':checked')) {
        $(this).closest('.inputBox').addClass('active');
      }
    });

    $('input[type="checkbox"]').on('change', function() {
      if ($(this).is(':checked')) {
        $(this).closest('.inputBox').addClass('active');
      } else {
        $(this).closest('.inputBox').removeClass('active');
      }
    });

    $('input[type="radio"]').on('change', function() {

      $('input[name="' + $(this).attr('name') + '"]').closest('.inputBox').removeClass('active');

      if ($(this).is(':checked')) {
        $(this).closest('.inputBox').addClass('active');
      }
    });
  });

  

  // select에 value값 선택 시 active 추가
  const selects = document.querySelectorAll('select');
  selects.forEach(select => {
      if (select.value.trim() !== '') {
          select.classList.add('active');
      }
  
      select.addEventListener('change', function () {
          if (this.value.trim() !== '') {
              this.classList.add('active');
          } else {
              this.classList.remove('active');
          }
      });
  });
  


  // dateSelector
  $(document).ready(function() {
    $('.dateSelector').on('input change', function() {
      if ($(this).val().trim() !== '') {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });

  // 모달이외에 스크롤 방지
  $(document).ready(function() {
    // 모달이 열릴 때
    $('.modal_wrap').on('addClass', 'active', function() {
      $('body').css('overflow', 'hidden');
    });
  
    // 모달이 닫힐 때
    $('.modal_wrap').on('removeClass', 'active', function() {
      if (!$('.modal_wrap.active').length) {
        $('body').css('overflow', 'auto');
      }
    });
  });


  // input에 num숫자만
  $('.num').on('input', function() {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

$('[id^="war_info"] .active_btn').on('click', function() {
  $(this).closest('[id^="war_info"]').removeClass('active');
});

});