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

{% block title %}
    Decision Page -- Round {{ subsession.round_number }} of {{ Constants.num_rounds }}
    {% if player.treatment == 2 %}
    <br>
    <br>
    Stage {{player_period}} of 3
    {% endif %}
{% endblock %}

{% block content %}
<br>
<br>
<div class="card bg-light">
    <div class="card-body">
        <h3>
            Summary
        </h3>
        <br>
        <p>The Group Project has value V=S1+S2+S3</p>
        <p>The Private Project has value P=D1+D2+D3.</p>
    </div>
</div>
<br>
<br>
<div style="float: left; width: 50%;">
For all players in your group D1 = {{ player.priv_good_sig }}
<br>
<br>
Your individual value of S1 for this round is S1 = {{ player.pub_good }}
</div>
<div style="float: right; width: 50%;">
<figure class="highcharts-figure">
    <div id="container-speed" class="chart-container"></div>
</figure>
</div>
<br>
<br>
{% if player.treatment == 2 and player_period > 1 %}
<br>
<br>

The number of group members who have already chosen the group project so far is: {{ group.num_contr }}
<br>
<br>
{% endif %}
{% if player.contribute != 1 %}
Please indicate whether you choose the group project:
<br>
<br>
{% formfield player.contribute label="Choose the group project?" %}
<br>
<br>
{% else %}

You have already chosen the group project this round. Please click the next button below to proceed to the next stage.
<br>
<br>
{% endif %}

    {% next_button %}

<br>
{% if subsession.round_number != 1 %}
{% if player_in_previous_round.treatment == player.treatment %}
<div style="font-size:30px"><b>Round history</b></div>
<div style="height:350px;width:1200px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
    {% include Constants.history_template %}
</div>
{% endif %}
{% endif %}
<br>
<br>
<br>
<br>
{% formfield player.contr_period label=""%}
{% formfield player.sub_period label = ""%}
{% formfield player.treatment label = ""%}

{% endblock %}

{% block scripts %}

    <script>
        document.getElementById("id_contr_period").style.visibility="hidden";
        document.getElementById("id_sub_period").style.visibility="hidden";
        document.getElementById("id_treatment").style.visibility="hidden";
        if (document.getElementById("id_sub_period").value > 0) {
            document.getElementById("cont_total").style.visibility="visible"
        };
    </script>

    <script>
        document.querySelector('button.otree-btn-next.btn.btn-primary').style.visibility="hidden";
        let el = document.querySelector('button.otree-btn-next.btn.btn-primary')
        setTimeout(() => {el.style.visibility = 'visible'}, 5000)
    </script>


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.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>
        var gaugeOptions = {
            chart: {
                type: 'solidgauge'
            },

            title: null,

            pane: {
                center: ['50%', '50%'],
                size: '100%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor:
                        Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },

            exporting: {
                enabled: false
            },

            tooltip: {
                enabled: false
            },

            // the value axis
            yAxis: {
                stops: [
                    [0.1, '#55BF3B'], // green
                ],
                lineWidth: 0,
                tickWidth: 0,
                minorTickInterval: null,
                tickAmount: 2,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }
            },

            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            }
        };

        var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Value'
                }
            },

            credits: {
                enabled: false
            },

            series: [{
                name: 'Signal',
                data: [{{ player.pub_good }}],
                dataLabels: {
                    format:
                        '<div style="text-align:center">' +
                        '<span style="font-size:25px">{y}</span><br/>' +
                        '<span style="font-size:12px;opacity:0.4">Group project signal value</span>' +
                        '</div>'
                },
                tooltip: {
                    valueSuffix: 'Signal Value'
                }
            }]

        }));
    </script>

{% endblock %}