document.addEventListener("DOMContentLoaded", () => {
    
    // set header cart and LS
    let cartProds = JSON.parse(localStorage.getItem("products"));

    let cont = 0;

    if (cartProds == null)
        localStorage.setItem("products", JSON.stringify({}));
    else {
        for (const [key, value] of Object.entries(cartProds)) {
          cont += parseInt(value.cant);
        }
        document.querySelector("#cart_count").innerHTML = cont;
        document.querySelector("#cart_count2").innerHTML = cont;
    }

    // add to cart
    let $btns = document.querySelectorAll(".addToCartButton");
    $btns.forEach($btn => {
        $btn.addEventListener('click', () => {
          $btn.style.backgroundColor = '#6abd45';
          cartProds = JSON.parse(localStorage.getItem("products"));



          cartProds[$btn.dataset.id] = {
            id: $btn.dataset.id,
            name: $btn.dataset.name,
            value: $btn.dataset.value,
            cant: document.querySelector(".quantity").value,
            img: $btn.dataset.img,
            url: $btn.dataset.url
          }

          localStorage.setItem("products", JSON.stringify(cartProds));
          cont = 0;
          for (const [key, value] of Object.entries(cartProds)) {
            cont += parseInt(value.cant);
          }

          document.querySelector("#cart_count").innerHTML = cont;
          document.querySelector("#cart_count2").innerHTML = cont;
          // document.getElementById("prods").value = JSON.stringify(cartProds);
          // if (document.getElementById("prods_checkout")) 
          //   document.getElementById("prods_checkout").value = JSON.stringify(cartProds);
        });
    });




  // cart section
  let $cartSection = document.querySelector('.cart-items');

  if ($cartSection) {
    cartProds = JSON.parse(localStorage.getItem("products"));

    let totalValue = 0;
    let totalProds = 0;

     for (const [key, value] of Object.entries(cartProds)) {
       let quantity = parseInt(value.cant);
        let price = parseInt(value.value);

        totalProds += quantity;
        totalValue += price * quantity; // Multiply the value by the quantity

       // Replace ? with @ in the URL and add .html
       let updatedUrl = value.url.replace(/\?/g, '@') + '.html';

      $cartSection.insertAdjacentHTML("afterend",
          `<div class="cart_item" data-id="${value.id}" style="background-color: #cccccc54; border: 2px solid #7db07f; margin-top: 20px; padding: 10px;">
            <div style="display: flex; align-items: center;">
              <a href="${updatedUrl}">
                <img src="./assets/img/${value.img}" width="100" height="100" alt="">
              </a>
              <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-left: 20px;">
                <a href="${updatedUrl}" class="note" style="font-weight: bold; text-align: left; width: 100%; margin: unset; margin-bottom: 10px;">品名: ${value.name}</a>
                <span>価格: ${value.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}円</span>
                <span>数量: ${value.cant}</span>
                <button
                  class="js-cart_remove"
                  data-id="${value.id}"
                >削除</button>
              </div>
            </div>
          </div>`
      );
    }
    document.querySelector('#cart_tot').innerHTML = totalValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");


    // remove from cart
    document.querySelectorAll(".js-cart_remove").forEach($btRemove => {
      $btRemove.addEventListener('click', () => {

        cartProds = JSON.parse(localStorage.getItem("products"));
        delete cartProds[$btRemove.dataset.id]
        document.querySelector(`.cart_item[data-id="${$btRemove.dataset.id}"]`).remove();
        localStorage.setItem("products", JSON.stringify(cartProds));
        tot = cont = 0;
        for (const [key, value] of Object.entries(cartProds)) {
          tot += parseInt(value.value)*parseInt(value.cant);
          cont += parseInt(value.cant);
        }

        document.querySelector("#cart_count").innerHTML = cont;
        document.querySelector("#cart_count2").innerHTML = cont;
        document.querySelector("#cart_tot").innerHTML = tot.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");



      });
    });
  }

  let $checkoutSection = document.querySelector('#products-input');

  if ($checkoutSection) {
    cartProds = JSON.parse(localStorage.getItem("products"));
    $checkoutSection.value = JSON.stringify(cartProds);

    tot = cont = 0;
    for (const [key, value] of Object.entries(cartProds)) {
      tot += parseInt(value.value)*parseInt(value.cant);
      cont += parseInt(value.cant);
    }
    document.querySelector("#cart_tot").innerHTML = tot.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  }

});