{{ extends 'global/Page.html' }}
{{ block title }} Task 2: question {{title}} out of 16 {{ endblock }}

{{ block content }}

<p class="text-center">
    <button type="button" id="show-instructions" class="btn btn-primary">
        Click to see the reminder of the instruction
    </button>
</p>
<div id="instructions-reminder">
     {{ include C.INSTRUCTION_TEMPLATE }}
     <p class="text-end">
         <button type="button" id="close-instructions" class="btn btn-secondary">
             Close
         </button>
    </p>
</div>

<p style: align="center">
   <b>Which option do you prefer?</b>
</p>
<p>
            <table class="mb-4" align="center" id="customers" >

                <col width="400">
                <col width="20">
                <col width="20">
                <col width="300">
                           
                 <thead>
                    <tr align="center">
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Option A <br>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                      
                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                      
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Option B<br>
                        </th>
                    </tr>
                </thead>
                <thead>
                    <tr align="center">
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                           You gain €10 if the <span style="color:Indigo"> {{ algorithm_statement }} analyst's</span> accuracy rate falls within the range of <span style="color:green">{{ prob_range }}</span>; €0 otherwise
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       <br><br>A
                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       <br><br>B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                    You gain €10 with the following probability; €0 otherwise
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {{ for p in ambiguity_percentages }}
                        <tr>
                            {{ if forloop.counter == 1 }} 
                                <!-- Option A -->
                                <td align="center" rowspan="20">       
                                    
                           <img src="{% static event %}" width="400px"/>

                            </td>
                            
                            {{ endif }}
                            
                            <!-- radio select form fields -->
                            <td align="center" >
                                <input type="radio" name="choice_{{ forloop.counter }}" value="left" data-num="{{ forloop.counter }}">
                            </td>
                            <td align="center">
                                <input type="radio"  name="choice_{{ forloop.counter }}" value="right" data-num="{{ forloop.counter }}">
                            </td>
                            <!-- Option B -->
                            <td align="center" >
                                <b>{{ p }}</b> 
                            </td>
                        </tr>
                    {{ endfor }}         
                </tbody>
            </table>

<input type="hidden" name="ambiguity_switch" id="id_switching_point">

<p class="text-center">
  <button class="btn btn-outline-secondary" id="submit-switch">
                Confirm
          </button>
</p>  

<p id='warning' style="font-size: 12px; text-align: center">
    <em>
        Once you press the confirm button, you cannot go back. Think carefully before you make a decision.<br>
        Please raise your hand if anything is unclear.
    </em>
</p>
    

{{ endblock }}

{{ block scripts }}
<script>
window.onload = () => {
  	const warning = document.getElementById('warning');
  
    $('input[type=radio]').on('change', function () {
        let clickedRadio = this,
            afterClickedRadio = false;
      
      	if (clickedRadio.value === 'right' || parseInt(clickedRadio.dataset.num) === parseInt(js_vars.num_choices)) {
          	warning.style.display = 'block';
        }

        let radios = document.querySelectorAll('input[type=radio]');
        for (let i = 0; i < radios.length; ++i) {
            let radio = radios[i];

            if (radio === clickedRadio) {
                afterClickedRadio = true;
                radio.checked = true;
                continue;
            }
            if (!afterClickedRadio && radio.value === 'left') {
                radio.checked = true;
            }
            if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
                radio.checked = true;
            }
        }
    });

    $('#submit-switch').on('click', function (e) {
        let form = $('#form')[0];
        if (form.checkValidity()) {
          	e.preventDefault();
            let radios = document.querySelectorAll('input[type=radio]'),
            decision = document.querySelector('input[name="ambiguity_switch"]');

            for (let i = 0; i < radios.length; ++i) {
                let radio = radios[i];

                if (radio.value === 'right' && radio.checked) {
                    decision.value = radio.dataset.num;
                    break;
                } else if (radio.value === 'left' && radio.checked && parseInt(radio.dataset.num) === parseInt(js_vars.num_choices)) {
                    decision.value = parseInt(js_vars.num_choices) + 1;
                }
            }

            console.log(decision.value);

            form.submit();
        }
    });
  	
  	const showIntructions = document.getElementById('show-instructions');
  	const instructions = document.getElementById('instructions-reminder');
  	let shown = false;
  	showIntructions.addEventListener('click', function (e) {
      	if (!shown) {
          	shown = true;
        	instructions.style.display = 'block';
          	showIntructions.classList.add("btn-secondary");
          	showIntructions.innerHTML = 'Hide Instructions';
        } else {
          	shown=false;
          	instructions.style.display = 'none';
          	showIntructions.classList.remove("btn-secondary");
          	showIntructions.innerHTML = 'Click to see the reminder of the instruction';
        }
      	
      	showIntructions.blur();
    })
  
  	document.getElementById('close-instructions').addEventListener('click', function (e) {
      	shown=false;
      	instructions.style.display = 'none';
      	showIntructions.classList.remove("btn-secondary");
      	showIntructions.innerHTML = 'Click to see the reminder of the instruction';
    })
}
</script>
{{ endblock }}