{% 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 score 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><td></td><td></td><td></td><td></td></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_star }} <b>({{p.STAR_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_star }} <b>({{p.STAR_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_star }} <b>({{p.STAR_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_star }} <b>({{p.STAR_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 voting decisions for each player. The first column for every alternative is the total score
        for that alternative while the second is the total number of votes that alternative received in the runoff.
    </p>
</figure>
    <br>
    <br>
<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>
    Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total Alternative Score and Votes'
    },

    xAxis: {
        categories: ['A', 'B', 'C', 'D']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Score/Votes'
        },
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'Player 1 Score',
        data: [{{group.p1_score_A}}, {{group.p1_score_B}}, {{group.p1_score_C}}, {{group.p1_score_D}}],
        stack: 'male'
    }, {
        name: 'Player 2 Score',
        data: [{{group.p2_score_A}}, {{group.p2_score_B}}, {{group.p2_score_C}}, {{group.p2_score_D}}],
        stack: 'male'
    }, {
        name: 'Player 3 Score',
        data: [{{group.p3_score_A}}, {{group.p3_score_B}}, {{group.p3_score_C}}, {{group.p3_score_D}}],
        stack: 'male'
    }, {
        name: 'Player 1 Votes',
        data: [{{group.p1_vote_A}}, {{group.p1_vote_B}}, {{group.p1_vote_C}}, {{group.p1_vote_D}}],
        stack: 'female'
    },
    {
        name: 'Player 2 Votes',
        data: [{{group.p2_vote_A}}, {{group.p2_vote_B}}, {{group.p2_vote_C}}, {{group.p2_vote_D}}],
        stack: 'female'
    },
    {
        name: 'Player 3 Votes',
        data: [{{group.p3_vote_A}}, {{group.p3_vote_B}}, {{group.p3_vote_C}}, {{group.p3_vote_D}}],
        stack: 'female'
    },
    ]
});
</script>
{% endblock %}