{% extends "base.html" %}
{% block title %}8D-Wizard{% endblock %}
{% block heading %}🔧 8D-Wizard — {{ complaint.complaint_no or complaint.id }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/complaints" class="hover:underline">Reklamationen</a> / 8D-Wizard</p>{% endblock %}

{% block content %}
<style>
  .d-step { background:rgba(15,22,48,0.40); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:16px 18px; margin-bottom:12px; }
  .d-step h3 { margin:0 0 8px 0; font-size:14px; }
  .d-step textarea { width:100%; padding:10px 12px; background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.20); border-radius:6px; font-size:13px; min-height:70px; resize:vertical; }
  .d-step .btn-row { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
  .step-status { font-size:11px; padding:3px 8px; border-radius:5px; }
  .step-empty { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.55); }
  .step-done  { background:rgba(16,185,129,0.20); color:#6ee7b7; }
</style>

<p style="font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:14px;">
  <strong>Kunde:</strong> {{ complaint.customer_name or '—' }} &middot;
  <strong>Eingang:</strong> {{ complaint.received_at or complaint.created_at }} &middot;
  <strong>Status:</strong> {{ complaint.status }}
</p>

{% set steps = [
  ('d1', 'D1 — Team zusammenstellen', 'Welche Personen aus welchen Bereichen arbeiten am Problem?'),
  ('d2', 'D2 — Problem beschreiben', 'Was genau ist passiert? Wo, wann, wie viel? 5W-Methode.'),
  ('d3', 'D3 — Sofortmaßnahmen', 'Was wurde unternommen um den Kunden sofort zu schützen?'),
  ('d4', 'D4 — Ursachenanalyse (5x Warum)', 'Echte Wurzelursache statt Symptom — bis zur Mitarbeiter-/Prozess-/Maschinen-Ebene.'),
  ('d5', 'D5 — Korrekturmaßnahmen', 'Welche Maßnahmen beheben die Wurzelursache dauerhaft?'),
  ('d6', 'D6 — Wirksamkeit prüfen', 'Wie wird verifiziert dass die Maßnahmen wirken? Mit welchen Kennzahlen?'),
  ('d7', 'D7 — Vorbeugung & Standardisierung', 'Wie wird verhindert dass das gleiche Problem nochmal auftritt? Anweisungen, Schulungen, Prüfpläne.'),
  ('d8', 'D8 — Team würdigen & Abschluss', 'Was hat das Team gelernt? Anerkennung an Mitwirkende.')
] %}

{% for code, title, hint in steps %}
{% set field = 'd8_' ~ code %}
{% set existing = complaint[field] if field in complaint else '' %}
<div class="d-step">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h3>{{ title }}</h3>
    <span class="step-status {% if existing %}step-done{% else %}step-empty{% endif %}" id="status-{{ code }}">
      {% if existing %}✓ erledigt{% else %}offen{% endif %}
    </span>
  </div>
  <p style="font-size:12px;color:rgba(255,255,255,0.55);margin:0 0 8px 0;">{{ hint }}</p>
  <textarea id="ta-{{ code }}" placeholder="Hier eintragen…">{{ existing or '' }}</textarea>
  <div class="btn-row">
    <span style="font-size:11px;color:rgba(255,255,255,0.40);">{% if existing %}Letzte Änderung gespeichert.{% endif %}</span>
    <button type="button" class="btn btn-sm btn-primary" onclick="save8DStep('{{ code }}')">Schritt speichern</button>
  </div>
</div>
{% endfor %}

<script>
function save8DStep(step) {
  const ta = document.getElementById('ta-' + step);
  const status = document.getElementById('status-' + step);
  const content = ta.value.trim();
  fetch('/complaints/{{ complaint.id }}/8d-step', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({step: step, content: content})
  }).then(r=>r.json()).then(d => {
    if (d.ok) {
      if (content) {
        status.textContent = '✓ erledigt';
        status.className = 'step-status step-done';
      } else {
        status.textContent = 'offen';
        status.className = 'step-status step-empty';
      }
    } else {
      alert('Fehler: ' + (d.error||'unbekannt'));
    }
  });
}
</script>

{% endblock %}