{{ block title }}
Part 1 - Lotteries vs Safe Options
{{ endblock }}

{{ block content }}
<strong>Choose a value for each row</strong>

<form id="form">
<table class="table table-striped">
    <colgroup>
        <col width="45%">
        <col width="10%">
        <col width="45%">
    </colgroup>
    <tr>
        <td align="right"><b>Lottery</b></td>
        <td></td>
        <td align="left"><b>Safe Payment</b></td>
    </tr>
    {{ for key, amount in right_side_amounts.items() }}
    <tr>
        <td align="right">
            <b>10€</b> with 50% probability, <b>0€</b> with 50% probability
        <td align="middle">
            <input type="radio"
                   name="c{{ key }}"
                   value="left"
                   required="required">&nbsp;&nbsp;
            <input type="radio"
                   name="c{{ key }}"
                   value="right"
                   required="required">
        </td>
        <td align="left">
            <b>{{ amount }}€ </b> with 100% probability
    </tr>
    {{ endfor }}
</table>
</form>

<div style="width:100px; margin:0 auto;">
    <button type="button" class="btn btn-primary" onclick="submitForm()">Next</button>
</div>


{{ endblock }}


{{ block scripts }}

<script>


    document.addEventListener("DOMContentLoaded", function() {
        const leftButtons = document.querySelectorAll('input[type="radio"][value="left"]');
        const rightButtons = document.querySelectorAll('input[type="radio"][value="right"]');

        leftButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Set all left buttons before this to checked
                for (let i = 0; i <= index; i++) {
                    leftButtons[i].checked = true;
                }
                // Set all right buttons after this to checked
                for (let i = index + 1; i < rightButtons.length; i++) {
                    rightButtons[i].checked = true;
                }
            });
        });

        rightButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Set all left buttons before this to unchecked
                for (let i = 0; i < index; i++) {
                    leftButtons[i].checked = true;
                }
                // Set all right buttons after this to checked
                for (let i = index + 1; i < rightButtons.length; i++) {
                    rightButtons[i].checked = true;
                }
            });
        });
    });

        function submitForm() { // Accept the event object as a parameter
        let errorMessage = '';
        for (let i = 0; i <= 1000; i += 50) {
            if (!document.querySelector(`input[name="c${i}"]:checked`)) {
                errorMessage += `Please select an option for the radio button group named ${i}. `;
            }
        }

        if (errorMessage) {
            event.preventDefault(); // Prevent form submission if there are errors
            alert(errorMessage);
        } else {
            // If no errors, submit the form
            let form = document.getElementById('form');
            form.submit();
        }
    }

</script>
{{ endblock }}