{# Step 8: Services Needed #}
<form id="q-step-8-form"
      hx-post="{{ url_for('leads.quote_step', step=8) }}"
      hx-target="#quote-step" hx-swap="innerHTML">
  <input type="hidden" name="_accumulated" value='{{ data | tojson }}'>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <h2 class="q-step-title">{{ t.q8_heading }}</h2>
  <p class="q-step-sub">{{ t.q8_subheading }}</p>

  <div class="q-field-group">
    <span class="q-label">{{ t.q8_services_label }} <span class="required">*</span> <span style="color:#94A3B8;font-weight:400">{{ t.q8_services_note }}</span></span>
    {% if 'services_needed' in errors %}<p class="q-error-hint" id="q8-error">{{ t.q8_required_hint }}</p>{% endif %}
    <p class="q-error-hint" id="q8-client-error" style="display:none">{{ t.q8_required_hint }}</p>
    <div class="q-pills">
      {% set selected_services = data.get('services_needed', []) %}
      {% for val, label in [('court_supply', t.q8_court_supply), ('installation', t.q8_installation), ('construction', t.q8_construction), ('design', t.q8_design), ('lighting', t.q8_lighting), ('flooring', t.q8_flooring), ('turnkey', t.q8_turnkey)] %}
      <label><input type="checkbox" name="services_needed" value="{{ val }}" {{ 'checked' if val in selected_services }}><span class="q-pill">{{ label }}</span></label>
      {% endfor %}
    </div>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="additional_info">{{ t.q8_additional_label }}</label>
    <textarea id="additional_info" name="additional_info" class="q-input" rows="3" placeholder="{{ t.q8_additional_placeholder }}">{{ data.get('additional_info', '') }}</textarea>
  </div>

  <div class="q-nav">
    <button type="button" class="q-btn-back"
            hx-get="{{ url_for('leads.quote_step', step=7, _accumulated=data | tojson) }}"
            hx-target="#quote-step" hx-swap="innerHTML">{{ t.q_btn_back }}</button>
    <button type="submit" class="q-btn-next" id="q8-next-btn">{{ t.q_btn_next }}</button>
  </div>
</form>
<script>
  (function() {
    var form = document.getElementById('q-step-8-form');
    if (!form) return;
    form.addEventListener('htmx:confirm', function(e) {
      var checked = form.querySelectorAll('input[name="services_needed"]:checked');
      if (checked.length === 0) {
        e.preventDefault();
        document.getElementById('q8-client-error').style.display = '';
      }
    });
  })();
</script>

<div id="q-progress" hx-swap-oob="innerHTML">
  <div class="q-progress__meta">
    <span class="q-progress__label">{{ steps[step - 1].title }}</span>
    <span class="q-progress__count">{{ t.q_step_counter | tformat(step=step, total=steps|length) }}</span>
  </div>
  <div class="q-progress__track">
    <div class="q-progress__fill" style="width: {{ (step / steps|length * 100) | round }}%"></div>
  </div>
</div>
