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

{{ block content }}

<p>
    This is a trial auction for farmland sales experiment.
</p>
  
<p>
    We are now in period {{player.round_number}}. 
</p>
<p>
    The average aquifer saturated thickness level is {{player.saturate}}. 
The average aquifer saturated thickness level will not change in the next period</p>
<p>
    We have two farmlands to be sold in this period. Farmland A and Farmland B. 
</p>

<p>
 Tips:   
</p>


<p style="color:blue">
(1)You have 3 minutes to do the auction. You could make adjustments and submit bids anytime during the 3 minutes. After the time limits, the auction in this period will be closed, and you can not make changes or submit bids any longer.     
</p>
<p style="color:blue">
  (2) If you are not a top bidder for any assets, make sure your total bids will not exceed the account balance.The bidding budget for any asset is your account balance,but the summation of your bids will be limited to your account balance and bids for A has priority (For example, assume you are not top bidder for either A or B before you submit new bids. Your current account balance is 500. Your new bidding proposal for A is 400, and for B is 200, which summation exceeds 500. Thus, the computer will consider your bids for A is 400, and your bids for B is 500-400= 100)  
</p>
<p style="color:blue">
  (3) If you are a top bidder for some assets, the bidding budget for other assets is your account balance minus your top bids for the winning assets. (for example, assume you are a top bidder for B, but not for A. your account balance is 500. Your last bid for B was 200 and the computer shows you are the top bidder. In your new bids submition, you could increase your bid for B and the limit is 500. Although you dont need to, since you are winning B. You could also increase your bids for A but the limit is 500-200=300)  
</p>
<p style="color:blue">
(4)In case you lose the farmland that you want to buy due to the time limitaion, our suggestion is typing in you highest willingness to pay for the target farmlands at first, and making slight changes according to your opponnets bidding strategies. 
</p>
<p>
   Your current account balance is:      {{player.participant.temp_total1}}.  
</p>

<p>
   Please make bids for the two farmlands.
</p>

<P>
</P>

        
<table class="table">
    <tr>
        <th>Highest bid for A {{player.A}} feet</th>
        <td id="highest-bid1"></td>


   
    </tr>
    <tr>
        <th>Make new bid for A</th>
        <td>
            <input type="number" id="input-bid1">
           

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

<table class="table">
    <tr>
        <th>Highest bid for B {{player.B}} feet</th>
        <td id="highest-bid2"></td>
              

    </tr>
    <tr>
        <th>Make new bid for B </th>
        <td>
            <input type="number" id="input-bid2">
            
           
        </td>
    </tr>
</table>
  
   


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



{% if player.round_number != 1  %}
        <div class = "card-header rb-3 text-center">
            <b>History Table</b>
        </div>

            <div class="row justify-content-center">
<style type="text/css">
.tg  {border-collapse:collapse;border-color:#93a1a1;border-spacing:0;}
.tg td{background-color:#fdf6e3;border-color:#93a1a1;border-style:solid;border-width:1px;color:#002b36;
  font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:9px 9px;word-break:normal;}
.tg th{background-color:#657b83;border-color:#93a1a1;border-style:solid;border-width:1px;color:#fdf6e3;
  font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:9px 9px;word-break:normal;}
.tg .tg-cayt{background-color:#ecf4ff;border-color:inherit;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
.tg .tg-cnnz{background-color:#ffffff;border-color:inherit;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
.tg .tg-f0ug{background-color:#96fffb;border-color:inherit;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
.tg .tg-kibn{background-color:#ffffc7;border-color:inherit;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
.tg .tg-viqb{background-color:#ecf4ff;border-color:#000000;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-cnnz">period</th>
    <th class="tg-cnnz">average <br>aquifer <br>saturated<br> thickness level</th>
    <th class="tg-f0ug">A</th>
    <th class="tg-f0ug">price<br> of A</th>
    <th class="tg-f0ug">return <br>of A</th>
    <th class="tg-kibn">B</th>
    <th class="tg-kibn">price <br>of B</th>
    <th class="tg-kibn">return<br> of B</th>
    <th class="tg-cayt">Your account balance </th>
  </tr>
</thead>
    
    <tbody>  {% for p in player.in_previous_rounds %}
  <tr>
    <td class="tg-cnnz">{{p.round_number}}</td>
    <td class="tg-cnnz">{{p.saturate}}</td>
    <td class="tg-f0ug">{{p.A}}</td>
    <td class="tg-f0ug">{{p.group.highest_bid1}}</td>
    <td class="tg-f0ug">{{p.group.farmland1value}}</td>
    <td class="tg-kibn">{{p.B}}</td>
    <td class="tg-kibn">{{p.group.highest_bid2}}</td>
    <td class="tg-kibn">{{p.group.farmland2value}}</td>
    <td class="tg-viqb">{{p.temp}}</td>
  </tr>
          {% endfor %}
</tbody>
</table>

            </div>
       
    {% endif %}



{{ 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 msglimit1 = document.getElementById('limit1');
 let msglimit2 = document.getElementById('limit2');



 let btn = document.getElementById('btn');

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

    function sendBid(){
        let bid1 = parseInt(bidInput1.value);
        let bid2 = parseInt(bidInput2.value);
   
        liveSend({'bid1': bid1,'bid2': bid2})
        bidInput1.value = '';
        bidInput2.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,limit1,limit2} = 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})`; 
       msglimit1.innerText = `${cu(limit1)} `; 
      msglimit2.innerText = `${cu(limit2)} `; 


 	 }	

      

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


</script>
{{ endblock }}