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

{% block title %}{{ inv.invoice_no }}{% endblock %}
{% block body_data %}data-page-type="invoice" data-page-id="{{ inv.id }}" data-page-label="{{ inv.invoice_no }}" data-page-sub="{{ inv.customer_name_snapshot }}"{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/invoices" class="hover:underline">Rechnungen</a> / {{ inv.invoice_no }}</p>{% endblock %}
{% block heading %}{{ inv.invoice_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ inv.customer_name_snapshot }}</span>{% endblock %}

{% block topbar_actions %}
  <span class="badge badge-{{ STATUS_COLOR.get(inv.status, 'neutral') }}" style="font-size:0.75rem; padding:0.25rem 0.625rem;">{{ STATUS_LABELS.get(inv.status, inv.status) }}</span>
  {% if inv.kind == 'storno' %}<span class="badge badge-red" style="font-size:0.75rem;">STORNO</span>{% endif %}
  {% if inv.is_locked %}
    <span class="badge badge-amber" style="font-size:0.75rem;"
          title="GoBD-gesperrt{% if inv.pdf_hash %} · SHA-256: {{ inv.pdf_hash[:16] }}…{% endif %}">🔒 gesperrt</span>
  {% endif %}
  <a class="btn btn-sm btn-primary" href="/invoices/{{ inv.id }}/send">Per Mail senden</a>
  {{ pdf_lang_picker('invoices', inv.id, inv.lang or 'de') }}
  <div class="relative inline-block">
    <details class="inline-block invoice-format-menu">
      <summary class="btn btn-sm btn-secondary cursor-pointer list-none">PDF / E-Rechnung ▾</summary>
      <div class="absolute right-0 mt-1 rounded-md invoice-format-dropdown"
           style="min-width:280px;
                  background: rgba(15, 23, 42, 0.97);
                  border: 1px solid rgba(255, 255, 255, 0.12);
                  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
                  backdrop-filter: blur(20px) saturate(180%);
                  -webkit-backdrop-filter: blur(20px) saturate(180%);
                  padding: 4px;
                  z-index: 100;">
        <a href="/invoices/{{ inv.id }}/pdf?format=pdf" target="_blank"
           class="block px-3 py-2 text-xs rounded"
           style="color: var(--card-text); text-decoration: none;">
          <span style="font-weight:600;">PDF (klassisch)</span>
          <div style="font-size:10px; opacity:0.65; margin-top:1px;">Standard-Rechnung als PDF</div>
        </a>
        <a href="/invoices/{{ inv.id }}/pdf?format=zugferd" target="_blank"
           class="block px-3 py-2 text-xs rounded"
           style="color: var(--card-text); text-decoration: none;">
          <span style="font-weight:600;">ZUGFeRD (PDF + XML)</span>
          <div style="font-size:10px; opacity:0.65; margin-top:1px;">Hybrid · für deutsche B2B-Empfänger</div>
        </a>
        <a href="/invoices/{{ inv.id }}/pdf?format=xrechnung" target="_blank"
           class="block px-3 py-2 text-xs rounded"
           style="color: var(--card-text); text-decoration: none;">
          <span style="font-weight:600;">XRechnung (XML only)</span>
          <div style="font-size:10px; opacity:0.65; margin-top:1px;">Für öffentliche Auftraggeber (Behörden)</div>
        </a>
      </div>
    </details>
  </div>
  <style>
    .invoice-format-dropdown a {
      color: rgba(255, 255, 255, 0.95) !important;
    }
    .invoice-format-dropdown a:hover {
      background: rgba(242, 88, 27, 0.18);
    }
    body.theme-light .invoice-format-dropdown {
      background: rgba(255, 255, 255, 0.98) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
    }
    body.theme-light .invoice-format-dropdown a {
      color: #1a1a1a !important;
    }
    body.theme-light .invoice-format-dropdown a:hover {
      background: rgba(242, 88, 27, 0.10);
    }
  </style>
{% 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">Rechnungsempfänger</p>
          <p class="font-medium">{{ inv.customer_name_snapshot }}</p>
          <p class="text-xs text-neutral-600 nums">
            {{ inv.customer_country_iso_snapshot or '—' }}
            {% if inv.customer_vat_id_snapshot %}· {{ inv.customer_vat_id_snapshot }}{% endif %}
          </p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Belegdaten</p>
          <p class="text-xs nums">Datum: <span class="font-semibold">{{ inv.issue_date }}</span></p>
          {% if inv.service_date and inv.service_date != inv.issue_date %}
          <p class="text-xs nums">Leistungsdatum: <span class="font-semibold">{{ inv.service_date }}</span></p>
          {% endif %}
          <p class="text-xs nums">Fällig: <span class="font-semibold">{{ inv.due_date or '—' }}</span></p>
          {% if inv.order_no %}<p class="text-xs">Auftrag: <a href="/sales-orders/{{ inv.sales_order_id }}" class="text-blue-700 nums">{{ inv.order_no }}</a></p>{% endif %}
          <p class="text-xs">Format: <span class="font-mono">{{ inv.preferred_invoice_format }}</span></p>
        </div>
        {% if inv.notes %}
        <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">Notiz</p>
          <p class="text-xs whitespace-pre-line">{{ inv.notes }}</p>
        </div>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Positionen</h2></div></div>
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:30px">#</th>
            <th>Beschreibung</th>
            <th class="num">Menge</th>
            <th>Einh.</th>
            <th class="num">Einzelpr.</th>
            <th class="num">Rabatt</th>
            <th class="num">USt</th>
            <th class="num">Netto</th>
          </tr>
        </thead>
        <tbody>
          {% for ln in lines %}
          <tr>
            <td class="nums text-neutral-500">{{ 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">{{ "%.0f"|format(ln.qty) if ln.qty == ln.qty|int else "%.2f"|format(ln.qty) }}</td>
            <td class="text-xs">{{ ln.unit }}</td>
            <td class="num nums">{{ money(ln.unit_price) }}</td>
            <td class="num nums">{{ "%.0f"|format(ln.discount_pct) if ln.discount_pct else '—' }}{% if ln.discount_pct %} %{% endif %}</td>
            <td class="num text-xs nums">
              {% if ln.vat_kind == 'eu_b2b_reverse' %}<span class="badge badge-blue">RC</span>
              {% elif ln.vat_kind == 'export' %}<span class="badge badge-amber">Export</span>
              {% else %}{{ "%.0f"|format(ln.vat_rate) }} %{% endif %}
            </td>
            <td class="num nums font-semibold">{{ money(ln.line_total_net) }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr><td colspan="7" class="num text-xs text-neutral-500">Zwischensumme netto</td>
              <td class="num nums font-semibold">{{ money(inv.subtotal_net) }}</td></tr>
          {% if inv.vat_amount %}
          <tr><td colspan="7" class="num text-xs text-neutral-500">USt</td>
              <td class="num nums">{{ money(inv.vat_amount) }}</td></tr>
          {% endif %}
          <tr style="background: var(--card-bg-2);">
            <td colspan="7" class="num text-sm font-semibold">Rechnungsbetrag</td>
            <td class="num nums font-bold" style="font-size:1rem;">{{ money(inv.total_gross) }} {{ inv.currency }}</td>
          </tr>
          {% if inv.paid_amount %}
          <tr><td colspan="7" class="num text-xs text-emerald-700">bereits gezahlt</td>
              <td class="num nums text-emerald-700">−{{ money(inv.paid_amount) }}</td></tr>
          <tr><td colspan="7" class="num text-sm font-semibold text-amber-700">Offener Betrag</td>
              <td class="num nums font-bold text-amber-700">{{ money((inv.total_gross or 0) - (inv.paid_amount or 0)) }} {{ inv.currency }}</td></tr>
          {% endif %}
        </tfoot>
      </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(inv.status, 'neutral') }}">{{ STATUS_LABELS.get(inv.status, inv.status) }}</span></p>
        <form method="post" action="/invoices/{{ inv.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 == inv.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">{{ inv.created_at[:16] }}</span><br>
          {% if inv.sent_at %}Versendet: <span class="nums">{{ inv.sent_at[:16] }}</span><br>{% endif %}
          {% if inv.paid_at %}Bezahlt: <span class="nums">{{ inv.paid_at[:16] }}</span>{% endif %}
        </div>
      </div>
    </div>

    {% if inv.kind != 'storno' and inv.status != 'cancelled' %}
    <div class="card">
      <div class="card-header"><div><h2>Zahlung erfassen</h2></div></div>
      <form method="post" action="/invoices/{{ inv.id }}/payment" class="p-5 space-y-2 text-sm" id="pay-form">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Betrag</label>
          <input class="input mt-1 w-full nums" type="text" name="amount" id="pay-amount" placeholder="0,00" required style="text-align:right">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Skonto (zusätzlich, optional)</label>
          <input class="input mt-1 w-full nums" type="text" name="skonto_amount" id="pay-skonto" placeholder="0,00" style="text-align:right">
          <p class="text-[10px] mt-1" style="color: var(--card-text-muted);">
            Skonto + Zahlung zusammen müssen Brutto erreichen, damit als „Bezahlt" gilt.
            <button type="button" id="pay-skonto-2" class="hover:underline" style="color:#f2581b;">2 % vorschlagen</button>
            ·
            <button type="button" id="pay-skonto-3" class="hover:underline" style="color:#f2581b;">3 % vorschlagen</button>
          </p>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Datum</label>
          <input class="input mt-1 w-full nums" type="date" name="paid_at">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Methode</label>
          <select name="method" class="select mt-1 w-full">
            <option value="bank_transfer">Überweisung</option>
            <option value="cash">Bar</option>
            <option value="card">Karte</option>
            <option value="paypal">PayPal</option>
            <option value="sepa_dd">SEPA-Lastschrift</option>
            <option value="other">Sonstige</option>
          </select>
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verwendungszweck / Beleg</label>
          <input class="input mt-1 w-full" type="text" name="reference" placeholder="optional">
        </div>
        <button class="btn btn-primary w-full mt-2" type="submit">Zahlung buchen</button>
      </form>
      <script>
      (function () {
        const GROSS = {{ (inv.total_gross or 0)|float }};
        const PAID  = {{ (inv.paid_amount or 0)|float }};
        const open = Math.max(0, +(GROSS - PAID).toFixed(2));
        const fmt = v => v.toFixed(2).replace('.', ',');
        const am = document.getElementById('pay-amount');
        const sk = document.getElementById('pay-skonto');
        if (am && !am.value) am.value = fmt(open);
        function suggest(pct) {
          const skonto = +(GROSS * pct / 100).toFixed(2);
          sk.value = fmt(skonto);
          am.value = fmt(Math.max(0, +(open - skonto).toFixed(2)));
        }
        document.getElementById('pay-skonto-2')?.addEventListener('click', () => suggest(2));
        document.getElementById('pay-skonto-3')?.addEventListener('click', () => suggest(3));
      })();
      </script>
    </div>
    {% endif %}

    {% if payments %}
    <div class="card">
      <div class="card-header"><div><h2>Zahlungseingänge</h2></div></div>
      <div class="p-5 space-y-2 text-sm">
        {% for p in payments %}
        <div class="flex items-center justify-between text-xs">
          <div>
            <span class="nums">{{ p.paid_at }}</span>
            <span class="text-neutral-500"> · {{ p.method }}</span>
            {% if p.reference %}<span class="text-neutral-500"> · {{ p.reference }}</span>{% endif %}
          </div>
          <span class="text-right">
            <span class="font-semibold nums">{{ money(p.amount) }}</span>
            {% if p.skonto_amount and p.skonto_amount > 0 %}
            <br><span class="text-[10px] nums" style="color:#fbbf24;">+ {{ money(p.skonto_amount) }} Skonto</span>
            {% endif %}
          </span>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if inv.kind != 'storno' and inv.status != 'cancelled' %}
    <div class="card" style="background:rgba(239, 68, 68, 0.04); border-color:rgba(239, 68, 68, 0.20);">
      <div class="card-header" style="background:rgba(239, 68, 68, 0.06);"><div><h2>Storno</h2></div></div>
      <form method="post" action="/invoices/{{ inv.id }}/storno" class="p-5 space-y-2 text-sm"
            onsubmit="return confirm('Diese Rechnung stornieren? Es wird eine Storno-Rechnung erzeugt und das Original gesperrt.');">
        <input class="input w-full" type="text" name="reason" placeholder="Grund (optional)">
        <button class="btn btn-sm w-full" type="submit" style="background:rgba(239, 68, 68, 0.15); color:#dc2626;">Storno-Rechnung erzeugen</button>
      </form>
    </div>
    {% endif %}

    {% if dunning_history %}
    <div class="card">
      <div class="card-header"><div><h2>Mahnungs-Historie</h2></div></div>
      <div class="p-5 text-xs space-y-2">
        {% for d in dunning_history %}
        <div class="flex items-start gap-2 pb-2 border-b" style="border-color: var(--card-border-2);">
          <span class="badge badge-{% if d.level == 3 %}red{% elif d.level == 2 %}amber{% else %}blue{% endif %}">Stufe {{ d.level }}</span>
          <div class="flex-1">
            <p class="nums">{{ d.sent_at[:16] }}</p>
            {% if d.recipient %}<p class="text-neutral-500">an {{ d.recipient }}</p>{% endif %}
            {% if d.note %}<p class="text-neutral-600 mt-1">{{ d.note }}</p>{% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% set open_amt = (inv.total_gross or 0) - (inv.paid_amount or 0) %}
    {% set today_iso = '2026-04-29' %}
    {% if inv.kind != 'storno' and open_amt > 0 and inv.due_date and inv.due_date < today_iso %}
    <div class="card" style="background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.20);">
      <div class="card-header" style="background: rgba(245, 158, 11, 0.06);"><div><h2>Mahnen</h2></div></div>
      <div class="p-5 space-y-2 text-sm">
        {% set next_lvl = ((inv.dunning_level or 0) + 1) %}
        {% if next_lvl > 3 %}{% set next_lvl = 3 %}{% endif %}
        <a class="btn btn-sm btn-primary w-full" href="/invoices/{{ inv.id }}/dunning/{{ next_lvl }}">
          {% if next_lvl == 1 %}Zahlungserinnerung senden
          {% elif next_lvl == 2 %}1. Mahnung senden
          {% else %}Letzte Mahnung senden{% endif %}
        </a>
        <a class="btn btn-sm btn-secondary w-full" href="/invoices/{{ inv.id }}/dunning/{{ next_lvl }}/pdf" target="_blank">PDF nur (Briefpost)</a>
      </div>
    </div>
    {% endif %}

    {% if audit %}
    <div class="card">
      <div class="card-header"><div><h2>Audit-Log</h2><p class="sub">GoBD-Nachweis</p></div></div>
      <div class="p-5 text-xs space-y-2" style="max-height:280px; overflow:auto;">
        {% for a in audit %}
        <div class="flex items-start gap-2 pb-2 border-b" style="border-color: var(--card-border-2);">
          <span class="badge badge-{% if a.action=='issue' %}emerald{% elif a.action=='storno' %}red{% else %}neutral{% endif %}" style="font-size:9px">{{ a.action }}</span>
          <div class="flex-1 min-w-0">
            <p class="nums text-neutral-600">{{ a.created_at[:16] }}</p>
            {% if a.user_name %}<p class="text-neutral-500">{{ a.user_name }}</p>{% endif %}
            {% if a.note %}<p class="text-neutral-700 mt-1">{{ a.note }}</p>{% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</div>

<div class="entity-tasks" data-entity-type="invoice" data-entity-id="{{ inv.id }}"></div>
<div class="entity-comments" data-entity-type="invoice" data-entity-id="{{ inv.id }}"></div>

{% endblock %}