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

{% block title %}
<div class="row align-items-center">
    <div class="col-8">
        Your choices
    </div>
    <div class="col-4 d-flex justify-content-center align-items-center">
        <div id="chosenColorText" style="font-size: 16px; font-weight: normal; margin:3%;">
            Your selected colored form:
        </div>
        <div id="selectedShape" class="{{player.participant.shape}}" style="--element-color: {{player.participant.color}}">
        </div>
    </div>
</div>
{% endblock %}

{% block content %}

<div class="d-none">
    {{ formfield_errors "choice_Study3" }}
</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">
                Please choose whether the risk or 
                the safe amount
                shall determine your bonus.    
            </div>
        </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;"
                            >    
                            <span id="fixedAmount"></span>   
                            </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_Study3" name="choice_Study3" 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" 
        type="button"
        onclick = "t_modal()"
        class="btn btn-primary mt-2"
        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>

<!--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%"
            document.getElementById("fixedAmount").innerHTML= fixedAmount
        }
    );

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

        // Start test of input
        let inputNumber = parseInt(inputText)
        let inputError = false;
        
        document.getElementById("choice_Study3").value=parseInt(inputText)
        
        if ((inputNumber > 101 || inputNumber < 0)) {
            document.getElementById("warningRow").classList.remove("d-none")
            inputError = true;
        }

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

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

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

    }

    

    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 at least <span id="chosenWinningCardsModal"></span>
                cards are winning cards. 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 %}