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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Your bonus
    </div>
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right d-none"
        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 
                        id="envelopeNum2"
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                    </text>
                </svg>
            </div>
        </div>  
    </div>
</div>
{% endblock %}

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

<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">
            <p>
                Your bonus comes from the envelope 
                that you select below. 
                Each envelope contains two options 
                (amounts of money that may depend on chance).
                You will get <strong>one of the two options</strong> as 
                your bonus. 
            </p>

            <p>
                For all possible contents of 
                your selected envelope, 
                you will give us an instruction about which option you want.
                At the end of the experiment, 
                we follow your instruction for the option pair in your envelope 
                and give you the option that you want.
            </p>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-12">
            <div id="pleaseSelect" class="alert alert-info">
                Please select an envelope by clicking on it. 
                There are 21 different envelopes, one for each
                option pair.
            </div>
        </div>
        {{ for envelopeNumber in envelopeNum}}
        <div class="col-2 d-flex justify-content-center align-items-center" style="min-height: 80px; padding:1%">
            <button type="button" id="envelope_{{envelopeNumber}}" class ="btn"
            style="width:100%; padding:0;" 
            onclick="submitEnvelope(this.id)">
                <svg class="envelopeBorders" 
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">
    
                    <!--Outer frame-->
                    <polyline 
                        class="envelopeInterior"
                        id = "{{envelopeNumber}}"
                        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.5em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{envelopeNumber}}
                    </text>
                </svg>  
            </button>
        </div>
        {{ endfor }}
    </div> 

    <div id="hint" class="alert alert-success d-none">
        <strong>You selected Envelope <span id="envelopeNum"></span></strong> and
        can view its content after the experiment. 
        We will follow your instruction for the 
        option pair in Envelope <span id="envelopeNum1"></span> and give 
        you the option that you want as your bonus.  
    <br></br>    
        Note:
        <ul>
            <li>
                If you instruct us about what you want, you get what you want. 
            </li>
            <li>
                There are no right or wrong instructions.
                Please give us instructions according to what you want most 
                yourself.
            </li>
        </ul>
    </div>

    <button id="next_page_btn" class="btn btn-primary mt-2 d-none">
        What are the options in my envelope?</button>
</div>

{% if testing %}

{{ formfield 'feedback_generalTask' }}
{% endif %}

<!--Load Babel-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
    function submitEnvelope(buttonID) {
        const selectedEnvelope = buttonID.split("_").pop()
        document.getElementById("envelopeSelect").value = parseInt(selectedEnvelope)
        document.getElementById("envelopeNum").innerHTML = selectedEnvelope
        document.getElementById("envelopeNum1").innerHTML = selectedEnvelope
        document.getElementById("envelopeNum2").innerHTML = selectedEnvelope
        document.getElementById("selectedEveTxt").classList.remove("d-none")
        document.getElementById("hint").classList.remove("d-none")
        document.getElementById("next_page_btn").classList.remove("d-none")
        //document.getElementById("pleaseSelect").classList.add("d-none")
        greyEnvelopes(selectedEnvelope)

        setTimeout(
            function () {
                document.getElementById("next_page_btn").removeAttribute("disabled")
            },
            5000 // 5 Seconds
        );
    }

    function greyEnvelopes(selectedID) {
        var envelopes = document.getElementsByClassName('envelopeInterior');
        for(let i = 0; i < envelopes.length; i++) {
            if (envelopes[i].id != selectedID) {
                envelopes[i].style.fill = 'lightgray';
            } else {
                envelopes[i].style.fill = '#fff8ef';
            }
        }
    }

</script>

{% endblock %}