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

{% block title %}
Question 2
{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    }
.form-check-input {
    position: relative;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 6% ;
}
span{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #AED6F1;
    float: left;
    width: 200px;
}
input{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #AED6F1;
    float: left;
    width: 50px;
    height: 45px;
    margin-left: 20px;
}

</style>
{% endblock %}

{% block content %}
{{ form.empiricalelicitation1_sum.errors }}
{{ form.empirical1_statusquo.errors }}
{% if player.choice_order == "take first" %}
<div class="card info">
    <p>
        Please guess how the other participants chose in the situation described previously, by indicating what percentage of the participants chose each option.
    </p>
    <p>
        If this question is chosen, you will be paid XX points if your guess is within 5 percentage points of the true value in a category. You will be paid ZZ points if your guess is within 10 percentage points of the true value.
    </p>

    <div class="input-group">
        <div class="input-group-prepend" style="padding: 5px 5px;">
            <span class="input-group-text"> Take from the charity: </span>
        </div>
        <input type="number" name="empirical1_take" id="empirical1_take" min="0" max="100" step="1" oninput="updateTake(this.value)" placeholder="Value">

    <div class="input-group">
        <div class="input-group-prepend" style="padding: 5px 5px;">
            <span class="input-group-text"> No change: </span>
        </div>
        <input type="number" name="empirical1_statusquo" id="empirical1_statusquo" min="0" max="100" step="1" oninput="updateStatusquo(this.value)" placeholder="Value">

        <div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Give to the charity: </span>
    </div>
    <input type="number" name="empirical1_give" id="empirical1_give" min="0" max="100" step="1" oninput="updateGive(this.value)" placeholder="Value">

</div>
</div>
    <br>
</div>
    <br>
    <p>
    Total: <span id="updateTotal" style="display:inline-block; float: none; height:35px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span> %
    </p>
    <br>
</div>
{% endif %}

{% if player.choice_order == "give first" %}
<div class="card info">
    <p>
        Please guess how the other participants chose in the situation described previously, by indicating what percentage of the participants chose each option.
    </p>
    <p>
       If this question is chosen, you will be paid XX points if your guess is within 5 percentage points of the true value in a category. You will be paid ZZ points if your guess is within 10 percentage points of the true value.
    </p>

    <div class="input-group">
        <div class="input-group-prepend" style="padding: 5px 5px;">
            <span class="input-group-text"> Give to the charity: </span>
        </div>
        <input type="number" name="empirical1_give" id="empirical1_give" min="0" max="100" step="1" oninput="updateGive(this.value)" placeholder="Value">

    <div class="input-group">
        <div class="input-group-prepend" style="padding: 5px 5px;">
            <span class="input-group-text"> No change: </span>
        </div>
        <input type="number" name="empirical1_statusquo" id="empirical1_statusquo" min="0" max="100" step="1" oninput="updateStatusquo(this.value)" placeholder="Value">

        <div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Take from the charity: </span>
    </div>
    <input type="number" name="empirical1_take" id="empirical1_take" min="0" max="100" step="1" oninput="updateTake(this.value)" placeholder="Value">

</div>
</div>
    <br>
</div>
    <br>
    <p>
    Total: <span id="updateTotal" style="display:inline-block; float: none; height:35px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span> %
    </p>
    <br>
</div>
{% endif %}
<br><br>
<div style="display:inline-block; margin:0; float: left;">  </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="EmpiricalElicitation1_time" id="EmpiricalElicitation1_time" step="0.000001">
<input type="hidden" name="empiricalelicitation1_sum" id="empiricalelicitation1_sum" step="1">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var empirical1_take = 0;
var empirical1_statusquo = 0;
var empirical1_give = 0;
var empirical1_sum = empirical1_take + empirical1_statusquo + empirical1_give;

init_val = 0;

    $(document).ready(function() {
        startpage_time = Date.now();
    });

          function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('EmpiricalElicitation1_time').value=page_time;
       document.getElementById('empiricalelicitation1_sum').value=empirical1_sum;
            if (document.getElementById('empirical1_take').value == ""){
            document.getElementById('empirical1_take').value = 0
            };
             if (document.getElementById('empirical1_statusquo').value == ""){
            document.getElementById('empirical1_statusquo').value = 0
            };
             if (document.getElementById('empirical1_give').value == ""){
            document.getElementById('empirical1_give').value = 0
            };
           };

function updateTake(val) {
          empirical1_take = parseFloat(val);
          empirical1_sum = empirical1_take + empirical1_statusquo + empirical1_give;
          document.getElementById('updateTotal').innerHTML=empirical1_sum;
        }

function updateStatusquo(val) {
          empirical1_statusquo = parseFloat(val);
          empirical1_sum = empirical1_take + empirical1_statusquo + empirical1_give;
          document.getElementById('updateTotal').innerHTML=empirical1_sum;
        }

function updateGive(val) {
          empirical1_give = parseFloat(val);
          empirical1_sum = empirical1_take + empirical1_statusquo + empirical1_give;
          document.getElementById('updateTotal').innerHTML=empirical1_sum;
        }

</script>
{% endblock %}