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

{% block styles %}
    <link href="{% static 'pn_selection/Wheel.css' %}" rel="stylesheet">

 <style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

.otree-title.page-header{
       font-size: 40px;
}

p{
    font-size: 22px;
    text-indent:0em;
    text-align: left;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  {#background: #664AFF;#}
    background-color: white;
}
.range{
  height: 250px;
  width: 910px;
  background: #fff;
  border-radius: 10px;
  padding: 0px 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);

}


.sliderValue{
  position: relative;
  width: 100%;
}

.sellerValue{
  position: relative;
  width: 100%;
}

.sliderValue span{
  position: absolute;
  height: 45px;
  width: 45px;
  transform: translateX(-70%) scale(0);
  font-weight: 500;
  top: -25px;
  line-height: 55px;
  z-index: 2;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;

}

.sellerValue span{
  position: absolute;
  {#left: calc(({{ random_initial }}-50) * 87 / 350 + 13) + "%";#}
  transform: translate(-7px,182px); /* -7px is set after careful calibration*/
  font-size: 18px;
  color: red;
  font-weight: 600;
  z-index: 5;
   background-color: white;
}

.sliderValue span.show{
  transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #664AFF;
  border: 3px solid #fff;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-left-radius: 50%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.field{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.field .value{
  position: absolute;
  font-size: 18px;
  font-weight: 600;
}
.field .value.left{
  left:-1%;
  transform: translate(0px,70px);
}

.field #guess_minnum {
  left:12%;
  transform: translate(-0.5%,95px);
}

.field #guess_maxnum{
    {#width: 90px;#}
    {#border: black 1px solid;#}
    white-space: nowrap;
  left:98%;
  transform: translate(0px,95px);
}

.field .value.start{
  left: 10%;
  transform: translate(15px,70px);
}

.field .value.bstart{
  left: 12.5%;
  transform: translate(0px,70px);
}

.field .value.right{
  right: -3%;
  transform: translate(-4px,70px);
}

#buyer_value{
    border: black 2px solid;
    width: 16%;
    color: #664AFF;
    transform:  translate(0px,107px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

#Bvalue_box{
    border: black 2px solid;
    width: 15%;
    color: #664AFF;
    transform:  translate(0px,75px);
    background-color: white;
    z-index: 2000;
    margin: 0px;
    padding: 0px;
    display: none;
    line-height: 1;
}

#seller_offer{
    border: black 2px solid;
    width: 18%;
    color: red;
    transform:  translate(0px,-60px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}


#pre_offer{
    border: black 2px solid;
    width: 17%;
    color: black;
    transform:  translate(0px,-80px); /*80 is set after careful calibration*/
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1;
    {#left: calc(({{ random_initial }}-50) * 87 / 350 + 7) + "%";#}
}

#last_offer{
    border: black 2px solid;
    width: 17%;
    color: black;
    transform:  translate(0px,-80px); /*80 is set after careful calibration*/
    background-color: white;
    z-index: 1;
    margin: 0px;
    padding: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1;
    {#left: calc(({{ random_initial }}-50) * 87 / 350 + 7) + "%";#}
    display: none;
}


.range #buyer_bar{
    position: absolute;
  width: 87.5%;
  left: 12.5%;
  height: 100px;
  background: #6DAAE7;
  outline: none;
  border: none;
  z-index: 2222;
}

.range #seller_range{
    position: absolute;
  width: 100%;
  height: 100px;
  background-color: #E7E7E7;
  outline: none;
  border: none;
  z-index: 1111;
}

#buyer_range{
    position: absolute;
  {#width: 87.5%;#}
  {#transform: translateX(7%); /*ratio 7.5% after careful calibration*/#}
  height: 100px;
  background: yellow;
  outline: none;
  border: none;
  z-index: 1111;
}

.field #buyer_tick{
    position: absolute;
    background-color: blueviolet;
    height: 100px;
    width: 0.7%;
    z-index: 9999;
}

.field #seller_tick{
    position: absolute;
    background-color: red;
    height: 100px;
    width: 15px;
    z-index: 10000;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field #preoffer_tick{
    position: absolute;
    background-color: purple;
    height: 100px;
    width: 15px;
    z-index: 10000;
    display: none;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field #Bvalue_tick{
    position: absolute;
    left: calc({{ B_value }}/4 ) + "%";
    background-color: blue;
    height: 100px;
    width: 5px;
    z-index: 10000;
    display: none;

}


