{% extends "base.html" %}
{% block title %}{{ veranstaltung.titel }} – Auswertung{{ " - " + app_name() }}{% endblock %}

{% block content %}
<style>
.status-bar-lg { display:flex; height:24px; border-radius:6px; overflow:hidden; margin-bottom:0.75rem; }
.status-bar-lg div { display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:white; font-weight:600; }
.legend-row { display:flex; flex-wrap:wrap; gap:1rem; font-size:0.85rem; }
.legend-item { display:flex; align-items:center; gap:0.4rem; }
.legend-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.auslastung-bar { height:10px; border-radius:5px; overflow:hidden; background:var(--kw-border); }
.auslastung-fill { height:100%; border-radius:5px; }
@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; }
    a[href]:after { content:none !important; }
}
</style>

<div class="page-header">
    <div>
        <div style="font-size:0.85rem; color:var(--kw-text-muted); margin-bottom:0.25rem;">
            <a href="/auswertungen">← Auswertungen</a>
        </div>
        <h1 style="margin:0;">
            📅 {{ veranstaltung.titel }}
            <span class="tag-chip" style="font-size:0.8rem; vertical-align:middle;">{{ veranstaltung.status }}</span>
        </h1>
        <div style="font-size:0.85rem; color:var(--kw-text-muted); margin-top:0.25rem;">
            {% if veranstaltung.start_datum %}{{ veranstaltung.start_datum.strftime('%d.%m.%Y') }}{% if veranstaltung.end_datum and veranstaltung.end_datum != veranstaltung.start_datum %} – {{ veranstaltung.end_datum.strftime('%d.%m.%Y') }}{% endif %}{% endif %}
            {% if veranstaltung.ort %} · {{ veranstaltung.ort }}{% endif %}
            {% if veranstaltung.typ %} · {{ veranstaltung.typ }}{% endif %}
        </div>
    </div>
    <div class="btn-group no-print">
        <a href="/veranstaltungen/{{ veranstaltung.id }}" class="btn-sm outline">Zur Veranstaltung →</a>
        <button onclick="window.print()" class="btn-sm outline">🖨️</button>
    </div>
</div>

<!-- KPIs -->
<div class="kpi-grid" style="margin-bottom:1.5rem;">
    <div class="kpi-card">
        <div class="kpi-value">{{ gesamt }}</div>
        <div class="kpi-label">Teilnehmer</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value" style="color:#4CAF50;">{{ n_teilgenommen }}</div>
        <div class="kpi-label">Teilgenommen</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value" style="color:#2196F3;">{{ n_angemeldet }}</div>
        <div class="kpi-label">Angemeldet</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value" style="color:#e53e3e;">{{ n_abgesagt }}</div>
        <div class="kpi-label">Abgesagt</div>
    </div>
    {% if tn_referenten > 0 %}
    <div class="kpi-card">
        <div class="kpi-value">{{ tn_referenten }}</div>
        <div class="kpi-label">Referenten</div>
    </div>
    {% endif %}
    {% if auslastung_pct is not none %}
    <div class="kpi-card">
        <div class="kpi-value" style="color:{% if auslastung_pct >= 90 %}#e53e3e{% elif auslastung_pct >= 70 %}#FF9800{% else %}#4CAF50{% endif %};">
            {{ auslastung_pct }}%
        </div>
        <div class="kpi-label">Auslastung (max. {{ veranstaltung.max_teilnehmer }})</div>
    </div>
    {% endif %}
</div>

