{{ block title }}Preference Task{{ endblock }}

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

    <div class="card">
        <p style="color:#6b7280; margin-bottom:20px; text-align:center;">
            Please indicate which option you prefer.
        </p>

        <!-- Progress -->
        <div style="font-size:.8rem; color:#6b7280; margin-bottom:16px; text-align:right;">
        </div>

        <!-- Option boxes -->
        <div style="display:flex; gap:16px; margin:20px 0; justify-content:center; align-items:stretch;">

            <div id="box-left" onclick="selectSide('left')"
                 style="flex:1; max-width:300px; border:1px solid #ddd8ce; border-radius:8px;
                        padding:20px; text-align:center; cursor:pointer;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Left Option</div>
                <svg id="left-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
            </div>

                <div style="display:flex; align-items:center;">
                    <button type="button" id="btn-indifferent" onclick="selectSide('indifferent')"
                            style="padding:8px 16px; background:#fff; color:#6b7280;
                                   border:1px solid #ddd8ce; border-radius:8px;
                                   font-size:.9rem; cursor:pointer; white-space:nowrap;
                                   transition:border-color .15s, background .15s, color .15s;">
                        Indifferent
                    </button>
                </div>


            <div id="box-right" onclick="selectSide('right')"
                 style="flex:1; max-width:300px; border:1px solid #ddd8ce; border-radius:8px;
                        padding:20px; text-align:center; cursor:pointer;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Right Option</div>
                <svg id="right-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
            </div>

        </div>



        <!-- Slider (hidden until left/right selected) -->
        <div id="slider-section" style="display:none; margin-top:28px;
                                         width:80%; margin-left:auto; margin-right:auto;">

            <p id="slider-prompt" style="text-align:center; font-size:.9rem;
                                          color:#1e2228; margin-bottom:16px;"></p>

            <input type="range" id="rating-slider"
                   min="0" max="7" step="1" value="-1"
                   class="slider-hidden"
                   style="width:100%; cursor:pointer; display:block;"
                   onclick="onSliderInteraction(this.value)"
                   oninput="onSliderInteraction(this.value)">

            <!-- Tick labels -->
            <div style="position:relative; height:20px; margin-top:6px;">
                <script>
                    [0,1,2,3,4,5,6,7].forEach((v,i) => {
                        const pct = (i/7*100).toFixed(4);
                        document.write('<span style="position:absolute;left:'+pct+'%;transform:translateX(-50%);font-size:.75rem;color:#6b7280;">'+v+'</span>');
                    });
                </script>
            </div>

            <div style="display:flex; justify-content:space-between; margin-top:8px;
                        font-size:.85rem; color:#6b7280; font-weight:bold;">
                <span>Indifferent</span>
                <span>Strong preference</span>
            </div>
        </div>

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

    <!-- Single hidden field: all decisions as JSON -->
    <input type="hidden" id="id_pref_decisions_data" name="pref_decisions_data" value="{}">

</div>

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

<script>
const TASK_TYPE          = "{{ task_type }}";
const DICTATOR_ENDOWMENT = {{ dictator_endowment }};
const BLOCK_TOTAL        = {{ block_total }};
const SITUATIONS         = JSON.parse(document.getElementById('situations-data').textContent);

let currentIdx   = 0;
let selectedSide = null;
let sliderMoved  = false;
let sitStartTime = null;
const allDecisions = {};

window.addEventListener('DOMContentLoaded', () => { loadSituation(0); });

function loadSituation(idx) {
    currentIdx   = idx;
    selectedSide = null;
    sliderMoved  = false;
    sitStartTime = Date.now();

    // Reset UI
    const slider = document.getElementById('rating-slider');
    slider.value = '-1';
    slider.classList.add('slider-hidden');
    document.getElementById('slider-section').style.display  = 'none';
    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    = '';
    document.getElementById('box-left').style.outline        = 'none';
    document.getElementById('box-right').style.outline       = 'none';
    document.getElementById('btn-indifferent').style.borderColor = '#ddd8ce';
    document.getElementById('btn-indifferent').style.background  = '#fff';
    document.getElementById('btn-indifferent').style.color       = '#6b7280';

    lockNext();

    const btn = document.getElementById('btn-next');
    btn.textContent = (idx === BLOCK_TOTAL - 1) ? 'Submit →' : 'Next →';

    const sit = SITUATIONS[idx];
    if (TASK_TYPE === 'lottery') {
        drawRiskWheel('left-viz',  sit.left);
        drawRiskWheel('right-viz', sit.right);
    } else {
        drawDictatorCard('left-viz',  sit.left,  DICTATOR_ENDOWMENT);
        drawDictatorCard('right-viz', sit.right, DICTATOR_ENDOWMENT);
    }
}

