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

</style>
{% endblock %}

{% block content %}


<div style="border: thin solid black ; padding: 10px">
<p>
    You are in <span class="important">{{ region }} </span> and it has been randomly determined that it is <span class="important">State {{group.state}}. </span>Therefore, the bank you are responsible for has <span class="important">{{ impatient }} impatient customers</span>.
</p>
<p>
    Based on their initial allocation, the bank you are responsible for has
    <b>{{ initial_asset }} units in assets (A) and {{ initial_cash }} units in cash (C).</b><br>
</p>
<p>
    {% if price > 0 %}
    You observe that the price of the asset in the market (P) is <input type="hidden" id="price" value="{{ price }}"/><span class="important">{{ price_aux }} units of cash per asset</span>.
    {% else %}
    <span class="important">No trade occurred</span> since there were not enough buyers or sellers. Therefore there is no market price for the asset.
    Note that even if there ended up being no trade, and thus there is no market prize (P), it does not mean that banks did not try to buy or sell assets.
     <input type="hidden" id="price" value="{{ price }}"/>
    {% endif %}
</p>
<p>
   {# By moving the sliders below you can experiment with buying or selling assets that
    mature in period 3, but ultimately, the bank 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 must submit your prediction of whether the bank tried to buy or sell, and also how much they offered. #}

        By moving the sliders below you can submit your prediction of whether the bank tried to buy or sell, and also how much they offered.

</p>
<p>
    If you do not move any sliders, your decision will default to saying that the bank neither tried to buy or sell assets
    and liquidity and solvency will be determined accordingly.
</p>
</div>
<br>


<table style="width:100%">

  <td>
   <div style="border: thin solid black">
    <div style="border: thin solid black" class="center">  If you think the bank bought assets:</div><br>
       <br>
    &nbsp; &nbsp;Choose the amount of cash you expect the bank to have bid (b*) out of {{ cash }} units:
       <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 think the bank sold assets:</div><br>
      <br>
    &nbsp; &nbsp;Choose the amount of assets you expect the bank to have offered (q*) out of {{ player.asset }} units:
         <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 the bank will be:
<center>
       <br>
       <br><b><span class="display" id="liquid"></span></b> and <b><span class="display" id="solvent"></span></b>
    </center>

<br>
<br>
<div style="border: thin solid black">
<div style="border: thin solid black" class="center">
<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 type="hidden" id="decision_guess_field" name="decision_guess" />
    <input type="hidden" id="bid_guess_field" name="bid_guess"/>
    <input type="hidden" id="liquid_field" name="liquid"/>
    <input type="hidden" id="solvent_field" name="solvent"/>

    <div class="center"><button class="button" id="submit" onclick="do_something()">SUBMIT</button></div>
</div>
</div>
</div>
    <p></p>
    {% if round_number > 1 %}
<h5>History of previous rounds </h5>
    <table class="history">
        <tr>
            <th>Round</th><th>Declared Solvent?</th><th>Declared Liquid?</th><th>Solvent Correct?</th><th>Liquid Correct?</th><th>Cash (Begin 2nd period)</th><th>Predicted offer</th><th>Actual offer</th><th><b>Declaration 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.solvent }}</td>
                <td>{{ p.liquid }}</td>
                <td>{{ p.solvent_correct }}</td>
                <td>{{ p.liquid_correct }}</td>
                <td>{{ p.cash_aux}}</td>
                <td>{{ p.bid_guess }}</td>
                <td>{{ p.bid }}</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 price = document.getElementById("price");
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;
}

window.onload = function() {
    document.getElementById('bid_guess_field').value = 0;
    document.getElementById('decision_guess_field').value = 'Buy';
   {# document.getElementById('solvent_field').value = true; #}
   {# document.getElementById('liquid_field').value = true; #}
    console.log("window.onload ran")
}



function do_something(){
    if (document.getElementById('decision_guess_field').value == 'Buy' && document.getElementById('bid_guess_field').value == 0 ){
        bidBuyer.innerHTML = 0;
        sliderSeller.value = 0;
        bidSeller.innerHTML = 0;
        document.getElementById('bid_guess_field').value = 0;
        document.getElementById('decision_guess_field').value = 'Buy';

     var new_cash = {{ initial_cash }} ;
     var new_asset = {{ initial_asset }};


    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";
        document.getElementById('liquid_field').value = true;

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
        document.getElementById('liquid_field').value = false;
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
        document.getElementById('solvent_field').value = true;

    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
        document.getElementById('solvent_field').value = false;
    }

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

    } else{

    }
}


sliderBuyer.oninput = function() {
    bidBuyer.innerHTML = this.value;
    sliderSeller.value = 0;
    bidSeller.innerHTML = 0;
    document.getElementById('bid_guess_field').value = this.value;
    document.getElementById('decision_guess_field').value = 'Buy';

    if ( document.getElementById("price").value == 0 ){
    var new_cash = {{ initial_cash }};
    var new_asset = {{ initial_asset }};
    }
    else {
    var new_cash = {{ initial_cash }} - this.value;
    var new_asset = {{ initial_asset }} + this.value / {{price}};
    }



    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";
        document.getElementById('liquid_field').value = true;

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
        document.getElementById('liquid_field').value = false;
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
        document.getElementById('solvent_field').value = true;

    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
        document.getElementById('solvent_field').value = false;
    }

    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;
    document.getElementById('bid_guess_field').value = this.value;
    document.getElementById('decision_guess_field').value = 'Sell';

    if ( document.getElementById("price").value == 0  ){
    var new_cash = {{ initial_cash }};
    var new_asset = {{ initial_asset }};
    }
    else {
    var new_cash = {{ initial_cash }} + {{price}} * this.value;
    var new_asset = {{ initial_asset }} - this.value;
    }

    if (isLiquid(new_cash, {{ impatient }})) {
        liquid.innerHTML = "Liquid";
        liquid.style.borderColor = "green";
        liquid.style.backgroundColor = "green";
        document.getElementById('liquid_field').value = true;

    } else {
        liquid.innerHTML = "Not Liquid";
        liquid.style.borderColor = "red";
        liquid.style.backgroundColor = "red";
        document.getElementById('liquid_field').value = false;
    }

    if (isSolvent(new_cash, new_asset, {{ deposit }})) {
        solvent.innerHTML = "Solvent";
        solvent.style.borderColor = "green";
        solvent.style.backgroundColor = "green";
        document.getElementById('solvent_field').value = true;
    } else {
        solvent.innerHTML = "Not Solvent";
        solvent.style.borderColor = "red";
        solvent.style.backgroundColor = "red";
        document.getElementById('solvent_field').value = false;
    }

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