{% extends "portal_base.html" %}
{% set active = 'dashboard' %}
{% block title %}Übersicht{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Kunden-Portal · Übersicht</p>{% endblock %}
{% block heading %}Willkommen, {{ customer.contact_name or customer.name }}{% endblock %}

{% block content %}
{% if request.query_params.get('sent') %}
<div class="card mb-4" style="border-left:4px solid #10b981;background:rgba(16,185,129,0.06);">
  <div class="px-5 py-3 text-sm" style="color:#059669;">
    ✓ Ihre Anfrage wurde erfolgreich übermittelt. Wir melden uns innerhalb von 1-2 Werktagen.
  </div>
</div>
{% endif %}

<p class="text-sm text-neutral-600 mb-4">
  Hier sehen Sie Ihre aktuellen Aufträge, offenen Rechnungen und können
  neue Anfragen stellen.
</p>

{# ---------- KPI-Reihe (gleiche Optik wie Admin-Dashboard) ---------- #}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
  <div class="card">
    <div class="px-5 py-4">
      <div class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Offene Aufträge</div>
      <div class="text-3xl font-bold mt-1 nums">{{ open_orders }}</div>
    </div>
  </div>
  <div class="card">
    <div class="px-5 py-4">
      <div class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Offener Rechnungs-Betrag</div>
      <div class="text-3xl font-bold mt-1 nums">
        {{ "{:,.2f}".format(open_invoices_amt or 0).replace(",","X").replace(".",",").replace("X",".") }} €
      </div>
    </div>
  </div>
  <div class="card">
    <div class="px-5 py-4">
      <div class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Aktive Angebote</div>
      <div class="text-3xl font-bold mt-1 nums">{{ quotes|selectattr('status', 'in', ['draft','sent'])|list|length }}</div>
    </div>
  </div>
</div>

{# ---------- Aktuelle Aufträge ---------- #}
<div class="card mb-4">
  <div class="card-header">
    <div>
      <h2>Aktuelle Aufträge</h2>
      <p class="sub">{{ orders|length }} Auftrag{% if orders|length != 1 %}{% endif %} · neueste zuerst</p>
    </div>
    <a href="/portal/{{ token }}/orders" class="btn btn-sm btn-secondary">Alle anzeigen →</a>
  </div>
  {% if orders %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Auftrag</th>
        <th>Datum</th>
        <th>Status</th>
        <th>Liefertermin</th>
        <th class="num">Betrag</th>
      </tr>
    </thead>
    <tbody>
      {% for o in orders[:5] %}
      <tr class="cursor-pointer" onclick="location='/portal/{{ token }}/orders/{{ o.id }}'">
        <td>
          <strong>{{ o.order_no }}</strong>
          {% if o.customer_reference %}<div class="text-[11px] text-neutral-500">Ihre Nr: {{ o.customer_reference }}</div>{% endif %}
        </td>
        <td class="nums text-xs">{{ o.order_date }}</td>
        <td>
          {% set sc = 'amber' %}
          {% if o.status in ['delivered','completed'] %}{% set sc = 'emerald' %}{% endif %}
          {% if o.status == 'cancelled' %}{% set sc = 'red' %}{% endif %}
          {% if o.status in ['in_production','released'] %}{% set sc = 'blue' %}{% endif %}
          <span class="badge badge-{{ sc }}">{{ o.status }}</span>
        </td>
        <td class="nums text-xs">{{ o.due_date or '—' }}</td>
        <td class="num nums font-semibold">
          {{ "{:,.2f}".format(o.total_gross or 0).replace(",","X").replace(".",",").replace("X",".") }} {{ o.currency or 'EUR' }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="px-5 py-10 text-center text-sm text-neutral-500">
    Noch keine Aufträge bei uns.
  </div>
  {% endif %}
</div>

{# ---------- Rechnungen ---------- #}
<div class="card mb-4">
  <div class="card-header">
    <div>
      <h2>Rechnungen</h2>
      <p class="sub">{{ invoices|length }} Rechnung{% if invoices|length != 1 %}en{% endif %}</p>
    </div>
    <a href="/portal/{{ token }}/invoices" class="btn btn-sm btn-secondary">Alle anzeigen →</a>
  </div>
  {% if invoices %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Rechnung</th>
        <th>Datum</th>
        <th>Fällig</th>
        <th>Status</th>
        <th class="num">Brutto</th>
        <th class="num">Offen</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for i in invoices[:5] %}
      <tr>
        <td><strong>{{ i.invoice_no }}</strong></td>
        <td class="nums text-xs">{{ i.issue_date }}</td>
        <td class="nums text-xs">{{ i.due_date or '—' }}</td>
        <td>
          {% set sc = 'blue' %}
          {% if i.status == 'paid' %}{% set sc = 'emerald' %}{% endif %}
          {% if i.status == 'cancelled' %}{% set sc = 'neutral' %}{% endif %}
          {% if i.status == 'sent' %}{% set sc = 'amber' %}{% endif %}
          <span class="badge badge-{{ sc }}">{{ i.status }}</span>
        </td>
        <td class="num nums">
          {{ "{:,.2f}".format(i.total_gross or 0).replace(",","X").replace(".",",").replace("X",".") }}
        </td>
        <td class="num nums">
          {% set open_amt = (i.total_gross or 0) - (i.paid_amount or 0) %}
          {% if i.status != 'paid' and open_amt > 0 %}
            <strong>{{ "{:,.2f}".format(open_amt).replace(",","X").replace(".",",").replace("X",".") }}</strong>
          {% else %}—{% endif %}
        </td>
        <td>
          <a href="/portal/{{ token }}/invoices/{{ i.id }}/pdf" target="_blank"
             class="btn btn-sm btn-secondary">PDF</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="px-5 py-10 text-center text-sm text-neutral-500">
    Keine Rechnungen vorhanden.
  </div>
  {% endif %}
</div>

<div class="text-center mt-6">
  <a href="/portal/{{ token }}/inquiry/new" class="btn btn-primary">+ Neue Anfrage stellen</a>
</div>
{% endblock %}