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

{% block title %}
    Round {{ round_number }}, Period 2
{% endblock %}

{% block app_styles %}
<style type="text/css">
.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;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}
</style>
{% endblock %}

{% block content %}


<div style="border: thin solid black">
<p>
    In this round you have <b>{{ impatient }} impatient customers</b>..
</p>
<p>
    Based on your initial allocation, you have <b>{{ asset}} points in Assets and {{ cash }} points in cash.</b><br>
</p>
<p>
    By moving the sliders below you can experiment with buying or selling assets that
    mature in period 3, but ultimately, you must choose to be a buyer or a seller and
    submit a bid of cash, b, to buy assets, OR
    a quantity of assets, q, to sell for cash.
    You also have to submit your prediction of market price of assets.
</p>
</div>
<br>

    Choose your predicted market price for assets:
       <br><b><span id="price">{{ default_price }}</span></b> points of cash per asset.
    <div class="slidecontainer">
  <input type="range" min="0.1" max="5"  step="0.1"   value="{{ default_price }}" class="slider" id="sliderPrice">
        </div>
<table style="width:100%">

  <td>
   <div style="border: thin solid black">
    <div style="border: thin solid black" class="center">  If you want to buy assets:</div><br>
       <br>
    &nbsp; &nbsp;Choose the amount of cash you want to bid out of {{ cash }} points:
       <br><b><span id="bidBuyer"></span></b> points of cash
    <div class="slidecontainer">
  <input type="range" min="0" max="{{ cash }}"  value="0" class="slider" id="sliderBuyer">
        <br>
</div>
</div></td>
  </tc>
    <tc>
  <td>
     <div style="border: thin solid black">
    <div style="border: thin solid black" class="center">  If you want to sell assets:</div><br>
      <br>
    &nbsp; &nbsp;Choose the amount of assets you want to offer out of {{ player.asset }} points:
         <br><b><span id="bidSeller"></span></b> points in assets
    <div class="slidecontainer">
  <input type="range" min="0" max="{{ player.asset }}"  value="0" class="slider" id="sliderSeller">
        <br>
</div>
</div></td>
  </tc>
</table>
        <br>
    &nbsp; &nbsp;Based on this information, after this transaction your bank will be:
       <br>
       <br><b><span class="display" id="liquid"></span></b> and <b><span class="display" id="solvent"></span></b>
<br>
<br>
 &nbsp; &nbsp;And your expected payoff is: <b>$<span id="payoff"></span></b>.<br>
<br>
<br>
<br>
<div style="border: thin solid black">
<div style="border: thin solid black" class="center">
   <b>Please submit your final decision below.</b></div>
    {% formfield player.decision %}
    {% formfield player.bid %}
    {% formfield player.price_guess %}

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

<script>

var sliderBuyer = document.getElementById("sliderBuyer");
var sliderPrice = document.getElementById("sliderPrice");
var sliderSeller = document.getElementById("sliderSeller");

function W(a, b, w) {
return 100-a-b-w;
}

function isLiquid(cash, impatient) {
    return cash >= impatient;
}

function isSolvent(cash, assets, target) {
    return cash + ({{ multiplier }}) * assets >= target;
}

function getPayoff(cash, assets, impatient) {
    return Math.round(({{ allocation_prize }}) * (cash + ({{ multiplier }}) * assets - impatient)
        / (100 - impatient)*100) / 100;
}

sliderBuyer.oninput = function() {
    bidBuyer.innerHTML = this.value;
    sliderSeller.value = 0;
    bidSeller.innerHTML = 0;
    var new_cash = {{ cash }} - this.value;
    var new_asset = {{ asset }} + this.value / sliderPrice.value;
    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }}) && isLiquid(new_cash, {{ impatient }}))
    {
        payoff.innerHTML = getPayoff(new_cash, new_asset, {{ impatient }})
    } else {
         payoff.innerHTML = 0
    }
}


sliderPrice.oninput = function(){
    price.innerHTML = this.value;
    var new_cash = {{ cash }} - sliderBuyer.value + sliderSeller.value * this.value;
    var new_asset = {{ asset }} + sliderBuyer.value / this.value - sliderSeller.value;

    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }}) && isLiquid(new_cash, {{ impatient }}))
    {
        payoff.innerHTML = getPayoff(new_cash, new_asset, {{ impatient }})
    } else {
         payoff.innerHTML = 0
    }
}


sliderSeller.oninput = function(){
    bidSeller.innerHTML = this.value;
    sliderBuyer.value = 0;
    bidBuyer.innerHTML = 0;

    var new_cash = {{ cash }} + sliderPrice.value * this.value;
    var new_asset = {{ asset }} - this.value;

    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }}) && isLiquid(new_cash, {{ impatient }}))
    {
        payoff.innerHTML = getPayoff(new_cash, new_asset, {{ impatient }})
    } else {
         payoff.innerHTML = 0
    }

}




</script>
{% endblock %}