{% extends "base.html" %}

{% block title %}Werkstatt-Profil{% endblock %}
{% block heading %}Werkstatt-Profil{% endblock %}
{% block breadcrumb %}
  <p class="text-xs" style="color: var(--card-text-muted);">
    <a href="/onboarding" style="color: inherit;">Erste Schritte</a> / Werkstatt-Profil
  </p>
{% endblock %}

{% block content %}

<div class="card" style="margin-bottom: 14px;">
  <p style="margin: 0; color: var(--card-text-muted);">
    Fünf Fragen — auf Basis deiner Antworten konfigurieren wir Stundensatz und
    Material-Stamm passend zu deiner Werkstatt. Du kannst alles später ändern.
  </p>
</div>

<form id="profil-form" class="grid gap-3" style="grid-template-columns: 1fr 1fr;">

  <div class="card">
    <h3 style="margin: 0 0 12px; font-size: 1.0em;">1. Was für eine Werkstatt seid ihr?</h3>
    {% for value, label, desc in [
        ('cnc_zerspaner',   'CNC-Zerspaner',       'Drehen + Fräsen, Serien 10–1000 Stk'),
        ('lohnfertiger',    'Lohnfertiger',        'Mixed Bag — alles was reinkommt'),
        ('spritzguss',      'Spritzguss / Kunststoff', 'Werkzeugbau + Serie'),
        ('schweissbetrieb', 'Schweißbetrieb / Stahlbau', 'Konstruktion + Schweißarbeiten'),
        ('sonstiges',       'Sonstiges',           'z.B. Blech, Holz, Elektronik'),
    ] %}
    <label style="display:flex; align-items:flex-start; gap: 10px; padding: 8px;
                  border: 1px solid var(--card-border); border-radius: 6px;
                  margin-bottom: 6px; cursor: pointer;
                  {% if current.werkstatt_typ == value %}background:rgba(242,88,27,0.20);border-color:#f2581b;{% endif %}">
      <input type="radio" name="werkstatt_typ" value="{{ value }}"
             {% if current.werkstatt_typ == value %}checked{% endif %} style="margin-top: 3px;">
      <div>
        <div style="font-weight: 600;">{{ label }}</div>
        <div class="text-xs" style="color: var(--card-text-muted);">{{ desc }}</div>
      </div>
    </label>
    {% endfor %}
  </div>

  <div class="card">
    <h3 style="margin: 0 0 12px; font-size: 1.0em;">2. Wie viele Mitarbeiter?</h3>
    <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 6px;">
      {% for band in ['1-3', '4-10', '11-25', '26-50', '50+'] %}
      <label style="display:flex; align-items:center; gap: 8px; padding: 8px;
                    border: 1px solid var(--card-border); border-radius: 6px;
                    cursor: pointer;
                    {% if current.mitarbeiter_band == band %}background:rgba(242,88,27,0.20);border-color:#f2581b;{% endif %}">
        <input type="radio" name="mitarbeiter_band" value="{{ band }}"
               {% if current.mitarbeiter_band == band %}checked{% endif %}>
        <span style="font-weight: 600;">{{ band }} Mitarbeiter</span>
      </label>
      {% endfor %}
    </div>

    <h3 style="margin: 18px 0 12px; font-size: 1.0em;">3. Wie viele Maschinen?</h3>
    <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 6px;">
      {% for band in ['1-3', '4-10', '11-25', '26-50', '50+'] %}
      <label style="display:flex; align-items:center; gap: 8px; padding: 8px;
                    border: 1px solid var(--card-border); border-radius: 6px;
                    cursor: pointer;
                    {% if current.maschinen_band == band %}background:rgba(242,88,27,0.20);border-color:#f2581b;{% endif %}">
        <input type="radio" name="maschinen_band" value="{{ band }}"
               {% if current.maschinen_band == band %}checked{% endif %}>
        <span style="font-weight: 600;">{{ band }} Maschinen</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div class="card" style="grid-column: span 2;">
    <h3 style="margin: 0 0 12px; font-size: 1.0em;">4. Was nutzt ihr heute? (Mehrfachauswahl)</h3>
    <div class="grid" style="grid-template-columns: repeat(3, 1fr); gap: 6px;">
      {% for value, label in [
          ('excel',     'Excel-Listen'),
          ('lexware',   'Lexware / DATEV / Buchhaltung'),
          ('word',      'Word für Angebote'),
          ('weclapp',   'weclapp / anderes ERP'),
          ('sap',       'SAP Business One'),
          ('nichts',    'Nichts — wir starten neu'),
      ] %}
      <label style="display:flex; align-items:center; gap: 8px; padding: 8px;
                    border: 1px solid var(--card-border); border-radius: 6px;
                    cursor: pointer;
                    {% if value in current.bisher_genutzt %}background:#eef2ff;border-color:#2b5ce6;{% endif %}">
        <input type="checkbox" name="bisher_genutzt" value="{{ value }}"
               {% if value in current.bisher_genutzt %}checked{% endif %}>
        <span>{{ label }}</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div class="card" style="grid-column: span 2;">
    <h3 style="margin: 0 0 12px; font-size: 1.0em;">5. Welche Module sind dir am wichtigsten? (Mehrfachauswahl)</h3>
    <div class="grid" style="grid-template-columns: repeat(3, 1fr); gap: 6px;">
      {% for value, label in [
          ('anfragen_angebote', 'Anfragen → Angebote → Rechnungen'),
          ('werkstatt_tablet',  'Werkstatt-Tablet + Stundenerfassung'),
          ('spc_qm',            'SPC-Charts / Qualität (IATF)'),
          ('edi',               'EDI-Empfang (Bosch / Daimler)'),
          ('kunden_portal',     'Self-Service-Portal für Kunden'),
          ('werkzeug',          'Werkzeug-Standzeit + Auto-Bestellung'),
      ] %}
      <label style="display:flex; align-items:center; gap: 8px; padding: 8px;
                    border: 1px solid var(--card-border); border-radius: 6px;
                    cursor: pointer;
                    {% if value in current.wichtigste_module %}background:#eef2ff;border-color:#2b5ce6;{% endif %}">
        <input type="checkbox" name="wichtigste_module" value="{{ value }}"
               {% if value in current.wichtigste_module %}checked{% endif %}>
        <span>{{ label }}</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div style="grid-column: span 2; display:flex; gap: 10px; align-items:center;">
    <button type="submit" class="btn btn-primary" id="save-btn">
      Profil speichern + weiter zur Checkliste
    </button>
    <a href="/onboarding" class="btn btn-secondary">Abbrechen</a>
    <span id="status" style="margin-left:auto; color: var(--card-text-muted); font-size: 0.9em;"></span>
  </div>
