{% extends "base.html" %}
{% from "_macros.html" import pdf_lang_picker %}

{% block title %}{{ dn.dn_no }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/delivery-notes" class="hover:underline">Lieferscheine</a> / {{ dn.dn_no }}</p>{% endblock %}
{% block heading %}{{ dn.dn_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ dn.customer_name_snapshot }}</span>{% endblock %}

{% block topbar_actions %}
  <span class="badge badge-{{ STATUS_COLOR.get(dn.status, 'neutral') }}" style="font-size:0.75rem; padding:0.25rem 0.625rem;">{{ STATUS_LABELS.get(dn.status, dn.status) }}</span>
  {{ pdf_lang_picker('delivery-notes', dn.id, dn.lang or 'de') }}
  <a class="btn btn-sm btn-secondary" href="/delivery-notes/{{ dn.id }}/pdf" target="_blank">Lieferschein PDF</a>
  <a class="btn btn-sm btn-primary" href="/delivery-notes/{{ dn.id }}/send">Per Mail senden</a>
{% endblock %}

{% block content %}
{% include "_workflow_stepper.html" %}
<div class="grid grid-cols-3 gap-4">

  <div class="col-span-2 space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Stammdaten</h2></div></div>
      <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Auftrag</p>
          <p class="nums"><a href="/sales-orders/{{ dn.sales_order_id }}" class="text-blue-700 hover:underline">{{ dn.order_no }}</a></p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Kunde</p>
          <p class="font-medium">{{ dn.customer_name_snapshot }}</p>
          <p class="text-xs text-neutral-500 nums">{{ dn.customer_country_iso_snapshot or '—' }}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Versand</p>
          <p class="text-xs nums">Datum: <span class="font-semibold">{{ dn.ship_date or '—' }}</span></p>
          {% if dn.carrier %}<p class="text-xs">Dienstleister: {{ dn.carrier }}</p>{% endif %}
          {% if dn.tracking_no %}<p class="text-xs nums">Tracking: <span class="font-mono">{{ dn.tracking_no }}</span></p>{% endif %}
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Lieferadresse</p>
          <p class="text-xs whitespace-pre-line">{{ dn.shipping_address or '—' }}</p>
        </div>
        {% if dn.packing_note %}
        <div class="col-span-2 mt-2 pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Packhinweis</p>
          <p class="text-xs whitespace-pre-line">{{ dn.packing_note }}</p>
        </div>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Positionen</h2><p class="sub">{{ lines|length }} {% if lines|length == 1 %}Position{% else %}Positionen{% endif %} · keine Preise auf dem Lieferschein</p></div></div>
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:40px">Pos.</th>
            <th>Beschreibung</th>
            <th class="num">Versendet</th>
            <th>Einh.</th>
            <th class="num">Auftrag</th>
            <th class="num">Bisher gesamt</th>
          </tr>
        </thead>
        <tbody>
          {% for ln in lines %}
          <tr>
            <td class="nums text-neutral-500">{{ ln.so_line_no or ln.line_no }}</td>
            <td>
              <div>{{ ln.description }}</div>
              {% if ln.item_ident %}<div class="text-[11px] text-neutral-500 nums">{{ ln.item_ident }}</div>{% endif %}
            </td>
            <td class="num nums font-semibold">{{ "%.0f"|format(ln.qty_shipped) if ln.qty_shipped == ln.qty_shipped|int else "%.2f"|format(ln.qty_shipped) }}</td>
            <td class="text-xs">{{ ln.unit }}</td>
            <td class="num text-xs nums text-neutral-500">{{ "%.0f"|format(ln.qty_ordered) if ln.qty_ordered == ln.qty_ordered|int else "%.2f"|format(ln.qty_ordered) }}</td>
            <td class="num text-xs nums {% if ln.qty_delivered + 0.0001 >= ln.qty_ordered %}text-emerald-700{% else %}text-amber-600{% endif %}">{{ "%.0f"|format(ln.qty_delivered) if ln.qty_delivered == ln.qty_delivered|int else "%.2f"|format(ln.qty_delivered) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Status</h2></div></div>
      <div class="p-5 space-y-3 text-sm">
        <p><span class="badge badge-{{ STATUS_COLOR.get(dn.status, 'neutral') }}">{{ STATUS_LABELS.get(dn.status, dn.status) }}</span></p>
        <form method="post" action="/delivery-notes/{{ dn.id }}/status" class="flex items-center gap-2">
          <select name="status" class="select flex-1" style="font-size:0.75rem;">
            {% for code, label in STATUS_LABELS.items() %}
              <option value="{{ code }}" {% if code == dn.status %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <button class="btn btn-sm btn-primary" type="submit">Setzen</button>
        </form>
        <div class="text-[11px] text-neutral-500 pt-2 border-t" style="border-color: var(--card-border-2);">
          Erstellt: <span class="nums">{{ dn.created_at[:16] }}</span><br>
          {% if dn.posted_at %}Gebucht: <span class="nums">{{ dn.posted_at[:16] }}</span><br>{% endif %}
          {% if dn.shipped_at %}Versendet: <span class="nums">{{ dn.shipped_at[:16] }}</span>{% endif %}
        </div>
      </div>
    </div>

    {# v1.8.0 Versand-Karte: Label erzeugen + Tracking #}
    <div class="card">
      <div class="card-header">
        <div>
          <h2>Versand &amp; Label</h2>
          <p class="sub">DHL · UPS · DPD · GLS · Hermes · Manuell</p>
        </div>
      </div>
      <div class="p-5 space-y-3 text-sm">
        {% if shipment %}
          <div class="rounded-md bg-emerald-50 border border-emerald-200 p-3">
            <p class="text-[11px] uppercase tracking-wider font-semibold text-emerald-700 mb-1">Versand erstellt</p>
            <p class="text-xs">
              <span class="font-semibold">{{ CARRIERS.get(shipment.carrier, {}).get('label', shipment.carrier) }}</span>
              · {{ SERVICE_LEVELS.get(shipment.service_level, shipment.service_level or 'Standard') }}
            </p>
            <p class="text-xs nums mt-1">
              Tracking:
              {% if tracking_url %}
                <a href="{{ tracking_url }}" target="_blank" class="font-mono text-blue-700 hover:underline">{{ shipment.tracking_no }}</a>
              {% else %}
                <span class="font-mono">{{ shipment.tracking_no or '—' }}</span>
              {% endif %}
            </p>
            {% if shipment.weight_kg %}
              <p class="text-xs nums">Gewicht: {{ "%.2f"|format(shipment.weight_kg) }} kg</p>
            {% endif %}
            {% if shipment.freight_cost_net %}
              <p class="text-xs nums">Fracht (gesch.): {{ "%.2f"|format(shipment.freight_cost_net) }} {{ shipment.freight_currency or 'EUR' }}</p>
            {% endif %}
            <div class="flex gap-2 mt-3">
              <a href="/delivery-notes/{{ dn.id }}/label" target="_blank"
                 class="btn btn-sm btn-primary flex-1 text-center">📄 Label drucken</a>
              {% if tracking_url %}
                <a href="{{ tracking_url }}" target="_blank"
                   class="btn btn-sm btn-secondary">Tracking</a>
              {% endif %}
            </div>
            {# Echte Carrier-Tracking-Nr nachträglich eintragen #}
            <details class="mt-3">
              <summary class="text-[11px] text-neutral-500 cursor-pointer hover:underline">
                Echte Tracking-Nr eintragen ↺
              </summary>
              <div class="flex gap-1 mt-2">
                <input id="real-tn-{{ shipment.id }}" type="text" class="input flex-1"
                       placeholder="z.B. 00340434161094012345"
                       style="font-size:11px; font-family: monospace;">
                <button class="btn btn-sm btn-secondary"
                        onclick="updateRealTracking({{ shipment.id }})">Speichern</button>
              </div>
            </details>
          </div>
        {% else %}
          <form method="post" action="/delivery-notes/{{ dn.id }}/ship" class="space-y-3">
            <div>
              <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Carrier</label>
              <select name="carrier" class="select mt-1 w-full" style="font-size:12px;">
                {% for code, info in CARRIERS.items() %}
                  <option value="{{ code }}" {% if code == 'dhl' %}selected{% endif %}>{{ info.label }}</option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Service-Level</label>
              <select name="service_level" class="select mt-1 w-full" style="font-size:12px;">
                {% for code, label in SERVICE_LEVELS.items() %}
                  <option value="{{ code }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Gewicht (kg)</label>
                <input class="input mt-1 w-full nums" type="number" name="weight_kg" step="0.01" min="0" value="1.0" required>
              </div>
              <div>
                <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Pakete</label>
                <input class="input mt-1 w-full nums" type="number" name="package_count" min="1" value="1">
              </div>
            </div>
            <div class="grid grid-cols-3 gap-1">
              <div>
                <label class="text-[10px] text-neutral-500">L (cm)</label>
                <input class="input nums" type="number" name="length_cm" min="0" step="0.1" placeholder="20" style="font-size:11px;">
              </div>
              <div>
                <label class="text-[10px] text-neutral-500">B (cm)</label>
                <input class="input nums" type="number" name="width_cm" min="0" step="0.1" placeholder="15" style="font-size:11px;">
              </div>
              <div>
                <label class="text-[10px] text-neutral-500">H (cm)</label>
                <input class="input nums" type="number" name="height_cm" min="0" step="0.1" placeholder="10" style="font-size:11px;">
              </div>
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Nachnahme (optional, €)</label>
              <input class="input mt-1 w-full nums" type="number" name="cod_amount" step="0.01" min="0" placeholder="leer = ohne Nachnahme">
            </div>
            <div>
              <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Notiz (intern)</label>
              <input class="input mt-1 w-full" type="text" name="notes" placeholder="z.B. Zerbrechlich, Diese Seite oben">
            </div>
            <button class="btn btn-primary w-full" type="submit">📦 Label erzeugen</button>
            <p class="text-[10px] text-neutral-500 leading-tight">
              Im Manual-Mode: lokales Etikett mit Code-128-Barcode. Carrier-Pickup
              wie gewohnt anrufen, dann hier die echte Tracking-Nr nachtragen.
            </p>
          </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  function updateRealTracking(shipmentId) {
    var inp = document.getElementById('real-tn-' + shipmentId);
    var tn = (inp.value || '').trim();
    if (!tn) { return; }
    fetch('/api/shipments/' + shipmentId + '/tracking', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({tracking_no: tn})
    }).then(function(r) {
      if (r.ok) { window.location.reload(); }
      else if (window.toast) { window.toast('Fehler beim Speichern', 'error'); }
    });
  }
</script>
{% endblock %}