<div id="totalItem">20</div>
<div id="itemContainer"></div>
<div id="shoppingCart"></div>
<div id="closeCart"></div>

.card {
  width: 200px;
  height: 310px;
  padding: 0.5em;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

.totalItem {
  color: #fff;
}

.rightItem {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.totalItem {
  margin-bottom: -9px;
}

.cardImg {
  width: 70%;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardImg img {
  width: 100%;
}

.itemDescContainer {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100vw);
  transition: 1s ease;
}
.modal-open .itemDescContainer {
  pointer-events: initial;
  opacity: 1;
  transform: translateX(0);
}
.itemDesc {
  max-width: 50%;
  min-width: 300px;
  padding: 1rem;
  flex: 1 0 0;
  background: red;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.itemName {
  font-size: 1rem;
  margin-bottom: 0.3em;
  color: black;
}

.itemPrice {
  font-weight: 500;
  color: black;
}

.addtocart {
  width: 35px;
  height: 35px;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.addtocart:hover {
  background-color: #dbdbdb;
}

.cart {
  margin: 0;
}

@media screen and (min-width: 650px) {
  .itemContainer {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 900px) {
  .itemContainer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1100px) {
  .itemContainer {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

const products = [
  {
    productName: "Boconó Specialty Coffee Beans Colombie 1 kg",
    productPrice: "44.90",
    productImg: "bocono1_1kg.png"
  },

  {
    productName: "Boconó Specialty Coffee Beans Brazil 1 Kg",
    productPrice: "42.90",
    productImg: "coffee_brazil_1kg.png"
  },

  {
    productName: "Boconó Specialty Coffee Beans Ethiopia 1 Kg",
    productPrice: "46.90",
    productImg: "coffee_ethopia_1kg.png"
  }
];

// Toggle shopping cart
const shoppingCart = document.getElementById("shoppingCart");
const closeCart = document.getElementById("closeCart");

const itemContainer = document.getElementById("itemContainer");
const cartContainer = document.getElementById("cartContainer");
const eachCartItemContainer = document.getElementById("eachCartItemContainer");
const totalItem = document.getElementById("totalItem");

const cartTitle = document.getElementById("cartTitle");
const totalPrice = document.getElementById("totalPrice");
const totalPriceContainer = document.getElementById("totalPriceContainer");

const storedItems = localStorage.getItem("cartItems");
const cartItems = storedItems !== null ? storedItems.split(",") : [];

totalItem.innerText = cartItems.length !== null ? cartItems.length - 1 : 0;

// Iterate card
for (let index = 0; index < products.length; index++) {
  const { id, productName, productPrice, productImg } = products[index];
  itemContainer.innerHTML +=
    ` <div class="card">` +
    ` <article class="cardImg">` +
    ` <img src="https://picsum.photos/id/237/200/300" alt="">` +
    `</article> ` +
    ` <div class="itemDescContainer">` +
    `<article class="itemDesc">` +
    `<h1 class="itemName">${productName}</h1>` +
    `<p class="itemPrice">${productPrice}€</p>` +
    `<button class="closeModal">Close</button>` +
    ` </article> ` +
    `<div class="addtocart" id="addtocart${id}")'>` +
    `<i class="fa-solid fa-cart-shopping cart"></i>` +
    ` </div>` +
    ` </div>` +
    `</div>`;
}

const overlay = document.querySelectorAll(".itemDesc");
const photos = document.querySelectorAll(".cardImg");
const closeModal = document.querySelectorAll(".closeModal");
photos.forEach((e) => e.addEventListener("click", clicked));
closeModal.forEach((e) => e.addEventListener("click", closeModals));

function clicked(e) {
  e.target.closest(".card").classList.add("modal-open");
}
function closeModals(e) {
  e.target.closest(".card").classList.remove("modal-open");
}

// Add click event listener for card Item
for (let index = 1; index <= products.length; index++) {
  document.getElementById(`addtocart${index}`).onclick = () => {
    if (cartItems.includes(index) === false) {
      totalItem.innerText = cartItems.length;
      cartItems.unshift(index);
      localStorage.setItem("cartItems", cartItems);
    }
  };
}

shoppingCart.onclick = () => {
  cartContainer.classList.add("showCartContainer");
  displayItemInCart();
};

closeCart.onclick = () => {
  cartContainer.classList.remove("showCartContainer");
};

// AddClickEvent for button
const displayItemInCart = () => {
  cartTitle.innerText = `${cartItems.length - 1} Item In cart`;
  eachCartItemContainer.innerHTML = "";
  if (localStorage.getItem("cartItems")) {
    const cartArray = localStorage.getItem("cartItems").split(",");
    totalPrice.innerText = "";
    totalPriceContainer.style.display = "block";
    products.map((item) => {
      const { id, productName, productPrice, productImg } = item;
      if (cartArray.includes(id)) {
        totalPrice.innerHTML = (
          Number(totalPrice.innerText) + Number(productPrice)
        ).toFixed(2);

        return (eachCartItemContainer.innerHTML +=
          `<div class="eachCart">` +
          ` <img src="./img/${productImg}" class="cartImg" alt="">` +
          `<div class="cartDesc">` +
          `<h1 class="cartItemName">${productName}</h1>` +
          `<p class="cartItemPrice">${productPrice}€</p>` +
          `<i class="fa-solid fa-trash fa-lg" id="remove${id}"></i>` +
          `<i class="fa-solid fa-plus fa-lg" id="addtocart${id}")></i>` +
          `<i class="fa-solid fa-minus fa-lg" id="addtocart${id}")></i>` +
          `</div>` +
          `</div>`);
      }
    });
  } else {
    cartTitle.innerText = "No Item";
    totalPriceContainer.style.display = "none";
  }
  onRemoveButton();
};

const onRemoveButton = () => {
  const itemInCart = localStorage.getItem("cartItems");
  const itemInCartArray = itemInCart.split(",");

  for (let index = 0; index < itemInCartArray.length; index++) {
    const removedItem = itemInCartArray[index];
    document.getElementById(`remove${removedItem}`).onclick = () => {
      const Itemindex = itemInCartArray.indexOf(removedItem);
      cartItems.splice(Itemindex, 1);
      localStorage.setItem("cartItems", cartItems);
      totalItem.innerText = cartItems.length - 1;
      displayItemInCart();
    };
  }
};