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

{% block title %}
    Results
{% endblock %}

{% block content %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>

    {% if player.decision == True %}
        {% if group.total_customers > Constants.bar_full %}
            <p>
                In this event, number exceeded 6 participants so you will receive {{ player.payoff }} points.
            </p>
        {% else %}
            <p>
                In this event, number was below 6 participants so you will receive {{ player.payoff }} points.
            </p>
        {% endif %} 
{% else %}
    <p>
        You have decided to not join the event, which gives you {{ player.payoff}} points.
    </p>
    

{% endif %}

<p>
    The points distributed to the other participants are listed below.
</p>

<table class='table table-striped table-hover'>
    <thead>
        <th>Participants</th>
        {% for t in player.in_all_rounds %}
        <th>{{t.round_number}}Round</th>
        {% endfor %}
    </thead>
    {% for p in player.get_others_in_group %}
    <tr>
        <td>Player{{ p.id_in_group }}</td>
        {% for t in p.in_all_rounds %}
            <td>{{ t.payoff }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>
    <p>
        Please press the next button and proceed
    </p>

    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description">
            This graph shows the cumulative payoff of each participant.
        </p>
    </figure>
    

    {% next_button %}

    <!--以下が表のJS-->
    <script>
        var cumu_payoffs1 = {{ cumu_payoffs1|json }};
        var Name1 = 'You';
        var cumu_payoffs2 = {{ cumu_payoffs2|json }};
        var Name2 = 'Player'+{{ IDname2|json }};
        var cumu_payoffs3 = {{ cumu_payoffs3|json }};
        var Name3 = 'Player'+{{ IDname3|json }};
        var cumu_payoffs4 = {{ cumu_payoffs4|json }};
        var Name4 = 'Player'+{{ IDname4|json }};
        var cumu_payoffs5 = {{ cumu_payoffs5|json }};
        var Name5 = 'Player'+{{ IDname5|json }};
        var cumu_payoffs6 = {{ cumu_payoffs6|json }};
        var Name6 = 'Player'+{{ IDname6|json }};
        var cumu_payoffs7 = {{ cumu_payoffs7|json }};
        var Name7 = 'Player'+{{ IDname7|json }};
        var cumu_payoffs8 = {{ cumu_payoffs8|json }};
        var Name8 = 'Player'+{{ IDname8|json }};
        var cumu_payoffs9 = {{ cumu_payoffs9|json }};
        var Name9 = 'Player'+{{ IDname9|json }};
        var cumu_payoffs10 = {{ cumu_payoffs10|json }};
        var Name10 = 'Player'+{{ IDname10|json }};

        Highcharts.chart('container', {
            title: {
                text: 'Cumulative score in each round'
            },
            yAxis: {
                title: {
                    text: 'Cumulative score'
                }
            },
            xAxis: {
                accessibility: {
                    rangeDescription: 'Round'
                },
                tickInterval: 1
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 1
                }
            },
        
            series: [{
                name: Name1,
                data: cumu_payoffs1
            }, {
                name: Name2,
                data: cumu_payoffs2
            }, {
                name: Name3,
                data: cumu_payoffs3
            }, {
                name: Name4,
                data: cumu_payoffs4
            }, {
                name: Name5,
                data: cumu_payoffs5
            }, {
                name: Name6,
                data: cumu_payoffs6
            }, {
                name: Name7,
                data: cumu_payoffs7
            }, {
                name: Name8,
                data: cumu_payoffs8
            }, {
                name: Name9,
                data: cumu_payoffs9
            }, {
                name: Name10,
                data: cumu_payoffs10
            }],
        
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            },
            credits: {
                enabled: false
            },
        
        });
    </script>
{% endblock %}