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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Your choices
    </div>
    <div class="col-3 d-flex justify-content-center align-items-center">
        <div id="chosenColorText" style="font-size: 16px; font-weight: normal; margin:3%;">
            Your selected color:
        </div>
        <div id="selectedColor"
            style="background-color:{{player.participant.color}};
            height: 30px; width: 30px;margin:3%;">
        </div>
    </div>
</div>
{% endblock %}

{% block content %}

<div class="d-none">
    {{ formfield_errors "choice_Study2" }}
    <input type="hidden" id="choice_Study2" name="choice_Study2" value="-9999"></input>
</div>

<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">
            <div class="alert alert-warning">
                For each safe amount, please choose whether the risk or that safe amount
                shall determine your bonus.         
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col" >
            <table id="choiceTable" class="table table-striped table-bordered table-sm" 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: 130px !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
            that belongs to your selected color 
            is  £<span id="switchAmount"></span> or less. Otherwise,
            you choose the safe amount.
        </span>
        
        <span id="alwaysRisk" class="d-none">
            You always choose the risk.
        </span>
        
        <span id="alwaysSafe" 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
        >
        Confirm choices
    </button>

    <button id="next_page_btn" 
        type="button"
        onclick = "t_modal()"
        class="btn btn-primary mt-2 d-none"
        disabled
        >
        Confirm choices
    </button>

    
</div>

{% if testing %}
    {{ formfield 'feedback_task' }}
{% 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.fixedAmounts

    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))

    // Enforce single switching
    $(document).ready( 
        $('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 for single switch
                const radios = document.querySelectorAll('input[type=radio]:checked');
                
                let singleSwitch = true;
                let lastChoice;
                let lastOption1 = -1 // Never use the risk

                // Enable next-button if all radios have been clicked
                if (radios.length == amounts.length) {
                    // All radio-buttons clicked
                    document.getElementById("notSingleSwitchButton").disabled = false;
                    document.getElementById("next_page_btn").disabled = false;

                    for (let radio of radios) {
                        if (radio.name == "0" ) {
   
                            lastChoice = radio.value
                            if (radio.value == "1") {
                                // Risk in first row
                                lastOption1 = radio.name
                            }
                            continue;
                        }

                        if (lastChoice == 2 && radio.value == "1") {
                            singleSwitch = false;
                            break;
                        } 
                        
                        if (radio.value == "1"){
                            lastOption1 = radio.name
                        }
                        lastChoice = radio.value;                    
                    }

                
                } else {
                    singleSwitch = false;
                }

                
                if (singleSwitch) {
                    // Toggle to next page button
                    document.getElementById("choice_Study2").value = lastOption1;
                    console.log(document.getElementById("choice_Study2").value)
                    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("alwaysRisk").classList.add("d-none")
        document.getElementById("alwaysSafe").classList.add("d-none")
        document.getElementById("normalChoiceModal").classList.add("d-none")
        document.getElementById("alwaysRiskModal").classList.add("d-none")
        document.getElementById("alwaysSafeModal").classList.add("d-none")
        
        if (amountID == -1){
            // Always safe
            document.getElementById("alwaysSafe").classList.remove("d-none")      
            document.getElementById("alwaysSafeModal").classList.remove("d-none")      
        } else if (amountID == amounts.length -1) {
            document.getElementById("alwaysRisk").classList.remove("d-none")
            document.getElementById("alwaysRiskModal").classList.remove("d-none")
        } else {
            const lowAmount = amounts[amountID][1]
            
            document.getElementById("switchAmount").innerHTML = lowAmount
            document.getElementById("switchAmountModal").innerHTML = lowAmount
            document.getElementById("normalChoice").classList.remove("d-none")   
            document.getElementById("normalChoiceModal").classList.remove("d-none")   
        }

        document.getElementById("choiceSummary").classList.remove("d-none")
        document.getElementById("choiceSummary").scrollIntoViewIfNeeded()
    }

    function t_modal() {
        $("#submitPopUp").modal("toggle")
    }

</script>

<!-- Confirm Modal -->
<div class="modal fade" id="submitPopUp" tabindex="-1" role="dialog" aria-labelledby="submitPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document" style="top:28%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="t_modal()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div id="normalChoiceModal" class="modal-body d-none">
                You choose the risk if the safe amount 
                that belongs to your selected color
                is  £<span id="switchAmountModal"></span> or less. Otherwise,
                you choose the safe amount.
            </div>
            
            <div id="alwaysRiskModal" class="modal-body d-none">
                You always choose the risk.
            </div>
            
            <div id="alwaysSafeModal" class="modal-body d-none">
                You always choose the safe amount.
            </div>

            
            
            <div class="row"><br></br></div>
            <div class="modal-footer justify-content-center">                
                <button type="button" class="btn btn-secondary" onclick="t_modal()" data-dismiss="modal">Let me
                    think again.</button>
                <!-- MARK is no longer the default next_page_btn like on the other pages, because we want a staggered min_time on the mainpage and the pop-up. The Button triggering this modal has the id next_page_btn now. -->
                <button class="btn btn-primary" id="next_page_modal_btn">
                    Yes, this is what I
                    want.
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}