{% extends "base.html" %}

{% block title %}Chargen{% endblock %}
{% block heading %}Material-Chargen{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not only_remaining %}is-active{% endif %}" href="/lots">Alle</a>
    <a class="tab {% if only_remaining %}is-active{% endif %}" href="/lots?only_remaining=1">Nur mit Restbestand</a>
  </div>
{% endblock %}

{% block content %}
<form method="post" action="/lots/new" enctype="multipart/form-data" class="card max-w-4xl mb-4">
  <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
  <div class="card-header"><div>
    <h2>Neue Charge erfassen</h2>
    <p class="sub">Vom Wareneingang — Charge + Schmelze + verfügbare Menge + Zeugnis-Anhang</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">Chargen-Nummer *</label>
      <input class="input mt-1 w-full nums" type="text" name="lot_no" required placeholder="z.B. CH-2026-1234">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstoff *</label>
      <select name="material_id" required class="select mt-1 w-full">
        <option value="">— wählen —</option>
        {% for m in materials %}
        <option value="{{ m.id }}">{{ 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</label>
      <input class="input mt-1 w-full nums" type="text" name="heat_no" placeholder="optional">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Menge *</label>
      <input class="input mt-1 w-full nums" type="text" name="qty" required placeholder="z.B. 250">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Einheit</label>
      <input class="input mt-1 w-full" type="text" name="unit" value="kg">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz</label>
      <input class="input mt-1 w-full" type="text" name="note">
    </div>
    <div class="col-span-3" style="border-top:1px solid var(--card-border-2);padding-top:14px;margin-top:6px;">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Werkstoff-Zertifikat / Chargen-Dokument</label>
      <p class="text-[10px] text-neutral-500 mt-1 mb-2">Wahl A: vorhandenes Zertifikat verknüpfen — oder Wahl B: neues Zeugnis-PDF direkt hochladen.</p>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">A) Vorhandenes Zertifikat verknüpfen</label>
      <select name="certificate_id" class="select mt-1 w-full">
        <option value="">— keine Verknüpfung —</option>
        {% for c in certificates %}
        <option value="{{ c.id }}">
          {{ c.cert_type }} · {{ c.material_name or '?' }}{% if c.cert_number %} · {{ c.cert_number }}{% endif %}{% if c.heat_no %} · Heat {{ c.heat_no }}{% endif %}
        </option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">B) Zertifikat-Typ (bei Upload)</label>
      <select name="cert_type_inline" class="select mt-1 w-full">
        <option value="3.1">3.1 — Werkszeugnis</option>
        <option value="3.2">3.2 — Abnahmeprüfzeugnis</option>
        <option value="2.1">2.1 — Werksbescheinigung</option>
        <option value="2.2">2.2 — Werksprüfzeugnis</option>
      </select>
    </div>
    <div class="col-span-3">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">B) Datei direkt hochladen (PDF / Bild)</label>
      <input class="input mt-1 w-full" type="file" name="doc_file" accept=".pdf,.png,.jpg,.jpeg,.tif,.tiff">
      <p class="text-[10px] text-neutral-500 mt-1">Wird als neues Zertifikat angelegt und automatisch mit dieser Charge verknüpft.</p>
    </div>
  </div>
  <div class="px-5 py-4 border-t flex justify-end" style="border-color: var(--card-border-2);">
    <button class="btn btn-primary" type="submit">+ Charge anlegen</button>
  </div>
</form>

<div class="card">
  {% if lots %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Charge</th>
        <th>Werkstoff</th>
        <th>Schmelze</th>
        <th>Zertifikat</th>
        <th>Bestellung</th>
        <th>Eingang</th>
        <th class="num">Erhalten</th>
        <th class="num">Rest</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for l in lots %}
      <tr>
        <td class="nums font-semibold">{{ l.lot_no }}</td>
        <td>{{ l.material_name or '—' }}{% if l.material_code %} <span class="text-xs" style="color: var(--card-text-muted);">{{ l.material_code }}</span>{% endif %}</td>
        <td class="nums text-xs">{{ l.heat_no or '—' }}</td>
        <td>{% if l.cert_type %}<span class="badge badge-blue">{{ l.cert_type }}</span>{% if l.cert_number %} <span class="text-xs nums" style="color: var(--card-text-muted);">{{ l.cert_number }}</span>{% endif %}{% else %}—{% endif %}</td>
        <td class="nums text-xs">{{ l.po_no or '—' }}</td>
        <td class="text-xs nums">{{ l.received_at[:10] }}</td>
        <td class="num nums">{{ '%.2f'|format(l.qty_received) }} {{ l.unit }}</td>
        <td class="num nums">
          {% set pct = (l.qty_remaining / l.qty_received * 100) if l.qty_received else 0 %}
          {% if l.qty_remaining > 0 %}
            <span style="color: {% if pct < 20 %}#fcd34d{% else %}#a7f3d0{% endif %};">{{ '%.2f'|format(l.qty_remaining) }}</span>
          {% else %}
            <span style="color: var(--card-text-muted);">verbraucht</span>
          {% endif %}
        </td>
        <td>
          {% if l.qty_remaining <= 0 %}<span class="badge badge-neutral">verbraucht</span>
          {% elif l.qty_remaining < l.qty_received * 0.20 %}<span class="badge badge-amber">fast leer</span>
          {% else %}<span class="badge badge-emerald">verfügbar</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">📦</div>
    <p class="text-sm" style="color: var(--card-text-muted);">Noch keine Chargen erfasst.</p>
  </div>
  {% endif %}
</div>
{% endblock %}