</form>

<script>
document.getElementById('profil-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target);
  const payload = {
    werkstatt_typ:    fd.get('werkstatt_typ'),
    mitarbeiter_band: fd.get('mitarbeiter_band'),
    maschinen_band:   fd.get('maschinen_band'),
    bisher_genutzt:   fd.getAll('bisher_genutzt'),
    wichtigste_module: fd.getAll('wichtigste_module'),
  };
  const btn = document.getElementById('save-btn');
  const status = document.getElementById('status');
  btn.disabled = true; btn.textContent = '… speichere';
  status.textContent = '';
  try {
    const r = await fetch('/api/onboarding/save-profil', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const d = await r.json();
    if (d.ok) {
      if (d.auto_configured && d.auto_configured.log && d.auto_configured.log.length) {
        status.textContent = 'Auto-Konfiguration: ' + d.auto_configured.log.join(' · ');
      }
      setTimeout(() => location.href = d.next || '/onboarding', 800);
    } else {
      status.textContent = d.error || 'Fehler';
      btn.disabled = false; btn.textContent = 'Profil speichern + weiter zur Checkliste';
    }
  } catch (err) {
    status.textContent = 'Netzwerk-Fehler: ' + err;
    btn.disabled = false; btn.textContent = 'Profil speichern + weiter zur Checkliste';
  }
});
</script>

{% endblock %}