{{ block title }}Choice{{ endblock }}
{{ block content }}
<div id="floating-button" onmouseover="showImage()" onmouseout="hideImage()">
    <p style="color: blue;">Hover to see experimental set-up.</p>
</div>
<div id="image-container" style="display: none;">
     {% if player.treatment == 'sym' %}
                <img src="{% static 'global/JMP/Symmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'asy' %}
                <img src="{% static 'global/JMP/Asymmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'amb' %}
                <img src="{% static 'global/JMP/Ambiguous.png' %}" style="width:600px; height:auto;" />
            {% endif %}
</div>

<script>
  function showImage() {
    document.getElementById('image-container').style.display = 'block';
  }

  function hideImage() {
    document.getElementById('image-container').style.display = 'none';
  }
</script>

<p>
    You are offered a choice between two boxes, A and B.
    You will be paid $10 if you pick a golden box if this choice is selected for payment.
    Box A and B are different in the following way:
        <ol>
            <li> Box A has 0% chance of being golden. </li>
            <br>
            <li> Box B was randomly selected from the 200 boxes. </li>
                <ol>
                    <li> We will draw 4 balls, one at at time with replacement, from Box B. </li>
                    <li> You can make your choice base on the number of red balls that we draw from B. </li>
                </ol>
        </ol>
</p>
<input type="hidden" name="p4lott0" id="p4lott0">
{{ formfield_errors "p4lott0" }}
<table class="table table-striped">
    <colgroup>
        <col width="45%">
        <col width="10%">
        <col width="45%">
    </colgroup>
    <tr>
        <td align="center"><b>Choose Box A</b></td>
        <td></td>
        <td align="center"><b>Choose Box B</b></td>
    </tr>
    {% for item in right_side_amounts_percentages %}
    <tr>
    <td align="right">
       Box A - 0% chance of being golden.
    <td align="middle">
        <input type="radio"
               value="left"
               name="{{ item.amount }}"
               required>&nbsp;&nbsp;
        <input type="radio"
               name="{{ item.amount }}"
               value="right" data-amount="{{ item.amount }}"
               required>
    </td>
    <td align="left">
        Box B - if <b>{{ item.amount }} out of 4</b> <b>({{ item.percentage }}%)</b> balls drawn are red.
    </td>
</tr>
{% endfor %}
</table>
</div>


<p>
    You may wonder if there is a "correct" choice to the above. Indeed, it is possible, using statistical theory, to calculate
    the choice for each row that would give you the highest probability of winning $10. You may not know what the correct choice is,
    therefore, we offer you after each decision a chance to learn the correct choice and change your choices. In particular, we offer you three options:
     <form role="form">
      <div class="form-group">
        <label for="p4lottlevel0">Choose an option:</label>
        {{ form.p4lottlevel0 }}
      </div>
    </form>
</p>

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

{{ endblock }}

{{ block scripts }}
<script>
     let allRadios = document.querySelectorAll('input[type=radio]')
    function submitForm() {
        if (document.getElementById('p4lott0') !== null) {
            let form = document.getElementById('form');
            if (form.reportValidity()) {
                let switchingPoint = document.getElementById('p4lott0');
                let allChoicesAreOnLeft = true;
                for (let radio of allRadios) {
                    if (radio.value === 'right' && radio.checked) {
                        switchingPoint.value = radio.dataset.amount;
                        allChoicesAreOnLeft = false;
                        break;
                    }
                }
                if (allChoicesAreOnLeft) {
                    // '9999' represents the valueInput if the user didn't click the right side for any choice
                    // it means their switching point is off the scale. you can change 9999 to some other valueInput
                    // that is larger than any right-hand-side choice.
                    switchingPoint.value = '9999';
                }
                form.submit();
            }
        }
    }

   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;
        }
       }
    }

}

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

</script>

{{ endblock }}