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

{% block title %}
    <div class=" alert alert-warning" align="center">Runde {{player.round_number}} von {{Constants.num_rounds}}</div>
{% endblock %}

{% block content %}

<div class="card bg-light m-3">
    <div class="card-body">
<p align="center">

<div style="display:block;">
   <!-- <h4 style="margin-bottom:-18px">
        <p>Stufe 1: Transfer</p>
    </h4> -->
<table style="border:solid; border-color:#f8f9fa; height: 450px; width:865px; margin-left:0px; ">
    <tr style="line-height:3px">
        <td></td>
        <td colspan="2" ><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Schätzer</b></td>
    </tr>

    <tr style="margin-top:-12px;">

        <td style="width:220px">
        <p align="justify" style="font-size:85%;line-height: 1.9;margin-top:-15px;"><br>
            Sie sind der Schätzer. <br><br> Ihnen wurde ein zufällig <br>ausgewählter Prüfer zugewiesen.<br><br>
            Bitte klicken Sie auf den grauen Bereich der rechten Grafik. Bewegen Sie den anschließend erscheinenden Schieberegler, um den Betrag Ihrer 20 Taler
            vorzuschlagen, den Sie transferieren möchten.<br><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" id="" class="btn btn-primary btn-large" style="width: 160px;font-size:100%;" >Vorschlag bestätigen</button></p></td>

        <td style="width:20px;"><input id="slide" type="range" name="sent_amount" min="0" max="20" step="1" class="vranger" value="99" style="width:410px;margin-top: 0px; margin-left:-180px; margin-right:-150px"></td>


        <td style="width:50px" ><img id="proposed_tokens" class="right" style="margin-top:-10px;margin-left:-45px" src="{% static "Bilder/20_0.jpg" %}" width=" 260px" height=" 420px" class="center" /></td>



        <td id="P2_hidden" style="visibility:show; width:240px; margin-left:-150px; font-size:90%;line-height: 2;word-break:word-wrap;">
            <p align="justify" style="font-size:90%;line-height: 1.9;margin-top:6px;margin-right:0px">
                <span><br><br><br><br><br><br><br><br><br>Wenn Ihr vorgeschlagener Transfer abgelehnt wird, erhält der Prüfer 8 Taler und
                    Sie behalten 12 Taler (siehe schmaler Balken).&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

              <!--  <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vorschlag:<br><br> -->
        <div id="rectangle" class="white"></div>
              <!--  <button type="button" id="acceptbutt" class="btn btn-primary btn-large " style="width: 100px;font-size:100%;" onclick="accept();acc();">Akzeptieren</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="rejectbutt" class="btn btn-primary btn-large" style="width: 100px;font-size:100%;" onclick="reject();rej()">Ablehnen</button><br> -->
            <br>
            </span></p>

        </td>

    </tr>

    <tr align="left" style="line-height:3px">
        <td></td>
        <td></td>
        <td colspan="2"><b></b></td>
    </tr>
</table>
        <p style="margin-top:-20px; margin-left:520px"><b>Prüfer</b></p>
</div>
<br>

<!--  <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back" style="margin-top:-28px;">Zurück</button> -->
<button onclick="topFunction()" type="submit" class="nexttab btn-primary btn next" style="margin-top:-28px; visibility: hidden" id="PopNext">Weiter</button>
  </div>

</div>
<input type="hidden" id="accpushed" name="accpushed" value="0">
<input type="hidden" id="rejpushed" name="rejpushed" value="0">
<input type="hidden" id="transpushed" name="transpushed" value="0">



<style>
.input-hidden{
        height:0;
        width:0;
        visibility: hidden;
        padding:0;
        margin:0;
        float:right;
}


input[type=radio]:checked {
  display: inline-block;
  background-color: #3781FA;
}


 .right {
   float: right;
   margin-left: 3em;
   margin-right: 2em;
   align: justify;
   line-height: 2;
}

.test {
    color: maroon;
    position: absolute;

    -webkit-transform:
    translateY(81px)
    translateX(265px)
    ;

}


//.line1:after {
//  content: "";
//  display: inline-block !important;
//  width: 0;
//  height: 0;
//  border-left: 8px solid #C8A962;
//  border-top: 8px solid transparent;
//  border-bottom: 8px solid transparent;
//  vertical-align: middle;
//
//}



body {
    height: 100vh;
    margin: 0;
    display: flex;
}

#rectangle{
    margin-top:-108px;
    margin-left:-65px;
    width:60px;
    height:7px;
    //background: #fff;
    border: 2px solid black;
    position: absolute
}


/*
 * Styling the Slider
 */

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

input[type="range"] {
    //margin: 50px;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    height: 50px;
    width: 250px;
    cursor: pointer;
    border-radius: 0; /* iOS */

}

::-webkit-slider-runnable-track {
    background: #b3c1cf;
}

::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; /* 1 */
    height: 50px;
    background: #fff;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    border: 2px solid #999; /* 1 */
    //display:none;
    opacity: 0;
}

.ShowThumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; /* 1 */
    height: 50px;
    background: #fff;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    border: 2px solid #000000; /* 1 */
    //display:none;
    opacity: 100;
}

.ShowThumbGreen::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; /* 1 */
    height: 50px;
    background: #81d984;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    border: 2px solid #000000; /* 1 */
    //display:none;
    opacity: 100;
}


::-moz-range-track {
    height: 50px;
    background: #b3c1cf;

}

::-moz-range-thumb {
    background: #fff;
    height: 50px;
    width: 20px;
    border: 3px solid #999;
    border-radius: 0 !important;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    box-sizing: border-box;
    opacity: 0;

}

.ShowThumb::-moz-range-thumb {
    background: #fff;
    height: 50px;
    width: 20px;
    border: 3px solid #000;
    border-radius: 0 !important;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    box-sizing: border-box;
    opacity: 100;

}

.ShowThumbGreen::-moz-range-thumb {
    background: #81d984;
    height: 50px;
    width: 20px;
    border: 3px solid #000;
    border-radius: 0 !important;
    box-shadow: -100vw 0 0 100vw #b3c1cf;
    box-sizing: border-box;
    opacity: 100;

}

::-ms-fill-lower {
    background: #b3c1cf;
}

::-ms-thumb {
    background: #fff;
    border: 2px solid #999;
    height: 40px;
    width: 20px;
    box-sizing: border-box;

}

::-ms-ticks-after {
    display: none;
}

::-ms-ticks-before {
    display: none;
}

::-ms-track {
    background: #ddd;
    color: transparent;
    height: 40px;
    border: none;
}

::-ms-tooltip {
    display: none;
}

.input {
color: #adbdc3;
}




//table {
//    table-layout: fixed;
//}

.green {
    background: #81d984;
    //background-color: #81d984;
    //border-color: #007bff;
}

.white {
    background: #fff;
    //background-color: #81d984;
    //border-color: #007bff;
}





.input-group {

    margin-left: 8%;
    margin-right: 42%;
    //width: 200px
    //margin-left: 25px;
}

.form-control  {
    //color: #3e93e8;
    margin-left: 25px;
    //margin-right: 300px;
    //min-width: 150px;
}

//.otree-form {
//    width: 80%;
//    padding-left: 200px
//}

.error {
margin-bottom: 0px;
color:red;
}


</style>



<script src="{% static 'Bilder/jquery-3.5.1.min.js' %}"></script>

<script src="{% static 'Bilder/jquery.validate.js' %}"></script>

<script>

function unh() {
    if(document.getElementById('transpushed').value == 1) {
        document.getElementById('P2_hidden').setAttribute("style", "width:240px; margin-left:-150px; font-size:90%;line-height: 2;word-break:word-wrap;");
    };
    }

var slide = document.getElementById('slide'),
    sliderDivAud = document.getElementById("sliderAmountAuditor");
    sliderDivEst = document.getElementById("sliderAmountEstimator");

slide.onchange = function() {

    document.getElementById('transpushed').value = 1;

    slide.className = 'ShowThumb vranger'

    //document.getElementById('acceptbutt').classList.remove("myButton");
    //document.getElementById('rejectbutt').classList.remove("myButton");
    //document.getElementById('rectangle').classList.remove("green");
    //document.getElementById('rectangle').classList.add("white");

    var test = document.getElementById('proposed_tokens');

    if(slide.value == 1)
    {
        test.src = "{% static "Bilder/19_1.jpg" %}";
    }
    else if(slide.value == 2)
    {
        test.src = "{% static "Bilder/18_2.jpg" %}";
    }
    else if(slide.value == 3)
    {
        test.src = "{% static "Bilder/17_3.jpg" %}";
    }
    else if(slide.value == 4)
    {
        test.src = "{% static "Bilder/16_4.jpg" %}";
    }
    else if(slide.value == 5)
    {
        test.src = "{% static "Bilder/15_5.jpg" %}";
    }
    else if(slide.value == 6)
    {
        test.src = "{% static "Bilder/14_6.jpg" %}";
    }
    else if(slide.value == 7)
    {
        test.src = "{% static "Bilder/13_7.jpg" %}";
    }
    else if(slide.value == 8)
    {
        test.src = "{% static "Bilder/12_8.jpg" %}";
    }
    else if(slide.value == 9)
    {
        test.src = "{% static "Bilder/11_9.jpg" %}";
    }
    else if(slide.value == 10)
    {
        test.src = "{% static "Bilder/10_10.jpg" %}";
    }
    else if(slide.value == 11)
    {
        test.src = "{% static "Bilder/9_11.jpg" %}";
    }
    else if(slide.value == 12)
    {
        test.src = "{% static "Bilder/8_12.jpg" %}";
    }
    else if(slide.value == 13)
    {
        test.src = "{% static "Bilder/7_13.jpg" %}";
    }
    else if(slide.value == 14)
    {
        test.src = "{% static "Bilder/6_14.jpg" %}";
    }
    else if(slide.value == 15)
    {
        test.src = "{% static "Bilder/5_15.jpg" %}";
    }
    else if(slide.value == 16)
    {
        test.src = "{% static "Bilder/4_16.jpg" %}";
    }
    else if(slide.value == 17)
    {
        test.src = "{% static "Bilder/3_17.jpg" %}";
    }
    else if(slide.value == 18)
    {
        test.src = "{% static "Bilder/2_18.jpg" %}";
    }
    else if(slide.value == 19)
    {
        test.src = "{% static "Bilder/1_19.jpg" %}";
    }
    else if(slide.value == 20)
    {
        test.src = "{% static "Bilder/0_20.jpg" %}";
    }
    else
    {
        test.src = "{% static "Bilder/20_0.jpg" %}";
    }
    ;


    sliderDivAud.innerHTML = this.value;
    sliderDivEst.innerHTML = 20 - this.value;

}

