{% extends "base.html" %}

{% block title %}Werkzeuge{% endblock %}
{% block heading %}Werkzeug-Verwaltung{% endblock %}
{% block topbar_actions %}
  {% if tools_needing_reorder_count and tools_needing_reorder_count > 0 %}
    <a href="/orders/suggestions" class="btn btn-secondary btn-sm"
       title="Werkzeuge mit Standzeit-Verbrauch oder Stock < Min"
       style="background:rgba(239,68,68,0.15); color:#dc2626; border-color:rgba(239,68,68,0.4);">
      ⚠ {{ tools_needing_reorder_count }} Bestellvorschlag
      {%- if tools_needing_reorder_count != 1 %}e{% endif %}
    </a>
  {% endif %}
  {% if low_life_filter %}
    <a href="/tools" class="btn btn-secondary btn-sm">Alle Werkzeuge</a>
  {% else %}
    <a href="/tools?low_life=1" class="btn btn-secondary btn-sm">Standzeit &gt; Schwelle</a>
  {% endif %}
  <a href="/tools/cnc-mapping" class="btn btn-secondary btn-sm"
     title="T-Nummern zu Werkzeugen zuordnen (für NC-Programme)">
    🔢 CNC T-Mapping
  </a>
  <button type="button"
          class="btn btn-primary btn-sm"
          onclick="document.getElementById('new-tool-form').classList.toggle('hidden')">
    + Werkzeug
  </button>
{% endblock %}

{% block content %}

<div id="new-tool-form" class="card hidden" style="margin-bottom:16px;">
  <div class="card-header">
    <h3>Neues Werkzeug anlegen</h3>
  </div>
  <form method="post" action="/tools/new" class="card-body" style="padding:20px;">
    {{ csrf_field(request) }}
    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Ident</label>
        <input class="input mt-1 w-full" type="text" name="ident" placeholder="auto: WZ-0001">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Bezeichnung *</label>
        <input class="input mt-1 w-full" type="text" name="name" required placeholder="z.B. Drehmeißel CNMG 120408">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Typ</label>
        <select class="select mt-1 w-full" name="tool_type">
          <option value="">— wählen —</option>
          <option value="drehmeissel">Drehmeißel</option>
          <option value="fraeser">Fräser</option>
          <option value="bohrer">Bohrer</option>
          <option value="schleifkoerper">Schleifkörper</option>
          <option value="gewindebohrer">Gewindebohrer</option>
          <option value="reibahle">Reibahle</option>
          <option value="senker">Senker</option>
          <option value="messwerkzeug">Messwerkzeug</option>
          <option value="sonstiges">Sonstiges</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Material</label>
        <select class="select mt-1 w-full" name="material">
          <option value="">—</option>
          <option value="HSS">HSS</option>
          <option value="VHM">VHM (Vollhartmetall)</option>
          <option value="Hartmetall">Hartmetall (HM)</option>
          <option value="Cermet">Cermet</option>
          <option value="Diamant">Diamant (PKD)</option>
          <option value="CBN">CBN</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Hersteller</label>
        <input class="input mt-1 w-full" type="text" name="manufacturer" placeholder="Sandvik, Iscar, ..." list="dl-tool-mfg">
        <datalist id="dl-tool-mfg">
          <option value="Sandvik Coromant">
          <option value="Iscar">
          <option value="Walter">
          <option value="Kennametal">
          <option value="Mitsubishi Materials">
          <option value="Sumitomo">
          <option value="Mapal">
          <option value="Gühring">
        </datalist>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Artikel-Nr.</label>
        <input class="input mt-1 w-full" type="text" name="article_no">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Ø in mm</label>
        <input class="input mt-1 w-full" type="number" step="0.1" name="diameter_mm">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Lagerort</label>
        <input class="input mt-1 w-full" type="text" name="location" placeholder="z.B. Schrank 3, Fach B">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Bestand</label>
        <input class="input mt-1 w-full" type="number" name="stock" value="1" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Min-Bestand</label>
        <input class="input mt-1 w-full" type="number" name="min_stock" value="0" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Stück-Preis (€)</label>
        <input class="input mt-1 w-full" type="number" step="0.01" name="unit_price">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Standzeit (Min)</label>
        <input class="input mt-1 w-full" type="number" name="standzeit_min" placeholder="z.B. 480">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);" title="Ab wieviel % der Standzeit soll ein Bestellvorschlag erscheinen?">Bestellvorschlag bei (%)</label>
        <input class="input mt-1 w-full" type="number" min="1" max="100" name="auto_reorder_threshold_pct" value="80">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);" title="Wiederbeschaffungs-Zeit beim Lieferanten">Lieferzeit (Tage)</label>
        <input class="input mt-1 w-full" type="number" min="0" name="replacement_lead_time_days" placeholder="z.B. 7">
      </div>
    </div>
    <div style="margin-top:16px;">
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Notiz</label>
      <textarea class="input mt-1 w-full" name="notes" rows="2"></textarea>
    </div>
    <div style="margin-top:16px;display:flex;gap:8px;">
      <button type="submit" class="btn btn-primary">Anlegen</button>
      <button type="button" class="btn btn-secondary"
              onclick="document.getElementById('new-tool-form').classList.add('hidden')">
        Abbrechen
      </button>
    </div>
  </form>
</div>

