// Submenu start
$(document).ready(function () {
  // Toggle mobile menu visibility
  $('.hamburger').on('click', function () {
    console.log('clicked');
    $('#mobile-side-nav-wrap').addClass('is-active');
  });
  $('.close-mobile-nav').on('click', function () {
    $('#mobile-side-nav-wrap').removeClass('is-active');
  });

  // Tab switching logic
  $('ul li[data-tab]').on('click', function () {
    var selectedTab = $(this).data('tab');
    $('ul li[data-tab]').removeClass('is-active'); // Remove active from all tabs
    $(this).addClass('is-active'); // Activate clicked tab
    $('div[data-tab]').removeClass('is-active'); // Hide all tab content
    $('div[data-tab="' + selectedTab + '"]').addClass('is-active'); // Show selected content
  });

  // Handle submenu open/close on click
  $('.has-children > a').on('click', function (e) {
    e.preventDefault();
    const $parentLi = $(this).closest('.has-children');
    const $submenu = $parentLi.find('.children').first();
    const isAlreadyActive = $parentLi.hasClass('active-li');

    // Close all submenus
    $('.has-children').removeClass('active-li');
    $('.has-children .children').removeClass('is-active');

    // Open only if not already active
    if (!isAlreadyActive) {
      $parentLi.addClass('active-li');
      $submenu.addClass('is-active');
    }
  });

  // Back button resets submenu state
  $('.mobile-menu-back-button').on('click', function () {
    $('.has-children').removeClass('active-li');
    $('.has-children .children').removeClass('is-active');
  });
});

// Submenu end

var swiper = new Swiper(".swiper-banner", {
  slidesPerView: 4,
  spaceBetween: 4, // optional, adds spacing between slides

  scrollbar: {
    draggable: true,
  },

  // Optional responsive breakpoints
  // breakpoints: {
  //   320: {
  //     slidesPerView: 1,
  //   },
  //   576: {
  //     slidesPerView: 3,
  //   },
  //   768: {
  //     slidesPerView: 4,
  //   },
  // },
});

var swiper1 = new Swiper(".swiper-product", {
  slidesPerView: 4.1,
  spaceBetween: 4,

  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // Optional responsive breakpoints
  breakpoints: {
    320: {
      slidesPerView: 2.1,
    },
    600: {
      slidesPerView: 4.1,
    },
  },
});

var swiper2 = new Swiper(".swiper-testimonial", {
  slidesPerView: 4.1,
  spaceBetween: 4,

  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // Optional responsive breakpoints
  breakpoints: {
    320: {
      slidesPerView: 1.1,
    },
    600: {
      slidesPerView: 2.1,
    },
  },
});

// mega-menu-dropdown
$(document).ready(function () {
  $(".click-button").on("click", function (e) {
    e.stopPropagation();

    const $button = $(this);
    const $icon = $button.find("i");
    const $dropdown = $button.next(".dropdown");

    $dropdown.toggle();

    // Toggle icon class
    if ($icon.hasClass("fa-plus")) {
      $icon.removeClass("fa-plus").addClass("fa-minus");
    } else {
      $icon.removeClass("fa-minus").addClass("fa-plus");
    }
  });

  // Optional: Hide dropdown and reset icon when clicking outside
  $(document).on("click", function () {
    $(".dropdown").hide();
    $(".click-button i").removeClass("fa-minus").addClass("fa-plus");
  });

  // Cart popup
  $(".cart-button").on("click", function () {
    $("#cart-main .cart-popoup").show();
    $("body").css("overflow", "hidden");
  });

  // close
  $(".cros-").on("click", function () {
    $(".cart-popoup").hide();
    $("body").css("overflow", "");
  });

  // Language popup

  // Open language popup
  $(".language-button").on("click", function () {
    $("#language .cart-popoup").show();
    $("body").css("overflow", "hidden");
  });

  $(".wishlish-button").on("click", function () {
    $("#wishlist .cart-popoup").show();
    $("body").css("overflow", "hidden");
  });

  // close
  $(".AV").on("click", function () {
    $(".AV").removeClass("avactive");
    $(this).addClass("avactive");
  });

  // Check localStorage on load
  if (localStorage.getItem("theme") === "dark") {
    $("body").addClass("dark-mode");
    $(".OL").addClass("active");
  }

  // Toggle on click
  $(".OL").on("click", function () {
    $("body").toggleClass("dark-mode");
    $(this).toggleClass("active");

    // Save mode in localStorage
    if ($("body").hasClass("dark-mode")) {
      localStorage.setItem("theme", "dark");
    } else {
      localStorage.setItem("theme", "light");
    }
  });
});

