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

{% block title %}
    Runde {{ player.round_number }}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static "pgg/bootstrap-slider.min.css" %}"/>
    <link rel="stylesheet" href="{% static "pgg/pgg.css" %}"/>
    <link rel="stylesheet" href="{% static "pgg/chart.css" %}"/>
{% endblock styles%}

{% block scripts %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="{% static "pgg/bootstrap-slider.min.js" %}"></script>
    <script src="{% static "pgg/sliders.js" %}"></script>
    <script type="text/javascript">
        var contrib_history = {{ contribution_history|json }};
        var group_history = {{ group_account_history|json }};
        if (contrib_history.length === 0) {
            contrib_history = [null];
        }
        if (group_history.length === 0) {
            console.log('yay');
            group_history = [null];
        }
        
        Highcharts.chart('container', {
            title: {
                text: ''
            },
        
            yAxis: {
                title: {
                    text: 'Token'
                },
                min: 0,
                softMax: 50,
                tickInterval: 5
            },
        
            xAxis: {
                min: 1,
                softMax: 30,
                tickInterval: 1,
                startOnTick: true,
                title: {
                    text: 'Runde'
                },
                plotLines: [
                    {
                        value: 10,
                        dashStyle: 'dash',
                        width: 1,
                        color: '#d33'
                    },
                    {
                        value: 20,
                        dashStyle: 'dash',
                        width: 1,
                        color: '#d33'
                    },
                ]
            },
        
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
            },
        
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 1,
                    animation: 0
                },
            },
            tooltip: {
                valueDecimals: 2,
                headerFormat: "<span style='font-size: 10px'>Runde {point.key}</span><br/>",
            },
            credits: {
                enabled: false
            },
            
            series: [{
                name: 'blaue Token im gemeinsamen Topf am Ende der Runde',
                data: group_history
            }, {
                name: 'durchschnittlicher Beitrag aller Gruppenmitglieder',
                data: contrib_history
            }],
        
        });
        
        
        $('.slider-input').on('change', function (event) {
            $('#output_'+event.target.id).text(event.value.newValue);
            if (!touched.includes(event.target.name)) {
                touched.push(event.target.name);
            }
            if (check_all_sliders_touched(1)) {
                $('.otree-btn-next').show();
            }
        });
    </script>
{% endblock scripts %}

{% block content %}
    <div class="card">
        <div class="card-header">
            Verlauf
        </div>
        <div class="card-body">
            {% if player.round_number != 1 %}
                <p>
                    In der letzten Runde haben Sie {{ prev_contribution }} <span class="blue">blaue Token</span> in den gemeinsamen Topf gelegt.<br/>
                    Aus den {{ end_of_round_blue|floatformat:1 }} <span class="blue">blauen Token</span> im gemeinsamen Topf am Ende der letzten Runde wurde für Sie ein Anteil von {{ prev_payoff|floatformat:1 }} <span class="orange">orange Token</span> generiert und Ihnen gutgeschrieben. Sie besitzen derzeit {{ player.orange_tokens|floatformat:1 }} <span class="orange">orange Token</span>.
                </p>
            {% endif %}
            <div id="container"></div>
        </div>
    </div>
    <p>&nbsp;</p>
    <div class="card">
        <div class="card-header">
            Ihre Entscheidung
        </div>
        <div class="card-body">
            <p>
                {% if subsession.persistent %}
                    Der gemeinsame Topf enthält zu Beginn dieser Runde {{ group.pot_size|floatformat:1 }} <span class="blue">blaue Token</span>.<br/>
                {% endif %}
                Sie verfügen in dieser Runde über {{ player.blue_token_endowment }} <span class="blue">blaue Token</span>.
            </p>
            <label>Wie viele Ihrer <span class='blue'>blauen Token</span> möchten Sie in den gemeinsamen Topf legen?</label><br />
            <input class="slider-input" id="id_blue_token_contribution" name="blue_token_contribution" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0.0"/><span class="slider-label-right" id="output_id_blue_token_contribution"></span> <span class="blue">blaue Token</span>
        
            {% next_button %}
        </div>
    </div>
    

{% endblock %}