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

{% block title %}
Part 3
{% endblock %}

<style>
    p{
        font-size: 22px;
    }
    .otree-body {
        max-width:1100px
    }
    .zoom {
      zoom: 90%;
    }
</style>
<style>
    /* Create two equal columns that floats next to each other */
    .column-left {
      float: left;
      width: 28%;
      padding: 10px;
      border: 1px solid;
      border-radius: 10px;
      border-color:  #f8e0b1;
    }
    .column-right {
      float: right;
      width: 60%;
      margin: 0% 0% 0% 5%;
      padding: 5px;
      border: 1px solid;
      border-radius: 10px;
      border-color: #add38d;
    }
    .column-right1 {
      display: flex;
      justify-content: space-between;
      float: left;
      width: 25%;
      line-height: 1.4;
      border: none;
      padding: 15px;
      display:inline-block
    }
    .column-right2 {
      display: flex;
      justify-content: space-between;
      float: left;
      width: 35%;
      border: none;
      line-height: 1.4;
      padding: 15px;
      display:inline-block
    }
</style>
<style>
    ul.source, ul.target {
      min-height: 50px;
      margin: 0px 25px 10px 0px;
      padding: 1px;
      border-width: 0px;
      border-style: solid;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      list-style-type: none;
      list-style-position: inside;
    }
    ul.source {
      border-color: #f8e0b1;
    }
    ul.target {
      border-color: #add38d;
      border-width: 1px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 10px;
      margin: 0px 0px 0px -25px;
    }
    .source li, .target li {
      margin: 5px;
      padding: 5px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .source li {
      background-color: #fcf8e3;
      border: none;
      color: #c09853;
    }
    .target li {
      background-color: #ebf5e6;
      border: none;
      color: #468847;
    }
    .sortable-dragging {
      border-color: #ccc !important;
      background-color: #fafafa !important;
      color: #bbb !important;
    }
    .sortable-placeholder {
      height: 40px;
    }
    .source .sortable-placeholder {
      border: 2px dashed #f8e0b1 !important;
      background-color: #fefcf5 !important;
    }
    .target .sortable-placeholder {
      border: 2px dashed #add38d !important;
      background-color: #f6fbf4 !important;
    }
</style>
<style>
    .table {
        text-align: right;
        border: none;
        border-collapse: collapse;
    }
    td {
        border: none;
    }
</style>

{% block content %}
<script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.sortable.min.js' %}"></script>

<p>
    Please drag and drop each option to the table on the right ("Your preference list").
     Please make sure that your preference list states your <b>most preferred option first</b>
     and your <b>least preferred option last</b>.
 </p>
<br>
<div class="row">
  <div  class="column-left">
    <h5 style="margin: 0px 50px 0px 15px;">List of options</h5>
        <ul id=source class="source connected">
          <li id="10">90-100% (Top performers)</li>
            <input type="hidden" name="Pref1" id="Pref1" />
          <li id="9">80-90%</li>
            <input type="hidden" name="Pref2" id="Pref2" />
          <li id="8">70-80%</li>
            <input type="hidden" name="Pref3" id="Pref3" />
          <li id="7">60-70%</li>
            <input type="hidden" name="Pref4" id="Pref4" />
          <li id="6">50-60%</li>
            <input type="hidden" name="Pref5" id="Pref5" />
          <li id="5">40-50%</li>
            <input type="hidden" name="Pref6" id="Pref6" />
          <li id="4">30-40%</li>
            <input type="hidden" name="Pref7" id="Pref7" />
          <li id="3">20-30%</li>
            <input type="hidden" name="Pref8" id="Pref8" />
          <li id="2">10-20%</li>
            <input type="hidden" name="Pref9" id="Pref9" />
          <li id="1">0-10% (Bottom performers)</li>
            <input type="hidden" name="Pref10" id="Pref10" />
           <li id="0">No information</li>
            <input type="hidden" name="Pref11" id="Pref11" />
        </ul>
  </div>

  <div class="column-right">
      <h5 style="margin: 0px 50px 0px 160px;">Your preference list</h5>
        <div class="column-right1">
             <table class="table">
                <tr>
                    <td>1st Preference:</td>
                </tr>
                <tr>
                    <td>2nd Preference:</td>
                </tr>
                <tr>
                    <td>3rd Preference:</td>
                </tr>
                <tr>
                    <td>4th Preference:</td>
                </tr>
                <tr>
                    <td>5th Preference:</td>
                </tr>
                <tr>
                    <td>6th Preference:</td>
                </tr>
                <tr>
                    <td>7th Preference:</td>
                </tr>
                <tr>
                    <td>8th Preference:</td>
                </tr>
                <tr>
                    <td>9th Preference:</td>
                </tr>
                <tr>
                    <td>10th Preference:</td>
                </tr>
                <tr>
                    <td>11th Preference:</td>
                </tr>
            </table>
        </div>

        <div id="preferencerank" class="column-right2">
            <ul class="target connected">
            </ul>
        </div>
  </div>
</div>
<br>
<p>
    You can adjust the preference list until you are happy with it.
    Once you finish ranking all the options, please click the "Confirm preference list" button.
    Then, click the "Next" button to proceed.
</p>
<script type="text/javascript">
$(function () {
  $(".source, .target").sortable({
    connectWith: ".connected"
  });
});
</script>
<script>
  function myFunction() {
    var ul = document.getElementById("preferencerank");
    var items = ul.getElementsByTagName("li");
    var error = document.getElementById("error")
    if (items.length<11) {
      error.innerHTML = "<span style='color: red;'>"+
                        "Please rank all 11 options.</span>"
    } else {
    document.getElementById('Pref1').value = items[0].id;
    document.getElementById('Pref2').value = items[1].id;
    document.getElementById('Pref3').value = items[2].id;
    document.getElementById('Pref4').value = items[3].id;
    document.getElementById('Pref5').value = items[4].id;
    document.getElementById('Pref6').value = items[5].id;
    document.getElementById('Pref7').value = items[6].id;
    document.getElementById('Pref8').value = items[7].id;
    document.getElementById('Pref9').value = items[8].id;
    document.getElementById('Pref10').value = items[9].id;
    document.getElementById('Pref11').value = items[10].id;
    error.innerHTML = "<span style='color: red;'>"+
                        "</span>"
    document.getElementById('Next').style.display = 'block'
    }
  }
</script>

<br>
<div style="margin: 0px 40% 0px 40%;">
    <button id="Confirm" type="button" class="btn btn-success" onclick="myFunction();">Confirm preference list </button>
</div>
    <span style="margin: 0px 40% 0px 40%;" id="error"></span>

<br>
<br>
<button id="Next" style="display:none;" class="btn btn-primary">Next</button>



{{ endblock }}