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


</style>
{{ endblock }}

{{ block content }}
<p style="color:#6b7280; font-size:.95rem; margin-bottom:12px;">
    Please indicate to what extent you agree with the following statements.
</p>

<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>



<!-- Single hidden field: all responses as JSON blob -->
<input type="hidden" id="id_SUP_data" name="SUP_data" value="{}">

<!-- Virtual pages rendered by JS -->
<div class="exp-card" id="vpage-container"></div>

<script type="application/json" id="items-data">{{ SUP_items }}</script>

<script>
// ── Items and shuffled pages ──────────────────────────────────────────────────
const ALL_ITEMS = JSON.parse(document.getElementById('items-data').textContent);

function shuffle(arr) {
    const a = arr.slice();
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

// Persist order across reloads
let shuffled;
try {
    const stored = sessionStorage.getItem('sup_item_order');
    if (stored) {
        const storedIds = JSON.parse(stored);
        shuffled = storedIds.map(id => ALL_ITEMS.find(i => i.id === id));
    } else {
        shuffled = shuffle(ALL_ITEMS);
        sessionStorage.setItem('sup_item_order', JSON.stringify(shuffled.map(i => i.id)));
    }
} catch(e) {
    shuffled = shuffle(ALL_ITEMS);
}

const PAGES = [
    shuffled.slice(0, 6),
    shuffled.slice(6, 12),
    shuffled.slice(12, 18),
];

const SCALE = [
    {value: 1, label: '1 — Do not agree at all'},
    {value: 2, label: '2'},
    {value: 3, label: '3'},
    {value: 4, label: '4'},
    {value: 5, label: '5'},
    {value: 6, label: '6'},
    {value: 7, label: '7 — Completely agree'},
];

let currentPage = 0;
const responses = {};   // { item_id: value }

// ── Render a virtual page ─────────────────────────────────────────────────────
function renderPage(pageIdx) {
    const container = document.getElementById('vpage-container');
    container.innerHTML = '';

    PAGES[pageIdx].forEach(item => {
        const block = document.createElement('div');
        block.className = 'q-block';
        block.dataset.fieldBlock = item.id;

        const p = document.createElement('p');
        p.innerHTML = '<strong>' + item.text + '</strong>';
        block.appendChild(p);

        const table = document.createElement('table');
        table.className = 'sc-table';
        const tr = document.createElement('tr');

        SCALE.forEach(s => {
            const td = document.createElement('td');
            td.className = 'sc-cell';
            td.dataset.field = item.id;
            td.dataset.value = String(s.value);
            td.onclick = function() { scSelect(this); };

            const btn = document.createElement('div');
            btn.className = 'sc-btn';
            td.appendChild(btn);

            const lbl = document.createElement('span');
            lbl.className = 'sc-lbl';
            lbl.textContent = s.label;
            td.appendChild(lbl);

            // Restore selection if already answered
            if (responses[item.id] !== undefined &&
                responses[item.id] === s.value) {
                td.classList.add('selected');
            }

            tr.appendChild(td);
        });

        table.appendChild(tr);
        block.appendChild(table);
        container.appendChild(block);
    });


    // Update button label
    document.getElementById('btn-next').textContent =
        pageIdx === 2 ? 'Submit →' : 'Next →';

    // Clear error banner when changing pages
    document.getElementById('error-banner').style.display = 'none';

    window.scrollTo({top: 0, behavior: 'smooth'});
}

// ── Selection handler ─────────────────────────────────────────────────────────
function scSelect(cell) {
    const field = cell.dataset.field;
    const val   = parseInt(cell.dataset.value);
    cell.closest('tr').querySelectorAll('.sc-cell').forEach(c => {
        c.classList.remove('selected');
    });
    cell.classList.add('selected');
    responses[field] = val;

    // Clear error on this block
    const block = cell.closest('[data-field-block]');
    if (block) {
        block.style.border = '';
        block.style.background = '';
        const msg = block.querySelector('.q-err-msg');
        if (msg) msg.remove();
    }
}

// ── Validation and advance ────────────────────────────────────────────────────
function showErrors(missingIds) {
    document.querySelectorAll('[data-field-block]').forEach(b => {
        b.style.border = '';
        b.style.background = '';
        const old = b.querySelector('.q-err-msg');
        if (old) old.remove();
    });
    if (!missingIds.length) return;
    document.getElementById('error-banner').style.display = '';
    missingIds.forEach(id => {
        const block = document.querySelector('[data-field-block="' + id + '"]');
        if (!block) return;
        block.style.border = '2px solid #c0392b';
        block.style.background = '#fdf2f2';
        block.style.borderRadius = '6px';
        if (!block.querySelector('.q-err-msg')) {
            const msg = document.createElement('p');
            msg.className = 'q-err-msg';
            msg.textContent = '\u26a0 Please answer this question before continuing.';
            block.appendChild(msg);
        }
    });
    const first = document.querySelector('[data-field-block="' + missingIds[0] + '"]');
    if (first) first.scrollIntoView({behavior: 'smooth', block: 'center'});
    else document.getElementById('error-banner').scrollIntoView({behavior: 'smooth'});
}

document.addEventListener('DOMContentLoaded', () => {
    renderPage(0);

    document.getElementById('btn-next').addEventListener('click', () => {
        // Check all items on current page are answered
        const missing = PAGES[currentPage]
            .filter(item => responses[item.id] === undefined)
            .map(item => item.id);

        if (missing.length > 0) {
            showErrors(missing);
            return;
        }

        if (currentPage < 2) {
            currentPage++;
            renderPage(currentPage);
        } else {
            // Save item order and all responses into the JSON blob
            document.getElementById('id_SUP_data').value =
                JSON.stringify({
                    item_order: shuffled.map(i => i.id),
                    responses:  responses,
                });
            document.querySelector('form').submit();
        }
    });
});
</script>

<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; font-size:1rem; cursor:pointer;">
        Next →
    </button>
</div>


{{ endblock }}