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

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

{% block extra_css %}
<style>
    /* Override font sizes for better readability */
    body {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
    .h1, .h2, .h3, .h4, .h5, .h6,
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        line-height: 1.3;
    }
    
    .h3, h3 {
        font-size: 1.5rem;
    }
    
    .h5, h5 {
        font-size: 1.1rem;
    }
    
    .h6, h6 {
        font-size: 1rem;
    }
    
    /* Better card spacing */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Form improvements */
    .form-label {
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }
    
    .form-control, .form-select {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .form-text {
        font-size: 0.8rem;
    }
    
    /* Button improvements */
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
    }
    
    .btn-sm {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Progress bar styling */
    .progress {
        height: 1.25rem;
        font-size: 0.75rem;
    }
    
    /* Badge sizing */
    .badge {
        font-size: 0.75rem;
        padding: 0.35em 0.65em;
    }
    
    /* Table improvements */
    .table {
        font-size: 0.875rem;
    }
    
    .table th {
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.75rem;
    }
    
    .table td {
        padding: 0.75rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        body {
            font-size: 0.8rem;
        }
        
        .h3, h3 {
            font-size: 1.3rem;
        }
        
        .btn {
            font-size: 0.8rem;
            padding: 0.375rem 0.75rem;
        }
        
        .card-body {
            padding: 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h1 class="h3 mb-0">
                    <i class="fas fa-calendar-check text-primary me-2"></i>
                    Vierteljahresnachweis bearbeiten
                </h1>
                <a href="{% url 'stiftung:destinataer_detail' pk=destinataer.pk %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>Zurück
                </a>
            </div>

            <!-- Quarter Info Card -->
            <div class="card shadow mb-3">
                <div class="card-header bg-primary text-white">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-user me-2"></i>{{ destinataer.get_full_name }}
                            </h5>
                            <small class="opacity-75">{{ nachweis.jahr }} {{ nachweis.get_quarter_display }}</small>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="badge 
                                {% if nachweis.status == 'offen' %}bg-secondary
                                {% elif nachweis.status == 'teilweise' %}bg-warning
                                {% elif nachweis.status == 'eingereicht' %}bg-info
                                {% elif nachweis.status == 'geprueft' %}bg-success
                                {% elif nachweis.status == 'nachbesserung' %}bg-warning
                                {% elif nachweis.status == 'abgelehnt' %}bg-danger
                                {% endif %}">
                                {{ nachweis.get_status_display }}
                            </span>
                            {% if nachweis.faelligkeitsdatum %}
                                <br><small class="opacity-75">Fällig: {{ nachweis.faelligkeitsdatum|date:"d.m.Y" }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-2"><strong>Destinatär:</strong> {{ destinataer.get_full_name }}</p>
                            <p class="mb-2"><strong>E-Mail:</strong> 
                                {% if destinataer.email %}
                                    <a href="mailto:{{ destinataer.email }}">{{ destinataer.email }}</a>
                                {% else %}
                                    <em class="text-muted">Nicht angegeben</em>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-2"><strong>Zeitraum:</strong> {{ nachweis.jahr }} {{ nachweis.get_quarter_display }}</p>
                            {% if nachweis.faelligkeitsdatum %}
                                <p class="mb-0"><strong>Fälligkeitsdatum:</strong> {{ nachweis.faelligkeitsdatum|date:"d.m.Y" }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Edit Form -->
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-lg-8">
                        <!-- Study Proof Section -->
                        <div class="card shadow mb-3">
                            <div class="card-header bg-primary text-white">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-graduation-cap me-2"></i>Studiennachweis
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    {{ form.studiennachweis_eingereicht }}
                                    <label class="form-check-label" for="{{ form.studiennachweis_eingereicht.id_for_label }}">
                                        {{ form.studiennachweis_eingereicht.label }}
                                    </label>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.studiennachweis_datei.id_for_label }}" class="form-label">{{ form.studiennachweis_datei.label }}</label>
                                    {{ form.studiennachweis_datei }}
                                    {% if nachweis.studiennachweis_datei %}
                                        <div class="mt-2">
                                            <small class="text-muted">Aktuelle Datei: 
                                                <a href="{{ nachweis.studiennachweis_datei.url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-file-pdf text-danger"></i> {{ nachweis.studiennachweis_datei.name }}
                                                </a>
                                            </small>
                                        </div>
                                    {% endif %}
                                    {% if form.studiennachweis_datei.help_text %}
                                        <small class="form-text text-muted">{{ form.studiennachweis_datei.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="mb-0">
                                    <label for="{{ form.studiennachweis_bemerkung.id_for_label }}" class="form-label">{{ form.studiennachweis_bemerkung.label }}</label>
                                    {{ form.studiennachweis_bemerkung }}
                                    {% if form.studiennachweis_bemerkung.help_text %}
                                        <small class="form-text text-muted">{{ form.studiennachweis_bemerkung.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Income Situation Section -->
                        <div class="card shadow mb-3">
                            <div class="card-header bg-success text-white">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-euro-sign me-2"></i>Einkommenssituation
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    {{ form.einkommenssituation_bestaetigt }}
                                    <label class="form-check-label" for="{{ form.einkommenssituation_bestaetigt.id_for_label }}">
                                        {{ form.einkommenssituation_bestaetigt.label }}
                                    </label>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.einkommenssituation_text.id_for_label }}" class="form-label">{{ form.einkommenssituation_text.label }}</label>
                                    {{ form.einkommenssituation_text }}
                                    {% if form.einkommenssituation_text.help_text %}
                                        <small class="form-text text-muted">{{ form.einkommenssituation_text.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="mb-0">
                                    <label for="{{ form.einkommenssituation_datei.id_for_label }}" class="form-label">{{ form.einkommenssituation_datei.label }}</label>
                                    {{ form.einkommenssituation_datei }}
                                    {% if nachweis.einkommenssituation_datei %}
                                        <div class="mt-2">
                                            <small class="text-muted">Aktuelle Datei: 
                                                <a href="{{ nachweis.einkommenssituation_datei.url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-file-pdf text-danger"></i> {{ nachweis.einkommenssituation_datei.name }}
                                                </a>
                                            </small>
                                        </div>
                                    {% endif %}
                                    {% if form.einkommenssituation_datei.help_text %}
                                        <small class="form-text text-muted">{{ form.einkommenssituation_datei.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Asset Situation Section -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-warning text-dark">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-piggy-bank me-2"></i>Vermögenssituation
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    {{ form.vermogenssituation_bestaetigt }}
                                    <label class="form-check-label" for="{{ form.vermogenssituation_bestaetigt.id_for_label }}">
                                        {{ form.vermogenssituation_bestaetigt.label }}
                                    </label>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.vermogenssituation_text.id_for_label }}" class="form-label">{{ form.vermogenssituation_text.label }}</label>
                                    {{ form.vermogenssituation_text }}
                                    {% if form.vermogenssituation_text.help_text %}
                                        <small class="form-text text-muted">{{ form.vermogenssituation_text.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.vermogenssituation_datei.id_for_label }}" class="form-label">{{ form.vermogenssituation_datei.label }}</label>
                                    {{ form.vermogenssituation_datei }}
                                    {% if nachweis.vermogenssituation_datei %}
                                        <div class="mt-2">
                                            <small class="text-muted">Aktuelle Datei: 
                                                <a href="{{ nachweis.vermogenssituation_datei.url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-file-pdf text-danger"></i> {{ nachweis.vermogenssituation_datei.name }}
                                                </a>
                                            </small>
                                        </div>
                                    {% endif %}
                                    {% if form.vermogenssituation_datei.help_text %}
                                        <small class="form-text text-muted">{{ form.vermogenssituation_datei.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Additional Documents Section -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-info text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-file-alt me-2"></i>Weitere Dokumente (optional)
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.weitere_dokumente.id_for_label }}" class="form-label">{{ form.weitere_dokumente.label }}</label>
                                    {{ form.weitere_dokumente }}
                                    {% if nachweis.weitere_dokumente %}
                                        <div class="mt-2">
                                            <small class="text-muted">Aktuelle Datei: 
                                                <a href="{{ nachweis.weitere_dokumente.url }}" target="_blank" class="text-decoration-none">
                                                    <i class="fas fa-file-pdf text-danger"></i> {{ nachweis.weitere_dokumente.name }}
                                                </a>
                                            </small>
                                        </div>
                                    {% endif %}
                                    {% if form.weitere_dokumente.help_text %}
                                        <small class="form-text text-muted">{{ form.weitere_dokumente.help_text }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.weitere_dokumente_beschreibung.id_for_label }}" class="form-label">{{ form.weitere_dokumente_beschreibung.label }}</label>
                                    {{ form.weitere_dokumente_beschreibung }}
                                    {% if form.weitere_dokumente_beschreibung.help_text %}
                                        <small class="form-text text-muted">{{ form.weitere_dokumente_beschreibung.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Internal Notes (Staff Only) -->
                        {% if user.is_staff %}
                        <div class="card shadow mb-4">
                            <div class="card-header bg-secondary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-user-shield me-2"></i>Interne Notizen (nur für Verwaltung)
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.interne_notizen.id_for_label }}" class="form-label">{{ form.interne_notizen.label }}</label>
                                    {{ form.interne_notizen }}
                                    {% if form.interne_notizen.help_text %}
                                        <small class="form-text text-muted">{{ form.interne_notizen.help_text }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Form Actions -->
                        <div class="card shadow">
                            <div class="card-body bg-light">
                                <div class="row">
                                    <div class="col-6">
                                        <a href="{% url 'stiftung:destinataer_detail' pk=destinataer.pk %}" class="btn btn-secondary w-100">
                                            <i class="fas fa-times me-2"></i>Abbrechen
                                        </a>
                                    </div>
                                    <div class="col-6">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-save me-2"></i>Speichern
                                        </button>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Ihre Änderungen werden gespeichert und der Status wird automatisch aktualisiert.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div class="col-lg-4">
                        <!-- Status Card -->
                        <div class="card shadow mb-3">
                            <div class="card-header bg-light">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-info-circle me-2"></i>Status & Informationen
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="mb-2"><strong>Status:</strong> 
                                    <span class="badge 
                                        {% if nachweis.status == 'offen' %}bg-secondary
                                        {% elif nachweis.status == 'teilweise' %}bg-warning
                                        {% elif nachweis.status == 'eingereicht' %}bg-info
                                        {% elif nachweis.status == 'geprueft' %}bg-success
                                        {% elif nachweis.status == 'nachbesserung' %}bg-warning
                                        {% elif nachweis.status == 'abgelehnt' %}bg-danger
                                        {% endif %}">
                                        {{ nachweis.get_status_display }}
                                    </span>
                                </p>
                                
                                {% if nachweis.faelligkeitsdatum %}
                                <p class="mb-2"><strong>Fälligkeit:</strong> {{ nachweis.faelligkeitsdatum|date:"d.m.Y" }}</p>
                                {% endif %}
                                
                                {% if nachweis.eingereicht_am %}
                                <p class="mb-2"><strong>Eingereicht:</strong> {{ nachweis.eingereicht_am|date:"d.m.Y H:i" }}</p>
                                {% endif %}
                                
                                {% if nachweis.geprueft_am %}
                                <p class="mb-2"><strong>Geprüft:</strong> {{ nachweis.geprueft_am|date:"d.m.Y H:i" }}</p>
                                {% endif %}
                                
                                {% if nachweis.geprueft_von %}
                                <p class="mb-2"><strong>Geprüft von:</strong> {{ nachweis.geprueft_von.get_full_name|default:nachweis.geprueft_von.username }}</p>
                                {% endif %}
                                
                                <p class="mb-1"><strong>Erstellt:</strong> {{ nachweis.erstellt_am|date:"d.m.Y H:i" }}</p>
                                <p class="mb-0"><strong>Aktualisiert:</strong> {{ nachweis.aktualisiert_am|date:"d.m.Y H:i" }}</p>
                            </div>
                        </div>

                        <!-- Requirements Checklist -->
                        <div class="card shadow mb-3">
                            <div class="card-header bg-primary text-white">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-list-check me-2"></i>Anforderungen
                                </h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-0">
                                    <li class="mb-2">
                                        {% if nachweis.studiennachweis_eingereicht %}
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                        {% else %}
                                            <i class="fas fa-circle text-muted me-2"></i>
                                        {% endif %}
                                        Studiennachweis
                                    </li>
                                    
                                    <li class="mb-2">
                                        {% if nachweis.einkommenssituation_bestaetigt %}
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                        {% else %}
                                            <i class="fas fa-circle text-muted me-2"></i>
                                        {% endif %}
                                        Einkommenssituation
                                    </li>
                                    
                                    <li class="mb-0">
                                        {% if nachweis.vermogenssituation_bestaetigt %}
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                        {% else %}
                                            <i class="fas fa-circle text-muted me-2"></i>
                                        {% endif %}
                                        Vermögenssituation
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Help Card -->
                        <div class="card shadow">
                            <div class="card-header bg-info text-white">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-question-circle me-2"></i>Hilfe
                                </h6>
                            </div>
                            <div class="card-body">
                                <small>
                                    <strong>Einkommenssituation:</strong><br>
                                    Sie können entweder einen kurzen Text eingeben oder eine Datei hochladen.<br><br>
                                    
                                    <strong>Unterstützte Dateiformate:</strong><br>
                                    PDF, DOC, DOCX, JPG, PNG<br><br>
                                    
                                    <strong>Fragen?</strong><br>
                                    Wenden Sie sich an die Stiftungsverwaltung.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
// Auto-save functionality could be added here
document.addEventListener('DOMContentLoaded', function() {
    // Add any JavaScript functionality here
    console.log('Quarterly confirmation edit page loaded');
});
</script>
{% endblock %}