{% extends "otree/Page.html" %}
{% load otree static %}
{% block content  %}
  <button class="otree-btn-next btn otree-next-button invisible" id = "to_next_page"></button>
{% endblock %}
{% block global_styles  %}
<h1>Period {{subsession.round_number}}</h1>
<h2>Your are: Player {{player.id_in_group}}</h2>
<hr>
<div>
    <table class = "table">
        <tr>
            <th>Average Dividend this period</th>
            <th>Average Total Dividend: {{av_divided}} </th>
            <th>Previous Period Dividend: {{previous_dividend}} </th>
            <th>Periods remaining: {{remaining_periods}}</th>
        </tr>
    </table>
</div>

<div class = "container-fluid">
  <div class = "row">
    <div class="col">
<table class = "table">
       <thead>
    <tr>
        <td colspan = "2"><h5>Best Market Bid</h5></td>
    </tr>
    </thead>
    <tr>
    <th>Player</th>
    <th>Bid</th>
  </tr>
</table>
<table id="history_bid" class="table">

</table>
Price: <input id="bid_box" type="number">
<button type="button" id="bid_button" class="btn btn-primary">Submit Buy Price</button>

<input id = "highest_bidder" type = "hidden" type = "number">
<input id="buy_asset" type="hidden" type = "number">
<button type="button" id="buy_bid_button" class="btn btn-success btn-block p-1">Buy Asset at </button>
</div>

<div class="col-lg overflow-auto">
<table id="history" class="table">
    <thead>
    <tr>
        <td><h5>Recent Transactions Prices</h5></td>
    </tr>
    </thead>
</table>
</div>

<div class="col-lg">
<table class = "table">
    <thead>
    <tr>
        <td colspan = "2"><h5>Best Market Ask</h5></td>
    </tr>
   </thead>
  <tr>
    <th>Player</th>
    <th>Ask</th>
  </tr>
</table>

<table id="history_ask" class="table">

</table>
Price: <input id="ask_box" type="number">
<button type="button" id="ask_button" class="btn btn-primary">Submit Ask price</button>
<!---This hidden input should have the amount of the highest bid --->
    <input id = "lowest_asker" type = "hidden" type = "number">
    <input id = "sell_asset" type="hidden" type = "number">
<button type="button" id="sell_ask_button" class="btn btn-success btn-block mr-1">Sell Asset at </button>
    </div>
  </div>
<div class = "row">
    <div class = "col">
    </div>

    <div class = "col">
    <table id = "cash" class = "table">
        <tr>
            <th><h5>Your Cash: </h5></th>
            <th>{{initial_amount}}</th>
        </tr>
    </table>
    <table id = "assets" class = "table">
        <tr>
            <th><h5>Your Assets:</h5></th>
            <th> {{initial_assets}} </th>
        </tr>
    </table>
    </div>
    <div class = "col">

    </div>
</div>
</div>

{% endblock %}



{% block global_scripts  %}
<script>
    let isValid = liveform.reportValidity();
    let press_buy = false;

    let history_bid = document.getElementById('history_bid');
    let bid_box = document.getElementById('bid_box');
    let bid_button = document.getElementById('bid_button');

    let history_ask = document.getElementById('history_ask');
    let ask_box = document.getElementById('ask_box');
    let ask_button = document.getElementById('ask_button');

    let history = document.getElementById('history');
    let sell_asset = document.getElementById("sell_asset");
    let buy_asset = document.getElementById("buy_asset");

    let highest_bidder = document.getElementById('highest_bidder');
    let lowest_asker = document.getElementById('lowest_asker');

    function liveRecv(data) {
        if (data.type == "bid"){
            console.log(data)
            history_bid.innerHTML = '<tr><td>' + data.id_in_group + '</td><td>' + data.value + '</td></tr>';
            document.getElementById("sell_ask_button").innerHTML = 'Sell Asset at: ' + data.value;
            document.getElementById("buy_asset").value = data.value;
            //document.getElementById("highest_bidder").value = data.id_in_group;
        } else if (data.type == "ask"){
            history_ask.innerHTML = '<tr><td>' + data.id_in_group + '</td><td>' + data.value + '</td></tr>';
            document.getElementById("buy_bid_button").innerHTML = 'Buy Asset at: ' + data.value;
            document.getElementById("sell_asset").value = data.value;
            //document.getElementById("lowest_asker").value = data.id_in_group;
        } else if (data.type == "contract"){
            history.innerHTML += '<tr><td>' + data.value + '</td></tr>';
            //document.getElementById("buy_asset").value = 0;
            //document.getElementById("sell_asset").value = 0;
            if (data.action == "press_buy"){
                history_ask.innerHTML = " ";
                document.getElementById("buy_bid_button").innerHTML = 'Buy Asset at: ';
                document.getElementById("sell_asset").value = 0;
            } else {
                history_bid.innerHTML = " ";

                document.getElementById("buy_asset").value = 0;
                document.getElementById("sell_ask_button").innerHTML = 'Sell Asset at: ';
            }
            if (data.deal){
                document.getElementById("cash").innerHTML = '<tr><th><h5>Your Cash:</h5></th>' + '<th>' + data.money + '</th></tr>';
                document.getElementById("assets").innerHTML = '<tr><th><h5>Your Assets:</h5></th>' + '<th>' + data.assets + '</th></tr>';
            }
        } else if (data.type == "error"){
            alert(data.message);
            }
        }

    bid_button.onclick = function () {
        liveSend({'value': parseInt(bid_box.value), 'type': "bid"});
    };

    ask_button.onclick = function () {
        liveSend({'value': parseInt(ask_box.value), 'type': "ask"});
    };

    sell_ask_button.onclick = function () {
        liveSend({'value': parseInt(buy_asset.value), 'type': "contract", 'action': "press_sell"});
        press_buy = false;
    };

    buy_bid_button.onclick = function () {
        liveSend({'value': parseInt(sell_asset.value), 'type': "contract", 'action': "press_buy", "seller": parseInt(lowest_asker.value)});
        press_buy = true;
    };

    setTimeout(function(){
           document.getElementById("to_next_page").click();}
    , 90000);
</script>


{% endblock %}