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

{% block title %}
    Your choice
{% endblock %}

{% block content %}

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

<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">
            
            <table class="table table-bordered border-dark" style="background-color: white">
                <tbody>
                    <tr>
                        <td id="option1_header" class="clickable text-center" style="width: 50%">
                            <strong>Option 1 (the risk)</strong>
                        </td>
                        <td id="option2_header" class="clickable text-center" style="width: 50%">
                            <strong>Option 2 (the amount)</strong> 
                        </td>
                    </tr>
                    <tr>
                        <td id="option1" class="clickable">
                            <div class="riskPicture"></div>
                        </td>
                        <td id="option2" class="clickable">
                            <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">
            <div class="alert alert-info">
                Please choose which Option determines your bonus by clicking on it.
            </div> 
        </div>
    </div>
</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 testAmounts = js_vars.amountsToEnter
    const payoffs = js_vars.payoffs
    const fixedAmount = js_vars.fixedAmount
    let past_inputs = []
   
    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))

    document.getElementById("fixedAmount").innerHTML= fixedAmount

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

    $('#submitPopUp').on('hidden.bs.modal', function (e) {
        // Remove content
        document.getElementById("optionCopy").remove();
        document.getElementById("option1Modal").classList.add("d-none")
        document.getElementById("option2Modal").classList.add("d-none")
        
    })

    $(".clickable").click(function(e){
        let id = this.id;

        let usableID 
        
        if (id == "option1" || id == "option1_header") {
            document.getElementById("option1Modal").classList.remove("d-none")
            document.getElementById("choice_Study1").value = 1
            usableID = "option1"
        } else if (id == "option2" || id == "option2_header"){
            document.getElementById("option2Modal").classList.remove("d-none")
            document.getElementById("choice_Study1").value = 2
            usableID = "option2"
        }
        
        
        let elem = document.getElementById(usableID)
        let clone = elem.cloneNode(true);
        clone.id = 'optionCopy';

        var placing = document.querySelector('#chosenOption')
        placing.after(clone);
        
        t_modal();

     });

</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="option1Modal" class="modal-body d-none">
                Your bonus will be determined by Option 1 (the risk) as shown below.
            </div>
            
            <div id="option2Modal" class="modal-body d-none">
                Your bonus will be determined by Option 2 (the amount) as shown below.
            </div>
            
            <div id="chosenOption" class="modal-body"></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 %}