{% 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:800px;
        /*max-width improve the browser's handling of small windows.*/
        padding: 25px 60px;
    }


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

    p {
        font-size: 20px;
    }

</style>

{% endblock %}

{%block content%}

<h1> &nbsp</h1>
<h1>Payment for Part 1</h1>
<div class="taskcontainer">
    <p>Enter your payment number: <input type="number" id="p_number" name="payment_number" min="1" max="25" step="1"></p>
    <p>Code to continue: <input type="text" id="code1" size="6" ></p>
   <p id="button1"><button type="button" class="button" onclick="show_policy()" id="continue" style="float: right"> Continue</button></p>
    <p id="policy_name"></p>
    <p id="policy"></p>
    <p id="question"></p>
    <p id="button2"></p>
    <p id="result"></p>
    <p id="next_page"></p>
</div>
<input type="hidden" name="payoff_1" id="payoff_1"/>

{%endblock%}

{% block scripts %}

<script>

    function show_policy() {
        var length = document.getElementById("p_number").value.length
        var code1 = document.getElementById("code1").value
        console.log (code1)
        if (code1 == "rabbit") {
            if (length != 0){
                document.getElementById("policy_name").innerHTML = "<b>Payment Policy</b>"
                document.getElementById("policy").innerHTML = "Whose payment number is divisible by 3 is going to get $0 for Part 1. Other participants are going to get $3."
                document.getElementById("question").innerHTML = "Based on the payment policy, how much are you paid for Part 1? "
                    + "<input type='number' id='guess' name='guess' min='0' max='10' step='1'>"
                document.getElementById("button2").innerHTML ="<button type='button' class='button' onclick='checkguess()' style='float: right'>Check</button>"
                document.getElementById("p_number").disabled = true; //can not change due to the policy
                document.getElementById("button1").innerHTML = ""
            }
            else {
                alert ("You need to input your payment number.")
            }
        }
        else {
            alert("Your code is not right.")
        }
    }

    function checkguess() {
        var p_number = document.getElementById("p_number").valueAsNumber
        console.log(p_number)
        var guess = document.getElementById("guess").valueAsNumber
        if (p_number % 3 == 0){
            if (guess == 0) {
                document.getElementById("result").innerHTML = "<b style='color: tomato'>Yes, your payment for Part 1 is $0.</b>"
                document.getElementById("next_page").innerHTML = "<button type='submit' class='button' id='next_page' style='float: right'>Next</button>"
                document.getElementById("payoff_1").value = guess
                document.getElementById("button2").innerHTML = ""
            }
            else {
                alert("Try again!")
            }
        }
        else {
            if (guess == 3) {
                document.getElementById("result").innerHTML = "<b style='color: tomato'>Yes, your payment for Part 1 is $3.</b>"
                document.getElementById("next_page").innerHTML = "<button type='submit' class='button' id='next_page' style='float: right'>Next</button>"
                document.getElementById("payoff_1").value = guess
                document.getElementById("button2").innerHTML = ""
            }
            else {
                alert("Try again!")
            }
        }
    }


</script>
{% endblock %}