.range .axis{
  position: absolute;
  width: 100%;
  background: blue;
  transform: translateY(52px);
  z-index: 2;
  height: 3px;
}

.double_slider .axis{
  position: absolute;
  width: 100%;
  background: blue;
  transform: translateY(52px);
  z-index: 2;
  height: 3px;
}
/*
In the following blocks, we try to decorate the track part of the range input
*/
.range input{
  -webkit-appearance: none;
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.15);
  outline: none;
  border: none;
  z-index: 2222;
}
.range input::-moz-range-track{
  {#background: #664AFF; /*this progress background is only shown on Firefox*/#}
  width: 100%;
  height: 100px;
  {#background-color: rgba(0, 0, 0, 0.15);#}
  outline: none;
  border: none;
  z-index: 2222;
}

.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
  background: transparent;
}

.range input::-ms-track {
  -webkit-appearance: none;
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.15);
  outline: none;
  border: none;
  z-index: 2222;
}

/*
In the following blocks, we try to decorate the thumb part of the range input
*/
.range input.offer::-webkit-slider-thumb{/*Webkit Browsers like Chrome and Safari*/
  -webkit-appearance: none;
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
  transform: translateX(-5px);
}


.range input.offer::-moz-range-thumb{ /*Firefox*/
  -webkit-appearance: none;
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

range input.offer::-ms-thumb{/*Internet Explorer*/
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}



.my_buttons{
    padding: 30px;
}

.my_buttons button{
    margin-left: 30px;
    padding: 5px;
    font-size: 23px;
}

.First_sentence{
    font-size: 30px;
    margin: 20px;
}

.Things{
    margin: 20px;
    text-align: left;
    font-size: 22px;
}

.not-clicked::-webkit-slider-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

.not-clicked::-moz-range-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

#sellerBubble.not-clicked {
    visibility: hidden;
}

#pre_offer.not-clicked {
    visibility: hidden;
}

#offerButton.not-clicked{
    visibility: hidden;
}

#seller_gain.not-clicked{
    visibility: hidden;
}

#guessButton.lnot_moved{
    visibility: hidden;
}

#guessButton.rnot_moved{
    visibility: hidden;
}

.clicked{
    visibility: visible;
}

#main_screen.transitioning{
    display: none;
}

#transition_screen.transitioning{
    display: block;
}

#transition_screen{
    display: none;
}

input.guess[type=range] {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
}

input[type=range].guess::-moz-range-track {
	position: absolute;
	pointer-events: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	{#background-color: rgba(255,255,255,0.2);#}
}

input.guess[type=range]::-ms-track {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
}

#guess-left::-webkit-slider-thumb {
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
	-webkit-appearance: none;
    border: 1px solid yellow;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}

#guess-right::-webkit-slider-thumb {
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
	-webkit-appearance: none;
    border: 1px solid #664AFF;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


#guess-left::-moz-range-thumb{ /*Firefox*/
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
    border: 1px solid yellow;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


#guess-right::-moz-range-thumb{ /*Firefox*/
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
    border: 1px solid #664AFF;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


input.not_guess[type=range]::-webkit-slider-thumb{
    	pointer-events: none;
        -webkit-appearance: none;
        display: none;
}

input.not_guess[type=range]::-moz-range-thumb{ /*Firefox*/
    	pointer-events: none;
        visibility: hidden;
}


#guessButton.not_guess{
    display: none;
}

#guess_maxnum.not_guess{
    display: none;
}

#guess_minnum.not_guess{
    display: none;
}

 </style>

{% endblock %}



