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

{% block title %}
    Round {{ subsession.round_number  }} - Supervisor
{% endblock %}
{% block styles %}
<style>
       .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px !important;
        width: 10px !important;
        border-radius: 0px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -7px !important;
    }

    input[name=pricepay_r] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[name=pricepay_r]:focus {
        outline: none;
    }

    input[name=pricepay_r]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
        background: #007afe;
        border-radius: 0px;
        border: 0.0px solid #ffffff;
    }

    input[name=pricepay_r]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }
</style>
{% endblock %}
{% block content %}
    {% if subsession.round_number == 1 or subsession.round_number == 5 %}
    <div class="container" align="center">
    <button onclick="func()" style="color: rgb(255,255,255); background-color: rgb(0,123,255);" type="button" class="btn btn-info" data-toggle="collapse" id="button" data-target="#demo">Hide Instructions</button>
    <br>
    <div id="demo" class="collapse show">
    {% else %}
    <div class="container" align="center">
    <button onclick="func()" style="color: rgb(255,255,255); background-color: rgb(0,123,255);" type="button" class="btn btn-info" data-toggle="collapse" id="button" data-target="#demo">Show Instructions</button>
    <br>
    <div id="demo" class="collapse">
    {% endif %}
    <div id="container">
    <br>
    <div class="card card-body" align="left">
        <ul>
            <li>
                Your task is to allocate the bonus pool between the two BU managers.
            </li>
            <li>
                You will always observe the total investment and the total bonus pool.
            </li>
            <li>
                At the bottom of this screen, you can first indicate your willingness to pay from 0 Lira to 5 Lira with increments of 0.1 Lira to obtain information about individual investments of the BU managers.
            </li>
            <li>
                The chance of getting the information increases linearly with the amount you are willing to pay.
            </li>
            <li>
                Specifically, the computer will draw a random number between 0 Lira to 5 Lira. Every number between 0 Lira to 5 Lira has an equal probability to be chosen.
            </li>
            <ul>
                <li>If your willingness to pay < the random number, you do not receive the information and his or her reward is: 15 Lira.</li>
                <li>If your willingness to pay ≥ the random number, you receive the information and his or her reward is: 15 Lira – random number.</li>
            </ul>
            <li>
                If your willingness to pay is 0 Lira, you do not receive the information and your reward is: 15 Lira.
            </li>
            <li>
                If your willingness to pay is 5 Lira, you receive the information and your reward is: 15 Lira – 5 Lira = 10 Lira.
            </li>
            <li>
                By dragging the slider, you can see how your willingness to pay affects your chances of getting the information.
            </li>
        </ul>
    </div>
    </div>
    </div>
    <br>
    <div class="card card-body bg-light instructions" align="left">
        <ul>
            <li>
                The total investment made by the two BU managers is {{ group.total_effort | floatformat:0 }} Lira.
            </li>
            <li>
                The bonus pool that is available is: {{ group.total_effort | floatformat:0 }} Lira * 1.5 = <span id="pool_nummer">{{ group.pool | floatformat:2 }}</span> Lira.
            </li>
        </ul>
    </div>
    </div>
    <br>
    <input type="hidden" name="check_pricepay" value="" id="check_pricepay"/>
    <input type="hidden" name="instructions_S1B" value="" id="id_instructions_S1B"/>
    <p align="center">Click the bar below to reveal the slider.<br> Drag it to choose your willingness to pay for the information about the individual investments of the BU managers:</p>
    <b><p id="demo1" align="center"><br></p></b>
    <div align="center">
        <input type="range" name="pricepay_r" value="None" step="0.1" style="width:500px" min="0" max="5" id="id_pricepay_r" class="form-control">
    </div>
    <br>
    {% next_button %}

{% endblock %}

{% block scripts %}
    <script>
    $(document).ready(function () {
        $('input[name=pricepay_r]').on('input change', function () {
            $('input[name=pricepay_r]').addClass('myclass');
        });
        $('input[name=pricepay_r]').on('input', function() {
            chance = ($(this).val() - 0) / (5-0);
            chance2 = (chance * 100).toFixed(0);
            document.getElementById("demo1").innerHTML = $(this).val()+' Lira ('+ chance2 + '%)';
            $('#check_pricepay').val(1);
        });
    });
    </script>
    <script>
    function func() {
    x = document.getElementById("demo").getAttribute('class');
    if (x == 'collapse') {
        document.getElementById('button').textContent = 'Hide Instructions';
    }
    if (x == 'collapse show') {
        document.getElementById('button').textContent = 'Show Instructions';
    }
    }
</script>
<script>
        $('#button').click(function() {
            $('#id_instructions_S1B').val(1);
        });
</script>
{% endblock %}