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

{% block title %}

{% endblock %}

{% block content %}
    <style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>
<h1 align=center><font color="blue">Period 1</font></H1>
<font size="4">
<p>This is the first period of this round.
    <br>{% if player.id_in_group == 1 %} Your bid is multiplied by 3 and B's bid is multiplied by 1.
    <br/> If you win in this period, then your bid will continue to be multiplied by 3 in the next period.
    <br/> If you lose in this period, then your bid will be multiplied by 1 in the next period.
    {% else %} Your bid is multiplied by 1 and A's bid is multiplied by 3.
    <br/> If you win in this period, then A's bid will not be multiplied by 3 in the next period.
    <br/> If you lose in this period, then A's bid will continue to be multiplied by 3 in the next period.{% endif %}</p>
<br>
Please move the sliders or insert numbers to choose and submit your guess and your bid.
<br>
<br>
<div class="slidecontainer">
  <p>If your opponent's bid = <input type="range" min="0" max="100" value="0"  class="slider" id="myRange1">
  <br><input type="text" id="demo1" name="Perceived_investment" onkeypress="return event.keyCode != 13;"></p>
</div>
<br>
<div class="slidecontainer2">
  <p>And your Bid = <input type="range" min="0" max="100" value="0" class="slider2" id="myRange2">
  <br><input type="text" id="demo2" name="investment" onkeypress="return event.keyCode != 13;"></p>
</div>
<p><font size="5">So, Your Chance of winning = </font>
    <strong><font size="5" color="red"><span id="PDiff"></span>%</font></strong></p>
</font>
    {% next_button %}


<script>

var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
var paD = document.getElementById("PDiff");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");

function Y(a, b) {
return 300*b/(a + (3*b));
}

function myFunction(a, b) {
return 100*b/(b + (3*a));
}

slider.oninput = function() {
 output.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
}
}

output.oninput = function() {
 slider.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
}
}

slider2.oninput = function() {
  output2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
}
}

output2.oninput = function() {
  slider2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
}
}

</script>

{% endblock %}