{{ block title }} Task {{ task_order }} {{ endblock }}
{{ block content }}


<div class="instructions well well-lg" style="">
    <p>
        If this task is the one that has been selected for payment, you will be given {{Constants.x0}} piece of chocolate
        and {{Constants.y0}} dollars.

        <br><br> In addition, you are offered to choose one of the two extra payments.
        <ul>
            <li> In option A, you can get an extra {{Constants.dx1}} pieces of chocolate. </li>
            <li> Option B contains some extra dollars as shown in each row in the table below. </li>
        </ul>
        <br><br> Option A is preselected in all the rows. You can change to option B in any row as you wish.

        <br> One of the rows has been selected randomly by the computer. If this task is the one that has been selected for payment, your payment will be {{Constants.x0}} piece of chocolate
        and {{Constants.y0}} dollars plus the extra payment option you choose in the row.
        Since you do not know which row was selected for extra payment, you should choose each row as if it were the one row chosen for extra payment.
        <br><br>
        Please note that the chocolate flavor in the picture below is just an example. You can choose different flavors as you wish in the payment stage.
        <br>

        <img src="{{ static 'incomplete_preference/EGy_1.png' }}" style="width: 750px" align="middle"/>

    </p>

</div>

<input type="hidden" name="time_spent_egy_1" id="time_spent_egy_1">
{{ formfield_errors "time_spent_egy_1" }}

<input type="hidden" name="egy_1" id="egy_1">
{{ formfield_errors "egy_1" }}
<form method="post" id="form">
<table class="table table-striped">
    <colgroup>
        <col width="4%">
        <col width="42%">
        <col width="14%">
        <col width="42%">
    </colgroup>
    <tr>
        <td align = "middle"><b>Row Number</b> </td>
        <td align="right"><b>Choose Option A</b></td>
        <td></td>
        <td align="left"><b>Choose Option B</b></td>
    </tr>
    {{ for m in list_m }}
        <tr>
        <td align = "middle"> {{ m }} </td>
        <td align="right">
           Option A: extra {{Constants.dx1}} pieces of chocolate
        <td align="middle">
            <input type="radio"
                   value="left"
                   name="egy_1_{{ m }}"
                   required
                   checked>
            <input type="radio"
                   name="egy_1_{{ m }}"
                   value="right"
                   data-amount="{{ m }}"
                   required>
        </td>
        <td align="left">
            Option B: extra {{m}} dollars
    </tr>
    {{ endfor }}
</table>

<button type="button" class="btn btn-primary" onClick="submitForm();">Next</button>
</form>

{{ endblock }}

{{ block scripts }}

<script>

    let allRadios = document.querySelectorAll('input[type=radio]')
    let len_list_m = parseFloat('{{ len_list_m }}')
    function submitForm() {
        if (document.getElementById('egy_1') !== null) {
            let form = document.getElementById('form');
            let checkedRadios = document.querySelectorAll('input[type=radio]:checked');
            if (checkedRadios.length === len_list_m) {
                if (form.reportValidity()) {
                    let choices = document.getElementById('egy_1');
                    let choices_tmp = "";
                    let allChoicesAreOnLeft = true;
                    for (let radio of allRadios) {
                        if (radio.value === 'right' && radio.checked) {
                            choices_tmp = choices_tmp + "R";
                            allChoicesAreOnLeft = false;
                        }
                        if (radio.value === 'left' && radio.checked) {
                            choices_tmp = choices_tmp + "L";
                        }
                    }
                    choices.value = choices_tmp;
                    let timeSpent = Date.now() - startTime;
                    // save the number in the hidden field
                    document.getElementById('time_spent_egy_1').value = timeSpent;
                    form.submit();
                }
            }
            if (checkedRadios.length < len_list_m){
                alert('Please complete all rows')
            }
        }
    }


    function onRadioClick(evt) {
        let clickedRadio = evt.target;
        let afterClickedRadio = false;
        let clickedRightRadio = clickedRadio.value === 'right';
        let clickedLeftRadio = clickedRadio.value === 'left';

        if(clickedRadio.value === 'right'){
        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
            }
            if (clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
                aRadio.checked = true;
            }
            if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
        }
        }
        if(clickedRadio.value === 'left'){
        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
                continue;
            }
            if (!afterClickedRadio &&  aRadio.value === 'left') {
                aRadio.checked = true;
            }
            if (afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
           }
         for (let aRadio of allRadios) {
            if (aRadio === clickedRadio && aRadio.value === 'left') {
              aRadio.checked = true;
            }
           }
        }
    }

    window.onload = function() {
        startTime = Date.now();
        }

    document.addEventListener("DOMContentLoaded", function (event) {
        for (let radio of document.querySelectorAll('input[type=radio]')) {
            radio.onchange = onRadioClick;
        }
    });

</script>



{{ endblock }}