{% extends "portal/onboarding_basis.html" %}
{% block title %}Schritt 3: Ausbildung/Studium{% endblock %}
{% block fortschritt %}
<div class="fortschritt-bar"><div class="fortschritt-fill" style="width:60%"></div></div>
<p class="fortschritt-label">Schritt 3 von 5 – Ausbildung &amp; Studium</p>
{% endblock %}
{% block inhalt %}
<div class="card mb-3">
  <div class="card-header py-3">
    <h2>Schritt 3: Ausbildung &amp; Studium</h2>
  </div>
  <div class="card-body">
    {% if fehler %}
    <div class="alert alert-danger">{{ fehler }}</div>
    {% endif %}
    <p class="text-muted small">(Merkblatt Punkte 5–6)</p>

    <form method="post">
      {% csrf_token %}

      <div class="mb-4">
        <label class="form-label fw-bold">Befinden Sie sich derzeit in einer Ausbildung oder einem Studium? <span class="required-mark">*</span></label>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="in_ausbildung" id="ausbildung_ja" value="ja"
            {% if data.schritt3.in_ausbildung %}checked{% endif %}>
          <label class="form-check-label" for="ausbildung_ja">Ja</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="in_ausbildung" id="ausbildung_nein" value="nein"
            {% if data.schritt3.in_ausbildung == False or not data.schritt3 %}checked{% endif %}>
          <label class="form-check-label" for="ausbildung_nein">Nein</label>
        </div>
      </div>

      <div id="ausbildung-felder">
        <div class="mb-3">
          <label for="ausbildungsart" class="form-label">Art der Ausbildung / des Studiums (Punkt 5)</label>
          <select class="form-select" id="ausbildungsart" name="ausbildungsart">
            <option value="">– bitte wählen –</option>
            <option value="studium" {% if data.schritt3.ausbildungsart == 'studium' %}selected{% endif %}>Studium (Universität/FH)</option>
            <option value="berufsausbildung" {% if data.schritt3.ausbildungsart == 'berufsausbildung' %}selected{% endif %}>Berufsausbildung</option>
            <option value="berufsschule" {% if data.schritt3.ausbildungsart == 'berufsschule' %}selected{% endif %}>Berufsschule</option>
            <option value="promotionsstudium" {% if data.schritt3.ausbildungsart == 'promotionsstudium' %}selected{% endif %}>Promotionsstudium</option>
            <option value="weiterbildung" {% if data.schritt3.ausbildungsart == 'weiterbildung' %}selected{% endif %}>Berufliche Weiterbildung</option>
            <option value="sonstiges" {% if data.schritt3.ausbildungsart == 'sonstiges' %}selected{% endif %}>Sonstiges</option>
          </select>
        </div>

        <div class="mb-3">
          <label for="institution" class="form-label">Name der Hochschule / Ausbildungsstätte</label>
          <input type="text" class="form-control" id="institution" name="institution"
            value="{{ data.schritt3.institution|default:'' }}"
            placeholder="z.B. Universität Münster, IHK Duisburg">
        </div>

        <div class="mb-3">
          <label for="voraussichtliche_dauer" class="form-label">Voraussichtliches Ende der Ausbildung / des Studiums (Punkt 6)</label>
          <input type="text" class="form-control" id="voraussichtliche_dauer" name="voraussichtliche_dauer"
            value="{{ data.schritt3.voraussichtliche_dauer|default:'' }}"
            placeholder="z.B. Sommersemester 2027 oder 08/2026">
          <div class="form-text">Bitte Semester oder Monat/Jahr angeben.</div>
        </div>
      </div>

      <div class="hinweis-box mt-3">
        <strong>Hinweis:</strong> Studienbescheinigungen und Ausbildungsnachweise können Sie im nächsten Schritt (Dokumente-Upload) hochladen.
      </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-primary btn-weiter px-4">Weiter →</button>
      </div>
    </form>
  </div>
</div>

<script>
  function toggleAusbildungsFelder() {
    const ja = document.getElementById('ausbildung_ja').checked;
    document.getElementById('ausbildung-felder').style.opacity = ja ? '1' : '0.4';
  }
  document.getElementById('ausbildung_ja').addEventListener('change', toggleAusbildungsFelder);
  document.getElementById('ausbildung_nein').addEventListener('change', toggleAusbildungsFelder);
  toggleAusbildungsFelder();
</script>
{% endblock %}