{{ 'olaboa-custom.css' | asset_url | stylesheet_tag }}

{%- comment -%}
  Calculate total "cans" for minimum order validation.
  - Products in 'shop' or 'gifts' collections count their quantity as cans.
  - Products with template_suffix 'pack' count as 3 cans per unit (minimum).
  - Other products are ignored for the can count.
{%- endcomment -%}
{%- assign total_cans = 0 -%}
{%- for item in cart.items -%}
  {%- assign is_can_product = false -%}
  {%- assign is_pack = false -%}

  {%- if item.product.template_suffix == 'pack' -%}
    {%- assign is_pack = true -%}
  {%- else -%}
    {%- for col in item.product.collections -%}
      {%- assign col_handle = col.handle | downcase -%}
      {%- if col_handle == 'shop' or col_handle == 'gifts' -%}
        {%- assign is_can_product = true -%}
        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}

  {%- if is_pack -%}
    {%- assign pack_cans = item.quantity | times: 3 -%}
    {%- assign total_cans = total_cans | plus: pack_cans -%}
  {%- elsif is_can_product -%}
    {%- assign total_cans = total_cans | plus: item.quantity -%}
  {%- endif -%}
{%- endfor -%}

{%- assign min_order_met = true -%}
{%- if cart.total_price < 2800 and cart.item_count > 0 -%}
  {%- assign min_order_met = false -%}
{%- endif -%}

<section class="olaboa-cart" data-section-id="{{ section.id }}">
  <div class="olaboa-cart__container">

    <h1 class="olaboa-cart__heading">Check out</h1>

    {%- if cart.item_count == 0 -%}
      <div class="olaboa-cart__empty">
        <p>Your cart is empty.</p>
        <a href="/pages/shop" class="olaboa-cart__continue-btn olaboa-btn">Continue Shopping</a>
      </div>
    {%- else -%}
      <div class="olaboa-cart__layout">

        {%- comment -%} LEFT: Cart items table {%- endcomment -%}
        <div class="olaboa-cart__items-wrapper">

          {%- comment -%} Table header {%- endcomment -%}
          <div class="olaboa-cart__table-header">
            <span class="olaboa-cart__th olaboa-cart__th--product">Product</span>
            <span class="olaboa-cart__th olaboa-cart__th--units">Units</span>
            <span class="olaboa-cart__th olaboa-cart__th--price">Price</span>
          </div>

          {%- comment -%} Cart items {%- endcomment -%}
          <div class="olaboa-cart__items" data-cart-items>
            {%- for item in cart.items -%}
              <div class="olaboa-cart__item" data-cart-item data-line="{{ forloop.index }}" data-key="{{ item.key }}">
                <div class="olaboa-cart__item-product">
                  <span class="olaboa-cart__item-title">{{ item.product.title }}</span>
                  {%- if item.variant.title != 'Default Title' -%}
                    <span class="olaboa-cart__item-variant">SIZE: {{ item.variant.title }}</span>
                  {%- elsif item.product.metafields.custom.subtitle != blank -%}
                    <span class="olaboa-cart__item-variant">{{ item.product.metafields.custom.subtitle }}</span>
                  {%- endif -%}
                </div>
                <div class="olaboa-cart__item-units">
                  <div class="olaboa-cart__qty" data-qty-wrap>
                    {%- if item.quantity == 1 -%}
                      <button type="button" class="olaboa-cart__qty-btn olaboa-cart__qty-btn--remove" data-qty-remove aria-label="Remove item">
                        <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3 18C2.45 18 1.979 17.804 1.587 17.412C1.195 17.02 0.999 16.549 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.804 17.021 14.412 17.413C14.02 17.805 13.549 18.001 13 18H3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="currentColor"/>
                        </svg>
                      </button>
                    {%- else -%}
                      <button type="button" class="olaboa-cart__qty-btn olaboa-cart__qty-btn--minus" data-qty-minus aria-label="Decrease quantity">−</button>
                    {%- endif -%}
                    <span class="olaboa-cart__qty-value" data-qty-value>{{ item.quantity }}</span>
                    <button type="button" class="olaboa-cart__qty-btn olaboa-cart__qty-btn--plus" data-qty-plus aria-label="Increase quantity">+</button>
                  </div>
                </div>
                <div class="olaboa-cart__item-price">
                  {{ item.final_line_price | money }}
                </div>
              </div>
            {%- endfor -%}
          </div>

          {%- comment -%} Disclaimer {%- endcomment -%}
          <div class="olaboa-cart__disclaimer {% if min_order_met %}olaboa-cart__disclaimer--hidden{% endif %}" data-cart-disclaimer>
            Disclaimer: Minimum order $28
          </div>

          {%- comment -%} Promo Code {%- endcomment -%}
          <div class="olaboa-cart__promo">
            <span class="olaboa-cart__promo-label">Promo Code</span>
            <div class="olaboa-cart__promo-input-wrap">
              <input type="text" class="olaboa-cart__promo-input" placeholder="" data-promo-input aria-label="Promo code">
              <button type="button" class="olaboa-cart__promo-btn" data-promo-apply aria-label="Apply promo code">
                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 0L14.59 1.41L20.17 7H0V9H20.17L14.59 14.59L16 16L24 8L16 0Z" fill="currentColor"/>
                </svg>
              </button>
            </div>
          </div>
        </div>

        {%- comment -%} RIGHT: Summary {%- endcomment -%}
        <div class="olaboa-cart__summary-wrapper">

          <div class="olaboa-cart__free-shipping">
            Free shipping from $75 orders!!
          </div>

          <div class="olaboa-cart__summary">
            <div class="olaboa-cart__summary-row">
              <span>Subtotal</span>
              <span data-cart-subtotal>{{ cart.total_price | money }}</span>
            </div>
            <div class="olaboa-cart__summary-divider"></div>
            <div class="olaboa-cart__summary-row">
              <span>Delivery</span>
              <span data-cart-delivery>
                {%- if cart.total_price >= 6000 -%}
                  Free
                {%- else -%}
                  Calculated at checkout
                {%- endif -%}
              </span>
            </div>
          </div>

          <div class="olaboa-cart__total">
            <span>Total</span>
            <span data-cart-total>{{ cart.total_price | money }}</span>
          </div>

          <form action="/checkout" method="post" data-checkout-form>
            {%- if min_order_met == false -%}
              <input type="hidden" name="discount" value="" data-promo-hidden>
              <button type="submit" class="olaboa-cart__checkout-btn olaboa-btn" disabled>
                Proceed to payment
                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 0L14.59 1.41L20.17 7H0V9H20.17L14.59 14.59L16 16L24 8L16 0Z" fill="currentColor"/>
                </svg>
              </button>
            {%- else -%}
              <input type="hidden" name="discount" value="" data-promo-hidden>
              <button type="submit" class="olaboa-cart__checkout-btn olaboa-btn">
                Proceed to payment
                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 0L14.59 1.41L20.17 7H0V9H20.17L14.59 14.59L16 16L24 8L16 0Z" fill="currentColor"/>
                </svg>
              </button>
            {%- endif -%}
          </form>

        </div>
      </div>
    {%- endif -%}
  </div>
