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

{{ block title }}
Applying the Switch-Point Procedure
{{ endblock }}


{% block scripts %}

<script>
    // Source: https://www.jqueryscript.net/other/bootstrap-tabs-carousel.html
var useTab = true;
function bootstrapTabControl(){
  var i, items = $('.nav-link'), pane = $('.tab-pane');
  // next
    $('.nexttab').on('click', function(){

      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }

  });
  // Prev
  $('.prevtab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i-1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i-1]).addClass('show active');
      }
      });
}
bootstrapTabControl();


function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

function checkSubmit(btn) {
    buttonName = btn.name;
    let form = document.getElementById(buttonName);
    let isValid = form.reportValidity();
    if (!isValid) return;

    var formName = form.name;
    var formInput = form.value;
    var sendDict = {};

    if (formInput.length == 0) {
        alert("You must enter a switch-point");
        return;
    }

    var formValue = parseFloat(formInput);
    if (formValue < 0 || formValue > 100) {
        alert("Your switch-point must be between 0 and 100");
    } else if (formValue < 1 && formValue > 0) {
        if (confirm("Please double-check your switch-point. Remember that your switch-point is a percentage between 0 and 100. Press OK to proceed.")) {
            sendDict[formName] = formValue;
            liveSend(sendDict);
            document.getElementsByClassName("nexttab ".concat(btn.name))[0].click();
            topFunction();
        }
    } else {
        sendDict[formName] = formValue;
        liveSend(sendDict);
        document.getElementsByClassName("nexttab ".concat(btn.name))[0].click();
        topFunction();
    }
}

function liveRecv(data) {
    // your code goes here
    document.getElementById("Task1").innerHTML = data[0];
    document.getElementById("Task2").innerHTML = data[1];
    document.getElementById("Task3").innerHTML = data[2];
    document.getElementById("Task4").innerHTML = data[3];
    document.getElementById("Task5").innerHTML = data[4];
}


</script>
<!--UP TO HERE-->
{% endblock %}


{% block styles %}

<link href="{% static 'back_button_v2/css/custom.css' %}" rel="stylesheet">

{% endblock %}


{% block content %}

<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">
  

  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>


<li class="nav-item">
    <a class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
  </li>


<li class="nav-item">
    <a class="nav-link" id="part4-tab" data-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Tab 4</a>
  </li>

<li class="nav-item">
    <a class="nav-link" id="part5-tab" data-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Tab 5</a>
  </li>

<li class="nav-item">
    <a class="nav-link" id="part6-tab" data-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Tab 6</a>
  </li>

</ul>



