{% extends "base.html" %}

{% block title %}Eingangsrechnung {{ inv.invoice_no or '?' }}{% endblock %}
{% block heading %}🧾 Eingangsrechnung {{ inv.invoice_no or '(unbekannt)' }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vendor-invoices" class="hover:underline">Eingangsrechnungen</a> / {{ inv.invoice_no or inv.id }}</p>{% endblock %}

{% block topbar_actions %}
  <span class="badge" style="font-size:12px;
        {% if inv.status == 'draft' %}background:rgba(245,158,11,0.15);color:#b45309;
        {% elif inv.status == 'reviewed' %}background:rgba(59,130,246,0.15);color:#1d4ed8;
        {% elif inv.status == 'booked' %}background:rgba(16,185,129,0.15);color:#059669;
        {% elif inv.status == 'paid' %}background:rgba(16,185,129,0.25);color:#047857;
        {% else %}background:rgba(239,68,68,0.15);color:#dc2626;{% endif %}">
    {{ inv.status }}
  </span>
  {% if inv.attachment_id %}
    <a href="/vendor-invoices/{{ inv.id }}/pdf" target="_blank" class="btn btn-sm btn-secondary">📄 Original-PDF</a>
  {% endif %}
{% endblock %}

{% block content %}
<style>
  .ocr-confidence-bar { height:8px;background:rgba(0,0,0,0.05);border-radius:4px;overflow:hidden;width:120px; }
  .ocr-confidence-fill { height:100%;transition:width 0.2s; }
</style>

<div class="grid grid-cols-2 gap-4">
  <!-- LINKS: Original-PDF -->
  <div class="card">
    <div class="card-header">
      <div>
        <h2>Original-PDF</h2>
        <p class="sub">
          OCR-Engine: <strong>{{ inv.ocr_engine }}</strong>
          · Confidence:
          {% if inv.ocr_confidence %}
            {% set pct = (inv.ocr_confidence * 100)|round|int %}
            <span style="color:{% if pct >= 70 %}#059669{% elif pct >= 40 %}#b45309{% else %}#dc2626{% endif %};font-weight:600;">{{ pct }} %</span>
          {% else %}—{% endif %}
        </p>
      </div>
    </div>
    {% if inv.attachment_id %}
      <iframe src="/vendor-invoices/{{ inv.id }}/pdf#toolbar=0"
              style="width:100%;height:680px;border:0;border-top:1px solid var(--card-border-2);"></iframe>
    {% else %}
      <p style="padding:30px;text-align:center;color:var(--card-text-muted);">Kein PDF hinterlegt.</p>
    {% endif %}
    {% if inv.ocr_text %}
    <details style="padding:12px 16px;border-top:1px solid var(--card-border-2);">
      <summary class="text-xs text-neutral-500 cursor-pointer hover:underline">OCR-Roh-Text anzeigen</summary>
      <pre style="font-size:10px;font-family:monospace;background:rgba(0,0,0,0.04);padding:8px;border-radius:4px;max-height:280px;overflow:auto;white-space:pre-wrap;margin-top:8px;">{{ inv.ocr_text[:5000] }}</pre>
    </details>
    {% endif %}
  </div>

  <!-- RECHTS: Erkannte / editierbare Felder -->
  <div class="card">
    <div class="card-header"><div><h2>Erkannte Werte</h2><p class="sub">Bitte vor Buchung prüfen</p></div></div>
    <form method="post" action="/vendor-invoices/{{ inv.id }}/update" class="p-5 space-y-3 text-sm">
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Lieferant</label>
        <select name="vendor_id" class="select mt-1 w-full">
          <option value="">— bitte wählen —</option>
          {% for v in vendors %}
            <option value="{{ v.id }}" {% if v.id == inv.vendor_id %}selected{% endif %}>
              {{ v.name }}
            </option>
          {% endfor %}
        </select>
        {% if inv.vendor_name_raw and not inv.vendor_id %}
          <p class="text-xs text-amber-700 mt-1">
            <strong>OCR erkannt:</strong> „{{ inv.vendor_name_raw }}" — bitte zu vorhandenem Lieferant zuordnen.
          </p>
        {% endif %}
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Rechnungs-Nr</label>
        <input class="input mt-1 w-full nums" type="text" name="invoice_no" value="{{ inv.invoice_no or '' }}">
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Rechnungsdatum</label>
          <input class="input mt-1 w-full nums" type="date" name="issue_date" value="{{ inv.issue_date or '' }}">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Fällig</label>
          <input class="input mt-1 w-full nums" type="date" name="due_date" value="{{ inv.due_date or '' }}">
        </div>
      </div>

      <div class="grid grid-cols-3 gap-2">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Netto</label>
          <input class="input mt-1 w-full nums" type="number" step="0.01" name="subtotal_net" value="{{ inv.subtotal_net or '' }}">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">USt</label>
          <input class="input mt-1 w-full nums" type="number" step="0.01" name="vat_amount" value="{{ inv.vat_amount or '' }}">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Brutto</label>
          <input class="input mt-1 w-full nums" type="number" step="0.01" name="total_gross" value="{{ inv.total_gross or '' }}">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Währung</label>
          <select name="currency" class="select mt-1 w-full">
            <option value="EUR" {% if inv.currency == 'EUR' %}selected{% endif %}>EUR</option>
            <option value="USD" {% if inv.currency == 'USD' %}selected{% endif %}>USD</option>
            <option value="CHF" {% if inv.currency == 'CHF' %}selected{% endif %}>CHF</option>
            <option value="GBP" {% if inv.currency == 'GBP' %}selected{% endif %}>GBP</option>
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">IBAN</label>
          <input class="input mt-1 w-full" type="text" name="iban" value="{{ inv.iban or '' }}" style="font-family:monospace;font-size:11px;">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">DATEV-Konto</label>
          <input class="input mt-1 w-full nums" type="text" name="posting_account" value="{{ inv.posting_account or '' }}" placeholder="z.B. 3400">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Kostenstelle</label>
          <input class="input mt-1 w-full" type="text" name="cost_center" value="{{ inv.cost_center or '' }}" placeholder="z.B. 100">
        </div>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Notiz</label>
        <textarea class="input mt-1 w-full" name="note" rows="2">{{ inv.note or '' }}</textarea>
      </div>

      <div style="display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--card-border-2);padding-top:12px;">
        <button class="btn btn-secondary" type="submit" name="action" value="save">Zwischenspeichern</button>
        {% if inv.status == 'draft' %}
          <button class="btn btn-primary" type="submit" name="action" value="review">→ Als geprüft markieren</button>
        {% endif %}
        {% if inv.status in ('draft', 'reviewed') %}
          <button class="btn btn-primary" type="submit" name="action" value="book"
                  style="background:#059669;border-color:#047857;">→ Buchen</button>
        {% endif %}
      </div>
    </form>
  </div>
</div>
{% endblock %}