{% extends "base.html" %}
{% block title %}Auswertungen{{ " - " + app_name() }}{% endblock %}

{% block content %}
<style>
.status-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; min-width:80px; }
.status-bar-lg { display:flex; height:20px; border-radius:4px; overflow:hidden; margin-bottom:0.75rem; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; }
@media print {
    .sidebar, .top-bar, .no-print { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .page-content { padding: 0 !important; }
    .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .print-section { page-break-before: always; }
    a[href]:after { content: none !important; }
}
</style>

<div class="page-header no-print">
    <h1>📊 Auswertungen</h1>
    <button onclick="window.print()" role="button" class="btn-sm outline">🖨️ Drucken</button>
</div>

<!-- ═══ FILTER ═══ -->
<form method="get" action="/auswertungen" class="card no-print" style="padding:1rem; margin-bottom:1.5rem;">
    <div style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-end;">
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">📢 Kampagne-Status</label>
            <select name="k_status" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem; min-width:130px;">
                <option value="">Alle</option>
                {% for opt in kat_optionen("kampagne_status") %}
                <option value="{{ opt.wert }}" {% if f_k_status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">📅 Veranstaltung-Status</label>
            <select name="v_status" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem; min-width:130px;">
                <option value="">Alle</option>
                {% for opt in kat_optionen("veranstaltung_status") %}
                <option value="{{ opt.wert }}" {% if f_v_status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">Veranst. Kampagne</label>
            <select name="v_kampagne_id" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem; min-width:160px;">
                <option value="">Alle Kampagnen</option>
                {% for k in alle_kampagnen %}
                <option value="{{ k.id }}" {% if f_v_kampagne_id == k.id %}selected{% endif %}>{{ k.titel }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">Datum von</label>
            <input type="date" name="datum_von" value="{{ f_datum_von }}" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem;">
        </div>
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">Datum bis</label>
            <input type="date" name="datum_bis" value="{{ f_datum_bis }}" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem;">
        </div>
        {% if alle_benutzer %}
        <div>
            <label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:0.25rem;">🎯 Recherche von</label>
            <select name="r_benutzer" style="margin:0; padding:0.3rem 0.5rem; font-size:0.85rem; min-width:120px;">
                <option value="">Alle</option>
                {% for b in alle_benutzer %}
                <option value="{{ b }}" {% if f_r_benutzer == b %}selected{% endif %}>{{ b }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
        <button type="submit" class="btn-sm" style="align-self:flex-end;">Filtern</button>
        <a href="/auswertungen" class="btn-sm outline" style="align-self:flex-end;">Zurücksetzen</a>
    </div>
</form>

<!-- Schnell-Navigation -->
<div class="filter-bar no-print" style="margin-bottom:1.5rem;">
    <a href="#kampagnen" style="font-size:0.9rem; font-weight:500;">📢 Kampagnen</a>
    <span style="color:var(--kw-border);">|</span>
    <a href="#recherchen" style="font-size:0.9rem; font-weight:500;">🎯 Recherchen</a>
    <span style="color:var(--kw-border);">|</span>
    <a href="#veranstaltungen" style="font-size:0.9rem; font-weight:500;">📅 Veranstaltungen</a>
    <span style="color:var(--kw-border);">|</span>
    <a href="#spenden" style="font-size:0.9rem; font-weight:500;">💰 Spenden</a>
</div>

<!-- ═══════════════════════════════════════════════════════ -->
<!-- KAMPAGNEN -->
<!-- ═══════════════════════════════════════════════════════ -->
<div id="kampagnen">
    <div class="kpi-grid" style="margin-bottom:1rem;">
        <div class="kpi-card">
            <div class="kpi-value">{{ k_gesamt }}</div>
            <div class="kpi-label">Kampagnen</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value" style="color:#4CAF50;">{{ k_aktiv }}</div>
            <div class="kpi-label">Aktiv</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value">{{ k_kontakte }}</div>
            <div class="kpi-label">Kontakt-Einträge</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value">{{ '%.0f'|format(k_spenden) }}</div>
            <div class="kpi-label">Spenden EUR</div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>Kampagnen-Auswertung{% if kampagnen_rows %} ({{ kampagnen_rows|length }}){% endif %}</h3>
            <div class="btn-group no-print">
                <a href="/auswertungen/kampagnen/csv" class="btn-sm outline">⬇ CSV</a>
                <button onclick="window.print()" class="btn-sm outline">🖨️</button>
            </div>
        </div>
        {% if kampagnen_rows %}
        <div style="overflow-x:auto;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Kampagne</th>
                    <th>Status</th>
                    <th style="text-align:right;">Kontakte</th>
                    <th style="min-width:140px;">Statusverteilung</th>
                    <th style="text-align:right;" title="Reagiert + Erledigt / Gesamt">Erfolg</th>
                    <th style="text-align:center; font-size:0.8rem; color:#607D8B;">Neu</th>
                    <th style="text-align:center; font-size:0.8rem; color:#2196F3;">Kont.</th>
                    <th style="text-align:center; font-size:0.8rem; color:#4CAF50;">Reag.</th>
                    <th style="text-align:center; font-size:0.8rem; color:#e53e3e;">Abg.</th>
                    <th style="text-align:center; font-size:0.8rem; color:#9E9E9E;">Erl.</th>
                    <th style="text-align:right;">Spenden EUR</th>
                    <th style="text-align:right; font-size:0.8rem;">Vera.</th>
                    <th class="no-print"></th>
                </tr>
            </thead>
            <tbody>
                {% for row in kampagnen_rows %}
                {% set k = row.kampagne %}
                <tr>
                    <td style="font-weight:500; white-space:nowrap;">
                        <a href="/kampagnen/{{ k.id }}">{{ k.titel }}</a>
                        {% if k.projekt %}<div style="font-size:0.75rem; color:var(--kw-text-muted);">{{ k.projekt }}</div>{% endif %}
                    </td>
                    <td>
                        <span class="tag-chip" style="background:
                            {% if k.status == 'aktiv' %}#4CAF50
                            {% elif k.status == 'abgeschlossen' %}#9E9E9E
                            {% else %}#2196F3{% endif %}; color:white; font-size:0.75rem;">
                            {{ k.status_label }}
                        </span>
                    </td>
                    <td style="text-align:right; font-weight:600;">{{ row.anzahl_kontakte }}</td>
                    <td>
                        {% if row.anzahl_kontakte > 0 %}
                        <div class="status-bar" title="Neu:{{row.status_neu}} Kont.:{{row.status_kontaktiert}} Reag.:{{row.status_reagiert}} Abg.:{{row.status_abgelehnt}} Erl.:{{row.status_erledigt}}">
                            {% if row.pct_neu > 0 %}<div style="width:{{row.pct_neu}}%;background:#607D8B;"></div>{% endif %}
                            {% if row.pct_kontaktiert > 0 %}<div style="width:{{row.pct_kontaktiert}}%;background:#2196F3;"></div>{% endif %}
                            {% if row.pct_reagiert > 0 %}<div style="width:{{row.pct_reagiert}}%;background:#4CAF50;"></div>{% endif %}
                            {% if row.pct_abgelehnt > 0 %}<div style="width:{{row.pct_abgelehnt}}%;background:#e53e3e;"></div>{% endif %}
                            {% if row.pct_erledigt > 0 %}<div style="width:{{row.pct_erledigt}}%;background:#9E9E9E;"></div>{% endif %}
                        </div>
                        {% else %}–{% endif %}
                    </td>
                    <td style="text-align:right; font-weight:600; color:{% if row.erfolgsquote >= 50 %}#4CAF50{% elif row.erfolgsquote >= 20 %}#FF9800{% else %}#9E9E9E{% endif %};">
                        {{ row.erfolgsquote }}%
                    </td>
                    <td style="text-align:center; font-size:0.85rem; color:#607D8B;">{{ row.status_neu }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#2196F3;">{{ row.status_kontaktiert }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#4CAF50; font-weight:600;">{{ row.status_reagiert }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#e53e3e;">{{ row.status_abgelehnt }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#9E9E9E;">{{ row.status_erledigt }}</td>
                    <td style="text-align:right; font-size:0.85rem;">
                        {% if row.spenden_summe > 0 %}
                        <span style="font-weight:600; color:var(--kw-primary);">{{ '%.2f'|format(row.spenden_summe) }}</span>
                        {% else %}–{% endif %}
                    </td>
                    <td style="text-align:right; font-size:0.85rem;">
                        {% if row.anzahl_veranstaltungen > 0 %}{{ row.anzahl_veranstaltungen }}{% else %}–{% endif %}
                    </td>
                    <td class="no-print" style="white-space:nowrap;">
                        <a href="/auswertungen/kampagnen/{{ k.id }}" class="btn-sm outline" style="font-size:0.75rem; padding:0.15rem 0.5rem;">Detail →</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr style="font-weight:700; border-top:2px solid var(--kw-border);">
                    <td colspan="2">Gesamt</td>
                    <td style="text-align:right;">{{ kampagnen_rows | sum(attribute='anzahl_kontakte') }}</td>
                    <td></td>
                    <td style="text-align:right;">
                        {% set total_k = kampagnen_rows | sum(attribute='anzahl_kontakte') %}
                        {% set total_rg = kampagnen_rows | sum(attribute='status_reagiert') %}
                        {% set total_er = kampagnen_rows | sum(attribute='status_erledigt') %}
                        {% if total_k > 0 %}{{ ((total_rg + total_er) / total_k * 100)|round|int }}%{% else %}–{% endif %}
                    </td>
                    <td style="text-align:center;">{{ kampagnen_rows | sum(attribute='status_neu') }}</td>
                    <td style="text-align:center;">{{ kampagnen_rows | sum(attribute='status_kontaktiert') }}</td>
                    <td style="text-align:center; color:#4CAF50;">{{ kampagnen_rows | sum(attribute='status_reagiert') }}</td>
                    <td style="text-align:center; color:#e53e3e;">{{ kampagnen_rows | sum(attribute='status_abgelehnt') }}</td>
                    <td style="text-align:center;">{{ kampagnen_rows | sum(attribute='status_erledigt') }}</td>
                    <td style="text-align:right; color:var(--kw-primary);">{{ '%.2f'|format(kampagnen_rows | sum(attribute='spenden_summe')) }}</td>
                    <td style="text-align:right;">{{ kampagnen_rows | sum(attribute='anzahl_veranstaltungen') }}</td>
                    <td class="no-print"></td>
                </tr>
            </tfoot>
        </table>
        </div>
        {% else %}
        <div class="empty-state"><p>Keine Kampagnen für diesen Filter.</p></div>
        {% endif %}
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════ -->
<!-- RECHERCHEN -->
<!-- ═══════════════════════════════════════════════════════ -->
<div id="recherchen" style="margin-top:2rem;" class="print-section">
    <div class="card">
        <div class="card-header">
            <h3>Gespeicherte Recherchen{% if recherchen %} ({{ recherchen|length }}){% endif %}</h3>
            <div class="btn-group no-print">
                <a href="/auswertungen/recherchen/csv" class="btn-sm outline">⬇ CSV</a>
                <a href="/recherche/gespeichert" class="btn-sm outline">Alle anzeigen</a>
            </div>
        </div>
        {% if recherchen %}
        <table class="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th style="text-align:right;">Kontakte</th>
                    <th>Erstellt am</th>
                    <th>Von</th>
                    <th class="no-print"></th>
                </tr>
            </thead>
            <tbody>
                {% for r in recherchen %}
                <tr>
                    <td style="font-weight:500;">
                        <a href="/recherche/gespeichert/{{ r.id }}">{{ r.name }}</a>
                    </td>
                    <td style="text-align:right; font-weight:600;">{{ r.anzahl_kontakte }}</td>
                    <td style="font-size:0.85rem;">{{ r.erstellt_am.strftime('%d.%m.%Y') if r.erstellt_am else '–' }}</td>
                    <td style="font-size:0.85rem;">{{ r.erstellt_von or '–' }}</td>
                    <td class="no-print" style="white-space:nowrap;">
                        <a href="/recherche/gespeichert/{{ r.id }}" class="btn-sm outline" style="font-size:0.75rem; padding:0.15rem 0.5rem;">Laden →</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr style="font-weight:700; border-top:2px solid var(--kw-border);">
                    <td>Gesamt</td>
                    <td style="text-align:right;">{{ recherchen | sum(attribute='anzahl_kontakte') }}</td>
                    <td colspan="3"></td>
                </tr>
            </tfoot>
        </table>
        {% else %}
        <div class="empty-state"><p>Keine Recherchen für diesen Filter. <a href="/recherche">Zur Recherche</a></p></div>
        {% endif %}
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════ -->
<!-- VERANSTALTUNGEN -->
<!-- ═══════════════════════════════════════════════════════ -->
<div id="veranstaltungen" style="margin-top:2rem;" class="print-section">
    <div class="kpi-grid" style="margin-bottom:1rem;">
        <div class="kpi-card">
            <div class="kpi-value">{{ v_gesamt }}</div>
            <div class="kpi-label">Veranstaltungen</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value">{{ v_teilnehmer }}</div>
            <div class="kpi-label">Teilnahmen gesamt</div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>Veranstaltungen-Auswertung{% if v_rows %} ({{ v_rows|length }}){% endif %}</h3>
            <div class="btn-group no-print">
                <a href="/auswertungen/veranstaltungen/csv" class="btn-sm outline">⬇ CSV</a>
                <button onclick="window.print()" class="btn-sm outline">🖨️</button>
            </div>
        </div>
        {% if v_rows %}
        <div style="overflow-x:auto;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Veranstaltung</th>
                    <th>Datum</th>
                    <th>Status</th>
                    <th style="text-align:right;">Teiln.</th>
                    <th style="min-width:100px;">Teiln.-Status</th>
                    <th style="text-align:center; font-size:0.8rem; color:#2196F3;">Angem.</th>
                    <th style="text-align:center; font-size:0.8rem; color:#4CAF50;">Teilgen.</th>
                    <th style="text-align:center; font-size:0.8rem; color:#e53e3e;">Abges.</th>
                    <th style="text-align:right; font-size:0.8rem;">Auslastung</th>
                    <th style="text-align:center; font-size:0.8rem;">Ref.</th>
                    <th>Kampagne</th>
                    <th class="no-print"></th>
                </tr>
            </thead>
            <tbody>
                {% for row in v_rows %}
                {% set v = row.veranstaltung %}
                <tr>
                    <td style="font-weight:500; white-space:nowrap;">
                        <a href="/veranstaltungen/{{ v.id }}">{{ v.titel }}</a>
                        {% if v.ort %}<div style="font-size:0.75rem; color:var(--kw-text-muted);">{{ v.ort }}</div>{% endif %}
                    </td>
                    <td style="font-size:0.85rem; white-space:nowrap;">
                        {{ v.start_datum.strftime('%d.%m.%Y') if v.start_datum else '–' }}
                    </td>
                    <td>
                        <span class="tag-chip" style="font-size:0.75rem;">{{ v.status }}</span>
                    </td>
                    <td style="text-align:right; font-weight:600;">{{ row.anzahl_teilnehmer }}</td>
                    <td>
                        {% if row.anzahl_teilnehmer > 0 %}
                        <div class="status-bar" title="Angem.:{{row.tn_angemeldet}} Teilgen.:{{row.tn_teilgenommen}} Abges.:{{row.tn_abgesagt}}">
                            {% if row.pct_angemeldet > 0 %}<div style="width:{{row.pct_angemeldet}}%;background:#2196F3;"></div>{% endif %}
                            {% if row.pct_teilgenommen > 0 %}<div style="width:{{row.pct_teilgenommen}}%;background:#4CAF50;"></div>{% endif %}
                            {% if row.pct_abgesagt > 0 %}<div style="width:{{row.pct_abgesagt}}%;background:#e53e3e;"></div>{% endif %}
                        </div>
                        {% else %}–{% endif %}
                    </td>
                    <td style="text-align:center; font-size:0.85rem; color:#2196F3;">{{ row.tn_angemeldet }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#4CAF50; font-weight:600;">{{ row.tn_teilgenommen }}</td>
                    <td style="text-align:center; font-size:0.85rem; color:#e53e3e;">{{ row.tn_abgesagt }}</td>
                    <td style="text-align:right; font-size:0.85rem;">
                        {% if row.auslastung_pct is not none %}
                        <span style="font-weight:600; color:{% if row.auslastung_pct >= 90 %}#e53e3e{% elif row.auslastung_pct >= 70 %}#FF9800{% else %}#4CAF50{% endif %};">
                            {{ row.auslastung_pct }}%
                        </span>
                        <span style="color:var(--kw-text-muted); font-size:0.75rem;">/{{ v.max_teilnehmer }}</span>
                        {% else %}–{% endif %}
                    </td>
                    <td style="text-align:center; font-size:0.85rem;">
                        {% if row.tn_referenten > 0 %}{{ row.tn_referenten }}{% else %}–{% endif %}
                    </td>
                    <td style="font-size:0.85rem;">
                        {% if v.kampagne %}
                        <a href="/kampagnen/{{ v.kampagne_id }}">{{ v.kampagne.titel }}</a>
                        {% else %}–{% endif %}
                    </td>
                    <td class="no-print" style="white-space:nowrap;">
                        <a href="/auswertungen/veranstaltungen/{{ v.id }}" class="btn-sm outline" style="font-size:0.75rem; padding:0.15rem 0.5rem;">Detail →</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr style="font-weight:700; border-top:2px solid var(--kw-border);">
                    <td colspan="3">Gesamt</td>
                    <td style="text-align:right;">{{ v_teilnehmer }}</td>
                    <td></td>
                    <td style="text-align:center; color:#2196F3;">{{ v_rows | sum(attribute='tn_angemeldet') }}</td>
                    <td style="text-align:center; color:#4CAF50;">{{ v_rows | sum(attribute='tn_teilgenommen') }}</td>
                    <td style="text-align:center; color:#e53e3e;">{{ v_rows | sum(attribute='tn_abgesagt') }}</td>
                    <td colspan="4"></td>
                </tr>
            </tfoot>
        </table>
        </div>
        {% else %}
        <div class="empty-state"><p>Keine Veranstaltungen für diesen Filter.</p></div>
        {% endif %}
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════ -->
<!-- SPENDEN -->
<!-- ═══════════════════════════════════════════════════════ -->
<div id="spenden" style="margin-top:2rem;" class="print-section">
    <div class="kpi-grid" style="margin-bottom:1rem;">
        <div class="kpi-card">
            <div class="kpi-value">{{ '%.2f'|format(sp_gesamt) }}</div>
            <div class="kpi-label">Gesamt EUR</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value">{{ sp_anzahl }}</div>
            <div class="kpi-label">Anzahl Spenden</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-value">{{ '%.2f'|format(sp_avg) }}</div>
            <div class="kpi-label">Ø Betrag EUR</div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>Spenden-Auswertung{% if spenden %} ({{ sp_anzahl }}){% endif %}</h3>
            <div class="btn-group no-print">
                <a href="/auswertungen/spenden/csv" class="btn-sm outline">⬇ CSV</a>
                <a href="/spenden/bericht" class="btn-sm outline">Spenden-Bericht →</a>
            </div>
        </div>
        {% if spenden_pro_kampagne %}
        <table class="data-table">
            <thead>
                <tr>
                    <th>Kampagne</th>
                    <th style="text-align:right;">Anzahl</th>
                    <th style="text-align:right;">Betrag EUR</th>
                    <th style="min-width:100px;">Anteil</th>
                </tr>
            </thead>
            <tbody>
                {% for row in spenden_pro_kampagne %}
                <tr>
                    <td style="font-weight:500;">
                        {% if row.kampagne %}
                        <a href="/kampagnen/{{ row.kampagne.id }}">📢 {{ row.kampagne.titel }}</a>
                        {% else %}
                        <span style="color:var(--kw-text-muted);">Ohne Kampagne</span>
                        {% endif %}
                    </td>
                    <td style="text-align:right; font-size:0.85rem;">{{ row.anzahl }}</td>
                    <td style="text-align:right; font-weight:600; color:var(--kw-primary);">{{ '%.2f'|format(row.betrag) }}</td>
                    <td>
                        {% if sp_gesamt > 0 %}
                        {% set anteil = (row.betrag / sp_gesamt * 100)|round|int %}
                        <div style="display:flex; align-items:center; gap:0.5rem;">
                            <div style="flex:1; height:6px; background:var(--kw-border); border-radius:3px; overflow:hidden;">
                                <div style="width:{{anteil}}%; height:100%; background:var(--kw-primary);"></div>
                            </div>
                            <span style="font-size:0.8rem; color:var(--kw-text-muted); min-width:30px;">{{anteil}}%</span>
                        </div>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr style="font-weight:700; border-top:2px solid var(--kw-border);">
                    <td>Gesamt</td>
                    <td style="text-align:right;">{{ sp_anzahl }}</td>
                    <td style="text-align:right; color:var(--kw-primary);">{{ '%.2f'|format(sp_gesamt) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
        {% else %}
        <div class="empty-state"><p>Noch keine Spenden erfasst. <a href="/spenden/neu">Spende erfassen</a></p></div>
        {% endif %}
    </div>
</div>

{% endblock %}
