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

#transition_screen.transitioning{
    display: block;
}

#transition_screen{
    display: none;
}

#transitButton{
    visibility: hidden;
}

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 %}
    {% if player.id_in_group == 2 %} Seller {% else %}  Buyer {% endif %} page [Match {{ matchnum }}, Round <span class="round_n"> {{ roundnum }} </span>]
{% 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 90% 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 (90% chance), the match continues.</li>
           <li> Otherwise (i.e., it stops at the red area, 10% 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>
            <div id="transitButton">
                {{ next_button }}
            </div>
        </div>

{% endblock %}

{% block scripts %}

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

<script>
    const spinButton = document.getElementById('spin');
    const wheel = document.getElementById('inner-wheel');
    const outcome = document.getElementById('Draw_outcome');
    const transitButton = document.getElementById('transitButton');
    let spun = false;

    $("#transition_screen").addClass("transitioning");
    outcome.style.display = 'none';

    spinButton.addEventListener('click', () => {
        if (spun) {
            return;
        }
        spun = true;
        $('#spin').css('pointer-events', 'none');
        spinFunction({{ draw_rotation }});
    });

    wheel.addEventListener('transitionend', () => {
        if (!spun) {
            return;
        }
        outcome.style.display = 'block';
        outcome.textContent = "{{ draw_outcome_text }}";
        transitButton.style.visibility = 'visible';
    }, { once: true });
</script>

{% endblock %}