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

{% block title %}{{ title }} - 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-handshake text-primary me-2"></i>
                    {{ title }}
                </h1>
                <div>
                    <a href="{% url 'stiftung:verpachtung_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
                    </a>
                </div>
            </div>

            <!-- Form -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-edit me-2"></i>Verpachtungsdaten eingeben
                    </h6>
                </div>
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <!-- Error Messages -->
                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        <!-- Vertragsdaten -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-file-contract me-2"></i>Vertragsdaten
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.vertragsnummer.id_for_label }}" class="form-label">
                                        {{ form.vertragsnummer.label }} *
                                    </label>
                                    {{ form.vertragsnummer }}
                                    {% if form.vertragsnummer.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.vertragsnummer.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.status.id_for_label }}" class="form-label">
                                        {{ form.status.label }} *
                                    </label>
                                    {{ form.status }}
                                    {% if form.status.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.status.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Länderei und Pächter -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-map me-2"></i>Länderei und Pächter
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.land.id_for_label }}" class="form-label">
                                        {{ form.land.label }} *
                                    </label>
                                    {{ form.land }}
                                    {% if form.land.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.land.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.paechter.id_for_label }}" class="form-label">
                                        {{ form.paechter.label }} *
                                    </label>
                                    {{ form.paechter }}
                                    {% if form.paechter.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.paechter.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Zeitraum -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-calendar me-2"></i>Zeitraum
                                </h5>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.pachtbeginn.id_for_label }}" class="form-label">
                                        {{ form.pachtbeginn.label }} *
                                    </label>
                                    <input type="date" 
                                           name="{{ form.pachtbeginn.name }}" 
                                           value="{% if form.pachtbeginn.value %}{{ form.pachtbeginn.value|date:'Y-m-d' }}{% endif %}"
                                           class="form-control"
                                           id="{{ form.pachtbeginn.id_for_label }}">
                                    {% if form.pachtbeginn.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.pachtbeginn.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.pachtende.id_for_label }}" class="form-label">
                                        {{ form.pachtende.label }} *
                                    </label>
                                    <input type="date" 
                                           name="{{ form.pachtende.name }}" 
                                           value="{% if form.pachtende.value %}{{ form.pachtende.value|date:'Y-m-d' }}{% endif %}"
                                           class="form-control"
                                           id="{{ form.pachtende.id_for_label }}">
                                    {% if form.pachtende.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.pachtende.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.verlaengerung.id_for_label }}" class="form-label">
                                        {{ form.verlaengerung.label }}
                                    </label>
                                    <input type="date" 
                                           name="{{ form.verlaengerung.name }}" 
                                           value="{% if form.verlaengerung.value %}{{ form.verlaengerung.value|date:'Y-m-d' }}{% endif %}"
                                           class="form-control"
                                           id="{{ form.verlaengerung.id_for_label }}">
                                    {% if form.verlaengerung.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.verlaengerung.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Finanzielle Bedingungen -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-euro-sign me-2"></i>Finanzielle Bedingungen
                                </h5>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.pachtzins_pro_qm.id_for_label }}" class="form-label">
                                        {{ form.pachtzins_pro_qm.label }} *
                                    </label>
                                    {{ form.pachtzins_pro_qm }}
                                    {% if form.pachtzins_pro_qm.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.pachtzins_pro_qm.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.pachtzins_jaehrlich.id_for_label }}" class="form-label">
                                        {{ form.pachtzins_jaehrlich.label }} *
                                    </label>
                                    {{ form.pachtzins_jaehrlich }}
                                    {% if form.pachtzins_jaehrlich.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.pachtzins_jaehrlich.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.verpachtete_flaeche.id_for_label }}" class="form-label">
                                        {{ form.verpachtete_flaeche.label }} *
                                    </label>
                                    {{ form.verpachtete_flaeche }}
                                    {% if form.verpachtete_flaeche.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.verpachtete_flaeche.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Dokumentation -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-file-alt me-2"></i>Dokumentation
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.verwendungsnachweis.id_for_label }}" class="form-label">
                                        {{ form.verwendungsnachweis.label }}
                                    </label>
                                    {{ form.verwendungsnachweis }}
                                    {% if form.verwendungsnachweis.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.verwendungsnachweis.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.bemerkungen.id_for_label }}" class="form-label">
                                        {{ form.bemerkungen.label }}
                                    </label>
                                    {{ form.bemerkungen }}
                                    {% if form.bemerkungen.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.bemerkungen.errors %}
                                        {{ error }}
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <hr class="my-4">
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'stiftung:verpachtung_list' %}" class="btn btn-secondary">
                                        <i class="fas fa-times me-2"></i>Abbrechen
                                    </a>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-save me-2"></i>
                                        {% if verpachtung %}Aktualisieren{% else %}Erstellen{% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block extra_js %}
<script>
    // Auto-calculate annual rent from area and per-square-meter rate
    function calculateAnnualRent() {
        const area = parseFloat(document.getElementById('{{ form.verpachtete_flaeche.id_for_label }}').value) || 0;
        const ratePerSqm = parseFloat(document.getElementById('{{ form.pachtzins_pro_qm.id_for_label }}').value) || 0;
        
        if (area > 0 && ratePerSqm > 0) {
            const annualRent = area * ratePerSqm;
            document.getElementById('{{ form.pachtzins_jaehrlich.id_for_label }}').value = annualRent.toFixed(2);
        }
    }

    // Auto-calculate per-square-meter rate from annual rent and area
    function calculateRatePerSqm() {
        const area = parseFloat(document.getElementById('{{ form.verpachtete_flaeche.id_for_label }}').value) || 0;
        const annualRent = parseFloat(document.getElementById('{{ form.pachtzins_jaehrlich.id_for_label }}').value) || 0;
        
        if (area > 0 && annualRent > 0) {
            const ratePerSqm = annualRent / area;
            document.getElementById('{{ form.pachtzins_pro_qm.id_for_label }}').value = ratePerSqm.toFixed(4);
        }
    }

    // Add event listeners
    document.getElementById('{{ form.verpachtete_flaeche.id_for_label }}').addEventListener('input', calculateAnnualRent);
    document.getElementById('{{ form.pachtzins_pro_qm.id_for_label }}').addEventListener('input', calculateAnnualRent);
    document.getElementById('{{ form.pachtzins_jaehrlich.id_for_label }}').addEventListener('input', calculateRatePerSqm);
</script>
{% endblock %}