<!-- Tab content -->
<div class="tab-content" id="myTabContent">

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
            {{ with Task_name='Tabulation' }}
                {{with Task_description='In each round there will be a grid filled with symbols. The task involves using mathematical abilities to tabulate the symbols' }}
                    {{ include 'BDM/PrefElicit.html'}}
                {{ endwith }}
            {{endwith}}

            {{ with Form_Value=form.Tabulation_Value }}
                <label style="font-size: 20px">  {{Form_Value.label }}</label>
                <div class="form-group">
                        <input type="number" step="any" id="tabulation_form" name="Tabulation_Value" min="0" oninput="this.value =
                                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                        <label style="text-align: right">%</label>
                </div>
                {{ formfield_errors 'Tabulation_Value' }}
            {{endwith}}

            {{ include 'BDM/Are_You_Sure.html' }}
      <button type="button" hidden onclick="topFunction()" id="tabulation_next_hidden" class="nexttab tabulation_form"></button>
      <button onclick="checkSubmit(this)" type="button" id="tabulation_next" name="tabulation_form" class="btn-primary btn next">Next</button>
  </div>

  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">
            {{ with Task_name='Concealment' }}
                {{with Task_description='In each round there will be a list of symbols. The task involves using analytical abilities to conceal each symbol' }}
                    {{ include 'BDM/PrefElicit.html'}}
                {{ endwith }}
            {{endwith}}

            {{ with Form_Value=form.Concealment_Value }}
                <label style="font-size: 20px">  {{Form_Value.label }}</label>
                <div class="form-group">
                        <input type="number" step="any" id="concealment_form" name="Concealment_Value" min="0" oninput="this.value =
                                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                        <label style="text-align: right">%</label>
                </div>
                {{ formfield_errors 'Tabulation_Value' }}
            {{endwith}}

            {{ include 'BDM/Are_You_Sure.html' }}
          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button type="button" hidden onclick="topFunction()" id="concealment_next_hidden" class="nexttab concealment_form"></button>
      <button onclick="checkSubmit(this)" type="button" id="concealment_next" name="concealment_form" class="btn-primary btn next">Next</button>
  </div>


  <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">
            {{ with Task_name='Replication' }}
                {{with Task_description='In each round, there will be a row of symbols. This task involves using technology to reproduce each symbol' }}
                    {{ include 'BDM/PrefElicit.html'}}
                {{ endwith }}
            {{endwith}}

            {{ with Form_Value=form.Replication_Value }}
                <label style="font-size: 20px">  {{Form_Value.label }}</label>
                <div class="form-group">
                        <input type="number" step="any" id="replication_form" name="Replication_Value" min="0" oninput="this.value =
                                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                        <label style="text-align: right">%</label>
                </div>
                {{ formfield_errors 'Replication_Value' }}
            {{endwith}}

            {{ include 'BDM/Are_You_Sure.html' }}
          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button type="button" hidden onclick="topFunction()" id="replication_next_hidden" class="nexttab replication_form"></button>
      <button onclick="checkSubmit(this)" type="button" id="replication_next" name="replication_form" class="btn-primary btn next">Next</button>
  </div>

  <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">
            {{ with Task_name='Interpretation' }}
                {{with Task_description='In each round there will be a single symbol. The task involves using visual abilities to interpret that symbol' }}
                    {{ include 'BDM/PrefElicit.html'}}
                {{ endwith }}
            {{endwith}}

            {{ with Form_Value=form.Interpretation_Value }}
                <label style="font-size: 20px">  {{Form_Value.label }}</label>
                <div class="form-group">
                        <input type="number" step="any" id="interpretation_form" name="Interpretation_Value" min="0" oninput="this.value =
                                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                        <label style="text-align: right">%</label>
                </div>
                {{ formfield_errors 'Interpretation_Value' }}
            {{endwith}}

            {{ include 'BDM/Are_You_Sure.html' }}
          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button type="button" hidden onclick="topFunction()" id="interpretation_next_hidden" class="nexttab interpretation_form"></button>
      <button onclick="checkSubmit(this)" type="button" id="interpretation_next" name="interpretation_form" class="btn-primary btn next">Next</button>
  </div>

  <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">
            {{ with Task_name='Organisation' }}
                {{with Task_description='In each round, there will be a sequence of symbols. This task involves using categorisation abilities to rearrange each sequence of symbols' }}
                    {{ include 'BDM/PrefElicit.html'}}
                {{ endwith }}
            {{endwith}}

            {{ with Form_Value=form.Organisation_Value }}
                <label style="font-size: 20px">  {{Form_Value.label }}</label>
                <div class="form-group">
                        <input type="number" step="any" id="organisation_form" name="Organisation_Value" min="0" oninput="this.value =
                                    !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                        <label style="text-align: right">%</label>
                </div>
                {{ formfield_errors 'Organisation_Value' }}
            {{endwith}}

            {{ include 'BDM/Are_You_Sure.html' }}
          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button type="button" hidden onclick="topFunction()" id="organisation_next_hidden" class="nexttab organisation_form"></button>
      <button onclick="checkSubmit(this)" type="button" id="organisation_next" name="organisation_form" class="btn-primary btn next">Next</button>
  </div>



 <div class="tab-pane" id="part6" role="tabpanel" aria-labelledby="part6-tab">

<h3>Thank you for providing your switch-points.</h3>

<p>
The given switch-points indicate that you rank the level 1 tasks in the following order:
</p>
     <ol>
         <li> <span id="Task1"></span> (level 1) </li>
         <li> <span id="Task2"></span> (level 1)</li>
         <li> <span id="Task3"></span> (level 1)</li>
         <li> <span id="Task4"></span> (level 1)</li>
         <li> <span id="Task5"></span> (level 1)</li>
     </ol>
<p>
    If you agree with this ranking, press the next button to continue. <br>
    Otherwise, you can use the back buttons to change your switch-points.
</p>

<details>
    <summary> Click this text to show / hide the vague descriptions of the tasks</summary>

</details>

    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>
  </div>

</div>
<br> <br> <br> <br> <br>
<h2> Switch-Point Procedure Information</h2>

    {{ include 'BDM/BDM_Info_ShowHide.html' }}


{% endblock %}