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

{% block title %}Auswertungs-Builder{% endblock %}
{% block heading %}Auswertungs-Builder{% endblock %}

{% block content %}
{% set GROUPS = [
  ('month', 'Monat'),
  ('customer', 'Kunde'),
  ('rep', 'Vertriebler'),
  ('item_type', 'Artikel-Typ'),
] %}
{% set METRICS = [
  ('revenue', 'Umsatz (Netto)'),
  ('margin', 'Marge ~30 %'),
  ('count', 'Anzahl Rechnungen'),
] %}

<form method="get" action="/reports/builder" class="card mb-4">
  <div class="card-header"><div>
    <h2>Achsen + Kennzahl wählen</h2>
    <p class="sub">
      Pivot über Rechnungen — leere Y-Achse zeigt nur 1D-Aggregat. Klick auf eine Zelle drillt
      zu der entsprechenden Liste in der Hauptanwendung.
    </p>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-5 gap-x-4 gap-y-3 text-sm">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kennzahl</label>
      <select name="metric" class="select mt-1 w-full">
        {% for k, label in METRICS %}
        <option value="{{ k }}" {% if pivot.metric == k %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zeilen (Y-Achse)</label>
      <select name="group_x" class="select mt-1 w-full">
        {% for k, label in GROUPS %}
        <option value="{{ k }}" {% if pivot.group_x == k %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Spalten (X-Achse, optional)</label>
      <select name="group_y" class="select mt-1 w-full">
        <option value="">— keine —</option>
        {% for k, label in GROUPS %}
          {% if k != pivot.group_x %}
          <option value="{{ k }}" {% if pivot.group_y == k %}selected{% endif %}>{{ label }}</option>
          {% endif %}
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Von</label>
      <input class="input mt-1 w-full nums" type="date" name="date_from" value="{{ pivot.date_from }}">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bis</label>
      <input class="input mt-1 w-full nums" type="date" name="date_to" value="{{ pivot.date_to }}">
    </div>
  </div>
  <div class="px-5 py-4 border-t flex justify-between items-center" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="/reports">Zurück zum Reports-Dashboard</a>
    <div class="flex gap-2">
      <a class="btn btn-secondary" href="/reports/builder/export.csv?metric={{ pivot.metric }}&group_x={{ pivot.group_x }}&group_y={{ pivot.group_y or '' }}&date_from={{ pivot.date_from }}&date_to={{ pivot.date_to }}">CSV-Export</a>
      <button class="btn btn-primary" type="submit">Auswerten</button>
    </div>
  </div>
</form>

<div class="card">
  <div class="card-header"><div>
    <h2>{{ pivot.x_label }}{% if pivot.y_label %} × {{ pivot.y_label }}{% endif %} ·
      {% for k, label in METRICS %}{% if pivot.metric == k %}{{ label }}{% endif %}{% endfor %}
    </h2>
    <p class="sub">{{ pivot.date_from }} bis {{ pivot.date_to }} — Gesamtsumme:
      <span style="color: var(--brand-orange); font-weight: 700;">
        {% if pivot.metric == 'count' %}{{ pivot.grand_total|int }}{% else %}{{ money(pivot.grand_total) }}{% endif %}
      </span>
    </p>
  </div></div>

  {% if pivot.x_labels %}
  <div style="overflow-x: auto;">
    <table class="data-table" style="min-width: 600px;">
      <thead>
        <tr>
          <th>{{ pivot.x_label }}</th>
          {% if pivot.group_y %}
            {% for y in pivot.y_labels %}
            <th class="num">{{ y }}</th>
            {% endfor %}
            <th class="num" style="background:rgba(0,0,0,0.30);">Summe</th>
          {% else %}
            <th class="num">{% for k, label in METRICS %}{% if pivot.metric == k %}{{ label }}{% endif %}{% endfor %}</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for x in pivot.x_labels %}
        <tr>
          <td class="font-semibold">{{ x }}</td>
          {% if pivot.group_y %}
            {% for y in pivot.y_labels %}
            {% set v = pivot.matrix.get(x, {}).get(y, 0) %}
            <td class="num nums">
              {% if v %}
                {% if pivot.metric == 'count' %}{{ v|int }}{% else %}{{ '%.2f'|format(v) }}{% endif %}
              {% else %}
                <span style="color: var(--card-text-muted);">—</span>
              {% endif %}
            </td>
            {% endfor %}
            <td class="num nums font-bold" style="background:rgba(0,0,0,0.20);color: var(--brand-orange);">
              {% if pivot.metric == 'count' %}{{ pivot.totals_x[x]|int }}{% else %}{{ '%.2f'|format(pivot.totals_x[x]) }}{% endif %}
            </td>
          {% else %}
            <td class="num nums font-bold" style="color: var(--brand-orange);">
              {% if pivot.metric == 'count' %}{{ pivot.totals_x[x]|int }}{% else %}{{ '%.2f'|format(pivot.totals_x[x]) }}{% endif %}
            </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
      {% if pivot.group_y %}
      <tfoot>
        <tr style="background:rgba(0,0,0,0.30);">
          <td class="font-semibold">Summe</td>
          {% for y in pivot.y_labels %}
          <td class="num nums font-semibold">
            {% if pivot.metric == 'count' %}{{ pivot.totals_y[y]|int }}{% else %}{{ '%.2f'|format(pivot.totals_y[y]) }}{% endif %}
          </td>
          {% endfor %}
          <td class="num nums font-bold" style="color: var(--brand-orange);">
            {% if pivot.metric == 'count' %}{{ pivot.grand_total|int }}{% else %}{{ '%.2f'|format(pivot.grand_total) }}{% endif %}
          </td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
  {% else %}
  <div class="p-12 text-center" style="color: var(--card-text-muted);">
    Keine Daten im gewählten Zeitraum.
  </div>
  {% endif %}
</div>
{% endblock %}