script.js

let currentIndex = 0,
  menu = document.querySelector(".menu-icon"),
  navbar = document.querySelector(".navbar"),
  bag = document.getElementById("bill"),
  listProductBill = [],
  checkTakeAWay = false;

// JavaScript for automatic slide change
const slides = document.querySelectorAll(".swiper-slide");
function showSlide1(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? "block" : "none";
  });
}
function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide1(currentIndex);
}
setInterval(nextSlide, 3000);
showSlide1(currentIndex);

// Menu open and close
menu.onclick = () => {
  menu.classList.toggle("move");
  navbar.classList.toggle("open-menu");
};

// Close menu
window.onscroll = () => {
  menu.classList.remove("move");
  navbar.classList.remove("open-menu");
};

// Open Menu Products
function goToShoppingPage() {
  window.location.href = "Products.html";
}
function goToHomePage() {
  window.location.href = "mainCoffee.html";
}

function MenuToTakeAWay() {
  goToShoppingPage();
  checkTakeAWay = true;
}

function displayBill() {
  if (bag !== null) {
    if (bag.style.width === "0%") {
      bag.style.width = "20%";
    } else {
      bag.style.width = "0%";
    }
  } else {
    console.error("Element with ID 'bill' not found.");
  }
}

// add products with name, images and price to the cart, display cart in the right
// Function to handle click on the heart icon
function handleHeartClick(event) {
  // Navigate up to the parent product-box element
  let productBox = event.target.closest(".product-box");

  if (productBox !== null) {
    // Get specific information from product-box
    let productName = productBox.querySelector("h2").textContent.trim();
    let priceRange = productBox
      .querySelector(".product-info span")
      .textContent.trim();
    let imageUrl = productBox.querySelector("img").src;

    let existingProduct = listProductBill.find(
      (product) => product.name === productName
    );
    if (existingProduct) {
      // If product exists, increment the quantity
      existingProduct.quantity++;
    } else {
      // Create an object with the extracted information
      let productInfo = {
        name: productName,
        price: priceRange,
        image: imageUrl,
        quantity: 1,
      };

      // Push the information to the list
      listProductBill.push(productInfo);
    }
    // Display the list in the console
    console.log(listProductBill);
  } else {
    console.log("Product information not found!");
  }
  renderListProduct();
}
// Attach click event listener to all heart icons with class "bx-shopping-bag"
let heartIcons = document.querySelectorAll(".bx-shopping-bag");
heartIcons.forEach((icon) => {
  icon.addEventListener("click", handleHeartClick);
});

// Delete products in bill
function removeProduct(productName) {
  const shouldDelete = window.confirm(
    `Do you want to remove "${productName}" from the list?`
  );
  if (shouldDelete) {
    const indexToRemove = listProductBill.findIndex(
      (product) => product.name === productName
    );
    if (indexToRemove !== -1) {
      listProductBill.splice(indexToRemove, 1);
      renderListProduct();
    } else {
      alert(`Product not found: ${productName}`);
    }
  }
}
// Total price and ask customer with cash or credit cards
function showHiddenTag() {
  var hiddenTag = document.getElementById("hiddenTag");
  document.getElementById("thankyou").style.width = "20%";
  if (checkTakeAWay === true) {
    hiddenTag.innerHTML = `<h1>Thank you so much!</h1>
    <h3>Your items will be there in a few minutes!</h3>
    <h1>$ ${totalBill}</h1>`;
  } else {
    hiddenTag.innerHTML = `<h1>Wish you a good appetite!</h1>
  <h3>Your items will be there in a few minutes!</h3>
  <h1>$ ${totalBill}</h1>`;
  }
  setTimeout(function () {
    document.getElementById("thankyou").style.width = "0%";
  }, 5000);
  displayBill();
  listProductBill = [];
  renderListProduct();
  checkTakeAWay = false;
}

function CheckBook() {
  let number = document.getElementById("booknumber").value;
  let name = document.getElementById("bookname").value;

  alert(
    `Hi ${name}, We will contact you via this number ${number} as soon as possible!`
  );

  // Reset input values
  document.getElementById("booknumber").value = "";
  document.getElementById("bookname").value = "";
}