{% extends "base.html" %}

{% block title %}Eingangsrechnung hochladen{% endblock %}
{% block heading %}Eingangsrechnung hochladen{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vendor-invoices" class="hover:underline">Eingangsrechnungen</a> / Upload</p>{% endblock %}

{% block content %}
<div class="card" style="max-width:720px;">
  <div class="card-header"><div><h2>PDF einer Lieferanten-Rechnung hochladen</h2></div></div>
  <form method="post" action="/vendor-invoices/upload" enctype="multipart/form-data" class="p-5 space-y-4">
    {{ csrf_field(request) if csrf_field is defined else '' }}
    <div class="rounded-md border-2 border-dashed p-6 text-center"
         style="border-color: var(--card-border); background: rgba(0,0,0,0.02);">
      <p class="text-sm text-neutral-600">PDF-Datei der Rechnung hier reinziehen oder unten auswählen.</p>
      <input class="input mt-3" type="file" name="file" accept="application/pdf,image/png,image/jpeg" required>
      <p class="text-[11px] text-neutral-500 mt-2">
        Akzeptiert: PDF, PNG, JPG · max. 50 MB
      </p>
    </div>

    <div class="rounded-md p-3 text-sm" style="background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.20);">
      <p class="font-semibold text-amber-700 mb-1">Was passiert nach dem Upload?</p>
      <ol class="text-xs text-neutral-700 space-y-1 list-decimal list-inside">
        <li>OCR-Engine extrahiert automatisch Lieferant, Rechnungs-Nr, Beträge, IBAN</li>
        <li>Sie sehen die erkannten Werte + Original-PDF nebeneinander</li>
        <li>Korrigieren Sie ggf. Werte, ordnen den Lieferant zu</li>
        <li>Status auf <i>geprüft</i> oder direkt <i>gebucht</i> setzen</li>
        <li>Beim DATEV-Export werden gebuchte Rechnungen automatisch übernommen</li>
      </ol>
    </div>

    <div style="display:flex;gap:8px;">
      <button class="btn btn-primary" type="submit">Hochladen + OCR starten</button>
      <a href="/vendor-invoices" class="btn btn-secondary">Abbrechen</a>
    </div>
  </form>
</div>

<p class="text-[11px] text-neutral-500 mt-4" style="max-width:720px;">
  <strong>OCR-Engines:</strong>
  <code>pdftotext</code> (poppler-utils, schnell, native Text-PDFs)
  · <code>tesseract</code> (langsamer, aber funktioniert auf Scans/Fotos).
  Bei macOS: <code>brew install poppler tesseract tesseract-lang</code>.
  Bei Windows: Installer von github.com/UB-Mannheim/tesseract.
</p>
{% endblock %}