{% comment %}
  Option 3 - Cart Page: Per-Product Checkbox

  Renders a checkbox row beneath each cart line item that has an AKKO plan
  associated via metafields, with the price delta shown inline. When checked,
  the protection plan is added as a separate line item. Outputs a <tr> so it
  works inside Dawn's cart <table>.

  Usage (inside the {% for item in cart.items %} loop, after the </tr>):
    {% render 'cart-per-product-checkbox',
        item: item,
        loop_index: forloop.index %}

  Requirements:
    - `item`: the current cart line item object.
    - `loop_index`: forloop.index - keeps IDs unique per row.
    - Products without the `akko.plan` metafield are skipped automatically.

  ---------------------------------------------------------------------------
  REFERENCE EXAMPLE - adapt before use.

  Provided as a starting point and written against Shopify's Dawn theme.
  Markup, class names and styling will need adjusting to fit your own theme.
  Always test in a duplicated, unpublished theme before publishing. AKKO does
  not warrant this code as production-ready for any particular store.
  ---------------------------------------------------------------------------
{% endcomment %}

{% assign item_plan_list = item.product.metafields.akko.plan.value %}
{% if item_plan_list != blank and item_plan_list.size > 0 %}
  {% assign protection_plan = item_plan_list | first %}

  {% if protection_plan != blank and protection_plan.available %}
    {% assign protection_variant = protection_plan.selected_or_first_available_variant %}

    {% if protection_variant != blank %}

      {% assign plan_already_in_cart = false %}
      {% for ci in cart.items %}
        {% if ci.variant_id == protection_variant.id %}
          {% assign plan_already_in_cart = true %}
          {% assign plan_line_key = ci.key %}
          {% break %}
        {% endif %}
      {% endfor %}

      <tr class="cart-item-protection-row">
        <td colspan="5" style="padding:0;border:none;">
          <div
            class="cart-item-protection"
            id="CartItemProtection-{{ loop_index }}"
            data-variant-id="{{ protection_variant.id }}"
            {% if plan_already_in_cart %}data-plan-line-key="{{ plan_line_key }}"{% endif %}
          >
            <button
              type="button"
              class="cart-item-protection__checkbox {% if plan_already_in_cart %}is-checked{% endif %}"
              id="ProtectionCheckbox-{{ loop_index }}"
              role="checkbox"
              aria-checked="{{ plan_already_in_cart }}"
              aria-label="Add {{ protection_plan.title }} for {{ item.product.title }}"
            >
              <svg class="cart-item-protection__check-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" aria-hidden="true">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </button>

            <div class="cart-item-protection__label">
              <strong>Add {{ protection_plan.title }}</strong>
              <span>{{ protection_plan.description | strip_html | truncate: 80 }}</span>
            </div>

            <div class="cart-item-protection__price">
              +{{ protection_variant.price | money }}
            </div>
          </div>
        </td>
      </tr>
    {% endif %}
  {% endif %}
{% endif %}

<style>
  .cart-item-protection-row td {
    padding: 0 !important;
    border: none !important;
  }

  .cart-item-protection {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px dashed #e0ddd7;
    background: #fafaf8;
  }

  .cart-item-protection__checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
  }
  .cart-item-protection__checkbox.is-checked {
    background: var(--protection-color, #c8400a);
    border-color: var(--protection-color, #c8400a);
    color: #fff;
  }
  .cart-item-protection__check-icon {
    display: none;
  }
  .cart-item-protection__checkbox.is-checked .cart-item-protection__check-icon {
    display: block;
  }

  .cart-item-protection__label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
  }
  .cart-item-protection__label strong {
    display: block;
    color: #1a1a1a;
    margin-bottom: 2px;
  }
  .cart-item-protection__label span {
    color: #888;
    font-size: 12px;
  }

  .cart-item-protection__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--protection-color, #c8400a);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cart-item-protection--loading {
    opacity: 0.6;
    pointer-events: none;
  }
</style>

<script>
(function () {
  var container = document.getElementById('CartItemProtection-{{ loop_index }}');
  var checkbox  = document.getElementById('ProtectionCheckbox-{{ loop_index }}');
  if (!container || !checkbox) return;

  var variantId   = parseInt(container.dataset.variantId, 10);
  var planLineKey = container.dataset.planLineKey || null;

  checkbox.addEventListener('click', async function () {
    var isChecked = checkbox.classList.contains('is-checked');
    container.classList.add('cart-item-protection--loading');

    try {
      if (isChecked) {
        if (planLineKey) {
          var res = await fetch(window.Shopify.routes.root + 'cart/change.js', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: planLineKey, quantity: 0 })
          });
          if (!res.ok) throw await res.json();
        }
      } else {
        var res = await fetch(window.Shopify.routes.root + 'cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] })
        });
        if (!res.ok) throw await res.json();
      }
      window.location.reload();
    } catch (err) {
      console.error('[Akko] Protection plan error:', err);
      alert((err && err.description) || 'Something went wrong. Please try again.');
      container.classList.remove('cart-item-protection--loading');
    }
  });
})();
</script>