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

{% block title %}
{% endblock %}

{% block content %}
    <h4>
    Make your choice for each row.
    </h4>

    <p>
            Once you choose an option, any other choices implied by that decision will be auto-completed for you.
    </p>
    <br>
       <table class="table table-bordered" style="text-align: center">
            <thead>
            <tr class="header">
                <th class="lottery" style="width: 45%;">Option A</th>
                <th class="formfield"></th>
                <th class="sure_payoff" style="width: 45%;">Option B</th>
            </tr>
            </thead>

            <tbody>
            {% for f, px, py, payoffA_high, payoffA_low, payoffB_high, payoffB_low, a_sure, b_sure, choice in choices %}
            <tr>
                <!-- lotteries -->
                <td class="lottery-a" style="width: 45%;">
                    {% if a_sure %}
                        {{ payoffA_high | c }} for sure
                    {% else %}
                        {{ px }}% chance of {{ payoffA_high | c }}<br/>
                        {{ py }}% chance of {{ payoffA_low | c  }}
                    {% endif %}
                </td>

                <!-- radio select form fields -->
                <td class="formfield">
                    <input type="radio" name="{{ f }}" value="A" required>
                    <input type="radio" name="{{ f }}" value="B" required>
                </td>

                <!-- sure payoff -->
                <td class="lottery-b" style="width: 45%;">
                    {% if b_sure %}
                        {{ payoffB_high | c }}
                    {% else %}
                        {{ px }}% chance of {{ payoffB_high | c  }}<br/>
                        {{ py }}% chance of {{ payoffB_low | c  }}
                    {% endif %}
                </td>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>


    <div style="text-align: center">
        {% next_button %}
    </div>
  <script>
        (function () {
            // Collect one field name per row (take the "A" radios so we don't duplicate)
            const fieldNames = Array.from(
                document.querySelectorAll('input[type="radio"][value="A"]')
            ).map(el => el.name);

            function selectedValue(name) {
                const checked = document.querySelector(`input[name="${name}"]:checked`);
                return checked ? checked.value : null;
            }

            function enforceSingleSwitch() {
                // find first B and last A
                let firstB = null;
                let lastA = null;

                fieldNames.forEach((name, idx) => {
                    const val = selectedValue(name);
                    if (val === 'B' && firstB === null) firstB = idx;
                    if (val === 'A') lastA = idx;
                });

                fieldNames.forEach((name, idx) => {
                    const a = document.querySelector(`input[name="${name}"][value="A"]`);
                    const b = document.querySelector(`input[name="${name}"][value="B"]`);

                    // If B was chosen in some row, all later rows must be B
                    if (firstB !== null && idx > firstB) {
                        if (b && !b.checked) b.checked = true;
                    }

                    // If A was chosen in some row, all earlier rows must be A
                    if (lastA !== null && idx < lastA) {
                        if (a && !a.checked) a.checked = true;
                    }

                });
            }

            // Attach listeners
            fieldNames.forEach((name) => {
                document.querySelectorAll(`input[name="${name}"]`).forEach(inp => {
                    inp.addEventListener('change', enforceSingleSwitch);
                });
            });

            enforceSingleSwitch(); // initial check
        })();
    </script>

{% endblock %}