{% 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 WhiteSmoke;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 12pt;
    font-size: 12pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 12pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: fixed;
    width: 800px;
    }

.history td {
    font-size: 12pt;
    }

.history th {
    font-size: 12pt;
    width: 100px;
    text-align: center;
    }

.btn-info {
 background-color: #d3d3d3;
 color: black;
   border: 2px solid black;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 12px;
}
.btn-info:hover {
  background-color: #708090;
   border: 2px solid black;
}

</style>
{% endblock %}

{% block content %}


<div style="border: thin solid black; padding: 10px">
<p>
   Your bank is in <span class="important"> {{ region }}</span> and it has been randomly determined that it is <span class="important"> State {{group.state}}</span>. Therefore, you have  <span class="important">{{ impatient }} impatient customers</span>.
</p>
<p>
    Based on your initial allocation, you have <b>{{ asset}} units in assets (A) and {{ cash }} units in cash (C).</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. #}

    By moving the sliders below you can choose whether to be a buyer or a seller and
    submit a bid of cash to buy assets, OR a quantity of asset to sell for cash.
    <p></p>
  You can also submit your prediction of the market price of assets, which will then update your expected payoff.
</p>
<p>
    If you do not move any sliders, your decision will default to neither buying nor selling any assets.
</p>
</div>
<br>

    Choose your predicted market price for assets (P<sub>f</sub> ):
       <br><b><span id="price">{{ default_price }}</span></b> units of cash per asset.
    <div class="slidecontainer">
  <input type="range" name="price_guess" min="0.1" max="5"  step="0.01"   value="{{ default_price }}" class="slider" id="sliderPrice">
        </div>
<br>
{#Check if you want to predict there will be no trade: <input type="checkbox" id="myCheck" onclick="myFunction()"> #}
Check if you want to predict there will be no trade: <input type="checkbox" id="myCheck">
<br>

<br>
<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 (b) out of {{ cash }}:
       <br><b><span id="bidBuyer"></span></b> units 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 (q) out of {{ player.asset }}:
         <br><b><span id="bidSeller"></span></b> units 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>
<center>
       <br><b><span class="display" id="liquid"></span></b> &nbsp;&nbsp; and &nbsp;&nbsp;  <b><span class="display" id="solvent"></span></b>
</center>
    <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>Click 'SUBMIT' to submit this as your final decision.</b></div>
    <input id="bid_field" type="hidden" name="bid" />
    <input id="decision_field" type="hidden" name="decision" />
    <input id="no_trade_field" type="hidden" name="no_trade" value="1" />
    <div class="center"><button class="button" id="submit">SUBMIT</button></div>
</div>

{% if round_number > 1 %}
<h4>History of previous rounds </h4>
    <table class="history">
        <tr>
            <th>Round</th><th>Assets</th><th>Cash</th><th># Impatient costumers</th><th>Liquid?</th><th>Solvent?</th><th>Predicted price</th><th>Actual price</th><th><b>Allocation payoff</b></th><th><b>Prediction payoff</b></th>
        </tr>
        {% for p in player_in_previous_rounds %}
            <tr>
            <tr>
                <td>{{ p.round_number }}</td>
                <td>{{ p.asset }}</td>
                <td>{{ p.cash_aux }}</td>
                <td>{{p.impatient}}</td>
                <td>{{ p.liquid }}</td>
                <td>{{ p.solvent }}</td>
                <td>
                    {% if p.no_trade == 1 %}
                    No trade
                    {% else %}
                    {{ p.price_guess }}
                    {% endif %}
                </td>
                <td>
                    {% if  p.group.subsession.price == 0 %}
                    No trade
                    {% else %}
                    {{ p.group.subsession.price_display|to2 }}
                    {% endif %}
                </td>
                <td class="important">{{ p.allocation_payoff }}</td>
                <td class="important">{{ p.prediction_payoff }}</td>
            </tr>
        {% endfor %}
    </table>
{% endif %}


<script>

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

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))-1)*100) / 100;
}

window.onload = function() {
    document.getElementById('bid_field').value = 0;
    document.getElementById('decision_field').value = 'Buy';
    document.getElementById('no_trade_field').value = 0;
    console.log("window.onload ran")
}


sliderPrice.oninput = function(){
    price.innerHTML = this.value;
    document.getElementById("myCheck").checked = false;
    document.getElementById('no_trade_field').value= 0;

    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
    }
}



myCheck.oninput = function()  {
  {#document.getElementById("demo").innerHTML = xx;#}

   sliderSeller.value = 0;
   bidSeller.innerHTML = 0;
   sliderBuyer.value = 0;
   bidBuyer.innerHTML = 0;


   if (document.getElementById("myCheck").checked){
     price.innerHTML = 'No market price. Can not determine';
     sliderPrice.value = 0;
     document.getElementById('no_trade_field').value = 1;
    }
   else{
   price.innerHTML = 0.1
   sliderPrice.value = 0.1;
   document.getElementById('no_trade_field').value = 0;
   };


   var new_cash = {{cash}};
   var new_asset = {{asset}};

   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
   }
  }



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

    if (sliderPrice.value == 0.1 )
    {
           sliderPrice.value = 0.1;
           price.innerHTML = 0.1;
    }

    document.getElementById("myCheck").checked = false;
    document.getElementById('no_trade_field').value= 0;
    document.getElementById('bid_field').value = this.value;
    document.getElementById('decision_field').value = 'Buy';

    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
    }
}



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

    if (sliderPrice.value == 0.1 )
    {
           sliderPrice.value = 0.1;
           price.innerHTML = 0.1;
    }

    document.getElementById("myCheck").checked = false;
    document.getElementById('no_trade_field').value= 0;
    document.getElementById('bid_field').value = this.value;
    document.getElementById('decision_field').value = 'Sell';

    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 %}