{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}

{# Variants as accordion with inline image, stock and add-to-cart #}
<div id="sylius-product-variants" {{ sylius_test_html_attribute('product-variants') }} class="variant-accordion d-flex flex-column gap-2">
  {% for key, variant in product.enabledVariants %}
    {% set channelPricing = variant.getChannelPricingForChannel(sylius.channel) %}
    {% set appliedPromotions = channelPricing.appliedPromotions|map(promotion => ({'label': promotion.label, 'description': promotion.description})) %}
    {% set days = sylius.channel.channelPriceHistoryConfig.lowestPriceForDiscountedProductsCheckingPeriod %}
    {% set hasLowestPrice = variant|sylius_has_lowest_price({'channel': sylius.channel})%}
    {% set hasDiscount = variant|sylius_has_discount({'channel': sylius.channel}) %}

    {% set available = sylius_inventory_is_available(variant) %}

    {# Variant image resolution #}
    {% set variantImage = null %}
    {% if variant.images|length > 0 %}
      {% for image in variant.images %}
        {% if variantImage is null and image.path is not empty %}
          {% set variantImage = image %}
        {% endif %}
      {% endfor %}
    {% endif %}
    {% if variantImage is null %}
      {% for image in product.images %}
        {% if variantImage is null and image.productVariants is defined and image.path is not empty %}
          {% for linkedVariant in image.productVariants %}
            {% if variantImage is null and linkedVariant.id is defined and linkedVariant.id == variant.id %}
              {% set variantImage = image %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    {% endif %}
    {% set hasVariantImage = variantImage is not null %}
    {% set variantImageSrc = hasVariantImage ? variantImage.path|imagine_filter('sylius_shop_product_thumbnail') : null %}
    {% set variantImageOriginal = hasVariantImage ? variantImage.path|imagine_filter('sylius_shop_product_original') : null %}

    {# Stock calculation (approx): onHand - onHold when tracked #}
    {% set isTracked = variant.tracked is defined ? variant.tracked : true %}
    {% set onHand = variant.onHand is defined ? variant.onHand : null %}
    {% set onHold = variant.onHold is defined ? variant.onHold : 0 %}
    {% set stockQty = isTracked and onHand is not null ? (onHand - onHold) : null %}

    <div class="variant-accordion-item {{ not available ? 'disabled' : '' }}" data-variant-index="{{ key }}" data-stock="{{ stockQty is not null ? stockQty : '' }}" data-available="{{ available ? '1' : '0' }}">
      {% set isOpen = form.cartItem.variant[key].vars.checked %}
      <div class="variant-accordion-card {{ isOpen ? 'open' : '' }}">
        {% set _attr = {'class': 'd-none'} %}
        {% if not available %}
          {% set _attr = _attr|merge({'disabled': true}) %}
        {% endif %}
        {{ form_widget(form.cartItem.variant[key], {
          'attr': _attr,
          'label': false,
          'label_attr': {'class': 'd-none'}
        }) }}

        {# Header: clickable to select and toggle #}
        <button type="button"
                class="variant-accordion-header w-100 d-flex align-items-center justify-content-between gap-3 mb-0 p-3 border-0 {{ not available ? 'disabled' : '' }}"
                data-js-accordion-toggle
                aria-expanded="{{ isOpen ? 'true' : 'false' }}"
                {% if not available %}disabled{% endif %}>
          <span class="d-flex align-items-center gap-3 text-start">
            <span>
              <span class="fw-semibold d-block">{{ variant.name|default(variant.descriptor) }}</span>
              {% if product.hasOptions() %}
                <small class="text-muted">
                  {% for optionValue in variant.optionValues %}
                    {{ optionValue.value }}{% if not loop.last %} • {% endif %}
                  {% endfor %}
                </small>
              {% endif %}
            </span>
          </span>

          {# Right side: price + closed-state thumbnail on the right #}
          {% if hasDiscount and hasLowestPrice %}
            {% set _lowestRaw = variant|sylius_calculate_lowest_price({'channel': sylius.channel}) %}
            {% set _lowestConv = _lowestRaw|sylius_convert_money(sylius.channel.baseCurrency.code, sylius.currencyCode) %}
            {% set lowestPriceBeforeDiscount = _lowestConv|sylius_format_money(sylius.currencyCode, sylius.localeCode) %}
          {% else %}
            {% set lowestPriceBeforeDiscount = null %}
          {% endif %}
          <span class="sylius-product-variant-price text-nowrap"
                data-applied-promotions='{{ appliedPromotions|json_encode }}'
                {% if hasDiscount %} data-original-price="{{ money.calculate_original_price(variant) }}"{% endif %}
                {% if hasDiscount and hasLowestPrice %} data-lowest-price-before-discount="{{ 'sylius.ui.lowest_price_days_before_discount_was'|trans({'%days%': days, '%price%': lowestPriceBeforeDiscount}) }}"{% endif %}
          >
            {{ money.calculatePrice(variant) }}
          </span>
        </button>

        {# Body: image (bigger), stock and controls #}
        <div class="variant-accordion-body" style="display: {{ isOpen ? 'block' : 'none' }};">
          <div class="p-2 d-flex align-items-center" style="gap: .375rem;">
            {# Left column: delivery info (no frame), stock, quantity, button all stacked vertically #}
            <div class="flex-grow-1 d-flex flex-column gap-1 min-w-0 variant-left">
              {# Delivery information from associated suppliers (plain, no label) #}
              {% for link in variant.suppliers %}
                {% set info = link.supplier.deliveryInformation %}
                {% if info %}
                  <div class="text-muted small text-start">{{ info|nl2br }}</div>
                {% endif %}
              {% endfor %}

              <div class="w-100">
                {% if available %}
                  {% if stockQty is not null %}
                    <span class="badge bg-success">{{ stockQty }} en stock</span>
                  {% else %}
                    <span class="badge bg-success">En stock</span>
                  {% endif %}
                {% else %}
                  <span class="badge bg-secondary">Rupture</span>
                {% endif %}
              </div>

              <div class="d-flex flex-column gap-2 align-items-start w-100">
                <div style="max-width: 200px;" data-js-variant-qty-target></div>
                <div>
                  <button type="submit" class="btn btn-primary" data-js-variant-submit {{ sylius_test_html_attribute('add-to-cart-button') }} {% if not available %}disabled{% endif %}>
                    {{ 'sylius.ui.add_to_cart'|trans }}
                  </button>
                </div>
              </div>
            </div>

            {# Right column: image (shown only if the variant has its own) #}
            {% if hasVariantImage %}
              <a href="{{ variantImageOriginal }}" data-glightbox data-gallery="variant-gallery-{{ variant.code }}" class="d-block rounded overflow-hidden flex-shrink-0 me-2 mb-1" style="width:160px;height:160px;background:#fff;border-radius:.5rem;">
                <img src="{{ variantImageSrc }}" alt="{{ variant.name|default(variant.descriptor) }}" style="width:100%;height:100%;object-fit:contain;border-radius:inherit;">
              </a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

<style>
  .variant-accordion .variant-accordion-card {
    border: 1px solid #f1f1f1;
    border-radius: .5rem;
    background-color: transparent;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    text-align: left;
  }
  .variant-accordion .variant-accordion-card.open {
    border-color: #e5e7eb; /* light gray */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }
  .variant-accordion .variant-accordion-header {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
  }
  .variant-accordion .variant-accordion-item.disabled .variant-accordion-header {
    opacity: .6;
    cursor: not-allowed;
  }
  /* No header thumbnail; all imagery lives in the opened body */
</style>

<script>
  (function() {
    function openVariantItem(container, item) {
      container.querySelectorAll('.variant-accordion-item').forEach(function(it){
        const body = it.querySelector('.variant-accordion-body');
        const header = it.querySelector('.variant-accordion-header');
        const card = it.querySelector('.variant-accordion-card');
        if (!body || !header) return;
        const isTarget = (it === item);
        body.style.display = isTarget ? 'block' : 'none';
        header.setAttribute('aria-expanded', isTarget ? 'true' : 'false');
        if (card) card.classList.toggle('open', isTarget);
      });
    }

    function moveControlsTo() { /* no-op: per-variant submit buttons now */ }

    function moveQtyTo(item) {
      const target = item && item.querySelector('[data-js-variant-qty-target]');
      const qty = document.querySelector('[data-js-variant-qty="root"]');
      if (target && qty) {
        qty.classList.remove('d-none');
        target.appendChild(qty);
      }
    }

    function syncQtyBounds(item) {
      const input = document.querySelector('[data-js-variant-qty="root"] input');
      if (!input) return;
      const stock = item && item.getAttribute('data-stock');
      const available = item && item.getAttribute('data-available') === '1';
      const min = 1;
      input.setAttribute('min', String(min));
      if (available && stock && !isNaN(parseInt(stock))) {
        input.setAttribute('max', String(parseInt(stock)));
      } else {
        input.removeAttribute('max');
      }
      // Clamp current value
      let val = parseInt(input.value || '1');
      if (isNaN(val) || val < min) val = min;
      const maxAttr = input.getAttribute('max');
      if (maxAttr) {
        const max = parseInt(maxAttr);
        if (!isNaN(max) && val > max) val = max;
      }
      input.value = String(val);
    }

    function getItemByInput(container, input) {
      return input.closest('.variant-accordion-item');
    }

    document.addEventListener('DOMContentLoaded', function() {
      const container = document.getElementById('sylius-product-variants');
      if (!container) return;

      // Initialize based on checked radio
      const checked = container.querySelector('input[type="radio"]:checked');
      let currentItem = checked ? getItemByInput(container, checked) : container.querySelector('.variant-accordion-item');
      if (currentItem) {
        // Ensure one radio is selected
        const input = currentItem.querySelector('input[type="radio"]');
        if (input && !input.checked && !input.disabled) {
          input.checked = true;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
        openVariantItem(container, currentItem);
        moveControlsTo();
        moveQtyTo(currentItem);
        syncQtyBounds(currentItem);
      }

      // Toggle on header click
      container.addEventListener('click', function(e){
        const header = e.target.closest('.variant-accordion-header');
        if (!header || !container.contains(header)) return;
        const item = header.closest('.variant-accordion-item');
        if (item && item.classList.contains('disabled')) return;
        const input = item && item.querySelector('input[type="radio"]');
        if (!input) return;
        if (!input.checked) {
          input.checked = true;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
        openVariantItem(container, item);
        moveControlsTo();
        moveQtyTo(item);
        syncQtyBounds(item);
      });

      // React to radio changes (keyboard or programmatic)
      container.addEventListener('change', function(e){
        if (!e.target.matches('input[type="radio"]')) return;
        const item = getItemByInput(container, e.target);
        openVariantItem(container, item);
        moveControlsTo();
        moveQtyTo(item);
        syncQtyBounds(item);
      });

      // Quantity increment/decrement handlers (namespaced to avoid collisions)
      container.addEventListener('click', function(e){
        const inc = e.target.closest('[data-variant-increment]');
        const dec = e.target.closest('[data-variant-decrement]');
        if (!inc && !dec) return;
        e.preventDefault();
        e.stopPropagation();
        const input = document.querySelector('[data-js-variant-qty="root"] input');
        if (!input) return;
        const min = parseInt(input.getAttribute('min') || '1') || 1;
        const maxAttr = input.getAttribute('max');
        const max = maxAttr ? parseInt(maxAttr) : null;
        let val = parseInt(input.value || String(min)) || min;
        if (inc) {
          val = val + 1;
          if (max !== null && !isNaN(max) && val > max) val = max;
        } else if (dec) {
          val = val - 1;
          if (val < min) val = min;
        }
        input.value = String(val);
      });

      // Clamp manual input
      container.addEventListener('input', function(e){
        const input = e.target.closest('[data-js-variant-qty="root"] input');
        if (!input) return;
        const min = parseInt(input.getAttribute('min') || '1') || 1;
        const maxAttr = input.getAttribute('max');
        const max = maxAttr ? parseInt(maxAttr) : null;
        let val = parseInt(input.value || String(min)) || min;
        if (val < min) val = min;
        if (max !== null && !isNaN(max) && val > max) val = max;
        input.value = String(val);
      });

      // Ensure the correct variant is selected when clicking the submit button inside a panel
      container.addEventListener('click', function(e){
        const btn = e.target.closest('[data-js-variant-submit]');
        if (!btn) return;
        const item = btn.closest('.variant-accordion-item');
        if (!item) return;
        const input = item.querySelector('input[type="radio"]');
        if (input && !input.checked && !input.disabled) {
          input.checked = true;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });
    });
  })();
  </script>