{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Make your decision{% endblock %}

{% block content %}

<div style="text-align:center; margin-top:5%;">
    <h4 style="margin:20px 0 30px;">Question <span id="q-num"></span> of {{ gambles|length }}</h4>

    <div style="display:flex; justify-content:center; gap:40px; flex-wrap:wrap;">

        <!-- Option A: Gamble -->
        <div id="opt-gamble"
             onclick="selectOption('gamble')"
             style="cursor:pointer; border:2px solid #ccc; border-radius:12px;
                    padding:30px 40px; width:200px; background:#fff;">
            <div style="font-size:1.1em; font-weight:bold; margin-bottom:10px;">Option A</div>
            <div style="font-size:1em;">50% chance to win</div>
            <div style="font-size:2em; font-weight:bold; color:#2980b9;" id="win-amount"></div>
            <div style="font-size:0.9em; color:#888;">tokens</div>
            <div style="margin-top:8px; font-size:1em;">50% chance to win</div>
            <div style="font-size:2em; font-weight:bold; color:#2980b9;">0</div>
            <div style="font-size:0.9em; color:#888;">tokens</div>
        </div>

        <!-- Option B: Sure amount -->
        <div id="opt-sure"
             onclick="selectOption('sure')"
             style="cursor:pointer; border:2px solid #ccc; border-radius:12px;
                    padding:30px 40px; width:200px; background:#fff;">
            <div style="font-size:1.1em; font-weight:bold; margin-bottom:10px;">Option B</div>
            <div style="font-size:1em;">Receive for certain</div>
            <div style="font-size:2em; font-weight:bold; color:#27ae60;" id="sure-amount"></div>
            <div style="font-size:0.9em; color:#888;">tokens</div>
        </div>

    </div>

    <div style="margin-top:20px; color:#c0392b; font-size:0.95em; min-height:1.2em;" id="warning">
        Please select an option before continuing.
    </div>

    <div style="margin-top:15px;">
        <button id="next-btn" type="button" class="btn btn-primary">Next</button>
    </div>
</div>

<!-- Hidden fields -->
<input type="hidden" name="risk_choices" id="risk_choices_hidden" value="{}">
{{ formfield_errors 'risk_choices' }}
<div style="display:none">{% next_button %}</div>

<script>
    var gambles = {{ gambles|json }};
    var current = 0;
    var choices = {};
    var selected = null;

    function loadQuestion() {
        var g = gambles[current];
        document.getElementById('q-num').textContent = current + 1;
        document.getElementById('win-amount').textContent = g.Y;
        document.getElementById('sure-amount').textContent = g.X;
        selected = null;
        setStyle('opt-gamble', false);
        setStyle('opt-sure', false);
        document.getElementById('warning').textContent =
            'Please select an option before continuing.';
    }

    function setStyle(id, active) {
        var el = document.getElementById(id);
        if (active) {
            el.style.border = '3px solid #2c3e50';
            el.style.background = '#eaf0fb';
        } else {
            el.style.border = '2px solid #ccc';
            el.style.background = '#fff';
        }
    }

    function selectOption(choice) {
        selected = choice;
        setStyle('opt-gamble', choice === 'gamble');
        setStyle('opt-sure', choice === 'sure');
        document.getElementById('warning').textContent = '';
    }

    document.getElementById('next-btn').addEventListener('click', function () {
        if (selected === null) {
            document.getElementById('warning').textContent =
                'Please select an option before continuing.';
            return;
        }
        choices[current] = selected;
        current++;
        if (current < gambles.length) {
            loadQuestion();
        } else {
            document.getElementById('risk_choices_hidden').value = JSON.stringify(choices);
            document.forms[0].submit();
        }
    });

    loadQuestion();
</script>
{% endblock %}