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

{% block title %}Answer Questions{% endblock %}

{% block content %}
<div class="card bg-light m-3">
    <div class="card-body">
        <p>For each probability p below, click the option you prefer. All rows will update automatically.</p>

        <table class="table table-bordered table-sm" style="max-width:700px; margin:auto;">
            <thead class="thead-light">
                <tr>
                    <th style="text-align:center;">
                        <span style="color:#1a5276;"><strong>Option 1</strong></span><br>
                        <small>{{ option1_text }}</small>
                    </th>
                    <th style="text-align:center;">
                        <span style="color:#1e8449;"><strong>Option 2</strong></span><br>
                        <small>You win 200 tokens with p% probability and nothing otherwise.</small>
                    </th>
                    <th style="text-align:center; width:80px;">p (%)</th>
                </tr>
            </thead>
            <tbody>
                {% for p in p_values %}
                <tr id="row-{{ forloop.counter0 }}">
                    <td style="text-align:center; vertical-align:middle; padding:6px;">
                        <button type="button"
                                class="btn btn-outline-primary choice-btn"
                                data-row="{{ forloop.counter0 }}"
                                data-choice="1">
                            Option 1
                        </button>
                    </td>
                    <td style="text-align:center; vertical-align:middle; padding:6px;">
                        <button type="button"
                                class="btn btn-outline-success choice-btn"
                                data-row="{{ forloop.counter0 }}"
                                data-choice="2">
                            Option 2
                        </button>
                    </td>
                    <td style="text-align:center; vertical-align:middle;"><strong>{{ p }}%</strong></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div id="warning" style="color:#c0392b; margin-top:12px; text-align:center; display:none;">
            Please make at least one selection before continuing.
        </div>
    </div>
</div>

<!-- Hidden field populated by JS before submit -->
<input type="hidden" name="{{ field_name }}" id="belief_hidden" value="">

<div style="display:none">{% next_button %}</div>

<div style="text-align:center; margin-top:20px; margin-bottom:20px;">
    <button type="button" id="submit-btn" class="btn btn-primary btn-lg">Next</button>
</div>

<script>
var NUM_ROWS = {{ p_values|length }};
var choices = new Array(NUM_ROWS).fill(null);

function updateDisplay() {
    for (var i = 0; i < NUM_ROWS; i++) {
        var row = document.getElementById('row-' + i);
        var btn1 = row.querySelector('[data-choice="1"]');
        var btn2 = row.querySelector('[data-choice="2"]');
        if (choices[i] === 1) {
            btn1.className = 'btn btn-primary choice-btn';
            btn2.className = 'btn btn-outline-success choice-btn';
            row.style.background = '#d6eaf8';
        } else if (choices[i] === 2) {
            btn1.className = 'btn btn-outline-primary choice-btn';
            btn2.className = 'btn btn-success choice-btn';
            row.style.background = '#d5f5e3';
        } else {
            btn1.className = 'btn btn-outline-primary choice-btn';
            btn2.className = 'btn btn-outline-success choice-btn';
            row.style.background = '';
        }
    }
}

document.querySelectorAll('.choice-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var row = parseInt(this.getAttribute('data-row'));
        var choice = parseInt(this.getAttribute('data-choice'));

        if (choice === 1) {
            // Clicked Option 1 at row i: rows 0..i → Option 1, rows i+1..end → Option 2
            for (var j = 0; j <= row; j++) choices[j] = 1;
            for (var j = row + 1; j < NUM_ROWS; j++) choices[j] = 2;
        } else {
            // Clicked Option 2 at row i: rows 0..i-1 → Option 1, rows i..end → Option 2
            for (var j = 0; j < row; j++) choices[j] = 1;
            for (var j = row; j < NUM_ROWS; j++) choices[j] = 2;
        }
        updateDisplay();
        document.getElementById('warning').style.display = 'none';
    });
});

document.getElementById('submit-btn').addEventListener('click', function() {
    if (choices.indexOf(null) !== -1) {
        document.getElementById('warning').style.display = 'block';
        return;
    }
    document.getElementById('belief_hidden').value = JSON.stringify(choices);
    document.forms[0].submit();
});
</script>
{% endblock %}