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

{% block title %}Guess your chance of winning a seat in school A {% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'style/boxgraph.css' %}">
<link rel="stylesheet" href="{% static 'style/global_style.css' %}">
<link rel="stylesheet" href="{% static 'style/slider.css' %}">

<style>
table {
            width: 50%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 4px; /* Adjust the padding for smaller cells */
            font-size: 12px; /* Adjust the font size for smaller text */
        }
        th {
            background-color: #f2f2f2;
        }
        .highlighted {
            background-color: red; /* Change the background color as desired */
        }
  /* Add some basic styles for the sliders */
  .slider-container {
    display: inline-block;
    vertical-align: top;
    width: 145%; /* Adjust the width as needed */
    text-align: center;
  }
  .slider {
    -webkit-appearance: none;
    width: 50%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  /* Customize the appearance of the slider thumb */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }

  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  #allocation_box_l {
  margin-top: 10em;
  margin-left:7em;/* Adjust the value as needed */
}
</style>



<style data="after_click" type="text/css"></style>


   <p>This is round {{ player.round_number }}: belief task A</p>
    <p>
    You are student {{ player.id_in_group }} <br>
    You and other students' score distribution is the following:
    </p>

     <table>
        <tr>
            <th>Student ID</th>
            <th colspan="3">Score Distribution</th>
        </tr>
        <tr>
            <td></td>
            <td>1/3 Chance</td>
            <td>1/3 Chance</td>
            <td>1/3 Chance</td>
        </tr>
        <tr>
            <td id="student-1">Student 1</td>
            <td>100</td>
            <td>90</td>
            <td>75</td>
        </tr>
        <tr>
            <td id="student-2">Student 2</td>
            <td>100</td>
            <td>90</td>
            <td>75</td>
        </tr>
        <tr>
            <td id="student-3">Student 3</td>
            <td>95</td>
            <td>80</td>
            <td>65</td>
        </tr>
        <tr>
            <td id="student-4">Student 4</td>
            <td>95</td>
            <td>80</td>
            <td>65</td>
        </tr>
        <tr>
            <td id="student-5">Student 5</td>
            <td>85</td>
            <td>70</td>
            <td>60</td>
        </tr>
        <tr>
            <td id="student-6">Student 6</td>
            <td>85</td>
            <td>70</td>
            <td>60</td>
        </tr>
    </table>


<hr>


     <div name="belief_example" style="border: 1px solid;width: 120%;margin-left: -10%">
<u>Allocation</u>
    <div class="info" style="width: 100%">



</div>

    <div >
      <p style="text-align: center"><b>What is the percentage chance that you would win a school B or get rejected?</b></p>
      <p style="text-align: center">Click on the slider bar then drag to assess.</p>
    </div>

     <div style="text-align : center;width:100%;vertical-align: text-top" >

 <div style="display: flex; align-items: center; width: 100%;">

<div class="slider-container"  style="margin-top: 5em;">
   <!-- Slider for Box L -->

    <input type="range" id="slider_box_l" name="guess_a" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')" onchange="adjustSliders('box_l')">
   <p id="allocation_box_l">You allocated <span id="output_box_l"></span> token to school A.</p>
    <p style="margin-left: 0em; text-align: center;">If you win the seat in school A, there is <span id="lotteryOutputl"></span> % to win $10.</p>
</div>

<div class="slider-container" style="margin-top: 5em;">
<!-- Slider for Box R -->

    <input type="range" id="slider_box_r" name="guess_am" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_r')" onchange="adjustSliders('box_r')">
    <p id="allocation_box_l">You allocated <span id="output_box_r"></span> token to rejected.</p>
    <p style="margin-left: 0em; text-align: center;">If you get rejected by school A, there is <span id="lotteryOutputr"></span> % to win $10.</p>
</div>
</div>



</div>



    </div>
    <button id="nextButton" onclick="proceedToNextPage()" disabled>Proceed to Next Page</button>
    <p id="errorMessage" style="color: red; display: block;">Please make a bet on school B as well</p>
</div>





<script>
        document.addEventListener('DOMContentLoaded', function() {
            // Replace "Student 1" with "YOU" based on player ID group
            // You can customize this logic for your player IDs
                var cell = document.getElementById('student-' + {{player.id_in_group}});
                if (cell) {
                    cell.textContent = 'student {{ player.id_in_group }} (YOU)';
                    cell.parentElement.classList.add('highlighted');
                }
            });






    var slider_box_l = document.getElementById("slider_box_l");
    var slider_box_r = document.getElementById("slider_box_r");
    var output_box_l = document.getElementById("output_box_l");
    var output_box_r = document.getElementById("output_box_r");
    var lotteryOutputl = document.getElementById("lotteryOutputl");
    var lotteryOutputr = document.getElementById("lotteryOutputr");

 function updateSliders(changedSlider) {
    var value_box_l = parseInt(slider_box_l.value);
    var value_box_r = parseInt(slider_box_r.value);


// Calculate the difference between the total and the changed slider's value
    var diff = 100 - value_box_l - value_box_r;
// If the Box L slider is changed, update the Box R slider accordingly
    if (changedSlider === 'box_l') {
        slider_box_r.value = value_box_r + diff;
        }

// If the Box R slider is changed, update the Box L slider accordingly
    else if (changedSlider === 'box_r') {
        slider_box_l.value = value_box_l + diff;
        }
// Update the chance values displayed on the page
        output_box_l.textContent = slider_box_l.value;
        output_box_r.textContent = slider_box_r.value;

        var lotteryValuel = 100-Math.pow(parseInt(100-slider_box_l.value) /100, 2) * 100;
        lotteryOutputl.textContent = Math.floor(lotteryValuel, 1);
        var lotteryValuer = 100-Math.pow(parseInt(100-slider_box_r.value) /100, 2) * 100;
        lotteryOutputr.textContent = Math.floor(lotteryValuer, 1);




 }





    show2=function (){
        document.getElementById("next8").style.visibility="visible";
    }


    let betA = document.getElementById("slider_box_l");
    let betB = document.getElementById("slider_box_r");

    betA.addEventListener("input", checkSliders);
    betB.addEventListener("input", checkSliders);

    function checkSliders() {
            // Check if both sliders have been touched (you can use any condition you like)
            if  (betA.value !== "" || betB.value !== "") {
                nextButton.disabled = false; // Enable the "Bet" button
                errorMessage.style.display = "none"; // Hide the error message
            } else {
                 nextButton.disabled = true; // Disable the "Bet" button
                errorMessage.style.display = "block"; // Display the error message
            }
        }

</script>





{% endblock %}