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

{{ block content }}

<p>
    This is an formal auction for farmland sales experiment.
</p>
  
<p>
    We are now in period {{player.round_number}}. 
</p>
<p>
    The average aquifer saturated thickness level is <b style="color:red">{{player.saturate}}</b>. 
The decling rate of the aquifer saturated thickness level is 10 feet per period</p>
<p>
    We have 4 farmlands to be sold in this period. Farmland A B C and D. 
    
      <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-0lax">period </th>
    <th class="tg-0lax">average saturated thickness level of the aquifer</th>
    <th class="tg-0lax">High return farmland <br>(type A)</th>
    <th class="tg-0lax">Mid return farmland <br>(type B)</th>
    <th class="tg-0lax">Low return farmland <br>(type C)</th>
    <th class="tg-0lax">Dry farmland <br>(type D)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax">{{player.round_number}}</td>
    <td class="tg-0lax">{{player.saturate}}</td>
    <td class="tg-0lax">{{player.A}}feet</td>
    <td class="tg-0lax">{{player.B}}feet</td>
    <td class="tg-0lax">{{player.C}}feet</td>
    <td class="tg-0lax">{{player.D}}feet</td>
  </tr>
</tbody>
</table>      
    
    
    You have 4 minutes to do the auction. You could make adjustments and submit bids anytime during the 4 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>
   Please make bids for the two farmlands.    
</p>

<P>
    You current account balance is {{participant.temp_total}}
</P>
 
 budget   <td id="accountB"></td>
<table class="table">
 <tr>
     <th> <button type="button" id = "refresh" onclick="sendBid()"> refresh </button> </th>
    bid budget  <td id="budget"></td>  
</tr>
      
     
    <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">
 <button type="button" id = "lok1" onclick="sendBid1()">bid</button>

        </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"> 
 <button type="button" id = "lok2" onclick="sendBid2()">bid</button>

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




<table class="table">
    <tr>
        <th>Highest bid for C {{player.C}} feet</th>
        <td id="highest-bid3"></td>
  
      
       
    </tr>
    <tr>
        <th>Make new bid for C</th>
        <td>
            <input type="number" id="input-bid3">
 <button type="button" id = "lok3" onclick="sendBid3()">bid</button>           

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

<table class="table">
    <tr>
        <th>Highest bid for D {{player.D}} feet </th>
        <td id="highest-bid4"></td>
   
    
      
    </tr>
    <tr>
        <th>Make new bid for D</th>
        <td>
            <input type="number" id="input-bid4">
 <button type="button" id = "lok4" onclick="sendBid4()">bid</button>            
           
        </td>
    </tr>
</table>



{% 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-inkr{background-color:#ffccc9;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-kibn{background-color:#ffffc7;border-color:inherit;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
.tg .tg-l3g7{background-color:#9aff99;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}
.tg .tg-nirg{background-color:#9aff99;border-color:#002b36;color:#002b36;font-size:13px;text-align:center;vertical-align:middle}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 922px">
<colgroup>
<col style="width: 60px">
<col style="width: 73px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 60px">
<col style="width: 61px">
<col style="width: 61px">
<col style="width: 67px">
</colgroup>
<thead>
  <tr>
    <th class="tg-cnnz">period</th>
    <th class="tg-cnnz">average <br>aquifer <br>saturated<br> thickness level</th>
    <th class="tg-inkr">A</th>
    <th class="tg-inkr">price<br> of A</th>
    <th class="tg-inkr">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">C</th>
    <th class="tg-cayt">price<br> of C</th>
    <th class="tg-cayt">return <br>of C</th>
    <th class="tg-l3g7">D</th>
    <th class="tg-l3g7">price <br>of D</th>
    <th class="tg-l3g7">return<br> of D<br></th>
    <th class="tg-cnnz">your <br>account <br>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-inkr">{{p.A}}</td>
    <td class="tg-inkr">{{p.group.highest_bid1}}</td>
    <td class="tg-inkr">{{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-cayt">{{p.C}}</td>
    <td class="tg-cayt">{{p.group.highest_bid3}}</td>
    <td class="tg-cayt">{{p.group.farmland3value}}</td>
    <td class="tg-l3g7">{{p.D}}</td>
    <td class="tg-l3g7">{{p.group.highest_bid4}}</td>
    <td class="tg-l3g7">{{p.group.farmland4value}}</td>
    <td class="tg-cnnz">{{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 bidInput3 = document.getElementById('input-bid3');
 let highestBidDiv3 = document.getElementById('highest-bid3');
 let bidInput4 = document.getElementById('input-bid4');
 let highestBidDiv4 = document.getElementById('highest-bid4');

 let lok1 = document.getElementById('lok1');
 let lok2 = document.getElementById('lok2');
 let lok3 = document.getElementById('lok3');
 let lok4 = document.getElementById('lok4');
 let refreshcl = document.getElementById('refresh');

 let limitdv1 = document.getElementById('budget');



lok1.addEventListener("click", function()  {
       
            sendBid1();
        })

lok2.addEventListener("click", function()  {
       
            sendBid2();
        })
  
lok3.addEventListener("click", function()  {
       
            sendBid3();
        })
  
lok4.addEventListener("click", function()  {
       
           sendBid4();
        })
refreshcl.addEventListener("click", function()  {
       
           sendBid();
        })    

 function sendBid(){



        liveSend({'bid1': 0,'bid2': 0,'bid3': 0,'bid4': 0})

    }



 function sendBid1(){
        let bid1 = parseInt(bidInput1.value);



        liveSend({'bid1': bid1,'bid2': 0,'bid3': 0,'bid4': 0})
        bidInput1.value = '';

 
        

    }
 function sendBid2(){
   
        let bid2 = parseInt(bidInput2.value);



        liveSend({'bid1': 0,'bid2': bid2,'bid3': 0,'bid4': 0})
     
        bidInput2.value = '';

 
        

    } 
function sendBid3(){

        let bid3 = parseInt(bidInput3.value);



        liveSend({'bid1': 0,'bid2': 0,'bid3': bid3,'bid4': 0})

        bidInput3.value = '';
     
 
        

    } 
function sendBid4(){

        let bid4 = parseInt(bidInput4.value);


        liveSend({'bid1': 0,'bid2': 0,'bid3': 0,'bid4': bid4})

        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, budget} = 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})`;
  		limitdv1.innerText=`${cu(budget)}`;
  		




 		
  }	

      

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


</script>
{{ endblock }}