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

{% block title %}{{ title }} - Stiftungsverwaltung{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-12">
            <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>
                    {{ title }}
                </h1>
                <div>
                    <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">
                <div class="col-lg-8">
                    <div class="card shadow">
                        <div class="card-header bg-primary text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-edit me-2"></i>Destinatär-Daten
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <!-- Elegant Two-Column Form Design -->
                            <style>
                                .form-section {
                                    margin-bottom: 4rem;
                                    padding: 2.5rem;
                                    background: linear-gradient(135deg, #f8f9fb 0%, #f1f3f7 100%);
                                    border-radius: 16px;
                                    border: 1px solid #e3e6f0;
                                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                                }
                                .form-section h4 {
                                    font-size: 1.75rem;
                                    font-weight: 700;
                                    color: var(--racing-green);
                                    margin-bottom: 2rem;
                                    padding-bottom: 1rem;
                                    border-bottom: 3px solid var(--racing-green);
                                    display: flex;
                                    align-items: center;
                                    gap: 0.75rem;
                                }
                                .form-section h4 i {
                                    font-size: 1.5rem;
                                }
                                .two-column-grid {
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    gap: 2.5rem;
                                    align-items: start;
                                }
                                .form-field {
                                    margin-bottom: 1.75rem;
                                }
                                .form-field .form-label {
                                    font-weight: 600;
                                    color: #2d3748;
                                    margin-bottom: 0.75rem;
                                    font-size: 0.95rem;
                                    display: block;
                                }
                                .form-field .form-control,
                                .form-field .form-select,
                                .form-field textarea {
                                    width: 100%;
                                    padding: 0.875rem 1.125rem;
                                    border: 2px solid #e2e8f0;
                                    border-radius: 10px;
                                    font-size: 1rem;
                                    transition: all 0.2s ease;
                                    background: white;
                                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                                }
                                .form-field .form-control:focus,
                                .form-field .form-select:focus,
                                .form-field textarea:focus {
                                    border-color: var(--racing-green);
                                    box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.1);
                                    outline: none;
                                    transform: translateY(-1px);
                                }
                                .form-field .form-check {
                                    padding: 1rem;
                                    background: white;
                                    border: 2px solid #e2e8f0;
                                    border-radius: 10px;
                                    margin-bottom: 0.5rem;
                                    transition: all 0.2s ease;
                                }
                                .form-field .form-check:hover {
                                    border-color: var(--racing-green-light);
                                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                }
                                .form-field .form-check-input {
                                    margin-right: 0.75rem;
                                    transform: scale(1.2);
                                }
                                .form-field .form-check-label {
                                    font-weight: 500;
                                    color: #2d3748;
                                }
                                .full-width-field {
                                    grid-column: 1 / -1;
                                }
                                @media (max-width: 768px) {
                                    .two-column-grid {
                                        grid-template-columns: 1fr;
                                        gap: 1.5rem;
                                    }
                                    .form-section {
                                        padding: 1.5rem;
                                    }
                                }
                            </style>
                            
                            <form method="post" novalidate>
                                {% csrf_token %}
                                
                                <!-- Persönliche Informationen -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-user"></i>
                                        Persönliche Informationen
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <label for="{{ form.vorname.id_for_label }}" class="form-label">
                                                {{ form.vorname.label }} *
                                            </label>
                                            {{ form.vorname }}
                                            {% if form.vorname.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.vorname.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.nachname.id_for_label }}" class="form-label">
                                                {{ form.nachname.label }} *
                                            </label>
                                            {{ form.nachname }}
                                            {% if form.nachname.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.nachname.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">
                                                {{ form.geburtsdatum.label }}
                                            </label>
                                            {{ form.geburtsdatum }}
                                            {% if form.geburtsdatum.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.geburtsdatum.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.familienzweig.id_for_label }}" class="form-label">
                                                {{ form.familienzweig.label }}
                                            </label>
                                            {{ form.familienzweig }}
                                            {% if form.familienzweig.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.familienzweig.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>

                                <!-- Kontaktinformationen -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-address-book"></i>
                                        Kontaktinformationen
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <label for="{{ form.email.id_for_label }}" class="form-label">
                                                {{ form.email.label }}
                                            </label>
                                            {{ form.email }}
                                            {% if form.email.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.email.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.telefon.id_for_label }}" class="form-label">
                                                {{ form.telefon.label }}
                                            </label>
                                            {{ form.telefon }}
                                            {% if form.telefon.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.telefon.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.iban.id_for_label }}" class="form-label">
                                                {{ form.iban.label }}
                                            </label>
                                            {{ form.iban }}
                                            {% if form.iban.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.iban.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <label for="{{ form.adresse.id_for_label }}" class="form-label">
                                                {{ form.adresse.label }}
                                            </label>
                                            {{ form.adresse }}
                                            {% if form.adresse.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.adresse.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <!-- Professional Information Section -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-briefcase"></i>
                                        Berufliche Informationen
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <label for="{{ form.berufsgruppe.id_for_label }}" class="form-label">
                                                {{ form.berufsgruppe.label }}
                                            </label>
                                            {{ form.berufsgruppe }}
                                            {% if form.berufsgruppe.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.berufsgruppe.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field">
                                            <label for="{{ form.ausbildungsstand.id_for_label }}" class="form-label">
                                                {{ form.ausbildungsstand.label }}
                                            </label>
                                            {{ form.ausbildungsstand }}
                                            {% if form.ausbildungsstand.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.ausbildungsstand.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <label for="{{ form.institution.id_for_label }}" class="form-label">
                                                {{ form.institution.label }}
                                            </label>
                                            {{ form.institution }}
                                            {% if form.institution.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.institution.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <label for="{{ form.projekt_beschreibung.id_for_label }}" class="form-label">
                                                {{ form.projekt_beschreibung.label }}
                                            </label>
                                            {{ form.projekt_beschreibung }}
                                            {% if form.projekt_beschreibung.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.projekt_beschreibung.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <!-- Financial Information Section -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-euro-sign"></i>
                                        Finanzielle Informationen
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <label for="{{ form.jaehrliches_einkommen.id_for_label }}" class="form-label">
                                                {{ form.jaehrliches_einkommen.label }}
                                            </label>
                                            {{ form.jaehrliches_einkommen }}
                                            {% if form.jaehrliches_einkommen.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.jaehrliches_einkommen.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <div class="form-check">
                                                {{ form.finanzielle_notlage }}
                                                <label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">
                                                    {{ form.finanzielle_notlage.label }}
                                                </label>
                                            </div>
                                            {% if form.finanzielle_notlage.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.finanzielle_notlage.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <!-- Support & Payout Section -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-check-circle"></i>
                                        Unterstützung & Auszahlung
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <div class="form-check mb-2">
                                                {{ form.ist_abkoemmling }}
                                                <label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">{{ form.ist_abkoemmling.label }}</label>
                                            </div>
                                        </div>
                                        
                                        <div class="form-field">
                                            <div class="form-check mb-3">
                                                {{ form.unterstuetzung_bestaetigt }}
                                                <label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">{{ form.unterstuetzung_bestaetigt.label }}</label>
                                            </div>
                                        </div>
                                        
                                        <div class="form-field">
                                            <label for="{{ form.haushaltsgroesse.id_for_label }}" class="form-label">{{ form.haushaltsgroesse.label }}</label>
                                            {{ form.haushaltsgroesse }}
                                        </div>
                                        
                                        <div class="form-field">
                                            <label for="{{ form.vierteljaehrlicher_betrag.id_for_label }}" class="form-label">Vierteljährliche Bezüge (€)</label>
                                            {{ form.vierteljaehrlicher_betrag }}
                                        </div>
                                        
                                        <div class="form-field">
                                            <label for="{{ form.vermoegen.id_for_label }}" class="form-label">{{ form.vermoegen.label }}</label>
                                            {{ form.vermoegen }}
                                        </div>
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <label for="{{ form.standard_konto.id_for_label }}" class="form-label">{{ form.standard_konto.label }}</label>
                                            {{ form.standard_konto }}
                                            <div class="form-text">Standardkonto für vierteljährliche Vorauszahlungen</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Study Proof Section -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-graduation-cap"></i>
                                        Studiennachweis
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <div class="form-check">
                                                {{ form.studiennachweis_erforderlich }}
                                                <label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">{{ form.studiennachweis_erforderlich.label }}</label>
                                            </div>
                                        </div>
                                        
                                        <div class="form-field">
                                            <label for="{{ form.letzter_studiennachweis.id_for_label }}" class="form-label">{{ form.letzter_studiennachweis.label }}</label>
                                            {{ form.letzter_studiennachweis }}
                                            <div class="form-text">Stichtage: 15.03 und 15.09</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Status & Notes Section -->
                                <div class="form-section">
                                    <h4>
                                        <i class="fas fa-cog"></i>
                                        Status und Notizen
                                    </h4>
                                    <div class="two-column-grid">
                                        <div class="form-field">
                                            <div class="form-check">
                                                {{ form.aktiv }}
                                                <label class="form-check-label" for="{{ form.aktiv.id_for_label }}">
                                                    {{ form.aktiv.label }}
                                                </label>
                                            </div>
                                            {% if form.aktiv.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.aktiv.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        
                                        <div class="form-field" style="grid-column: 1 / -1;">
                                            <label for="{{ form.notizen.id_for_label }}" class="form-label">
                                                {{ form.notizen.label }}
                                            </label>
                                            {{ form.notizen }}
                                            {% if form.notizen.errors %}
                                                <div class="invalid-feedback d-block">
                                                    {% for error in form.notizen.errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <!-- Form Actions -->
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>Abbrechen
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Speichern
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Sidebar mit Hilfe -->
                <div class="col-lg-4">
                    {% help_box 'destinataer_new' user %}
                </div>
            </div>
        </div>
    </div>

{% endblock %} 