// For each .fs section, bind button to its video
document.querySelectorAll('.fs').forEach(function (section) {
  var video = section.querySelector('video');
  var buttons = section.querySelectorAll('.xw.fD');
  buttons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var playIcon = btn.querySelector('.play');
      var pauseIcon = btn.querySelector('.pause');
      if (video.paused) {
        video.play();
        playIcon.style.display = 'none';
        pauseIcon.style.display = '';
      } else {
        video.pause();
        playIcon.style.display = '';
        pauseIcon.style.display = 'none';
      }
    });
    // Set initial state
    var playIcon = btn.querySelector('.play');
    var pauseIcon = btn.querySelector('.pause');
    playIcon.style.display = 'none';
    pauseIcon.style.display = '';
  });
  // Update all buttons in this section if video is played/paused externally
  video.addEventListener('play', function () {
    buttons.forEach(function (btn) {
      btn.querySelector('.play').style.display = 'none';
      btn.querySelector('.pause').style.display = '';
    });
  });
  video.addEventListener('pause', function () {
    buttons.forEach(function (btn) {
      btn.querySelector('.play').style.display = '';
      btn.querySelector('.pause').style.display = 'none';
    });
  });
});


// contact accordion

document.addEventListener('DOMContentLoaded', function () {
  const toggles = document.querySelectorAll('.faq-toggle');

  toggles.forEach(function (toggle) {
    toggle.addEventListener('click', function () {
      const faqItem = this.closest('.faq-item');
      const answer = faqItem.querySelector('.faq-answer');
      const isOpen = faqItem.classList.contains('faq-item-expanded');

      // Close all answers
      document.querySelectorAll('.faq-item').forEach(function (item) {
        item.classList.remove('faq-item-expanded');
        item.querySelector('.faq-answer').style.display = 'none';
      });

      // Toggle current item
      if (!isOpen) {
        answer.style.display = 'block';
        faqItem.classList.add('faq-item-expanded');
      }
    });
  });
});

// Product Detail

var swiper3 = new Swiper(".swiper_product-main", {
  slidesPerView: 2,
  spaceBetween: 2,

  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // Optional responsive breakpoints
  breakpoints: {
    320: {
      slidesPerView: 1,
    },
    600: {
      slidesPerView: 2,
    },
  },
});

var swiper4 = new Swiper(".swiper-product-detail", {
  slidesPerView: 3,
  spaceBetween: 4,

  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // Optional responsive breakpoints
  breakpoints: {
    320: {
      slidesPerView: 2,
    },
    600: {
      slidesPerView: 3,
    },
  },
});

// Tabs
// (() => {
//   const tabs = document.querySelectorAll('.tab-button');
//   const panels = document.querySelectorAll('.tab-content');
//   tabs.forEach(tab => {
//     tab.addEventListener('click', () => {
//       const target = tab.getAttribute('aria-controls');
//       tabs.forEach(t => {
//         t.classList.remove('active');
//         t.setAttribute('aria-selected', 'false');
//       });
//       panels.forEach(panel => {
//         panel.classList.add('hidden');
//         panel.setAttribute('aria-hidden', 'true');
//       });
//       tab.classList.add('active');
//       tab.setAttribute('aria-selected', 'true');
//       document.getElementById(target).classList.remove('hidden');
//       document.getElementById(target).setAttribute('aria-hidden', 'false');
//     });
//   });
// })();

