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

{% block title %}{{ customer.name }}{% endblock %}
{% block body_data %}data-page-type="customer" data-page-id="{{ customer.id }}" data-page-label="{{ customer.name }}" data-page-sub="{{ customer.city or '' }} {{ customer.country_iso or '' }}"{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/customers" class="hover:underline">Kunden</a> / {{ customer.company_code or customer.name }}</p>{% endblock %}
{% block heading %}{{ customer.name }}{% endblock %}

{% block topbar_actions %}
  {% if not customer.is_business %}<span class="badge badge-neutral">B2C</span>
  {% elif is_eu_country(customer.country_iso) and customer.country_iso != 'DE' %}<span class="badge badge-blue">EU</span>
  {% elif customer.country_iso and not is_eu_country(customer.country_iso) %}<span class="badge badge-amber">Drittland</span>{% endif %}
  <a class="btn btn-sm btn-secondary" href="/customers/{{ customer.id }}/edit">Stammdaten bearbeiten</a>
  <a class="btn btn-sm btn-secondary" href="/inquiries/new?customer_id={{ customer.id }}">+ Anfrage</a>
  <a class="btn btn-sm btn-secondary" href="/quotes/new?customer_id={{ customer.id }}">+ Angebot</a>
  <a class="btn btn-sm btn-primary"   href="/sales-orders/new?customer_id={{ customer.id }}">+ Auftrag</a>
{% endblock %}

{% block content %}

{# v1.12.0: Inline-Sparkline Umsatz 12 Monate #}
<div style="margin-bottom: 14px;">
  {{ sparkline_widget("/api/sparkline/customer/" ~ customer.id, "Umsatz letzte 12 Monate", "revenue", "€") }}
</div>

{# ---------- KPI tiles ---------- #}
<section class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
  <div class="stat-tile accent" style="--c:#E85D2F;">
    <p class="lbl">Laufende Aufträge</p>
    <p class="val">{{ kpis.n_sales_orders_active }}</p>
    <p class="sub">von {{ kpis.n_sales_orders }} gesamt</p>
  </div>
  <div class="stat-tile accent" style="--c:#2563EB;">
    <p class="lbl">Offene Angebote</p>
    <p class="val">{{ kpis.n_quotes_open }}</p>
    <p class="sub">{{ kpis.n_quotes }} insgesamt</p>
  </div>
  <div class="stat-tile accent" style="--c:#f59e0b;">
    <p class="lbl">Offene Anfragen</p>
    <p class="val">{{ kpis.n_inquiries }}</p>
    <p class="sub">erfasst</p>
  </div>
  <div class="stat-tile accent" style="--c:{% if kpis.overdue_value %}#ef4444{% else %}#2563EB{% endif %};">
    <p class="lbl">Forderungen</p>
    <p class="val">{{ money(kpis.outstanding_value) }}</p>
    <p class="sub">{% if kpis.overdue_value %}<span class="text-red-600">{{ money(kpis.overdue_value) }} überfällig</span>{% else %}{{ kpis.outstanding_count }} offen{% endif %}</p>
  </div>
  <div class="stat-tile accent" style="--c:#10b981;">
    <p class="lbl">Umsatz YTD</p>
    <p class="val">{{ money(kpis.revenue_ytd) }}</p>
    <p class="sub">{{ money(kpis.revenue_total) }} gesamt</p>
  </div>
  <div class="stat-tile">
    <p class="lbl">Zahlungs­verhalten</p>
    {% if kpis.avg_payment_delay_days is not none %}
      {% set d = kpis.avg_payment_delay_days %}
      <p class="val nums">{% if d > 0 %}+{% endif %}{{ "%.0f"|format(d) }}T</p>
      <p class="sub">{% if d <= 0 %}pünktlich{% elif d < 7 %}leicht verzögert{% else %}im Mahnbereich{% endif %}</p>
    {% else %}
      <p class="val text-neutral-400">—</p>
      <p class="sub">noch keine Daten</p>
    {% endif %}
  </div>
</section>

<div class="grid grid-cols-3 gap-4">

  {# ---------- LEFT: Belege (2/3) ---------- #}
  <div class="col-span-2 space-y-4">

    {# Laufende Aufträge — der user wollte das prominent #}
    <div class="card">
      <div class="card-header"><div>
        <h2>Laufende Aufträge</h2>
        <p class="sub">Aktiv in Bearbeitung — nicht abgeschlossen</p>
      </div></div>
      {% if active_orders %}
      <table class="data-table">
        <thead>
          <tr>
            <th>Auftrags-Nr.</th>
            <th>Datum</th>
            <th>Liefertermin</th>
            <th>Priorität</th>
            <th>Aktuelle Stufe</th>
            <th class="num">Wert (brutto)</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        {% for o in active_orders %}
        {% set prog = order_progress.get(o.id) or {} %}
          <tr class="cursor-pointer" data-order-id="{{ o.id }}" onclick="location='/sales-orders/{{ o.id }}'" title="Rechtsklick: Vorschau mit Zeichnung + Pipeline">
            <td class="nums font-semibold">{{ o.order_no }}</td>
            <td class="text-xs nums text-neutral-600">{{ o.order_date }}</td>
            <td class="text-xs nums {% if o.due_date and o.due_date < '2026-04-29' %}text-red-600 font-semibold{% endif %}">{{ o.due_date or '—' }}</td>
            <td>
              {% if o.priority and o.priority != 'normal' %}
                <span class="badge badge-{{ PRIORITY_COLOR.get(o.priority, 'neutral') }}">{{ PRIORITY_LABELS.get(o.priority, o.priority) }}</span>
              {% else %}<span class="text-xs text-neutral-400">—</span>{% endif %}
            </td>
            <td>
              {% if prog.current_step %}
                <span class="inline-flex items-center gap-1.5 text-xs">
                  <span class="dot" style="background:{{ prog.current_step.step_color }}"></span>
                  <span>{{ prog.current_step.step_name }}</span>
                  {% if prog.total %}<span class="text-neutral-400 nums">{{ prog.completed }}/{{ prog.total }}</span>{% endif %}
                </span>
              {% else %}
                <span class="text-xs text-neutral-400">noch nicht gestartet</span>
              {% endif %}
            </td>
            <td class="num nums font-semibold">{{ money(o.total_gross) }} {{ o.currency }}</td>
            <td><span class="badge badge-{{ SO_STATUS_COLOR.get(o.status, 'neutral') }}">{{ SO_STATUS_LABELS.get(o.status, o.status) }}</span></td>
            <td class="text-right" onclick="event.stopPropagation()">
              <a class="btn btn-sm btn-secondary" href="/sales-orders/{{ o.id }}/edit" title="Bearbeiten">✎</a>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="p-6 text-center text-sm text-neutral-500">
        Aktuell laufen keine Aufträge für diesen Kunden.
        <a class="btn btn-sm btn-primary mt-3 inline-block" href="/sales-orders/new?customer_id={{ customer.id }}">+ Neuen Auftrag anlegen</a>
      </div>
      {% endif %}
    </div>

    {# Anfragen #}
    {% if inquiries %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Anfragen <span class="text-neutral-400 font-normal text-sm">· {{ inquiries|length }}</span></h2>
      </div></div>
      <table class="data-table">
        <thead><tr><th>Nr.</th><th>Eingang</th><th>Betreff</th><th>Status</th><th>Angebot</th></tr></thead>
        <tbody>
        {% for i in inquiries %}
          <tr class="cursor-pointer" onclick="location='/inquiries/{{ i.id }}'">
            <td class="nums">{{ i.inquiry_no }}</td>
            <td class="text-xs nums">{{ i.created_at[:10] }}</td>
            <td class="text-sm">{{ i.subject }}</td>
            <td><span class="badge badge-{{ INQ_STATUS_COLOR.get(i.status, 'neutral') }}">{{ INQ_STATUS_LABELS.get(i.status, i.status) }}</span></td>
            <td class="text-xs nums text-neutral-500">{% if i.created_quote_id %}#{{ i.created_quote_id }}{% else %}—{% endif %}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {# Angebote #}
    {% if quotes %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Angebote <span class="text-neutral-400 font-normal text-sm">· {{ quotes|length }}</span></h2>
      </div></div>
      <table class="data-table">
        <thead><tr><th>Angebot</th><th>Datum</th><th class="num">Gültig bis</th><th class="num">Brutto</th><th>Status</th><th>Auftrag</th></tr></thead>
        <tbody>
        {% for q in quotes %}
          <tr class="cursor-pointer" onclick="location='/quotes/{{ q.id }}'">
            <td class="nums font-semibold">{{ q.quote_no }}</td>
            <td class="text-xs nums">{{ q.quote_date }}</td>
            <td class="num text-xs nums">{{ q.valid_until or '—' }}</td>
            <td class="num nums font-semibold">{{ money(q.total_gross) }}</td>
            <td><span class="badge badge-{{ QUOTE_STATUS_COLOR.get(q.status, 'neutral') }}">{{ QUOTE_STATUS_LABELS.get(q.status, q.status) }}</span></td>
            <td class="text-xs nums text-emerald-700">{% if q.converted_sales_order_id %}→ #{{ q.converted_sales_order_id }}{% else %}—{% endif %}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {# Abgeschlossene Aufträge #}
    {% if closed_orders %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Abgeschlossene Aufträge <span class="text-neutral-400 font-normal text-sm">· {{ closed_orders|length }}</span></h2>
        <p class="sub">Bezahlt oder storniert</p>
      </div></div>
      <table class="data-table">
        <thead><tr><th>Auftrags-Nr.</th><th>Datum</th><th class="num">Brutto</th><th>Status</th></tr></thead>
        <tbody>
        {% for o in closed_orders %}
          <tr class="cursor-pointer" data-order-id="{{ o.id }}" onclick="location='/sales-orders/{{ o.id }}'" title="Rechtsklick: Vorschau mit Zeichnung + Pipeline">
            <td class="nums">{{ o.order_no }}</td>
            <td class="text-xs nums">{{ o.order_date }}</td>
            <td class="num nums">{{ money(o.total_gross) }}</td>
            <td><span class="badge badge-{{ SO_STATUS_COLOR.get(o.status, 'neutral') }}">{{ SO_STATUS_LABELS.get(o.status, o.status) }}</span></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {# Offene Posten — pro Kunde #}
    {% if open_items and open_items.total_open > 0 %}
    <div class="card" style="border-left:4px solid {% if open_items.buckets.over > 0 %}#ef4444{% elif open_items.buckets.b90 > 0 %}#f59e0b{% else %}#356692{% endif %};">
      <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
        <div>
          <h2>Offene Posten</h2>
          <p class="sub">{{ open_items.rows|length }} offene Rechnung(en) · gesamt-Forderung
            <span style="color:var(--brand-orange);font-weight:700;">
              {{ '%.2f'|format(open_items.total_open) }} €
            </span>
          </p>
        </div>
        <div class="flex gap-2 text-xs">
          {% set b = open_items.buckets %}
          <span class="badge badge-emerald" title="laufend / nicht überfällig">≤ 0 T: {{ '%.2f'|format(b.current) }}</span>
          {% if b.b30 > 0 %}<span class="badge badge-amber">1–30 T: {{ '%.2f'|format(b.b30) }}</span>{% endif %}
          {% if b.b60 > 0 %}<span class="badge badge-amber">31–60 T: {{ '%.2f'|format(b.b60) }}</span>{% endif %}
          {% if b.b90 > 0 %}<span class="badge badge-red">61–90 T: {{ '%.2f'|format(b.b90) }}</span>{% endif %}
          {% if b.over > 0 %}<span class="badge badge-red">&gt; 90 T: {{ '%.2f'|format(b.over) }}</span>{% endif %}
        </div>
      </div>
      <table class="data-table">
        <thead><tr>
          <th>Rechnungs-Nr.</th>
          <th>Auftrag</th>
          <th class="num">Fällig</th>
          <th class="num">Tage über</th>
          <th class="num">Offen</th>
          <th>Mahnstufe</th>
        </tr></thead>
        <tbody>
        {% for op in open_items.rows %}
          <tr class="cursor-pointer" onclick="location='/invoices/{{ op.id }}'">
            <td class="nums font-medium">{{ op.invoice_no }}</td>
            <td class="text-xs nums">{{ op.order_no or '—' }}</td>
            <td class="num text-xs nums">{{ (op.due_date or '')[:10] or '—' }}</td>
            <td class="num nums">
              {% if op.days_over > 0 %}
                <span style="color:{% if op.days_over > 90 %}#ef4444{% elif op.days_over > 30 %}#f59e0b{% else %}#fbbf24{% endif %};font-weight:600;">+{{ op.days_over }}</span>
              {% elif op.days_over < 0 %}
                <span style="color:var(--card-text-muted);">{{ op.days_over }}</span>
              {% else %}
                <span style="color:var(--card-text-muted);">heute</span>
              {% endif %}
            </td>
            <td class="num nums font-semibold" style="color:var(--brand-orange);">{{ '%.2f'|format(op.open_amount) }} {{ op.currency or '€' }}</td>
            <td>
              {% if op.dunning_level == 1 %}<span class="badge badge-amber">Mahnung 1</span>
              {% elif op.dunning_level == 2 %}<span class="badge badge-red">Mahnung 2</span>
              {% elif op.dunning_level == 3 %}<span class="badge badge-red">Letzte Mahnung</span>
              {% else %}<span class="text-xs" style="color:var(--card-text-muted);">—</span>{% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

    {# v1.12.1: Kundenteile / Kunden-Lager #}
    <div class="card">
      <div class="card-header">
        <div>
          <h2>Bauteile &amp; Kunden-Lager
            <span class="text-neutral-400 font-normal text-sm">· {{ customer_parts|length }}</span>
          </h2>
          <p class="sub">Endprodukte die du f&uuml;r diesen Kunden fertigst &middot; Konsignations-/Kundenfertigung-Bestand</p>
        </div>
        <div>
          <a class="btn btn-sm btn-primary" href="/items/new?item_type=customer_part&amp;customer_id={{ customer.id }}">+ Neues Bauteil</a>
        </div>
      </div>

      {% if customer_parts %}
      <div style="padding: 8px 18px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                  gap: 12px;">
        <div style="background: var(--card-bg-2); padding: 10px 12px; border-radius: 8px;">
          <div class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Teile</div>
          <div class="nums" style="font-size: 20px; font-weight: 700;">{{ stock_summary.part_count }}</div>
        </div>
        <div style="background: var(--card-bg-2); padding: 10px 12px; border-radius: 8px;">
          <div class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Gesamt-Bestand</div>
          <div class="nums" style="font-size: 20px; font-weight: 700;">{{ stock_summary.total_qty }}</div>
        </div>
        <div style="background: var(--card-bg-2); padding: 10px 12px; border-radius: 8px;">
          <div class="text-[10px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Unter Mindest</div>
          <div class="nums" style="font-size: 20px; font-weight: 700;
                      color: {% if stock_summary.below_min_count > 0 %}#f87171{% else %}var(--card-text){% endif %};">
            {{ stock_summary.below_min_count }}
          </div>
        </div>
      </div>

      <table class="data-table">
        <thead>
          <tr>
            <th>SKU</th>
            <th>Bezeichnung</th>
            <th>Kd.-Teile-Nr.</th>
            <th class="num" title="Aktueller Lagerbestand">Lager</th>
            <th class="num" title="Bestellt aber noch nicht geliefert">Reserviert</th>
            <th class="num" title="In offenen Fertigungs-Aufträgen">In Prod.</th>
            <th class="num" title="Lager - Reserviert + In Produktion">Verfügbar</th>
            <th class="num">Min</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        {% for p in customer_parts %}
          {% set reserved = p.qty_reserved|int or 0 %}
          {% set in_prod  = p.qty_in_production|int or 0 %}
          {% set stock    = p.quantity_total or 0 %}
          {% set avail    = stock - reserved + in_prod %}
          {% set deficit  = (reserved - stock - in_prod) if (reserved - stock - in_prod) > 0 else 0 %}
          {% set below_min = p.quantity_min and (stock - reserved) < p.quantity_min %}
          {% set alert    = deficit > 0 or below_min %}
          <tr class="cursor-pointer" onclick="location='/items/{{ p.id }}'"
              style="{% if deficit > 0 %}background: rgba(248,113,113,0.06);{% endif %}">
            <td class="nums font-semibold">{{ p.ident }}</td>
            <td>{{ p.description or '—' }}</td>
            <td class="text-xs nums" style="color: var(--card-text-muted);">{{ p.customer_part_no or '—' }}</td>
            <td class="num nums">{{ stock }}</td>
            <td class="num nums text-xs" style="color: {% if reserved > 0 %}var(--brand-orange){% else %}var(--card-text-muted){% endif %};">
              {% if reserved > 0 %}{{ reserved }}{% else %}—{% endif %}
            </td>
            <td class="num nums text-xs" style="color: {% if in_prod > 0 %}var(--brand-blue-light){% else %}var(--card-text-muted){% endif %};">
              {% if in_prod > 0 %}{{ in_prod }}{% else %}—{% endif %}
            </td>
            <td class="num nums {% if avail < 0 or below_min %}font-semibold{% endif %}"
                style="{% if deficit > 0 %}color: #f87171;{% elif below_min %}color: #fbbf24;{% endif %}">
              {{ avail }}
              {% if deficit > 0 %}
                <div class="text-[10px]" style="color: #f87171; font-weight: 600;">
                  fehlen {{ deficit }}
                </div>
              {% endif %}
            </td>
            <td class="num nums text-xs" style="color: var(--card-text-muted);">{{ p.quantity_min or '—' }}</td>
            <td class="text-right" onclick="event.stopPropagation()" style="white-space: nowrap;">
              {% if alert %}
              <button class="btn btn-sm btn-primary"
                      onclick="createProdJob({{ p.id }}, '{{ p.ident }}', {{ deficit if deficit > 0 else (p.quantity_min - stock + reserved) }})"
                      title="Fertigungsauftrag für fehlende Stück anlegen">
                + Fertigungsauftrag
              </button>
              {% else %}
              <button class="btn btn-sm btn-secondary"
                      onclick="createProdJob({{ p.id }}, '{{ p.ident }}', 10)"
                      title="Auf Vorrat fertigen">
                + Vorrat
              </button>
              {% endif %}
              <button class="btn btn-sm btn-secondary"
                      onclick="bookProduced({{ p.id }}, '{{ p.ident }}')"
                      title="Fertige Stück sofort einbuchen">
                ✓ Buchen
              </button>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>

      <script>
      function bookProduced(itemId, ident) {
        const qty = prompt('Wieviele Stück „' + ident + '" sind eben fertig geworden?', '10');
        if (!qty) return;
        const n = parseInt(qty, 10);
        if (!n || n < 1) { alert('Bitte eine positive Zahl eingeben'); return; }
        fetch('/api/items/' + itemId + '/movement', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ qty_delta: n, movement_type: 'produced', note: 'Manuelle Erfassung' }),
        })
        .then(r => r.json())
        .then(d => {
          if (d.ok) { location.reload(); }
          else { alert('Fehler: ' + (d.error || 'unbekannt')); }
        });
      }
      function createProdJob(itemId, ident, suggested) {
        const qty = prompt(
          'Neuer Fertigungsauftrag für „' + ident + '"\n' +
          'Wieviele Stück fertigen?',
          String(Math.max(1, suggested))
        );
        if (!qty) return;
        const n = parseInt(qty, 10);
        if (!n || n < 1) { alert('Bitte eine positive Zahl eingeben'); return; }
        fetch('/api/items/' + itemId + '/create-production-job', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ qty: n, note: 'Manuell angelegt aus Kunden-Detail' }),
        })
        .then(r => r.json())
        .then(d => {
          if (d.ok) {
            if (confirm('Fertigungsauftrag ' + d.ident + ' angelegt (' + d.qty + ' Stk).\nJetzt zur Werkstatt-Planung?')) {
              location = '/production';
            } else {
              location.reload();
            }
          } else {
            alert('Fehler: ' + (d.error || 'unbekannt'));
          }
        });
      }
      </script>
      {% else %}
      <div style="padding: 28px 18px; text-align: center;">
        <p style="color: var(--card-text-muted); margin-bottom: 12px;">
          Noch keine Bauteile f&uuml;r diesen Kunden angelegt.
        </p>
        <p class="text-xs" style="color: var(--card-text-muted); margin-bottom: 14px;">
          Lege ein Bauteil als <b>Kundenteil</b> an &mdash; dann erscheint hier sein Lagerbestand.
        </p>
        <a class="btn btn-sm btn-primary"
           href="/items/new?item_type=customer_part&amp;customer_id={{ customer.id }}">
          + Erstes Bauteil anlegen
        </a>
      </div>
      {% endif %}
    </div>

    {# Rechnungen #}
    {% if invoices %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Rechnungen <span class="text-neutral-400 font-normal text-sm">· {{ invoices|length }}</span></h2>
      </div></div>
      <table class="data-table">
        <thead><tr><th>Rechnungs-Nr.</th><th>Datum</th><th class="num">Fällig</th><th class="num">Brutto</th><th class="num">Offen</th><th>Status</th></tr></thead>
        <tbody>
        {% for inv in invoices %}
        {% set open_amt = (inv.total_gross or 0) - (inv.paid_amount or 0) %}
        {% set overdue = inv.due_date and inv.due_date < '2026-04-29' and open_amt > 0 %}
          <tr class="cursor-pointer" onclick="location='/invoices/{{ inv.id }}'">
            <td class="nums">
              {{ 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">{{ inv.issue_date }}</td>
            <td class="num text-xs nums {% if overdue %}text-red-600 font-semibold{% endif %}">{{ inv.due_date or '—' }}</td>
            <td class="num nums">{{ money(inv.total_gross) }}</td>
            <td class="num nums {% if open_amt > 0 %}font-semibold {% if overdue %}text-red-600{% else %}text-amber-700{% endif %}{% else %}text-neutral-400{% endif %}">{{ money(open_amt) }}</td>
            <td><span class="badge badge-{{ INV_STATUS_COLOR.get(inv.status, 'neutral') }}">{{ INV_STATUS_LABELS.get(inv.status, inv.status) }}</span></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

  </div>

  {# ---------- RIGHT: Stammdaten (1/3) ---------- #}
  <div class="space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Stammdaten</h2></div></div>
      <div class="p-5 text-sm space-y-3">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Kunden-Code</p>
          <p class="nums">{{ customer.company_code or '—' }}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Adresse</p>
          <p class="font-medium">{{ customer.name }}</p>
          {% if customer.address %}<p class="text-xs">{{ customer.address }}</p>{% endif %}
          {% if customer.address_line2 %}<p class="text-xs">{{ customer.address_line2 }}</p>{% endif %}
          <p class="text-xs">{{ customer.postcode }} {{ customer.city }}</p>
          <p class="text-xs nums">{{ country_name_de(customer.country_iso) or customer.country }}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Steuer</p>
          <p class="text-xs nums">USt-IdNr: <span class="font-mono">{{ customer.vat_id or '—' }}</span></p>
          {% if customer.tax_id %}<p class="text-xs nums">Steuer-Nr: <span class="font-mono">{{ customer.tax_id }}</span></p>{% endif %}
          <p class="text-xs">{% if customer.is_business %}B2B (Geschäftskunde){% else %}B2C (Privatkunde){% endif %}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Rechnungsstellung</p>
          <p class="text-xs">Format: <span class="font-mono">{{ customer.preferred_invoice_format }}</span></p>
          <p class="text-xs nums">Zahlungsziel: {{ customer.payment_terms_days }} Tage</p>
          {% if customer.leitweg_id %}<p class="text-xs nums">Leitweg-ID: <span class="font-mono">{{ customer.leitweg_id }}</span></p>{% endif %}
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Hauptkontakt</p>
          {% if customer.contact_name %}<p class="text-xs">{{ customer.contact_name }}</p>{% endif %}
          {% if customer.email %}<p class="text-xs"><a href="mailto:{{ customer.email }}" class="text-blue-700">{{ customer.email }}</a></p>{% endif %}
          {% if customer.phone %}<p class="text-xs nums">{{ customer.phone }}</p>{% endif %}
          {% if customer.website %}<p class="text-xs"><a href="https://{{ customer.website }}" target="_blank" class="text-blue-700">{{ customer.website }}</a></p>{% endif %}
        </div>

        {% if contacts %}
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Weitere Ansprechpartner ({{ contacts|length }})</p>
          {% for ct in contacts %}
          <div class="text-xs mt-2 pt-2 {% if not loop.first %}border-t{% endif %}" style="border-color: var(--card-border-2);">
            <p class="font-medium">
              {{ ct.name }}
              {% if ct.is_primary %}<span class="badge badge-blue ml-1" style="font-size:9px;">Haupt</span>{% endif %}
            </p>
            {% if ct.role %}<p class="text-neutral-600">{{ ct.role }}</p>{% endif %}
            {% if ct.email %}<p><a href="mailto:{{ ct.email }}" class="text-blue-700">{{ ct.email }}</a></p>{% endif %}
            {% if ct.phone %}<p class="nums text-neutral-600">{{ ct.phone }}</p>{% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
        {% if customer.notes %}
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Interne Notiz</p>
          <p class="text-xs whitespace-pre-line">{{ customer.notes }}</p>
        </div>
        {% endif %}
      </div>
    </div>

    {# v1.9.0: Self-Service-Portal-Karte #}
    <div class="card">
      <div class="card-header">
        <div>
          <h2>🌐 Self-Service-Portal</h2>
          <p class="sub">Kunde sieht eigene Aufträge, Rechnungen — eigene Anfragen stellen</p>
        </div>
      </div>
      <div class="p-5 text-sm space-y-3">
        {% if customer.portal_enabled and customer.portal_token %}
          {% set portal_url = (request.url.scheme + '://' + request.url.netloc + '/portal/' + customer.portal_token) %}
          <div class="rounded-md bg-emerald-50 border border-emerald-200 p-3">
            <p class="text-[11px] uppercase tracking-wider font-semibold text-emerald-700 mb-1">
              ✓ Portal aktiv
            </p>
            <p class="text-xs">Link für den Kunden:</p>
            <input id="portal-url-{{ customer.id }}" readonly
                   value="{{ portal_url }}"
                   class="input w-full font-mono mt-1"
                   style="font-size: 11px; padding: 6px 8px;"
                   onclick="this.select()">
            <div class="flex gap-2 mt-2">
              <button onclick="navigator.clipboard.writeText(document.getElementById('portal-url-{{ customer.id }}').value); if(window.toast) window.toast('Link kopiert', 'success');"
                      class="btn btn-sm btn-secondary flex-1">📋 Kopieren</button>
              <a href="{{ portal_url }}" target="_blank" class="btn btn-sm btn-secondary">↗ Öffnen</a>
            </div>
            <details class="mt-2">
              <summary class="text-[11px] text-neutral-500 cursor-pointer hover:underline">
                Token erneuern / deaktivieren
              </summary>
              <div class="flex gap-2 mt-2">
                <form method="post" action="/customers/{{ customer.id }}/portal/generate" class="inline">
                  <button class="btn btn-sm btn-secondary"
                          type="submit"
                          onclick="return confirm('Neuen Token erzeugen? Alter Link wird ungültig.')">
                    🔄 Neuer Token
                  </button>
                </form>
                <form method="post" action="/customers/{{ customer.id }}/portal/revoke" class="inline">
                  <button class="btn btn-sm btn-secondary"
                          type="submit"
                          style="color:#dc2626;border-color:rgba(239,68,68,0.4);"
                          onclick="return confirm('Portal-Zugang deaktivieren? Link wird sofort ungültig.')">
                    Deaktivieren
                  </button>
                </form>
              </div>
            </details>
          </div>
        {% else %}
          <p class="text-xs text-neutral-600">
            Generieren Sie einen Portal-Link für den Kunden. Damit hat er Read-only-Zugriff
            auf eigene Aufträge, kann Rechnungen herunterladen und neue Anfragen stellen —
            ohne dass Sie Logins verwalten müssen.
          </p>
          <form method="post" action="/customers/{{ customer.id }}/portal/generate">
            <button class="btn btn-primary w-full" type="submit">+ Portal-Link erzeugen</button>
          </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

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

<div class="crm-interactions" data-customer-id="{{ customer.id }}"></div>

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

{% endblock %}