{% extends 'base.html' %}
{% load static %}

{% block title %}{{ destinataer.get_full_name }} - Destinatär - Stiftungsverwaltung{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">
                    <i class="fas fa-users text-primary me-2"></i>
                    Destinatär: {{ destinataer.get_full_name }}
                </h1>
                <div>
                    <a href="{% url 'stiftung:unterstuetzung_create' %}?destinataer={{ destinataer.pk }}" class="btn btn-success me-2">
                        <i class="fas fa-heart me-2"></i>Neue Unterstützung
                    </a>
                    
                    <!-- Edit Mode Toggle Buttons -->
                    <button id="edit-btn" class="btn btn-warning me-2" onclick="enableEditMode()">
                        <i class="fas fa-edit me-2"></i>Bearbeiten
                    </button>
                    <button id="save-btn" class="btn btn-success me-2" onclick="saveChanges()" style="display: none;">
                        <i class="fas fa-save me-2"></i>Speichern
                    </button>
                    <button id="cancel-btn" class="btn btn-secondary me-2" onclick="cancelEdit()" style="display: none;">
                        <i class="fas fa-times me-2"></i>Abbrechen
                    </button>
                    
                    <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
                    </a>
                </div>
            </div>

            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8">
                    <!-- Edit Form (invisible wrapper) -->
                    <form id="edit-form" method="post" action="{% url 'stiftung:destinataer_update' pk=destinataer.pk %}" style="display: contents;">
                        {% csrf_token %}
                        
                        <!-- Persönliche Informationen -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-user me-2"></i>Persönliche Informationen
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Vorname -->
                                        <p class="mb-3">
                                            <strong>Vorname:</strong> 
                                            <span class="view-mode">{{ destinataer.vorname }}</span>
                                            <input type="text" name="vorname" value="{{ destinataer.vorname }}" class="form-control edit-mode" style="display: none;" required>
                                        </p>
                                        
                                        <!-- Nachname -->
                                        <p class="mb-3">
                                            <strong>Nachname:</strong> 
                                            <span class="view-mode">{{ destinataer.nachname }}</span>
                                            <input type="text" name="nachname" value="{{ destinataer.nachname }}" class="form-control edit-mode" style="display: none;" required>
                                        </p>
                                        
                                        <!-- Geburtsdatum -->
                                        <p class="mb-3">
                                            <strong>Geburtsdatum:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.geburtsdatum %}
                                                    {{ destinataer.geburtsdatum|date:"d.m.Y" }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="date" name="geburtsdatum" value="{% if destinataer.geburtsdatum %}{{ destinataer.geburtsdatum|date:'Y-m-d' }}{% endif %}" class="form-control edit-mode" style="display: none;">
                                        </p>
                                        
                                        <!-- Familienzweig -->
                                        <p class="mb-3">
                                            <strong>Familienzweig:</strong> 
                                            <span class="view-mode">
                                                <span class="badge bg-info">{{ destinataer.get_familienzweig_display }}</span>
                                            </span>
                                            <select name="familienzweig" class="form-select edit-mode" style="display: none;">
                                                <option value="">Bitte wählen...</option>
                                                <option value="hauptzweig" {% if destinataer.familienzweig == 'hauptzweig' %}selected{% endif %}>Hauptzweig</option>
                                                <option value="nebenzweig" {% if destinataer.familienzweig == 'nebenzweig' %}selected{% endif %}>Nebenzweig</option>
                                                <option value="verwandt" {% if destinataer.familienzweig == 'verwandt' %}selected{% endif %}>Verwandt</option>
                                                <option value="anderer" {% if destinataer.familienzweig == 'anderer' %}selected{% endif %}>Anderer</option>
                                            </select>
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- Status -->
                                        <p class="mb-3">
                                            <strong>Status:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.aktiv %}
                                                    <span class="badge bg-success">Aktiv</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">Inaktiv</span>
                                                {% endif %}
                                            </span>
                                            <div class="edit-mode" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" name="aktiv" id="aktiv" class="form-check-input" {% if destinataer.aktiv %}checked{% endif %}>
                                                    <label class="form-check-label" for="aktiv">Aktiv</label>
                                                </div>
                                            </div>
                                        </p>
                                        
                                        <!-- Berufsgruppe -->
                                        <p class="mb-3">
                                            <strong>Berufsgruppe:</strong> 
                                            <span class="view-mode">
                                                <span class="badge bg-secondary">{{ destinataer.get_berufsgruppe_display }}</span>
                                            </span>
                                            <select name="berufsgruppe" class="form-select edit-mode" style="display: none;">
                                                <option value="">Bitte wählen...</option>
                                                <option value="student" {% if destinataer.berufsgruppe == 'student' %}selected{% endif %}>Student/Studentin</option>
                                                <option value="wissenschaftler" {% if destinataer.berufsgruppe == 'wissenschaftler' %}selected{% endif %}>Wissenschaftler/in</option>
                                                <option value="künstler" {% if destinataer.berufsgruppe == 'künstler' %}selected{% endif %}>Künstler/in</option>
                                                <option value="sozialarbeiter" {% if destinataer.berufsgruppe == 'sozialarbeiter' %}selected{% endif %}>Sozialarbeiter/in</option>
                                                <option value="umweltschützer" {% if destinataer.berufsgruppe == 'umweltschützer' %}selected{% endif %}>Umweltschützer/in</option>
                                                <option value="andere" {% if destinataer.berufsgruppe == 'andere' %}selected{% endif %}>Andere</option>
                                            </select>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Kontaktinformationen -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-info text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-address-book me-2"></i>Kontaktinformationen
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- E-Mail -->
                                        <p class="mb-3">
                                            <strong>E-Mail:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.email %}
                                                    <a href="mailto:{{ destinataer.email }}">{{ destinataer.email }}</a>
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="email" name="email" value="{{ destinataer.email }}" class="form-control edit-mode" style="display: none;" placeholder="max@example.com">
                                        </p>
                                        
                                        <!-- Telefon -->
                                        <p class="mb-3">
                                            <strong>Telefon:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.telefon %}
                                                    {{ destinataer.telefon }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="tel" name="telefon" value="{{ destinataer.telefon }}" class="form-control edit-mode" style="display: none;" placeholder="+49 123 456789">
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- IBAN -->
                                        <p class="mb-3">
                                            <strong>IBAN:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.iban %}
                                                    {{ destinataer.iban }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="text" name="iban" value="{{ destinataer.iban }}" class="form-control edit-mode" style="display: none;" placeholder="DE89 3704 0044 0532 0130 00">
                                        </p>
                                    </div>
                                </div>
                                
                                <!-- Adresse (full width) -->
                                <div class="row">
                                    <div class="col-12">
                                        <p class="mb-3">
                                            <strong>Adresse:</strong>
                                            <span class="view-mode">
                                                {% if destinataer.adresse %}
                                                    <br>{{ destinataer.adresse|linebreaks }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <textarea name="adresse" class="form-control edit-mode" style="display: none;" rows="3" placeholder="Straße Nr.&#10;PLZ Ort">{{ destinataer.adresse }}</textarea>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Berufliche Informationen -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-success text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-briefcase me-2"></i>Berufliche Informationen
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Ausbildungsstand -->
                                        <p class="mb-3">
                                            <strong>Ausbildungsstand:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.ausbildungsstand %}
                                                    {{ destinataer.ausbildungsstand }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="text" name="ausbildungsstand" value="{{ destinataer.ausbildungsstand }}" class="form-control edit-mode" style="display: none;" placeholder="z.B. Bachelor, Master, Ausbildung">
                                        </p>
                                        
                                        <!-- Institution -->
                                        <p class="mb-3">
                                            <strong>Institution/Organisation:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.institution %}
                                                    {{ destinataer.institution }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="text" name="institution" value="{{ destinataer.institution }}" class="form-control edit-mode" style="display: none;" placeholder="Universität, Unternehmen, etc.">
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- Projektbeschreibung -->
                                        <p class="mb-3">
                                            <strong>Projektbeschreibung:</strong>
                                            <span class="view-mode">
                                                {% if destinataer.projekt_beschreibung %}
                                                    <br>{{ destinataer.projekt_beschreibung|linebreaks }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <textarea name="projekt_beschreibung" class="form-control edit-mode" style="display: none;" rows="4" placeholder="Beschreibung des Studiums/Projekts">{{ destinataer.projekt_beschreibung }}</textarea>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Finanzielle Informationen -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-warning text-dark">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Jährliches Einkommen -->
                                        <p class="mb-3">
                                            <strong>Jährliches Einkommen:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.jaehrliches_einkommen %}
                                                    <span class="text-primary fw-bold">€{{ destinataer.jaehrliches_einkommen|floatformat:2 }}</span>
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="number" name="jaehrliches_einkommen" value="{{ destinataer.jaehrliches_einkommen }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
                                        </p>
                                        
                                        <!-- Vermögen -->
                                        <p class="mb-3">
                                            <strong>Vermögen:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.vermoegen %}
                                                    €{{ destinataer.vermoegen|floatformat:2 }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="number" name="vermoegen" value="{{ destinataer.vermoegen }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
                                        </p>
                                        
                                        <!-- Haushaltsgröße -->
                                        <p class="mb-3">
                                            <strong>Haushaltsgröße:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.haushaltsgroesse %}
                                                    {{ destinataer.haushaltsgroesse }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="number" name="haushaltsgroesse" value="{{ destinataer.haushaltsgroesse }}" class="form-control edit-mode" style="display: none;" min="1" placeholder="1">
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- Finanzielle Notlage -->
                                        <p class="mb-3">
                                            <strong>Finanzielle Notlage:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.finanzielle_notlage %}
                                                    <span class="badge bg-danger">
                                                        <i class="fas fa-exclamation-triangle me-1"></i>Ja
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check me-1"></i>Nein
                                                    </span>
                                                {% endif %}
                                            </span>
                                            <div class="edit-mode" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" name="finanzielle_notlage" id="finanzielle_notlage" class="form-check-input" {% if destinataer.finanzielle_notlage %}checked{% endif %}>
                                                    <label class="form-check-label" for="finanzielle_notlage">Finanzielle Notlage</label>
                                                </div>
                                            </div>
                                        </p>
                                        
                                        <!-- Vierteljährlicher Betrag -->
                                        <p class="mb-3">
                                            <strong>Vierteljährlicher Betrag:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.vierteljaehrlicher_betrag %}
                                                    <span class="fw-bold">€{{ destinataer.vierteljaehrlicher_betrag|floatformat:2 }}</span>
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="number" name="vierteljaehrlicher_betrag" value="{{ destinataer.vierteljaehrlicher_betrag }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
                                        </p>
                                        
                                        <!-- Unterstützung bestätigt -->
                                        <p class="mb-3">
                                            <strong>Unterstützung bestätigt:</strong>
                                            <span class="view-mode">
                                                {% if destinataer.unterstuetzung_bestaetigt %}
                                                    <span class="badge bg-success">Ja</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">Nein</span>
                                                {% endif %}
                                            </span>
                                            <div class="edit-mode" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" name="unterstuetzung_bestaetigt" id="unterstuetzung_bestaetigt" class="form-check-input" {% if destinataer.unterstuetzung_bestaetigt %}checked{% endif %}>
                                                    <label class="form-check-label" for="unterstuetzung_bestaetigt">Unterstützung bestätigt</label>
                                                </div>
                                            </div>
                                        </p>
                                        
                                        <!-- Standardkonto -->
                                        <p class="mb-3">
                                            <strong>Standardkonto:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.standard_konto %}
                                                    {{ destinataer.standard_konto }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <select name="standard_konto" class="form-select edit-mode" style="display: none;">
                                                <option value="">---</option>
                                                {% for konto in stiftungskonten %}
                                                    <option value="{{ konto.pk }}" {% if destinataer.standard_konto_id == konto.pk %}selected{% endif %}>{{ konto.kontoname }}</option>
                                                {% endfor %}
                                            </select>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Studiennachweis / Voraussetzungen -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-light">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-graduation-cap me-2"></i>Studiennachweis & Voraussetzungen
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Ist Abkömmling -->
                                        <p class="mb-3">
                                            <strong>Abkömmling gem. Satzung:</strong>
                                            <span class="view-mode">
                                                {% if destinataer.ist_abkoemmling %}
                                                    <span class="badge bg-success">Ja</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">Nein</span>
                                                {% endif %}
                                            </span>
                                            <div class="edit-mode" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" name="ist_abkoemmling" id="ist_abkoemmling" class="form-check-input" {% if destinataer.ist_abkoemmling %}checked{% endif %}>
                                                    <label class="form-check-label" for="ist_abkoemmling">Ist Abkömmling</label>
                                                </div>
                                            </div>
                                        </p>
                                        
                                        <!-- Studiennachweis erforderlich -->
                                        <p class="mb-3">
                                            <strong>Studiennachweis erforderlich:</strong>
                                            <span class="view-mode">
                                                {% if destinataer.studiennachweis_erforderlich %}
                                                    <span class="badge bg-info">Ja</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">Nein</span>
                                                {% endif %}
                                            </span>
                                            <div class="edit-mode" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" name="studiennachweis_erforderlich" id="studiennachweis_erforderlich" class="form-check-input" {% if destinataer.studiennachweis_erforderlich %}checked{% endif %}>
                                                    <label class="form-check-label" for="studiennachweis_erforderlich">Studiennachweis erforderlich</label>
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <!-- Letzter Studiennachweis -->
                                        <p class="mb-3">
                                            <strong>Letzter Nachweis:</strong> 
                                            <span class="view-mode">
                                                {% if destinataer.letzter_studiennachweis %}
                                                    {{ destinataer.letzter_studiennachweis|date:"d.m.Y" }}
                                                {% else %}
                                                    <em class="text-muted">Nicht angegeben</em>
                                                {% endif %}
                                            </span>
                                            <input type="date" name="letzter_studiennachweis" value="{% if destinataer.letzter_studiennachweis %}{{ destinataer.letzter_studiennachweis|date:'Y-m-d' }}{% endif %}" class="form-control edit-mode" style="display: none;">
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Notes Section -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-secondary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-sticky-note me-2"></i>Notizen
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="mb-0">
                                    <span class="view-mode">
                                        {% if destinataer.notizen %}
                                            {{ destinataer.notizen|linebreaks }}
                                        {% else %}
                                            <em class="text-muted">Keine Notizen vorhanden</em>
                                        {% endif %}
                                    </span>
                                    <textarea name="notizen" class="form-control edit-mode" style="display: none;" rows="4" placeholder="Notizen und Bemerkungen">{{ destinataer.notizen }}</textarea>
                                </p>
                            </div>
                        </div>
                    </form>

                    <!-- Förderungen -->
                    {% if foerderungen %}
                        <div class="card shadow mb-4">
                            <div class="card-header bg-secondary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-gift me-2"></i>Förderungen ({{ foerderungen.count }})
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Jahr</th>
                                                <th>Betrag</th>
                                                <th>Kategorie</th>
                                                <th>Status</th>
                                                <th>Verwendungsnachweis</th>
                                                <th>Aktionen</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for foerderung in foerderungen %}
                                            <tr>
                                                <td>{{ foerderung.jahr }}</td>
                                                <td><span class="text-success fw-bold">€{{ foerderung.betrag|floatformat:2 }}</span></td>
                                                <td>{{ foerderung.get_kategorie_display }}</td>
                                                <td>
                                                    {% if foerderung.status == 'bewilligt' %}
                                                        <span class="badge bg-success">Bewilligt</span>
                                                    {% elif foerderung.status == 'abgelehnt' %}
                                                        <span class="badge bg-danger">Abgelehnt</span>
                                                    {% elif foerderung.status == 'in_bearbeitung' %}
                                                        <span class="badge bg-warning">In Bearbeitung</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">{{ foerderung.get_status_display }}</span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    {% if foerderung.verwendungsnachweis %}
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-check me-1"></i>Ja
                                                        </span>
                                                    {% else %}
                                                        <span class="badge bg-warning">
                                                            <i class="fas fa-times me-1"></i>Nein
                                                        </span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <a href="{% url 'stiftung:foerderung_detail' pk=foerderung.pk %}" 
                                                       class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Unterstützungen -->
                    {% if unterstuetzungen %}
                        <div class="card shadow mb-4">
                            <div class="card-header bg-info text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-hand-holding-usd me-2"></i>Unterstützungen ({{ unterstuetzungen.count }})
                                    </h5>
                                    <a href="{% url 'stiftung:unterstuetzung_create' %}?destinataer={{ destinataer.pk }}" 
                                       class="btn btn-light btn-sm">
                                        <i class="fas fa-plus me-1"></i>Neue Unterstützung
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Fällig am</th>
                                                <th>Betrag</th>
                                                <th>Status</th>
                                                <th>Beschreibung</th>
                                                <th>Aktionen</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for unterstuetzung in unterstuetzungen %}
                                            <tr>
                                                <td>{{ unterstuetzung.faellig_am|date:"d.m.Y" }}</td>
                                                <td><span class="text-success fw-bold">€{{ unterstuetzung.betrag|floatformat:2 }}</span></td>
                                                <td>
                                                    {% if unterstuetzung.status == 'ausgezahlt' %}
                                                        <span class="badge bg-success">Ausgezahlt</span>
                                                    {% elif unterstuetzung.status == 'in_bearbeitung' %}
                                                        <span class="badge bg-warning">In Bearbeitung</span>
                                                    {% elif unterstuetzung.status == 'geplant' %}
                                                        <span class="badge bg-secondary">Geplant</span>
                                                    {% else %}
                                                        <span class="badge bg-danger">{{ unterstuetzung.get_status_display }}</span>
                                                    {% endif %}
                                                </td>
                                                <td>{{ unterstuetzung.beschreibung|truncatechars:40 }}</td>
                                                <td>
                                                    <a href="{% url 'stiftung:unterstuetzung_detail' pk=unterstuetzung.pk %}" 
                                                       class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Verknüpfte Dokumente -->
                    <div class="card shadow mb-4">
                        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-file-alt me-2"></i>Verknüpfte Dokumente
                            </h5>
                            <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-light btn-sm">
                                <i class="fas fa-plus me-1"></i>Dokument verknüpfen
                            </a>
                        </div>
                        <div class="card-body">
                            {% if verknuepfte_dokumente %}
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Dokument</th>
                                                <th>Kontext</th>
                                                <th>Beschreibung</th>
                                                <th>Aktionen</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for dokument in verknuepfte_dokumente %}
                                            <tr>
                                                <td>
                                                    <strong>{{ dokument.titel }}</strong>
                                                    <br>
                                                    <small class="text-muted">ID: {{ dokument.paperless_document_id }}</small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary">{{ dokument.get_kontext_display }}</span>
                                                </td>
                                                <td>
                                                    {% if dokument.beschreibung %}
                                                        {{ dokument.beschreibung|truncatewords:10 }}
                                                    {% else %}
                                                        <span class="text-muted">Keine Beschreibung</span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <div class="btn-group" role="group">
                                                        <a href="{{ dokument.get_paperless_url }}" target="_blank" class="btn btn-sm btn-outline-primary" title="In Paperless öffnen">
                                                            <i class="fas fa-external-link-alt"></i>
                                                        </a>
                                                        <a href="{{ dokument.get_paperless_thumbnail_url }}" target="_blank" class="btn btn-sm btn-outline-info" title="Thumbnail anzeigen">
                                                            <i class="fas fa-image"></i>
                                                        </a>
                                                        <a href="{% url 'stiftung:dokument_update' dokument.pk %}" class="btn btn-sm btn-outline-warning" title="Bearbeiten">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <a href="{% url 'stiftung:dokument_delete' dokument.pk %}" class="btn btn-sm btn-outline-danger" title="Verknüpfung löschen">
                                                            <i class="fas fa-unlink"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <div class="text-center py-4">
                                    <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">Keine Dokumente verknüpft</h5>
                                    <p class="text-muted">Verknüpfen Sie Dokumente aus Paperless mit diesem Destinatär.</p>
                                    <a href="{% url 'stiftung:dokument_management' %}" class="btn btn-success">
                                        <i class="fas fa-plus me-2"></i>Erstes Dokument verknüpfen
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Notizen -->
                    <div class="card shadow mb-4">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-sticky-note me-2"></i>Notizen
                            </h5>
                            <a class="btn btn-sm btn-primary" href="{% url 'stiftung:destinataer_notiz_create' pk=destinataer.pk %}">
                                <i class="fas fa-plus me-1"></i>Notiz hinzufügen
                            </a>
                        </div>
                        <div class="card-body">
                            {% if notizen_eintraege %}
                                <div class="list-group">
                                    {% for n in notizen_eintraege %}
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <strong>{{ n.erstellt_am|date:"d.m.Y H:i" }}</strong>
                                                {% if n.erstellt_von %}<span class="text-muted">— {{ n.erstellt_von.username }}</span>{% endif %}
                                            </div>
                                            {% if n.datei %}
                                                <a href="{{ n.datei.url }}" target="_blank" class="btn btn-sm btn-outline-secondary"><i class="fas fa-paperclip"></i> Anhang</a>
                                            {% endif %}
                                        </div>
                                        {% if n.titel %}<div class="mt-1"><em>{{ n.titel }}</em></div>{% endif %}
                                        {% if n.text %}<div class="mt-1">{{ n.text|linebreaks }}</div>{% endif %}
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="text-muted mb-0">Keine Notizen vorhanden.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Statistiken -->
                    <div class="card shadow mb-4">
                        <div class="card-header bg-primary text-white">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-chart-bar me-2"></i>Statistiken
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="border-end">
                                            <h4 class="text-primary">{{ foerderungen.count }}</h4>
                                            <small class="text-muted">Förderungen</small>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <h4 class="text-success">
                                            {% if foerderungen %}
                                                {% with total_betrag=foerderungen|length %}
                                                    €{{ total_betrag|floatformat:0 }}
                                                {% endwith %}
                                            {% else %}
                                                €0
                                            {% endif %}
                                        </h4>
                                        <small class="text-muted">Gesamtbetrag</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Aktionen -->
                    <div class="card shadow mb-4">
                        <div class="card-header bg-success text-white">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-tools me-2"></i>Aktionen
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{% url 'stiftung:destinataer_update' pk=destinataer.pk %}" class="btn btn-warning">
                                    <i class="fas fa-edit me-2"></i>Bearbeiten
                                </a>
                                <a href="{% url 'stiftung:destinataer_export' pk=destinataer.pk %}" class="btn btn-success">
                                    <i class="fas fa-download me-2"></i>Export
                                </a>
                                <a href="{% url 'stiftung:destinataer_delete' pk=destinataer.pk %}" class="btn btn-danger">
                                    <i class="fas fa-trash me-2"></i>Löschen
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Informationen -->
                    <div class="card shadow">
                        <div class="card-header bg-info text-white">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>Informationen
                            </h6>
                        </div>
                        <div class="card-body">
                            <p><strong>ID:</strong> {{ destinataer.id }}</p>
                            <p><strong>Erstellt:</strong> {{ destinataer.id|slice:":8" }}</p>
                            {% if destinataer.aktiv %}
                                <p><strong>Status:</strong> <span class="badge bg-success">Aktiv</span></p>
                            {% else %}
                                <p><strong>Status:</strong> <span class="badge bg-secondary">Inaktiv</span></p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascript %}
