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

{% block title %}

{% endblock %}




{% block styles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="{% static 'instruction_tabs/custom.css' %}" rel="stylesheet">

<style>
h3{
  max-width:700px;
  margin:30px auto;

}
.container_over{
  max-width:700px;
  margin:0 auto;
  border:1px solid #ccc;
  padding:10px;
  height:700px;
  display:flex;
  justify-content:space-between;

}

.source-container{
  width:300px;
  border:1px solid #ccc;
}
.item{
  height:30px;
  border:1px solid #ccc;
  margin:2px;
  background-color:#abd5ea;
  cursor:move;

}
.item p{
  text-align:center;
  margin:5px;
}

.source{
  position:relative;
  border:1px solid #ccc;
  margin:5px;
  height:36px
}
.destination-container{
  width:300px;
  border:1px solid #ccc;
  }
.destination{
  height:36px;
  border:1px solid #ccc;
  margin:5px;
  background:#f1f1f1;
  border-left:30px solid  #ccc;
  position:relative;
}
.ui-droppable-active{
  border-color:#bbb;
}
.ui-droppable-hover{
  background:#ddd;
}
.destination span{
      position: absolute;
    z-index: 2;
    padding: 9px;
    left: -28px;
}
.ui-draggable-dragging{
  z-index:999 !important;
}
</style>

<style>
/* Set a style for all buttons */
button:hover {
  opacity:1;
}


/* Add a color to the cancel button */
.rebtn {
  background-color: #f44336;
  color: black;
}

/* Add a color to the delete button */
.cbtn {
  background-color: #32cd32;
  color: white;
}



</style>

{% 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>

</ul>
<br>
<br>


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

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Evaluation of Payoff Pairs
 </h3>
  </div>
<br>

<p>
This experiment consists of one task, which is identical for all participants.
You will be shown a list of sixteen payoff pairs similarly to the screen below
(The list on the screen
just serves as an example, the values of the actual pairs will be different).
</p>

<center>
    <img src="{{ static 'images/Screen1.JPG' }}" width="400px"/>
</center>

<p>
Each of these pairs consists of two numbers (x, y). The first number x corresponds to
the number of ECUs you would receive and the second number y corresponds to the
number of ECUs another participant would receive.
Your task is to rank all these payoff pairs according to how much you like them.
That is,
you indicate which of these combinations you like best, which one second best, and so on.
</p>
<p>
The payoff pairs will initially be ordered randomly. You can move individual pairs
to your preferred position by drag-and-drop. The pair you place on the top
corresponds to your most preferred one, the pair you place second corresponds
to your second best option and so
on until at the bottom you will place your least preferred pair from the options.
</p>
<p>
For example, if you like the payoff pair
(4, 16) (currently on rank 6) the most, you should move it
to rank 1 (see screenshot below).
</p>

<center>
    <img src="{{ static 'images/Screen2.JPG' }}" width="400px"/>
</center>

<p>
Once you have rearranged the list according to your preference,
you will be asked to confirm that this list reflects how you rank the
16 payoff pairs.
</p>

<p>
Before you are asked to decide about your ranking of the different pairs,
you will be asked some questions to help with your understanding of the experiment.
At the end of the experiment, there will be a short general demographics questionnaire.
</p>

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

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


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Calculation of final Payoff </h3>
  </div>
<br>

<p>
<b>
Your final payoff consists of a payoff value (x)
from your own decision and a payoff value (y) from the decision of another participant.
</b>
</p>
<p>
To determine those two values, two of the sixteen payoff pairs will be
chosen randomly and the one you ranked better will be selected
for payment (this corresponds to the one with the lower rank number).
From this pair, you will receive the first value for yourself,
and the second value will be paid to another participant. In addition,
you will receive a payoff value from the decision of another participant
(which will determined exactly as the payoff from your own decision is determined).
Please notice that the participant who receives your second value and the participant from whom you receive
the second value are different participants.
</p>
<p>
This procedure guarantees that it is optimal for you to submit your true ranking
of payoff combinations.
</p>

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





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


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Your Ranking </h3>
  </div>
<br>


<p>
Please rank order the following 16 payment pairs by moving the pairs
to your desired position (lower ranks correspond to better positions: rank 1 = best rank, rank 16 = worst rank).
</p>
<p>
If a pair is selected for payment, the first value of the pair corresponds to the payoff
you  will receive and the second value is paid out to another participant.
</p>

<div class='container_over'>
<div class="source-container">
    {{ for choice in Constants.choices }}
 <div class='source'>
   <div class='item' id="items">
    <p>{{ choice }}</p>
   </div>
 </div>
{{ endfor }}
</div>

  <div class='move-back'>
  </div>

<div class='destination-container'>
    <ul>
    {{ for r in Constants.ranks }}
    <div class="destination" id="ranknumber_{{ r}}">
        <span>{{ r }} </span>
    </div>
    {{ endfor }}
         <input type="hidden" name="ranking" id="ranking">
        {{ formfield_errors 'ranking' }}

</div>

</div>






<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button type="button", class="nexttab btn-primary btn next" data-toggle="modal" data-target="#myModal">Next</button>
  </div>

<div class="container">
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
              <p>Are you sure about your ranking?</p>
            </div>
            <div class="modal-footer">
          <button type="submit" class="cbtn" >Confirm Ranking</button>
          <button type="button" class="rebtn" data-dismiss="modal">Rearrange Ranking</button>

        </div>
      </div>

    </div>
  </div>
</div>

</body>


{% block scripts %}

<script src="{% static 'instruction_tabs/prev_next_button.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>


<script>
$(function(){

  item_height=$(".item").outerHeight(true);
  height=(item_height+2)*($(".item").length+1);
  $(".source-container,.destination-container").height(height);



  $(".source .item").draggable({
    revert:"invalid",
    start:function(){

      $(this).data("index",$(this).parent().index());

    }
  });

  $(".destination").droppable({
      drop:function(evern,ui){
          if($(this).has(".item").length){
            if(ui.draggable.parent().hasClass("source")){
                index=ui.draggable.data("index");
                ui.draggable.css({left:"0",top:"0"}).appendTo($(".source").eq(index));
            }
            else{
             ui.draggable.css({left:"0",top:"0"}).appendTo($(this));
              index=ui.draggable.data("index");
              $(this).find(".item").eq(0).appendTo($(".destination").eq(index))
            }
          }
        else{
          ui.draggable.css({left:"1px",top:"1px"});
          ui.draggable.appendTo($(this));
          $(".destination").removeClass("ui-droppable-active");
        }
      }
  });

  $(".source").droppable({
    accept: function(draggable) {
        return $(this).find("*").length == 0;
    },
   drop:function(event,ui){
     ui.draggable.css({left:"0",top:"0"}).appendTo($(this))
   }
  })


})
</script>
<script>
let el = document.getElementById('items');
let sortable = Sortable.create(el, {
    onChange: function (evt) {
        document.getElementById('ranking').value = sortable.toArray().join(',');
    }
});
</script>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});
</script>
{% endblock %}

{% endblock %}