const slideStop = document.querySelector(".stop");
const slideStart = document.querySelector(".start");
const tabBtn = document.querySelectorAll(".tab-item");
const tabCon = document.querySelectorAll(".tab-content");
const manuTabBtn = document.querySelectorAll(".tab-menu-item");
const menuTabCon = document.querySelectorAll(".tab-menu-content");
const counselTabBtn = document.querySelectorAll(".counsel-tab-item");
const counselTabCon = document.querySelectorAll(".counsel-tab-content");

const viewBox1 = document.querySelectorAll(".view-box")[0];
const viewBox2 = document.querySelectorAll(".view-box")[1];
const viewLeftBtn1 = viewBox1.querySelector(".view-btn-left");
const viewRightBtn1 = viewBox1.querySelector(".view-btn-right");
const viewLeftBtn2 = viewBox2.querySelector(".view-btn-left");
const viewRightBtn2 = viewBox2.querySelector(".view-btn-right");
const viewList1 = document.querySelectorAll(".view-list")[0];
const viewList2 = document.querySelectorAll(".view-list")[1];
const viewRightMax1 = viewList1.querySelectorAll("li").length - 3;
const viewRightMax2 = viewList2.querySelectorAll("li").length - 3;

const recoBox1 = document.querySelectorAll(".reco-box")[0];
const recoBox2 = document.querySelectorAll(".reco-box")[1];
const recoBox3 = document.querySelectorAll(".reco-box")[2];
const recoLeftBtn1 = recoBox1.querySelector(".reco-btn-left");
const recoRightBtn1 = recoBox1.querySelector(".reco-btn-right");
const recoLeftBtn2 = recoBox2.querySelector(".reco-btn-left");
const recoRightBtn2 = recoBox2.querySelector(".reco-btn-right");
const recoLeftBtn3 = recoBox3.querySelector(".reco-btn-left");
const recoRightBtn3 = recoBox3.querySelector(".reco-btn-right");
const recoList1 = document.querySelectorAll(".reco-list")[0];
const recoList2 = document.querySelectorAll(".reco-list")[1];
const recoList3 = document.querySelectorAll(".reco-list")[2];
const recoRightMax1 = recoList1.querySelectorAll("li").length - 2;
const recoRightMax2 = recoList2.querySelectorAll("li").length - 2;
const recoRightMax3 = recoList3.querySelectorAll("li").length - 2;

let count1 = 0;
let count2 = 0;
let count3 = 0;

// siblings
const siblings = (t) => [...t.parentElement.children].filter((e) => e != t);

// 배너 슬라이드
const swiperBanner = new Swiper(".banner-slide", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    prevEl: ".swiper-button-prev",
    nextEl: ".swiper-button-next",
  },
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
});

// 하단 슬라이드
const swiperContents = new Swiper("");

//  배너 슬라이드 자동 이벤트
slideStop.addEventListener("click", function () {
  swiperBanner.autoplay.stop();
  this.classList.add("hidden");
  slideStart.classList.remove("hidden");
});
slideStart.addEventListener("click", function () {
  swiperBanner.autoplay.start();
  this.classList.add("hidden");
  slideStop.classList.remove("hidden");
});

// 탭 이벤트
for (let tabB of tabBtn) {
  tabB.addEventListener("click", function (e) {
    this.classList.add("on");
    for (let sib of siblings(this)) {
      sib.classList.remove("on");
    }
    const idx = [...e.target.parentElement.children].indexOf(e.target);
    tabCon[idx].classList.add("on");
    for (let sib of siblings(tabCon[idx])) {
      sib.classList.remove("on");
    }
  });
}

for (let menuTabB of manuTabBtn) {
  menuTabB.addEventListener("click", function (e) {
    this.classList.add("on");
    for (let sib of siblings(this)) {
      sib.classList.remove("on");
    }
    const idx = [...e.target.parentElement.children].indexOf(e.target);
    menuTabCon[idx].classList.add("on");
    for (let sib of siblings(menuTabCon[idx])) {
      sib.classList.remove("on");
    }
  });
}

for (let counselTabB of counselTabBtn) {
  counselTabB.addEventListener("click", function (e) {
    this.classList.add("on");
    for (let sib of siblings(this)) {
      sib.classList.remove("on");
    }
    const idx = [...e.target.parentElement.children].indexOf(e.target);
    counselTabCon[idx].classList.add("on");
    for (let sib of siblings(counselTabCon[idx])) {
      sib.classList.remove("on");
    }
  });
}

viewRightBtn1.addEventListener("click", function () {
  count1++;
  if (count1 > viewRightMax1) count1 = viewRightMax1;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count1 * -200 + "px";
});

viewLeftBtn1.addEventListener("click", function () {
  count1--;
  if (count1 < 0) count1 = 0;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count1 * -200 + "px";
});

viewRightBtn2.addEventListener("click", function () {
  count2++;
  if (count2 > viewRightMax2) count2 = viewRightMax2;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count2 * -200 + "px";
});

viewLeftBtn2.addEventListener("click", function () {
  count2--;
  if (count2 < 0) count2 = 0;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count2 * -200 + "px";
});

//
recoRightBtn1.addEventListener("click", function () {
  count1++;
  if (count1 > recoRightMax1) count1 = recoRightMax1;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count1 * -196 + "px";
});

recoLeftBtn1.addEventListener("click", function () {
  count1--;
  if (count1 < 0) count1 = 0;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count1 * -196 + "px";
});
//
recoRightBtn2.addEventListener("click", function () {
  count2++;
  if (count2 > recoRightMax2) count2 = recoRightMax2;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count2 * -196 + "px";
});

recoLeftBtn2.addEventListener("click", function () {
  count2--;
  if (count2 < 0) count2 = 0;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count2 * -196 + "px";
});
//
recoRightBtn3.addEventListener("click", function () {
  count3++;
  if (count3 > recoRightMax3) count3 = recoRightMax3;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count3 * -196 + "px";
});

recoLeftBtn3.addEventListener("click", function () {
  count3--;
  if (count3 < 0) count3 = 0;
  const _el =
    this.parentElement.parentElement.nextElementSibling.firstElementChild;
  _el.style.left = count3 * -196 + "px";
});

document.querySelectorAll('.event').forEach(eventElement => {
  // 마우스가 .event 요소 위에 있을 때
  eventElement.addEventListener('mouseenter', () => {
      const eventBox = eventElement.querySelector('.eventbox');
      if (eventBox) {
          eventBox.classList.add('show'); // .show 클래스를 추가하여 보이도록
      }
  });

  // 마우스가 .event 요소에서 벗어났을 때
  eventElement.addEventListener('mouseleave', () => {
      const eventBox = eventElement.querySelector('.eventbox');
      if (eventBox) {
          eventBox.classList.remove('show'); // .show 클래스를 제거하여 숨김
      }
  });
});