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

{% block title %}
    <u>{{ title_text }}</u>
{% endblock %}

{% block styles %}
    <style>

{#    /* style range */#}
{#input[type=range] {#}
{#    width: 100%;#}
{#    max-width: 100%;#}
{#    margin-left: 0;#}
{#}#}
{##}
{#/* style datalist */#}
{#input[type=range] + datalist {#}
{#    display: block;#}
{#    margin-top: -4px;#}
{#}#}
{#input[type=range] + datalist option {#}
{#    display: inline-block;#}
{#    width: calc((100% - 12px) / (var(--list-length) - 1));#}
{#    text-align: center;#}
{#}#}
{#input[type=range] + datalist option:first-child {#}
{#    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);#}
{#    text-align: left;#}
{#}#}
{#input[type=range] + datalist option:last-child {#}
{#    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);#}
{#    text-align: right;#}
{#}#}
{##}
{#input[type=range]::-webkit-slider-runnable-track {#}
{#    -webkit-appearance: none;#}
{#    background: #ddd;#}
{#    border: none;#}
{#    border-radius: 3px;#}
{#    height: 10px;#}
{#}#}
{##}
{#input[type=range]::-webkit-slider-thumb {#}
{#    -webkit-appearance: none;#}
{#    margin-top: -4px;#}
{#}#}

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

button.not-clicked {
  visibility: hidden;
}

.clicked{
    visibility: visible;
}

       body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }
        p{
    font-size: 32px;
    }

        #ptablebtn{
        position: absolute;
        font-size: 24px;
        top: 40px;
        right: 35px;
        border-radius: 12px;
        background-color: gold;
        color: black;
        font-family: bold;
    }


    #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>

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

{% block content %}
<br>

    <p>
        The message you receive is <br> "<u>{{ message }}</u>" <br> <br>How many grams of herbal extract
        <img src="/static/antidote/Herbal.png"  alt="" width="50px;"> do you want to put to make antidote?
    </p>
<br>

            <div class="range">
              <input type="range" min="0" max="10" name="action" id="action" 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>
<br>
    <button class="otree-btn-next btn btn-primary not-clicked" id="next_page" style="font-size: 25px; margin: 15px;"> SUBMIT </button>

            <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 (YOU)</span></th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S </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>

{% endblock %}



{% block scripts %}
    <script src="/static/antidote/collapse_box.js"></script>

    <script>

       $('.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");
           }
       });


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