{% extends "base.html" %}

{% block title %}S/N {{ s.serial_no }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Rückverfolgung / Seriennummer</p>{% endblock %}
{% block heading %}Rückverfolgung · {{ s.serial_no }}{% endblock %}

{% block content %}

{% set status_color = {
  'open':'neutral','in_production':'blue','qc_pending':'amber',
  'qc_failed':'red','shipped':'emerald','scrapped':'red'
} %}
{% set status_label = {
  'open':'Offen','in_production':'In Produktion','qc_pending':'QC ausstehend',
  'qc_failed':'QC nicht bestanden','shipped':'Versendet','scrapped':'Ausgesondert'
} %}

<div class="card max-w-4xl mb-4">
  <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
    <div>
      <h2>Werkstück</h2>
      <p class="sub">{{ s.item_ident }} — {{ s.item_desc or '' }}</p>
    </div>
    <span class="badge badge-{{ status_color.get(s.status, 'neutral') }}" style="font-size:13px;padding:6px 14px;">
      {{ status_label.get(s.status, s.status) }}
    </span>
  </div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Seriennummer</p>
      <p class="nums font-bold mt-1" style="color: var(--brand-orange); font-size:18px;">{{ s.serial_no }}</p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Auftrag</p>
      <p class="nums mt-1">
        {% if s.sales_order_id %}<a href="/sales-orders/{{ s.sales_order_id }}" class="hover:underline" style="color:#f2581b;">{{ s.order_no }}</a>{% else %}—{% endif %}
      </p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Kunde</p>
      <p class="mt-1">{{ s.customer_name_snapshot or s.shipped_customer_name or '—' }}</p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Hergestellt am</p>
      <p class="nums mt-1">{{ s.produced_at[:16] if s.produced_at else '—' }}</p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Versendet am</p>
      <p class="nums mt-1">{{ s.shipped_at[:16] if s.shipped_at else '—' }}</p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Notiz</p>
      <p class="mt-1">{{ s.note or '—' }}</p>
    </div>
  </div>
</div>

<div class="card max-w-4xl mb-4">
  <div class="card-header"><div>
    <h2>Material-Charge / Heat-No</h2>
    <p class="sub">Welches Rohmaterial wurde verbaut</p>
  </div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Charge</p>
      <p class="nums mt-1 font-medium">
        {% if s.lot_id %}<a href="/lots" class="hover:underline">{{ s.lot_no }}</a>{% else %}— nicht zugeordnet —{% endif %}
      </p>
    </div>
    <div>
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Heat-No (Schmelze)</p>
      <p class="nums mt-1 font-medium">{{ s.heat_no or s.lot_heat_no or '—' }}</p>
    </div>
    <div class="col-span-2">
      <p class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Werkstoff-Zertifikat</p>
      <p class="nums mt-1">
        {% if s.cert_type %}
          <span class="badge badge-blue">{{ s.cert_type }}</span>
          <span class="ml-2 nums" style="color: var(--card-text);">{{ s.cert_number or '' }}</span>
        {% else %}—{% endif %}
      </p>
    </div>
  </div>
</div>

{% if s.shipped_at %}
<div class="card max-w-4xl">
  <div class="card-header" style="background:rgba(16,185,129,0.10);">
    <div>
      <h2 style="color:#6ee7b7;">✓ Versandnachweis</h2>
      <p class="sub">Bei Reklamation: dieser Datensatz beweist welche Charge bei welchem Kunden gelandet ist.</p>
    </div>
  </div>
  <div class="p-5 text-sm">
    Diese Seriennummer wurde am <strong class="nums">{{ s.shipped_at[:10] }}</strong>
    an <strong>{{ s.shipped_customer_name or s.customer_name_snapshot or 'Kunden' }}</strong> versendet.
  </div>
</div>
{% endif %}
{% endblock %}