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

{% block styles %}

<style>

input[type=range] {
    width: 300px;
    height: 10px;
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    background: #DCDCDC;
}

input[type=range]::-webkit-slider-thumb {
    width: 0px;
    height: 0px;
    border: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

.myclass::-webkit-slider-thumb {
    width: 10px !important;
    height: 30px !important;
    border: 1px solid black;
    border-radius: 5px !important;
    background: #306EFF !important;
    box-shadow: 1px 1px 1px black;
    cursor: pointer !important !important;
    margin-top: -15px !important;
    -webkit-appearance: none !important;
}

.bordered_small {
    width: 50px;
    height: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    display: inline-block;
}

.bordered_large {
    width: 480px;
    height: 255px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px 0px 25px 0px;
}

.bordered_box {
    width: 600px;
    height: 100px;
    border: 1px solid white;
    border-radius: 5px;
}

</style>

{% endblock %}

{% block title %}

Practice Period

{% endblock %}

{% block content %}

<p align="center" style="height: 50px; border: 1px solid black; border-radius: 5px; line-height: 50px">
    Time: <b> <label id="minutes">--</label>:<label id="seconds">--</label> </b>
</p>

<br />

<p align="center">
    {% if player.perceived_similarity == 1 %} <img src="{% static 'GMTA1/IOS_A.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 2 %} <img src="{% static 'GMTA1/IOS_B.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 3 %} <img src="{% static 'GMTA1/IOS_C.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 4 %} <img src="{% static 'GMTA1/IOS_D.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 5 %} <img src="{% static 'GMTA1/IOS_E.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 6 %} <img src="{% static 'GMTA1/IOS_F.jpg' %}" height="75"/> {% endif %}
    {% if player.perceived_similarity == 7 %} <img src="{% static 'GMTA1/IOS_G.jpg' %}" height="75"/> {% endif %}
</p>

<br />

<center>
<div class="bordered_large">
<center>

<b> Same Label </b>

<br />
<br />

{% if player.position == 1 %}
<img src="{% static 'GMTA1/Happy.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" />
<span style="display: inline-block; width: 50px;"> </span>
<img src="{% static 'GMTA1/Sad.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" />
{% endif %}

{% if player.position == 2 %}
<img src="{% static 'GMTA1/Sad.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" />
<span style="display: inline-block; width: 50px;"> </span>
<img src="{% static 'GMTA1/Happy.jpg' %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" />
{% endif %}

</center>
</div>
</center>

<br />
<br />

<p align="center">
    What is your best estimate of <i>ESTIMATE-other</i>'s choice?
</p>

<div id="formfields" style="display: none;">
    {% formfield player.practice_submitted_belief %}
</div>

<center>
<div class="bordered_box">

<div class="value" style="color: transparent"> - </div>

<center>
Left Label &emsp;
<input type="range" min="0" max="100" step="1" value="0" id="id_practice_submitted_belief">
&emsp; Right Label
</center>

<center>
<div class="bordered_small"> <span class="left" id="left"> </span>% </div>
&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;
<div class="bordered_small"> <span class="right" id="right"> </span>% </div>
</center>

</div>
</center>

<br />

<input type="hidden" name="new_practice_time_belief" value="0"/>
<input type="hidden" name="new_practice_time_belief_rounded" value="0"/>

{% if player.time_pressure == 1 %}

<center> <button id="btnTP" class="btn btn-primary" onclick="myFunction()"> {% if player.practice_submitted_decision == 1 %} Submit {% endif %} {% if player.practice_submitted_decision == 2 %} Next {% endif %} </button> </center>

{% endif %}

{% if player.time_pressure == 2 %}

<center> <button id="btnTD" class="btn btn-primary" onclick="myFunction()"> {% if player.practice_submitted_decision == 1 %} Submit {% endif %} {% if player.practice_submitted_decision == 2 %} Next {% endif %} </button> </center>

{% endif %}

{% endblock %}

{% block scripts %}

<script>

$(document).ready(function () {
    $('input[type=range]').on('input change', function () {
        $('input[type=range]').addClass('myclass');
    });
});

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
    var newValue = elem.value;
    document.querySelector('.value').innerHTML = newValue;
    var left = 100 - newValue;
    document.querySelector("#left").innerHTML = left;
    var right = newValue;
    document.querySelector("#right").innerHTML = right;
    document.getElementsByName("practice_submitted_belief")[0].value = right;
}

elem.addEventListener("input", rangeValue);

startTime = new Date;

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
if ({{ player.practice_submitted_decision|json }} == 2) {
    var totalSeconds = 0;
}
if ({{ player.practice_submitted_decision|json }} == 1) {
    var totalSeconds = {{ player.new_practice_time_choice_rounded|json }};
}
setInterval(setTime, 1000);

function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    }
    else {
        return valString;
    }
}

function myFunction() {
    var local_time = new Date - startTime;
    document.getElementsByName("new_practice_time_belief")[0].value = parseFloat(local_time/1000);
    document.getElementsByName("new_practice_time_belief_rounded")[0].value = parseInt(Math.round(local_time/1000));
}

if ({{ player.time_pressure|json }} == 1) {

    if ({{ player.practice_submitted_decision|json }} == 1) {
        var col = "blue";
        setInterval(function() {
            if (col == "blue") {
                $("#btnTP").css("background-color", "red");
                $("#btnTP").css("border-color", "red");
                col = "red";
            }
        }, (15000 - 1000*{{ player.new_practice_time_choice_rounded|json }}));
    }

    if ({{ player.practice_submitted_decision|json }} == 2) {
        var col = "blue";
        setInterval(function() {
            if (col == "blue") {
                $("#btnTP").css("background-color", "red");
                $("#btnTP").css("border-color", "red");
                col = "red";
            }
        }, 15000);
    }

}

if ({{ player.time_pressure|json }} == 2) {

    if ({{ player.practice_submitted_decision|json }} == 1) {

        if ({{ player.new_practice_time_choice_rounded|json }} >= 15) {
            $("#btnTD").css("background-color", "#306EFF");
            $("#btnTD").css("border-color", "#306EFF");
        }

        if ({{ player.new_practice_time_choice_rounded|json }} < 15) {
            $("#btnTD").css("background-color", "red");
            $("#btnTD").css("border-color", "red");
            var col = "red";
            setInterval(function() {
                if (col == "red") {
                    $("#btnTD").css("background-color", "#306EFF");
                    $("#btnTD").css("border-color", "#306EFF");
                    col = "blue";
                }
            }, (15000 - 1000*{{ player.new_practice_time_choice_rounded|json }}));
        }

    }

}

</script>

{% endblock %}