function reject() {
    document.getElementById('proposed_tokens').src = "{% static "Bilder/12_8.jpg" %}";
}


function acc()
{
    document.getElementById('acceptbutt').classList.add("myButton");
    document.getElementById('rejectbutt').classList.remove("myButton");
    document.getElementById('rectangle').classList.remove("green");
    document.getElementById('rectangle').classList.add("white");
    slide.className = 'ShowThumbGreen vranger';

    document.getElementById('accpushed').value = 1;

    if(document.getElementById('accpushed').value==1 & document.getElementById('rejpushed').value==1)
    {
    document.getElementById('PopNext').style.visibility = "visible";
    }

}

function rej()
{
    document.getElementById('acceptbutt').classList.remove("myButton");
    document.getElementById('rejectbutt').classList.add("myButton");
    document.getElementById('rectangle').classList.remove("white");
    document.getElementById('rectangle').classList.add("green");
    slide.className = 'ShowThumb vranger';

    document.getElementById('rejpushed').value = 1;

    if(document.getElementById('accpushed').value==1 & document.getElementById('rejpushed').value==1)
    {
    document.getElementById('PopNext').style.visibility = "visible";
    }
}

function accept() {
        var test = document.getElementById('proposed_tokens');

    if(slide.value == 1)
    {
        test.src = "{% static "Bilder/19_1.jpg" %}";
    }
    else if(slide.value == 2)
    {
        test.src = "{% static "Bilder/18_2.jpg" %}";
    }
    else if(slide.value == 3)
    {
        test.src = "{% static "Bilder/17_3.jpg" %}";
    }
    else if(slide.value == 4)
    {
        test.src = "{% static "Bilder/16_4.jpg" %}";
    }
    else if(slide.value == 5)
    {
        test.src = "{% static "Bilder/15_5.jpg" %}";
    }
    else if(slide.value == 6)
    {
        test.src = "{% static "Bilder/14_6.jpg" %}";
    }
    else if(slide.value == 7)
    {
        test.src = "{% static "Bilder/13_7.jpg" %}";
    }
    else if(slide.value == 8)
    {
        test.src = "{% static "Bilder/12_8.jpg" %}";
    }
    else if(slide.value == 9)
    {
        test.src = "{% static "Bilder/11_9.jpg" %}";
    }
    else if(slide.value == 10)
    {
        test.src = "{% static "Bilder/10_10.jpg" %}";
    }
    else if(slide.value == 11)
    {
        test.src = "{% static "Bilder/9_11.jpg" %}";
    }
    else if(slide.value == 12)
    {
        test.src = "{% static "Bilder/8_12.jpg" %}";
    }
    else if(slide.value == 13)
    {
        test.src = "{% static "Bilder/7_13.jpg" %}";
    }
    else if(slide.value == 14)
    {
        test.src = "{% static "Bilder/6_14.jpg" %}";
    }
    else if(slide.value == 15)
    {
        test.src = "{% static "Bilder/5_15.jpg" %}";
    }
    else if(slide.value == 16)
    {
        test.src = "{% static "Bilder/4_16.jpg" %}";
    }
    else if(slide.value == 17)
    {
        test.src = "{% static "Bilder/3_17.jpg" %}";
    }
    else if(slide.value == 18)
    {
        test.src = "{% static "Bilder/2_18.jpg" %}";
    }
    else if(slide.value == 19)
    {
        test.src = "{% static "Bilder/1_19.jpg" %}";
    }
    else if(slide.value == 20)
    {
        test.src = "{% static "Bilder/0_20.jpg" %}";
    }
    else
    {
        test.src = "{% static "Bilder/20_0.jpg" %}";
    }
    ;
}


    const slider = document.querySelector("#slider");
const output = document.querySelector("output");
document.addEventListener('DOMContentLoaded', function() {
  output.value = slider.value;
});

slider.addEventListener ("input", function () {
   output.value = this.value;
});








</script>

{% endblock %}