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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Your instructions
    </div>
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right"
        style="font-size: 16px; font-weight: normal;">
        
        <div class="row">
            <div class="col-6 d-flex align-items-center justify-content-center" style="padding: 0;">
                You selected:
            </div>
            <div class="col-6 d-flex justify-content-center align-items-right">
                <svg class="envelopeHeader"
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">

                    <!--Outer frame-->
                    <polyline 
                        points="0,0 0,100 200,100 200,0 0,0"
                        style="fill: #fff8ef;"/>

                    <!--Inner lines-->
                    <line x1="0" y1="0" x2="100" y2="35"/>
                    <line x1="200" y1="0" x2="100" y2="35"/>
                    
                    <text 
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{player.participant.type}}
                    </text>
                </svg>
            </div>
        </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">
            Each line in the following list describes the content of 
            one of the envelopes that you could select earlier. An option pair 
            is given by the risk on the left, which is identical in all envelopes, and the 
            safe amount on the right, which varies across envelopes.  
            <br></br>
            
            On each line, <strong>click the button next to the option 
            that we should give you</strong> if that line describes the option pair in your Envelope {{player.participant.type}}.  
            
        </div>
    </div>
    </br>
    <div class="row">
        <div class="col" >
            <div id="table-wrapper" class="table-wrapper" 
            style="
                max-height: 41vh;
                overflow-y: auto;" >
            <table id="choiceTable" class="table table-striped table-bordered table-sm" style="background-color: white;">
                <colgroup>
                    <col style="width: 40%;"/>
                    <col style="width: 10%;"/>
                    <col style="width: 10%; border-left:3px solid lightgray;"/>
                    <col style="width: 40%;"/>
                </colgroup>
                <thead>
                    <tr class="header" style="position: sticky; top: 0; z-index: 1;">
                        <th id="option1_header" colspan="2" class="text-center" style="position: sticky; top: 0; z-index: 1; background:white;"> Please give me <span style="color:green">the risk</span></th>
                        <th id="option2_header" colspan="2" class="text-center" style="position: sticky; top: 0; z-index: 1; background:white;"> Please give me <span style="color:green">the safe amount</span></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: center;text-align:center;">
                            <div style="position: sticky;top: 15vh; z-index: 0;vertical-align: center;" class="riskPicture align-middle"></div>
                        </td>
                    {{endif}}
                        
                        <!-- Radio select -->
                        <td name="selectionButton" class="formfield">
                            <input type="radio" class="largerRadio" name="{{ row }}" value="1" data-toggle="popover" required>
                        </td>
                        <td name="selectionButton" class="formfield">
                            <input type="radio" class="largerRadio" name="{{ row }}" value="2" data-toggle="popover" required>
                        </td>
                        
                        
                        <!-- Fixed Amount -->
                        <td class="text-center"> £{{amount}} </td>
                    </tr>
                {{endfor}}

            </tbody>
            
            </table>
            </div>
        </div>
        <div class="col-12 container text-center">
            <button id="slideDown" type="button" class="btn align-items-center">
                <svg class="arrows">
                    <path class="a1" d="M0 0 L30 15 L60 0"></path>
                </svg>
            </button>

        </div>
    </div> 

    </br>

    <div class="row">
        <div class="col">
            <div id="choiceSummary" class="alert alert-info d-none">
                <strong>
                    Thank you for giving your 21 instructions, according 
                    to which: 
                </strong>
                </br>
                <span id="normalChoice" class="d-none">
                    We give you the risk 
                    if the 
                    safe amount of the  
                    option pair in your 
                    Envelope {{player.participant.type}}    
                    is  £<span id="switchAmount"></span> or less. Otherwise,
                    we give you the safe amount.
                </span>
                
                <span id="alwaysRisk" class="d-none">
                    We always give you the risk, 
                    regardless 
                    how large or small the safe amount in your 
                    Envelope {{player.participant.type}} is.
                </span>
                
                <span id="alwaysSafe" class="d-none">
                    We always give you the safe amount, regardless 
                    how large or small it is.
                </span>
        
                </br>
                <button id="next_page_btn" 
                    class="btn btn-primary mt-2 d-none"
                    disabled
                    >
                    Confirm instructions
                </button>
            </div>
        </div>
    </div>

    <div id="notSingleSwitch" class="alert alert-danger d-none">
        Please adjust your instructions.
        </br>
        Your instructions must be consistent. 
        If you instruct us to give you the safe amount instead of the
        risk for some safe amount, you must also instruct us to give you
        the safe amount for all larger safe amounts.
    </div>

    <button type="button" 
        id="notSingleSwitchButton"
        class="btn btn-primary mt-2 d-none"
        onclick="notSingleSwitch()"
        disabled
        >
        Confirm instructions
    </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
    let radioClicks = 0

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

    $(document).ready( 
        // Enforce single switching
        $('input[type=radio]').change(
            function () {
                radioClicks += 1 // Count clicks
                if (radioClicks == 1) {
                    instruction_modal($(this));
                }

                // 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 allClicked = false;
                let lastChoice;
                let lastOption1 = -1 // Never use the risk

                // Enable next-button if all radios have been clicked
                if (radios.length == amounts.length) {
                    allClicked = true;
                    document.getElementById("slideDown").classList.add("d-none");

                    // All radio-buttons clicked
                    document.getElementById("notSingleSwitchButton").classList.remove("d-none");
                    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 (allClicked && 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 if (allClicked) {
                    // Toggle to warning page button
                    document.getElementById("notSingleSwitchButton").classList.remove("d-none");
                    document.getElementById("next_page_btn").classList.add("d-none");
                } else {
                    // Hide buttons
                    document.getElementById("notSingleSwitchButton").classList.add("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("notSingleSwitchButton").classList.add("d-none")
        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")
        
        if (amountID == -1){
            // Always safe
            document.getElementById("alwaysSafe").classList.remove("d-none")            
        } else if (amountID == amounts.length -1) {
            document.getElementById("alwaysRisk").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("choiceSummary").classList.remove("d-none")
    }
    
    function instruction_modal(triggerElem) {
        if (triggerElem) {
            const val = triggerElem.attr("value")
            const row = triggerElem.attr("name")
            
            let safeAmount = amounts[row]
            let instuctedOption = ""
    
            if (val == 1) {
                instuctedOption = "risk"
            } else if (val == 2) {
                instuctedOption = "safe amount"
            }
    
            document
                .getElementById("instructionBtn")
                .innerHTML=instuctedOption
            /*
            document
                .getElementById("highPayoff")
                .innerHTML=payoffs[0].toFixed(2)
            
            document
                .getElementById("lowPayoff")
                .innerHTML=payoffs[1].toFixed(2)
            */
            document
                .getElementById("fixedAmmountChoice")
                .innerHTML=safeAmount[1]
        
        
            // Test if button is in upper or lower part of screen
            var elem = document.getElementsByName(triggerElem.attr("name"))[0]
            var rect = elem.getBoundingClientRect();
            var intFrameHeight = window.innerHeight

            if (rect.top <= (0.5 * intFrameHeight)) {
                document.getElementById("instructionsModalDialog").style.alignItems = "flex-end"
            } else {
                document.getElementById("instructionsModalDialog").style.alignItems = "flex-start"
            }
            
            }

        $("#instructionPopUp").modal({
            backdrop: 'static',
            keyboard: false,
        })
        $("#instructionPopUp").modal('toggle')
        $(".modal-background").css('opacity', '0.9');

        setTimeout(()=>{
            document.getElementById("modalConfirmBtn").disabled = false;
        }, 5000)
    }

    const arrowDown = document.getElementById('slideDown');

    arrowDown.onclick = function () {
        let elem = document.getElementById("table-wrapper")
        $('#table-wrapper').animate({scrollTop: elem.scrollTop + 150 },'100', "linear");
    };

</script>

<!-- Instructions Modal -->
<div class="modal fade bd-example-modal-lg" id="instructionPopUp" tabindex="-1" role="dialog" aria-labelledby="instructionPopUpLabel"
    aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div id="instructionsModalDialog" class="modal-dialog modal-dialog-centered modal-lg" role="document" 
    style="align-items: flex-start;">
        <div class="modal-content">
            <div class="modal-header text-center" style="padding:5px">
                <h5 class="modal-title w-100">You just gave the following instruction: </h5>
            </div>

            <div class="modal-body" style="padding: 5px">
                <div class="row">
                    <div class="col-10 offset-1 alert alert-info" style="margin-top: 3px; margin-bottom: 3px; padding-top:2px; padding-bottom: 2px;">
                        <strong>Please give me the <span id="instructionBtn"></span>
                        </strong>
                        if 
                            the option pair in my Envelope {{player.participant.type}} 
                            is: 
                        <table class="table table-sm table-bordered border-dark" style="background-color: white;">
                            <tbody>
                                <tr>
                                    <td id="option1_header" class="clickable text-center" style="width: 50%">
                                        <strong>Risk</strong>
                                    </td>
                                    <td id="option2_header" class="clickable text-center" style="width: 50%">
                                        <strong>Safe amount</strong> 
                                    </td>
                                </tr>
                                <tr>
                                    <td id="option1">
                                        <div class="riskPictureModal"></div>
                                    </td>
                                    <td id="option2">
                                        <div id="emptyAmount" class="d-flex align-items-center justify-content-center"
                                            style="
                                            width: 100%;
                                            left: 0px;
                                            top: 0px;
                                            margin: 0 auto;
                                            font-size: 500%;
                                            font-weight: 200;"
                                        >    
                                        £<span id="fixedAmmountChoice"></span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

                
            </div>
            
            <div class="modal-footer justify-content-center" style="padding: 1px">                
                <div class="row d-flex justify-content-center">
                    <div class="col-12 d-flex justify-content-center" style="padding:0;">
                        Please also give us instructions for the other option pairs.
                        You can still change all your instructions.
                    </div>
                </div>
                <button id="modalConfirmBtn" type="button" class="btn btn-primary" onclick="instruction_modal()" data-dismiss="modal" disabled>
                    Got it. Let me give the other instructions.</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}