{% extends "base.html" %}

{% block title %}Neuer Rüstplan{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/setup-plans" class="hover:underline">Rüstpläne</a> / Neu</p>{% endblock %}
{% block heading %}Neuer Rüstplan{% endblock %}

{% block content %}
<form method="post" action="/setup-plans/new" class="space-y-4" id="setup-plan-form" style="max-width:1200px;">
  <input type="hidden" name="csrf_token" value="{{ csrf_token if csrf_token is defined and csrf_token else '' }}">
  <script>
    (function () {
      var f = document.getElementById('setup-plan-form');
      var inp = f && f.querySelector('input[name="csrf_token"]');
      if (inp && !inp.value) {
        inp.value = (document.cookie.split('; ').find(function (r) { return r.startsWith('csrf_token='); }) || '=').split('=')[1] || '';
      }
    })();
  </script>

  {# ============== STAMMDATEN ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>① Stammdaten</h2>
      <p class="sub">Welcher Plan, für welches Bauteil, auf welcher Maschine</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Plan-Name *</label>
        <input type="text" name="name" required placeholder='z.B. "Standard-Rüstung Welle Ø 25 — DMG NEF 600"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bauteil *</label>
        <select name="item_id" required class="select mt-1 w-full">
          <option value="">— wählen —</option>
          {% for i in items %}
          <option value="{{ i.id }}" {% if i.id == preset_item_id %}selected{% endif %}>{{ i.ident }}{% if i.description %} — {{ i.description[:40] }}{% endif %}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Maschine</label>
        <select name="machine_id" class="select mt-1 w-full">
          <option value="">— allgemein gültig —</option>
          {% for m in machines %}
          <option value="{{ m.id }}" {% if m.id == preset_machine_id %}selected{% endif %}>{{ m.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zeichnungs-Revision</label>
        <input type="text" name="revision" placeholder='z.B. "Rev. B / 2026-04-12"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">NC-Programm-Name</label>
        <input type="text" name="nc_program" placeholder="z.B. PROG_W25_001.h"
               class="input mt-1 w-full">
      </div>
    </div>
  </div>

  {# ============== WERKSTÜCK ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>② Werkstück</h2>
      <p class="sub">Werkstoff, Rohteil-/Fertigteil-Maße, Stückzahl je Aufspannung</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">Werkstoff</label>
        <input type="text" name="material" placeholder='z.B. "S355", "1.4301", "AlMgSi1"' list="material-list"
               class="input mt-1 w-full">
        <datalist id="material-list">
          <option value="S235JR">
          <option value="S355J2">
          <option value="C45">
          <option value="42CrMo4">
          <option value="1.4301 (V2A)">
          <option value="1.4404 (V4A)">
          <option value="AlMgSi1 (6082)">
          <option value="AlCuMgPb (2007)">
          <option value="CuZn39Pb3 (Messing)">
          <option value="POM-C">
          <option value="PA6">
          <option value="PEEK">
        </datalist>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rohteil-Abmessungen</label>
        <input type="text" name="raw_dimensions" placeholder='z.B. "Ø 30 × 250 mm"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Fertigteil-Abmessungen</label>
        <input type="text" name="finished_dimensions" placeholder='z.B. "Ø 25 × 200 mm"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stückzahl je Aufspannung</label>
        <input type="number" name="pieces_per_setup" value="1" min="1" class="input mt-1 w-full nums">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Geplante Rüstzeit (Min)</label>
        <input type="number" name="est_minutes" value="30" min="1" class="input mt-1 w-full nums">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bearbeitungszeit pro Stück (Min)</label>
        <input type="number" name="minutes_per_piece" value="0" min="0" step="0.1" class="input mt-1 w-full nums">
      </div>
    </div>
  </div>

  {# ============== SPANNMITTEL & NULLPUNKT ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>③ Spannmittel &amp; Nullpunkt</h2>
      <p class="sub">Wie wird das Werkstück aufgespannt — Werker muss das beim Rüsten umsetzen</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">Spannmittel-Art</label>
        <select name="clamping_type" class="select mt-1 w-full">
          <option value="">— wählen —</option>
          <option>Schraubstock</option>
          <option>3-Backen-Futter</option>
          <option>4-Backen-Futter</option>
          <option>Spannzange</option>
          <option>Magnet-Spannplatte</option>
          <option>Vakuum-Spannplatte</option>
          <option>Spann-Vorrichtung (Sonder)</option>
          <option>Direkt verschraubt</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Backen / Größe</label>
        <input type="text" name="clamping_size" placeholder='z.B. "125 mm Backen, weich"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Anziehmoment (Nm)</label>
        <input type="number" name="clamping_torque_nm" placeholder="z.B. 80" min="0" step="1" class="input mt-1 w-full nums">
      </div>
      <div class="col-span-3">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstück-Nullpunkt</label>
        <input type="text" name="zero_point" placeholder='z.B. "G54: linke Stirnseite, Mittelachse"'
               class="input mt-1 w-full">
      </div>
    </div>
  </div>

  {# ============== QUALITÄT ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>④ Qualität &amp; Prüfung</h2>
      <p class="sub">Toleranzen, Prüfmaße, Erstmusterprüfung</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Toleranz-Norm</label>
        <input type="text" name="tolerances" placeholder='z.B. "ISO 2768-mK · Bohrung Ø 8 H7"'
               class="input mt-1 w-full">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüfmaße (Liste)</label>
        <textarea name="inspection_dimensions" rows="3" class="input mt-1 w-full"
                  placeholder='z.B. "Länge 200 ±0,1&#10;Ø 25 h7&#10;Bohrung Ø 8 H7&#10;Rauheit Ra 1,6"'></textarea>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüfmittel</label>
        <textarea name="inspection_tools" rows="3" class="input mt-1 w-full"
                  placeholder='z.B. "Messschieber 0–200&#10;Bügelmessschraube 25–50&#10;Lehrdorn Ø 8 H7"'></textarea>
      </div>
      <div class="col-span-2">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" name="first_article" value="1">
          <span class="text-sm">Erstmusterprüfung Pflicht (Bediener muss vor Serie messen)</span>
        </label>
      </div>
    </div>
  </div>

  {# ============== BETRIEBSMITTEL & SICHERHEIT ============== #}
  <div class="card">
    <div class="card-header"><div>
      <h2>⑤ Betriebsmittel &amp; Sicherheit</h2>
      <p class="sub">Kühlmittel, Hinweise, PSA</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kühlmittel</label>
        <select name="coolant" class="select mt-1 w-full">
          <option value="">— wählen —</option>
          <option>Emulsion (Standard)</option>
          <option>MMS (Minimalmengen-Schmierung)</option>
          <option>Trocken</option>
          <option>Druckluft</option>
          <option>Innenkühlung</option>
          <option>Schneidöl</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Allgemeine Notiz</label>
        <input type="text" name="note" placeholder="kurzer Hinweis für Bediener"
               class="input mt-1 w-full">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sicherheits-Hinweise / PSA</label>
        <textarea name="safety_notes" rows="3" class="input mt-1 w-full"
                  placeholder='z.B. "Schutzbrille beim Späne-Entfernen&#10;Werkstoff zerspant heiß — abkühlen lassen&#10;Spannfutter mit Schlüssel — vor Start prüfen"'></textarea>
      </div>
    </div>
  </div>

  {# Submit-Bar #}
  <div class="card">
    <div class="px-5 py-4 flex items-center justify-between">
      <div class="text-xs text-neutral-500">
        💡 <strong>Rüst-Schritte</strong> (Werkzeug-Einsatz, Schritt-für-Schritt-Reihenfolge mit Zeit) werden im
        Detail-View nach dem Speichern hinzugefügt.
      </div>
      <div class="flex gap-2">
        <a class="btn btn-secondary" href="/setup-plans">Abbrechen</a>
        <button class="btn btn-primary" type="submit">Plan anlegen →</button>
      </div>
    </div>
  </div>
</form>
{% endblock %}