{% block content %}

    <div id = "main_screen">

   <br>
      <h2><u>Round {{ roundnum }}:  Member {% if player.id_in_group == 2 %} B {% else %} A {% endif %} page (Part 2/2) Sending Report</u></h2>
    <br>

    {% if player.id_in_group == 1 %}

    <div class="First_sentence" id="The_price">You have chosen a {{choice_N}}-piece cut. </div>

    <div class="range">

        <div class="field">
                  <div class="value left">  0.0</div>

            <div id="seller_range">
            </div>

            <div id="buyer_bar" style="left: {{buyer_bar_left}}px; width: {{buyer_bar_width}}px">
            </div>

                  <div class="value right"> 100.0</div>
          <div class="axis"> </div>
        </div>
        </div>


    <br>

        <div class="range">

             <div class="sellerValue" style="display: hidden;">
                  <span class="not-clicked" id="sellerBubble">{{ random_initial }}</span>
            </div>



            <div class="field">
                        <input type="range" class="guess not_guess" id="guess-left" min="0" max="400" value="50">
                        <input type="range" class="guess not_guess" id="guess-right" min="0" max="400" value="400">
                       <div id="Bvalue_tick"> </div>
                       <div id="preoffer_tick"> </div>
                      <div class="value left"> 0.0</div>
                       <div class="value guess not_guess"  id ="guess_minnum" style="display: none"> Min: <span>0.0</span></div>
                <style data="test" type="text/css"></style>
            <input class='not-clicked offer' id="seller_offer_input" type="range" min="0" max="400" value="{{ random_initial }}" steps="0.1">
                   <div class="value" id="Bvalue_box"> Value B <br> {{ B_value }}</div>
                       <div class="value guess not_guess"  id="guess_maxnum" style="display: none"> Max: <span>100.0</span></div>
                       <div class="value right"> 100.0</div>
                <div class="value not-clicked" id="pre_offer" style="display: hidden"> Your offer in this Round </div>
                <div class="value" id="last_offer" style="display: hidden"><span>Your offer</span> <br> {{ latest_offer }}</div>
              <div class="axis">

              </div>
              <div id="buyer_range"></div>

            </div>

    </div>

        <div class="First_sentence" id="Please_use"> Blank </div>

        <br>
        <p>In the first graph, the blue segment contains the number <i>X</i>. </p>
        <p>In the second graph, please choose your report to send to Member B. The Confirm button will appear after you adjust both maximum and minimum values.</p>
        <br>
        <p>The yellow piece can be anywhere on the bar. It may or may not encompasses the blue piece (but this is not required).<br>
        Click and drag to indicate the minimum and maximum of the yellow bar within [0.0, 100.0].</p><br>

        <div class="my_buttons" id="seller_button">
        <button id="offerButton" class="not-clicked" type="button" > Confirm </button>
        <button id="guessButton" class="to_guess not_guess lnot_moved rnot_moved" type="button" > Confirm </button>
        </div>


    <center><button class="otree-btn-next btn btn-primary" id="next_page" style="font-size: 26px; display: none;"> Confirm </button></center>
    {% endif %}
</div>


        <div id="transition_screen">
        <div id="TheBuyer" style="font-size: 23px; text-align: left;" >
            The buyer rejected the price offer (<span>XXX</span>) from the seller. <br>
            The match moves on to the next round with 80% chance. <br>
            Please click the “Spin” button below to see if the match moves on or not.
        </div>
        <br>
        <ul style="font-size: 22px; text-align: left;">
           <li> If the spinning wheel stops at the green area (80% chance), the match continues.</li>
           <li> Otherwise (i.e., it stops at the red area, 20% chance), the match terminates.</li>
        </ul>

            <div id="wrapper">
          <div id="wheel">
            <div id="inner-wheel">
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
        <!--      <div class="sec">-->
        <!--        <span class="fa fa-lightbulb-o"></span>-->
        <!--      </div>-->
            </div>

            <div id="spin">
              <div id="inner-spin"></div>
            </div>

            <div id="shine"></div>
          </div>
          <div id="txt"></div>
        </div>
            <br>
            <div id="Draw_outcome" style="font-size: 26px; font-weight: bold;"></div>

            <br>


            <button id="transitButton" type="button" style="font-size: 23px; padding: 5px; visibility: hidden;"> Continue </button>
        </div>


{% endblock %}



{% block scripts %}


<script src="{% static 'pn_selection/Wheel.js' %}"></script>

