{% extends "base.html" %}

{% block title %}Eingangsrechnungen{% endblock %}
{% block heading %}🧾 Eingangsrechnungen · OCR-Erkennung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Verkauf / Eingangsrechnungen</p>{% endblock %}

{% block topbar_actions %}
  {% if draft_count and draft_count > 0 %}
    <a href="/vendor-invoices?status=draft" class="btn btn-secondary btn-sm"
       style="background:rgba(245,158,11,0.15);color:#b45309;border-color:rgba(245,158,11,0.4);">
      ⚠ {{ draft_count }} Entwurf{% if draft_count != 1 %}{% endif %} zu prüfen
    </a>
  {% endif %}
  <a href="/vendor-invoices/upload" class="btn btn-primary btn-sm">+ Rechnung hochladen</a>
{% endblock %}

{% block content %}
<style>
  .status-pill { display:inline-flex; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600; }
  .status-draft    { background:rgba(245,158,11,0.15); color:#b45309; }
  .status-reviewed { background:rgba(59,130,246,0.15); color:#1d4ed8; }
  .status-booked   { background:rgba(16,185,129,0.15); color:#059669; }
  .status-paid     { background:rgba(16,185,129,0.25); color:#047857; }
  .status-rejected { background:rgba(239,68,68,0.15);  color:#dc2626; }
</style>

<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Lieferanten-Rechnungen via PDF-Upload erfassen → automatische OCR-Erkennung von
  Lieferant, Rechnungs-Nr, Beträgen, IBAN. Vor der Buchung manuell prüfen.
  Spart pro Rechnung 5-10 Minuten Tippen.
</p>

<!-- Status-Filter -->
<div class="card" style="margin-bottom:14px;padding:8px 14px;">
  <div style="display:flex;gap:6px;flex-wrap:wrap;">
    <a href="/vendor-invoices" class="btn btn-sm {% if not status_filter %}btn-primary{% else %}btn-secondary{% endif %}">Alle</a>
    <a href="/vendor-invoices?status=draft" class="btn btn-sm {% if status_filter == 'draft' %}btn-primary{% else %}btn-secondary{% endif %}">Entwurf</a>
    <a href="/vendor-invoices?status=reviewed" class="btn btn-sm {% if status_filter == 'reviewed' %}btn-primary{% else %}btn-secondary{% endif %}">Geprüft</a>
    <a href="/vendor-invoices?status=booked" class="btn btn-sm {% if status_filter == 'booked' %}btn-primary{% else %}btn-secondary{% endif %}">Gebucht</a>
    <a href="/vendor-invoices?status=paid" class="btn btn-sm {% if status_filter == 'paid' %}btn-primary{% else %}btn-secondary{% endif %}">Bezahlt</a>
  </div>
</div>

<div class="card">
  <div class="card-header"><div><h2>{{ invoices|length }} Rechnung{% if invoices|length != 1 %}en{% endif %}</h2></div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Lieferant</th>
        <th>Rechnungs-Nr</th>
        <th>Datum</th>
        <th>Fällig</th>
        <th class="num">Brutto</th>
        <th>OCR-Engine</th>
        <th>Confidence</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for i in invoices %}
        <tr class="cursor-pointer" onclick="location='/vendor-invoices/{{ i.id }}'">
          <td>
            <strong>{{ i.vendor_name or i.vendor_name_raw or '?' }}</strong>
            {% if not i.vendor_id %}<span class="badge" style="background:rgba(245,158,11,0.15);color:#b45309;font-size:10px;margin-left:4px;">unbekannt</span>{% endif %}
          </td>
          <td class="nums">{{ i.invoice_no or '—' }}</td>
          <td class="nums">{{ i.issue_date or '—' }}</td>
          <td class="nums">{{ i.due_date or '—' }}</td>
          <td class="num nums">
            {% if i.total_gross %}
              {{ "{:,.2f}".format(i.total_gross).replace(",","X").replace(".",",").replace("X",".") }} {{ i.currency or 'EUR' }}
            {% else %}—{% endif %}
          </td>
          <td><span class="badge badge-neutral" style="font-size:10px;">{{ i.ocr_engine }}</span></td>
          <td class="nums">
            {% if i.ocr_confidence %}
              {% set pct = (i.ocr_confidence * 100)|round|int %}
              <span style="color:{% if pct >= 70 %}#059669{% elif pct >= 40 %}#b45309{% else %}#dc2626{% endif %};">{{ pct }} %</span>
            {% else %}—{% endif %}
          </td>
          <td><span class="status-pill status-{{ i.status }}">{{ i.status }}</span></td>
          <td>
            <a href="/vendor-invoices/{{ i.id }}" class="btn btn-sm btn-secondary"
               onclick="event.stopPropagation()">Prüfen</a>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="9" style="text-align:center;padding:40px;color:var(--card-text-muted);">
          Noch keine Eingangsrechnungen erfasst.
          <a href="/vendor-invoices/upload" class="btn btn-sm btn-primary" style="margin-left:8px;">+ Erste hochladen</a>
        </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}