function selectSide(side) {
    selectedSide = side;
    sliderMoved  = false;

    const slider = document.getElementById('rating-slider');
    slider.value = '-1';
    slider.classList.add('slider-hidden');

    // Reset highlights
    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    = '';
    document.getElementById('box-left').style.outline        = 'none';
    document.getElementById('box-right').style.outline       = 'none';
    document.getElementById('btn-indifferent').style.borderColor = '#ddd8ce';
    document.getElementById('btn-indifferent').style.background  = '#fff';
    document.getElementById('btn-indifferent').style.color       = '#6b7280';

    if (side === 'indifferent') {
        document.getElementById('btn-indifferent').style.borderColor = '#2a6e7c';
        document.getElementById('btn-indifferent').style.background  = '#e8f4f7';
        document.getElementById('btn-indifferent').style.color       = '#2a6e7c';
        document.getElementById('slider-section').style.display = 'none';
        sliderMoved = true;
        unlockNext();
        return;
    }

    if (side === 'left') {
        document.getElementById('box-left').style.borderColor = '#2a6e7c';
        document.getElementById('box-left').style.background  = '#e8f4f7';
        document.getElementById('slider-prompt').textContent  = 'How strong is your preference for the Left Option?';
    } else {
        document.getElementById('box-right').style.borderColor = '#2a6e7c';
        document.getElementById('box-right').style.background  = '#e8f4f7';
        document.getElementById('slider-prompt').textContent   = 'How strong is your preference for the Right Option?';
    }

    document.getElementById('slider-section').style.display = 'block';
    lockNext();
}

function onSliderInteraction(value) {
    const intVal = parseInt(value);
    if (intVal < 0 || intVal > 7) return;

    sliderMoved = true;
    document.getElementById('rating-slider').classList.remove('slider-hidden');

    const alpha = intVal === 0 ? 0 : 0.15 + (intVal / 7) * 0.85;
    const color = `rgba(42, 110, 124, ${alpha})`;
    if (selectedSide !== 'indifferent') {
        const alpha = intVal === 0 ? 0 : 0.15 + (intVal / 7) * 0.85;
        const color = `rgba(42, 110, 124, ${alpha})`;
        if (selectedSide === 'left') {
            document.getElementById('box-left').style.outline  = '3px solid ' + color;
            document.getElementById('box-right').style.outline = 'none';
        } else {
            document.getElementById('box-right').style.outline = '3px solid ' + color;
            document.getElementById('box-left').style.outline  = 'none';
        }
    }

    unlockNext();
}

function lockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity       = '.4';
    btn.style.pointerEvents = 'none';
}

function unlockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity       = '1';
    btn.style.pointerEvents = 'auto';
}

function advanceSituation() {
    if (!selectedSide || !sliderMoved) return;

    const sit    = SITUATIONS[currentIdx];
    let rawRating;
    let chosenSide;

    if (selectedSide === 'indifferent') {
        rawRating  = 0;
        chosenSide = Math.random() < 0.5 ? 'left' : 'right';
    } else {
        const sliderVal = parseInt(document.getElementById('rating-slider').value);
        rawRating  = selectedSide === 'left' ? -sliderVal : sliderVal;
        chosenSide = selectedSide;
    }

    allDecisions[sit.id] = {
        binary_choice:    selectedSide,   // 'left', 'right', or 'indifferent'
        raw_rating:       rawRating,
        chosen_option_id: chosenSide === 'left' ? sit.left.option_id : sit.right.option_id,
        a_is_left:        sit.a_is_left,
        left_option_id:   sit.left.option_id,
        right_option_id:  sit.right.option_id,
        decision_time_ms: Date.now() - sitStartTime,
    };

    if (currentIdx < BLOCK_TOTAL - 1) {
        loadSituation(currentIdx + 1);
    } else {
        document.getElementById('id_pref_decisions_data').value = JSON.stringify(allDecisions);
        document.querySelector('form').submit();
    }
}

