{{ block title }}Angaben zu Ihrer Person{{ endblock }}

{{ block content }}

<meta name="viewport" content="width=device-width, initial-scale=1">

<div style="max-width: 700px; margin: 0 auto 20px auto;">
    <div style="background: #e9ecef; border-radius: 10px; height: 8px;">
        <div style="background: #007bff; width: 95%; height: 8px; border-radius: 10px;"></div>
    </div>
</div>

<p>Bitte beantworten Sie abschließend einige Fragen zu Ihrer Person. Ihre Angaben werden anonym behandelt.</p>

<style>
.demo-item { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.demo-label { font-weight: bold; margin-bottom: 10px; display: block; }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-group label { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: normal; }
.scale-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 6px; width: 100%; }
.scale-row label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.9em; color: #444; cursor: pointer; flex: 1; text-align: center; }
.scale-row input[type="radio"] { cursor: pointer; width: 20px; height: 20px; }
.scale-ends { display: flex; justify-content: space-between; font-size: 0.8em; color: gray; }
.section-title { font-size: 1.1em; font-weight: bold; color: #007bff; margin: 25px 0 10px 0; border-bottom: 2px solid #007bff; padding-bottom: 5px; text-align: center; }
.text-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95em; box-sizing: border-box; margin-top: 8px; }
</style>

<div class="section-title">Allgemeine Angaben</div>

<div class="demo-item">
    <span class="demo-label">Alter</span>
    <input type="number" name="age" min="16" max="80" placeholder="z.B. 23"
        style="padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; width: 120px; font-size: 1em;">
</div>

<div class="demo-item">
    <span class="demo-label">Geschlecht</span>
    <div class="radio-group">
        <label><input type="radio" name="gender" value="männlich"> Männlich</label>
        <label><input type="radio" name="gender" value="weiblich"> Weiblich</label>
        <label><input type="radio" name="gender" value="divers"> Divers</label>
        <label><input type="radio" name="gender" value="keine_angabe"> Keine Angabe</label>
    </div>
</div>

<div class="demo-item">
    <span class="demo-label">Höchster Bildungsabschluss</span>
    <div class="radio-group">
        <label><input type="radio" name="field_of_study" value="kein_abschluss"> Kein Schulabschluss</label>
        <label><input type="radio" name="field_of_study" value="hauptschule"> Hauptschulabschluss</label>
        <label><input type="radio" name="field_of_study" value="realschule"> Mittlere Reife / Realschulabschluss</label>
        <label><input type="radio" name="field_of_study" value="abitur"> (Fach-)Abitur</label>
        <label><input type="radio" name="field_of_study" value="ausbildung"> Berufsausbildung / Lehre</label>
        <label><input type="radio" name="field_of_study" value="meister"> Meister / Techniker / Fachwirt</label>
        <label><input type="radio" name="field_of_study" value="bachelor"> Bachelor / FH-Abschluss</label>
        <label><input type="radio" name="field_of_study" value="master"> Master / Diplom / Promotion</label>
    </div>
</div>


<div class="demo-item">
    <span class="demo-label">Beschäftigungsstatus</span>
    <div class="radio-group">
        <label><input type="radio" name="employment_status" value="student"> Student*in</label>
        <label><input type="radio" name="employment_status" value="ausbildung"> In Berufsausbildung</label>
        <label><input type="radio" name="employment_status" value="employed"> Erwerbstätig</label>
        <label><input type="radio" name="employment_status" value="self_employed"> Selbstständig</label>
        <label><input type="radio" name="employment_status" value="job_seeking"> Arbeitssuchend</label>
        <label><input type="radio" name="employment_status" value="retired"> Rentner*in / Nicht erwerbstätig</label>
    </div>
</div>

<div class="section-title">Verlosung</div>

