{{ extends 'global/Page.html' }}
{{ block title }}auction{{ endblock }}

{{ block content }}

<table class="table">
    <tr>
        <th>Highest bid1</th>
        <td id="highest-bid1"></td>
    </tr>
    <tr>
        <th>Make new bid</th>
        <td>
            <input type="number" id="input-bid1">
           

        </td>
    </tr>
</table>

<table class="table">
    <tr>
        <th>Highest bid2</th>
        <td id="highest-bid2"></td>
    </tr>
    <tr>
        <th>Make new bid</th>
        <td>
            <input type="number" id="input-bid2">
            
           
        </td>
    </tr>
</table>

<table class="table">
    <tr>
        <th>Highest bid3</th>
        <td id="highest-bid3"></td>
    </tr>
    <tr>
        <th>Make new bid</th>
        <td>
            <input type="number" id="input-bid3">
            
          
        </td>
    </tr>
</table>

<table class="table">
    <tr>
        <th>Highest bid4</th>
        <td id="highest-bid4"></td>
    </tr>
    <tr>
        <th>Make new bid</th>
        <td>
            <input type="number" id="input-bid4">
           
        </td>
    </tr>
</table>

 <button type="button" id = "btn" onclick="sendBid()">submit your new bids</button>

{{ endblock }}

{{ block scripts }}
<script>
 let bidInput1 = document.getElementById('input-bid1');
 let highestBidDiv1 = document.getElementById('highest-bid1');
 let bidInput2 = document.getElementById('input-bid2');
 let highestBidDiv2 = document.getElementById('highest-bid2');
 let bidInput3 = document.getElementById('input-bid3');
 let highestBidDiv3 = document.getElementById('highest-bid3');
 let bidInput4 = document.getElementById('input-bid4');
 let highestBidDiv4 = document.getElementById('highest-bid4');
 let btn = document.getElementById('btn');

   btn.addEventListener("click", function()  {
       
            sendBid();
        })
  

    function sendBid(){
        let bid1 = parseInt(bidInput1.value);
        let bid2 = parseInt(bidInput2.value);
        let bid3 = parseInt(bidInput3.value);
        let bid4 = parseInt(bidInput4.value);
        liveSend({'bid1': bid1,'bid2': bid2,'bid3': bid3,'bid4': bid4})
        bidInput1.value = '';
        bidInput2.value = '';
        bidInput3.value = '';
        bidInput4.value = '';
        

    }




    function cu(amount) {
        return `${amount} points`;
    }

  function liveRecv(data) {
        // javascript destructuring assignment
        let {is_new_high_bid1, highest_bid1, highest_bidder1,is_new_high_bid2, highest_bid2, highest_bidder2,is_new_high_bid3, highest_bid3, highest_bidder3,is_new_high_bid4, highest_bid4, highest_bidder4} = data;
        let highestBidderLabel1 = (highest_bidder1 === js_vars.my_id) ? 'Me' : `Player ${highest_bidder1}`;
      highestBidDiv1.innerText = `${cu(highest_bid1)} (${highestBidderLabel1})`;
        let highestBidderLabel2 = (highest_bidder2 === js_vars.my_id) ? 'Me' : `Player ${highest_bidder2}`;
      highestBidDiv2.innerText = `${cu(highest_bid2)} (${highestBidderLabel2})`; 
        let highestBidderLabel3 = (highest_bidder3 === js_vars.my_id) ? 'Me' : `Player ${highest_bidder3}`;
      highestBidDiv3.innerText = `${cu(highest_bid3)} (${highestBidderLabel3})`;
      	let highestBidderLabel4 = (highest_bidder4 === js_vars.my_id) ? 'Me' : `Player ${highest_bidder4}`;
      highestBidDiv4.innerText = `${cu(highest_bid4)} (${highestBidderLabel4})`;
	
 	 }	

      

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

</script>
{{ endblock }}