document.addEventListener('DOMContentLoaded', productForm);
    document.addEventListener('shopify:section:load', productForm);
    function productForm() {
      var productDetailArr = document.querySelectorAll('.product-detail');
      for (let i = 0; i < productDetailArr.length; i++) {
        let addToCartData = {};
        let productDetail = productDetailArr[i];
        let recipientShopifySend = productDetail.querySelector('input[name="properties[__shopify_send_gift_card_to_recipient]"]');
        window.addEventListener('pageshow', function (event) {
          if (recipientShopifySend) { recipientShopifySend.checked = false; }
        });
        var giftCardError = productDetail.querySelector('.gift-card-error');
        if (giftCardError) { var giftCardErrorMessage = giftCardError.querySelector('.error-message'); }
        const recipientForm = productDetail.querySelector('.recipient-form');
        toggleRecipientForm();
        if (recipientShopifySend) { recipientShopifySend.addEventListener('change', toggleRecipientForm); }
        function toggleRecipientForm() {
          if (recipientShopifySend && recipientShopifySend.checked) {
            recipientForm.style.display = 'block';
          } else {
            if (recipientForm) {
              recipientForm.style.display = 'none';
              var recipientEmail = productDetail.querySelector('input[name="properties[Recipient email]"]');
              var recipientName = productDetail.querySelector('input[name="properties[Recipient name]"]');
              var recipientMessage = productDetail.querySelector('textarea[name="properties[Message]"]');
              recipientEmail.value = '';
              recipientName.value = '';
              recipientMessage.value = '';
            }
            if (giftCardError) { giftCardError.classList.remove('show'); }
          }
        }
        function giftCardRecipentAdd() {
          if (recipientShopifySend?.checked) {
            var recipientEmail = productDetail.querySelector('input[name="properties[Recipient email]"]').value;
            var recipientName = productDetail.querySelector('input[name="properties[Recipient name]"]').value;
            var recipientMessage = productDetail.querySelector('textarea[name="properties[Message]"]').value;
            addToCartData['properties'] = {
              __shopify_send_gift_card_to_recipient: `on`,
              'Recipient email': `${recipientEmail}`,
              'Recipient name': `${recipientName}`,
              Message: `${recipientMessage}`,
            };
          }
        }
        function addToCart() {
          addToCartData = {};
          var addToCartButton = productDetail.querySelector('button[name="add"].popup');
          var productId = productDetail.querySelector('input[name="id"]').value;
          var quantity = productDetail.querySelector('input[name="quantity"]:not([type="hidden"])').value;
          var giftCardError = productDetail.querySelector('.gift-card-error');
          var giftCardErrorMessage = giftCardError.querySelector('.error-message');
          var cartCountElWrapper = document.querySelector('.header-cart');
          var cartCountEl = document.querySelector('.header-cart').querySelector('.cart-count');
          var currentProductCartCountEl = productDetail.querySelector('[data-cart-count]');
          var currentProductCartCount = productDetail.querySelector('[data-cart-count]').getAttribute('data-cart-count') * 1;
          if (cartCountEl) {
            var cartCount = cartCountEl.innerHTML * 1;
          } else {
            var cartCount = 0;
          }
          var addQuantity = quantity * 1;
          addToCartData['id'] = productId;
          addToCartData['quantity'] = quantity;
          var sellingPlans = productDetail.querySelectorAll('[name="selling_plan"]');
          sellingPlans.forEach(function (plan) {
            if (plan.checked) {
              if (plan.value != '') { addToCartData['selling_plan'] = plan.value; }
            }
          });
          giftCardRecipentAdd();
          var xhr = new XMLHttpRequest();
          xhr.open('POST', '/cart/add.js');
          xhr.setRequestHeader('Content-Type', 'application/json');
          xhr.onload = function () {
            if (xhr.status === 200) {
              var item = JSON.parse(xhr.responseText);
              var cartSection = document.querySelector('.cart-section-wrapper');
              if (cartSection) {
                function handleResponse() {
                  if (this.status === 200) {
                    let newCart = new DOMParser().parseFromString(this.responseText, 'text/html');
                    var newCartSection = newCart.querySelector('.cart-section-wrapper');
                    cartSection.innerHTML = newCartSection.innerHTML;
                    let quantity_btn = document.querySelectorAll(".cart-container .quantity-btn");
                    for (let i = 0; i < quantity_btn.length; i++) {
                      quantity_btn[i].addEventListener("click", cartQuantity);
                    }
                    const quantity_input = document.querySelectorAll('input[name="updates[]"]');
                    for (let i = 0; i < quantity_input.length; i++) {
                      quantity_input[i].addEventListener("input", cartQuantityError);
                      quantity_input[i].addEventListener("change", (event) => { handleQuantityChange(event.target) });
                    }
                  } else {
                    console.log(this.statusText)
                  }
                }
                const request = new XMLHttpRequest();
                request.addEventListener('load', handleResponse);
                request.open('GET', window.location.pathname + '?section_id=' + cartSection.dataset.id, true);
                request.send();
              }
              if (cartCountEl) {
                cartCountEl.innerHTML = cartCount + addQuantity;
              } else {
                cartCountElWrapper.innerHTML += `<span class="cart-count">${cartCount + addQuantity}</span>`;
              }
              const sameVariantArray = document.querySelectorAll(`.buy-buttons-wrapper input[name="id"][value="${productId}"]`);
              const productDetails = Array.from(sameVariantArray).map(input => input.closest('.product-detail'));
              productDetails.forEach(variant => {
                let variantProductCartCountEl = variant.querySelector('[data-cart-count]');
                variantProductCartCountEl.setAttribute('data-cart-count', currentProductCartCount + addQuantity);
              });
              hideAddToCartError(productDetail);
              var popupProductWrapper = document.querySelector('#cart-popup-product');
              popupProductWrapper.innerHTML = '';
              if (item.image) {
                var imageUrl = item.image;
                var widthParam = 'width=100';
                if (imageUrl.includes('?')) {
                  imageUrl += '&' + widthParam;
                } else {
                  imageUrl += '?' + widthParam;
                }
                var popupImage = `<div class="cart-popup-image-container"><div class="cart-popup-ratio-image"><img src="${imageUrl}" alt="${item.title}" class="cart-popup-image" width="100" height="75" loading="lazy"></div></div>`;
                popupProductWrapper.innerHTML += popupImage;
              }
              popupProductWrapper.innerHTML += '<div class="cart-popup-details"></div>';
              var popupDetailWrapper = document.querySelector('#cart-popup-product .cart-popup-details');
              var popupProductTitle = `<p class="cart-popup-title">${item.product_title}</p>`;
              var cart_count_elemet = document.querySelector('.btn_cart_count');
              var cart_count_value = cartCount + addQuantity;
              cart_count_elemet.innerHTML = '( ' + cart_count_value + ' )';
              popupDetailWrapper.innerHTML += popupProductTitle;
              var productUnitPrice = productDetail.querySelector('.product-unit-price');
              if (productUnitPrice) {
                var popupProductUnitPrice = `<div class="cart-popup-product-unit-price"><small class="product-unit-price">${productUnitPrice.innerHTML}</small></div>`;
                popupDetailWrapper.innerHTML += popupProductUnitPrice;
              }
              if (item.variant_title) {
                var popupOptionArray = item.options_with_values;
                for (let i = 0; i < popupOptionArray.length; i++) {
                  var popupProductOption = `<div class="cart-popup-option-wrapper">${popupOptionArray[i].name}: ${popupOptionArray[i].value}</div>`;
                  popupDetailWrapper.innerHTML += popupProductOption;
                }
              }
              if (item.selling_plan_allocation) {
                var popupSellingPlan = item.selling_plan_allocation.selling_plan.name;
                popupDetailWrapper.innerHTML += `<p class="cart-popup-selling-plan">${popupSellingPlan}</p>`;
              }
              const itemProperties = item.properties;
              const propertiesLength = Object.keys(itemProperties).length;
              if (propertiesLength > 0) {
                for (let key in itemProperties) {
                  const firstKey = key.slice(0, 1);
                  if (firstKey !== '_' && itemProperties[key] != '') {
                    var popupProductProperties = `<div class="cart-popup-option-wrapper">${key}: ${itemProperties[key]}</div>`;
                    popupDetailWrapper.innerHTML += popupProductProperties;
                  }
                }
              }
              var popupElement = document.querySelector('.cart-popup-wrapper');
              let productDetailID = productDetail.getAttribute('id');
              let cartPopupClose = popupElement.querySelector('.cart-popup-close');
              cartPopupClose.setAttribute('data-section', productDetailID);
              popupElement.classList.add('open');
              setTimeout(function () { popupElement.classList.add('show'); }, 10);
              popupElement.focus();
              if (recipientShopifySend) {
                recipientShopifySend.checked = false;
                recipientShopifySend.dispatchEvent(new Event('change'));
              }
              giftCardError.classList.remove('show');
              addToCartButton.classList.remove('temp-disable');
            } else {
              var errorResponse = JSON.parse(xhr.responseText);
              var errorMessage = errorResponse.message.split(':');
              giftCardErrorMessage.innerHTML = errorMessage[1];
              giftCardError.classList.add('show');
              console.log('Request failed.  Returned status of ' + xhr.status);
              addToCartButton.classList.remove('temp-disable');
            }
          };
          xhr.send(JSON.stringify(addToCartData));
        }
        cartPopupColor();
        function cartPopupColor() {
          var popupElement = document.querySelector('.cart-popup-wrapper');
          if (popupElement) {
            var classesToRemove = [];
            popupElement.classList.forEach(function (className) {
              if (className.startsWith('color-')) { classesToRemove.push(className); }
            });
            classesToRemove.forEach(function (className) { popupElement.classList.remove(className); });
            var popupColor = document.querySelector('.product-section-wrapper');
            if (popupColor && popupColor.dataset.productBg) { popupElement.classList.add('color-' + popupColor.dataset.productBg); }
          }
        }
        addToCartHandle();
        function addToCartHandle() {
          var addToCartButton = productDetail.querySelector('button[name="add"]');
          if (addToCartButton) {
            addToCartButton.addEventListener('click', function (event) {
              var productCartCount = productDetail.querySelector('[data-cart-count]').getAttribute('data-cart-count') * 1;
              var productQuantityEl = productDetail.querySelector('[name="quantity"]:not([type="hidden"])');
              var productMaxCount = productQuantityEl.getAttribute('max') * 1;
              var productQuantityValue = productQuantityEl.value * 1;
              addToCartButton.classList.add('temp-disable');
              if (addToCartButton.classList.contains('popup')) {
                event.preventDefault();
                cartPopupClose();
              }
              if (productMaxCount) {
                var productTotalCartCount = productCartCount + productQuantityValue;
                if (productTotalCartCount <= productMaxCount) {
                  if (addToCartButton.classList.contains('popup')) {
                    setTimeout(function () { addToCart(); }, 300);
                  } else {
                    addToCartButton.classList.remove('temp-disable');
                  }
                } else {
                  event.preventDefault();
                  var addToCartError = productDetail.querySelector('.add-to-cart-error');
                  var addToCartErrorMessage = addToCartError.querySelector('.error-message');
                  addToCartErrorMessage.innerHTML = 'You can&#39;t add more of this product in your cart';
                  addToCartError.classList.add('show');
                  addToCartButton.classList.remove('temp-disable');
                }
              } else {
                if (addToCartButton.classList.contains('popup')) {
                  setTimeout(function () { addToCart(); }, 300);
                } else {
                  addToCartButton.classList.remove('temp-disable');
                }
              }
            });
          }
        }
        const iframe = productDetail.querySelector('.product-description iframe');
        iframeRatio();
        window.addEventListener('resize', iframeRatio);
        function iframeRatio() {
          if (iframe) {
            const width = iframe.getAttribute('width');
            const height = iframe.getAttribute('height');
            const aspectRatio = (height / width) * 100;
            const iframe_width = iframe.offsetWidth;
            const newIframeHeight = iframe_width * (aspectRatio / 100);
            if (width && height) { iframe.style.height = `${newIframeHeight}px`; }
          }
        }
      }
      function cartPopupClose() {
        var popupElement = document.querySelector('.cart-popup-wrapper');
        popupElement.classList.remove('show');
        var popupProductWrapper = document.querySelector('#cart-popup-product');
        setTimeout(function () {
          popupElement.classList.remove('open');
          popupProductWrapper.innerHTML = '';
        }, 300);
      }
      const cartPopupCloseEl = document.querySelector('.cart-popup-close');
      if (cartPopupCloseEl) {
        cartPopupCloseEl.addEventListener('click', function () {
          cartPopupClose();
          let popupDetailID = this.dataset.section;
          let popupDetail = document.querySelector('#' + popupDetailID);
          popupDetail.querySelector('button[name="add"]').focus();
        });
      }
      document.addEventListener('click', function (event) {
        var popupElement = document.querySelector('.cart-popup-wrapper');
        var addButton = document.querySelector('button[name="add"]');
        if (popupElement) { if (!popupElement.contains(event.target) && event.target !== addButton) { cartPopupClose(); } }
      });
      document.addEventListener('keydown', function (event) {
        let popupElement = document.querySelector('.cart-popup-wrapper');
        if (event.key === 'Escape' && popupElement) {
          cartPopupClose();
          let popupClose = popupElement.querySelector('.cart-popup-close');
          let popupDetailID = popupClose.dataset.section;
          let popupDetail = document.querySelector('#' + popupDetailID);
          if (popupDetail) { popupDetail.querySelector('button[name="add"]').focus(); }
        }
      });
    }
    function hideAddToCartError(thisSection) {
      var addToCartError = thisSection.querySelector('.add-to-cart-error');
      var addToCartErrorMessage = addToCartError.querySelector('.error-message');
      addToCartError.classList.remove('show');
      addToCartErrorMessage.innerHTML = '';
    }
    document.addEventListener('shopify:section:load', pickupFocus);
    document.addEventListener('DOMContentLoaded', pickupFocus);
    function pickupFocus() {
      var pickupModalArr = document.querySelectorAll('.pick-up-modal');
      for (let i = 0; i < pickupModalArr.length; i++) {
        let pickupModal = pickupModalArr[i];
        pickupModal.addEventListener('keydown', function (event) { trapFocus(event, pickupModal); });
      }
    }
    document.addEventListener('shopify:section:load', cartPopupFocus);
    document.addEventListener('DOMContentLoaded', cartPopupFocus);
    function cartPopupFocus() {
      var cartPopupEl = document.getElementById('cart-popup');
      if (cartPopupEl) { cartPopupEl.addEventListener('keydown', function (event) { trapFocus(event, cartPopupEl); }); }
    }