////views/productPages/productMain/productMain.js

// Product page specific JavaScript
document.addEventListener("DOMContentLoaded", function () {
  // Tab functionality for product categories
  const categoryTabs = document.querySelectorAll(".category-tab");
  const categoryContents = document.querySelectorAll(".category-content");

  categoryTabs.forEach((tab) => {
    tab.addEventListener("click", function () {
      // Remove active class from all tabs and contents
      categoryTabs.forEach((t) => t.classList.remove("active"));
      categoryContents.forEach((c) => c.classList.remove("active"));

      // Add active class to clicked tab
      this.classList.add("active");

      // Show corresponding content
      const categoryId = this.getAttribute("data-category");
      document.getElementById(categoryId).classList.add("active");

      // Update URL hash without jumping
      history.pushState(null, null, `#${categoryId}`);
    });
  });

  // Handle hash navigation from footer or direct links
  function activateTabByHash() {
    const hash = window.location.hash.substring(1); // Remove the #
    if (hash) {
      // Find the tab with matching data-category
      const tab = document.querySelector(
        `.category-tab[data-category="${hash}"]`,
      );
      if (tab) {
        // Remove active class from all tabs and contents
        categoryTabs.forEach((t) => t.classList.remove("active"));
        categoryContents.forEach((c) => c.classList.remove("active"));

        // Add active class to the appropriate tab and content
        tab.classList.add("active");
        document.getElementById(hash).classList.add("active");
      }
    }
  }

  // Check hash on page load
  activateTabByHash();

  // Listen for hash changes
  window.addEventListener("hashchange", activateTabByHash);

  // Set products nav item as active
  if (document.getElementById("products")) {
    document.getElementById("products").classList.add("active");
  }
});

// SIDEBAR
document.addEventListener("click", function (e) {
  const sidebar = document.getElementById("sidebar");
  const overlay = document.getElementById("sidebarOverlay");
  const floatingMenuBtn = document.getElementById("floatingMenuBtn");

  if (!sidebar) return;

  const isOpenTrigger =
    e.target.closest("#floatingMenuBtn") ||
    e.target.closest(".mobile-menu-btn");
  const isCloseTrigger =
    e.target.closest(".close-sidebar") ||
    e.target.closest("#sidebarOverlay") ||
    e.target.closest(".sidebar-nav .nav-link");

  if (isOpenTrigger) {
    sidebar.classList.add("open");
    overlay.style.display = "block";
    document.body.style.overflow = "hidden";
    floatingMenuBtn.style.display = "none";
  }

  if (isCloseTrigger) {
    sidebar.classList.remove("open");
    overlay.style.display = "none";
    document.body.style.overflow = "";
    floatingMenuBtn.style.display = "flex";
  }
});