{{ block title }}About You{{ endblock }}

{{ block styles }}
<style>
.sc-table { border-collapse:collapse; width:100%; margin-top:12px; table-layout:fixed; }
.sc-table td.sc-cell { text-align:center; vertical-align:top; padding:4px 2px; cursor:pointer; user-select:none; width:1%; }
.sc-table td.sc-cell:hover .sc-btn { border-color:#2a6e7c; background:#e8f4f7; }
.sc-btn { width:18px; height:18px; border-radius:50%; border:2px solid #aaa; background:#fff; margin:0 auto 5px auto; transition:background .1s, border-color .1s; }
.sc-cell.selected .sc-btn { background:#2a6e7c; border-color:#2a6e7c; }
.sc-lbl { display:block; font-size:.78rem; color:#444; line-height:1.3; word-break:break-word; }
.q-block { margin-bottom:32px; }
.unanswered { outline:2px solid #e74c3c; border-radius:6px; padding:8px; }
/* Hide empty oTree labels — :empty fails if label contains whitespace */
.exp-card .col-form-label {
    display: none;
}
.exp-card ._formfield { margin-bottom:0 !important; }
/* Separation between question cards */
.exp-card { margin-top:32px; }
#submit-error {
    display:none; color:#c0392b; background:#fdf0ee;
    border:1px solid #e8b4ae; border-radius:6px;
    padding:10px 16px; margin-top:16px; font-size:.9rem;
}
</style>
{{ endblock }}

{{ block content }}

<div class="exp-card">
    <p>Finally, we have a few questions about you. Your answers are completely
    confidential and will only be used for research purposes.</p>
</div>

<div id="submit-error">&#9888; Please respond to all questions before continuing.</div>

<!-- Age -->
<div class="exp-card" id="block-age">
    <p><strong>What is your age? Please enter a number.</strong></p>
    <div style="margin-top:4px; max-width:120px;">
        {{ formfield 'demo_age' label='' }}
    </div>
</div>

<!-- Gender -->
<div class="exp-card" id="block-gender">
    <p><strong>What is your gender?</strong></p>
    <div style="margin-top:10px;">
        {{ formfield 'demo_gender' label='' }}
    </div>
    <div id="gender-self-wrap" style="display:none; margin-top:12px;">
        <p style="color:#6b7280; font-size:.9rem; margin-bottom:6px;">
            Please describe your gender:
        </p>
        {{ formfield 'demo_gender_self' label='' }}
    </div>
</div>

<!-- Education -->
<div class="exp-card" id="block-education">
    <p><strong>What is the highest level of education you have completed?</strong></p>
    <div style="margin-top:10px;">
        {{ formfield 'demo_education' label='' }}
    </div>
</div>

<!-- SES -->
<div class="exp-card" id="block-ses">
    <p><strong>Think of a ladder representing where people stand in society. At the top (10)
    are people who are best off — most money, most education, most respected jobs. At the
    bottom (1) are people who are worst off. Where would you place yourself on this
    ladder?</strong></p>
    <input type="hidden" name="demo_ses" id="hid_demo_ses" value="">
    <table class="sc-table"><tr>
        <td class="sc-cell" data-field="demo_ses" data-value="1"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Lowest</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="2"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="3"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="4"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="5"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="6"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="7"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="8"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">8</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="9"  onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">9</span></td>
        <td class="sc-cell" data-field="demo_ses" data-value="10" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">10&nbsp;&mdash;&nbsp;Highest</span></td>
    </tr></table>
    <div style="display:none">{{ formfield_errors 'demo_ses' }}</div>
</div>

<div style="display:flex; justify-content:flex-end; margin-top:32px;">
    <button type="button" id="btn-next"
            style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                   border-radius:8px; cursor:pointer; font-size:1rem;">
        Next &rarr;
    </button>
</div>

<script>
function scSelect(cell) {
    var field = cell.dataset.field;
    var val   = cell.dataset.value;
    cell.closest('tr').querySelectorAll('.sc-cell').forEach(function(c) {
        c.classList.remove('selected');
    });
    cell.classList.add('selected');
    var hid = document.getElementById('hid_' + field);
    if (hid) hid.value = val;
    document.getElementById('block-ses').classList.remove('unanswered');
    if (document.querySelectorAll('.unanswered').length === 0)
        document.getElementById('submit-error').style.display = 'none';
}

// Clear highlight when any native field changes
document.addEventListener('change', function(e) {
    if (e.target.name === 'demo_age')       document.getElementById('block-age').classList.remove('unanswered');
    if (e.target.name === 'demo_gender')    document.getElementById('block-gender').classList.remove('unanswered');
    if (e.target.name === 'demo_education') document.getElementById('block-education').classList.remove('unanswered');
    if (document.querySelectorAll('.unanswered').length === 0)
        document.getElementById('submit-error').style.display = 'none';
});

document.getElementById('btn-next').addEventListener('click', function () {
    var missing = [];

    // Age
    var age = document.querySelector('input[name="demo_age"]');
    if (!age || age.value === '')
        missing.push('block-age');

    // Gender
    var gender = document.querySelector('input[name="demo_gender"]:checked');
    if (!gender) {
        missing.push('block-gender');
    } else if (gender.value === 'self_describe') {
        var selfDesc = document.querySelector('input[name="demo_gender_self"], textarea[name="demo_gender_self"]');
        if (!selfDesc || selfDesc.value.trim() === '')
            missing.push('block-gender');
    }

    // Education
    var edu = document.querySelector('input[name="demo_education"]:checked');
    if (!edu) missing.push('block-education');

    // SES
    var ses = document.getElementById('hid_demo_ses');
    if (!ses || ses.value === '') missing.push('block-ses');

    if (missing.length > 0) {
        // Remove old highlights
        document.querySelectorAll('.unanswered').forEach(function(el) {
            el.classList.remove('unanswered');
        });
        // Add new highlights
        missing.forEach(function(id) {
            document.getElementById(id).classList.add('unanswered');
        });
        document.getElementById('submit-error').style.display = 'block';
        document.getElementById(missing[0]).scrollIntoView({behavior:'smooth', block:'center'});
        return;
    }

    document.querySelector('form').submit();
});

// Gender self-describe toggle
window.addEventListener('DOMContentLoaded', function() {
    function checkGender() {
        var radios = document.querySelectorAll('input[name="demo_gender"]');
        var val = '';
        radios.forEach(function(r) { if (r.checked) val = r.value; });
        document.getElementById('gender-self-wrap').style.display =
            val === 'self_describe' ? '' : 'none';
    }
    document.querySelectorAll('input[name="demo_gender"]').forEach(function(r) {
        r.addEventListener('change', checkGender);
    });
    checkGender();
});
</script>

{{ endblock }}