<style>
    .edit-mode input,
    .edit-mode textarea,
    .edit-mode select {
        margin-top: 0.25rem;
    }
    
    .edit-mode .form-check {
        margin-top: 0.25rem;
    }
    
    .edit-mode-active .view-mode {
        display: none !important;
    }
    
    .edit-mode-active .edit-mode {
        display: block !important;
    }
    
    .card-body p {
        margin-bottom: 1rem;
    }
    
    .edit-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
        max-width: 300px;
    }
</style>

<script>
let originalFormData = {};
let isEditMode = false;

// Store original form data when page loads
document.addEventListener('DOMContentLoaded', function() {
    storeOriginalData();
});

function storeOriginalData() {
    const form = document.getElementById('edit-form');
    const formData = new FormData(form);
    originalFormData = {};
    
    // Store all form field values
    for (let [key, value] of formData.entries()) {
        originalFormData[key] = value;
    }
    
    // Also store checkbox states
    const checkboxes = form.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        originalFormData[checkbox.name] = checkbox.checked;
    });
}

function enableEditMode() {
    isEditMode = true;
    
    // Hide view elements and show edit elements
    document.body.classList.add('edit-mode-active');
    
    // Toggle buttons
    document.getElementById('edit-btn').style.display = 'none';
    document.getElementById('save-btn').style.display = 'inline-block';
    document.getElementById('cancel-btn').style.display = 'inline-block';
    
    // Show notification
    showNotification('Bearbeitungsmodus aktiviert', 'info');
    
    // Focus first input
    const firstInput = document.querySelector('.edit-mode input, .edit-mode textarea, .edit-mode select');
    if (firstInput) {
        firstInput.focus();
    }
}

