{{ block title }}Additional Decisions{{ endblock }}

{{ block content }}
<div id="consistency-app">

    <div style="margin-bottom:24px;">
        <div style="height:6px; background:#ddd8ce; border-radius:3px; overflow:hidden;">
            <div id="progress-fill" style="height:100%; background:#2a6e7c; transition:width .3s; width:0%"></div>
        </div>
        <div id="progress-label" style="font-size:.8rem; color:#6b7280; margin-top:4px; text-align:right;">Loading…</div>
    </div>

    <div class="card" id="check-card" style="display:none">
        <h2 id="check-title">Decision</h2>
        <p style="color:#6b7280; margin-bottom:16px;">
            Below you can see the actual number of people who chose each option.
            Please indicate which option you want to pick.
        </p>

        <div style="display:flex; gap:20px; margin:20px 0; justify-content:center;">
            <div id="box-left" onclick="selectSide('left')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center; user-select:none;">
                <svg id="left-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="left-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; overflow:hidden;"></div>
            </div>

            <div id="box-right" onclick="selectSide('right')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center; user-select:none;">
                <svg id="right-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="right-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; overflow:hidden;"></div>
            </div>
        </div>


        <div style="display:flex; justify-content:flex-end; margin-top:24px; gap:12px;">
            <button id="btn-next" onclick="nextCheck()" disabled
                    style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                           border-radius:8px; cursor:pointer; font-size:1rem; opacity:.5;">
                Next →
            </button>
        </div>
    </div>

    <form id="otree-form" method="post" style="display:none">
        <input type="hidden" id="consistency-field" name="consistency_decisions_data" value="">
    </form>
</div>

