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

{% block content %}
<div class="page-header">
    <h1>
        {% if kontakt.typ == 'organisation' %}🏢{% else %}👤{% endif %}
        {{ kontakt.anzeigename }}
    </h1>
    <div class="btn-group">
        <a href="{% if kontakt.typ == 'organisation' %}/organisationen{% else %}/kontakte{% endif %}" role="button" class="btn-sm outline">← Liste</a>
        <a href="/kontakte/{{ kontakt.id }}/bearbeiten" role="button" class="btn-sm">Bearbeiten</a>
        <button class="btn-sm btn-icon" onclick="if(confirm('Kontakt wirklich löschen?')) window.location='/kontakte/{{ kontakt.id }}/loeschen'">🗑️</button>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-main">
        <!-- Kontaktdaten -->
        <div class="card">
            <div class="card-header">
                <h3>Kontaktdaten</h3>
            </div>
            <div class="info-grid">
                {% if kontakt.typ == 'person' %}
                {% if kontakt.anrede %}<div class="info-label">Anrede</div><div class="info-value">{{ kontakt.anrede }}</div>{% endif %}
                {% if kontakt.titel %}<div class="info-label">Titel</div><div class="info-value">{{ kontakt.titel }}</div>{% endif %}
                <div class="info-label">Name</div><div class="info-value">{{ kontakt.vorname }} {{ kontakt.nachname }}</div>
                {% if kontakt.firmenname %}<div class="info-label">Organisation</div><div class="info-value">{{ kontakt.firmenname }}</div>{% endif %}
                {% if kontakt.position %}<div class="info-label">Position</div><div class="info-value">{{ kontakt.position }}</div>{% endif %}
                {% if kontakt.abteilung %}<div class="info-label">Abteilung</div><div class="info-value">{{ kontakt.abteilung }}</div>{% endif %}
                {% else %}
                <div class="info-label">Name</div><div class="info-value">{{ kontakt.firmenname }}{% if kontakt.firmenname2 %}<br>{{ kontakt.firmenname2 }}{% endif %}</div>
                {% endif %}

                {% if kontakt.strasse %}<div class="info-label">Adresse</div><div class="info-value">{{ kontakt.strasse }}<br>{{ kontakt.plz }} {{ kontakt.ort }}{% if kontakt.land and kontakt.land != 'Deutschland' %}<br>{{ kontakt.land }}{% endif %}</div>{% endif %}
                {% if kontakt.email1 %}<div class="info-label">E-Mail</div><div class="info-value"><a href="mailto:{{ kontakt.email1 }}">{{ kontakt.email1 }}</a>{% if kontakt.email2 %}<br><a href="mailto:{{ kontakt.email2 }}">{{ kontakt.email2 }}</a>{% endif %}</div>{% endif %}
                {% if kontakt.telefon %}<div class="info-label">Telefon</div><div class="info-value">{{ kontakt.telefon }}</div>{% endif %}
                {% if kontakt.telefon_direkt %}<div class="info-label">Telefon direkt</div><div class="info-value">{{ kontakt.telefon_direkt }}</div>{% endif %}
                {% if kontakt.mobil %}<div class="info-label">Mobil</div><div class="info-value">{{ kontakt.mobil }}</div>{% endif %}
                {% if kontakt.telefax %}<div class="info-label">Fax</div><div class="info-value">{{ kontakt.telefax }}</div>{% endif %}
                {% if kontakt.webseite %}<div class="info-label">Webseite</div><div class="info-value"><a href="{{ kontakt.webseite }}" target="_blank">{{ kontakt.webseite }}</a></div>{% endif %}
            </div>
        </div>

        <!-- Kommunikations-Praeferenzen -->
        {% if kontakt.newsletter or kontakt.keine_mails or kontakt.keine_briefe or kontakt.keine_anrufe %}
        <div class="card">
            <div class="card-header"><h3>Kommunikation</h3></div>
            <div style="display: flex; flex-wrap: wrap; gap: 0.4rem;">
                {% if kontakt.newsletter %}<span class="tag-chip" style="background: #4CAF50; color: white;">Newsletter</span>{% endif %}
                {% if kontakt.keine_mails %}<span class="tag-chip" style="background: #e53e3e; color: white;">Keine Mails</span>{% endif %}
                {% if kontakt.keine_briefe %}<span class="tag-chip" style="background: #e53e3e; color: white;">Keine Briefe</span>{% endif %}
                {% if kontakt.keine_anrufe %}<span class="tag-chip" style="background: #e53e3e; color: white;">Keine Anrufe</span>{% endif %}
            </div>
        </div>
        {% endif %}

        {% if kontakt.bemerkung %}
        <div class="card">
            <div class="card-header"><h3>Bemerkung</h3></div>
            <div style="font-size: 0.9rem; white-space: pre-wrap;">{{ kontakt.bemerkung }}</div>
        </div>
        {% endif %}

        <!-- Beziehungen -->
        <div class="card">
            <div class="card-header"><h3>Beziehungen</h3></div>
            <div id="beziehungen-container">
                {% with beziehungen=kontakt.alle_beziehungen, kontakt_id=kontakt.id, kontakt_typ=kontakt.typ %}
                {% include "components/beziehungen.html" %}
                {% endwith %}
            </div>
        </div>

        <!-- Todos -->
        {% set offene = kontakt.aktivitaeten|selectattr('status', 'equalto', 'offen')|list %}
        {% if offene %}
        <div class="card">
            <div class="card-header">
                <h3>
                    Todos
                    <span style="background: #dd6b20; color: white; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; margin-left: 0.3rem; vertical-align: middle;">{{ offene|length }}</span>
                    <span style="font-size: 0.75rem; font-weight: 400; color: var(--kw-text-muted); margin-left: 0.3rem;">Unerledigte Aktivitäten</span>
                </h3>
            </div>
            {% for akt in offene|sort(attribute='faellig_am') %}
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--kw-border);">
                <span style="font-size: 0.85rem;">{{ akt.art_icon }}</span>
                <div style="flex: 1; min-width: 0;">
                    <a href="/aktivitaeten/{{ akt.id }}" style="font-size: 0.85rem; font-weight: 500; text-decoration: none; color: inherit;">{{ akt.betreff or 'Ohne Betreff' }}</a>
                    {% if akt.faellig_am %}<br><span style="font-size: 0.75rem; color: #dd6b20;">fällig {{ akt.faellig_am.strftime('%d.%m.%Y') }}</span>{% endif %}
                </div>
                {% if akt.zugewiesen_an %}<span style="font-size: 0.75rem; color: var(--kw-primary);">→ {{ akt.zugewiesen_an }}</span>{% endif %}
                <a href="/aktivitaeten/{{ akt.id }}/bearbeiten" style="font-size: 0.75rem;" title="Bearbeiten">✏️</a>
                <a href="/aktivitaeten/{{ akt.id }}/loeschen"
                   onclick="return confirm('Aktivität wirklich löschen?')"
                   style="font-size: 0.75rem; text-decoration: none;" title="Löschen">🗑️</a>
                <form method="post" action="/aktivitaeten/{{ akt.id }}/erledigt" style="display: contents;">
                    <button type="submit" class="btn-icon" style="font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid var(--kw-success); color: var(--kw-success); display: inline-block; width: auto;" title="Erledigt">✓</button>
                </form>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Aktivitäten Timeline -->
        <div class="card">
            <div class="card-header">
                <h3>Aktivitäten ({{ kontakt.aktivitaeten|length }})</h3>
                <a href="/aktivitaeten/neu?kontakt_id={{ kontakt.id }}" role="button" class="btn-sm">+ Neu</a>
            </div>
            {% if kontakt.aktivitaeten %}
            <div class="timeline">
                {% for akt in kontakt.aktivitaeten|sort(attribute='datum', reverse=True) %}
                {% include "components/aktivitaet_item.html" %}
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p>Keine Aktivitäten vorhanden.</p>
            </div>
            {% endif %}
        </div>

        <!-- Spenden -->
        <div class="card">
            <div class="card-header">
                <h3>Spenden{% if kontakt.spenden %} ({{ kontakt.spenden|length }}){% endif %}</h3>
                <a href="/spenden/neu?kontakt_id={{ kontakt.id }}" role="button" class="btn-sm">+ Neue Spende</a>
            </div>
            {% if kontakt.spenden %}
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Datum</th>
                        <th>Betrag</th>
                        <th>Zweck</th>
                        <th>Quittung</th>
                    </tr>
                </thead>
                <tbody>
                    {% for spende in kontakt.spenden|sort(attribute='datum', reverse=True) %}
                    <tr>
                        <td style="font-size: 0.85rem;">{{ spende.datum.strftime('%d.%m.%Y') if spende.datum else '' }}</td>
                        <td style="font-size: 0.85rem; font-weight: 600;">{{ '%.2f'|format(spende.betrag) }} EUR</td>
                        <td style="font-size: 0.85rem;">{{ spende.zweck or '-' }}</td>
                        <td style="font-size: 0.85rem;">{{ spende.quittung or '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="empty-state"><p>Keine Spenden vorhanden.</p></div>
            {% endif %}
        </div>
    </div>

    <!-- Sidebar -->
    <div class="detail-sidebar">
        <!-- Gruppen (read-only) -->
        <div class="card">
            <div class="card-header"><h3>Gruppen</h3></div>
            <div style="display: flex; flex-wrap: wrap; gap: 0.4rem;">
                {% for g in alle_gruppen %}
                {% set ist_zugeordnet = g.id in zugeordnete_gruppen_ids %}
                <span class="gruppe-badge" style="background: {{ g.farbe if ist_zugeordnet else '#ccc' }}; opacity: {{ '1' if ist_zugeordnet else '0.5' }};">{{ g.name }}</span>
                {% endfor %}
            </div>
        </div>

        <!-- Branchen (read-only) -->
        <div class="card">
            <div class="card-header"><h3>Branchen</h3></div>
            {% with editable=False %}
            {% include "components/branchen_toggle.html" %}
            {% endwith %}
        </div>

        <!-- Tags (read-only) -->
        <div class="card">
            <div class="card-header"><h3>Tags</h3></div>
            {% with kontakt_tags=kontakt.tags, editable=False %}
            {% include "components/tag_chips.html" %}
            {% endwith %}
        </div>

        <!-- Dokumente -->
        <div class="card">
            <div class="card-header"><h3>Dokumente</h3></div>
            {% if kontakt.dokumente %}
            {% for dok in kontakt.dokumente %}
            <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0; border-bottom: 1px solid var(--kw-border); font-size: 0.85rem;">
                <span>📎</span>
                <a href="/dokumente/{{ dok.id }}/download" style="flex: 1;">{{ dok.dateiname }}</a>
                <span style="color: var(--kw-text-muted);">{{ (dok.dateigroesse / 1024)|round(0)|int }} KB</span>
            </div>
            {% endfor %}
            {% endif %}
            <form method="post" action="/dokumente/upload" enctype="multipart/form-data"
                  style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem;">
                <input type="hidden" name="kontakt_id" value="{{ kontakt.id }}">
                <label class="file-upload-btn">
                    📎 Datei wählen
                    <input type="file" name="datei" style="display: none;"
                           onchange="this.parentElement.nextElementSibling.textContent = this.files[0]?.name || 'Keine Datei'">
                </label>
                <span style="font-size: 0.8rem; color: var(--kw-text-muted);">Keine Datei</span>
                <button type="submit" class="btn-sm" style="margin: 0; padding: 0.3rem 0.6rem;">Hochladen</button>
            </form>
        </div>

        <!-- Spenden Kurzuebersicht -->
        {% if kontakt.spenden %}
        <div class="card">
            <div class="card-header"><h3>Spenden</h3></div>
            {% for spende in (kontakt.spenden|sort(attribute='datum', reverse=True))[:5] %}
            <div style="display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--kw-border); font-size: 0.85rem;">
                <span>{{ spende.datum.strftime('%d.%m.%Y') if spende.datum else '' }}</span>
                <span style="font-weight: 600;">{{ '%.2f'|format(spende.betrag) }} EUR</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Kampagnen -->
        {% if kontakt.kampagnen %}
        <div class="card">
            <div class="card-header"><h3>Kampagnen</h3></div>
            {% for kk in kontakt.kampagnen %}
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--kw-border); font-size: 0.85rem;">
                <span>📢</span>
                <a href="/kampagnen/{{ kk.kampagne_id }}" style="flex: 1;">{{ kk.kampagne.titel if kk.kampagne else '#' + kk.kampagne_id|string }}</a>
                <span class="tag-chip" style="font-size: 0.75rem;">{{ kk.status_label }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Meta -->
        <div class="card">
            <div class="card-header"><h3>Meta</h3></div>
            <div class="info-grid">
                {% if kontakt.cobra_id %}<div class="info-label">Cobra-ID</div><div class="info-value">{{ kontakt.cobra_id }}</div>{% endif %}
                {% if kontakt.eigentuemer %}<div class="info-label">Eigentümer</div><div class="info-value">{{ kontakt.eigentuemer }}</div>{% endif %}
                {% if kontakt.betreuer %}<div class="info-label">Betreuer</div><div class="info-value">{{ kontakt.betreuer }}</div>{% endif %}
                <div class="info-label">Erfasst</div><div class="info-value">{{ kontakt.erfasst_am.strftime('%d.%m.%Y') if kontakt.erfasst_am else '-' }}{% if kontakt.erfasst_von %} ({{ kontakt.erfasst_von }}){% endif %}</div>
                <div class="info-label">Aktualisiert</div><div class="info-value">{{ kontakt.aktualisiert_am.strftime('%d.%m.%Y') if kontakt.aktualisiert_am else '-' }}</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
