window.addEventListener('load', function () {

  // 카카오맵
  var geocoder = new kakao.maps.services.Geocoder();

  geocoder.addressSearch('전북특별자치도 전주시 완산구 우전로 321, 202호 (우) 54961', function (result, status) {
    if (status === kakao.maps.services.Status.OK) {
      var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

      var container = document.getElementById('map');
      var options = {
        center: coords,
        level: 3
      };

      var map = new kakao.maps.Map(container, options);

      var marker = new kakao.maps.Marker({
        position: coords
      });
      marker.setMap(map);
    }
  });

  // 메인 배너
  let prevRealIndex = null;

  const mainBanner = new Swiper('.swiper-banner', {
    effect: 'fade',
    fadeEffect: {
      crossFade: true,
    },
    speed: 1000,
    allowTouchMove: true,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-banner .next',
      prevEl: '.swiper-banner .prev',
    },
    pagination: {
      el: ".swiper-banner .pagination",
      type: "fraction",
      formatFractionCurrent: function (number) {
        return ('0' + number).slice(-2);
      },
      formatFractionTotal: function (number) {
        return ('0' + number).slice(-2);
      },
      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span><i></i><span class="' + totalClass + '"></span>';
      }
    },
    on: {
      init: function () {
        progressBar(this, true);
        this.autoplay.stop();
        setTimeout(() => {
          this.autoplay.start();
        }, 2000); // 첫 슬라이드만 추가 대기
        // progressBar(this, true);
      },
      slideChange: function () {
        progressBar(this, false);
      }
    },
    breakpoints: {
      577: {
        allowTouchMove: false,
      }
    }
  });

  function progressBar(swiper, isInit) {
    const progressbar = document.querySelector(".swiper-banner .progressbar-fill");
    if (!progressbar) return;

    const totalSlides = document.querySelectorAll('.swiper-banner .swiper-slide:not(.swiper-slide-duplicate)').length;
    const realIndex = swiper.realIndex;
    const percent = ((realIndex + 1) / totalSlides) * 100;

    const isLoopToStart =
      prevRealIndex !== null &&
      prevRealIndex === totalSlides - 1 &&
      realIndex === 0;

    if (isInit || isLoopToStart) {
      progressbar.style.transition = 'none';
      progressbar.style.width = '0%';
      requestAnimationFrame(() => {
        progressbar.style.transition = 'width 2.5s linear';
        progressbar.style.width = `${percent}%`;
      });
    } else {
      progressbar.style.transition = 'width 2.5s linear';
      progressbar.style.width = `${percent}%`;
    }

    prevRealIndex = realIndex;
  }


  // 상담 과정
  const totalSteps = document.querySelectorAll('.swiper-order .swiper-slide').length;

  const mainOrder = new Swiper('.swiper-order', {
    effect: "fade",
    fadeEffect: { crossFade: true },
    speed: 400,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false
    },
    pagination: {
      el: ".main-sec--order .pagination",
      type: "progressbar"
    },
    on: {
      init: function () {
        updateStepSwitch(this.realIndex);
        updateVerticalProgressbar(this);
      },

      slideChangeTransitionStart: function () {
        updateStepSwitch(this.realIndex);
        updateVerticalProgressbar(this);
      },
    }
  });

  $(".swiper-pagination-custom .swiper-pagination-switch").click(function () {
    const targetIndex = $(this).index();
    mainOrder.slideToLoop(targetIndex);

    updateStepSwitch(targetIndex);
    updateVerticalProgressbar(mainOrder);
  });

  function updateStepSwitch(activeIndex) {
    $(".swiper-pagination-custom .swiper-pagination-switch").each(function (idx) {
      if (idx <= activeIndex) {
        $(this).addClass("active");
      } else {
        $(this).removeClass("active");
      }
    });
  }

  function updateVerticalProgressbar(swiper) {
    const current = swiper.realIndex + 1;
    const percent = (current / totalSteps) * 100;
    const fill = document.querySelector('.main-sec--order .progress-fill');


    const isMobile = window.innerWidth <= 768;

    if (fill) {
      if (isMobile) {
        // 가로형
        fill.style.width = `${percent}%`;
        fill.style.height = `100%`;
      } else {
        // 세로형
        fill.style.height = `${percent}%`;
        fill.style.width = `100%`;
      }
    }
  }

  window.addEventListener('resize', () => {
    updateVerticalProgressbar(mainOrder);
  });

  // const totalSteps = document.querySelectorAll('.swiper-order .swiper-slide').length;

  // const mainOrder = new Swiper('.swiper-order', {
  //   effect: "fade",
  //   fadeEffect: { crossFade: true },
  //   loop: true,
  //   pagination: {
  //     el: ".main-sec--order .pagination",
  //     type: "progressbar"
  //   },
  //   on: {
  //     init: function () {
  //       // 커스텀 스위치 활성화 처리
  //       $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
  //       $(".swiper-pagination-custom .swiper-pagination-switch").eq(this.realIndex).addClass("active");

  //       updateVerticalProgressbar(this);
  //     },
  //     slideChangeTransitionStart : function(){
  //       // 커스텀 스위치 활성화 처리
  //       $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
  //       $(".swiper-pagination-custom .swiper-pagination-switch").eq(this.realIndex).addClass("active");

  //       // 세로 프로그래스바 채우기
  //       updateVerticalProgressbar(this);
  //     },
  //     // slideChange: function () {
  //     //   updateVerticalProgressbar(this);
  //     // }
  //   }
  // });

  // $(".swiper-pagination-custom .swiper-pagination-switch").click(function () {
  //   const targetIndex = $(this).index();
  //   mainOrder.slideToLoop(targetIndex); // loop 고려하여 이동
  //   $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
  //   $(this).addClass("active");

  //   // 프로그래스바 수동 반영
  //   updateVerticalProgressbar(mainOrder);
  // });

  // // 세로 progressbar 업데이트 함수
  // function updateVerticalProgressbar(swiper) {
  //   const current = swiper.realIndex + 1;
  //   const percent = (current / totalSteps) * 100;
  //   const fill = document.querySelector('.main-sec--order .progress-fill');
  //   if (fill) {
  //     fill.style.height = `${percent}%`;
  //   }
  // }
});

function setCookie(key, value, expiredays) {
  var todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);
  document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function getCookie(key) {
  var result = null;
  var cookie = document.cookie.split(';');
  cookie.some(function (item) {
    // 공백을 제거
    item = item.replace(' ', '');

    var dic = item.split('=');

    if (key === dic[0]) {
      result = dic[1];
      return true;    // break;
    }
  });
  return result;
}
/* Popup Event */
function popupClose(seq) {
  // var popupLayer = document.querySelector('.popup-layer');
  // console.log(popupLayer);

  var value = $('#popup-close_' + seq).val();

  setCookie(seq, value, 1);

  $("#popup_" + seq).hide();

}

/* Popup Event */
function popupClose2(seq) {
  // var popupLayer = document.querySelector('.popup-layer');
  // console.log(popupLayer);


  $("#popup_" + seq).hide();

}