// ─── Dictator card ────────────────────────────────────────────────────────────
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',MAX_R=26,W=260,H=310,COL_YOU=105,COL_OTH=220,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'});marker.appendChild(mk('path',{d:'M2 1L8 5L2 9',fill:'none',stroke:'#666','stroke-width':'1.5','stroke-linecap':'round','stroke-linejoin':'round'}));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}));[['','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,th=Math.max(8,r*0.55),ry=Math.max(3,r*0.37),g=mk('g',{transform:'translate('+cx+','+cy+')'});g.appendChild(mk('ellipse',{cx:0,cy:th/2,rx:r,ry:ry,fill:'#b8881a'}));g.appendChild(mk('rect',{x:-r,y:-th/2,width:r*2,height:th,fill:'#b8881a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r,ry:ry,fill:'#e8c86a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r*0.85,ry:ry*0.85,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*.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 {own_payoff,transfer,multiplier}=opt,otherFinal=Math.round(transfer*multiplier*100)/100;;if(own_payoff>0)drawCoin(COL_YOU,80,own_payoff);if(transfer>0)drawCoin(COL_OTH,80,transfer);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,120,13,'700','#333'));svg.appendChild(mkText(transfer+' MU',COL_OTH,120,13,'700','#333'));function drawArrow(cx,label,isMult){const mUrl='url(#'+svgId+'-arr)';svg.appendChild(mk('line',{x1:cx,y1:138,x2:cx,y2:150,stroke:'#666','stroke-width':'1.5'}));const bw=isMult?44:64;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,isMult?11:10,isMult?'700':'400',isMult?'#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,'× '+multiplier,true);if(own_payoff>0)drawCoin(COL_YOU,215,own_payoff);if(otherFinal>0)drawCoin(COL_OTH,215,otherFinal);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,255,13,'700','#333'));svg.appendChild(mkText(otherFinal+' MU',COL_OTH,255,13,'700','#333'));}

// ─── Risk wheel ───────────────────────────────────────────────────────────────
function drawRiskWheel(svgId,opt){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',R=80,ORANGE='#E07B2A',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');Object.entries({x,y,fill:'white','font-family':'sans-serif','font-size':size||16,'font-weight':'700','text-anchor':'middle','dominant-baseline':'central'}).forEach(([k,v])=>el.setAttribute(k,v));el.textContent=txt+' MU';return el;}const pLeft=parseFloat(opt.probability_left),pRight=1-pLeft,lOut=opt.left_outcome,rOut=opt.right_outcome,certain=(lOut===rOut)||pLeft>=0.999;svg.appendChild(mkEl('circle',{cx:0,cy:0,r:R,fill:ORANGE}));if(!certain){const halfSweep=pRight*Math.PI,tx=Math.cos(-halfSweep)*R,ty=Math.sin(-halfSweep)*R,bx=Math.cos(halfSweep)*R,by=Math.sin(halfSweep)*R;svg.appendChild(mkEl('path',{d:`M0,0 L${tx},${ty} A${R},${R} 0 ${pRight>.5?1:0},1 ${bx},${by} Z`,fill:PURPLE}));svg.appendChild(mkEl('circle',{cx:0,cy:0,r:R,fill:'none',stroke:'white','stroke-width':'1',opacity:'0.25'}));svg.appendChild(mkText(lOut,-(R*0.48),0,16));svg.appendChild(mkText(rOut,(R*0.48),0,16));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent=Math.round(pLeft*100)+'% / '+Math.round(pRight*100)+'%';}else{svg.appendChild(mkText(lOut,0,0,19));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent='100%';}}
</script>

<style>
.card { background:#fff; border:1px solid #ddd8ce; border-radius:8px; padding:28px 32px; margin-bottom:20px; }
input[type=range].slider-hidden::-webkit-slider-thumb { background:transparent; border:none; box-shadow:none; }
input[type=range].slider-hidden::-moz-range-thumb     { background:transparent; border:none; box-shadow:none; }
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; background:#ddd8ce; border-radius:3px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#2a6e7c; cursor:pointer; }
input[type=range]::-moz-range-thumb    { width:20px; height:20px; border-radius:50%; background:#2a6e7c; cursor:pointer; border:none; }
</style>

{{ endblock }}