</section>

<script>
(function() {
  const section = document.querySelector('[data-section-id="{{ section.id }}"]');
  if (!section) return;

  // Promo code: store and pass to checkout
  const promoInput = section.querySelector('[data-promo-input]');
  const promoApply = section.querySelector('[data-promo-apply]');
  const promoHidden = section.querySelector('[data-promo-hidden]');
  const checkoutForm = section.querySelector('[data-checkout-form]');

  if (promoApply && promoInput) {
    function applyPromo() {
      var code = promoInput.value.trim();
      if (!code) return;

      /* Store code in all hidden fields */
      section.querySelectorAll('[data-promo-hidden]').forEach(function(h) { h.value = code; });

      /* Visual feedback */
      promoInput.disabled = true;
      promoInput.style.opacity = '0.6';
      promoApply.disabled = true;

      /* Remove any previous message */
      var oldMsg = section.querySelector('.olaboa-cart__promo-msg');
      if (oldMsg) oldMsg.remove();

      var msg = document.createElement('span');
      msg.className = 'olaboa-cart__promo-msg';
      msg.style.cssText = 'display:block;margin-top:8px;font-size:13px;color:#244b38;font-family:var(--font-archivo)';
      msg.textContent = 'Code "' + code + '" will be applied at checkout.';
      promoInput.closest('.olaboa-cart__promo').appendChild(msg);
    }

    promoApply.addEventListener('click', applyPromo);
    promoInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        applyPromo();
      }
    });
  }

  /* Override checkout form to include discount in URL */
  if (checkoutForm) {
    checkoutForm.addEventListener('submit', function(e) {
      var code = promoInput ? promoInput.value.trim() : '';
      if (code) {
        e.preventDefault();
        window.location.href = '/checkout?discount=' + encodeURIComponent(code);
      }
    });
  }

  // Quantity controls via Cart AJAX API
  section.addEventListener('click', function(e) {
    const removeBtn = e.target.closest('[data-qty-remove]');
    const minusBtn = e.target.closest('[data-qty-minus]');
    const plusBtn = e.target.closest('[data-qty-plus]');

    if (!removeBtn && !minusBtn && !plusBtn) return;

    const item = (removeBtn || minusBtn || plusBtn).closest('[data-cart-item]');
    const key = item.dataset.key;
    const valueEl = item.querySelector('[data-qty-value]');
    let qty = parseInt(valueEl.textContent, 10);

    if (removeBtn) qty = 0;
    else if (minusBtn) qty = Math.max(0, qty - 1);
    else if (plusBtn) qty = qty + 1;

    // Disable buttons during update
    item.style.opacity = '0.5';
    item.style.pointerEvents = 'none';

    fetch('/cart/change.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: key, quantity: qty })
    })
    .then(function(r) { return r.json(); })
    .then(function() {
      // Reload to get fresh Liquid render (server-side min cans check etc.)
      window.location.reload();
    })
    .catch(function() {
      item.style.opacity = '1';
      item.style.pointerEvents = '';
    });
  });
})();

