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

{% block title %}Rechnungen{% endblock %}
{% block heading %}Rechnungen{% endblock %}
{% block topbar_actions %}
  <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
    <a class="btn btn-primary" href="/sales-orders/new?then=invoice"
       title="Express-Rechnung: Auftrag + Rechnung in einem Schritt anlegen">
      + Neue Rechnung
    </a>
    <div class="tabs">
      <a class="tab {% if not status_filter %}is-active{% endif %}" href="/invoices">Alle</a>
      {% for code, label in STATUS_LABELS.items() %}
        <a class="tab {% if status_filter==code %}is-active{% endif %}" href="/invoices?status={{ code }}">{{ label }}</a>
      {% endfor %}
    </div>
  </div>
{% endblock %}

{% block content %}
<div id="recent-items" data-page-type="invoice"></div>

{# ---- Bulk-Action-Bar ---- #}
<div id="bulk-bar" style="display:none;
     background: var(--card-bg);
     border: 1.5px solid #1a1a1a;
     border-radius: 8px;
     padding: 10px 14px; margin-bottom: 8px;
     align-items: center; gap: 12px; font-size: 13px;
     box-shadow: var(--card-shadow);">
  <span><b id="bulk-count">0</b> markiert</span>
  <span style="color:rgb(115,115,115);">·</span>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="mark-paid">Als bezahlt buchen</button>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="mark-sent">Als versendet markieren</button>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="dunning-1">Mahnstufe 1 setzen</button>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="dunning-2">Mahnstufe 2 setzen</button>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="dunning-3">Mahnstufe 3 setzen</button>
  <button type="button" class="btn btn-sm btn-secondary" data-bulk="clear" style="margin-left:auto;">Auswahl aufheben</button>
</div>

{% if items %}
<div class="card">
  <table class="data-table">
    <thead>
      <tr>
        <th style="width:30px"><input type="checkbox" id="bulk-toggle-all" title="Alle auswählen"></th>
        <th>Rechnungs-Nr.</th>
        <th>Datum</th>
        <th>Auftrag</th>
        <th>Kunde</th>
        <th>Art</th>
        <th class="num">Fällig</th>
        <th class="num">Brutto</th>
        <th class="num">Bezahlt</th>
        <th class="num">Offen</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for inv in items %}
      {% set open_amt = (inv.total_gross or 0) - (inv.paid_amount or 0) %}
      <tr class="cursor-pointer" data-status="{{ inv.status }}" onclick="if(!event.target.closest('input,button,a,td.cb,td:nth-child(11)')) location='/invoices/{{ inv.id }}'">
        <td class="cb" onclick="event.stopPropagation()">
          {% if inv.kind != 'storno' %}
          <input type="checkbox" class="bulk-cb" data-id="{{ inv.id }}">
          {% endif %}
        </td>
        <td class="nums font-semibold">
          {{ inv.invoice_no }}
          {% if inv.kind == 'storno' %}<span class="badge badge-red ml-1" style="font-size:9px">STORNO</span>{% endif %}
        </td>
        <td class="text-xs nums text-neutral-600">{{ inv.issue_date }}</td>
        <td class="nums text-xs"><a href="/sales-orders/{{ inv.sales_order_id }}" class="text-blue-700 hover:underline" onclick="event.stopPropagation()">{{ inv.order_no or '—' }}</a></td>
        <td class="font-medium">{{ inv.customer_name_snapshot }}</td>
        <td class="text-xs">{{ KIND_LABELS.get(inv.kind, inv.kind) }}</td>
        <td class="num text-xs nums">{{ inv.due_date or '—' }}</td>
        <td class="num nums">{{ money(inv.total_gross) }} {{ inv.currency }}</td>
        <td class="num nums text-emerald-700">{{ money(inv.paid_amount) }}</td>
        <td class="num nums {% if open_amt > 0 %}font-semibold text-amber-700{% else %}text-neutral-400{% endif %}">{{ money(open_amt) }}</td>
        <td onclick="event.stopPropagation()">
          {% if inv.kind != 'storno' %}
          <span class="badge badge-{{ STATUS_COLOR.get(inv.status, 'neutral') }} status-edit"
                data-kind="invoice" data-id="{{ inv.id }}" data-current="{{ inv.status }}"
                title="Klicken zum Ändern" style="cursor: pointer;">{{ STATUS_LABELS.get(inv.status, inv.status) }} ▾</span>
          {% else %}
          <span class="badge badge-{{ STATUS_COLOR.get(inv.status, 'neutral') }}">{{ STATUS_LABELS.get(inv.status, inv.status) }}</span>
          {% endif %}
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/invoices/{{ inv.id }}">Öffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  {% from "_macros.html" import empty_state %}
  {{ empty_state(
    icon='🧾',
    title='Noch keine Rechnungen',
    description='Aus einem Auftrag mit Lieferschein wird die Rechnung — als ZUGFeRD-PDF mit eingebettetem XML, GoBD-konform festgeschrieben. Mahnwesen + Bank-Abgleich folgen automatisch.',
    workflow='📥 Anfrage → 💼 Angebot → 📋 Auftrag → 🏭 Werkstatt → 📦 Versand → 🧾 Rechnung',
    ctas=[
      {'label': 'Zur Auftragsliste',   'href': '/sales-orders',  'primary': True},
      {'label': 'Zu den Lieferscheinen','href': '/delivery-notes'},
      {'label': '📚 Handbuch (DE)',     'href': '/handbuch/de/pdf', 'external': True},
    ],
  ) }}
{% endif %}

