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




{% block app_styles %}

 <style>

.slidecontainer {
    margin: auto;
    outline: dodgerblue;
    border-style: none;
    width:80%;

}


.slider {
  -webkit-appearance: slider-horizontal;  /*change the default horizontal bar to vertical bar*/
  width: 100%;
  height: 125px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}



.slider::-moz-range-thumb {
  width: 50px;
  height: 3px;
  background: #4CAF50;
  cursor: pointer;
}

        h1,p,td {
            text-align:center;
        }

        table {
            margin:auto;  /*set the table in the center*/
        }
        </style>

{% endblock %}

{%block content%}


<h1 style="font-size: 20px;">Real Allocation Decision</h1>
<p>You work for Employer <b id="own_identity"></b></p>

<div class="slidecontainer">
    <table>
        <td>Recipient 1<br>
            works for Employer <b id="player1_identity"></b>  <br>
            amount: $<span id="amount_1"> </span>
        </td>
        <td style="width:60%;">
             <input type="range"  min="0" max="10" value="5" step="1" class="slider" id="myRange1">
        </td>
        <td>Recipient 2<br>
            works for Employer <b id="player2_identity"></b> <br>
            amount: $<span id="amount_2"> </span>
        </td>
    </table>
    <p>&nbsp</p>
    <p>&nbsp</p>
<!--    <p> Employer A pays $2 to his employees. </p>-->
<!--    <p>Employer B pays $5 to his employees.</p>-->
<button type="button" class="button" onclick="checkresult()" id="submit"> Submit </button>
 <button type="submit" value="Submit" id="next_page" class="button"> Next </button>
</div>
<input type="hidden" name="dist_1" id="dist_1" />
<input type="hidden" name="dist_2" id="dist_2" />


{%endblock%}


{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    document.getElementById("next_page").disabled = true;

    let own_boss = js_vars.boss;
    console.log(own_boss)
    //var rcp1_boss;

    // console.log("selection:", selection);
    // //check type of selection, it may not be string, since it comes from a choice
    // console.log("type of selection:", typeof(selection));
    // console.log("own_top:", own_top);
    // console.log("own_prize:", own_prize);
    // console.log("reci1_top:", reci1_top);
    // console.log("reci2_top:", reci2_top);
    // console.log("reci1_prize:", reci1_prize);
    // console.log("reci2_prize:", reci2_prize);

    show();

    function show(){
        if (own_boss == "A"){
            document.getElementById('own_identity').innerHTML = "A";
            document.getElementById('own_identity').style.color = "tomato";
            document.getElementById('player1_identity').innerHTML = "B";
            document.getElementById('player1_identity').style.color = "dodgerblue";
            document.getElementById('player2_identity').innerHTML = "A";
            document.getElementById('player2_identity').style.color = "tomato";
        }
        else {
            document.getElementById('own_identity').innerHTML = "B";
            document.getElementById('own_identity').style.color = "dodgerblue";
            document.getElementById('player1_identity').innerHTML = "A";
            document.getElementById('player1_identity').style.color = "tomato";
            document.getElementById('player2_identity').innerHTML = "B";
            document.getElementById('player2_identity').style.color = "dodgerblue";
        }
    }


    //use step to change the step of the range slider
    var slider1 = document.getElementById("myRange1");
    var output11 = document.getElementById("amount_1");
    var output12 = document.getElementById("amount_2");
    output12.innerHTML = slider1.value; // Display the default slider value
    output11.innerHTML = 10 - slider1.value;
    // Update the current slider value (each time you drag the slider handle)
    slider1.oninput = function() {
      output12.innerHTML = this.value;
      output11.innerHTML = 10-this.value;
    }

    function checkresult(){
        document.getElementById("submit").disabled = true;//can only submit once
        document.getElementById("next_page").disabled = false; // the button go to next page
        document.getElementById("dist_1").value = output11.innerHTML;
        document.getElementById("dist_2").value = output12.innerHTML;

    }

</script>

{% endblock %}