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

{% block title %}
    Part 3 Block 3: Round {{current_round}}
{% endblock %}

{% block content %}

    
    
    <div class="boxed">
    <p><b>Option X:</b> {{option_A}} </p>
    <p><b>Option Y:</b> {{option_B}} </p>
    
    <hr>
    
    <p><strong>Please complete the following:</strong></p>
    <p>I prefer to work on <strong> {{ option_A|slice:"6" }}</strong> and earn <strong>&#36;0.50</strong> per correct answer 
    unless the computer offers me at least <strong>&#36;</strong> <input type="number" id="min_rate" step="0.01"  name="decission" style="width: 50px; font-weight: bold; border-radius: 10px;">{{ form.decission.errors }} per correct answer for <strong>{{ option_B|slice:"6" }}</strong></p>
    
    <hr>
    
     
     <p><strong>Remember that: </strong></p>
         <ul>
          <li>If the computer draws a rate smaller than your minimum required rate, you
              will performe the task in Option X ({{ option_A|slice:"6" }}) and earn &#36; 0.50 per correct answer;</li>
          <li>If the computer draws a rate equil to or greater than your minimum required rate, you
              will performe the task in Option Y ({{ option_B|slice:"6" }}) and earn <i> the rate drawn by the computer </i> per correct answer;</li>
        </ul>
        
</div>


<button type="button" id="myBtn"  class="btn btn-primary next">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">
    
      
      <p style="line-height: 0px;"><h5>You have indicated that you would be indifferent between these two options:</h5></p>  
      <p style="line-height: 10px;"><b>Option X:</b> {{option_A}}</p>
      <p style="line-height: 10px; "><b>Option Y:</b> {{ option_B|slice:"-25" }} <b id="pop_up"> </b> per correct answer</p>
      <ul>
          <li>If this is the case, then hit the <q>Confirm My Decission</q> </li>
          <li>If you prefer Option X, then you should hit <q>Revise My Decission</q> and enter a <b>higher</b> rate for {{ option_B|slice:"6" }} </li>
          <li>If you prefer Option Y, then you should hit <q>Revise My Decission</q> and enter a <b>lower</b> rate for {{ option_B|slice:"6" }} </li>
        </ul>
      
      
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary">Confirm My Decission</button>
      <button type="button" id="myBtn_close" class="btn btn-primary">Revise My Decission</button>
    </div>
  </div>

</div>


     
 {% include Constants.calculator_template %}
  {% include "treatment_1/performance.html" %}
    
  {% include "treatment_1/type.html" %}  
  
{% endblock %}

{% block styles %}




  <style>

  
    .btn-primary {
  
        background-color: #186A3B !important;
        border-color: #186A3B !important;
        font-weight: bold !important;
        
        
        }
    .next{
        position: absolute !important;
        right: 16% !important;
        margin: 2.5% !important;
    }    
    
    </style>


{% 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("min_rate");
        
        {#// When the user clicks the button, open the modal #}
        btn.onclick = function() {
            if (input.value > 5){
             alert("Please input amount between $0.00 and $5.00")
            }else if (input.value == "") {
                alert("Please input amount between $0.00 and $5.00")
            }else if (input.value < 0) {
                alert("Please input amount between $0.00 and $5.00")
            }else{
            modal.style.display = "block";
            document.getElementById("pop_up").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("min_rate");
    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            if (input.value > 5){
             alert("Please input amount between $0.00 and $5.00")
            }else if (input.value == "") {
                alert("Please input amount between $0.00 and $5.00")
            }else if (input.value < 0) {
                alert("Please input amount between $0.00 and $5.00")
            }else{
            document.getElementById("myBtn").click();
            document.getElementById("pop_up").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 %}