document.addEventListener("DOMContentLoaded", function () {
  fetchCart();
  const myOffcanvas = document.getElementById("side-cart");
  myOffcanvas.addEventListener("hidden.bs.offcanvas", (event) => {
    $(".item-inside-cart").html("");
    $(".loading-cart").removeClass("d-none");
    $(".footer-side-cart").addClass("d-none");
  });
  myOffcanvas.addEventListener("show.bs.offcanvas", (event) => {
    $(".loading-cart").addClass("d-none");
    fetchCart();
  });
});
function productCartAddToCart(elm, product_id) {
  var html = $(elm).html();
  $(elm).html(
    '<div class="spinner-border spinner-border-sm " role="status"><span class="visually-hidden">Loading...</span></div>'
  );

  addToCart(product_id, 1, function () {
    $(elm).html(html);
    var bsOffcanvas = new bootstrap.Offcanvas(
      document.getElementById("side-cart")
    );
    bsOffcanvas.show();
  });
}
function addToCart(product_id, quantity, onCompleted) {
  zid.store.cart
    .addProduct({ productId: product_id, quantity: quantity })
    .then(async function (response) {
      if (response.status === "success") {
        setCartTotalAndBadge(response.data.cart);
        await fetchCart();
        if (onCompleted) {
          await onCompleted();
        }
      }
    });
}
function setCartTotalAndBadge(cart) {
  setCartBadge(cart.products_count);
  var cartTotal = getCartTotal(cart);
  if (cartTotal) {
    setCartIconTotal(cartTotal);
  }
}

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

function setCartBadge(badge) {
  if (badge > 0) {
    $(".cart-badge").removeClass("d-none").html(badge);
  } else {
    $(".cart-badge").addClass("d-none");
  }
}
function displayActivePaymentSessionBar(cart) {
  if (cart.is_reserved) {
    $(".payment-session-bar").removeClass("d-none");
  }
}
/*function fetchCart() {
    zid.store.cart.fetch().then(function (response) {
        if(response.status  === 'success'){
            if(response.data) {
                setCartTotalAndBadge(response.data.cart);
                displayActivePaymentSessionBar(response.data.cart);
            }
        }
    })
}*/
function getCartTotal(cart) {
  if (cart && cart.totals && cart.totals.length > 0) {
    var cartTotalItem = cart.totals.filter(function (total) {
      return total.code === "total";
    });

    if (cartTotalItem.length > 0) {
      return cartTotalItem[0].value_string;
    }
  }

  return null;
}

function updateMiniCartProduct(productId, quantity) {
  $(".item-inside-cart").addClass("action-start");
  zid.store.cart.updateProduct(productId, quantity).then(function (response) {
    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",
      });
    }
  });
}

