{% block title %}Questionnaire{% 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:24px; padding-bottom:20px; border-bottom:1px solid #f0ede8; }
.q-block:last-child { border-bottom:none; }
.q-block > p { margin-bottom:6px; line-height:1.55; }
.q-err-msg { color:#c0392b; font-size:.9rem; margin-top:6px; margin-bottom:0; }
</style>
{{ endblock }}

{% block content %}

<div id="error-banner" style="display:none; background:#fdf2f2; border:1px solid #e8b4b4;
     color:#c0392b; padding:12px 16px; border-radius:6px; margin-bottom:20px; font-size:.95rem;">
    &#9888; Not all questions have been answered. Please have a look at the questions highlighted below.
</div>

<div class="exp-card">
    <p style="color:#6b7280; font-size:.95rem; margin-bottom:16px;">You will now fill in some questionnaires.</p>
    <p><strong>Please indicate how much you agree or disagree with each of the following statements.</strong></p>
    <div id="maj-container">
    <div class="q-block" data-field-block="maj_q1">
        <p>As long as I have a few people who also do what I do, I do not care about others who do not do the same as I do.</p>
        <input type="hidden" name="maj_q1" id="hid_maj_q1" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q1" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q1" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q1' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q2">
        <p>The thought of a few people doing the opposite of what I do often makes me more hesitant about my actions.</p>
        <input type="hidden" name="maj_q2" id="hid_maj_q2" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q2" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q2" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q2' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q3">
        <p>If a few people do not contribute to public services, like taxes, then I also do not want to contribute.</p>
        <input type="hidden" name="maj_q3" id="hid_maj_q3" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q3" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q3" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q3' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q4">
        <p>In unfamiliar situations, I usually just follow the crowd until I know what to do.</p>
        <input type="hidden" name="maj_q4" id="hid_maj_q4" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q4" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q4" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q4' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q5">
        <p>I feel comfortable with my decision as long as most people around me make the same choice.</p>
        <input type="hidden" name="maj_q5" id="hid_maj_q5" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q5" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q5" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q5' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q6">
        <p>I am more concerned about being in line with the majority than about what any single individual thinks of me.</p>
        <input type="hidden" name="maj_q6" id="hid_maj_q6" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q6" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q6" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q6' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q7">
        <p>I tend to base my decisions on what the majority of people do, rather than on the behaviour of specific individuals.</p>
        <input type="hidden" name="maj_q7" id="hid_maj_q7" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q7" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q7" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q7' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q8">
        <p>I feel reassured in my choices when I know that most people around me would make the same decision.</p>
        <input type="hidden" name="maj_q8" id="hid_maj_q8" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q8" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q8" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q8' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q9">
        <p>I only start to question my behaviour when I notice that the majority of people around me would act differently.</p>
        <input type="hidden" name="maj_q9" id="hid_maj_q9" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q9" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q9" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q9' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q10">
        <p>Even if the majority does what I do, knowing that a few people do the opposite makes me uncomfortable.</p>
        <input type="hidden" name="maj_q10" id="hid_maj_q10" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q10" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q10" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q10' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q11">
        <p>I am more likely to change my behaviour when the majority does something other than me rather than when just a few people do.</p>
        <input type="hidden" name="maj_q11" id="hid_maj_q11" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q11" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q11" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q11' }}</div>
    </div>
    <div class="q-block" data-field-block="maj_q12">
        <p>I am comfortable going against the majority as long as at least a few others share my position.</p>
        <input type="hidden" name="maj_q12" id="hid_maj_q12" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="maj_q12" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="maj_q12" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'maj_q12' }}</div>
    </div>
    <div class="q-block" data-field-block="attention_check_maj">
        <p>To show that you are paying attention, please select number 3.</p>
        <input type="hidden" name="attention_check_maj" id="hid_attention_check_maj" value="">
        <table class="sc-table"><tr>
            <td class="sc-cell" data-field="attention_check_maj" data-value="1" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">1&nbsp;&mdash;&nbsp;Completely disagree</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="2" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">2</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="3" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">3</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="4" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">4</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="5" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">5</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="6" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">6</span></td>
            <td class="sc-cell" data-field="attention_check_maj" data-value="7" onclick="scSelect(this)"><div class="sc-btn"></div><span class="sc-lbl">7&nbsp;&mdash;&nbsp;Completely agree</span></td>
        </tr></table>
        <div style="display:none">{{ formfield_errors 'attention_check_maj' }}</div>
    </div>
    </div><!-- end maj-container -->
</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    <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>
var MAJ_REQUIRED = ['maj_q1','maj_q2','maj_q3','maj_q4','maj_q5','maj_q6','maj_q7','maj_q8','maj_q9','maj_q10','maj_q11','maj_q12'];

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;
    // Clear error state on this block when answered
    var block = cell.closest('[data-field-block]');
    if (block) {
        block.style.border = '';
        block.style.background = '';
        var msg = block.querySelector('.q-err-msg');
        if (msg) msg.remove();
    }
}

function showErrors(missing) {
    // Clear previous errors
    document.querySelectorAll('[data-field-block]').forEach(function(b) {
        b.style.border = '';
        b.style.background = '';
        var old = b.querySelector('.q-err-msg');
        if (old) old.remove();
    });
    if (!missing.length) return;

    document.getElementById('error-banner').style.display = '';

    missing.forEach(function(f) {
        var block = document.querySelector('[data-field-block="' + f + '"]');
        if (!block) return;
        block.style.border     = '2px solid #c0392b';
        block.style.background = '#fdf2f2';
        block.style.borderRadius = '6px';
        if (!block.querySelector('.q-err-msg')) {
            var msg = document.createElement('p');
            msg.className = 'q-err-msg';
            msg.textContent = '\u26a0 Please answer this question before continuing.';
            block.appendChild(msg);
        }
    });

    var first = document.querySelector('[data-field-block="' + missing[0] + '"]');
    if (first) first.scrollIntoView({behavior:'smooth', block:'center'});
    else document.getElementById('error-banner').scrollIntoView({behavior:'smooth'});
}

document.getElementById('btn-next').addEventListener('click', function () {
    var missing = MAJ_REQUIRED.filter(function(f) {
        var hid = document.getElementById('hid_' + f);
        return !hid || hid.value === '';
    });
    if (missing.length > 0) {
        showErrors(missing);
        return;
    }
    document.querySelector('form').submit();
});

window.addEventListener('DOMContentLoaded', function() {
    function reorder(containerId, order) {
        var container = document.getElementById(containerId);
        if (!container || !order || !order.length) return;
        order.forEach(function(field) {
            var block = container.querySelector('[data-field-block="' + field + '"]');
            if (block) container.appendChild(block);
        });
    }
    reorder('maj-container', {{maj_order_json}});
});
</script>
{% endblock %}