{{ extends "global/Page.html" }}



{{ block title }}
    Application Form {{ r_num }}/6
{{ endblock }}

{{ block content }}

<div class="boxed" id="boxed">


        <p class="matching"><span style="font-weight:bold;">Your payoff</span> 
            amount depends on the school slot you hold at the end of the experiment:
            
        </p>
        
        <table class="table_2">
            <tr>
                <th style="text-align: center">School:</th>
                <th><span style="font-weight:bold;">A</span></th>
                <th><span style="font-weight:bold;">B</span></th>
                <th><span style="font-weight:bold;">C</span></th>
            </tr>
            <tr style="outline: solid">
                <th style="text-align: center">Your Payoff:</th>
                <th><span style="font-weight:bold;">${{ your_payoffs.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 1's Payoff:</th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 2's Payoff:</th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.0 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.1 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.2 }}</span></th>
            </tr>
        
        
        </table>  


<hr style="width:50%;margin-left:25%;">

        
        <p class="matching">
            Please fill out your application form (sum of ticket must be 100 and each school must be allocated at least 1 ticket):
        </p> 
        
        
        <table class="table_3">
            
            <tr>
                <th>School A:</th>
                <th>
                    <input type="number" class="form-control" id="id_school_1" max="98" min="1" name="school_1" required="" value="">
                </th>
            </tr>
            <tr>
                <th>School B:</th>
                <th>
                    <input type="number" class="form-control" id="id_school_2" max="98" min="1" name="school_2" required="" value="">
                </th>
            </tr>
            <tr>
                <th>School C:</th>
                <th>
                    <input type="number" class="form-control" id="id_school_3" max="98" min="1" name="school_3" required="" value="">
                </th>
            </tr>
        
        
        </table> 
    
    


<hr style="width:50%;margin-left:25%;">

   
   <button type="button" onclick="check_valid()"  class="otree-btn-next btn btn-primary">Submit</button>
 

 
</div>

{{ endblock }}




{{ block styles }}
    <style>
 
        
        p.matching{
            font-size: 18px; 
            text-align: justify;
                
                }
                
                

        
    </style>
    
    

<style>
 

  .table_3{
  
    
  border-collapse: separate;
  
  width:50%;
  
  
  background:transparent;
  margin-left: auto; 
  margin-right: auto;
  font-size: 18px; 
  border: 1px solid black;
  padding: 15px;
  border-radius: 15px;
  
  
  
  }

         
    
    </style>       
    
   
{{ endblock }}


{{ block script}}

    <script>
    
    function check_valid(){
            var school_1 = document.getElementById("id_school_1");
            var school_2 = document.getElementById("id_school_2");
            var school_3 = document.getElementById("id_school_3");
            var total = parseInt(school_1.value)+parseInt(school_2.value)+parseInt(school_3.value);
            
            
            if( school_1.value == 0 || school_2.value == 0 || school_3.value == 0){
                alert("Please allocate at least 1 ticket for each school.");    
            
                }
            else if (Number.isInteger(Number(school_1.value))==false || Number.isInteger(Number(school_2.value))==false || Number.isInteger(Number(school_3.value))==false ){
                
                alert("Allocated tickets must be whole numbers.")
                }
           
           
            else if( total != 100){
                alert("The sum of tickets allocated to all schools must be 100.");
                
                }
            else{
                document.querySelector("form").submit();
            }
            }
            

    </script>


{{ endblock }}