{% extends "base.html" %}
{% block title %}{{ 'Bearbeiten' if kontakt else 'Neue Person' }}{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{% if kontakt %}{{ kontakt.anzeigename }} bearbeiten{% else %}Neue {{ 'Organisation' if typ == 'organisation' else 'Person' }}{% endif %}</h1>
    <div class="btn-group">
        {% if kontakt %}
        <a href="/kontakte/{{ kontakt.id }}" role="button" class="btn-sm outline" id="btn-abbrechen"
           onclick="if(window._formDirty){event.preventDefault(); if(confirm('Änderungen verwerfen?')) window.location=this.href;}">Abbrechen</a>
        {% else %}
        <a href="{% if typ == 'organisation' %}/organisationen{% else %}/kontakte{% endif %}" role="button" class="btn-sm outline" id="btn-abbrechen"
           onclick="if(window._formDirty){event.preventDefault(); if(confirm('Änderungen verwerfen?')) window.location=this.href;}">Abbrechen</a>
        {% endif %}
        <button type="submit" form="kontakt-form" class="btn-sm">Speichern</button>
    </div>
</div>

{% if kontakt %}
{# === BEARBEITEN: detail-grid Layout === #}
<div class="detail-grid">
    <div class="detail-main">
        <form id="kontakt-form" method="post" action="/kontakte/{{ kontakt.id }}/bearbeiten">
            <input type="hidden" name="typ" value="{{ kontakt.typ }}">

            <div class="card">
                <div class="card-header"><h3>Kontaktdaten</h3></div>

                {% if kontakt.typ != 'organisation' %}
                <div class="form-grid">
                    <div>
                        <label for="anrede">Anrede</label>
                        <select id="anrede" name="anrede">
                            <option value="">-</option>
                            {% for opt in kat_optionen("kontakt_anrede") %}
                            <option value="{{ opt.wert }}" {% if kontakt.anrede == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="titel">Titel</label>
                        <select id="titel" name="titel">
                            <option value="">–</option>
                            {% for opt in kat_optionen("kontakt_titel") %}
                            <option value="{{ opt.wert }}" {% if kontakt.titel == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="vorname">Vorname</label>
                        <input type="text" id="vorname" name="vorname" value="{{ kontakt.vorname or '' }}">
                    </div>
                    <div>
                        <label for="nachname">Nachname *</label>
                        <input type="text" id="nachname" name="nachname" value="{{ kontakt.nachname or '' }}" required>
                    </div>
                    <div>
                        <label for="firmenname">Organisation</label>
                        <input type="text" id="firmenname" name="firmenname" value="{{ kontakt.firmenname or '' }}">
                    </div>
                    <div>
                        <label for="position">Position</label>
                        <input type="text" id="position" name="position" value="{{ kontakt.position or '' }}">
                    </div>
                    <div>
                        <label for="abteilung">Abteilung</label>
                        <input type="text" id="abteilung" name="abteilung" value="{{ kontakt.abteilung or '' }}">
                    </div>
                    <div class="full-width">
                        <label for="briefanrede">Briefanrede</label>
                        <input type="text" id="briefanrede" name="briefanrede" value="{{ kontakt.briefanrede or '' }}" placeholder="z.B. Sehr geehrter Herr Dr. Müller">
                    </div>
                </div>
                {% else %}
                <div class="form-grid">
                    <div>
                        <label for="firmenname">Name *</label>
                        <input type="text" id="firmenname" name="firmenname" value="{{ kontakt.firmenname or '' }}" required>
                    </div>
                    <div>
                        <label for="firmenname2">Zusatzname</label>
                        <input type="text" id="firmenname2" name="firmenname2" value="{{ kontakt.firmenname2 or '' }}">
                    </div>
                </div>
                {% endif %}

                <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--kw-text-muted);">Adresse</h4>
                <div class="form-grid">
                    <div class="full-width">
                        <label for="strasse">Straße</label>
                        <input type="text" id="strasse" name="strasse" value="{{ kontakt.strasse or '' }}">
                    </div>
                    <div>
                        <label for="plz">PLZ</label>
                        <input type="text" id="plz" name="plz" value="{{ kontakt.plz or '' }}" maxlength="10">
                    </div>
                    <div>
                        <label for="ort">Ort</label>
                        <input type="text" id="ort" name="ort" value="{{ kontakt.ort or '' }}">
                    </div>
                    <div>
                        <label for="land">Land</label>
                        <input type="text" id="land" name="land" value="{{ kontakt.land or 'Deutschland' }}">
                    </div>
                </div>

                <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--kw-text-muted);">Kommunikation</h4>
                <div class="form-grid">
                    <div>
                        <label for="email1">E-Mail</label>
                        <input type="email" id="email1" name="email1" value="{{ kontakt.email1 or '' }}">
                    </div>
                    <div>
                        <label for="email2">E-Mail 2</label>
                        <input type="email" id="email2" name="email2" value="{{ kontakt.email2 or '' }}">
                    </div>
                    <div>
                        <label for="telefon">Telefon</label>
                        <input type="tel" id="telefon" name="telefon" value="{{ kontakt.telefon or '' }}">
                    </div>
                    <div>
                        <label for="telefon_direkt">Telefon direkt</label>
                        <input type="tel" id="telefon_direkt" name="telefon_direkt" value="{{ kontakt.telefon_direkt or '' }}">
                    </div>
                    <div>
                        <label for="mobil">Mobil</label>
                        <input type="tel" id="mobil" name="mobil" value="{{ kontakt.mobil or '' }}">
                    </div>
                    <div>
                        <label for="telefax">Fax</label>
                        <input type="tel" id="telefax" name="telefax" value="{{ kontakt.telefax or '' }}">
                    </div>
                    <div class="full-width">
                        <label for="webseite">Webseite</label>
                        <input type="url" id="webseite" name="webseite" value="{{ kontakt.webseite or '' }}">
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><h3>Bemerkung</h3></div>
                <div class="form-grid">
                    <div class="full-width">
                        <textarea id="bemerkung" name="bemerkung" rows="4">{{ kontakt.bemerkung or '' }}</textarea>
                    </div>
                </div>
            </div>

        </form>

        <!-- Beziehungen (HTMX, außerhalb form) -->
        <div class="card" style="margin-top: 1rem;">
            <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>
    </div>

    <!-- Sidebar -->
    <div class="detail-sidebar">
        <!-- Gruppen -->
        <div class="card">
            <div class="card-header"><h3>Gruppen</h3></div>
            <div id="gruppen-container">
                {% with kontakt_id=kontakt.id %}
                {% include "components/gruppen_toggle.html" %}
                {% endwith %}
            </div>
        </div>

        <!-- Branchen -->
        <div class="card">
            <div class="card-header"><h3>Branchen</h3></div>
            <div id="branchen-container">
                {% with kontakt_id=kontakt.id, editable=True %}
                {% include "components/branchen_toggle.html" %}
                {% endwith %}
            </div>
        </div>

        <!-- Tags -->
        <div class="card">
            <div class="card-header"><h3>Tags</h3></div>
            <div id="tag-container">
                {% with kontakt_tags=kontakt.tags, editable=True, kontakt_id=kontakt.id, kategorien=kategorien %}
                {% include "components/tag_chips.html" %}
                {% endwith %}
            </div>
        </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>

        <!-- Kommunikation -->
        <div class="card">
            <div class="card-header"><h3>Kommunikation</h3></div>
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.3rem;">
                <input type="checkbox" name="newsletter" value="1"
                       {% if kontakt.newsletter %}checked{% endif %}
                       form="kontakt-form"
                       style="margin: 0; width: auto; -webkit-appearance: checkbox; appearance: checkbox;">
                Newsletter
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.3rem;">
                <input type="checkbox" name="keine_mails" value="1"
                       {% if kontakt.keine_mails %}checked{% endif %}
                       form="kontakt-form"
                       style="margin: 0; width: auto; -webkit-appearance: checkbox; appearance: checkbox;">
                Keine Mails
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.3rem;">
                <input type="checkbox" name="keine_briefe" value="1"
                       {% if kontakt.keine_briefe %}checked{% endif %}
                       form="kontakt-form"
                       style="margin: 0; width: auto; -webkit-appearance: checkbox; appearance: checkbox;">
                Keine Briefe
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                <input type="checkbox" name="keine_anrufe" value="1"
                       {% if kontakt.keine_anrufe %}checked{% endif %}
                       form="kontakt-form"
                       style="margin: 0; width: auto; -webkit-appearance: checkbox; appearance: checkbox;">
                Keine Anrufe
            </label>
        </div>

        <!-- Datenschutz / Blacklist -->
        <div class="card">
            <div class="card-header"><h3>Datenschutz</h3></div>
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                <input type="checkbox" name="ist_blacklisted" value="1"
                       {% if kontakt.ist_blacklisted %}checked{% endif %}
                       form="kontakt-form">
                Blacklist (DSGVO-Loeschung)
            </label>
            {% if kontakt.ist_blacklisted %}
            <small style="display: block; margin-top: 0.5rem; color: var(--kw-text-muted);">Gesperrt am {{ kontakt.blacklist_am.strftime('%d.%m.%Y %H:%M') if kontakt.blacklist_am else '-' }} von {{ kontakt.blacklist_von or '-' }}</small>
            {% endif %}
        </div>

        <!-- 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>

{% else %}
{# === NEUANLAGE: Einspaltiges Layout === #}
{% if blacklist_warnung %}
<div class="card" style="border-left: 4px solid var(--kw-warning, #e67e22); margin-bottom: 1rem;">
    <h4 style="color: var(--kw-warning, #e67e22); margin-bottom: 0.5rem;">Blacklist-Warnung</h4>
    <p>Es existiert ein gesperrter Kontakt mit aehnlichen Daten:</p>
    <ul style="margin: 0.5rem 0;">
    {% for k in blacklist_warnung %}
        <li><strong>{{ k.anzeigename }}</strong> (gesperrt am {{ k.blacklist_am.strftime('%d.%m.%Y') if k.blacklist_am else '-' }}{% if k.blacklist_von %} von {{ k.blacklist_von }}{% endif %})</li>
    {% endfor %}
    </ul>
    <form method="post" action="/kontakte/neu" style="margin-top: 0.75rem;">
        <input type="hidden" name="typ" value="{{ typ or 'person' }}">
        <input type="hidden" name="blacklist_override" value="1">
        {% if formular_daten %}
        {% for key, val in formular_daten.items() %}
        {% if key != 'typ' %}
        <input type="hidden" name="{{ key }}" value="{{ val }}">
        {% endif %}
        {% endfor %}
        {% endif %}
        <button type="submit" class="btn-sm" style="background: var(--kw-warning, #e67e22);">Trotzdem anlegen</button>
    </form>
</div>
{% endif %}
<form id="kontakt-form" method="post" action="/kontakte/neu">
    <input type="hidden" name="typ" value="{{ typ or 'person' }}">

    <div class="card">
        <div class="card-header"><h3>{% if typ == 'organisation' %}Organisationsdaten{% else %}Persönliche Daten{% endif %}</h3></div>

        {% set fd = formular_daten or {} %}
        {% if typ != 'organisation' %}
        <div class="form-grid">
            <div>
                <label for="anrede">Anrede</label>
                <select id="anrede" name="anrede">
                    <option value="">-</option>
                    {% for opt in kat_optionen("kontakt_anrede") %}
                    <option value="{{ opt.wert }}" {% if fd.get('anrede') == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="titel">Titel</label>
                <select id="titel" name="titel">
                    <option value="">–</option>
                    {% for opt in kat_optionen("kontakt_titel") %}
                    <option value="{{ opt.wert }}" {% if fd.get('titel') == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="vorname">Vorname</label>
                <input type="text" id="vorname" name="vorname" value="{{ fd.get('vorname', '') }}">
            </div>
            <div>
                <label for="nachname">Nachname *</label>
                <input type="text" id="nachname" name="nachname" value="{{ fd.get('nachname', '') }}" required>
            </div>
            <div>
                <label for="firmenname">Organisation</label>
                <input type="text" id="firmenname" name="firmenname" value="{{ fd.get('firmenname', '') }}">
            </div>
            <div>
                <label for="position">Position</label>
                <input type="text" id="position" name="position" value="{{ fd.get('position', '') }}">
            </div>
            <div class="full-width">
                <label for="briefanrede">Briefanrede</label>
                <input type="text" id="briefanrede" name="briefanrede" value="{{ fd.get('briefanrede', '') }}" placeholder="z.B. Sehr geehrter Herr Dr. Müller">
            </div>
        </div>
        {% else %}
        <div class="form-grid">
            <div>
                <label for="firmenname">Name *</label>
                <input type="text" id="firmenname" name="firmenname" value="{{ fd.get('firmenname', '') }}" required>
            </div>
            <div>
                <label for="firmenname2">Zusatzname</label>
                <input type="text" id="firmenname2" name="firmenname2" value="{{ fd.get('firmenname2', '') }}">
            </div>
        </div>
        {% endif %}
    </div>

    <div class="card">
        <div class="card-header"><h3>Adresse</h3></div>
        <div class="form-grid">
            <div class="full-width">
                <label for="strasse">Straße</label>
                <input type="text" id="strasse" name="strasse" value="{{ fd.get('strasse', '') }}">
            </div>
            <div>
                <label for="plz">PLZ</label>
                <input type="text" id="plz" name="plz" value="{{ fd.get('plz', '') }}" maxlength="10">
            </div>
            <div>
                <label for="ort">Ort</label>
                <input type="text" id="ort" name="ort" value="{{ fd.get('ort', '') }}">
            </div>
            <div>
                <label for="land">Land</label>
                <input type="text" id="land" name="land" value="{{ fd.get('land', 'Deutschland') }}">
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3>Kontaktdaten</h3></div>
        <div class="form-grid">
            <div>
                <label for="email1">E-Mail</label>
                <input type="email" id="email1" name="email1" value="{{ fd.get('email1', '') }}">
            </div>
            <div>
                <label for="email2">E-Mail 2</label>
                <input type="email" id="email2" name="email2" value="{{ fd.get('email2', '') }}">
            </div>
            <div>
                <label for="telefon">Telefon</label>
                <input type="tel" id="telefon" name="telefon" value="{{ fd.get('telefon', '') }}">
            </div>
            <div>
                <label for="telefon_direkt">Telefon direkt</label>
                <input type="tel" id="telefon_direkt" name="telefon_direkt" value="{{ fd.get('telefon_direkt', '') }}">
            </div>
            <div>
                <label for="mobil">Mobil</label>
                <input type="tel" id="mobil" name="mobil" value="{{ fd.get('mobil', '') }}">
            </div>
            <div>
                <label for="telefax">Fax</label>
                <input type="tel" id="telefax" name="telefax" value="{{ fd.get('telefax', '') }}">
            </div>
            <div class="full-width">
                <label for="webseite">Webseite</label>
                <input type="url" id="webseite" name="webseite" value="{{ fd.get('webseite', '') }}">
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3>Sonstiges</h3></div>
        <div class="form-grid">
            <div class="full-width">
                <label for="bemerkung">Bemerkung</label>
                <textarea id="bemerkung" name="bemerkung" rows="4">{{ fd.get('bemerkung', '') }}</textarea>
            </div>
        </div>
    </div>

</form>
{% endif %}

<script>
window._formDirty = false;
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('kontakt-form');
    if (form) {
        form.addEventListener('input', function() { window._formDirty = true; });
        form.addEventListener('change', function() { window._formDirty = true; });
        form.addEventListener('submit', function() { window._formDirty = false; });
    }
});
</script>
{% endblock %}
