{% extends "base.html" %}
{% block title %}Bestellvorschläge{% endblock %}
{% block heading %}🛒 Auto-Bestellvorschläge{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Operativ / Bestellvorschläge</p>{% endblock %}

{% block content %}
<style>
  table.os { width:100%; border-collapse:collapse; }
  table.os th, table.os td { padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
  table.os th { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
  .cov-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; max-width:120px; }
  .cov-bar .fill { height:100%; }
</style>

<p style="font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:14px;">
  Artikel die unter Mindestbestand liegen — vorgeschlagene Bestellmenge für jeden.
  Bestellung über vorgeschlagenen Lieferant kann mit einem Klick erzeugt werden.
</p>

<div class="card">
  <div class="card-header"><div><h2>{{ suggestions|length }} Vorschläge</h2></div></div>
  <table class="os">
    <thead>
      <tr>
        <th>Artikel</th>
        <th>Typ</th>
        <th class="num">Bestand</th>
        <th class="num">Min</th>
        <th>Deckung</th>
        <th class="num">Vorschlag</th>
        <th>Lieferant</th>
        <th>Aktion</th>
      </tr>
    </thead>
    <tbody>
      {% for s in suggestions %}
      {% set color = '#ef4444' if s.coverage_pct < 30 else ('#fcd34d' if s.coverage_pct < 70 else '#10b981') %}
      <tr>
        <td>
          <strong>{{ s.ident or '?' }}</strong>
          {% if s.description %}<div class="text-[11px] text-neutral-500">{{ s.description[:50] }}</div>{% endif %}
        </td>
        <td><span class="badge badge-neutral" style="font-size:10px;">{{ s.item_type }}</span></td>
        <td class="num nums" style="color:{{ color }};font-weight:600;">{{ s.quantity_total or 0 }}</td>
        <td class="num nums">{{ s.quantity_min }}</td>
        <td>
          <div class="cov-bar"><div class="fill" style="width:{{ [s.coverage_pct, 100]|min }}%;background:{{ color }};"></div></div>
          <div style="font-size:10px;color:{{ color }};margin-top:2px;font-weight:600;">{{ s.coverage_pct }} %</div>
        </td>
        <td class="num nums" style="font-weight:700;color:#fcd34d;">{{ s.suggested_qty }}</td>
        <td style="font-size:12px;">{{ s.supplier_name or '— kein Lieferant gepflegt —' }}</td>
        <td>
          {% if s.preferred_supplier_id %}
          <a class="btn btn-sm btn-primary" href="/purchase-orders/new?item_id={{ s.id }}&qty={{ s.suggested_qty }}&vendor_id={{ s.preferred_supplier_id }}">→ Bestellen</a>
          {% else %}
          <a class="btn btn-sm btn-secondary" href="/items/{{ s.id }}/edit">Lieferant pflegen</a>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="8" style="text-align:center;padding:30px;color:rgba(255,255,255,0.40);">🟢 Alle Bestände im grünen Bereich.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<p style="margin-top:14px;font-size:12px;color:rgba(255,255,255,0.55);">
  Mindestbestand pro Artikel wird unter <a href="/items" style="color:#fcd34d;">Artikel-Verwaltung</a> gepflegt.
  Auto-Vorschlag = max(Mindestbestellmenge, Mindestbestand − Aktueller Bestand).
</p>

{# v1.8.1: Werkzeug-Bestellvorschläge (Standzeit + Stock) #}
{% if tool_suggestions and tool_suggestions|length > 0 %}
<div class="card" style="margin-top:18px;">
  <div class="card-header">
    <div>
      <h2>🔧 Werkzeug-Bestellvorschläge</h2>
      <p class="sub">{{ tool_suggestions|length }} Werkzeug{% if tool_suggestions|length != 1 %}e{% endif %} mit Standzeit-Verbrauch ≥ Schwelle oder Stock unter Min</p>
    </div>
  </div>
  <table class="os">
    <thead>
      <tr>
        <th>Werkzeug</th>
        <th>Typ</th>
        <th class="num">Bestand</th>
        <th class="num">Min</th>
        <th>Standzeit-Verbrauch</th>
        <th>Lieferzeit</th>
        <th>Grund</th>
        <th>Aktion</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tool_suggestions %}
      {% set pct = t.ratio_pct %}
      {% set bar_color = '#10b981' if not t.wear_warn else ('#ef4444' if pct and pct >= 100 else '#f59e0b') %}
      <tr>
        <td>
          <strong>{{ t.ident }}</strong> — {{ t.name }}
          {% if t.manufacturer %}<div class="text-[11px] text-neutral-500">{{ t.manufacturer }}</div>{% endif %}
        </td>
        <td><span class="badge badge-neutral" style="font-size:10px;">{{ t.tool_type or '—' }}</span></td>
        <td class="num nums" style="color:{% if t.stock_below %}#ef4444{% endif %};font-weight:600;">{{ t.stock or 0 }}</td>
        <td class="num nums">{{ t.min_stock or 0 }}</td>
        <td>
          {% if pct is not none %}
            <div class="cov-bar"><div class="fill" style="width:{{ [pct, 100]|min }}%;background:{{ bar_color }};"></div></div>
            <div style="font-size:10px;color:{{ bar_color }};margin-top:2px;font-weight:600;">{{ pct|round|int }} %</div>
          {% else %}
            <span style="font-size:11px;color:var(--card-text-muted);">— keine Standzeit hinterlegt —</span>
          {% endif %}
        </td>
        <td class="num nums">{% if t.replacement_lead_time_days %}{{ t.replacement_lead_time_days }} T{% else %}—{% endif %}</td>
        <td style="font-size:11px;">{{ t.reason }}</td>
        <td>
          <a class="btn btn-sm btn-secondary" href="/tools">→ Werkzeug</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <p style="padding:10px 14px;font-size:11px;color:var(--card-text-muted);">
    Schwellen pro Werkzeug einstellbar (<i>Bestellvorschlag bei %</i>) ·
    Standzeit-Verbrauch reset nach Werkzeug-Tausch über die Werkzeug-Seite.
  </p>
</div>
{% endif %}

{% endblock %}