<div class="card">
  <div class="card-header">
    <div>
      <h2>Werkzeug-Bestand</h2>
      <p class="sub">{{ tools|length }} aktive Werkzeuge · CNC-spezifische Verwaltung mit Standzeit-Tracking</p>
    </div>
  </div>

  <div class="card-body" style="padding:0;">
    <table class="data-table" style="width:100%;font-size:13px;">
      <thead>
        <tr>
          <th>Ident</th>
          <th>Bezeichnung</th>
          <th>Typ</th>
          <th>Ø</th>
          <th>Material</th>
          <th>Hersteller</th>
          <th>Lager</th>
          <th>Bestand</th>
          <th>Aktuell auf</th>
          <th>Einsatz (Min)</th>
          <th>Standzeit-Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for t in tools %}
        {% set used_min = t.total_minutes_used or 0 %}
        {% set ratio = (used_min / t.standzeit_min) if t.standzeit_min and t.standzeit_min > 0 else 0 %}
        <tr>
          <td style="font-family:monospace;font-size:11px;">{{ t.ident }}</td>
          <td>
            <strong>{{ t.name }}</strong>
            {% if t.article_no %}<div style="font-size:10px;color:var(--card-text-muted);">Art-Nr: {{ t.article_no }}</div>{% endif %}
          </td>
          <td>
            {% if t.tool_type %}
            <span class="badge">{{ t.tool_type }}</span>
            {% endif %}
          </td>
          <td>{% if t.diameter_mm %}{{ "%.1f"|format(t.diameter_mm) }} mm{% endif %}</td>
          <td>{{ t.material or '—' }}</td>
          <td>{{ t.manufacturer or '—' }}</td>
          <td style="font-size:11px;">{{ t.location or '—' }}</td>
          <td>
            {% if t.stock <= t.min_stock %}
            <span style="color:#ef4444;font-weight:700;">{{ t.stock }} ⚠</span>
            {% else %}
            {{ t.stock }}
            {% endif %}
          </td>
          <td>
            {% if t.current_machine %}
            <span class="badge" style="background:rgba(16,185,129,0.2);color:#10b981;">{{ t.current_machine }}</span>
            {% else %}
            <span style="color:var(--card-text-muted);font-size:11px;">— im Lager —</span>
            {% endif %}
          </td>
          <td>{{ used_min }} min</td>
          <td>
            {% if t.standzeit_min %}
              {% set lc_status = (t.lifecycle.status if t.lifecycle else 'ok') %}
              {% set lc_pct = (t.lifecycle.ratio_pct if t.lifecycle else (ratio*100)) %}
              {% set bar_color = '#10b981' %}
              {% if lc_status == 'over' %}{% set bar_color = '#ef4444' %}{% endif %}
              {% if lc_status == 'warn' %}{% set bar_color = '#f59e0b' %}{% endif %}
              <div style="background:rgba(0,0,0,0.2);border-radius:4px;height:8px;overflow:hidden;width:80px;">
                <div style="height:100%;background:{{ bar_color }};width:{{ lc_pct|round|int if lc_pct < 100 else 100 }}%;"></div>
              </div>
              <div style="font-size:10px;color:var(--card-text-muted);margin-top:2px;">
                {{ lc_pct|round|int }}% von {{ t.standzeit_min }} min
                {% if lc_status == 'warn' %}<span style="color:#f59e0b;font-weight:600;">· Bestellvorschlag</span>{% endif %}
                {% if lc_status == 'over' %}<span style="color:#ef4444;font-weight:600;">· überschritten</span>{% endif %}
              </div>
              {% if t.lifecycle and t.lifecycle.lead_time_days %}
                <div style="font-size:9px;color:var(--card-text-muted);">Lieferzeit: {{ t.lifecycle.lead_time_days }} T</div>
              {% endif %}
            {% else %}
            <span style="font-size:11px;color:var(--card-text-muted);">—</span>
            {% endif %}
          </td>
          <td>
            <button type="button" class="btn btn-secondary btn-xs"
                    onclick="document.getElementById('assign-form-{{ t.id }}').classList.toggle('hidden')">
              Zuweisen
            </button>
            {% if t.lifecycle and t.lifecycle.status in ('warn', 'over') %}
              <button type="button" class="btn btn-secondary btn-xs"
                      title="Setzt Standzeit-Verbrauch zurück (z.B. nach Werkzeug-Tausch)"
                      onclick="if(confirm('Standzeit-Zähler für „{{ t.name }}\" zurücksetzen?')) {
                                 fetch('/api/tools/{{ t.id }}/reset-usage', {method: 'POST'})
                                   .then(function(r){ if(r.ok) location.reload(); });
                               }"
                      style="margin-left:4px;color:#10b981;">↺ Reset</button>
            {% endif %}
          </td>
        </tr>
        <tr id="assign-form-{{ t.id }}" class="hidden">
          <td colspan="12" style="background:rgba(0,0,0,0.1);padding:12px 24px;">
            <form method="post" action="/tools/{{ t.id }}/assign" style="display:flex;gap:12px;align-items:end;flex-wrap:wrap;">
              {{ csrf_field(request) }}
              <div>
                <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Maschine</label>
                <select class="select mt-1" name="machine_id">
                  <option value="">— ins Lager zurück —</option>
                  {% for m in machines %}
                  <option value="{{ m.id }}">{{ m.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div>
                <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">Slot/Platz</label>
                <input class="input mt-1" type="number" name="slot_no" min="1" max="99" style="width:80px;">
              </div>
              <button type="submit" class="btn btn-primary btn-sm">Speichern</button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="12" style="padding:32px;text-align:center;color:var(--card-text-muted);">
          Keine Werkzeuge erfasst — links oben „+ Werkzeug" anklicken
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card-footer" style="padding:12px 16px;font-size:11px;color:var(--card-text-muted);">
    <strong>{{ tools|length }}</strong> Werkzeuge ·
    Standzeit-Status: 🟢 unter 70% · 🟡 70-90% · 🔴 über 90% verbraucht
  </div>
</div>

<style>
  .hidden { display: none; }
  .btn-xs { padding: 3px 10px; font-size: 11px; }
</style>
{% endblock %}