// Main Image slider logic
// (() => {
//   const images = [{
//     src: 'webImages/sec-3/1.1.jpg',
//     alt: 'Dope Adept W Snowboardjacka Dam Cumulus, model wearing glacier-style camo ski jacket with integrated hood and matching gloves against white background'
//   },
//   {
//     src: 'webImages/sec-3/2.jpg',
//     alt: 'Close up on ventilation zippers under the arms for snowboard jacket'
//   },
//   {
//     src: 'webImages/sec-3/3.jpg',
//     alt: 'Media pocket feature on snowboard jacket with phone inside'
//   },
//   {
//     src: 'webImages/sec-3/4.jpg',
//     alt: 'Close up of elastic snow guard on jacket sleeve'
//   }
//   ];
//   let currentIndex = 0;
//   const mainImage = document.getElementById('main-image');
//   const thumbs = document.querySelectorAll('#thumbnail-slider .detail-thumb');

//   const setActiveThumbnail = index => {
//     thumbs.forEach(t => t.classList.remove('active'));
//     thumbs[index].classList.add('active');
//   };

//   function updateImage(index) {
//     currentIndex = index;
//     mainImage.src = images[index].src;
//     mainImage.alt = images[index].alt;
//     setActiveThumbnail(index);
//   }

//   const mainPrev = document.getElementById('main-prev');
//   const mainNext = document.getElementById('main-next');
//   if (mainPrev) {
//     mainPrev.addEventListener('click', () => {
//       let newIndex = (currentIndex - 1 + images.length) % images.length;
//       updateImage(newIndex);
//     });
//   }
//   if (mainNext) {
//     mainNext.addEventListener('click', () => {
//       let newIndex = (currentIndex + 1) % images.length;
//       updateImage(newIndex);
//     });
//   }

//   // Thumbnail click and keyboard
//   thumbs.forEach(thumb => {
//     thumb.addEventListener('click', () => {
//       const i = Number(thumb.dataset.index);
//       updateImage(i);
//     });
//     thumb.addEventListener('keydown', (e) => {
//       if (e.key === 'Enter' || e.key === ' ') {
//         e.preventDefault();
//         const i = Number(thumb.dataset.index);
//         updateImage(i);
//       }
//     });
//   });

//   setActiveThumbnail(currentIndex);
// })();

// Slider scroll helper for horizontal sliders with left/right buttons
// function setupHorizontalSlider({
//   sliderId,
//   prevId,
//   nextId
// }) {
//   const slider = document.getElementById(sliderId);
//   const prevButton = document.getElementById(prevId);
//   const nextButton = document.getElementById(nextId);

//   const scrollAmount = 300;

//   prevButton.addEventListener('click', () => {
//     slider.scrollBy({
//       left: -scrollAmount,
//       behavior: 'smooth'
//     });
//   });
//   nextButton.addEventListener('click', () => {
//     slider.scrollBy({
//       left: scrollAmount,
//       behavior: 'smooth'
//     });
//   });
// }

// // Details slider
// setupHorizontalSlider({
//   sliderId: 'details-slider',
//   prevId: 'details-prev',
//   nextId: 'details-next'
// });

// // Technology slider
// setupHorizontalSlider({
//   sliderId: 'tech-slider',
//   prevId: 'tech-prev',
//   nextId: 'tech-next'
// });

// // Matching pants slider
// setupHorizontalSlider({
//   sliderId: 'pants-slider',
//   prevId: 'pants-prev',
//   nextId: 'pants-next'
// });

// // Related products slider
// setupHorizontalSlider({
//   sliderId: 'related-slider',
//   prevId: 'related-prev',
//   nextId: 'related-next'
// });

// Color selection toggle
(() => {
  const colorSwatches = document.querySelectorAll('.color-swatch[data-color]');
  colorSwatches.forEach(swatch => {
    swatch.addEventListener('click', () => {
      colorSwatches.forEach(s => {
        s.classList.remove('active');
        s.setAttribute('aria-pressed', 'false');
      });
      swatch.classList.add('active');
      swatch.setAttribute('aria-pressed', 'true');
      // Could update main image or product details based on color here
    });
    swatch.addEventListener('keydown', (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        swatch.click();
      }
    });
  });
})();

// Size selection toggle
(() => {
  const sizeButtons = document.querySelectorAll('.btn-select[data-size]');
  sizeButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      sizeButtons.forEach(b => {
        b.classList.remove('active');
        b.setAttribute('aria-pressed', 'false');
      });
      btn.classList.add('active');
      btn.setAttribute('aria-pressed', 'true');
    });
    btn.addEventListener('keydown', (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        btn.click();
      }
    });
  });
})();
