{% 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>
#sortable1 {
    border: 1px solid #000000;
    width: 40%;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 15%;
    margin-left: 10% auto;
    text-align: center;
  }

    #sortable2 {
    border: 1px solid #000000;
    width: 50%;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    float: left;
    text-align: center;
    border-spacing: 2px;

  }

#sortable1 li{
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 80%;
background-color: lightgray;
border-bottom: 1px solid #c1c1c1;
color: #000;
font-size: 15px;
margin-bottom: 4px;
border-radius: 5px;
-webkit-transition: transform 0.25s ease-in-out;
-moz-transition: transform 0.25s ease-in-out;
-o-transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
-webkit-transition: box-shadow 0.25s ease-in-out;
-moz-transition: box-shadow 0.25s ease-in-out;
-o-transition: box-shadow 0.25s ease-in-out;
transition: box-shadow 0.25s ease-in-out;
}

#sortable2 li{
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 80%;
list-style-type: decimal;
background-color: #00b300;
border-bottom: 1px solid #c1c1c1;
color: #000;
font-size: 15px;
margin-bottom: 4px;
border-radius: 5px;
-webkit-transition: transform 0.25s ease-in-out;
-moz-transition: transform 0.25s ease-in-out;
-o-transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
-webkit-transition: box-shadow 0.25s ease-in-out;
-moz-transition: box-shadow 0.25s ease-in-out;
-o-transition: box-shadow 0.25s ease-in-out;
transition: box-shadow 0.25s ease-in-out;
}

.ui-sortable-placeholder {
  display: none;
    visibility: hidden;
}

.container_global {
  display: inline-block;
  width: 80%;
  margin-left: 25%;
  margin-right: 25%;
  /*position: absolute;
  left: 10%;*/
}

.container_inner_left {
  display: inline-block;
  float: left;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  /*position: absolute;
  left: 10%;*/
}

.container_inner_right {
  display: inline-block;
  float: right;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  /*position: absolute;
  left: 10%;*/
}


/*Table Style*/

td
{text-align: center;
border:1px solid black;}

th
{text-align: center;
border:1px solid black;
background-color:lightgray;}

