{{ block title }}Abschlussbefragung ({{ if player.treatment == 'treatment' }}1/3{{ else }}1/2{{ endif }}){{ 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: 78%; height: 8px; border-radius: 10px;"></div>
    </div>
</div>

<p style="color:#28a745; font-weight:bold; margin-bottom:4px;">✓ Verhandlung abgeschlossen – fast geschafft!</p>
<p>Bitte beantworten Sie die folgenden Fragen auf einer Skala von 1 bis 5.</p>
<p style="color: gray; font-size: 0.9em;">1 = stimme gar nicht zu &nbsp;&nbsp; 5 = stimme voll zu</p>

<style>
.survey-item { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.survey-label { font-weight: bold; margin-bottom: 20px; display: block; }
.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; }
.section-subtitle { font-size: 0.85em; color: gray; margin: -5px 0 12px 0; }
@media (max-width: 480px) {
    .scale-row label { font-size: 0.78em; gap: 4px; }
    .scale-row input[type="radio"] { width: 16px; height: 16px; }
    .scale-ends { font-size: 0.72em; }
    .survey-item { padding: 12px 10px; }
}
</style>

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

<div class="survey-item">
    <span class="survey-label">Ich bin zufrieden mit meinem Verhandlungsergebnis.</span>
    <div class="scale-row">
        <label><input type="radio" name="satisfaction" value="1">1</label>
        <label><input type="radio" name="satisfaction" value="2">2</label>
        <label><input type="radio" name="satisfaction" value="3">3</label>
        <label><input type="radio" name="satisfaction" value="4">4</label>
        <label><input type="radio" name="satisfaction" value="5">5</label>
    </div>
    <div class="scale-ends"><span>stimme gar nicht zu</span><span>stimme voll zu</span></div>
</div>

<div class="section-title">Verhandlungsprozess</div>
<p class="section-subtitle">Diese Fragen beziehen sich auf den Ablauf des Gesprächs mit Sandra Richter.</p>

<div class="survey-item">
    <span class="survey-label">Die Verhandlung verlief fair.</span>
    <div class="scale-row">
        <label><input type="radio" name="svi_process_fair" value="1">1</label>
        <label><input type="radio" name="svi_process_fair" value="2">2</label>
        <label><input type="radio" name="svi_process_fair" value="3">3</label>
        <label><input type="radio" name="svi_process_fair" value="4">4</label>
        <label><input type="radio" name="svi_process_fair" value="5">5</label>
    </div>
    <div class="scale-ends"><span>stimme gar nicht zu</span><span>stimme voll zu</span></div>
</div>

<div class="survey-item">
    <span class="survey-label">Ich fühlte mich von Sandra Richter respektiert.</span>
    <div class="scale-row">
        <label><input type="radio" name="svi_process_respected" value="1">1</label>
        <label><input type="radio" name="svi_process_respected" value="2">2</label>
        <label><input type="radio" name="svi_process_respected" value="3">3</label>
        <label><input type="radio" name="svi_process_respected" value="4">4</label>
        <label><input type="radio" name="svi_process_respected" value="5">5</label>
    </div>
    <div class="scale-ends"><span>stimme gar nicht zu</span><span>stimme voll zu</span></div>
</div>

<div class="survey-item">
    <span class="survey-label">Ich hatte das Gefühl, dass meine Argumente gehört wurden.</span>
    <div class="scale-row">
        <label><input type="radio" name="svi_process_heard" value="1">1</label>
        <label><input type="radio" name="svi_process_heard" value="2">2</label>
        <label><input type="radio" name="svi_process_heard" value="3">3</label>
        <label><input type="radio" name="svi_process_heard" value="4">4</label>
        <label><input type="radio" name="svi_process_heard" value="5">5</label>
    </div>
    <div class="scale-ends"><span>stimme gar nicht zu</span><span>stimme voll zu</span></div>
</div>

<div class="survey-item">
    <span class="survey-label">Sandra Richter hat meine Wünsche und Bedürfnisse berücksichtigt.</span>
    <div class="scale-row">
        <label><input type="radio" name="svi_process_needs" value="1">1</label>
        <label><input type="radio" name="svi_process_needs" value="2">2</label>
        <label><input type="radio" name="svi_process_needs" value="3">3</label>
        <label><input type="radio" name="svi_process_needs" value="4">4</label>
        <label><input type="radio" name="svi_process_needs" value="5">5</label>
    </div>
    <div class="scale-ends"><span>stimme gar nicht zu</span><span>stimme voll zu</span></div>
</div>

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

<div class="survey-item">
    <span class="survey-label">Wie realistisch hat sich diese Verhandlungssimulation für Sie angefühlt?</span>
    <div class="scale-row">
        <label><input type="radio" name="perceived_realism" value="1">1</label>
        <label><input type="radio" name="perceived_realism" value="2">2</label>
        <label><input type="radio" name="perceived_realism" value="3">3</label>
        <label><input type="radio" name="perceived_realism" value="4">4</label>
        <label><input type="radio" name="perceived_realism" value="5">5</label>
    </div>
    <div class="scale-ends"><span>Überhaupt nicht realistisch</span><span>Sehr realistisch</span></div>
</div>

<div class="survey-item">
    <span class="survey-label">Welches Einstiegsgehalt hat Sandra Richter Ihnen zu Beginn der Verhandlung angeboten?</span>
    <div style="display: flex; justify-content: space-between; margin-top: 8px;">
        <label style="cursor: pointer; font-weight: normal; flex: 1; text-align: center;"><input type="radio" name="attention_check" value="wrong1"> 40.000 €</label>
        <label style="cursor: pointer; font-weight: normal; flex: 1; text-align: center;"><input type="radio" name="attention_check" value="correct"> 44.000 €</label>
        <label style="cursor: pointer; font-weight: normal; flex: 1; text-align: center;"><input type="radio" name="attention_check" value="wrong2"> 48.000 €</label>
        <label style="cursor: pointer; font-weight: normal; flex: 1; text-align: center;"><input type="radio" name="attention_check" value="wrong3"> 52.000 €</label>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const required = ['perceived_realism',
                              'satisfaction',
                              'svi_process_fair', 'svi_process_respected',
                              'svi_process_heard', 'svi_process_needs',
                              'attention_check'];
            let missing = false;
            required.forEach(name => {
                if (!document.querySelector(`input[name="${name}"]:checked`)) 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 Fragen bevor Sie fortfahren.';
                    form.insertBefore(msg, form.lastElementChild);
                }
                msg.scrollIntoView({behavior: 'smooth'});
                return false;
            }
        });
    }
});
</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 }}