{% 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.
                The left panel shows the outcomes of the risk 
                ({{highPayoff}}
                and {{lowPayoff}} in the example) 
                together with the card deck. 
                The right panel shows the safe amount ({{fixedAmount}} in the example).
            </p>
            
            <p>
                For 
                each possible number of winning cards 
                you choose whether the risk or the safe amount 
                determines your bonus. To do so, you must enter 
                the lowest number of winning cards for which you
                choose the risk over the safe amount into the 
                field below the panel. 
                You then choose the risk if it has at least 
                the number of winning cards you entered (and the 
                safe amount otherwise).
            </p>
            
            <p>
                In the example, you will certainly choose the 
                risk if all cards are winning cards (because you would then certainly
                get {{highPayoff}} rather than {{fixedAmount}}).
                Likewise, you will choose the 
                safe amount if there are zero winning cards. 
                But what about values
                in between?
            </p>

            <hr></hr>

            <h4><strong>Exemplary choices</strong></h4>
            
            <p> 
                Please choose whether the risk or 
                the safe amount
                shall determine your bonus.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col" >

            <table class="table table-bordered border-dark" style="background-color: white; height: 1px;">
                <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="riskPicture"></div>
                        </td>
                        <td id="option2" style="padding:0;">
                            <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;"
                            >    
                            {{fixedAmount}}
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
        </div>
    </div>

    <div class="row">
        <div class="col">
            <strong>Your choices:</strong> 
            I choose the risk if 
            <input type="number" id="choice_Instructions_input" name="choice_Instructions" step="1"
                onkeyup = "testInput(this.value);"
                style="width: 3em" />
            or more cards are winning cards. Otherwise, 
            I choose the safe amount. 
           <br> </br>
        </div>
    </div>

    <div id="warningRow" class="row d-none">
        <div class="col">
            <div class="alert alert-danger">
                Please note that you can only enter positive numbers between 0 and 101.
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div id="choiceSummary" class="alert alert-info d-none">
                You choose the risk if at least <span id="chosenWinningCards"></span>
                cards are winning cards. Otherwise, you choose the 
                safe amount. 
                <span id="alwaysSafe" class="d-none">
                    Thus, you effectively always choose the safe amount. 
                </span>
                <span id="alwaysRisk" class="d-none">
                    Thus, you effectively always choose the risk. 
                </span>
            </div>
        </div>
    </div>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2"
        disabled
        >
        Which choice (about which number of winning cards) 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>

<!--Load React Components-->
<script type="text/babel" src="{% static 'js/cardGame.js' %}"></script>

<script type="text/babel">
    const payoffs = js_vars.payoffs
    const probabilities = js_vars.probabilities
    const fixedAmount = js_vars.fixedAmount
    

    ReactDOM.render(
        <CardDeck
            payoffs = {payoffs}
            probabilities = {probabilities}
            resolution = {false}
        />, document.querySelector('.riskPicture'))

    $( document ).ready(
        () => {
            document.getElementById("emptyAmount").style.height = "100%"
        }
    )

    function testInput(inputText) {
        // Hide all warnings and summaries
        document.getElementById("next_page_btn").disabled = true;
        document.getElementById("choiceSummary").classList.add("d-none");
        document.getElementById("alwaysRisk").classList.add("d-none");
        document.getElementById("alwaysSafe").classList.add("d-none");
        document.getElementById("warningRow").classList.add("d-none")

        // Start test of input
        const inputElement = document.getElementById("choice_Instructions_input")
        let inputNumber = parseInt(inputText)
        let inputError = false;
        
        inputElement.value=parseInt(inputNumber)

        console.log(isNaN(inputElement))
        
        if ((inputNumber > 101 || inputNumber < 0)) {
            document.getElementById("warningRow").classList.remove("d-none")
            inputError = true;
        }

        console.log(inputText.length)

        if (!inputError && inputText.length > 0) {
            showChoiceSummary(inputNumber)
        }
    }

    function showChoiceSummary(inputNum){
        document.getElementById("choiceSummary").classList.remove("d-none");
        document.getElementById("chosenWinningCards").innerHTML= inputNum
        
        if (inputNum == 0) {
            document.getElementById("alwaysRisk").classList.remove("d-none");
        } else if (inputNum == 101) {
            document.getElementById("alwaysSafe").classList.remove("d-none");
        }

        document.getElementById("next_page_btn").disabled = false;

    }

</script>


{% endblock %}