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




{% block app_styles %}

<style>

    td{
        text-align:left;
    }

    h1 {
        text-align: center;
    }

    .taskcontainer {
        margin: auto;
        outline: dodgerblue;
        border-style: groove;
        max-width:1000px;
        /*max-width improve the browser's handling of small windows.*/
        padding: 25px 60px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        text-align:left;
        font-size: 20px;
    }

    .button {
        border-color: coral;
        background-color: white;
        padding: 5px 5px;
        border-radius: 50%;
    }



</style>

{% endblock %}

{%block content%}

<h1> &nbsp</h1>
<h1>Allocation Decisions</h1>
<p style="text-align: center"> The input can be an integer or half an integers.</p>
<div class="taskcontainer">
    <table>

        <tr>
            <td colspan="2">

                1. How would you allocate $5 if both recipients earned <font style="color: blue">$3</font> in Part 1?


            </td>
        </tr>
        <tr>
            <td>
                <!-- The size attribute specifies the visible width in <input> element. -->
                <font style="color: gray">Recipient 1 - $3 </font> ($<input type="number" id="dis31" name="dis31" min="0" max="5" step="0.5">)
            </td>
            <td>
                ($<input type="number" id="dis32" name="dis32" min="0" max="5" step="0.5">) <font style="color: gray">Recipient 2 - $3</font>
            </td>
        </tr>


        <tr>
            <td colspan="2">

                &nbsp

            </td>
        </tr>

        <tr>
            <td colspan="2">

                2. How would you allocate $5 if both recipients earned <font style="color:blue">$0</font> in Part 1?


            </td>
        </tr>
        <tr>
            <td>
                <font style="color: gray">Recipient 1 - $0 </font> ($<input type="number" id="dis01" name="dis01" min="0" max="5" step="0.5">)
            </td>
            <td>
                ($<input type="number" id="dis02" name="dis02" min="0" max="5" step="0.5">) <font style="color: gray">Recipient 2 - $0 </font>
            </td>
        </tr>

        <tr>
            <td colspan="2">

                &nbsp

            </td>
        </tr>

        <tr>
            <td colspan="2">

                3. How would you allocate $5 if one recipient earned <font style="color:blue">$0</font> in Part 1, and the other recipient earned <font style="color: blue">$3</font>?

            </td>
        </tr>
        <tr>
            <td>
                <font style="color: gray">Recipient 1 - $0</font> ($<input type="number" id="dis031" name="dis031" min="0" max="5" step="0.5">)
            </td>
            <td>
                ($<input type="number" id="dis032" name="dis032" min="0" max="5" step="0.5">) <font style="color: gray">Recipient 2 - $3</font>
            </td>
        </tr>

        <tr>
            <td colspan="2">

                &nbsp

            </td>
        </tr>


        <tr>
            <td colspan="2" style="text-align: right">
                <button type="button" class="button" onclick="checkresult()" id="submit"> Submit </button>
                <button type="submit" value="Submit" id="next_page" class="button"> Next </button>

            </td>

        </tr>

    </table>
</div>

<input type="hidden" name="dis3_1" id="dis3_1" />
<input type="hidden" name="dis3_2" id="dis3_2" />
<input type="hidden" name="dis0_1" id="dis0_1" />
<input type="hidden" name="dis0_2" id="dis0_2" />
<input type="hidden" name="dis03_1" id="dis03_1" />
<input type="hidden" name="dis03_2" id="dis03_2" />

{%endblock%}

{% block scripts %}
<script>

    document.getElementById("next_page").disabled = true;//cannot go to the next page freely
    // can not use the sumbit() as the name of a function, checkresult() works
    function checkresult(){
        var dis31=document.getElementById("dis31").valueAsNumber
        // if use .value, dis31 returns a string, need to convert it to a number when do the math
        // When you set input type="number" then these input field don't accept non numeric input
        // but at the same time it doesn't make the input value type "number"
        var dis32=document.getElementById("dis32").valueAsNumber
        var dis01=document.getElementById("dis01").valueAsNumber
        var dis02=document.getElementById("dis02").valueAsNumber
        var dis031=document.getElementById("dis031").valueAsNumber
        var dis032=document.getElementById("dis032").valueAsNumber
        var dis3 = dis31 + dis32
        console.log('dis3', dis3) // check whether dis3 is correct
        var dis0 = dis01 + dis02
        console.log('dis0', dis0)
        var dis03 = dis031 +dis032
        console.log('dis03', dis03)

        console.log('modedis031', dis31%0.5)
        console.log('modedis031', dis32%0.5)
        console.log('modedis031', dis01%0.5)
        console.log('modedis031', dis02%0.5)
        console.log('modedis031', dis031%0.5)
        console.log('modedis031', dis032%0.5)


        if (dis3 == 5 && dis0 == 5 && dis03 == 5){
            if (dis31 % 0.5 ==0 && dis32 % 0.5 == 0 && dis01 % 0.5 ==0 && dis02 % 0.5 ==0 && dis031 % 0.5 == 0 && dis032 % 0.5 == 0){
                document.getElementById("submit").disabled = true;//can only submit once
                document.getElementById("next_page").disabled = false; // the button go to next page
                document.getElementById("dis3_1").value = dis31;// transfer data to oTree
                document.getElementById("dis3_2").value = dis32;
                document.getElementById("dis0_1").value = dis01;
                document.getElementById("dis0_2").value = dis02;
                document.getElementById("dis03_1").value = dis031;
                document.getElementById("dis03_2").value = dis032;
            }
            else {
                alert("The input can only be an integer or half an integers!")
            }

        }
        else {
            // if doesn't work, get some feedback, and can resubmit
            alert("The sum of distributions to recipients should be equal to 5!")
        }

    }
</script>
{% endblock %}