// main script
(function () {
  "use strict";

  // Dropdown Menu Toggler For Mobile
  // ----------------------------------------
  const dropdownMenuToggler = document.querySelectorAll(
    ".nav-dropdown > .nav-link",
  );

  dropdownMenuToggler.forEach((toggler) => {
    toggler?.addEventListener("click", (e) => {
      e.target.closest('.nav-item').classList.toggle("active");
    });
  });

  // Testimonial Slider
  // ----------------------------------------
  new Swiper(".testimonial-slider", {
    spaceBetween: 24,
    loop: true,
    pagination: {
      el: ".testimonial-slider-pagination",
      type: "bullets",
      clickable: true,
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
      992: {
        slidesPerView: 3,
      },
    },
  });


  // modals 
  // openers
  const body = document.querySelector("body");
  const show_modal_buttons = document.querySelectorAll("[data-modal-show]");
  show_modal_buttons.forEach((btn) => {
    const target = btn.getAttribute('data-modal-show');
    const modal = document.querySelector(`#${target}`);
    if (modal) {
      btn.addEventListener("click", (e) => {
        modal.classList.toggle("hidden", false);
        body.classList.toggle("overflow-hidden", true);
      });
    }
  });

  const hide_modal_buttons = document.querySelectorAll("[data-modal-hide]");
  hide_modal_buttons.forEach((btn) => {
    const target = btn.getAttribute('data-modal-hide');
    const modal = document.querySelector(`#${target}`);
    if (modal) {
      btn.addEventListener("click", (e) => {
        modal.classList.toggle("hidden", true);
        body.classList.toggle("overflow-hidden", false);
      });
    }
  });

  const modal_bg = document.querySelectorAll(".modal-bg");
  modal_bg.forEach((bg) => {
    bg.addEventListener("click", (e) => {
      if(e.target === bg) {
        bg.classList.toggle("hidden", true);
        body.classList.toggle("overflow-hidden", false);
      }
    });
  });

  // Swipers
  // ----------------------------------------
  const swipers = document.querySelectorAll(".swiper-slider");

  swipers.forEach((swiper) => {
    new Swiper(swiper, {
      spaceBetween: 24,
      loop: true,
      pagination: {
        el: swiper.querySelector(".swiper-slider-pagination"),
        type: "bullets",
        clickable: true,
      },
      navigation: {
        nextEl: swiper.querySelector(".swiper-button-next"),
        prevEl: swiper.querySelector(".swiper-button-prev"),
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        992: {
          slidesPerView: 3,
        },
      },
    });
  });
})();