{% extends "portal/onboarding_basis.html" %}
{% block title %}Schritt 5: Zusammenfassung & Dokumente{% endblock %}
{% block fortschritt %}
<div class="fortschritt-bar"><div class="fortschritt-fill" style="width:100%"></div></div>
<p class="fortschritt-label">Schritt 5 von 5 – Zusammenfassung, Dokumente &amp; Bestätigung</p>
{% endblock %}
{% block inhalt %}
<div class="card mb-3">
  <div class="card-header py-3">
    <h2>Schritt 5: Zusammenfassung, Dokumente &amp; Bestätigung</h2>
  </div>
  <div class="card-body">
    {% if fehler %}
    <div class="alert alert-danger">{{ fehler }}</div>
    {% endif %}

    <h5>Ihre Angaben im Überblick</h5>

    {% if data.schritt2 %}
    <div class="table-responsive mb-3">
      <table class="table table-sm table-bordered">
        <tr><th class="table-light w-40">Name</th><td>{{ data.schritt2.vorname }} {{ data.schritt2.nachname }}</td></tr>
        <tr><th class="table-light">Geburtsdatum</th><td>{{ data.schritt2.geburtsdatum }}</td></tr>
        <tr><th class="table-light">Adresse</th><td>{{ data.schritt2.strasse }}, {{ data.schritt2.plz }} {{ data.schritt2.ort }}</td></tr>
        <tr><th class="table-light">E-Mail</th><td>{{ data.schritt2.email }}</td></tr>
        <tr><th class="table-light">Telefon</th><td>{{ data.schritt2.telefon }}{% if data.schritt2.handynummer %} / {{ data.schritt2.handynummer }}{% endif %}</td></tr>
        <tr><th class="table-light">Verwandtschaft</th><td>{{ data.schritt2.verwandtschaftsverhaeltnis }}</td></tr>
      </table>
    </div>
    {% endif %}

    {% if data.schritt3 %}
    <div class="table-responsive mb-3">
      <table class="table table-sm table-bordered">
        <tr><th class="table-light w-40">In Ausbildung/Studium</th><td>{% if data.schritt3.in_ausbildung %}Ja{% else %}Nein{% endif %}</td></tr>
        {% if data.schritt3.in_ausbildung %}
        <tr><th class="table-light">Art</th><td>{{ data.schritt3.ausbildungsart }}</td></tr>
        <tr><th class="table-light">Institution</th><td>{{ data.schritt3.institution }}</td></tr>
        <tr><th class="table-light">Voraussichtl. Ende</th><td>{{ data.schritt3.voraussichtliche_dauer }}</td></tr>
        {% endif %}
      </table>
    </div>
    {% endif %}

    {% if data.schritt4 %}
    <div class="table-responsive mb-3">
      <table class="table table-sm table-bordered">
        <tr><th class="table-light w-40">Haushaltstyp</th><td>{{ data.schritt4.haushaltstyp }}</td></tr>
        <tr><th class="table-light">Haushaltspersonen</th><td>{{ data.schritt4.haushaltsgroesse|default:"–" }}</td></tr>
        <tr><th class="table-light">Monatl. Bezüge</th><td>{{ data.schritt4.monatliche_bezuege|default:"–" }} €</td></tr>
        <tr><th class="table-light">Art der Bezüge</th><td>{{ data.schritt4.bezuege_art|default:"–" }}</td></tr>
        <tr><th class="table-light">Unterhalt</th><td>{{ data.schritt4.unterhalt|default:"–" }}</td></tr>
        <tr><th class="table-light">Miete &amp; Heizung</th><td>{{ data.schritt4.miete_heizung|default:"–" }} €</td></tr>
        <tr><th class="table-light">Vermögen</th><td>{{ data.schritt4.vermoegen|default:"–" }} €</td></tr>
        <tr><th class="table-light">Lebensunterhalt</th><td>{{ data.schritt4.lebensunterhalt_aufwendungen|default:"–" }} €</td></tr>
      </table>
    </div>
    {% endif %}

    <hr class="my-4">
    <h5>Dokumente hochladen</h5>
    <p class="text-muted small">Laden Sie alle relevanten Nachweise hoch (Punkt 2, 3, 5, 8–10 des Merkblatts). Erlaubte Formate: PDF, JPG, PNG, TIFF – max. 20 MB je Datei.</p>

    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}

      <div class="mb-3">
        <label class="form-label">Personalausweis (Vorder- und Rückseite) oder Reisepass (Punkt 2)</label>
        <input type="file" class="form-control" name="ausweis" accept=".pdf,.jpg,.jpeg,.png,.tiff">
      </div>
      <div class="mb-3">
        <label class="form-label">Tabellarischer Lebenslauf (Punkt 3)</label>
        <input type="file" class="form-control" name="lebenslauf" accept=".pdf,.jpg,.jpeg,.png">
      </div>
      <div class="mb-3">
        <label class="form-label">Studienbescheinigung / Ausbildungsnachweis (Punkt 5, falls zutreffend)</label>
        <input type="file" class="form-control" name="studienbescheinigung" accept=".pdf,.jpg,.jpeg,.png">
      </div>
      <div class="mb-3">
        <label class="form-label">Einkommensnachweis (Lohnabrechnung, Rentenbescheid, BAföG-Bescheid etc.) (Punkt 8)</label>
        <input type="file" class="form-control" name="einkommensnachweis" accept=".pdf,.jpg,.jpeg,.png">
      </div>
      <div class="mb-3">
        <label class="form-label">Mietvertrag (Punkt 10, falls zutreffend)</label>
        <input type="file" class="form-control" name="mietvertrag" accept=".pdf,.jpg,.jpeg,.png">
      </div>
      <div class="mb-4">
        <label class="form-label">Weitere Belege</label>
        <input type="file" class="form-control" name="weitere_belege" multiple accept=".pdf,.jpg,.jpeg,.png,.tiff">
        <div class="form-text">Mehrfachauswahl möglich.</div>
      </div>

      <hr class="my-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="finale_bestaetigung" id="finale_bestaetigung" required>
        <label class="form-check-label" for="finale_bestaetigung">
          Ich bestätige, dass alle obigen Angaben vollständig und wahrheitsgemäß sind. Ich bin mir bewusst, dass falsche Angaben zur Einstellung der Förderung und rechtlichen Konsequenzen führen können. <span class="required-mark">*</span>
        </label>
      </div>

      <div class="d-flex justify-content-between mt-4">
        <button type="submit" name="aktion" value="zurueck" class="btn btn-outline-secondary btn-zurueck">← Zurück</button>
        <button type="submit" class="btn btn-success px-4">Antrag einreichen ✓</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}