{% load otree %}

{{ block title }}Guess others' choices{{ endblock }}

{{ block content }}
<p>
    The more accurate your guess is, the higher payoff you receive (up to {{ C.BELIEF_PAYOFFS.0 }} {{ experimental_currency }}).
</p>
<style>
    .shell { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    .hdr   { font-weight: 400; margin: 6px 0 12px; }
    .muted { color:#666; }
    .center { text-align:center; }
    .hidden { display:none; }

    .pm-wrap { display:flex; justify-content:center; margin: 10px 0 18px; }

    table.pmatrix { border-collapse: collapse; border-spacing: 0; font-size: 16px; }
    .pmatrix thead th { border: 0; padding: 8px 14px; text-align: center; white-space: nowrap; font-weight: 700; }
    .pmatrix tbody td { border: 1.5px solid #9aa0a6; padding: 8px 14px; text-align: center; white-space: nowrap; background: #fff; }
    .pmatrix tbody th { border: 0; padding: 8px 14px; white-space: nowrap; text-align: center; font-weight: 700; }

    .pm-other { color:#b91c1c; }
    .pm-you   { color:#1e40af; }

    .pmatrix tbody td:hover { background: #f8fafc; }

    .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px 18px; box-shadow: 0 6px 18px rgba(27,31,35,.04); }

    .controls { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top: 12px; width: 100%; }
    .row { display: grid; grid-template-columns: 90px minmax(220px, 520px); align-items: center; gap: 14px; width: min(100%, 640px); }

    #belNumber { width: 90px; padding: 6px 8px; font-size: 16px; }

    .slider-cell { display:flex; flex-direction:column; width: 100%; }
    .slider-line { width: 100%; }

    input[type=range]{
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 14px; background: transparent; margin: 0;
    }
    input[type=range]::-webkit-slider-runnable-track{ height: 6px; background: #e5e7eb; border-radius: 999px; }
    input[type=range]::-webkit-slider-thumb{
        -webkit-appearance: none; appearance: none;
        width: 18px; height: 18px; border-radius: 50%;
        background: #2d6cdf; border: 0; box-shadow: 0 0 0 2px white inset;
        margin-top: -6px;
    }
    input[type=range]::-moz-range-track{ height: 6px; background: #e5e7eb; border: 0; border-radius: 999px; }
    input[type=range]::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: #2d6cdf; border: 0; }

    .end-labels{ width: 100%; display:flex; justify-content:space-between; font-size: 12px; color:#555; margin-top: 2px; }

    .btn { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; transition: transform .06s ease, background .15s ease; }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background:#2d6cdf; color:#fff; }
    .btn-primary[disabled] { background:#9bb7f0; cursor:not-allowed; }
    .btn-secondary { background:#e2e8f0; }
    .btn-secondary:hover { background:#cfd8e3; }
</style>

<div class="shell">
    <div id="identityData" data-gender="{{ player.field_maybe_none('gender') }}" data-race="{{ player.field_maybe_none('ethnicity') }}"></div>
    <div class="pm-wrap">
        <table class="pmatrix" aria-label="Payoff matrix">
            <thead>
                <tr>
                    <th colspan="2" rowspan="2"></th>
                    <th id="matrixOther" class="pm-other" colspan="2">Other</th>
                </tr>
                <tr>
                <th class="pm-other">X</th>
                <th class="pm-other">Y</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="matrixYou" class="pm-you" rowspan="2">You</th>
                    <th class="pm-you">X</th>
                    <td><span class="pm-you">60</span>, <span class="pm-other">60</span></td>
                    <td><span class="pm-you">0</span>, <span class="pm-other">40</span></td>
                </tr>
                <tr>
                    <th class="pm-you">Y</th>
                    <td><span class="pm-you">40</span>, <span class="pm-other">0</span></td>
                    <td><span class="pm-you">40</span>, <span class="pm-other">40</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="questionWrap" class="card hidden">
        <div id="progress" class="muted"></div>
        <div id="prompt" class="hdr"></div>
        <p id="beliefQuestion" class="muted"></p>

        <form id="beliefForm" class="center" onsubmit="return false;">
            <div class="controls">
                <div class="row">
                    <input id="belNumber" type="number" min="0" max="10" step="1" value="0" aria-label="Belief number 0 to 10">
                    <div class="slider-cell">
                        <div class="slider-line">
                            <input id="belSlider" type="range" min="0" max="10" step="1" value="0" aria-label="Belief slider 0 to 10">
                        </div>
                        <div class="end-labels"><span>0</span><span>10</span></div>
                    </div>
                </div>

                <div style="display:flex; gap:12px; justify-content:center; margin-top:10px;">
                    <button type="button" id="submitBtn" class="btn btn-primary" disabled>Submit</button>
                </div>
                <div id="status" class="muted" style="margin-top:6px;"></div>
            </div>
        </form>
    </div>

    <div id="autoNext" class="hidden">
        {{ next_button }}
    </div>
</div>
{{ endblock }}

{{ block scripts }}
<script>
    const identityData = document.getElementById('identityData');
    const playerGender = identityData ? (identityData.dataset.gender || '') : '';
    const playerRace = identityData ? (identityData.dataset.race || '') : '';

    function genderLabel(value) {
        if (!value) return 'your gender';
        return value;
    }

    function raceLabel(value) {
        if (value) return `${value}`;
        return 'your race/ethnicity';
    }

    function otherGender(value, sameGroup) {
        if (sameGroup || !value) return genderLabel(value);
        if (value === 'Male') return 'Female';
        if (value === 'Female') return 'Male';
        return 'a different gender';
    }

    function otherRace(value, sameGroup) {
        if (sameGroup || !value) return raceLabel(value);
        if (value === 'White') return 'East Asian';
        if (value === 'East Asian') return 'White';
        return 'a different race/ethnicity';
    }

    let current = null;

    function labelFor(q){
        if (q.treatment === 'baseline') {
            return null;
        }
        if (q.treatment === 'gender') {
            const you = genderLabel(playerGender);
            const other = otherGender(playerGender, q.same_group);
            return { you, other };
        }
        if (q.treatment === 'race' || q.treatment === 'ethnicity') {
            const you = raceLabel(playerRace);
            const other = otherRace(playerRace, q.same_group);
            return { you, other };
        }
        const groupLabel = q.same_group ? 'in-group' : 'out-group';
        return `Belief about ${groupLabel} match.`;
    }

    function showQuestion(q){
        current = q;
        document.getElementById('questionWrap').classList.remove('hidden');
        if (q.treatment === 'gender' || q.treatment === 'race' || q.treatment === 'ethnicity') {
            document.getElementById('progress').textContent = `Belief ${q.index} of ${q.total}`;
        } else {
            document.getElementById('progress').textContent = '';
        }
        const label = labelFor(q);
        const prompt = document.getElementById('prompt');
        const beliefQuestion = document.getElementById('beliefQuestion');
        const matrixYou = document.getElementById('matrixYou');
        const matrixOther = document.getElementById('matrixOther');

        if (label === null) {
            prompt.textContent = 'Consider participants playing the above game against another in this experiment.';
            beliefQuestion.innerHTML = 'Out of 10 randomly selected such participants, how many chose <strong>X</strong>?';
            if (matrixYou) matrixYou.textContent = '';
            if (matrixOther) matrixOther.textContent = '';
        } else if (typeof label === 'string') {
            prompt.textContent = label;
            beliefQuestion.innerHTML = 'Out of 10 randomly selected such participants, how many chose <strong>X</strong> in this case?';
            if (matrixYou) matrixYou.textContent = 'You';
            if (matrixOther) matrixOther.textContent = 'Other';
        } else {
            const youLabel = label.you || 'You';
            const otherLabel = label.other || 'Other';
            prompt.innerHTML = `Consider <strong>${otherLabel}</strong> participants, making a decision against <strong>${youLabel}</strong> participant.`;
            beliefQuestion.innerHTML = 'Out of 10 randomly selected such participants, how many chose <strong>X</strong> in this case?';
            if (matrixYou) matrixYou.innerHTML = `<strong>${otherLabel}</strong>`;
            if (matrixOther) matrixOther.innerHTML = `<strong>${youLabel}</strong>`;
        }
        document.getElementById('status').textContent = '';

        const slider = document.getElementById('belSlider');
        const number = document.getElementById('belNumber');
        slider.value = 0;
        number.value = 0;
        document.getElementById('submitBtn').disabled = false;
    }

    function showDone(){
        document.getElementById('questionWrap').classList.add('hidden');
        const nextBtn = document.querySelector('#autoNext button');
        if (nextBtn) {
            nextBtn.click();
        }
    }

    function liveRecv(msg){
        if (msg.type === 'show'){
            showQuestion(msg.question);
            return;
        }
        if (msg.type === 'done'){
            showDone();
            return;
        }
        if (msg.type === 'error'){
            document.getElementById('status').textContent = msg.msg || 'Invalid response.';
        }
    }

    (function bindSync(){
        const slider = document.getElementById('belSlider');
        const number = document.getElementById('belNumber');
        slider.addEventListener('input', () => {
            number.value = slider.value;
        });
        number.addEventListener('input', () => {
            let v = parseInt(number.value, 10);
            if (Number.isNaN(v)) { v = 0; }
            v = Math.max(0, Math.min(10, v));
            number.value = v;
            slider.value = v;
        });
    })();

    document.getElementById('submitBtn').addEventListener('click', () => {
        const input = document.getElementById('belNumber');
        const num = Number(input.value);
        if (!Number.isInteger(num) || !current) {
            return;
        }
        document.getElementById('submitBtn').disabled = true;
        liveSend({ type: 'submit_belief', seq: current.seq, belief: num });
    });

    function boot(){
        if (typeof liveSend === 'undefined'){ setTimeout(boot, 50); return; }
        liveSend({ type: 'init_belief' });
    }
    boot();
</script>
{{ endblock }}