{% extends 'base.html' %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'stiftung:home' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'stiftung:unterstuetzungen_all' %}">Unterstützungen</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
  </ol>
</nav>

<div class="row">
  <div class="col-lg-10">
    <div class="card shadow">
      <div class="card-header bg-primary text-white">
        <div class="d-flex justify-content-between align-items-center">
          <h5 class="mb-0">{{ title }}</h5>
          <div>
            {% if unterstuetzung.status == 'geplant' %}
              <span class="badge bg-light text-dark">{{ unterstuetzung.get_status_display }}</span>
            {% elif unterstuetzung.status == 'faellig' %}
              <span class="badge bg-warning">{{ unterstuetzung.get_status_display }}</span>
            {% elif unterstuetzung.status == 'in_bearbeitung' %}
              <span class="badge bg-info">{{ unterstuetzung.get_status_display }}</span>
            {% elif unterstuetzung.status == 'ausgezahlt' %}
              <span class="badge bg-success">{{ unterstuetzung.get_status_display }}</span>
            {% else %}
              <span class="badge bg-danger">{{ unterstuetzung.get_status_display }}</span>
            {% endif %}
            
            {% if unterstuetzung.is_overdue %}
              <span class="badge bg-danger ms-2">Überfällig</span>
            {% endif %}
            
            {% if unterstuetzung.wiederkehrend_von %}
              <span class="badge bg-secondary ms-2">Wiederkehrend</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card-body">
        <!-- Basic Information -->
        <div class="row mb-4">
          <div class="col-md-6">
            <h6 class="text-muted mb-2"><i class="fas fa-user me-2"></i>Destinatär</h6>
            <p class="fw-bold mb-0">
              <a href="{% url 'stiftung:destinataer_detail' pk=unterstuetzung.destinataer.pk %}" 
                 class="text-decoration-none">
                {{ unterstuetzung.destinataer.get_full_name }}
              </a>
            </p>
          </div>
          <div class="col-md-6">
            <h6 class="text-muted mb-2"><i class="fas fa-euro-sign me-2"></i>Betrag</h6>
            <p class="fw-bold fs-4 text-success mb-0">€{{ unterstuetzung.betrag|floatformat:2 }}</p>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-md-4">
            <h6 class="text-muted mb-2"><i class="fas fa-calendar me-2"></i>Fällig am</h6>
            <p class="mb-0">{{ unterstuetzung.faellig_am|date:"d.m.Y" }}</p>
          </div>
          <div class="col-md-4">
            <h6 class="text-muted mb-2"><i class="fas fa-university me-2"></i>Zahlungskonto</h6>
            <p class="mb-0">{{ unterstuetzung.konto }}</p>
          </div>
          <div class="col-md-4">
            <h6 class="text-muted mb-2"><i class="fas fa-info-circle me-2"></i>Status</h6>
            <p class="mb-0">{{ unterstuetzung.get_status_display }}</p>
          </div>
        </div>

        <!-- Bank Transfer Information -->
        <div class="row mb-4">
          <div class="col-12">
            <h6 class="text-muted mb-3"><i class="fas fa-money-bill-transfer me-2"></i>Überweisungsdaten</h6>
          </div>
          <div class="col-md-6">
            <h6 class="text-muted mb-2">Empfänger IBAN</h6>
            <p class="mb-0 font-monospace">{{ unterstuetzung.empfaenger_iban|default:"Nicht angegeben" }}</p>
          </div>
          <div class="col-md-6">
            <h6 class="text-muted mb-2">Empfänger Name</h6>
            <p class="mb-0">{{ unterstuetzung.empfaenger_name|default:"Nicht angegeben" }}</p>
          </div>
        </div>

        {% if unterstuetzung.verwendungszweck %}
        <div class="row mb-4">
          <div class="col-12">
            <h6 class="text-muted mb-2">Verwendungszweck</h6>
            <p class="mb-0">{{ unterstuetzung.verwendungszweck }}</p>
          </div>
        </div>
        {% endif %}

        {% if unterstuetzung.beschreibung %}
        <div class="row mb-4">
          <div class="col-12">
            <h6 class="text-muted mb-2">Beschreibung</h6>
            <p class="mb-0">{{ unterstuetzung.beschreibung }}</p>
          </div>
        </div>
        {% endif %}

        <!-- Payment Information (if paid) -->
        {% if unterstuetzung.status == 'ausgezahlt' and unterstuetzung.ausgezahlt_am %}
        <div class="alert alert-success mb-4">
          <h6 class="alert-heading mb-2"><i class="fas fa-check-circle me-2"></i>Zahlungsinformationen</h6>
          <div class="row">
            <div class="col-md-6">
              <strong>Ausgezahlt am:</strong> {{ unterstuetzung.ausgezahlt_am|date:"d.m.Y" }}
            </div>
            {% if unterstuetzung.ausgezahlt_von %}
            <div class="col-md-6">
              <strong>Ausgezahlt von:</strong> {{ unterstuetzung.ausgezahlt_von.get_full_name }}
            </div>
            {% endif %}
          </div>
        </div>
        {% endif %}

        <!-- Recurring Payment Information -->
        {% if unterstuetzung.wiederkehrend_von %}
        <div class="alert alert-info mb-4">
          <h6 class="alert-heading mb-2"><i class="fas fa-sync-alt me-2"></i>Wiederkehrende Zahlung</h6>
          <p class="mb-2">Diese Zahlung wurde automatisch aus einer wiederkehrenden Vorlage generiert.</p>
          <div class="row">
            <div class="col-md-4">
              <strong>Intervall:</strong> {{ unterstuetzung.wiederkehrend_von.get_intervall_display }}
            </div>
            <div class="col-md-4">
              <strong>Erste Zahlung:</strong> {{ unterstuetzung.wiederkehrend_von.erste_zahlung_am|date:"d.m.Y" }}
            </div>
            <div class="col-md-4">
              <strong>Nächste Generierung:</strong> {{ unterstuetzung.wiederkehrend_von.naechste_generierung|date:"d.m.Y" }}
            </div>
          </div>
        </div>
        {% endif %}

        <!-- Meta Information -->
        <div class="row mb-4">
          <div class="col-md-6">
            <h6 class="text-muted mb-2">Erstellt am</h6>
            <p class="mb-0">{{ unterstuetzung.erstellt_am|date:"d.m.Y H:i" }}</p>
          </div>
          <div class="col-md-6">
            <h6 class="text-muted mb-2">Zuletzt aktualisiert</h6>
            <p class="mb-0">{{ unterstuetzung.aktualisiert_am|date:"d.m.Y H:i" }}</p>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="d-flex justify-content-between mt-4">
          <div>
            <a href="{% url 'stiftung:unterstuetzungen_all' %}" class="btn btn-secondary">
              <i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
            </a>
            <a href="{% url 'stiftung:destinataer_detail' pk=unterstuetzung.destinataer.pk %}" class="btn btn-outline-primary ms-2">
              <i class="fas fa-user me-2"></i>Destinatär anzeigen
            </a>
          </div>
          <div>
            <a href="{% url 'stiftung:unterstuetzung_edit' pk=unterstuetzung.pk %}" class="btn btn-warning me-2">
              <i class="fas fa-edit me-2"></i>Bearbeiten
            </a>
            {% if can_mark_paid %}
              <a href="{% url 'stiftung:unterstuetzung_mark_paid' pk=unterstuetzung.pk %}" class="btn btn-success me-2">
                <i class="fas fa-check me-2"></i>Als bezahlt markieren
              </a>
            {% endif %}
            <a href="{% url 'stiftung:unterstuetzung_delete' pk=unterstuetzung.pk %}" class="btn btn-danger">
              <i class="fas fa-trash me-2"></i>Löschen
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}