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

{% block title %}
    Round Results
    <p>Round {{ subsession.round_number }} of {{ Constants.num_rounds }}</p>
{% endblock %}

{% block content %}
    The below table lists both your and your group members' payoffs for selecting the various alternatives, as well as how
    many votes each has been allocated this round. Your player number, votes, and payoffs are highlighted in yellow. The alternative that has been selected
    has been highlighted in blue. The rank each player chose for each alternative is listed in bold next to that alternative's payoff:
    <br>
    <br>
      <table class="table">
        <tr>
            <th>Player:</th> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{p.id_in_group}} {% if p.id_in_group == player.id_in_group %} (You) {% endif %}</td>{% endfor %}
        </tr>
        <tr>
            <th>Votes:</th> {% for p in players %} <td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.votes }}</td>
            {% endfor %}
        </tr>
        <tr>
        <th>Alternatives</th>
        <th colspan="3">Players' Payoffs</th>
        </tr>
        <tr {% if group.winner == "A" %} style="background-color:lightblue" {% endif %}>
            <td>A</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_1_ir }} <b>({{p.IR_A}})</b></td>{% endfor %}
        </tr>
        <tr {% if group.winner == "B" %} style="background-color:lightblue" {% endif %}>
            <td>B</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_2_ir }} <b>({{p.IR_B}})</b></td>{% endfor %}
        </tr>
        <tr {% if group.winner == "C" %} style="background-color:lightblue" {% endif %}>
            <td>C</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_3_ir }} <b>({{p.IR_C}})</b></td>{% endfor %}
        </tr>
        <tr {% if group.winner == "D" %} style="background-color:lightblue" {% endif %}>
            <td>D</td> {% for p in players %}<td {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_4_ir }} <b>({{p.IR_D}})</b></td>{% endfor %}
        </tr>
    </table>
    <br>
    <br>
<br>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        The chart above summarizes the series of runoffs and votes for each alternative. Each group of columns represents each runoff.
        Remember, once an alternative reaches a majority of votes there are no further rounds of voting.
    </p>
</figure>

<br>

<br>
The chosen alternative for this round was {{group.winner}} and your payoff was {{player.payoff}}

<br>
<br>
<br>
{% next_button %}
{% endblock %}

{% block scripts %}
<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>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 30) {
                $('.otree-timer').show();
            }
        });
    });
</script>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Alternative Votes'
    },
    xAxis: {
        categories: [
            'Runoff 1',
            'Runoff 2',
            'Runoff 3'
        ],
        crosshair: true
    },
     yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Votes'
            },
                plotLines: [{
                value: {{group.majority}},
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Majority threshold'
                }
            }]
        },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Alternative A',
        data: [{{group.total_A}}, {{group.r_1_A}}, {{group.r_2_A}}]

    }, {
        name: 'Alternative B',
        data: [{{group.total_B}}, {{group.r_1_B}}, {{group.r_2_B}}]

    }, {
        name: 'Alternative C',
        data: [{{group.total_C}}, {{group.r_1_C}}, {{group.r_2_C}}]

    }, {
        name: 'Alternative D',
        data: [{{group.total_D}}, {{group.r_1_D}}, {{group.r_2_D}}]

    }]
})
</script>

{% endblock %}