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

{% block title %}
Part 3 - Hypothetical Question
{% endblock %}

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
        text-align: center
    }
    input[type=radio]:checked + label {
          font-style: normal;
          color: rgb(56,110,246);
          border: 1px solid rgb(56,110,246);
          background-color: rgb(226,233,253)
        }
    }
</style>
<style>
    .center {
      margin: 0% 10% 0% 10%;
      width: 100%;
    }
    .checkboxgroup {
    display: inline-block;
    text-align: center;
    margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 20px;
        width: 20px;
        vertical-align: middle;
    }
    input[type='radio']:disabled {
        pointer-events: none;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 14px;
      cursor: not-allowed;
      pointer-events: none;
    }
</style>
<style>
    input[type=number] {
          width: 30%;
          padding: 2px 2px;
          margin: 2px 0;
        }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}
<br>
<p>
    Suppose you are given a chance to learn about the performance of others in <b>one more interval</b>. Which interval would you choose?
</p>
<p>
   If you are not interested in receiving information about any of these intervals, please select "Not interested".
</p>

<script>
        let prep1 = js_vars.Pref1;
        if (prep1 == 1) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id1").disabled = true;
            document.getElementById("label1").disabled = true;
            document.getElementById("label1").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 2) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id2").disabled = true;
            document.getElementById("label2").disabled = true;
            document.getElementById("label2").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 3) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id3").disabled = true;
            document.getElementById("label3").disabled = true;
            document.getElementById("label3").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 4) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id4").disabled = true;
            document.getElementById("label4").disabled = true;
            document.getElementById("label4").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 5) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id5").disabled = true;
            document.getElementById("label5").disabled = true;
            document.getElementById("label5").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 0) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id6").disabled = true;
            document.getElementById("label6").disabled = true;
            document.getElementById("label6").className = "btn btn-secondary btn-lg";
        });
        }
</script>

<script>
        let prep2 = js_vars.Pref2;
        if (prep2 == 1) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id1").checked = true;
            document.getElementById("my_radio_button_id1").disabled = false;
        });
        }
        else if (prep2 == 2) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id2").checked = true;
            document.getElementById("my_radio_button_id2").disabled = false;
        });
        }
        else if (prep2 == 3) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id3").checked = true;
            document.getElementById("my_radio_button_id3").disabled = false;
        });
        }
        else if (prep2 == 4) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id4").checked = true;
            document.getElementById("my_radio_button_id4").disabled = false;
        });
        }
        else if (prep2 == 5) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id5").checked = true;
            document.getElementById("my_radio_button_id5").disabled = false;
        });
        }
        else if (prep2 == 0) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id6").checked = true;
            document.getElementById("my_radio_button_id6").disabled = false;
        });
        }
</script>
<br>
<center>
  <div>
    <div class="checkboxgroup" id="radio5">
      <button id="label5" class="btn btn-success btn-lg" type="button" for="my_radio_button_id5" >Rank 1-20 <br> (top performance)</button>
      <input type="radio" name="Pref2" value="5" id="my_radio_button_id5" disabled />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio4">
      <button id="label4" class="btn btn-success btn-lg" type="button" for="my_radio_button_id4"  >Rank 21-40 <br> (above average)</button>
      <input type="radio" name="Pref2" value="4" id="my_radio_button_id4" disabled/>
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio3">
      <button id="label3" class="btn btn-success btn-lg" type="button" for="my_radio_button_id3" >Rank 41-60 <br> (average performance)</button>
      <input type="radio" name="Pref2" value="3" id="my_radio_button_id3" disabled />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio2">
      <button id="label2" class="btn btn-success btn-lg" type="button" for="my_radio_button_id2" >Rank 61-80  <br> (below average)</button>
      <input type="radio" name="Pref2" value="2" id="my_radio_button_id2" disabled/>
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio1">
      <button id="label1" class="btn btn-success btn-lg" type="button" for="my_radio_button_id1" >Rank 81-100 <br> (bottom performance)</button>
      <input type="radio" name="Pref2" value="1" id="my_radio_button_id1" disabled />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio0">
      <button id="label6" class="btn btn-success btn-lg" type="button" for="my_radio_button_id6" >Not interested <br> &nbsp;&nbsp;&nbsp;&nbsp; </button>
      <input type="radio" name="Pref2" value="0" id="my_radio_button_id6" disabled />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;
  </div>
</center>

<br><br>

<p>
    Suppose you are given another {{Constants.WTP_endowment}} ECU, up to how many ECU would you be willing to pay for this information?
</p>
<!--<div>-->
<!--    <label>Please fill in a number between 0 and {{Constants.WTP_endowment}}. </label> <br>-->
<!--    <input id="WTP2" type="number" name="WTP2">-->
<!--</div>-->
{{formfield 'WTP2'}}

<br><br>

{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please fill in a number between 0 and {{Constants.WTP_endowment}}.</p>
</div>
{% endif %}

<button class="otree-btn-next btn btn-primary" style="float: right;">Next</button>

{{ endblock }}