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

{% block title %}{{ po.po_no }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/purchase-orders" class="hover:underline">Bestellungen</a> / {{ po.po_no }}</p>{% endblock %}
{% block heading %}{{ po.po_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ po.vendor_name or '—' }}</span>{% endblock %}

{% block content %}
<div class="card max-w-5xl">
  <div class="card-header" style="display:flex; align-items:center; justify-content:space-between;">
    <div>
      <h2>Bestellung</h2>
      <p class="sub">{{ po.order_date or '—' }}{% if po.expected_date %} · Eingang erwartet: {{ po.expected_date }}{% endif %}</p>
    </div>
    <div class="flex items-center gap-2">
      {% set status_color = {'draft':'neutral','sent':'blue','partial':'amber','received':'emerald','cancelled':'red'} %}
      {% set status_label = {'draft':'Entwurf','sent':'Versendet','partial':'Teilweise','received':'Erhalten','cancelled':'Storniert'} %}
      <span class="badge badge-{{ status_color.get(po.status, 'neutral') }}">{{ status_label.get(po.status, po.status) }}</span>
      {% if po.approval_status == 'pending' %}
        <span class="badge" style="background:rgba(245,158,11,0.15);color:#b45309;" title="Genehmigung erforderlich (Schwelle in Settings)">
          ⚠ Genehmigung erforderlich
        </span>
      {% elif po.approval_status == 'approved' %}
        <span class="badge badge-emerald" title="Genehmigt am {{ po.approved_at[:10] if po.approved_at else '' }}">✓ Genehmigt</span>
      {% elif po.approval_status == 'rejected' %}
        <span class="badge badge-red" title="{{ po.approval_note or '' }}">✗ Abgelehnt</span>
      {% endif %}
      {% if po.confirmed_at %}
        <span class="badge badge-emerald" title="AB {{ po.ab_number or '—' }} · {{ po.confirmed_at[:10] }}">✓ Bestätigt</span>
      {% elif po.status in ('sent','partial') %}
        <span class="badge badge-amber" title="Lieferanten-Bestätigung steht aus">Bestätigung offen</span>
      {% endif %}
      <a class="btn btn-sm btn-secondary" href="/purchase-orders/{{ po.id }}/pdf" target="_blank" title="Bestellschein als PDF">PDF</a>
      {% if po.status == 'draft' and po.approval_status != 'pending' %}
      <button class="btn btn-sm btn-primary" type="button" onclick="setStatus('sent')">→ Versendet</button>
      {% endif %}
    </div>
  </div>

  <table class="data-table">
    <thead>
      <tr>
        <th style="width:40px">#</th>
        <th>Beschreibung</th>
        <th class="num">Bestellt</th>
        <th class="num">Erhalten</th>
        <th>Einh.</th>
        <th class="num">Einzelpr.</th>
        <th class="num">Summe</th>
      </tr>
    </thead>
    <tbody>
      {% for ln in lines %}
      <tr>
        <td class="nums">{{ loop.index }}</td>
        <td>
          <div class="font-medium">{{ ln.description }}</div>
          {% if ln.material_name %}<div class="text-xs" style="color: var(--card-text-muted);">{{ ln.material_name }}</div>{% endif %}
        </td>
        <td class="num nums">{{ '%.2f'|format(ln.qty_ordered) }}</td>
        <td class="num nums">
          {% set pct = (ln.qty_received / ln.qty_ordered * 100) if ln.qty_ordered else 0 %}
          {% if ln.qty_received >= ln.qty_ordered %}
            <span style="color: #6ee7b7;">{{ '%.2f'|format(ln.qty_received) }} ✓</span>
          {% elif ln.qty_received > 0 %}
            <span style="color: #fcd34d;">{{ '%.2f'|format(ln.qty_received) }} ({{ '%.0f'|format(pct) }}%)</span>
          {% else %}
            <span style="color: var(--card-text-muted);">0</span>
          {% endif %}
        </td>
        <td class="text-xs">{{ ln.unit }}</td>
        <td class="num nums">{{ '%.2f'|format(ln.unit_price) }} €</td>
        <td class="num nums font-semibold">{{ '%.2f'|format(ln.line_total) }} €</td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="p-6 text-center" style="color: var(--card-text-muted);">Noch keine Positionen</td></tr>
      {% endfor %}
    </tbody>
    {% if lines %}
    <tfoot>
      <tr><td colspan="6" class="text-right font-semibold">Summe netto:</td>
          <td class="num nums font-bold" style="color: var(--brand-orange);">{{ money(po.total_net) }} {{ po.currency }}</td></tr>
    </tfoot>
    {% endif %}
  </table>

  {# Add line form #}
  <div class="p-5 border-t" style="border-color: var(--card-border-2);">
    <p class="text-[11px] uppercase tracking-wider font-semibold mb-2" style="color: var(--brand-blue-light);">Position hinzufügen</p>
    <div class="grid grid-cols-6 gap-2 items-end">
      <div class="col-span-3">
        <input id="po-add-desc" class="input w-full" type="text" placeholder="Beschreibung">
      </div>
      <input id="po-add-qty" class="input nums" type="text" placeholder="Menge">
      <input id="po-add-unit" class="input" type="text" value="kg">
      <input id="po-add-price" class="input nums" type="text" placeholder="€/Einheit">
      <div class="col-span-3">
        <select id="po-add-mat" class="select w-full">
          <option value="">— Material (optional) —</option>
          {% for m in materials %}<option value="{{ m.id }}">{{ m.name }}{% if m.code %} ({{ m.code }}){% endif %}</option>{% endfor %}
        </select>
      </div>
      <button class="btn btn-primary col-span-3" id="po-add-line" type="button">+ Position hinzufügen</button>
    </div>
  </div>
</div>

{# v1.8.2 #3 — Genehmigungs-Workflow #}
{% if po.approval_required %}
<div class="card max-w-5xl" style="margin-top:14px;border-left:4px solid #f59e0b;">
  <div class="card-header"><div>
    <h2>Genehmigung</h2>
    <p class="sub">
      {% if po.approval_status == 'pending' %}
        Diese Bestellung übersteigt die Genehmigungs-Schwelle und braucht GF-Freigabe vor Versand.
      {% elif po.approval_status == 'approved' %}
        Genehmigt am {{ po.approved_at[:16] if po.approved_at else '' }}
      {% elif po.approval_status == 'rejected' %}
        Abgelehnt am {{ po.approved_at[:16] if po.approved_at else '' }}
      {% endif %}
    </p>
  </div></div>
  <div class="p-5">
    {% if po.approval_status == 'pending' %}
      <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
        <form method="post" action="/purchase-orders/{{ po.id }}/approve" style="display:flex;gap:4px;flex:1;">
          <input type="text" name="note" class="input flex-1" placeholder="Optionaler Vermerk">
          <button class="btn btn-primary" style="background:#059669;border-color:#047857;" type="submit">✓ Genehmigen</button>
        </form>
        <form method="post" action="/purchase-orders/{{ po.id }}/reject" style="display:flex;gap:4px;">
          <input type="text" name="note" class="input" placeholder="Grund" style="width:200px;">
          <button class="btn btn-secondary" style="color:#dc2626;border-color:rgba(239,68,68,0.4);" type="submit">✗ Ablehnen</button>
        </form>
      </div>
    {% elif po.approval_note %}
      <p class="text-sm text-neutral-600">Notiz: <em>{{ po.approval_note }}</em></p>
    {% endif %}
  </div>
</div>
{% endif %}

{# Auftragsbestätigung des Lieferanten #}
{% if po.status in ('sent', 'partial') %}
<div class="card max-w-5xl mt-4">
  <div class="card-header"><div>
    <h2>Auftragsbestätigung Lieferant</h2>
    <p class="sub">{% if po.confirmed_at %}Bestätigt am {{ po.confirmed_at[:16] }}{% else %}Wenn die AB vom Lieferanten kommt, hier eintragen — der bestätigte Liefertermin überschreibt das ursprüngliche Wunschdatum.{% endif %}</p>
  </div></div>
  <form method="post" action="/purchase-orders/{{ po.id }}/confirm" class="p-5 grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">AB-Nummer</label>
      <input class="input mt-1 w-full nums" type="text" name="ab_number"
             value="{{ po.ab_number or '' }}" placeholder="z.B. AB-2026-0815">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Bestätigter Liefertermin</label>
      <input class="input mt-1 w-full nums" type="date" name="confirmed_date"
             value="{{ (po.confirmed_date or '')[:10] }}">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Notiz</label>
      <input class="input mt-1 w-full" type="text" name="confirm_note"
             value="{{ po.confirm_note or '' }}" placeholder="optional">
    </div>
    <div class="md:col-span-3 flex items-center justify-end gap-2 border-t pt-4" style="border-color: var(--card-border-2);">
      {% if po.confirmed_at %}
      <button class="btn btn-secondary" type="submit"
              formaction="/purchase-orders/{{ po.id }}/unconfirm"
              formmethod="post"
              onclick="return confirm('Bestätigung entfernen?');"
              style="color:#ef4444; border-color:#ef4444;">Bestätigung entfernen</button>
      {% endif %}
      <button class="btn btn-primary" type="submit">{% if po.confirmed_at %}Aktualisieren{% else %}Bestätigung erfassen{% endif %}</button>
    </div>
  </form>
</div>
{% endif %}

{# Wareneingang #}
{% if po.status in ('sent', 'partial') %}
<form method="post" action="/purchase-orders/{{ po.id }}/receive" class="card max-w-5xl mt-4">
  <div class="card-header"><div>
    <h2>Wareneingang buchen</h2>
    <p class="sub">Trage die jeweils empfangenen Mengen ein</p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr><th>#</th><th>Beschreibung</th><th class="num">Bestellt</th><th class="num">Erhalten bisher</th><th class="num">+ Eingang jetzt</th></tr>
    </thead>
    <tbody>
      {% for ln in lines %}
      {% set rest = (ln.qty_ordered or 0) - (ln.qty_received or 0) %}
      <tr>
        <td class="nums">{{ loop.index }}</td>
        <td>{{ ln.description }}</td>
        <td class="num nums">{{ '%.2f'|format(ln.qty_ordered) }} {{ ln.unit }}</td>
        <td class="num nums">{{ '%.2f'|format(ln.qty_received or 0) }}</td>
        <td class="num">
          <input class="input nums w-24 text-right" type="text" name="rcv_{{ ln.id }}"
                 placeholder="0" value="{% if rest > 0 %}{{ '%.2f'|format(rest) }}{% endif %}">
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="p-5 grid grid-cols-2 gap-4">
    <label class="flex items-center gap-2">
      <input type="checkbox" name="quality_ok" value="1" checked>
      <span class="text-sm">Qualität OK (sonst 8D-Reklamation auslösen)</span>
    </label>
    <input class="input" type="text" name="note" placeholder="Notiz zum Wareneingang (z.B. Lieferschein-Nr)">
  </div>
  <div class="px-5 py-4 border-t flex items-center justify-end" style="border-color: var(--card-border-2);">
    <button class="btn btn-primary" type="submit">Wareneingang buchen</button>
  </div>
</form>
{% endif %}

<script>
(function () {
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
  const PO_ID = {{ po.id }};
  function post(url, body) {
    const csrf = getCookie('csrf_token');
    return fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ ...body, csrf_token: csrf }) }).then(r => r.json());
  }

  document.getElementById('po-add-line')?.addEventListener('click', () => {
    const desc = document.getElementById('po-add-desc').value.trim();
    if (!desc) { if (window.toast) toast('Beschreibung erforderlich', 'error'); return; }
    post('/api/purchase-orders/' + PO_ID + '/lines/add', {
      description: desc,
      qty: document.getElementById('po-add-qty').value,
      unit: document.getElementById('po-add-unit').value,
      unit_price: document.getElementById('po-add-price').value,
      material_id: document.getElementById('po-add-mat').value || null,
    }).then(d => { if (d.ok) location.reload(); });
  });

  window.setStatus = function(status) {
    post('/api/purchase-orders/' + PO_ID + '/status', { status }).then(() => location.reload());
  };
})();
</script>

<div class="entity-tasks max-w-5xl" data-entity-type="purchase_order" data-entity-id="{{ po.id }}"></div>
<div class="entity-comments max-w-5xl" data-entity-type="purchase_order" data-entity-id="{{ po.id }}"></div>
{% endblock %}