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


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

{% block content %}
    <style>
        td.special {
            border: 3px solid;
        }
    </style>
    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. All players' choices have been bordered in black:
    <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.pl_vote == "A"%} class="special" {% endif%}
       {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_1_pl }}</td>{% endfor %}
        </tr>
        <tr {% if group.winner == "B" %} style="background-color:lightblue" {% endif %}>
            <td>B</td> {% for p in players %}<td  {% if p.pl_vote == "B"%} class="special" {% endif%}
           {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_2_pl }}</td>{% endfor %}
        </tr>
        <tr {% if group.winner == "C" %} style="background-color:lightblue" {% endif %}>
            <td>C</td> {% for p in players %}<td {% if p.pl_vote == "C"%} class="special" {% endif%}
           {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_3_pl }}</td>{% endfor %}
        </tr>
        <tr {% if group.winner == "D" %} style="background-color:lightblue" {% endif %}>
            <td>D</td> {% for p in players %}<td {% if p.pl_vote == "D"%} class="special" {% endif%}
           {% if p.id_in_group == player.id_in_group %} style="background-color:yellow"
        {% endif %}>{{ p.player_payoff_4_pl }}</td>{% endfor %}
        </tr>
    </table>
    <br>
    <br>
<br>
<br>

<figure class="highcharts-figure">
    <p class="highcharts-description">
        The chart below summarizes the voting decisions for each player and how many votes each alternative received
    </p>
    <div id="container"></div>

</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>
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Alternative Votes'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total votes'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Player 1',
        data: [{{group.p1_vote_A}}, {{group.p1_vote_B}}, {{group.p1_vote_C}}, {{group.p1_vote_D}}]
    }, {
        name: 'Player 2',
        data: [{{group.p2_vote_A}}, {{group.p2_vote_B}}, {{group.p2_vote_C}}, {{group.p2_vote_D}}]
    }, {
        name: 'Player 3',
        data: [{{group.p3_vote_A}}, {{group.p3_vote_B}}, {{group.p3_vote_C}}, {{group.p3_vote_D}}]
    }]
});
</script>

{% endblock %}