{% 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');
*{
  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;
}


.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;
}

#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: purple;
	-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: purple;
    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 title %}
    <div style="text-align: center;">{% if player.id_in_group == 2 %} Seller {% else %}  Buyer {% endif %} page [Match {{ matchnum }}, Round <span class="round_n"> {{ roundnum }} </span>]</div>
{% endblock %}

{% block content %}

       <div id="transition_screen">
        <div id="TheBuyer" style="font-size: 23px; text-align: left;" >
            The buyer rejected the price offer (<span>{{ seller_offer_display }}</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!")#}
   });

   {#Buyer rejected the offer, match terminates#}
      if ("{{ bargain_stage }}"=="rejected, end"){
                $("#transition_screen").addClass("transitioning");
                $("#main_screen").addClass("transitioning");
                $('#spin').css('pointer-events','auto');
                $("#Draw_outcome").hide();
                document.getElementById('spin').addEventListener('click', () => {spinFunction({{ latest_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');
                 });
      }

   {#Buyer rejected the offer, match continues, wait guess#}
      if ("{{ bargain_stage }}"=="rejected, wait_guess") {
                 $("#transition_screen").addClass("transitioning");
                 $("#main_screen").addClass("transitioning");
                 $('#spin').css('pointer-events','auto');
                 $("#Draw_outcome").hide();
                 document.getElementById('spin').addEventListener('click', () => {spinFunction({{latest_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');
                 });
      }


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

    if (terminated == true){
        $('#spin').css('pointer-events','auto');
        $("#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 (terminated == false) {
        $('#spin').css('pointer-events', 'auto');
        $("#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');
        });

        }
    }


    </script>


{% endblock %}