document.addEventListener("DOMContentLoaded", () => {
  fetchCart();
  const myOffcanvas = document.getElementById('side-cart');

  myOffcanvas.addEventListener('hidden.bs.offcanvas', () => {
    $('.item-inside-cart').html('');
    $('.loading-cart').removeClass('d-none');
    $('.footer-side-cart').addClass('d-none');
  });

  myOffcanvas.addEventListener('show.bs.offcanvas', () => {
    $('.loading-cart').addClass('d-none');
    fetchCart();
  });
});

function productCartAddToCart(elm, product_id) {
  const $elm = $(elm);
  $('.loading-cart').removeClass('d-none');
  const originalHtml = $elm.html();

  $elm.html(`<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>`);

  addToCart(product_id, 1, async () => {
    $elm.html(originalHtml);
    await fetchCart();
    new bootstrap.Offcanvas(document.getElementById('side-cart')).show();
  });
}

function addToCart(product_id, quantity, onCompleted) {
  zid.store.cart.addProduct({ productId: product_id, quantity }).then(response => {
    if (response.status === 'success') {
      setCartTotalAndBadge(response.data.cart);
      onCompleted?.();
    }
  });
}

function setCartTotalAndBadge(cart) {
  setCartBadge(cart.products_count);
  const cartTotal = getCartTotal(cart);
  if (cartTotal) setCartIconTotal(cartTotal);
}

function setCartIconTotal(total) {
  $('.cart-price').html(total).removeClass('d-none');
}

function setCartBadge(badge) {
  $('.cart-badge').html(badge);
}

function displayActivePaymentSessionBar(cart) {
  $('.payment-session-bar').toggleClass('d-none', !cart.is_reserved);
}

function getCartTotal(cart) {
  const totalItem = cart?.totals?.find(total => total.code === 'total');
  return totalItem?.value_string || null;
}

function createCartProduct(product) {
  const oldPrice = product.price_before_string
    ? `<span class="price-discount"><del class="old">${product.price_before_string}</del><span class="price">${product.price_string}</span></span>`
    : `<span class="product-price">${product.price_string}</span>`;
    const imageUrl = product.images[0].origin;

  return `
    <li id="product_${product.id}">
      <div class="flex-product-box">
        <div class="img-product-box">
          <a href="${product.url}"><img src="${imageUrl}" alt="${product.name}"></a>
        </div>
        <div class="product-info-box">
          <button class="remove" onclick="return removeItem('${product.id}', this)" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                <path d="M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M9.5 16.5L9.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M14.5 16.5L14.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
          </button>
          <h4 class="title-product-m">${product.name}</h4>
          <div class="price-old-new">
            <div class="price">${oldPrice}</div>
          </div>
          <div class="block-p-qty">
            <button class="button-plus btn-number" type="button" data-type="plus" data-field="quantity_${product.id}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#ffffff" fill="none">
                <path d="M12 4V20M20 12H4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            </button>
            <input type="text" name="quantity_${product.id}" min="1" max="100" class="input-number" value="${product.quantity}" onchange="updateMiniCartProduct('${product.id}', this.value)" readonly>
            <button class="button-minus btn-number" data-type="minus" data-field="quantity_${product.id}" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#ffffff" fill="none">
                  <path d="M20 12L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </li>`;
}

function createCartProductBundle(item) {
  return [...item.product_x, ...item.product_y].map(createCartProduct).join('');
}

function fetchCart() {
  $('.loading-cart').removeClass('d-none');
  $('#additional-cart').html('');
  $('.side-cart-items').removeClass('d-none');
  const emptyText = $('#side-cart').data('empty');

  zid.store.cart.fetch().then(response => {
    if (response.status !== "success") return alert('Error Cart');

    const cart = response.data.cart;
    let itemsHtml = '';
    let totalsHtml = '';

    $('.cart-count').html(cart.products_count);

    if (cart.products_count > 0) {
      cart.products.forEach(product => {
        itemsHtml += product.bundle_name ? createCartProductBundle(product) : createCartProduct(product);
      });

      cart.totals.forEach(total => {
        totalsHtml += `
          <li id="${total.code}" class="d-flex justify-content-between">
            <span class="title">${total.title}</span>
            <span class="number">${total.value_string}</span>
          </li>`;
      });

      $('#cart-side-totals').html(totalsHtml);
      $('.side-cart-items').html(itemsHtml);
      $('.footer-side-cart').removeClass('d-none');
    } else {
      $('#additional-cart').html(`
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" color="#ffffff" fill="none">
                <path d="M8 16H15.2632C19.7508 16 20.4333 13.1808 21.261 9.06908C21.4998 7.88311 21.6192 7.29013 21.3321 6.89507C21.045 6.5 20.4947 6.5 19.3941 6.5H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M8 16L5.37873 3.51493C5.15615 2.62459 4.35618 2 3.43845 2H2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M8.88 16H8.46857C7.10522 16 6 17.1513 6 18.5714C6 18.8081 6.1842 19 6.41143 19H17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <circle cx="10.5" cy="20.5" r="1.5" stroke="currentColor" stroke-width="1.5" />
                <circle cx="17.5" cy="20.5" r="1.5" stroke="currentColor" stroke-width="1.5" />
              </svg>
        <p>${emptyText}</p>`);
      $('#cart-side-totals, .side-cart-items').html('');
      $('.footer-side-cart').addClass('d-none');
    }

    setCartTotalAndBadge(cart);
    displayActivePaymentSessionBar(cart);
  }).finally(() => {
    $('.loading-cart').addClass('d-none');
  });
}

function removeItem(key, item) {
  $(`.side-cart-items li#product_${key} .remove`).html('<i class="cart-spinner fa-spin"></i>');
  zid.store.cart.removeProduct(key).then(response => {
    if (response.status === 'success') fetchCart();
  });
}

$(document).on('click', '.btn-number', function () {
  const type = $(this).attr('data-type');
  const fieldName = $(this).attr('data-field');
  const input = $(`input[name='${fieldName}']`);
  let currentVal = parseInt(input.val());

  if (!isNaN(currentVal)) {
    if (type === 'plus' && currentVal < parseInt(input.attr('max'))) {
      input.val(currentVal + 1).change();
    } else if (type === 'minus' && currentVal > parseInt(input.attr('min'))) {
      input.val(currentVal - 1).change();
    }
  }
});

function updateMiniCartProduct(productId, quantity) {
  const cartItems = $('.side-cart-items');
  cartItems.fadeTo('slow', 0.3);

  zid.store.cart.updateProduct(productId, quantity).then(response => {
    cartItems.fadeTo('slow', 1);
    if (response.status === 'success') {
      fetchCart();
    } else {
      $.toast({
        text: response.data.message,
        showHideTransition: 'fade',
        allowToastClose: true,
        hideAfter: 2000,
        position: 'top-right',
        textAlign: 'center',
        bgColor: '#d90000',
        textColor: '#fff',
      });
    }
  });
}