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

{{ block content }}

<style>
div.pagewelcome {
  position: absolute;
  top: 30px;
  left: 250px;
}
</style>
<div class="pagewelcome">
<p style="font-size:40px;">Welcome to the Main Experiment!</p>
</div>


<style>
div.pagestart {
  position: absolute;
  top: 115px;
  left: 250px;
  width: 900px;
}
</style>

<div class="pagestart">
    <p style="font-size:20px; display:inline;">In the main experiment, </p><p style="color:blue; display:inline; font-size:20px;">{{ player.item_n_to_play }}</p><p style="font-size:20px; display:inline;"> items need to be checked out. Remember, if the checkout process is completed within the specified time limit of </p><p style="color:blue; display:inline; font-size:20px;">{{ player.checkout_bonus_time|to0 }}</p><p style="font-size:20px; display:inline;"> seconds, you will receive an extra ${{ C.BONUS_PAY }} bonus.</p>
    <br>
    <br>
    <p style="font-size:20px; display:inline;">Please choose your preferred checkout option</p>
    <br>
    <br>
</div>
    
<style>
div.checkoutword {
  position: absolute;
  top: 270px;
  left: 350px;
}
</style>

<div class="checkoutword">
    <p style="color:blue; font-size:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Self checkout &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Cashier checkout</p>
</div>



<style>
div.checkoutpic {
  position: absolute;
  top: 300px;
  left: 350px;    
  height: 2000px;
  width: 800px;
}
</style>

<div class="checkoutpic">
<img src="{{ static 'SST_images/self_checkout.jpg' }}" width="200px" />
<p style="font-size:20px; display:inline;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; OR &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<img src="{{ static 'SST_images/cashier_checkout.jpg' }}" width="200px" />
</div>


<style>
div.self {
  position: absolute;
  top: 480px;
  left: 300px;    
  height: 2000px;
  width: 350px;
}
</style>

<div class="self">
    <button id="selfbutton" onclick="self()"><p style="font-size:20px; display:inline;">Click here to choose </p><p style="color:blue; display:inline; font-size:20px;">self</p><p style="font-size:20px; display:inline;"> checkout</p></button>
    <br>

    <p style="font-size:20px; display:inline;">In the practice round, you took <b>{{ player.time_per_item_lb|to0 }} - {{ player.time_per_item_ub|to0 }}</b> seconds to process one item, which means possibly <b>{{ player.time_total_lb|to0 }} - {{ player.time_total_ub|to0 }}</b> seconds to complete all {{ player.item_n_to_play }} items.</p>
</div>


<style>
div.cashier {
  position: absolute;
  top: 480px;
  left: 800px;
  height: 2000px;
  width: 400px;
}
</style>

<div class="cashier">
    <button id="cashierbutton" onclick="cashier()"><p style="font-size:20px; display:inline;">Click here to choose </p><p style="color:blue; display:inline; font-size:20px;">cashier</p><p style="font-size:20px; display:inline;"> checkout</p></button>
    <br>
    <p style="font-size:20px; display:inline;">Remember, the cashier takes <b>{{ player.cashier_time_per_item_lb|to0 }} - {{ player.cashier_time_per_item_ub|to0 }}</b> seconds to process one item, which means <b>{{ player.cashier_time_total_lb|to0 }} - {{ player.cashier_time_total_ub|to0 }}</b> seconds to complete all {{ player.item_n_to_play }} items.</p>
</div>



<!-- Confirmation Box -->
<style>
div.box { 	
    position: absolute;
    top: 300px;
    left: 460px;
    height: 2000px;
    width: 700px;
    border: thin solid black; 
	width:480px;
	height:140px; 
	text-align: justify; 
	background-color: lightyellow; 
	word-wrap: break-word; /* words won't go from the boundry */ 
	margin: 10px 20px auto; 
	/* top, left, bottom*/ 
	padding: 10px 20px 30px; 
	float: left; 
    z-index: +1;
} 
</style>

<div id="selfmessage" class="box"> 
    <p style="font-size:20px;">Please Confirm your choice: <b>Self Checkout</b></p>
    <br>
    <p style="display:inline; font-size:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
	<button onclick="confirm()">Confirm</button>
    <p style="display:inline; font-size:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
	<button id= "cancelbuttonself" onclick="cancel()">Cancel</button>
</div>

<div id="cashiermessage" class="box"> 
    <p style="font-size:20px;">Please Confirm your choice: <b>Cashier Checkout</b></p>
    <br>
    <p style="display:inline; font-size:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
	<button onclick="confirm()">Confirm</button>
    <p style="display:inline; font-size:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
	<button id= "cancelbuttoncashier" onclick="cancel()">Cancel</button>
</div>



<script>
var option_selection = 0;
    
function dontGo(event) {
    event.preventDefault();
}
document.getElementById("cancelbuttonself").addEventListener("click",dontGo);
document.getElementById("cancelbuttoncashier").addEventListener("click",dontGo);
document.getElementById("selfbutton").addEventListener("click",dontGo);
document.getElementById("cashierbutton").addEventListener("click",dontGo);
    
document.getElementById("selfmessage").style.display = "none";
document.getElementById("cashiermessage").style.display = "none";
    
function self() {
  window.option_selection = 1;
  document.getElementById("selfmessage").style.display = "block";
  document.getElementById("selfbutton").disabled = true;  
  document.getElementById("cashierbutton").disabled = true;
}
function cashier() {
  window.option_selection = 2;
  document.getElementById("cashiermessage").style.display = "block";
  document.getElementById("selfbutton").disabled = true;  
  document.getElementById("cashierbutton").disabled = true;
}   

function cancel(){
    window.option_selection = 0;
    document.getElementById("cashiermessage").style.display = "none";
    document.getElementById("selfmessage").style.display = "none";
    document.getElementById("selfbutton").disabled = false;  
    document.getElementById("cashierbutton").disabled = false;
}    

function confirm() {
liveSend({'checkout_option_selection_var': option_selection});
}    
</script>



<br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


{{ endblock }}