{% comment %}
  Custom option selector: render option values as full clickable buttons
{% endcomment %}
{% for option_form in form.cartItem.variant %}
  <div class="mb-3">
    {% if option_form.vars.label is defined %}
      <div class="mb-1 fw-semibold">{{ option_form.vars.label }}</div>
    {% endif %}
    <div class="d-flex flex-wrap gap-2" data-option="{{ option_form.vars.name }}">
      {% for choice in option_form %}
        <div class="variant-choice">
          {{ form_widget(choice, {
            'attr': {'class': 'btn-check'},
            'label': false,
            'label_attr': {'class': 'd-none'},
            'parent_label_class': 'btn'
          }) }}
          {{ form_label(choice, null, {'label_attr': {'class': 'btn btn-outline-secondary variant-btn mb-0', 'for': choice.vars.id}}) }}
        </div>
      {% endfor %}
    </div>
  </div>
{% endfor %}

<style>
  /* Force visual active state even if theme overrides Bootstrap */
  .variant-choice .btn-check:checked + label.variant-btn,
  .variant-choice label.variant-btn.selected {
    color: #fff !important;
    background-color: var(--cz-primary) !important;
    border-color: var(--cz-primary) !important;
  }
  .variant-choice .btn-check:disabled + label.variant-btn {
    opacity: .6;
    cursor: not-allowed;
  }
  /* Hide global required asterisk on our option buttons */
  .variant-choice label.variant-btn.required::after {
    content: none !important;
  }
</style>

<script>
  (function() {
    function syncOptionGroup(group) {
      group.querySelectorAll('.variant-choice').forEach(function(choice){
        const input = choice.querySelector('input[type="radio"]');
        const label = choice.querySelector('label.variant-btn');
        if (!input || !label) return;
        label.classList.toggle('selected', input.checked);
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('[data-option]').forEach(function(group){
        syncOptionGroup(group);
        group.addEventListener('click', function(e){
          const label = e.target.closest('label.variant-btn');
          if (!label || !group.contains(label)) return;
          const inputId = label.getAttribute('for');
          const input = document.getElementById(inputId);
          if (!input) return;
          if (input.disabled) return;
          if (!input.checked) {
            input.checked = true;
            input.dispatchEvent(new Event('change', { bubbles: true }));
          }
          syncOptionGroup(group);
        });
        group.addEventListener('change', function(e){
          if (e.target.matches('input[type="radio"]')) {
            syncOptionGroup(group);
          }
        });
      });
    });
  })();
</script>