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

{% block title %}
    Task {{ Constants.Task }}, period {{ player.round_number }}
{% 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>

Your age is {{ age }}.<br>
Your total available points for consumption: {{ intermediate_balance }} points{% if player.round_number > 1 %} (Last period's ending balance of {{ last_balance }} points * 1.027 + Social Security benefit of {{ ssb }} points {% if ssb > player.annual_benefits %} including the annual benefit of {{ player.annual_benefits }} and a one-time lumpsum in this period of {{ player.lumpsum_benefits }}{% else %} {% endif %}). {% else %} {% endif %}
<br>
<br>

<br>
<br>
<p>
Use the slider or insert numbers below to choose and submit your choice of consumption in this period.
<br>    <br> If you do not make a choice, the default value of {{ default_consumption }} points will be used.
    This default will be updated each period to match your choice in the previous period (unless this is not a feasible option).
</p>


<div class="slidecontainer">
  <input type="range" min="14887" max="{{ intermediate_balance }}"  value="{{ default_consumption }}" class="slider" id="sliderConsumption" name="consumption">
    <p>Consumption in this period: <input type="number" style="width: 4em" id="inputBoxConsumption" min="14887" max="{{ intermediate_balance }}" step=".01" value="{{ default_consumption }}" onkeypress="return event.keyCode != 13;"> points.
    </p>
</div>

<p>
If you consume that much, you will get a payoff this period of: <strong> $<span id="payoff"></span> </strong><br/>
    Your ending period savings is <strong><span id="endSaving"></span> points </strong>(available points – consumption).
    <br> After crediting interest, your savings for the next period is <strong> <span id="nextSaving"></span> points </strong>(ending balance * 1.027).<br/>
The highest payoff you could get from consumption this period is: <strong>$<span id="maxPayoff"></span></strong>
</p>

    <button class="btn btn-primary btn-large">
    Submit Consumption Choice
</button>


<script>

var slider = document.getElementById("sliderConsumption");
var output = document.getElementById("inputBoxConsumption");
var payoff = document.getElementById("payoff");
var endSaving = document.getElementById("endSaving");
var nextSaving = document.getElementById("nextSaving");
var maxPayoff = document.getElementById("maxPayoff");

function X(a) {
return 3*(1 - Math.exp(-(a-14887)/20000));
}

function Y(a, b) {
return a-b;
}

function Z(a, b) {
return 1.027*(a - b);
}

slider.oninput = function() {
 output.value = this.value;
payoff.innerHTML = X(slider.value).toFixed(2);
endSaving.innerHTML = Y({{ intermediate_balance }}, slider.value).toFixed(2);
nextSaving.innerHTML = Z({{ intermediate_balance }}, slider.value).toFixed(2);
maxPayoff.innerHTML = X({{ intermediate_balance }}).toFixed(2);
}

output.oninput = function() {
 slider.value = this.value;
payoff.innerHTML = X(slider.value).toFixed(2);
endSaving.innerHTML = Y({{ intermediate_balance }}, slider.value).toFixed(2);
nextSaving.innerHTML = Z({{ intermediate_balance }}, slider.value).toFixed(2);
maxPayoff.innerHTML = X({{ intermediate_balance }}).toFixed(2);
}

</script>


























{% endblock %}