{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Decision {{round    }} of {{num_questions}}  <hr>
{% endblock %}

{% block content %}


    <div id="lottery_div" style="text-align: center; width: 100%;">
 <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
<tr>

 {% if type == 'list' %}

    <td style="vertical-align: middle; text-align: center" rowspan="{{table_length1}}">
{% for prob, sum in player.current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  >= 0 %}
                     <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                   {% elif sum < 0 %}
                     <b style="color: red;">&nbsp;&nbsp;Lose</b>&nbsp;
                    {% endif %}
                  <b>$ {{ sum | abs }}</b> <br>
    {% endfor %}
    </td>

{%  elif type == 'rocl' %}
   <td  style="vertical-align: middle; text-align: left" rowspan="{{table_length1}}">
   <p>We roll a fair four-sided dice with numbers 20, 40, 60, 80</p>
    {% for roll, prob1, sum1, prob2, sum2 in player.current_lottery %}
        If dice comes up {{ roll }}:
        <ul>
        <li>
          With probability <b>{{ prob1 }}% : </b>   <b style="color: green;">&nbsp;&nbsp;Get</b>&nbsp;  <b>$ {{ sum1 | abs }}</b>
        </li>
        <li>
         With probability <b>{{ prob2 }}% : </b>    <b style="color: green;">&nbsp;&nbsp;   Get</b>&nbsp;  <b>$ {{ sum2 | abs }}</b>
        </li>
        </ul>
    {%  endfor %}
         </td>

{%  endif %}

</tr></table>
    </div>

<br>
 <p id="valuation_div" style="width: 100%;">

    <p id="qn_pre">
        How much is this <b>specific</b> lottery <b>worth to you</b>?  </p>

<p>
To me, receiving a certain payment of
    <b>&nbsp;&nbsp;&nbsp;&nbsp;$ <input type="number" min="{{ min }}" step="0.01" max="{{ max }}" name="own_valuation" id="own_valuation" required
                                         style="font-weight: bold; border-radius: 4px; width: 50px; text-align: left; border-width: 1px">&nbsp;&nbsp;&nbsp;&nbsp;</b> is worth the same as playing this specific lottery.

    </p>
 <div id="submit_valuation" style="text-align: right;">
       <button type="button" onclick="postFunction()" class="btn btn-primary" id="submit_posterior" disabled >Submit your valuation</button>
   </div>





    <div id="confidence_div" style="display: none; width: 100%">
<br>


            <b>How confident</b> are you that the valuation you stated <b>exactly reflects the amount</b>  that the lottery is <b>worth to you</b>?

            {%if round == 1 %}<p>Using the slider, you can allocate 100 points to one or more dollar amounts to indicate how confident you are that this amount reflects how much the lottery is worth to you.</p>{%endif%}
<br>

      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>
          <tr> <td style="text-align: center;"><b><output id="text_conf"> </output></b></td></tr>
<tr>
<td> <input type="range" class="myclassRed" name="confidence" id="confidence" value="100" style="width: 100%" min="0" max="100" step="1"
    oninput="text_conf.value = 'Your confidence: ' + confidence.value.toString();" /> </td>
</tr>
          <tr><td>
          <div class="sliderticks">
      <p> </p>
        <p> </p>
  </div>
      </td> </tr>
      <tr>
          <td style="padding: 0" >
              <div style="display: inline; float: left" ><b>not confident at all</b></div> <div style="display: inline; float: right"><b>fully confident</b></div>
          </td></tr>

          <br></table><br>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

   <div style="text-align: right;">
       <button type="submit" class="btn btn-primary" id="confirm" disabled >Next</button>
   </div>

        {{form.errors}}
    </div>

{% endblock %}


{% block styles %}
<style>
  .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 4px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 0 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    .myclassBlue::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: white;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
       .myclassRed::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: gray;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}


{% block scripts %}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>

g_pdf = function(mean, standardDeviation) {
    var bar_values = [];
    for (var j = 0; j <= 100; ++j) {
             bar_values.push(50  / (Math.sqrt(2*Math.PI* (standardDeviation * standardDeviation)))*Math.pow(Math.E, -Math.pow(j - mean, 2) / (2 * (standardDeviation * standardDeviation))));
     }
     return bar_values;
};
cats = function() {
    var c = [];
    for (var q = 0; q <= 100; ++q)  {
      c.push("");
    }
  return c;
};

var init_categories = cats();
var init_values = g_pdf(50, 0.1)

