{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    Part 4 Block 2: Round {{round_num}} Step 2
{% endblock %}

{% block content %}
    
     <div class="boxed">
     <p style="line-height: 20px;"><b>{{tasks_presented.0|slice:"9"}}</b> {{tasks_presented.0|slice:"9:"}}</p>
     <p style="line-height: 20px;"><b>{{tasks_presented.1|slice:"9"}}</b> {{tasks_presented.1|slice:"9:"}}</p>
     <p style="line-height: 20px;"><b>{{tasks_presented.2|slice:"9"}}</b> {{tasks_presented.2|slice:"9:"}}</p>
    
    <hr>
    
    
    <p >The computer selected for you: <b>{{ comp_choice|slice:"8" }}</b></p>
    <p style="line-height: 10px;">In step 1, you selected for yourself: <b> {{your_choice|slice:"8"}}</b></p>
        
    
    <hr>
    
    <p >Please complete the following:</p>
    <p ><b>I am willing to pay up to &#36; {{ form.max_payment.errors }} <input type="number" id="max_pay" step="0.01"  name="max_payment" style="width: 50px; font-weight: bold; border-radius: 10px;"> to work on the Option I selected myself rathar
    than on the option the computer chose for me</b></p>                
    
    <hr>
    
    
    
      <p>You can fill in any number as your required maximum payment between &#36;0 
     and &#36;7.00 (both included), at 1-cent intervals.</p>
     
     <hr>
     
     <p>Remember that </p>
         <ul>
          <li>If the posted price of the right to choose for yourself is less than or equal to your stated maximum price, you will pay the (lower) posted price, which will be taken from your endowment. You will obtain the right to work on the Option you chose for yourself in Step 1. If this Round is chosen for payment, your earnings will consist of your earnings from performing the Task you chose for yourself, plus what is left in your endowment</li>
          <li>If the posted price of the right to choose for yourself is higher than your stated maximum price, you will not pay anything. You will not obtain the right to work on the Option you chose for yourself in Step 1. If this Round is chosen for payment, your earnings will consist of your earnings from performing the Task you chose for yourself, plus your endowment</li>
        </ul>
        
        
            
   </div>
    

   <button type="button" id="myBtn"  class="otree-btn-next btn btn-primary">Next</button>

    
    
    
    
    
    <div id="myModal" class="modal">


  <div class="modal-content">
    <div class="modal-header">
        
      <span class="close">&times;</span>
   </div>
    <div class="modal-body">
    <h5>You have indicated that:</h5>
      <p>If the computer price is HIGHER then <b id="pop_up"> </b> you prefer
      to work on the Option that the computer chose for you</p>
      <p>If the computer price is LOWER or EQUAL to <b id="pop_up1"> </b> you prefer
      to work on the Option that you chose for yourself</p>
        <ul>
          <li>If this is the case, then hit the <q>Confirm My Decision</q> </li>
          <li>If you <b>WOULD</b> be willing to pay a higher price to choose for yourself then hit
            <q>Revise My Decision</q>  and enter a <b>higher</b> number for your maximum willingness to pay </li>
          <li>If you <b>WOULD NOT</b> be willing to pay that price to choose for yourself then hit
            <q>Revise My Decision</q>  and enter a <b>lower</b> number for your maximum willingness to pay </li>
          
        </ul>
      
      
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary">Confirm My Decision</button>
      <button type="button" id="myBtn_close" class="btn btn-primary">Revise My Decision</button>
    </div>
  </div>

</div>
    
   {% include Constants.calculator_template %}
    {% include "treatment_1/performance.html" %}
      
  {% include "treatment_1/type.html" %}  

    
{% endblock %}



{% block scripts %}

<script>
        {# Get the modal #}
        var modal = document.getElementById("myModal");
        
        {# // Get the button that opens the modal #}
        var btn = document.getElementById("myBtn");
        
        var btn_close = document.getElementById("myBtn_close");
        
        {# Get the <span> element that closes the modal#}
        var span = document.getElementsByClassName("close")[0];
        var input = document.getElementById("max_pay");
        
        {#// When the user clicks the button, open the modal #}
        btn.onclick = function() {
            if (input.value > 7){
             alert("Please input amount between $0.00 and $7.00")
            }else if (input.value == "") {
                alert("Please input amount between $0.00 and $7.00")
            }else if (input.value < 0) {
                alert("Please input amount between $0.00 and $7.00")
            }else{
            modal.style.display = "block";
            document.getElementById("pop_up").innerHTML ="$ "+ input.value;
            document.getElementById("pop_up1").innerHTML ="$ "+ input.value;
            }
           
            
            
        }
        
        
    
        
        btn_close.onclick = function() {
            modal.style.display = "none";
        }
        
        {#// When the user clicks on <span> (x), close the modal#}
        span.onclick = function() {
            modal.style.display = "none";
        }
        
        {#// When the user clicks anywhere outside of the modal, close it#}
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        
        
             
        </script>



    <script>
    var input = document.getElementById("max_pay");
    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            if (input.value > 7){
             alert("Please input amount between $0.00 and $7.00")
            }else if (input.value == "") {
                alert("Please input amount between $0.00 and $7.00")
            }else if (input.value < 0) {
                alert("Please input amount between $0.00 and $7.00")
            }else{
            document.getElementById("myBtn").click();
            document.getElementById("pop_up").innerHTML ="$ "+ input.value;
            document.getElementById("pop_up1").innerHTML ="$ "+ input.value;
            }
            
            
        }
    });
    </script>
    
    
    <script>
    function checkEnter(e){
     e = e || event;
     var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
     return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
    }
    
    document.querySelector("form").onkeypress = checkEnter;
    </script>
{% endblock %}