// 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 
  function toggle_modal(target, show) {
    target.classList.toggle("hidden", !show);
    body.classList.toggle("overflow-hidden", show);
    body.setAttribute("modal", show ? target.id : "");
  }

  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) => {
        if (e.target.tagName !== 'A')
          toggle_modal(modal, 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) => {
        toggle_modal(modal, false);
      });
    }
  });

  const modal_bg = document.querySelectorAll(".modal-bg");
  modal_bg.forEach((bg) => {
    bg.addEventListener("click", (e) => {
      if (e.target === bg) {
        toggle_modal(bg, false);
      }
    });
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      var modal_id = body.getAttribute("modal");
      if (modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
    }
  });

  // timelines
  // ----------------------------------------
  const updateTimeline = (timeline) => {
    const day_target = timeline.getAttribute("data-day-target");
    timeline.querySelectorAll(".day-events:not(.hidden)").forEach((day_events) => { day_events.classList.toggle("hidden", true); });
    timeline.querySelector(`[data-day-title="${day_target}"]`).classList.toggle("hidden", false);
    timeline.querySelectorAll(`.day_listing.active`).forEach((listing) => {
      listing.classList.toggle("inactive", true);
      listing.classList.toggle("active", false);
    });
    var new_active = timeline.querySelector(`.day_listing[data-day-target="${day_target}"]`);
    new_active.classList.toggle("active", true);
    new_active.classList.toggle("inactive", false);
  };

  document.querySelectorAll(".timeline_grid_container").forEach((timeline) => {
    const days = timeline.querySelector(".day-listing-container");
    days.addEventListener("click", (e) => {
      const day_target = e.target.getAttribute("data-day-target");
      if (day_target) {
        timeline.setAttribute("data-day-target", day_target);
        updateTimeline(timeline);
      }
    });
  });

  // 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,
        },
      },
    });
  });
})();

// c > js -devon