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

{% block title %}
    How to make your choices
{% endblock %}

{% block content %}


<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col-12">    
            <p>
                Below is an example of your decision screen. 
                For each safe amount in the right column, you must choose whether 
                the risk or that safe amount determines your bonus. 
                You choose the risk by clicking the left button in the middle column 
                of the respective row and the safe amount by clicking the right button.
            </p>
            
            <p>
                Your choices must be consistent: If you choose some safe amount, say £0.90, 
                over the risk, then you must also choose all larger safe amounts, such as £1.10 and £1.30, over the risk.
                Note that you can change your choices as often as you wish. 
                Please click the blue button below if you are satisfied with your choices.
            </p>

            <hr></hr>

            <h4><strong>Exemplary choices</strong></h4>
            
            <p> 
                For each safe amount, please choose whether the risk or that safe amount
                shall determine your bonus.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col" >
            <table id="choiceTable" class="table table-striped table-bordered" style="background-color: white">
                <thead>
                    <tr class="header">
                        <th id="option1_header" class="text-center" style="width:30%" >Risk</th>
                        <th class="formfield" style="width:10%; min-width: 150px !important;">Your choices</th>
                        <th id="option2_header" class="text-center" style="width:30%">Safe amounts</th>
                    </tr>
                </thead>
            
            <tbody>
                <tr><!-- Used to switch table stripes--></tr>
                
                {{for row, amount in amounts}}
                    
                    <tr>
                    {{if row == 0 }}
                        <!-- Risk Picture -->
                        <td id="option1" rowspan = "{{numOptions}}" style="vertical-align : middle;text-align:center;">
                            <div class="riskPicture align-middle"></div>
                        </td>
                    {{endif}}
                        
                        <!-- Radio select -->
                        <td name="selectionButton" class="formfield">
                            <input type="radio" class="largerRadio" name="{{ row }}" value="1" required>
                            <input type="radio" class="largerRadio" name="{{ row }}" value="2" required>
                        </td>
                        
                        <!-- Fixed Amount -->
                        <td class="text-center">  £{{amount}}</td>
                    </tr>
                {{endfor}}

            </tbody>
            
            </table>
        </div>
    </div>

    <div id="choiceSummary" class="alert alert-info d-none">
        <span id="normalChoice" class="d-none">
                You choose the risk if the safe amount 
                is  £<span id="switchAmount"></span> or less. Otherwise,
                you choose the safe amount. </br>
            </span>
            
            <span id="alwaysOpt1" class="d-none">
                You always choose the risk.
            </span>
            
            <span id="alwaysOpt2" class="d-none">
                You always choose the safe amount.
            </span>
    
    </div>
    
    <div id="notSingleSwitch" class="alert alert-danger d-none">
        Please adjust your choices.
        Remember that your choices must be consistent. 
        If you choose some safe amount over the risk, you must also choose all larger safe amounts over the risk.
    </div>

    
    <button type="button" 
        id="notSingleSwitchButton"
        class="btn btn-primary mt-2"
        onclick="notSingleSwitch()"
        disabled
        >
        Which choice determines my bonus?
    </button>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2 d-none"
        disabled
        >
        Which choice determines my bonus?
    </button>
</div>

{% if testing %}
    {{ formfield 'feedback_option2' }}
{% endif %}

<!--Load React-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!--Load Babel-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel" src="{% static 'js/shellGameResolution.js' %}"></script>

<script type="text/babel">
    const payoffs = js_vars.payoffs
    const amounts = js_vars.amounts
   
    
    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))
    

    $(document).ready(function () {
        $('input[type=radio]').change(
            function () {
                // Ensure normal table format and look
                document.getElementById("choiceSummary").classList.add("d-none")
                document.getElementById("notSingleSwitch").classList.add("d-none")
                var tableCells = document.getElementsByName("selectionButton")

                for (let cell of tableCells){
                    cell.style.backgroundColor = "transparent"
                }
                
                // Check if single switching holds
                let radios = document.querySelectorAll('input[type=radio]');
                let singleSwitch = true;
                let lastChoice;
                let lastOption1 = -1

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

                    if (! $('input[name='+ radio.name +']:checked').length) {
                        // none of the radio buttons was clicked
                        singleSwitch = false;
                        break;
                    }

                    if (i==0 && radio.checked) {
                        lastChoice = radio.value
                        if (radio.value == "1"){
                            lastOption1 = radio.name
                        }
                        continue;
                    }

                    if (lastChoice == 2 && radio.checked && radio.value == 1) {
                        singleSwitch = false;
                        break;
                    } else if (radio.checked) {
                        lastChoice = radio.value;

                        if (radio.value == "1"){
                            lastOption1 = radio.name
                        }
                    }
                }

                // Enable next-button if all radios have been clicked
                if ($('input[type=radio]:checked').length == 11) {
                    document.getElementById("notSingleSwitchButton").disabled = false;
                    document.getElementById("next_page_btn").disabled = false;
                }
                
                if (singleSwitch) {
                    // Toggle to next page button
                    document.getElementById("notSingleSwitchButton").classList.add("d-none");
                    document.getElementById("next_page_btn").classList.remove("d-none");
                    pasteAmounts(parseInt(lastOption1))
                } else {
                    // Toggle to warning page button
                    document.getElementById("notSingleSwitchButton").classList.remove("d-none");
                    document.getElementById("next_page_btn").classList.add("d-none");
                }

            }
        );
    });

    // global variable to make it accessible in mutliple iterations
    let radioChoices = {}

    function notSingleSwitch() {
        document.getElementById("notSingleSwitch").classList.remove("d-none")
        var tableCells = document.getElementsByName("selectionButton")
        
        for (let cell of tableCells){
            cell.style.backgroundColor = "#ffc6c4"
        }

        // Loop over radio buttons to save choice
        

        const checkedRadios = document.querySelectorAll('input[type=radio]:checked');

        for (let radio of checkedRadios){
            if (! radioChoices[radio.name]) {
                radioChoices[radio.name] = []
            }
            radioChoices[radio.name].push(radio.value)
        }

        liveSend(radioChoices)
    }

    function pasteAmounts(amountID) {

        document.getElementById("normalChoice").classList.add("d-none")
        document.getElementById("alwaysOpt1").classList.add("d-none")
        document.getElementById("alwaysOpt2").classList.add("d-none")

        document.getElementById("choiceSummary").classList.remove("d-none")
        
        if (amountID == -1) {
            // Always Option 2
            document.getElementById("alwaysOpt2").classList.remove("d-none")
        } else if (amountID == amounts.length - 1) {
            // Always Option 1
            document.getElementById("alwaysOpt1").classList.remove("d-none")
        } else {
            document.getElementById("normalChoice").classList.remove("d-none")
            const lowAmount = amounts[amountID][1]
            const highAmount = amounts[amountID+1][1]
            
            document.getElementById("switchAmount").innerHTML = lowAmount
        }
    }



</script>


{% endblock %}