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

{% block title %}
{% endblock %}

{% block styles %}
    <link href="/static/antidote/collapse_box.css" rel="stylesheet">
    <style>


p{
    font-size: 22px;
    text-indent:0;
}

  .roleS{
          font-size:1.2em;
          font-weight: bold;
          color: red;
  }

  .roleR{
      font-size:1.2em;
      font-weight: bold;
      color: dodgerblue;
  }

    .roleTR{
      font-size:1.2em;
      font-weight: bold;
      color: dodgerblue;
      text-decoration: underline;
  }
  .roleFR{
      font-size:1.2em;
      font-weight: bold;
      color: darkgrey;
      text-decoration: underline;
  }

 input[type=range] {
	 -webkit-appearance: none;
	 display: block;
	 margin: 0;
	 width: 100%;
	 background: transparent;
}
 input[type=range]::-webkit-slider-runnable-track {
	 -webkit-appearance: none;
	 width: 100%;
	 height: 40px;
	 color: transparent;
	 background: lightgray;
	 border-radius: 999px;
	 border: none;
}
 input[type=range]::-moz-range-track {
	 -webkit-appearance: none;
	 width: 100%;
	 height: 40px;
	 color: transparent;
	 background: lightgray;
	 border-radius: 999px;
	 border: none;
}
 input[type=range]::-ms-track {
	 -webkit-appearance: none;
	 width: 100%;
	 height: 40px;
	 color: transparent;
	 background: lightgray;
	 border-radius: 999px;
	 border: none;
}
 input[type=range]::-ms-fill-lower {
	 display: none;
}
 input[type=range]::-ms-fill-upper {
	 display: none;
}
 input[type=range]::-webkit-slider-thumb {
	 -webkit-appearance: none;
	 height: 40px;
	 width: 40px;
	 border-radius: 30px;
	 background: black;
	 box-shadow: 0px 2px 10px -2px black;
}
 input[type=range]::-moz-range-thumb {
	 -webkit-appearance: none;
	 height: 40px;
	 width: 40px;
	 border-radius: 30px;
	 background: black;
	 box-shadow: 0px 2px 10px -2px black;
}
 input[type=range]::-ms-thumb {
	 -webkit-appearance: none;
	 height: 40px;
	 width: 40px;
	 border-radius: 30px;
	 background: black;
	 box-shadow: 0px 2px 10px -2px black;
}
 .ticks {
	 display: flex;
	 justify-content: space-between;
	 padding: 10px 20px;
}
 .tick {
	 position: relative;
	 display: flex;
	 justify-content: center;
	 width: 1px;
	 background: gray;
	 height: 10px;
	 line-height: 50px;
	 margin-bottom: 20px;
}
.not-clicked::-webkit-slider-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

.not-clicked::-moz-range-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

    #ptable table, th, td {
      border: 2px solid black;
      padding: 0;
        table-layout:fixed;
    }
    #ptable table{
      height: 100%;
    }

    thead tr th:first-child,
    tbody tr td:first-child {
      width: 8em;
      min-width: 8em;
      max-width: 8em;
    }


    </style>
{% endblock %}

{% block content %}
        <p>Before you proceed to the official rounds, please complete the following question. It is the last part of the practice rounds,
            and would be irrelevant to your payment </p>
                <h5 class=" font-weight-bold mt-3 mb-3">Question</h5>
        <p>Suppose that your role is <span class="roleR">R</span> {% if subsession.num_FR > 0 %} (<span class="roleTR">True R</span> or <span class="roleFR">False R</span>){% endif %}
            and you were (hypothetically) asked to choose an action before receiving any message.</p>
      <ol type="a">
          <li><span style="color: dodgerblue; font-weight: bold;">[There is no right or wrong answer to this question]</span> What action do you want to choose?
              <br>
              <br>
              <div class="range">
                  <input type="range" min="0" max="10" name="q6a" id="q6a" class="not-clicked">
                  <div class="ticks">
                    <!-- You could generate the ticks based on your min, max & step values. -->
                    <span class="tick">0</span>
                    <span class="tick">1</span>
                    <span class="tick">2</span>
                    <span class="tick">3</span>
                    <span class="tick">4</span>
                    <span class="tick">5</span>
                    <span class="tick">6</span>
                      <span class="tick">7</span>
                      <span class="tick">8</span>
                      <span class="tick">9</span>
                      <span class="tick">10</span>
                  </div>
                </div>
          </li>
          <li>{% formfield player.q6b %}</li>
          <li>{% formfield player.q6c %}</li>
      </ol>

            <button type="button" class="collapsible">Show Payoff Table</button>
            <div class="content">
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – [The exact amount needed – The actual amount taken]&sup2; for <span class="roleS">S</span>
                </div>
                <div style="font-size: 1.2em; text-align: center;">
                    and
                </div>
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – 3 &times; [The exact amount needed – The actual amount taken]&sup2; for <span class="roleR">R</span>
                </div>
                <br>
                <table id="ptable" width="100%" height ="100%">
                      <tr style="height: 5%;">
                          <th rowspan="2" colspan="2">If the poison is</th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R </span></th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S (YOU)</span></th>
                      </tr>
                      <tr style="height: 5%;">
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                      </tr>
                  </table>
                <br>
            </div>
<br>
     <center><button class="otree-btn-next btn btn-primary not-clicked" id="next_page" style="font-size: 22px; margin: 12px;"> PROCEED </button>
    </center>
{% endblock %}

{% block scripts %}

<script>

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("expanded");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
       $('.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");
           }
       });


$(".form-group, .required").slice(0).css({"display" : "flex", "justify-content": "space-between"});

var typeO_prob = parseInt({{ typeO_prob }});
var typeI_prob = parseInt({{ typeI_prob }});
$("label[for='id_q6b']").html( "What is your earning from the action you chose above if the poison is TYPE 0 which occurs with "+typeO_prob+"% chance?");
$("<div>&nbsp;</div>").insertAfter($("label[for='id_q6b']"));
$("label[for='id_q6c']").html( "What is your earning from the action you chose above if the poison is TYPE 1 which occurs with "+typeI_prob+"% chance?");
$("<div>&nbsp;</div>").insertAfter($("label[for='id_q6c']"));

    var Payoffs = {{ payoffs|safe }};
    {#console.log(Object.keys(Payoffs).length );#}
    for (var i = 0; i < Object.keys(Payoffs).length ; i++){
        var tr = $('<tr/>');
        if (i == 0){
            tr.append("<td rowspan='"+Object.keys(Payoffs).length+"'>The Actual Amount (grams) of Herbal Extract Taken </td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        else{
            tr.append("<td style='display:none;'></td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        $("#ptable").append(tr);

    }

var conflict = parseInt({{ conflict }});
$('#ptable tr').eq(2).find('td').eq(2).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(4).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(conflict+2).find('td').eq(5).css({"color": 'red', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(7).css({"color": 'red', 'font-weight': 'bold'});


</script>
{% endblock %}