const menu = document.querySelector("#menu-btn");
const navbar = document.querySelector(".header .navbar");
const accordionsContainer = document.querySelector(".faqs .row");

menu.addEventListener("click", () => {
  menu.classList.toggle("fa-times");
  navbar.classList.toggle("active");
});

window.addEventListener("scroll", () => {
  menu.classList.remove("fa-times");
  navbar.classList.remove("active");
});

const initializeSwipers = () => {
  const roomSwiper = new Swiper(".room-slider", {
    spaceBetween: 20,
    grabCursor: true,
    lazy: true,

    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 7500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 2,
      },
      991: {
        slidesPerView: 3,
      },
    },
  });

  const gallerySwiper = new Swiper(".gallery-slider", {
    spaceBetween: 10,
    grabCursor: true,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 1500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 3,
      },
      991: {
        slidesPerView: 4,
      },
    },
  });
  const gallerySlider = document.querySelector(".gallery-slider");

  // Pause autoplay when the mouse enters the slider
  gallerySlider.addEventListener("mouseenter", () => {
    gallerySwiper.autoplay.stop();
  });

  // Resume autoplay when the mouse leaves the slider
  gallerySlider.addEventListener("mouseleave", () => {
    gallerySwiper.autoplay.start();
  });

  const reviewSwiper = new Swiper(".review-slider", {
    spaceBetween: 10,
    grabCursor: true,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 7500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
};

initializeSwipers();

accordionsContainer.addEventListener("click", (event) => {
  const accordion = event.target.closest(".content .box");
  if (accordion) {
    const accordions = accordionsContainer.querySelectorAll(".content .box");
    accordions.forEach((subAccordion) =>
      subAccordion.classList.remove("active")
    );
    accordion.classList.add("active");
  }
});
setTimeout(function () {
  document.querySelector(".whatsapp-button").classList.add("show");
}, 3000);

// terms and condition
const h1Elements = document.querySelectorAll("#faq h2");

// Add click event listeners to each h1 element
h1Elements.forEach((h1) => {
  h1.addEventListener("click", () => {
    // Get the corresponding p tag for the clicked h1
    const pElement = h1.nextElementSibling;

    // Check if the p tag is currently hidden or visible
    const isHidden = pElement.style.display === "none";

    // Close all open p tags and set the arrow to 'fa-arrow-down'
    h1Elements.forEach((h1) => {
      h1.nextElementSibling.style.display = "none";
      const arrowIcon = h1.querySelector("i");
      arrowIcon.classList.add("fa-arrow-right");
      arrowIcon.classList.remove("fa-arrow-down");
    });

    // Show the corresponding p tag if it was hidden, otherwise hide it
    pElement.style.display = isHidden ? "block" : "none";

    // Toggle the arrow icon between 'fa-arrow-right' and 'fa-arrow-down'
    const arrowIcon = h1.querySelector("i");
    arrowIcon.classList.toggle("fa-arrow-right");
    arrowIcon.classList.toggle("fa-arrow-down");
  });
});