//toggle class active untuk hamburger menu
const navbarNav = document.querySelector(".navbar-nav");

//ketika hamburger menu di klik
document.querySelector("#hamburger-menu").onclick = (e) => {
  navbarNav.classList.toggle("active");
  e.preventDefault();
};

// toggle class active untuk shopping cart button
const shoppingCart = document.querySelector(".shopping-cart");

document.querySelector("#shopping-cart-button").onclick = (e) => {
  shoppingCart.classList.toggle("active");
  //window.location.href ="https://arfashions.orderonline.id/polosh";
  e.preventDefault();
};


//klik diluar sidebar Element
const hm = document.querySelector("#hamburger-menu");
// const sb = document.querySelector("#search-button");
const sc = document.querySelector("#shopping-cart-button");
document.addEventListener("click", function (e) {
  if (!hm.contains(e.target) && !navbarNav.contains(e.target)) {
    navbarNav.classList.remove("active");
  }
  if (!sc.contains(e.target) && !shoppingCart.contains(e.target) && e.target.id !== "remove") {
    shoppingCart.classList.remove("active");
  }
});

// Modal Box
const itemDetailButtons = document.querySelectorAll('.item-detail-button');
itemDetailButtons.forEach((btn) =>{
  btn.addEventListener('click', function(e) {
    const productId = this.getAttribute('data-product-id');
    const itemDetailModal = document.getElementById(`item-detail-modal-${productId}`);

    itemDetailModal.style.display = 'flex';
    e.preventDefault();
  });
});


// klik tombol close
const closeButtons = document.querySelectorAll('.close-icon');
// Event listener untuk setiap tombol penutup modal
closeButtons.forEach(button => {
  button.addEventListener('click', function(event) {
      // Temukan modal terdekat dari tombol penutup yang diklik
      const modal = this.closest('.modal');
      
      // Sembunyikan modal
      modal.style.display = 'none';
      
      event.preventDefault();
  });
});