function cancelEdit() {
    // Restore original values
    const form = document.getElementById('edit-form');
    
    // Restore text inputs, textareas, and selects
    Object.keys(originalFormData).forEach(key => {
        const element = form.querySelector(`[name="${key}"]`);
        if (element) {
            if (element.type === 'checkbox') {
                element.checked = originalFormData[key];
            } else {
                element.value = originalFormData[key] || '';
            }
        }
    });
    
    disableEditMode();
    showNotification('Änderungen verworfen', 'warning');
}

function disableEditMode() {
    isEditMode = false;
    
    // Show view elements and hide edit elements
    document.body.classList.remove('edit-mode-active');
    
    // Toggle buttons
    document.getElementById('edit-btn').style.display = 'inline-block';
    document.getElementById('save-btn').style.display = 'none';
    document.getElementById('cancel-btn').style.display = 'none';
}

function saveChanges() {
    const form = document.getElementById('edit-form');
    const formData = new FormData(form);
    
    // Show loading state
    const saveBtn = document.getElementById('save-btn');
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Speichern...';
    saveBtn.disabled = true;
    
    // Submit form via AJAX
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update the page with new data
            location.reload(); // Simple approach - reload the page to show updated data
        } else {
            // Show errors
            showNotification('Fehler beim Speichern: ' + (data.error || 'Unbekannter Fehler'), 'danger');
            
            // Reset button
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Fehler beim Speichern der Änderungen', 'danger');
        
        // Reset button
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
    });
}

function showNotification(message, type = 'info') {
    // Remove existing notifications
    const existing = document.querySelector('.edit-notification');
    if (existing) {
        existing.remove();
    }
    
    // Create notification
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show edit-notification`;
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 3 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 3000);
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (isEditMode) {
        // ESC to cancel
        if (e.key === 'Escape') {
            cancelEdit();
        }
        // Ctrl+S to save (prevent default browser save)
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            saveChanges();
        }
    }
});
</script>
{% endblock %}