<div class="demo-item" style="background: #fff8e1; border: 1px solid #ffc107;">
    <p style="margin: 0 0 12px 0; font-size: 0.92em;">Unter allen Teilnehmenden werden <strong>3 × 15 € „Wunschgutschein"</strong> verlost. Zur Teilnahme können Sie freiwillig Ihre E-Mail-Adresse angeben.</p>
    <label style="display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: normal; margin-bottom: 14px;">
        <input type="checkbox" id="email-consent-check" style="margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0;">
        <span style="font-size: 0.88em; color: #444;">Ich willige ein, dass meine E-Mail-Adresse ausschließlich zur Gewinnbenachrichtigung gespeichert und nach Abschluss der Verlosung unwiderruflich gelöscht wird (DSGVO Art. 6 Abs. 1 lit. a). Diese Einwilligung ist freiwillig und hat keinen Einfluss auf meine Studienteilnahme.</span>
    </label>
    <div id="email-field-wrap" style="display: none;">
        <span class="demo-label" style="margin-bottom: 6px;">E-Mail-Adresse</span>
        <input type="email" id="email-input" placeholder="z.B. max.mustermann@email.de"
            class="text-input" style="margin-top: 0;" disabled>
    </div>
</div>

<div class="section-title">KI-Nutzung</div>

<div class="demo-item">
    <span class="demo-label">Wie häufig nutzen Sie KI-Tools wie ChatGPT, Claude oder ähnliche im Alltag?</span>
    <div class="scale-row" style="margin-top: 10px;">
        <label><input type="radio" name="ai_familiarity" value="1">1</label>
        <label><input type="radio" name="ai_familiarity" value="2">2</label>
        <label><input type="radio" name="ai_familiarity" value="3">3</label>
        <label><input type="radio" name="ai_familiarity" value="4">4</label>
        <label><input type="radio" name="ai_familiarity" value="5">5</label>
    </div>
    <div class="scale-ends"><span>nie</span><span>täglich</span></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const consentCheck = document.getElementById('email-consent-check');
    const emailWrap = document.getElementById('email-field-wrap');
    const emailInput = document.getElementById('email-input');
    consentCheck.addEventListener('change', function() {
        emailWrap.style.display = this.checked ? 'block' : 'none';
        emailInput.disabled = !this.checked;
        if (!this.checked) emailInput.value = '';
    });

    const form = document.querySelector('form');
    let emailSubmitted = false;
    if (form) {
        form.addEventListener('submit', function(e) {
            const required = ['gender', 'field_of_study', 'employment_status'];
            if (document.querySelector('input[name="ai_familiarity"]')) required.push('ai_familiarity');
            let missing = false;

            required.forEach(name => {
                if (!document.querySelector(`input[name="${name}"]:checked`)) missing = true;
            });

            const age = document.querySelector('input[name="age"]').value;
            if (!age) missing = true;

            if (missing) {
                e.preventDefault();
                e.stopImmediatePropagation();
                let msg = document.getElementById('error-msg');
                if (!msg) {
                    msg = document.createElement('div');
                    msg.id = 'error-msg';
                    msg.style.cssText = 'background:#f8d7da; color:#842029; padding:15px; border-radius:8px; margin:20px 0; border:1px solid #f5c2c7; font-weight:bold;';
                    msg.innerHTML = '⚠️ Bitte beantworten Sie alle Pflichtfragen bevor Sie fortfahren.';
                    form.insertBefore(msg, form.lastElementChild);
                }
                msg.scrollIntoView({behavior: 'smooth'});
                return false;
            }

            const emailVal = emailInput.value.trim();
            if (emailVal && !emailSubmitted) {
                e.preventDefault();
                emailSubmitted = true;
                liveSend({ type: 'email', email: emailVal });
                setTimeout(() => form.submit(), 400);
            }
        });
    }
});
</script>

<button type="submit" class="btn btn-primary otree-btn-next" style="width: 100%; padding: 13px; font-size: 1.05em; border-radius: 8px; margin-top: 10px;">Weiter →</button>

{{ endblock }}