// Inject "Add to Cart" buttons on product-list cards
(function() {
  function initAddToCartButtons() {
    var productSection = document.querySelector('.shopify-section.ui-test-product-list');
    if (!productSection) return;

    var cards = productSection.querySelectorAll('.product-card-gallery, [class*="product-card-gallery"]');
    if (!cards.length) {
      // Fallback: find gallery containers by image ratio class
      cards = productSection.querySelectorAll('[class*="image-ratio"]');
    }
    if (!cards.length) {
      // Fallback: find all product card links with images
      var allLinks = productSection.querySelectorAll('a[href*="/products/"]');
      var galleries = [];
      allLinks.forEach(function(link) {
        var img = link.querySelector('img');
        if (img) {
          var parent = link.closest('[class*="gallery"], [class*="media"]') || link.parentElement;
          if (parent && !parent.querySelector('.olaboa-atc-btn')) {
            galleries.push({ container: parent, link: link });
          }
        }
      });

      galleries.forEach(function(item) {
        var href = item.link.getAttribute('href');
        var variantMatch = href.match(/variant=(\d+)/);
        var variantId = variantMatch ? variantMatch[1] : null;

        if (!variantId) {
          // Try to get from product-price data-product-id nearby
          var card = item.container.closest('[class*="product-card"]') || item.container.parentElement;
          var priceEl = card ? card.querySelector('product-price') : null;
          // We'll use the product URL approach instead
        }

        var btn = document.createElement('button');
        btn.className = 'olaboa-atc-btn';
        btn.innerHTML = '+ Add to cart';
        btn.type = 'button';

        btn.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();

          if (!variantId && href) {
            // Fetch the product JSON to get the first variant
            var productHandle = href.split('/products/')[1];
            if (productHandle) productHandle = productHandle.split('?')[0];
            fetch('/products/' + productHandle + '.js')
              .then(function(r) { return r.json(); })
              .then(function(product) {
                return addToCart(product.variants[0].id);
              });
          } else if (variantId) {
            addToCart(variantId);
          }
        });

        item.container.style.position = 'relative';
        item.container.appendChild(btn);
      });
      return;
    }
  }

  function addToCart(variantId) {
    return fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: [{ id: parseInt(variantId), quantity: 1 }] })
    })
    .then(function(r) { return r.json(); })
    .then(function() {
      window.location.reload();
    });
  }

  // Wait for product-list section to render
  if (document.readyState === 'complete') {
    setTimeout(initAddToCartButtons, 500);
  } else {
    window.addEventListener('load', function() {
      setTimeout(initAddToCartButtons, 500);
    });
  }
})();
</script>

{% schema %}
{
  "name": "OlaBoa Cart",
  "tag": "section",
  "settings": [],
  "templates": ["cart"]
}
{% endschema %}