{% extends 'otree/WaitPage.html' %}
{% load otree %}
{% block scripts %}
<script>

function SaveTime(){
  if(localStorage.getItem("time_unique_id_warning") === null){
    var msMinute = 60*1000;
    var curr_date=new Date();
    var date_warning= new Date(curr_date.getTime()+msMinute);
    var date_waited_too_long=new Date(curr_date.getTime()+8*msMinute);
    localStorage.setItem("time_unique_id_warning", date_warning);
    localStorage.setItem("time_unique_id_waited_too_long", date_waited_too_long);
    
    }
}

function showCode() { 
    document.getElementById("newText").style.display = "inline"; 
    document.getElementById("defaultText").style.display = "none"; 
    document.getElementById("warning").style.display = "none"; 
    
    $('#collapseSummary').collapse('hide')

    $('#collapseInstructions').collapse('hide')
}


function showWarning() { 
 
    document.getElementById("warning").style.display = "inline"; 
}


$( document ).ready(function() {
  SaveTime();
  if(localStorage.getItem("time_unique_id_warning") !== null){
  var msMinute = 60*1000;
  var curr_date = new Date();
  var date_warning = new Date(localStorage.getItem("time_unique_id_warning"));
  var date_waited_too_long = new Date(localStorage.getItem("time_unique_id_waited_too_long"));

  
  if(curr_date>date_warning)
  {
    showWarning()
  }
  else{
    setTimeout("showWarning()", date_warning-curr_date);
  }
  if(curr_date>date_waited_too_long)
{
  showCode()
}
  else{
  setTimeout("showCode()", date_waited_too_long-curr_date);
  }
}
});





</script>

{% endblock %}

{% block title %}Please wait for your company to form{% endblock %}
{% block content %}

		<div id="defaultText">
			<p>Please wait for another participant to complete the quiz and join the company you are a part of.</p>
        </div>

        <div id="warning" style="display:none">
            <p>If you wait on this page for more than 8 minutes, the completion code will apear on screen and you will be able to complete the HIT and recive the completion fee.</p>
          </div>

         

       <div id="newText" style="display:none">
        <p style="display:none">Warning!!!, the study records start and end time for an experiment. If you are going to submit the code before the requiered time, you will not receive the participantion fee.</p><p>Looks like no one else has turned up. We're really sorry about that. Please return the HIT using the following code and you will receive the completion fee:</p>   
        <div class="row">
          <div class="alert alert-primary col-md-4 col-md-offset-4" align="center">
              <b>WAITEDTOOLONG</b>
          </div>
      </div>
      <p>Otherewise, you can continue waiting and most likely another participant will join the company. </p>
       </div>

       <p>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSummary" aria-expanded="false" aria-controls="collapseExample">
          Review summary of instructions
        </button>
      </p>
      <div class="collapse" id="collapseSummary">
        <div class="card card-body bg-light instructions">
            {% include Constants.template_recap %}
        </div>
      </div>

      

      <p>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInstructions" aria-expanded="false" aria-controls="collapseExample">
          Review instructions
        </button>
      </p>
      <div class="collapse" id="collapseInstructions">
       
                {% include Constants.template_instructions %}
       
      </div>


    <br>
{% endblock %}