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

{% block title %}
    {# Instructions - best to leave empty #}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'instruction_tabs/carousel.css' %}">
{% endblock %}

{% block content %}


    <!-- Tabs on top of page -->
    <ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
        <li class="nav-item tab_header">
            <a class="nav-link active tab_element" id="part1-tab" data-toggle="tab" href="#part1" role="tab"
               aria-controls="part1"
               onclick="topFunction()">Instructions</a>
        </li>

        <li class="nav-item tab_header">
            <a class="nav-link tab_element" id="part2-tab" data-toggle="tab" href="#part2" role="tab"
               aria-controls="part2"
               onclick="topFunction()">Ranking</a>
        </li>
    </ul>

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

        <!-- Tab 1 content -->
        <div class="customInstructions tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
            <div class="card-header bg-transparent mainheader">
                <h3>Welcome</h3>
            </div>
            &nbsp
            &nbsp
            <div >
                <h4>General Information</h4>
            </div>
            <p>
                Welcome to this experiment and thank you very much for your participation! Please make sure to read the instructions very carefully as understanding these will be important both for our research and your eventual reward from this experiment. While going through the different screens and tasks please do not speak with anyone else or get distracted by anything else.  Please switch off your mobile phone now and do not communicate with each other anymore. If you have a question, raise your hand, we will come over to your seat and answer it individually.  In this experiment, you can earn a substantial amount of money. The amount you earn depends on your own decisions and on chance. The amount of money that you earn will be paid to you online. The amount of money that you earn will be paid out to all participants individually in cash at the end of the experiment.  During the experiment, everyone makes his decisions anonymously on his own. At no point in time will your decisions be linked to your identity.
                All payoffs will be expressed in terms of experimental points. Each of these points will be transformed to 0.5  Euros. That is, if you earn 10 experimental points, this would imply a payment of 5 Euros.

            </p>
            <div >
                <h4>Evaluation of Payoff combinations</h4>
            </div>
            <p>
                This experiment consists of one task, which is identical for all participants. You will be shown a list of twelve payoff-combinations similarly to the screen below.
                XXXX
                Each of these combinations consists of two numbers (x, y). The first number x corresponds to the number of experimental points you would receive and the second number y corresponds to the number of experimental points some other participant would receive. Your task is to rank all these payoff-combinations according to how you perceive them. That is, you will need to indicate which of these combinations you like best, which one second-best, and so on.
                The payoff combinations will initially be ordered randomly. You can drag drop each of payoff combinations to place them in an order according to your preference. That is, the combination you place on the top corresponds to your most preferred one, the combination you place second corresponds to your second-best option and so on until at the bottom you will place your least preferred combination from the options.
                Once you have re-arranged the list according to your preference, you will be asked to confirm that this list reflects how you rank the 12 payoff combinations.
                Before you are asked to decide your ranking of the different combinations, 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 questionnaire .
            </p>
        <h4>Calculation of your Final Payoff </h4>
            <p>
                The one and only payoff-relevant decision will be randomly selected at the end of the experiment. Your total payoff depends on whether a decision from the first or the second part of the experiment is selected.
            </p>
            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
        </div>


        <!-- Tab 2 content -->
        <div class="tab-pane" id="part2" role="tabpane2" aria-labelledby="part2-tab">
            <div class="card-header bg-transparent mainheader">
                <h3>Your Ranking</h3>
            </div>

            <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)


          <style>

        .overallContainer {
            width: 55%;
            height:820px;
           padding: 10px;
            background-color: lightgray;
            border: 2px solid black;
        }



        .itemContainer {
          width: 370px;
          height: 700px;
            display: inline-block;
            font-size: 20px;
        }

        .itemContainer h3 {
          background-color: #abd5ea;
          color: #333;
          font-size: 20px;
          line-height: 30px;
          margin: 0;
          padding-left: 10px;
        }

        .rankContainer {
            width: 120px;
            float: left;
            display: inline-block;
            font-size: 20px;
        }

        .rankContainer h3 {
          background-color: #abd5ea;
          color: #333;
          font-size: 20px;
          line-height: 30px;
          margin: 0;
          padding-left: 10px;
        }
        </style>


        <div class="overallContainer">

                <div class="rankContainer">
                <h3>Rank</h3>
            {{ for r in Constants.ranks }}
            <li data-id="{{ r}}" class="list-group-item">{{ r }}</li>
            {{ endfor }}
                        </ul>
                </div>


          <div class="itemContainer">
              <h3>Tuple</h3>
            <ul id="items" class="list-group" style="cursor: move">
            {{ for choice in Constants.choices }}
            <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
            {{ endfor }}
            </ul>
          </div>
        </div>


        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script>
            let el = document.getElementById('items');
            let sortable = Sortable.create(el, {
                onChange: function (evt) {
                    document.getElementById('ranking').value = sortable.toArray().join(',');
                }
            });
        </script>
            <input type="hidden" name="ranking" id="ranking">

            <script>
               //function showInput() {
                //document.getElementById("display").innerHTML = document.getElementById('ranking').value;
                /}
            </script>

        {{ formfield_errors 'ranking' }}
            </p>

            <button onclick="topFunction()"; type="button" class="prevtab btn-primary btn back">Previous</button>
            <button onclick="return confirm('Are you sure about your ranking?')"; type="submit", class="nexttab btn-primary btn next">Next</button>

        </div>



    </div>

{% endblock %}


{% block scripts %}
    <script src="{% static 'instruction_tabs/carousel.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 %}