<script>
       $('#transitButton').click(function (){
           $("#transition_screen").removeClass("transitioning")
           $("#main_screen").removeClass("transitioning")
           $("#transitButton").css('visibility', 'hidden');
       });

       $('.not-clicked').click(function(e){
          var elems = document.querySelectorAll(".not-clicked");
          for (i = 0; i < elems.length; ++i) {
                {#console.log(elems[i].id)#}
                elems[i].classList.remove("not-clicked");
                elems[i].classList.add("clicked");
          }
        {#console.log("clicked!")#}
   });


    {# define livesend and slider related function here for seller #}
      if ({{ player.id_in_group  }} == 1)
      {
          document.getElementById("Bvalue_tick").style.left = {{ B_value }}/4 +"%";
          document.getElementById("Bvalue_box").style.left = ({{ B_value }}/4-6) +"%";
          let inputSlider = document.getElementById("seller_offer_input");
          let sellerValue = document.getElementById("sellerBubble");
          let offerButton = document.getElementById("offerButton");
          let guessButton = document.getElementById("guessButton");
          {#sellerValue.style.left = (({{random_initial}}-50)*87/350+13) + "%";#}
          sellerValue.style.left = ({{random_initial}}/4) + "%";
          document.getElementById("pre_offer").style.left = (({{random_initial}}-50)*87/350+7) + "%";

          offerButton.onclick = function make_offer () {
              let offer = inputSlider.value;
              liveSend({'type': 'seller_offers', 'offer': offer });
              offerButton.style.display = "none";
          };
          guessButton.onclick = function make_guess (){
              let guess_min = document.getElementById("guess-left").value;
              let guess_max = document.getElementById("guess-right").value;
              $("#guessButton").addClass("lnot_moved");
              $("#guessButton").addClass("rnot_moved");
              liveSend({'type': 'seller_guess', 'guess_min': guess_min, 'guess_max':guess_max});
          }

          inputSlider.oninput = (()=>{
          let value = inputSlider.value;
          sellerValue.textContent = value;
          {#sellerValue.style.left = ((value-50)*87/350+13) + "%";#}
          sellerValue.style.left = (value/4) + "%";
          document.querySelectorAll("#seller_gain span")[0].innerHTML= inputSlider.value;
          {#document.getElementById("pre_offer").style.left = ((value-50)*87/350+7) + "%";#}
          document.getElementById("pre_offer").style.left = (value/4-8) + "%";
      });




              var guessLeft = document.getElementById("guess-left");
              var guessRight = document.getElementById("guess-right");
              var buyer_range = document.getElementById("buyer_range");
              var guess_minnum = document.getElementById("guess_minnum");
              var guess_maxnum = document.getElementById("guess_maxnum");

              minReached = function(e){
                     var min = 0;
                     if(min > e.target.value ){
                             target = e.target;
                             target.value = min;
                             e.preventDefault();
                             return false;
                     }
                return true;
               };
              guessLeft.addEventListener("input",minReached);

              function setLeftValue() {
                var _this = guessLeft,
                    min = parseInt(_this.min),
                    max = parseInt(_this.max);

                _this.value = Math.min(parseInt(_this.value), parseInt(guessRight.value) - 1);

                var percent = ((_this.value - min) / (max - min)) * 100;

                buyer_range.style.left = percent + "%";
                {#guess_minnum.innerText = _this.value;#}
                $("#guess_minnum span").text(_this.value);
                guess_minnum.style.left = percent - 0.5 + "%";
            }
            setLeftValue();

            function setRightValue() {
                var _this = guessRight,
                    min = parseInt(_this.min),
                    max = parseInt(_this.max);

                _this.value = Math.max(parseInt(_this.value), parseInt(guessLeft.value) + 1);

                var percent = ((_this.value - min) / (max - min)) * 100;

                buyer_range.style.right = (100 - percent) + "%";
                {#guess_maxnum.innerText = _this.value;#}
                 $("#guess_maxnum span").text(_this.value);
                guess_maxnum.style.left = ( percent - 2) + "%";

            }
            setRightValue();

            guessLeft.addEventListener("input", () => {setLeftValue(); $("#guessButton").removeClass("lnot_moved"); });
            guessRight.addEventListener("input", () => {setRightValue(); $("#guessButton").removeClass("rnot_moved");});




      }

    {# The following are mechanism to prevent troubles caused by refreshing #}

       {#Buyer rejected the offer, match continues, wait guess#}
      if ("{{ bargain_stage }}"=="rejected, wait_guess") {

                      document.getElementsByClassName("my_buttons")[0].style.display= "block";
                      document.getElementById("guessButton").style.display ="block";
                      document.getElementById("guessButton").style.margin="auto";
                      if ({{ outside_option }} > 0){
                      document.getElementById("Please_use").innerHTML="";
                      }
                      if ({{ outside_option }} == 0){
                      document.getElementById("Please_use").innerHTML="The buyer rejected the offer (" +({{ latest_offer }}) + ") and the match continues." +
                          " <br> <br> Please adjust the orange (min) and purple (max) sliders above to indicate the range of possible value B. " +
                          "<b> It aims to help you think about an appropriate offer price</b>, and your report will not be shared with the buyer.";
                      }
                      var elems = document.querySelectorAll(".not_guess");
                      for (i = 0; i < elems.length; ++i) {
                            {#console.log(elems[i].id)#}
                            elems[i].classList.remove("not_guess");
                            elems[i].classList.add("now_guess");
                      }
                      var style = document.querySelector('[data="test"]');
                      style.innerHTML =".range input.offer::-webkit-slider-thumb{ display: none;} .range input.offer::-moz-range-thumb{ visibility: hidden;}"+
                      ".range input[type=range]{   pointer-events: none;}"
                      {#document.getElementById("pre_offer").innerText="Your previous offer";#}
                      document.getElementById("last_offer").style.display="hidden";
                      $("#last_offer span").text("Previous offer");
                      {#document.getElementById("last_offer").style.left = (({{latest_offer}}-50)*87/350+7) + "%";#}
                      document.getElementById("last_offer").style.left = ( {{ latest_offer }}  / 4 -8) + "%";

                      document.getElementById("preoffer_tick").style.display="hidden";
                      document.getElementById("preoffer_tick").style.left= ({{ latest_offer }}/4) + "%";
                      document.getElementsByClassName("Things")[0].style.display="none";
                      document.getElementById("pre_offer").style.display="none";

                      document.getElementById("buyer_range").style.left = ({{ guessed_min }}/4) + "%";
                      {#document.getElementById("guess_minnum").innerText = ({{ guessed_min }});#}
                      $("#guess_minnum span").text({{ guessed_min }});
                      document.getElementById("guess_minnum").style.left = ({{ guessed_min }}/4 - 0.5) + "%";
                      document.getElementById("buyer_range").style.right = (100 - {{ guessed_max }}/4 ) + "%";
                      {#document.getElementById("guess_maxnum").innerText = {{ guessed_max }};#}
                      $("#guess_maxnum span").text({{ guessed_max }});
                      document.getElementById("guess_maxnum").style.left = ( {{ guessed_max }}/4 - 2) + "%";
                      $("#guess-left").val({{ guessed_min }});
                      $("#guess-right").val({{ guessed_max }});

      }

       {#Seller made the guess, need to make an offer then#}
      if ("{{ bargain_stage }}"=="guess_made,wait_offer") {
                     round_n = document.getElementsByClassName("round_n");
                     for (i = 0; i < round_n.length; i++){
                         round_n[i].innerHTML= {{ roundnum }};
                     }
                     percent_AA = document.getElementsByClassName("percent_AA");
                     for (j = 0; j < percent_AA.length; j++ ){
                         percent_AA[j].innerHTML= {{ prob_percent }};
                     }
                     if({{ player.id_in_group }} == 2){
                         document.getElementsByClassName("my_buttons")[0].style.display= "none";
                         let sellerTick = document.getElementById("seller_tick");
                         sellerTick.style.display = "none";
                         let sellerOffer = document.getElementById("seller_offer");
                         sellerOffer.style.display = "none";
                         let thePrice = document.getElementById("The_price");
                         thePrice.innerHTML="Please wait for the seller to make another offer. ";
                         document.querySelectorAll("#buyer_gain")[0].innerHTML= "If you accept the offer, you earn <span> ({{ p_value }}-Offer Price) </span> tokens.";
                    }

                    if ({{ player.id_in_group }} == 1){
                          var elems = document.querySelectorAll(".now_guess");
                          for (i = 0; i < elems.length; ++i) {
                                {#console.log(elems[i].id)#}
                                elems[i].classList.remove("now_guess");
                                elems[i].classList.add("not_guess");
                          }
                          document.getElementsByClassName("my_buttons")[0].style.display= "none";
                          document.getElementById("guessButton").style.display ="none";
                          document.getElementById("Please_use").innerHTML="";
                          var style = document.querySelector('[data="test"]');
                          style.innerHTML =".range input.guess::-webkit-slider-thumb{ display: none;} .range input.guess::-moz-range-thumb{ visibility: hidden;}"+
                          ".range input.guess[type=range]{   pointer-events: none;}"


                          document.getElementById("buyer_range").style.left = ({{ guessed_min }}/4) + "%";
                          {#document.getElementById("guess_minnum").innerText = ({{ guessed_min }});#}
                          $("#guess_minnum span").text({{ guessed_min }});
                          document.getElementById("guess_minnum").style.left = ({{ guessed_min }}/4 - 0.5) + "%";
                          document.getElementById("buyer_range").style.right = (100 - {{ guessed_max }}/4 ) + "%";
                          {#document.getElementById("guess_maxnum").innerText = {{ guessed_max }};#}
                          $("#guess_maxnum span").text({{ guessed_max }});
                          document.getElementById("guess_maxnum").style.left = ( {{ guessed_max }}/4 - 2) + "%";

                    }

      }

      function liveRecv(data) {
        console.log('received a message!', data);

        if (data.type == "seller_offer_made"){
            if ({{ player.id_in_group }}==2){

                let sellerTick = document.getElementById("seller_tick");
                sellerTick.style.display = "block";
                {#sellerTick.style.left = ((data.offer-50)*100/350 -1) + "%";#}
                sellerTick.style.left = (data.offer / 4) + "%";

                let sellerOffer = document.getElementById("seller_offer");
                sellerOffer.innerHTML="Seller's Offer <br>"+data.offer;
                sellerOffer.style.display = "block";
                sellerOffer.style.left = (data.offer/4-8) + "%";

                let thePrice = document.getElementById("The_price");
                thePrice.innerHTML="The price offer from the seller is "+ data.offer + ".<br> What would you like to do?";

                if ({{ p_value }}-data.offer>=0){
                document.querySelectorAll("#buyer_gain span")[0].innerHTML= ({{ p_value }}-data.offer);
                document.getElementsByClassName("my_buttons")[0].style.display= "block";
                document.getElementById("acceptButton").style.display = "initial";
                document.getElementById("buyer_gain").style.visibility="visible";
                document.getElementById("accept_disabled").style.visibility = "hidden";
                };

                if ({{ p_value }}-data.offer<0){
                document.getElementById("buyer_gain").style.visibility="hidden";
                document.getElementsByClassName("my_buttons")[0].style.display= "block";
                document.getElementById("acceptButton").style.display = "none";
                document.getElementById("accept_disabled").style.visibility = "visible";
                };

            }
            if ({{ player.id_in_group }}==1){
                 document.getElementById("Please_use").innerText="Please wait the buyer to make a decision.";
                 document.getElementById("offerButton").style.display="none";

                  let inputSlider = document.getElementById("seller_offer_input");
                  let sellerValue = document.getElementById("sellerBubble");
                  {#inputSlider.oninput = ()=> void 0;#}
                  var style = document.querySelector('[data="test"]');
                  style.innerHTML =".range input::-webkit-slider-thumb{ display: none;} .range input::-moz-range-thumb{ visibility: hidden;}"+
                      ".range input[type=range]{   pointer-events: none;}"
                  sellerValue.textContent = data.offer;
                  {#sellerValue.style.left = ((data.offer-50)*87/350+13) + "%";#}
                  sellerValue.style.left = (data.offer / 4) + "%";
                  document.querySelectorAll("#seller_gain span")[0].innerHTML= data.offer;
                  document.getElementById("preoffer_tick").style.display="block";
                  document.getElementById("preoffer_tick").style.left= (data.offer/4) + "%";
                  document.getElementById("last_offer").innerHTML="Your offer <br> "+ (data.offer);
                  document.getElementById("last_offer").style.display="block";
                  {#document.getElementById("last_offer").style.left = ((data.offer-50)*87/350+7) + "%";#}
                  document.getElementById("last_offer").style.left = ( data.offer  / 4 -8) + "%";
                  document.getElementById("pre_offer").style.display="none";
            }
        }

        if (data.type=="buyer_action_made"){
            if (data.action == "Outside"){
                document.getElementsByClassName("Things")[0].style.display= "none";
                document.getElementsByClassName("my_buttons")[0].style.display= "none";

                if({{ player.id_in_group }} == 2){
                     document.getElementsByClassName("my_buttons")[0].style.display= "none";
                     document.getElementById("next_page").style.display="block";
                     let thePrice = document.getElementById("The_price");
                     thePrice.innerHTML="The price offer from the seller is "+ data.pre_offer + ".<br> You took the outside option.<br>" +
                         "As a result, your earning in this match is {{ outside_option }} tokens.";
                }
                if({{ player.id_in_group }} == 1){
                     document.getElementById("Bvalue_tick").style.display="block";
                     document.getElementById("Bvalue_box").style.display="block";
                     document.getElementsByClassName("my_buttons")[0].style.display= "none";
                     document.getElementById("next_page").style.display="block";
                     document.getElementById("Please_use").innerHTML="The buyer took the outside option." +
                         "<br> As a result, your earning in this match is 0 tokens.";
                }
            }

            if (data.action == "Accept"){
                document.getElementsByClassName("Things")[0].style.display= "none";
                document.getElementsByClassName("my_buttons")[0].style.display= "none";

                if({{ player.id_in_group }} == 2){
                     document.getElementsByClassName("my_buttons")[0].style.display= "none";
                     document.getElementById("next_page").style.display="block";
                     let thePrice = document.getElementById("The_price");
                     thePrice.innerHTML="The price offer from the seller is "+ data.pre_offer + ".<br> You accepted the offer. " +
                         "<br> As a result, your earning in this match is " + ({{p_value  }} - data.pre_offer ) +" tokens.";
                }
                if({{ player.id_in_group }} == 1){
                     document.getElementById("Bvalue_tick").style.display="block";
                     document.getElementById("Bvalue_box").style.display="block";
                     document.getElementsByClassName("my_buttons")[0].style.display= "none";
                     document.getElementById("next_page").style.display="block";
                     document.getElementById("Please_use").innerHTML="The buyer accepted the offer." +
                         "<br> As a result, your earning in this match is " + data.pre_offer + " tokens.";
                }
            }

            if (data.action =="Reject"){
                if (data.terminated == true){
                    $('#spin').css('pointer-events','auto');
                    $("#TheBuyer span").text(data.pre_offer);
                    $("#transition_screen").addClass("transitioning")
                    $("#main_screen").addClass("transitioning")
                    $("#Draw_outcome").hide();
                    document.getElementById('spin').addEventListener('click', () => {spinFunction(data.draw);});
                    document.getElementById('inner-wheel').addEventListener('transitionend', () => {
                        $("#Draw_outcome").show();
                         $("#Draw_outcome").text("The match terminates.");
                         $('#spin').css('pointer-events','none');
                         $("#transitButton").css('visibility', 'visible');
                     });

                    document.getElementsByClassName("Things")[0].style.display= "none";
                    document.getElementsByClassName("my_buttons")[0].style.display= "none";

                    if({{ player.id_in_group }} == 2){
                         document.getElementsByClassName("my_buttons")[0].style.display= "none";
                         document.getElementById("next_page").style.display="block";
                         let thePrice = document.getElementById("The_price");
                         thePrice.innerHTML="The price offer from the seller is "
                             + data.pre_offer + ". <br> You rejected the offer and the match is terminated. <br>" +
                         "As a result, your earning in this match is 0 tokens.";
                    }

                    if({{ player.id_in_group }} == 1){
                         document.getElementById("Bvalue_tick").style.display="block";
                         document.getElementById("Bvalue_box").style.display="block";
                         document.getElementsByClassName("my_buttons")[0].style.display= "none";
                         document.getElementById("next_page").style.display="block";
                         document.getElementById("Please_use").innerHTML="The buyer rejected the offer and the match is terminated.<br> " +
                         "As a result, your earning in this match is 0 tokens.";
                    }
                }

                if (data.terminated == false){
                    $('#spin').css('pointer-events','auto');
                    $("#TheBuyer span").text(data.pre_offer);
                    $("#transition_screen").addClass("transitioning");
                    $("#main_screen").addClass("transitioning");
                    $("#Draw_outcome").hide();

                    document.getElementById('spin').addEventListener('click', () => {spinFunction(data.draw);});
                    document.getElementById('inner-wheel').addEventListener('transitionend', () => {
                        $("#Draw_outcome").show();
                         $("#Draw_outcome").text("The match moves on to the next round.");
                         $('#spin').css('pointer-events','none');
                         $("#transitButton").css('visibility', 'visible');
                     });


                         round_n = document.getElementsByClassName("round_n");
                         for (i = 0; i < round_n.length; i++){
                             round_n[i].innerHTML= data.roundnum;
                         }
                         percent_AA = document.getElementsByClassName("percent_AA");
                         for (j = 0; j < percent_AA.length; j++ ){
                             percent_AA[j].innerHTML= data.prob_percent;
                         }
                     if({{ player.id_in_group }} == 2){
                         document.getElementsByClassName("my_buttons")[0].style.display= "none";
                         let sellerTick = document.getElementById("seller_tick");
                         sellerTick.style.display = "none";
                         let sellerOffer = document.getElementById("seller_offer");
                         sellerOffer.style.display = "none";
                         let thePrice = document.getElementById("The_price");
                         thePrice.innerHTML="Please wait for the seller to make another offer. ";
                         document.querySelectorAll("#buyer_gain")[0].innerHTML= "If you accept the offer, you earn <span> ({{ p_value }}-Offer Price) </span> tokens.";
                    }
                    if ({{ player.id_in_group }} == 1){
                          document.getElementsByClassName("my_buttons")[0].style.display= "block";
                          document.getElementById("guessButton").style.display ="block";
                          document.getElementById("guessButton").style.margin="auto";
                          if ({{ outside_option }} > 0) {
                          document.getElementById("Please_use").innerHTML="The buyer did not take the outside option but rejected the offer (" +(data.pre_offer) + ") and the match continues." +
                              " <br> <br> Please adjust the orange (min) and purple (max) sliders above to indicate the range of possible value B. " +
                              "<b> It aims to help you think about an appropriate offer price</b>, and your report will not be shared with the buyer.";
                          }
                          if ({{ outside_option }} == 0) {
                          document.getElementById("Please_use").innerHTML="The buyer rejected the offer (" +(data.pre_offer) + ") and the match continues." +
                              " <br> <br> Please adjust the orange (min) and purple (max) sliders above to indicate the range of possible value B. " +
                              "<b> It aims to help you think about an appropriate offer price</b>, and your report will not be shared with the buyer.";
                          }
                          var elems = document.querySelectorAll(".not_guess");
                          for (i = 0; i < elems.length; ++i) {
                                {#console.log(elems[i].id)#}
                                elems[i].classList.remove("not_guess");
                                elems[i].classList.add("now_guess");
                          }
                          var style = document.querySelector('[data="test"]');
                          style.innerHTML =".range input.offer::-webkit-slider-thumb{ display: none;} .range input.offer::-moz-range-thumb{ visibility: hidden;}"+
                          ".range input[type=range]{   pointer-events: none;}"
                          document.getElementById("last_offer").innerHTML="Previous offer <br> "+(data.pre_offer);
                          document.getElementById("last_offer").style.display="block";
                          {#document.getElementById("last_offer").style.left = ((data.pre_offer-50)*87/350+7) + "%";#}
                          document.getElementById("last_offer").style.left = (data.pre_offer /4 - 8) + "%";
                          document.getElementById("pre_offer").style.display="none";
                          document.getElementById("preoffer_tick").style.display="block";
                          document.getElementsByClassName("Things")[0].style.display="none";
                    }
                }
            }
        }

        if (data.type=="seller_guess_made") {

                    if ({{ player.id_in_group }} == 1){
                        var elems = document.querySelectorAll(".clicked");
                        for (i = 0; i < elems.length; ++i) {
                              {#console.log(elems[i].id)#}
                              elems[i].classList.remove("clicked");
                              elems[i].classList.add("not-clicked");
                        }

                         var elems = document.querySelectorAll(".now_guess");
                         for (i = 0; i < elems.length; ++i) {
                                {#console.log(elems[i].id)#}
                                elems[i].classList.remove("now_guess");
                                elems[i].classList.add("not_guess");
                          }

                          document.getElementsByClassName("my_buttons")[0].style.display= "hidden";
                          document.getElementById("guessButton").style.display ="none";
                          document.getElementById("Please_use").innerHTML="";
                          document.getElementsByClassName("otree-btn-next")[0].style.display="block";
                    }
        }

    }


    </script>


{% endblock %}