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

{% block title %}Guess your chance of winning a seat in schools {% 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>
<br>

<h4>Please select your token allocation</h4>
<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>Which school do you think you would get a seat if you applied to School A in the next round?</b></p>
      <p style="text-align: center">Click on the slider bar then drag to assess.</p>
    </div>
<br><br><br>
     <div style="text-align : center;width:100%;vertical-align: text-top" >

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


   <!-- Slider for Box L -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_l" name="guess_aa" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_l')" onchange="adjustSliders('box_l')">
   <p id="allocation_box_l"><span id="output_box_l"></span> tokens: Accepted by school A.</p>
    <p style="margin-left: 0em; text-align: center;"><b>Lottery Outcome</b><br>
        If accepted, there is <span id="lotteryOutputl"></span> % to win E$110.</p>
</div>


<!-- Slider for Box R -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_r" name="guess_ab" min="0" max="100" step="1" class="slider" oninput="updateSliders('box_r')" onchange="adjustSliders('box_r')">
    <p id="allocation_box_l"><span id="output_box_r"></span> tokens: Accepted by school B.</p>
    <p style="margin-left: 0em; text-align: center;"><b>Lottery Outcome</b><br>
        If accepted, there is <span id="lotteryOutputr"></span> % to win E$110.</p>
</div>

<!-- Slider for Box M (set to 10% by default) -->
<div style="margin-right: 20px;">
    <input type="range" id="slider_box_m" name="guess_am" min="0" max="100" step="1" class="slider" value="10" oninput="updateSliders('box_m')">
    <p id="allocation_box_l"><span id="output_box_m"></span> tokens: Rejected by schools.</p>
    <p style="margin-left: 0em; text-align: center;"><b>Lottery Outcome</b><br>
        If accepted, there is <span id="lotteryOutputm"></span> % to win E$110.</p>
</div>

</div>



</div>


    </div>
</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');
                }
            });

function updateSliders(box) {


  var slider_l = document.getElementById("slider_box_l");
  var slider_r = document.getElementById("slider_box_r");
  var slider_m = document.getElementById("slider_box_m");
  var output_l = document.getElementById("output_box_l");
  var output_r = document.getElementById("output_box_r");
  var output_m = document.getElementById("output_box_m");
  var lotteryOutput_l = document.getElementById("lotteryOutputl");
  var lotteryOutput_r = document.getElementById("lotteryOutputr");
  var lotteryOutput_m = document.getElementById("lotteryOutputm");


  // Get the current values of all sliders
  var value_l = parseFloat(slider_l.value);
  var value_r = parseFloat(slider_r.value);
  var value_m = parseFloat(slider_m.value);
var remainingPercentage = 100 - value_m;
    var totalSumLR = parseInt(slider_l.value) + parseInt(slider_r.value);

    // Calculate the scale factor to maintain the sum at 100 - Box M value


  if (remainingPercentage === 0) {
    // Set a default value or handle this case in a way that makes sense for your application
    scaleFactor = 0;
  } else {
    scaleFactor = remainingPercentage / (value_l + value_r);
  }

  // Calculate the maximum values for L and R based on M

  // Calculate the maximum values for L and R based on M
  var max_l = 100 - value_m;
  var max_r = 100 - value_m;

  // Ensure that the sliders L and R do not exceed 100 - M
  if (value_l > max_l) {
    slider_l.value = max_l;
  }
  if (value_r > max_r) {
    slider_r.value = max_r;
  }

  // Update the max attributes for sliders L and R (capped at 100)
  slider_l.max = 100;
  slider_r.max = 100;

  // Update the max attributes for sliders L and R


  // Adjust the values of L and R based on the sum constraint
  var sum_l_r = 100 - value_m;
  if (box === 'l') {
    slider_r.value = sum_l_r - value_l;

  } else if (box === 'r') {
      slider_l.value = sum_l_r - value_r;

  } else if (box === 'm' && value_m === 99) {
  // Set slider_l and slider_r values to 0.5
  slider_l.value = Math.ceil(0.5);
  slider_r.value = Math.floor(0.5);
} else if (box === 'm' && value_m === 98) {
  // Set slider_l and slider_r values to 0.5
  slider_l.value = 1;
  slider_r.value = 1;
} else {
  var new_value_box_l = slider_l.value * scaleFactor;
  var new_value_box_r = slider_r.value * scaleFactor;

  // Update the slider values
  if (slider_l.value >slider_r.value){
  slider_l.value = Math.floor(new_value_box_l);
  slider_r.value = Math.ceil(new_value_box_r);
} else {
  slider_l.value = Math.ceil(new_value_box_l);
  slider_r.value = Math.floor(new_value_box_r);
  }
  }


  // Update the displayed values for L, R, and M
  output_l.innerHTML = slider_l.value;
  output_r.innerHTML = slider_r.value;
  output_m.innerHTML = slider_m.value;

  // You can set the logic for lotteryOutput based on your specific requirements.
  // Example:
  lotteryOutput_l.innerHTML = Math.round(100-Math.pow(parseInt(100-slider_box_l.value) /100, 2) * 100);
  lotteryOutput_r.innerHTML = Math.round(100-Math.pow(parseInt(100-slider_box_r.value) /100, 2) * 100);
  lotteryOutput_m.innerHTML = Math.round(100-Math.pow(parseInt(100-slider_box_m.value) /100, 2) * 100);
}

// Function to handle slider changes
function adjustSliders(box) {
  // You can put any additional logic you need here when the slider value is changed.
  // Example:
  // var sliderValue = parseFloat(document.getElementById("slider_box_" + box).value);
  // var calculatedValue = performSomeCalculation(sliderValue);
  // updateOtherElements(calculatedValue);
}

// Add event listeners to the sliders
slider_box_l.oninput = function() {
  updateSliders('l');
  adjustSliders('l');
};

slider_box_r.oninput = function() {
  updateSliders('r');
  adjustSliders('r');
};

slider_box_m.oninput = function() {
  updateSliders('m');
  adjustSliders('m');
};


</script>


    <p>{% next_button %}</p>

{% endblock %}