<!-- Teilnehmer Status-Verteilung -->
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Teilnehmer-Status</h3>
    </div>
    {% if gesamt > 0 %}
    <div style="padding:0.5rem 0;">
        <!-- Hauptbalken: angemeldet/teilgenommen/abgesagt -->
        <div style="margin-bottom:0.5rem; font-size:0.8rem; color:var(--kw-text-muted);">Statusverteilung</div>
        <div class="status-bar-lg">
            {% if pct_teilgenommen > 0 %}<div style="width:{{pct_teilgenommen}}%;background:#4CAF50;" title="Teilgenommen: {{n_teilgenommen}}">{% if pct_teilgenommen >= 8 %}{{pct_teilgenommen}}%{% endif %}</div>{% endif %}
            {% if pct_angemeldet > 0 %}<div style="width:{{pct_angemeldet}}%;background:#2196F3;" title="Angemeldet: {{n_angemeldet}}">{% if pct_angemeldet >= 8 %}{{pct_angemeldet}}%{% endif %}</div>{% endif %}
            {% if pct_abgesagt > 0 %}<div style="width:{{pct_abgesagt}}%;background:#e53e3e;" title="Abgesagt: {{n_abgesagt}}">{% if pct_abgesagt >= 8 %}{{pct_abgesagt}}%{% endif %}</div>{% endif %}
        </div>
        <div class="legend-row" style="margin-bottom:1rem;">
            <div class="legend-item"><div class="legend-dot" style="background:#4CAF50;"></div><span>Teilgenommen: <strong>{{n_teilgenommen}}</strong> ({{pct_teilgenommen}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#2196F3;"></div><span>Angemeldet: <strong>{{n_angemeldet}}</strong> ({{pct_angemeldet}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#e53e3e;"></div><span>Abgesagt: <strong>{{n_abgesagt}}</strong> ({{pct_abgesagt}}%)</span></div>
        </div>

        <!-- Auslastungsbalken -->
        {% if auslastung_pct is not none %}
        <div style="margin-bottom:0.5rem; font-size:0.8rem; color:var(--kw-text-muted);">Auslastung ({{ gesamt }} / {{ veranstaltung.max_teilnehmer }} Plätze)</div>
        <div class="auslastung-bar" style="margin-bottom:0.75rem;">
            <div class="auslastung-fill" style="width:{{ [auslastung_pct, 100]|min }}%; background:{% if auslastung_pct >= 90 %}#e53e3e{% elif auslastung_pct >= 70 %}#FF9800{% else %}#4CAF50{% endif %};"></div>
        </div>
        {% endif %}

        <!-- Rollen -->
        {% if tn_referenten > 0 or tn_organisatoren > 0 %}
        <div style="font-size:0.85rem; color:var(--kw-text-muted);">
            Rollen: {% if tn_referenten > 0 %}<strong>{{ tn_referenten }}</strong> Referent(en){% if tn_organisatoren > 0 %}, {% endif %}{% endif %}{% if tn_organisatoren > 0 %}<strong>{{ tn_organisatoren }}</strong> Organisator(en){% endif %}
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="empty-state"><p>Noch keine Teilnehmer erfasst.</p></div>
    {% endif %}
</div>

<!-- Teilnehmerliste -->
{% if teilnehmer_sortiert %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Teilnehmerliste ({{ gesamt }})</h3>
    </div>
    <div style="overflow-x:auto;">
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Organisation</th>
                <th>E-Mail</th>
                <th>Telefon</th>
                <th>Rolle</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% set status_colors = kat_farben("teilnehmer_status") %}
            {% set rollen_icons = kat_icons("teilnehmer_rolle") %}
            {% set rollen_labels = kat_dict("teilnehmer_rolle") %}
            {% for tn in teilnehmer_sortiert %}
            {% set c = tn.kontakt %}
            <tr>
                <td style="font-weight:500;"><a href="/kontakte/{{ c.id }}">{{ c.anzeigename }}</a></td>
                <td style="font-size:0.85rem;">{{ c.firmenname or '–' }}</td>
                <td style="font-size:0.85rem;">{{ c.email1 or '–' }}</td>
                <td style="font-size:0.85rem;">{{ c.telefon or c.mobil or '–' }}</td>
                <td>
                    <span style="font-size:0.8rem; font-weight:500;">
                        {{ rollen_icons.get(tn.rolle, '') }} {{ rollen_labels.get(tn.rolle, tn.rolle) }}
                    </span>
                </td>
                <td>
                    <span class="tag-chip" style="background:{{ status_colors.get(tn.status, '#607D8B') }}; color:white; font-size:0.75rem;">
                        {{ kat_dict("teilnehmer_status").get(tn.status, tn.status) }}
                    </span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endif %}

<!-- Verknüpfte Kampagne -->
{% if veranstaltung.kampagne %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Kampagne</h3>
    </div>
    <div style="padding:0.5rem 0;">
        📢 <a href="/kampagnen/{{ veranstaltung.kampagne_id }}" style="font-weight:500;">{{ veranstaltung.kampagne.titel }}</a>
        <span class="tag-chip" style="background:{% if veranstaltung.kampagne.status == 'aktiv' %}#4CAF50{% elif veranstaltung.kampagne.status == 'abgeschlossen' %}#9E9E9E{% else %}#2196F3{% endif %}; color:white; font-size:0.75rem; margin-left:0.5rem;">
            {{ veranstaltung.kampagne.status_label }}
        </span>
        <div class="no-print" style="margin-top:0.5rem;">
            <a href="/auswertungen/kampagnen/{{ veranstaltung.kampagne_id }}" class="btn-sm outline" style="font-size:0.8rem;">Kampagnen-Auswertung →</a>
        </div>
    </div>
</div>
{% endif %}

<!-- Meta -->
<div class="card">
    <div class="info-grid">
        {% if veranstaltung.typ %}<div class="info-label">Typ</div><div class="info-value">{{ veranstaltung.typ }}</div>{% endif %}
        {% if veranstaltung.projekt %}<div class="info-label">Projekt</div><div class="info-value">{{ veranstaltung.projekt }}</div>{% endif %}
        {% if veranstaltung.max_teilnehmer %}<div class="info-label">Max. Teilnehmer</div><div class="info-value">{{ veranstaltung.max_teilnehmer }}</div>{% endif %}
        {% if veranstaltung.beschreibung %}<div class="info-label">Beschreibung</div><div class="info-value" style="white-space:pre-wrap;">{{ veranstaltung.beschreibung }}</div>{% endif %}
        <div class="info-label">Erfasst</div>
        <div class="info-value">{{ veranstaltung.erfasst_am.strftime('%d.%m.%Y') if veranstaltung.erfasst_am else '–' }}{% if veranstaltung.erfasst_von %} ({{ veranstaltung.erfasst_von }}){% endif %}</div>
    </div>
</div>

{% endblock %}
