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

{% block title %}
    Bid
{% endblock %}

{% block content %}
    <p id="timer">Remaining time: </p>

    <p>
        The value of the item is estimated to be {{ player.item_value_estimate }}.
        This estimate may deviate from the actual value by at most {{ Constants.estimate_error_margin }}.
    </p>

    <p>
        Please make your bid now. The amount can be between {{ Constants.min_allowable_bid }} and {{ Constants.max_allowable_bid }}, inclusive.
    </p>

    <div class="row">
        <div class="column">
            Group history
            <table id="group_history" class="table">
                <tr>
                <th>Player</th>
                <th>Bid</th>
                </tr>
            </table>
        </div>
        <div class="column">
            My history
            <table id="my_history" class="table">
                <tr>
                <th>#</th>
                <th>My Bid</th>
                </tr>
            </table>
        </div>
    </div>
    <input id="inputbox" type="number">
    <button type="button" id="sendbutton">Send</button>

    <p>
        <button class="otree-btn-next btn btn-primary" id="nextbutton" style="visibility:hidden;">Next</button>
    </p>
    <style>
        .column {
          float: left;
          width: 50%;
        }
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
    </style>



    <script>
    let group_history = document.getElementById('group_history');
    let my_history = document.getElementById('my_history');
    let inputbox = document.getElementById('inputbox');
    let sendbutton = document.getElementById('sendbutton');
    let nextbutton = document.getElementById('nextbutton');
    let timer = document.getElementById('timer');


    var dStart = new Date();
    var start_time = dStart.getTime();

    function time_format(millis) {
      var minutes = Math.floor(millis / 60000);
      var seconds = ((millis % 60000) / 1000).toFixed(0);
      return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    }

    function move_forward(){
        sendbutton.style.visibility='hidden';
        nextbutton.style.visibility='visible';
    }

    function timeUpdate() {
        var d = new Date();
        var remaining_time = start_time - d.getTime() + 60*1000;
        if (remaining_time > 1000) {timer.innerHTML = 'Remaining time: ' + time_format(remaining_time);}
        else {
            timer.innerHTML = 'Remaining time: 0:00';
            setTimeout(move_forward, 999);}
    }

    var timeVar = setInterval(timeUpdate, 1000);

    function liveRecv(data) {
        group_history.innerHTML += '<tr><td>' + data.id_in_group + '</td><td>' + data.bid + '</td></tr>';
    }

    var bid_counter = 0;

    sendbutton.onclick = function () {
        bid_counter += 1;
        var bid = parseInt(inputbox.value);
        my_history.innerHTML += '<tr><td>' + bid_counter + '</td><td>' + bid + '</td></tr>';
        liveSend(bid);
    };

    </script>




    {% include Constants.instructions_template %}

{% endblock %}