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

{% block title %}
    Invest
{% endblock %}

{% block content %}

<p>
    This is a public goods game with
    {{ Constants.players_per_group }} players per group,
    an endowment of {{ Constants.endowment }},
    and a multiplier of {{ Constants.multiplier }}.
</p>


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Given that you receive return x (chosen using the sliding bar), this chart shows the probability that k other participants are facing lower return. When k = 0 you face the lowest return; no other participants have lower returns. By moving the sliding bar you can see how these probabilities change as a function of the return you face.
    </p>
</figure>

<div class="slidecontainer">
  <input type="range" min="-1" max="2" value="0" step="0.1" class="slider" id="myRange" list="tickmarks">
    <datalist id="tickmarks">
        <option value="-1"></option>
        <option value="-0.9"></option>
        <option value="-0.8"></option>
        <option value="-0.7"></option>
        <option value="-0.6"></option>
  <option value="-0.5" label="-0.5"></option>
        <option value="-0.4"></option>
        <option value="-0.3"></option>
        <option value="-0.2"></option>
        <option value="-0.1"></option>
  <option value="0" label="0"></option>
        <option value="0.1"></option>
        <option value="0.2"></option>
        <option value="0.3"></option>
        <option value="0.4"></option>
  <option value="0.5" label="0.5"></option>
        <option value="0.6"></option>
        <option value="0.7"></option>
        <option value="0.8"></option>
        <option value="0.9"></option>
  <option value="1" label="1"></option>
        <option value="1.1"></option>
        <option value="1.2"></option>
        <option value="1.3"></option>
        <option value="1.4"></option>
  <option value="1.5" label="1.5"></option>
        <option value="1.6"></option>
        <option value="1.7"></option>
        <option value="1.8"></option>
        <option value="1.9"></option>
        <option value="2"></option>
</datalist>
  <p>Value: <span id="demo"></span></p>
</div>

<div id="container1"></div>

<style>
    .slider {

  width: 100%; /* Full-width */
  height: 50px; /* Specified height */

}
</style>

<table id="myTable" class="table">
    <tr>
            <th rowspan="2" style="width:130px,text-align:center">Your return</th>
            <th rowspan="2" style="width:130px,text-align:center">Liklihood that your partner's return is lower</th>
            <th colspan={{ Constants.players_per_group }} style="width:130px,text-align:center">Profit from Investing if k partners Invest</th>
            <th colspan="2" style="width:130px,text-align:center">Do you wish to Invest?</th>
            <th rowspan="2" style="width:130px,text-align:center">Profit from Not Investing</th>
    </tr>
   <tr>
       {% for temp in Constants.other_players %}
       <th style="width:130px,text-align:center">{{ temp }}</th>
       {% endfor %}
    </tr>
    {% for field in form %}
        <tr>
            <td style="width:130px">{{ field.label }}</td>
            <td style="width:130px">{{ field.label }}</td>
            {% for temp in Constants.other_players %}
            <td style="width:130px">0</td>
            {% endfor %}
            {% for choice in field %}
                <td style="width:130px">{{ choice }}</td>
            {% endfor %}
            <td style="width:130px">0</td>
        </tr>
    {% endfor %}

</table>



<script>

 slider = document.getElementById("myRange");
 output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
 N = 2;
// Update the current slider value (each time you drag the slider handle)
dps = ks(0.5,N);

function ks(k,limit) {
   dps = [], yVal = k;
  for( i = 0; i< limit; i++) {
    dps.push({x:i,y:yVal });
  }
  return dps
}

slider.oninput = function() {
  output.innerHTML = this.value
  //chart.series[0].setData(dps2)
  //console.log(result)
  let dps2 = []
  let dps2m = []
  test = $.getJSON(
    js_vars.treatment,
    function (result) {
      $.each(result, function (i, field) {
        dps2m.push(field[slider.value * 10 + 20])
      })
      for (let i = 1; i <= N; i++) {
        dps2.push({ x: i - 1, y: dps2m[i - 1] })
      }
      chart1.series[0].setData(dps2)
    }
  )
}

chart1 = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Probability that k other participants face lower return for each k'
    },
    yAxis: {
        allowDecimals: true,
        title: {
            text: 'Probability that k other participants face lower return'
        },
        min: 0,
        max: 1,
    },

    series: [{
        data: dps
    }]
});


    var mytable = document.getElementById("myTable");
    for (var i = 2, row; row = mytable.rows[i]; i++) {
        row.cells[1]=dps2[1,i-1]
        for (var j = 2, col; col = row.cells[j]; j++) {
            if (j < row.cells.length - 3 ) {
                var temp = 1.5 - (i - 2)/10 + (j - 2)/(js_vars.N - 1) - 1
            col.innerHTML = temp.toFixed(1);
            }
        }
    }

        </script>

    {% next_button %}

{% endblock %}