</script>
<script>myChart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
    tooltip: { enabled: false },
  subtitle: {
    text: ''
  },
  xAxis: {
      categories: init_categories,
      title: {
          text: 'Your valuation',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          minorTickInterval: 1,
          minorTickLength: 10,
          tickInterval: 10,
          tickLength: 20,
      },
      labels: {
          step: 10,
        style: {
        color: 'red',
        fontSize:'15px',
    }
}

  },
  yAxis: {
      min: 0,
      max: 100,
      visible: true,
      tickInterval: 10,
      title: {
          text: 'Strength of confidence',
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
      labels: {
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      groupPadding: 0,
      shadow: false
    }
  },
  series: [{
    name: '',
    data: init_values,
    showInLegend: false
    }],
     credits: {
       enabled: false
            },
      exporting: {enabled: false}
});</script>
<script src="{% static 'global/risk_uncertainty_list_functions.js' %}"></script>
<script>

   gaussian_pdf = function(mean, standardDeviation) {
        var bar_values = [];
        var lowest_bucket = 0;
        var first_nonzero_bucket = 0;
        for (var j = 0; j <= 100; ++j) {
            if (standardDeviation === 0) {
                if (j === 50) {
                    bar_values.push({y: 100, color: 'gray'})
                } else {
                    bar_values.push({y: 0, color: '#C0C0C0'})
                }
            } else {
                val = 800 / (Math.sqrt(2 * Math.PI * (standardDeviation * standardDeviation))) * Math.pow(Math.E, -Math.pow(j - 50, 2) / (2 * (standardDeviation * standardDeviation)));
                if (mean + (j - 50)/20 < 0) {
                    bar_values.push(0);
                    lowest_bucket += val;
                    continue;
                } else if (first_nonzero_bucket == 0) {
                    new_val = val + lowest_bucket;
                    first_nonzero_bucket = 1;
                } else {
                    new_val = val;
                }
                if (j === 50) {
                    bar_values.push({
                        y: new_val,
                        color: 'gray'
                    });
                } else {
                    bar_values.push({y: new_val, color: '#C0C0C0'});
                }
            }
        }
         return bar_values;
  };

    get_category_names = function(i) {
        i = parseFloat(i);
         var cat_names = [];
         for (var j = -50; j <= 50; ++j) {
            if (i+(j/20) < 0 || isNaN(i)) {
                    cat_names.push("")
                }
            else if (j % 10 == 0) {
                cat_names.push("$ " + (i+(j/20)).toFixed(1).toString());
            }
           else if (Math.abs(j % 10) == 5) {
                cat_names.push("$ " + (i+(j/20)).toFixed(1).toString());
            }
            else {
                cat_names.push("");
            }
         }
         return cat_names;
        };

     updateBars = function() {
         mu = parseFloat(document.getElementById("own_valuation").value);
         conf = 5-parseFloat(document.getElementById("confidence").value)/100*5;
         if (conf == 0) {
             sigma = conf
         }
         else {
             sigma = Math.pow(conf + 2, 1.6)
         }
         myChart.xAxis[0].setCategories(get_category_names(mu));
         myChart.series[0].setData(gaussian_pdf(mu, sigma));
     };

     $("#confidence").on("mouseup keyup", updateBars);
     $("#own_valuation").on("input change", updateBars);
</script>
<script>

    function postFunction() {
  {#var x = document.getElementById("submit_posterior");#}
  {#var z = document.getElementById("qn_post");#}
  {#var z = document.getElementById("posterior_div");#}
  var z = document.getElementById("qn_pre");
  var x = document.getElementById("submit_valuation");
  var y = document.getElementById("confidence_div");
  {#var q = document.getElementById("own_valuation");#}
   {#var p = document.getElementById("lottery_div");#}
    $('#own_valuation').prop('readonly', true);
        y.style.display = "inline-block";
      x.style.display = "none";
      z.style.display = "none";
      {#x.value = q.value.toString();#}
      {#v.value = q.value.toString();#}
            updateBars()

}


</script>
<script>

$(document).ready(function () {


$('#confidence').on('input change', function () {
    $('#confidence').addClass('myclass');
    $('#confirm').prop('disabled', false);
});

$('#own_valuation').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("own_valuation").value);
        if (x >= {{ min }} && x <= {{ max }}) {
          $('#submit_posterior').prop('disabled', false);
        }
        else {
                      $('#submit_posterior').prop('disabled', true);

        }
});


    });
</script>




{% endblock %}