<style>
.card { background:#fff; border:1px solid #ddd8ce; border-radius:8px; padding:28px 32px; margin-bottom:20px; }
h2 { font-size:1.3rem; color:#1a4f5a; margin-bottom:12px; }
</style>

<script>
const CHECKS             = JSON.parse('{{ checks }}');
const DICTATOR_ENDOWMENT = {{ dictator_endowment }};
let checkIdx  = 0;
let decisions = [];

window.addEventListener('DOMContentLoaded', () => {
    decisions = CHECKS.map(c => ({
        check_index:     c.index,
        task_type:       c.task_type,
        left_option_id:  c.left.option_id,
        right_option_id: c.right.option_id,
        n_left:          c.n_left,
        chosen_option:   null,
    }));
    renderCheck();
});

function renderCheck() {
    if (checkIdx >= CHECKS.length) { submitAll(); return; }
    const check = CHECKS[checkIdx];
    document.getElementById('check-card').style.display = '';
    document.getElementById('check-title').textContent =
        'Decision ' + (checkIdx+1) + ' of ' + CHECKS.length;
    const pct = Math.round((checkIdx / CHECKS.length) * 100);
    document.getElementById('progress-fill').style.width = pct + '%';
    document.getElementById('progress-label').textContent =
        'Decision ' + (checkIdx+1) + ' of ' + CHECKS.length;

    // Draw visualizations
    if (check.task_type === 'risk') {
        drawRiskWheel('left-viz',  check.left,  'risk');
        drawRiskWheel('right-viz', check.right, 'risk');
    } else {
        drawDictatorCard('left-viz',  check.left,  DICTATOR_ENDOWMENT);
        drawDictatorCard('right-viz', check.right, DICTATOR_ENDOWMENT);
        clearProbLabel('left-viz');
        clearProbLabel('right-viz');
    }

    renderPeople('left-people',  check.n_left,  10);
    renderPeople('right-people', check.n_right, 10);

    document.getElementById('box-left').style.borderColor  = '#ddd8ce';
    document.getElementById('box-right').style.borderColor = '#ddd8ce';
    document.getElementById('box-left').style.background   = '';
    document.getElementById('box-right').style.background  = '';
    const btn = document.getElementById('btn-next');
    btn.disabled = true; btn.style.opacity = '.5';
}

function selectSide(side) {
    document.getElementById('box-left').style.borderColor  = side==='left'  ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-right').style.borderColor = side==='right' ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-left').style.background   = side==='left'  ? '#e8f4f7' : '';
    document.getElementById('box-right').style.background  = side==='right' ? '#e8f4f7' : '';
    const btn = document.getElementById('btn-next');
    btn.disabled = false; btn.style.opacity = '1';
    const check = CHECKS[checkIdx];
    decisions[checkIdx].chosen_option = side === 'left' ? check.left.option_id : check.right.option_id;
}

function renderPeople(containerId, nActive, total) {
    const c = document.getElementById(containerId);
    c.innerHTML = '';
    for (let i = 0; i < total; i++) {
        const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
        svg.setAttribute('viewBox','0 0 24 24');
        svg.setAttribute('width','24'); svg.setAttribute('height','24');
        svg.style.fill    = i < nActive ? '#2a6e7c' : '#c0bdb5';
        svg.style.opacity = i < nActive ? '.85' : '.4';
        svg.innerHTML = '<circle cx="12" cy="6" r="3.5"/><path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>';
        c.appendChild(svg);
    }
}

function nextCheck()  { checkIdx++; renderCheck(); }
function prevCheck()  { if (checkIdx > 0) { checkIdx--; renderCheck(); } }

function submitAll() {
    document.getElementById('consistency-field').value = JSON.stringify(decisions);
    document.getElementById('otree-form').submit();
}

// ── Shared visualization functions (copied from TaskBlock) ──

function drawDictatorCard(svgId, opt, endowment) {
    const svg = document.getElementById(svgId);
    if (!svg) return;
    while (svg.firstChild) svg.removeChild(svg.firstChild);

    const ns      = 'http://www.w3.org/2000/svg';
    const MAX_R   = 26;
    const W       = 260, H = 310;
    const COL_YOU = 105, COL_OTH = 220;
    const DIV_V   = 162;

    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);

    function mk(tag, attrs) {
        const el = document.createElementNS(ns, tag);
        for (const [k,v] of Object.entries(attrs)) el.setAttribute(k, v);
        return el;
    }
    function mkText(txt, x, y, size, weight, fill) {
        const el = mk('text', {
            'font-family':'sans-serif', 'font-size': size || 13,
            'font-weight': weight || '400', fill: fill || '#333',
            'text-anchor':'middle', 'dominant-baseline':'central', x, y
        });
        el.textContent = txt;
        return el;
    }

    const defs = mk('defs', {});
    const marker = mk('marker', {id: svgId+'-arr', viewBox:'0 0 10 10',
        refX:8, refY:5, markerWidth:6, markerHeight:6, orient:'auto-start-reverse'});
    const mp = mk('path', {d:'M2 1L8 5L2 9', fill:'none', stroke:'#666',
        'stroke-width':'1.5', 'stroke-linecap':'round', 'stroke-linejoin':'round'});
    marker.appendChild(mp); defs.appendChild(marker); svg.appendChild(defs);

    svg.appendChild(mkText('You',   COL_YOU, 22, 13, '600', '#444'));
    svg.appendChild(mkText('Other', COL_OTH, 22, 13, '600', '#444'));
    svg.appendChild(mk('line', {x1:162, y1:30, x2:162, y2:295, stroke:'#ccc', 'stroke-width':1}));
    svg.appendChild(mk('line', {x1:10,  y1:DIV_V, x2:255, y2:DIV_V, stroke:'#ccc', 'stroke-width':1}));

    [['initial','split',95,107],['final','payouts',228,240]].forEach(([l1,l2,y1,y2]) => {
        svg.appendChild(mkText(l1, 27, y1, 11, '400', '#888'));
        svg.appendChild(mkText(l2, 27, y2, 11, '400', '#888'));
    });

    function drawCoin(cx, cy, amount) {
        const r  = Math.sqrt(amount / endowment) * MAX_R;
        const th = Math.max(8, r * 0.55);
        const ry = Math.max(3, r * 0.37);
        const rRing = r * 0.85, ryRing = ry * 0.85;
        const g = mk('g', {transform: 'translate(' + cx + ',' + cy + ')'});
        g.appendChild(mk('ellipse', {cx:0, cy:th/2,  rx:r, ry:ry, fill:'#b8881a', stroke:'none'}));
        g.appendChild(mk('rect',    {x:-r, y:-th/2, width:r*2, height:th, fill:'#b8881a', stroke:'none'}));
        g.appendChild(mk('ellipse', {cx:0, cy:-th/2, rx:r, ry:ry, fill:'#e8c86a', stroke:'none'}));
        g.appendChild(mk('ellipse', {cx:0, cy:-th/2, rx:rRing, ry:ryRing,
            fill:'none', stroke:'#c8a030', 'stroke-width':'1.2', 'stroke-dasharray':'3 3'}));
        if (r >= 14) {
            const t = mk('text', {'font-family':'serif', 'font-size': Math.round(r * 0.72),
                'font-weight':'700', fill:'#a07010', 'text-anchor':'middle',
                'dominant-baseline':'central', x:0, y:-th/2});
            t.textContent = '1';
            g.appendChild(t);
        }
        svg.appendChild(g);
    }

    const ownPayoff = opt.own_payoff, transfer = opt.transfer, multiplier = opt.multiplier;
    const otherInitial = transfer, otherFinal = transfer * multiplier;

    if (ownPayoff    > 0) drawCoin(COL_YOU, 80, ownPayoff);
    if (otherInitial > 0) drawCoin(COL_OTH, 80, otherInitial);
    svg.appendChild(mkText(ownPayoff    + ' MU', COL_YOU, 120, 13, '700', '#333'));
    svg.appendChild(mkText(otherInitial + ' MU', COL_OTH, 120, 13, '700', '#333'));

    function drawArrow(cx, label, isMultiplier) {
        const mUrl = 'url(#' + svgId + '-arr)';
        const bw = isMultiplier ? 44 : 64;
        svg.appendChild(mk('line', {x1:cx, y1:138, x2:cx, y2:150, stroke:'#666', 'stroke-width':'1.5'}));
        svg.appendChild(mk('rect', {x:cx-bw/2, y:150, width:bw, height:19, rx:4, fill:'white', stroke:'#ccc', 'stroke-width':'0.8'}));
        svg.appendChild(mkText(label, cx, 160, isMultiplier ? 11 : 10, isMultiplier ? '700' : '400', isMultiplier ? '#333' : '#555'));
        svg.appendChild(mk('line', {x1:cx, y1:169, x2:cx, y2:182, stroke:'#666', 'stroke-width':'1.5', 'marker-end':mUrl}));
    }
    drawArrow(COL_YOU, 'you keep', false);
    drawArrow(COL_OTH, '\u00d7 ' + multiplier, true);

    if (ownPayoff  > 0) drawCoin(COL_YOU, 215, ownPayoff);
    if (otherFinal > 0) drawCoin(COL_OTH, 215, otherFinal);
    svg.appendChild(mkText(ownPayoff  + ' MU', COL_YOU, 255, 13, '700', '#333'));
    svg.appendChild(mkText(otherFinal + ' MU', COL_OTH, 255, 13, '700', '#333'));
}

