{% extends "base.html" %}

{% block title %}{% if mode=='new' %}Neue Reklamation{% else %}{{ complaint.complaint_no }}{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/complaints" class="hover:underline">Reklamationen</a> / {% if mode=='new' %}Neu{% else %}{{ complaint.complaint_no }}{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neue Reklamation{% else %}{{ complaint.complaint_no }}{% endif %}{% endblock %}

{% block content %}
<form method="post" action="{% if mode=='new' %}/complaints/new{% else %}/complaints/{{ complaint.id }}/edit{% endif %}"
      class="space-y-4 max-w-4xl"
      data-autosave="complaint_{% if mode=='new' %}new{% else %}edit_{{ complaint.id }}{% endif %}">

  <div class="card">
    <div class="card-header"><div>
      <h2>Kopf-Daten</h2>
      <p class="sub">Worauf bezieht sich die Reklamation?</p>
    </div></div>
    <div class="p-5 grid grid-cols-3 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Typ *</label>
        <select name="kind" required class="select mt-1 w-full" {% if mode=='edit' %}disabled{% endif %}>
          {% set k = complaint.kind if complaint else 'customer' %}
          <option value="customer"  {% if k=='customer' %}selected{% endif %}>Kunden-Reklamation</option>
          <option value="supplier"  {% if k=='supplier' %}selected{% endif %}>Lieferanten-Reklamation</option>
          <option value="internal"  {% if k=='internal' %}selected{% endif %}>Intern</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Schweregrad</label>
        <select name="severity" class="select mt-1 w-full">
          {% set sv = complaint.severity if complaint else 'medium' %}
          <option value="low"      {% if sv=='low' %}selected{% endif %}>Niedrig</option>
          <option value="medium"   {% if sv=='medium' %}selected{% endif %}>Mittel</option>
          <option value="high"     {% if sv=='high' %}selected{% endif %}>Hoch</option>
          <option value="critical" {% if sv=='critical' %}selected{% endif %}>Kritisch</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Status</label>
        <select name="status" class="select mt-1 w-full">
          {% set st = complaint.status if complaint else 'open' %}
          <option value="open"          {% if st=='open' %}selected{% endif %}>Offen</option>
          <option value="investigating" {% if st=='investigating' %}selected{% endif %}>In Analyse</option>
          <option value="contained"     {% if st=='contained' %}selected{% endif %}>Eingegrenzt</option>
          <option value="resolved"      {% if st=='resolved' %}selected{% endif %}>Gelöst</option>
          <option value="closed"        {% if st=='closed' %}selected{% endif %}>Geschlossen</option>
        </select>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kunde</label>
        <select name="customer_id" class="select mt-1 w-full">
          <option value="">— keiner —</option>
          {% for c in customers %}
          <option value="{{ c.id }}" {% if complaint and complaint.customer_id == c.id %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferant</label>
        <select name="vendor_id" class="select mt-1 w-full">
          <option value="">— keiner —</option>
          {% for v in vendors %}
          <option value="{{ v.id }}" {% if complaint and complaint.vendor_id == v.id %}selected{% endif %}>{{ v.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstoff</label>
        <select name="material_id" class="select mt-1 w-full">
          <option value="">— keiner —</option>
          {% for m in materials %}
          <option value="{{ m.id }}" {% if complaint and complaint.material_id == m.id %}selected{% endif %}>{{ m.name }}{% if m.code %} ({{ m.code }}){% endif %}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Schmelze-Nr (Heat-No)</label>
        <input class="input mt-1 w-full nums" type="text" name="heat_no" value="{{ complaint.heat_no if complaint else '' }}" placeholder="z.B. 12345">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Betroffene Stückzahl</label>
        <input class="input mt-1 w-full nums" type="text" name="qty_affected" value="{{ '%.0f'|format(complaint.qty_affected) if complaint and complaint.qty_affected else '' }}" placeholder="0">
      </div>
    </div>
  </div>

  {# ============== 8D-Schritte ============== #}
  {% set steps = [
    ('d1_team',         'D1 — Team',              'Wer kümmert sich? Mitarbeiter + Rollen'),
    ('d2_problem',      'D2 — Problembeschreibung', 'Was genau ist das Problem? 5W (was/wer/wo/wann/wie)'),
    ('d3_containment',  'D3 — Sofortmaßnahmen',   'Wie wird der Schaden begrenzt? Sperre, Aussonderung, Information Kunde'),
    ('d4_root_cause',   'D4 — Ursachenanalyse',   '5-Why / Ishikawa / Fischgräten — die echte Wurzel finden'),
    ('d5_corrective',   'D5 — Korrekturmaßnahmen', 'Was muss konkret passieren um die Ursache zu beseitigen?'),
    ('d6_implemented',  'D6 — Umsetzung',          'Wie wurde umgesetzt? Termin + Verantwortlicher'),
    ('d7_preventive',   'D7 — Vorbeugemaßnahmen', 'Was hindert das Auftreten des Problems an anderer Stelle?'),
    ('d8_recognition',  'D8 — Anerkennung',        'Team-Erfolg dokumentieren, Lessons Learned'),
  ] %}

  <div class="card">
    <div class="card-header"><div>
      <h2>8D-Bericht</h2>
      <p class="sub">Strukturierte Bearbeitung in 8 Disziplinen</p>
    </div></div>
    <div class="p-5 space-y-4">
      {% for key, label, hint in steps %}
      <div>
        <label class="text-[11px] uppercase tracking-wider font-bold" style="color: var(--brand-blue-light);">{{ label }}</label>
        <p class="text-[10px]" style="color: var(--card-text-muted);">{{ hint }}</p>
        <textarea class="input mt-1 w-full" name="{{ key }}" rows="3">{{ complaint[key] if complaint and complaint[key] else '' }}</textarea>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="flex items-center justify-between max-w-4xl">
    <a class="btn btn-secondary" href="/complaints">Abbrechen</a>
    <div class="flex items-center gap-2">
      {% if mode=='edit' and complaint %}
      <a class="btn btn-secondary" href="/complaints/{{ complaint.id }}/pdf" target="_blank" title="8D-Bericht als PDF">PDF</a>
      {% endif %}
      <button class="btn btn-primary" type="submit">{% if mode=='new' %}Anlegen{% else %}Speichern{% endif %}</button>
    </div>
  </div>
</form>

{% if mode == 'edit' and complaint %}
{# ============== Beweisfotos / Anhänge ============== #}
<div class="card max-w-4xl mt-4">
  <div class="card-header"><div>
    <h2>Beweisfotos &amp; Anhänge</h2>
    <p class="sub">Fotos vom defekten Teil, Messprotokolle, Lieferscheine — JPG/PNG/PDF, max. 8 MB</p>
  </div></div>

  {# Mini-Galerie #}
  {% if photos %}
  <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-3">
    {% for p in photos %}
    <div style="position:relative;background:rgba(0,0,0,0.20);border:1px solid var(--card-border-2);border-radius:8px;overflow:hidden;">
      {% if p.content_type and p.content_type.startswith('image') %}
      <a href="{{ p.web_path }}" target="_blank">
        <img src="{{ p.web_path }}" alt="{{ p.filename }}"
             style="width:100%;height:120px;object-fit:cover;display:block;">
      </a>
      {% else %}
      <a href="{{ p.web_path }}" target="_blank"
         style="display:block;height:120px;display:flex;align-items:center;justify-content:center;color:var(--card-text-muted);">
        <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
      </a>
      {% endif %}
      <div style="padding:6px 8px;font-size:10px;display:flex;justify-content:space-between;align-items:center;">
        <span style="color:var(--card-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;">{{ p.filename }}</span>
        <form method="post" action="/attachments/{{ p.id }}/delete" style="margin:0;"
              onsubmit="return confirm('Foto löschen?');">
          <button type="submit" style="background:none;border:none;cursor:pointer;color:#ef4444;font-size:12px;">×</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {# Upload-Form (mit mobile-Camera-Capture) #}
  <form method="post" action="/complaints/{{ complaint.id }}/photo"
        enctype="multipart/form-data"
        class="px-5 py-4 border-t flex flex-wrap items-center gap-3"
        style="border-color: var(--card-border-2);">
    <input class="input" type="file" name="file"
           accept="image/*,application/pdf"
           capture="environment" required style="flex:1;min-width:200px;">
    <button class="btn btn-primary" type="submit">Foto hochladen</button>
  </form>
</div>
{% endif %}

{% if mode == 'edit' and complaint %}
<div class="entity-tasks max-w-4xl" data-entity-type="complaint" data-entity-id="{{ complaint.id }}"></div>
<div class="entity-comments max-w-4xl" data-entity-type="complaint" data-entity-id="{{ complaint.id }}"></div>
{% endif %}
{% endblock %}