td > input[type='text']
{
    width: 100%; /*this will set the width of the textbox equal to its container td*/
}
</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 'videos/Screen_Ranking.PNG' }}" />
    </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 from the left box
        to your preferred position in the right box 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>
        Once you have dragged all pairs to the right box (labelled 'Drop'), a confirmation button will appear on the screen with which you may confirm your ranking.
        The video below illustrates the procedure. Please change to full screen mode when watching the video.
      </p>
      <center>
          <video width="80%" height="500" controls>
              <source src="{{ static 'videos/explain_vid.mp4' }}" type="video/mp4">
              Your browser does not support the video tag.
          </video>
      </center>
      <br>

    <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, <b> two of the sixteen payoff pairs </b> 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 from the left box
        to your desired position in the right box (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>
    <p>
        After all pairs are moved from the left box to the right box, a confirm button appears on the screen.
    </p>
    <div class="container_global">
        <div class="container_inner_left">
        <h4>Drag:</h4>
          <ul id="sortable1" class="connectedSortable">
             {{ for choice in Constants.choices }}
              <li  id='{{ choice }}'>{{ choice }}</li>
             {{ endfor }}
          </ul>
        </div>
        <div class="container_inner_right">
        <h4>Drop:</h4>
          <ol id="sortable2" class="connectedSortable">
          </ol>
          <input id='ranking' name="ranking" type="hidden"/>
            {{ formfield_errors 'ranking' }}
        </div>
    </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" id="confirmbutton">Confirm Ranking</button>
    </div>

  </div>
  </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>
                    <table style="width:100%" id="rank_table">
                      <tr class="theadings">
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                      </tr>
                      <tr class="tentries" id="rank_entries">
                        <td><input id='r1' name="r1" type="text" readonly/></td>
                        <td><input id='r2' name="r2" type="text" readonly/></td>
                        <td><input id='r3' name="r3" type="text" readonly/></td>
                        <td><input id='r4' name="r4" type="text" readonly/></td>
                        <td><input id='r5' name="r5" type="text" readonly/></td>
                        <td><input id='r6' name="r6" type="text" readonly/></td>
                        <td><input id='r7' name="r7" type="text" readonly/></td>
                        <td><input id='r8' name="r8" type="text" readonly/></td>
                      </tr>
                    </table>
                    <table style="width:100%" id="rank_table">
                      <tr class="theadings">
                        <th>9</th>
                        <th>10</th>
                        <th>11</th>
                        <th>12</th>
                        <th>13</th>
                        <th>14</th>
                        <th>15</th>
                        <th>16</th>
                      </tr>
                      <tr class="tentries" id="rank_entries">
                        <td><input id='r9' name="r9" type="text" readonly/></td>
                        <td><input id='r10' name="r10" type="text" readonly/></td>
                        <td><input id='r11' name="r11" type="text" readonly/></td>
                        <td><input id='r12' name="r12" type="text" readonly/></td>
                        <td><input id='r13' name="r13" type="text" readonly/></td>
                        <td><input id='r14' name="r14" type="text" readonly/></td>
                        <td><input id='r15' name="r15" type="text" readonly/></td>
                        <td><input id='r16' name="r16" type="text" readonly/></td>
                      </tr>
                    </table>
            </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>

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

$('#confirmbutton').hide()

$(function() {
  var items = {
    "act": {
      1: [],
      2: []
    },
    "pre": {
      1: [],
      2: []
    },
    "post": {
      1: [],
      2: []
    }
  }

  function log(et) {
    if (!et) {
      console.log("Activation");
      console.log(" - order1: ", items.act[1].toString());
      console.log(" - order2: ", items.act[2].toString());
    }
    if (et == "sortstart") {
      console.log("Pre-Sort");
      console.log(" - order1: ", items.pre[1].toString());
      console.log(" - order2: ", items.pre[2].toString());
    }
    if (et == "sortupdate") {
      console.log("Post-Sort");
      console.log(" - order1: ", items.post[1].toString());
      console.log(" - order2: ", items.post[2].toString());
    }
  }

  function determineChange(a1, a2) {
    var a = {},
      diff = [],
      i = 0;

    for (i = 0; i < a1.length; i++) {
      a[a1[i]] = true;
    }

    for (i = 0; i < a2.length; i++) {
      if (a[a2[i]]) {
        delete a[a2[i]];
      } else {
        a[a2[i]] = true;
      }
    }

    $.each(a, function(k, v) {
      diff.push(k);
    });

    return diff[0];
  }

  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    start: function(e, ui) {
      // Start of Sort Order
      items.pre[1] = $('#sortable1').sortable('toArray')
      items.pre[2] = $('#sortable2').sortable('toArray')
      log(e.type);
    },
    //over: function(event, ui) { ui.item.html('<p> ssss </p>')},
    update: function(e, ui) {
      // End of Sort Order
      //ui.item.html('<li  class='#sortable1'>' +ui.text+ '</li>');
      items.post[1] = $('#sortable1').sortable('toArray');
      items.post[2] = $('#sortable2').sortable('toArray');
      log(e.type);

      var inputfield = document.getElementById('ranking');
  		inputfield.value=items.post[2];
      var rankorder = document.getElementById('ranking').value;

      var r1field = document.getElementById('r1');
      var r2field = document.getElementById('r2');
      var r3field = document.getElementById('r3');
      var r4field = document.getElementById('r4');
      var r5field = document.getElementById('r5');
      var r6field = document.getElementById('r6');
      var r7field = document.getElementById('r7');
      var r8field = document.getElementById('r8');
      var r9field = document.getElementById('r9');
      var r10field = document.getElementById('r10');
      var r11field = document.getElementById('r11');
      var r12field = document.getElementById('r12');
      var r13field = document.getElementById('r13');
      var r14field = document.getElementById('r14');
      var r15field = document.getElementById('r15');
      var r16field = document.getElementById('r16');

      let arr = rankorder.match(/[^,]+,[^,]+/g);

      r1field.value = arr[0];
      r2field.value = arr[1];
      r3field.value = arr[2];
      r4field.value = arr[3];
      r5field.value = arr[4];
      r6field.value = arr[5];
      r7field.value = arr[6];
      r8field.value = arr[7];
      r9field.value = arr[8];
      r10field.value = arr[9];
      r11field.value = arr[10];
      r12field.value = arr[11];
      r13field.value = arr[12];
      r14field.value = arr[13];
      r15field.value = arr[14];
      r16field.value = arr[15];

      if (arr .length == 16)
        {$('#confirmbutton').show();}
      else
        {$('#confirmbutton').hide();}

      var newItem1 = determineChange(items.pre[1], items.post[1]);
      console.log(newItem1);
    }
  }).disableSelection();

  // Activation Order
  items.act[1] = $('#sortable1').sortable('toArray');
  items.act[2] = $('#sortable2').sortable('toArray');

    log();
});
</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 %}