function drawRiskWheel(svgId, opt, taskType) {
    const svg = document.getElementById(svgId);
    if (!svg) return;
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    svg.setAttribute('viewBox', '-100 -100 200 200');

    const ns     = 'http://www.w3.org/2000/svg';
    const R      = 80;
    const ORANGE = '#E07B2A';
    const PURPLE = '#7C5CBF';

    function mkEl(tag, attrs) {
        const el = document.createElementNS(ns, tag);
        for (const [k,v] of Object.entries(attrs)) el.setAttribute(k,v);
        return el;
    }
    function mkText(txt, x, y, size) {
        const el = document.createElementNS(ns, 'text');
        el.setAttribute('x', x); el.setAttribute('y', y);
        el.setAttribute('fill', 'white'); el.setAttribute('font-family', 'sans-serif');
        el.setAttribute('font-size', size || 16); el.setAttribute('font-weight', '700');
        el.setAttribute('text-anchor', 'middle'); el.setAttribute('dominant-baseline', 'central');
        el.textContent = txt + ' MU';
        return el;
    }

    const pLeft  = parseFloat(opt.probability_left);
    const pRight = 1 - pLeft;
    const lOut   = opt.left_outcome;
    const rOut   = opt.right_outcome;

    const certain = (lOut === rOut) || pLeft >= 0.999;

    // Full orange circle always
    svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R, fill:ORANGE}));

    if (!certain) {
        // Purple sector: occupies the right side, centered at 3 o'clock.
        // It spans pRight x 360deg symmetrically around 3 o'clock (angle=0).
        const halfSweep = pRight * Math.PI;
        const topAngle  = -halfSweep;   // above 3 o'clock
        const botAngle  =  halfSweep;   // below 3 o'clock

        const tx = Math.cos(topAngle) * R;
        const ty = Math.sin(topAngle) * R;
        const bx = Math.cos(botAngle) * R;
        const by = Math.sin(botAngle) * R;
        const largeArc = pRight > 0.5 ? 1 : 0;

        // Purple sector: from top point, clockwise (sweep=1) to bottom point
        svg.appendChild(mkEl('path', {
            d: `M0,0 L${tx},${ty} A${R},${R} 0 ${largeArc},1 ${bx},${by} Z`,
            fill: PURPLE
        }));

        // Border ring
        svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R, fill:'none',
            stroke:'white', 'stroke-width':'1', opacity:'0.25'}));

        // Labels: orange always on left (9 o'clock), purple always on right (3 o'clock)
        svg.appendChild(mkText(lOut, -(R * 0.48), 0, 16));
        svg.appendChild(mkText(rOut,  (R * 0.48), 0, 16));
    } else {
        // Certain outcome — just the orange circle with centred label
        svg.appendChild(mkText(lOut, 0, 0, 19));
    }

    updateProbLabel(svgId, Math.round(pLeft*100), Math.round(pRight*100));
}

function updateProbLabel(svgId, pL, pR) {
    let el = document.getElementById(svgId + '-prob');
    if (!el) {
        el = document.createElement('div');
        el.id = svgId + '-prob';
        el.style.cssText = 'text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;font-family:sans-serif;';
        const s = document.getElementById(svgId);
        if (s && s.parentNode) s.parentNode.insertBefore(el, s.nextSibling);
    }
    if (pR === 0) {
        el.textContent = '100%';
    } else {
        el.textContent = pL + '% / ' + pR + '%';
    }
}

function clearProbLabel(svgId) {
    const el = document.getElementById(svgId + '-prob');
    if (el) el.textContent = '';
}
</script>

{{ endblock }}