<script>
(function () {
  const bar       = document.getElementById('bulk-bar');
  const countSpan = document.getElementById('bulk-count');
  const toggleAll = document.getElementById('bulk-toggle-all');
  if (!bar || !toggleAll) return;

  function selectedIds() {
    return [...document.querySelectorAll('.bulk-cb:checked')].map(cb => cb.getAttribute('data-id'));
  }
  function refresh() {
    const ids = selectedIds();
    countSpan.textContent = ids.length;
    bar.style.display = ids.length ? 'flex' : 'none';
  }
  refresh();

  document.addEventListener('change', e => {
    if (e.target.classList.contains('bulk-cb') || e.target.id === 'bulk-toggle-all') {
      if (e.target.id === 'bulk-toggle-all') {
        document.querySelectorAll('.bulk-cb').forEach(cb => { cb.checked = e.target.checked; });
      }
      refresh();
    }
  });

  bar.addEventListener('click', async e => {
    const btn = e.target.closest('[data-bulk]');
    if (!btn) return;
    const action = btn.getAttribute('data-bulk');
    const ids = selectedIds();

    if (action === 'clear') {
      document.querySelectorAll('.bulk-cb, #bulk-toggle-all').forEach(cb => cb.checked = false);
      refresh();
      return;
    }
    if (!ids.length) return;

    const confirmMsg = {
      'mark-paid':  `${ids.length} Rechnungen als vollständig bezahlt markieren?`,
      'mark-sent':  `${ids.length} Rechnungen auf Status „Versendet" setzen?`,
      'dunning-1':  `${ids.length} Rechnungen Mahnstufe 1 zuweisen?`,
      'dunning-2':  `${ids.length} Rechnungen Mahnstufe 2 zuweisen?`,
      'dunning-3':  `${ids.length} Rechnungen Mahnstufe 3 (Letzte) zuweisen?`,
    }[action];
    if (!confirm(confirmMsg)) return;

    let url, body;
    if (action === 'mark-paid') {
      url = '/api/invoices/bulk-mark-paid'; body = { ids };
    } else if (action === 'mark-sent') {
      url = '/api/invoices/bulk-status';    body = { ids, status: 'sent' };
    } else if (action.startsWith('dunning-')) {
      const lvl = action.split('-')[1];
      url = '/api/invoices/bulk-dunning/' + lvl; body = { ids };
    }
    try {
      const resp = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const data = await resp.json();
      if (data.ok) location.reload();
      else alert('Aktion fehlgeschlagen.');
    } catch (err) {
      alert('Netzwerkfehler: ' + err);
    }
  });
})();
</script>
{% endblock %}