{% load otree %}
{% load utils %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>


<style>
    .highcharts-figure, .highcharts-data-table table {
      min-width: 310px;
      max-width: 800px;
      margin: 1em auto;
    }

    .highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
    }
    .highcharts-data-table caption {
      padding: 1em 0;
      font-size: 1.2em;
      color: #555;
    }
    .highcharts-data-table th {
    font-weight: 600;
      padding: 0.5em;
    }
    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
      padding: 0.5em;
    }
    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
      background: #f8f8f8;
    }
    .highcharts-data-table tr:hover {
      background: #f1f7ff;
    }
</style>

<figure class="highcharts-figure">
    <div id="container1"></div>
    <div id="container2"></div>
</figure>

<script>
    var payoffData = {{payoffs|json}};
Highcharts.chart('container1', {
    title: {
        text: 'Payoff Distribution for Round {{round_number|json}}'
    },

    xAxis: [{
        title: { text: 'Data' },
        alignTicks: false,
        visible: false
    }, {
        title: { text: 'Payoff Amount' },
        alignTicks: false,
        opposite: false
    }],

    yAxis: [{
        title: { text: 'Data' },
        visible: false
    }, {
        title: { text: 'Number of Students' },
        opposite: false
    }],

    plotOptions: {
        histogram: {
            accessibility: {
                pointDescriptionFormatter: function (point) {
                    var ix = point.index + 1,
                        x1 = point.x.toFixed(3),
                        x2 = point.x2.toFixed(3),
                        val = point.y;
                    return ix + '. ' + x1 + ' to ' + x2 + ', ' + val + '.';
                }
            }
        }
    },

    series: [{
        name: 'Histogram',
        type: 'histogram',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's1',
        binsNumber: 10,
        zIndex: -1
    }, {
        name: 'Data',
        visible: false,
        showInLegend: false,
        data: payoffData,
        id: 's1',
        marker: {
            radius: 2.5
        }
    }]
});
var bidData = {{bids|json}};
Highcharts.chart('container2', {
    title: {
        text: 'Price Bid Distribution for Round {{round_number|json}}'
    },

    xAxis: [{
        title: { text: 'Data' },
        alignTicks: false,
        visible: false
    }, {
        title: { text: 'Price Bid' },
        alignTicks: false,
        opposite: false
    }],

    yAxis: [{
        title: { text: 'Data' },
        visible: false
    }, {
        title: { text: 'Number of Students' },
        opposite: false
    }],

    plotOptions: {
        histogram: {
            accessibility: {
                pointDescriptionFormatter: function (point) {
                    var ix = point.index + 1,
                        x1 = point.x.toFixed(3),
                        x2 = point.x2.toFixed(3),
                        val = point.y;
                    return ix + '. ' + x1 + ' to ' + x2 + ', ' + val + '.';
                }
            }
        }
    },

    series: [{
        name: 'Histogram',
        type: 'histogram',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's1',
        binsNumber: 10,
        zIndex: -1
    }, {
        name: 'Data',
        visible: false,
        showInLegend: false,
        data: bidData,
        id: 's1',
        marker: {
            radius: 2.5
        }
    }]
});
</script>

{% for participant in participants %}
<h5>Name: {{ participant.name }} | Opponent: {{ participant.opponent }} </h5>
<table class="table">
    <tr>
        <th>Round</th>
        <th>Bid</th>
        <th>Opponent Bid</th>
        <th>Payoff</th>
        <th>Opponent Payoff</th>
        <th>Accumulated Earnings</th>
    </tr>
    {% for _ in participant.payoffs %}
    </tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ participant.bids|get_by_index:forloop.counter0 }}</td>
        <td>{{ participant.opponent_bids|get_by_index:forloop.counter0 }}</td>
        <td>{{ participant.payoffs|get_by_index:forloop.counter0 }}</td>
        <td>{{ participant.opponent_payoffs|get_by_index:forloop.counter0 }}</td>
        <td>{{ participant.accumulated_payoffs|get_by_index:forloop.counter0 }}</td>
    </tr>
    {% endfor %}
</table>
<br/>
{% endfor %}