{% extends "base.html" %}

{% block title %}Werkstoff-Zertifikate{% endblock %}
{% block heading %}Werkstoff-Zertifikate{% endblock %}
{% block topbar_actions %}
  <span class="text-sm" style="color: var(--card-text-muted);">{{ certificates|length }}</span>
{% endblock %}

{% block content %}
<form method="post" action="/material-certificates/new" enctype="multipart/form-data" class="card max-w-3xl mb-4">
  <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
  <div class="card-header"><div>
    <h2>Zertifikat erfassen</h2>
    <p class="sub">3.1 / 3.2 = mit mech. Prüfung · 2.1 / 2.2 = ohne — typischerweise vom Lieferanten</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">Werkstoff *</label>
      <select name="material_id" required class="select mt-1 w-full">
        <option value="">— Werkstoff 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">Zertifikat-Typ *</label>
      <select name="cert_type" required class="select mt-1 w-full">
        <option value="3.1">3.1 — Werkszeugnis (mech. Prüfung)</option>
        <option value="3.2">3.2 — Abnahmeprüfzeugnis (Sachverständiger)</option>
        <option value="2.1">2.1 — Werksbescheinigung (ohne Prüfung)</option>
        <option value="2.2">2.2 — Werksprüfzeugnis (Stichprobe)</option>
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zertifikat-Nummer</label>
      <input class="input mt-1 w-full nums" type="text" name="cert_number" placeholder="z.B. CERT-2026-12345">
    </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" placeholder="z.B. 12345">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zugehörige Bestellung (optional)</label>
      <select name="po_id" class="select mt-1 w-full">
        <option value="">— keine —</option>
        {% for po in purchase_orders %}<option value="{{ po.id }}">{{ po.po_no }}{% if po.vendor_name %} · {{ po.vendor_name }}{% endif %}</option>{% endfor %}
      </select>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zertifikat-Datei (PDF / Bild)</label>
      <input class="input mt-1 w-full" type="file" name="cert_file" accept=".pdf,.png,.jpg,.jpeg,.tif,.tiff">
      <p class="text-[10px] text-neutral-500 mt-1">Wird gespeichert unter <code>data/material-certificates/</code> — Open-Link wird automatisch generiert</p>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">… oder externer Link statt Upload</label>
      <input class="input mt-1 w-full" type="text" name="file_path" placeholder="z.B. https://kunden-portal.de/cert/12345.pdf">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz</label>
      <textarea class="input mt-1 w-full" rows="2" name="note"></textarea>
    </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">Zertifikat speichern</button>
  </div>
</form>

<div class="card">
  {% if certificates %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Datum</th>
        <th>Typ</th>
        <th>Werkstoff</th>
        <th>Zert.-Nr.</th>
        <th>Schmelze</th>
        <th>Bestellung</th>
        <th>Lieferant</th>
        <th>Datei</th>
      </tr>
    </thead>
    <tbody>
      {% for c in certificates %}
      <tr>
        <td class="text-xs nums">{{ c.uploaded_at[:10] }}</td>
        <td><span class="badge badge-blue">{{ c.cert_type }}</span></td>
        <td>{{ c.material_name or '—' }}{% if c.material_code %} <span class="text-xs" style="color: var(--card-text-muted);">({{ c.material_code }})</span>{% endif %}</td>
        <td class="nums text-xs">{{ c.cert_number or '—' }}</td>
        <td class="nums text-xs">{{ c.heat_no or '—' }}</td>
        <td class="nums text-xs">{{ c.po_no or '—' }}</td>
        <td class="text-xs">{{ c.vendor_name or '—' }}</td>
        <td>{% if c.file_path %}<a href="{{ c.file_path }}" target="_blank" class="text-xs" style="color: var(--brand-blue-light);">📎 Öffnen</a>{% else %}—{% 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 Zertifikate hinterlegt.</p>
  </div>
  {% endif %}
</div>
{% endblock %}