{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Auction 4 - Round {{player.round_number}}
{% endblock %}

{% block content %}

    <div>
        Your private value ist <b>{{player.private_value}}</b><br>
        You are now in <b>Stage 1</b>: <br>You and the other player can place as many bids as you wish until time runs out.
    </div>
    <hr>
    <div id="winner">No bids have been placed yet.</div>
    
    <table>
    <tr>
        <td>
            <div>The current price is</div>
        </td>
        <td>
            <div><b><span id="displayed_price"></span></b></div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Your current bid is:</div>
        </td><td>
            <div><b><span id="displayed_maxbid"></span></b></div>
        </td>
    </tr>
    <tr>
        <td>
            <input 
            id="player_bid_field" 
            type="text" 
            onkeypress='return event.charCode >= 48 && event.charCode <= 57' 
            name="FirstName">
        </td>
        <td>
            <input 
            id='button_bid'
            class="btn  btn-large btn-primary next-button" 
            onclick='sendmessage()'
            type="button"
            value="Place Bid">
        </td>
    </tr>
    </table>

    <hr>
    <div id="player_message"></div>
    <div id="message"></div>



{% include C.INSTRUCTION_TEMPLATE %}

{% endblock %}


{% block scripts %}
<script>
    var winner = 'You are the <b><font color="green">highest bidder</font></b> right now';
    var loser = 'You are <b><font color="red">NOT the highest bidder</font></b> right now!';
    
    // Fill all fields on first load or refresh
    window.onload = function() {
        console.log('Window reloaded')

        $('#player_message').html(' ');
        
        var curprice = {{group.second_price}}
        $('#displayed_price').html(curprice);
        $('#displayed_maxbid').html({{max_bid}});
        
        if({{group.second_price}}>0){
          curwinner = {{group.curwinner}}=={{player.id_in_group}}?winner:loser;
          $('#winner').html(curwinner);  
        };
    };
    
    // Send messages to the whole group
    let sendbutton = document.getElementById('button_bid');
    sendbutton.onclick = function () {
        console.log('Button "Place Bid" clicked.');
        sendmessage();
    };
    let player_bid_field= document.getElementById('player_bid_field');
    player_bid_field.addEventListener("keydown", function (e) {
        if (e.key === "Enter") {
            console.log('"Enter" pressed.');
            sendmessage();
        };
    });

    function sendmessage(){
        console.log('sendmessage() called')
        liveSend({
            'id': {{player.id}},
            'id_in_group': {{player.id_in_group}},
            'cur_player_bid': document.getElementById("player_bid_field").value
        });
    };
    
    // Handle messages sent by the server.
    function liveRecv(payload) {
        console.log('liveRecv() called')
        curprice = payload.price;
        $('#displayed_price').html(curprice);
        if(payload.message_from_id=={{player.id_in_group}}){
            $('#displayed_maxbid').html(payload.player_maxbid);
        }
        curwinner = payload.winner=={{player.id_in_group}}?winner:loser;
        $('#winner').html(curwinner);
        $('#message').html(payload.message_all);
        $('#player_message').html(payload.message_from_id=={{player.id_in_group}}?payload.message_player:' ');
    };


</script>
{% endblock %}