{% 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="text-align: center">{% for prob, sum in player.current_lottery %}
                    {% if forloop.counter != 1 %}
                     <br> and <br>
                    {% endif %}
                    {% if forloop.counter == 1 and sum  >= 0 %}
                     <b style="color: green;">Get</b>&nbsp;
                   {% elif forloop.counter == 1 and sum < 0 %}
                     <b style="color: red;">Lose</b>&nbsp;
                    {% elif  sum >= 0 %}
                     <b style="color: green;">get</b>&nbsp;
                    {% elif  sum < 0 %}
                     <b style="color: red;">lose</b>&nbsp;
                    {% endif %}
                  <b>$ {{ sum | abs }}</b> with probability <b>{{ prob }}% </b>
    {% endfor %}</td>

{%  elif type == 'rocl' %}
   <td  style="text-align: left"><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>
             <b style="color: green;">get</b>&nbsp;  <b>$ {{ sum1 | abs }}</b> with probability <b>{{ prob1 }}% </b>
        </li>
        <li>
             <b style="color: green;">get</b>&nbsp;  <b>$ {{ sum2 | abs }}</b> with probability <b>{{ prob2 }}% </b>
        </li>
        </ul>
    {%  endfor %}</td>

{%  endif %}

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


<div id="wtp_div">

   <br>
    <p>How <b>difficult</b> or <b>complex</b> do you find it to assess how much this particular lottery is worth to you?</p>

 <table class="w3-table w3-white" style="width: 100%; border-spacing: 0; text-align: center; table-layout: fixed">
        <colgroup>
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">
            <col width="(100/11)%">

  </colgroup><tr>
    <td>0 = not difficult at all</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10 = extremely difficult</td>
</tr>
     <tr>
         <td><input type="radio" name="difficulty" value="0" required ></td>
         <td><input type="radio" name="difficulty" value="1" required ></td>
         <td><input type="radio" name="difficulty" value="2" required ></td>
         <td><input type="radio" name="difficulty" value="3" required ></td>
         <td><input type="radio" name="difficulty" value="4" required ></td>
         <td><input type="radio" name="difficulty" value="5" required ></td>
         <td><input type="radio" name="difficulty" value="6" required ></td>
         <td><input type="radio" name="difficulty" value="7" required ></td>
         <td><input type="radio" name="difficulty" value="8" required ></td>
         <td><input type="radio" name="difficulty" value="9" required ></td>
         <td><input type="radio" name="difficulty" value="10" required ></td>
     </tr></table>
<p></p>


    <br>
    <!--<p>The <b>guessing machine produces the optimal guess</b> given this information about which bag was actually drawn. </p>-->
    <p>What is the <b>highest amount</b> out of your endowment of $2 that you are willing to
        give up to <b>remove the manipulation by the evil machine</b> (up to +/- $2 of your own valuation)
        for <b>this particular lottery?</b></p>

    <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <col width="100%">

        </colgroup>


   <td style="text-align: center;">
    <output id="text_wtp">Use the slider:</output><br>
            <br>
          <!--<td style="text-align: right  "><text style="text-align: right"> 0% von Option A <br> 100% von Option B</text> </td> </tr>-->
 <input type="range" class="myclassBlue" name="wtp" id="wtp" style="width: 100%" min="0" value="0" max="{{endowment}}" step="0.01"
        oninput="text_wtp.value = 'Your willingness to pay to remove the evil machine: ' + wtp.value.toString() + '$';" required/>
    <div class="sliderticks">
      <p> $0</p>
        <p> $0.50</p>
        <p>$1.00</p>
        <p>$1.50</p>
                <p>$2.00&nbsp;&nbsp;&nbsp;&nbsp;</p>

  </div> <p> <br></p>
   </td>
       </tr>

    </table>


        <div style="text-align: right;">
       <button type="button" onclick="wtpFunction()" class="btn btn-primary" id="submit_wtp" disabled >Next</button>
   </div>

    </div>






<div id="machine_div" style="display: none; width: 100%;">
<h4>Manipulation by the evil machine</h4><br>
    <p>The ten-sided dice was rolled by the computer. <b>It came up {{ die_roll }}</b>.</p>
    <p>This means: Your decisions in the following choice list <b>will {% if not machine_manipulation %}<text style="color: red"><u>not</u> </text>{%  endif %} be  manipulated</b>   by the evil machine.</p>


<div style="text-align: right;">
   <button type="button" onclick="machineInfo()" class="btn btn-primary"  >Proceed to choice list</button>
</div>
</div>






<div id="posterior_div" style="display: none; width: 100%;">
    <h4>Your valuation:</h4>
<br>
{% if machine_manipulation %}
    <p>Reminder: Your valuation will be manipulated by the evil machine!</p>
{%  endif %}

 <table class="table table-bordered" style="border-spacing: 0; width: 100%">
        <colgroup>
            <col width="40%">
            <col width="15%">
            <col width="40%">
        </colgroup>
        <tr>
            <td align="center"><b>Option A</b></td>
            <td></td>
            <td align="middle"><b>Option B</b></td>
        </tr>
{% for counter, amount in player.right_side_amounts1 %}

     {% if counter == 1 %}
        <tr>


    {% if type == 'list' %}

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

{%  elif type == 'rocl' %}
   <td  style="vertical-align: middle; text-align: center" 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>
             <b style="color: green;">get</b>&nbsp;  <b>$ {{ sum1 | abs }}</b> with probability <b>{{ prob1 }}% </b>
        </li>
        <li>
             <b style="color: green;">get</b>&nbsp;  <b>$ {{ sum2 | abs }}</b> with probability <b>{{ prob2 }}% </b>
        </li>
        </ul>
    {%  endfor %}
         </td>

{%  endif %}

                  </td>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <input type="radio" name="amount_{{ amount }}" value="left"
                           required >&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <input type="radio" name="amount_{{ amount }}"
                           value="right" data-amount="{{ amount }}"
                           required >
                </td>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <!--{% if amount >= 0 %} <i>Receive</i>&nbsp; {% else %} <i>Lose</i>  &nbsp; {% endif %}-->
                     <b>$ {{ amount | abs }} &nbsp;</b> with certainty</td>
            </tr>
{% else %}
          <tr>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <input type="radio" name="amount_{{ amount }}" value="left"
                           required >&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <input type="radio" name="amount_{{ amount }}"
                           value="right" data-amount="{{ amount }}"
                           required >
                </td>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <!--{% if amount >= 0 %} <i>Receive</i>&nbsp; {% else %} <i>Lose</i>  &nbsp; {% endif %}-->
                     <b>$ {{ amount | abs }} &nbsp; </b> with certainty</td>
            </tr>
{% endif %}
{% endfor %}
    </table>

    {{ form.errors }}
    <input type="hidden" name="switching_point" id="switching_point">


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


</div>


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

        <p>You indicated that this lottery is <b>worth a certain payment of $ <output id="text_conf"></output></b> to you.</p>

        <p>
               How <b>confident</b> are you <b>about your lottery valuation of $ <output id="text_conf2"></output></b>?
               {%if round == 1 %}<br>Use the slider to indicate how strongly you feel about your valuation. In the figure below, the dark bar
               represents your estimate, the lighter bars represent nearby values. The size of a bar represents your confidence for a given value.{%endif%}

    </p>
      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>

<tr>
<td> <input type="range" class="myclassRed" name="confidence" id="confidence" value="100" style="width: 100%" min="0" max="100" step="1"/> </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 task</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 in $',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          minorTickInterval: 1,
          minorTickLength: 10,
          tickInterval: 10,
          tickLength: 20,
      },
      labels: {
          step: 5,
        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)/10 < 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 = parseInt(i);
         var cat_names = [];
         for (var j = -50; j <= 50; ++j) {
            if (i+(j/10) < 0 || isNaN(i)) {
                    cat_names.push("")
                }
            else if (j % 10 == 0) {
                cat_names.push((i+(j/10)).toFixed(0).toString());
            }
           else if (Math.abs(j % 10) == 5) {
                cat_names.push((i+(j/10)).toFixed(1).toString());
            }
            else {
                cat_names.push("");
            }
         }
         return cat_names;
        };

     updateBars = function() {
         mu = parseInt(document.getElementById("switching_point").value);
         if (mu == 9999) {
             mu = {{ safe_range_max }} + {{ step_size }};
         }
         conf = 5-parseInt(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);
     $("#switching_point").on("input change", updateBars);
</script>
<script>

    function wtpFunction() {
  var x = document.getElementById("wtp_div");
  var y = document.getElementById("machine_div");
   var z = document.getElementById("lottery_div");
   x.style.display = "none";
      y.style.display = "inline-block";
      z.style.display = "none";


}
    function machineInfo() {
  var x = document.getElementById("machine_div");
  var y = document.getElementById("posterior_div");
    x.style.display = "none";
      y.style.display = "inline-block";
    }

    function postFunction() {
  {#var x = document.getElementById("submit_posterior");#}
  {#var z = document.getElementById("qn_post");#}
  var z = document.getElementById("posterior_div");
  var y = document.getElementById("confidence_div");
  var x = document.getElementById("text_conf");
  var v = document.getElementById("text_conf2");
  var q = document.getElementById("switching_point");
  if (q.value == 9999) {
      x.value = ({{ safe_range_max }} + {{ step_size }}).toString();
        v.value = ({{ safe_range_max }} + {{ step_size }}).toString();
  }
  else {
    x.value = q.value.toString();
  v.value = q.value.toString();
  }
   var p = document.getElementById("lottery_div");
 {#$('#answer').prop('readonly', true);#}
    z.style.display = "none";
      y.style.display = "inline-block";
      p.style.display = "inline-block";
      {#x.value = q.value.toString();#}
      {#v.value = q.value.toString();#}
            updateBars()

}


</script>
<script>

$(document).ready(function () {
var diff_touched = false;
var wtp_touched = false;
$('#wtp').on('input change', function () {
    $('#wtp').addClass('myclass');
    wtp_touched = true;
    if (diff_touched === true) {
        $('#submit_wtp').prop('disabled', false);
    }
});

$('input[type=radio]').click(function(){
    diff_touched = true;
    if (wtp_touched === true) {
     $('#submit_wtp').prop('disabled', false);
    }
});

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

    });
</script>




{% endblock %}