function createCartProduct(product) {
  let html_item = "";
  html_item += `<li id="product_${product.id}">
                <div class="row align-items-center justify-content-center m-0">
                    <div class="col-3">
                        <a href="${product.url}">`;

  html_item += `<img src="${product.images[0]["thumbs"]["small"]}" alt="">`;
  html_item += `        </a>
                    </div>
                    <div class="col-9 product-info">
                        <button class="remove" onclick="return removeItem('${product.id}',this)" type="button"><i class="fa-solid fa-trash"></i></button>
                        <h4 class="title-m">${product.name}</h4>
                        <div class="d-flex justify-content-between">
                            <div class="price">`;
  var new_price = product.price_string;
  if (product.price_before_string) {
    var old_price = product.price_before_string;
    html_item += `<span class="price-discount">
                    <del class="old">${old_price}</del>
                    <span class="price">${new_price}</span>
					</span>`;
  } else {
    html_item += `<span class="product-price">
							<span class="price">${new_price}</span>
							</span>`;
  }

  html_item += `</div>
                        </div>
		  <div class="block-p-qty" >
            <button class="button-plus btn-number" type="button" data-type="plus" data-field="quantity_${product.id}" >
            <i class="fa fa-plus"></i>
            </button>
            <input type="text" id="product-quantity" name="quantity_${product.id}" min="1" max="100" class="input-number" value="${product.quantity}" onchange="updateMiniCartProduct('${product.id}', $(this).val())" readonly>
            <button class="button-minus btn-number" data-type="minus" data-field="quantity_${product.id}" type="button" >
            <i class="fa fa-minus"></i>
            </button>
         </div>					
                    </div>
                </div>
            </li>`;
  return html_item;
}
function createCartProductBundle(item) {
  let productsHtml = "";

  item.product_x.forEach((product) => {
    productsHtml += createCartProduct(product);
  });
  item.product_y.forEach((product) => {
    productsHtml += createCartProduct(product);
  });

  return productsHtml;
}
function fetchCart() {
  $("#additional-cart").html("");
  $(".side-cart-items").removeClass("d-none");
  $(".block-side-cart .loading-cart").removeClass("d-none");
  $(".block-side-cart .item-inside-cart").addClass("action-start");
  var empty_text = $("#side-cart").data("empty");
  zid.store.cart
    .fetch()
    .then(function (response) {
      if (response.status === "success") {
        var cart = response.data.cart,
          html_item = "",
          total_html = "";
        $(".cart-count").html(cart.products_count);
        if (cart.products_count > 0) {
          cart.products.map(function (product) {
            if (product.bundle_name)
              html_item += createCartProductBundle(product);
            else html_item += createCartProduct(product);
          });
          var cartTotal;
          cart.totals.map(function (total) {
            var total_curr = total["value_string"];
            if (total["code"] === "total") {
              cartTotal = total["value"];
            }
            total_html += `<li id="${total["code"]}" class="d-flex justify-content-between">
                        <span class="title">${total["title"]}</span>
                        <span class="number">${total_curr}</span>
                        </li>`;
          });

          $("#cart-side-totals").html(total_html);
          $(".side-cart-items").html(html_item);
          $(".footer-side-cart").removeClass("d-none");
        } else {
          $("#additional-cart").html("<p>" + empty_text + "</p>");
          $("#cart-side-totals,.side-cart-items").html("");
          $(".footer-side-cart").addClass("d-none");
        }

        // shipping
        if (cart.discount_rules && cartTotal) {
          cart.discount_rules.forEach((rule) => {
            if (rule.code === "free_shipping") {
              rule.conditions.forEach((condition) => {
                if (
                  condition.field === "subtotal" &&
                  condition.operator === "between_inclusive"
                ) {
                  let free_shipping_text =
                    window.translations.free_shipping_description;

                  let completedPercentage = 100;
                  let $free_shipping_rules = $("#side-cart .shipping-alert");
                  $free_shipping_rules.empty();

                  if (cartTotal < condition.value) {
                    let difference = (condition.value - cartTotal).toFixed(2);
                    completedPercentage = Math.round(
                      (cartTotal / condition.value) * 100
                    );
                    let shipping_text_replaced = free_shipping_text.replace(
                      "{X}",
                      `<span class="cr fwm">${difference}</span>`
                    );
                    $free_shipping_rules.append(
                      "<span>" + shipping_text_replaced + "</span>"
                    );
                  } else {
                    $free_shipping_rules.append(
                      '<span class="free-shipping">' +
                        window.translations.free_shipping +
                        "</span>"
                    );
                  }
                  $("#side-cart #cart-shipping").removeClass("d-none");

                  $("#side-cart .bar").css("width", completedPercentage + "%");
                  $("#side-cart .cart-shipping-notice").removeClass("d-none");
                }
              });
            } else {
              $("#side-cart .cart-shipping-notice").addClass("d-none");
            }
          });
        } else {
          $("#side-cart .cart-shipping-notice").addClass("d-none");
        }

        //coupon
        /*var $couponBtn = $('.apply_coupon');
            var $couponCode = $('.coupon-code');

            if(cart.coupon){
                $couponBtn.text(window.translations.remove_coupon);
                $couponCode.val(cart.coupon.code);
                $couponCode.attr('disabled', true);

                $couponBtn.off().on('click', () => {
                    $couponCode.val('');
                    removeCoupon()
                });
            }
            else{
                $couponCode.attr('disabled', false);
                $couponBtn.text(window.translations.add_coupon);
                $couponBtn.off().on('click',  (e) => {
                    addCoupon($couponCode.val(), e)
                });
            }*/

        setCartTotalAndBadge(response.data.cart);
        displayActivePaymentSessionBar(response.data.cart);
      } else {
        alert("Error Cart");
      }
    })
    .catch((errors) => {})
    .finally(() => {
      $(".block-side-cart .item-inside-cart").removeClass("action-start");
      $(".block-side-cart .loading-cart").addClass("d-none");
    });
}

function addCoupon(coupon_code) {
  var $couponBtn = $(".apply_coupon");

  if (coupon_code.trim().length !== 0) {
    var $actions = $(".footer-side-cart");
    $actions.fadeTo("slow", 0.3);
    $couponBtn.html('<i class="fas fa-sync fa-spin"></i>');

    zid.store.cart.redeemCoupon(coupon_code).then((response) => {
      $actions.fadeTo("slow", 1);

      if (response.status === "success") {
        $.toast({
          text: window.translations.coupon_added,
          showHideTransition: "fade",
          allowToastClose: true,
          hideAfter: 2000,
          position: "top-right",
          textAlign: "center",
          bgColor: "#d4edda",
          textColor: "#155724",
        });
        fetchCart();
      } else {
        $.toast({
          text: response?.data?.message ?? window.translations.sorry,
          showHideTransition: "fade",
          allowToastClose: true,
          hideAfter: 2000,
          position: "top-right",
          textAlign: "center",
          bgColor: "#d90000",
          textColor: "#fff",
        });
        $couponBtn.html(window.translations.add_coupon);
      }
    });
  } else {
    $.toast({
      text: window.translations.coupon_discount_enter,
      showHideTransition: "fade",
      allowToastClose: true,
      hideAfter: 2000,
      position: "top-right",
      textAlign: "center",
      bgColor: "#d90000",
      textColor: "#fff",
    });
  }
}

function removeCoupon() {
  var $actions = $(".footer-side-cart");
  $actions.fadeTo("slow", 0.3);

  var $couponBtn = $(".apply_coupon");
  $couponBtn.html('<i class="fas fa-sync fa-spin"></i>');

  zid.store.cart.removeCoupon().then((response) => {
    $actions.fadeTo("slow", 1);

    if (response.status === "success") {
      $.toast({
        text: window.translations.coupon_remove,
        showHideTransition: "fade",
        allowToastClose: true,
        hideAfter: 2000,
        position: "top-right",
        textAlign: "center",
        bgColor: "#d4edda",
        textColor: "#155724",
      });
      fetchCart();
    } else {
      $.toast({
        text: response?.data?.message ?? window.translations.sorry,
        showHideTransition: "fade",
        allowToastClose: true,
        hideAfter: 2000,
        position: "top-right",
        textAlign: "center",
        bgColor: "#d90000",
        textColor: "#fff",
      });
      $couponBtn.html(window.translations.remove_coupon);
    }
  });
}

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(function (response) {
    if (response.status === "success") {
      fetchCart();
    }
  });
}