{% extends 'statistics/structure.html.twig' %}

{% block pageContent %}

    <script src="{{ asset('assets/vendor/chart.js/dist/Chart.bundle.js') }}"></script>

{% include 'statistics/matches/matchInfo.html.twig' %}
{#<input type="hidden" id="fieldLineUp" value="{{ fieldLineUp }}">
<div id="soccerfield">

</div>#}
    <div class="match-data">
{% if not lineUps is empty %}
<div class="section tableSection mainLineUp">
    <h4>{{ '_LINEUP_PLAYERS_'|trans }}</h4>
    <div class="sectionContent teamsSection">
        {% for lineUp in lineUps %}
        <div class="teamLineUp">
            <table class="strippedTable">
                <tbody>
                    {% for player in lineUp.main %}
                    <tr>
                        <td>
                            <span class="playerNumber">{{ player.shirtNumber }}</span>
                        </td>
                        <td>
                            <span class="playerName"><a class="flag_24 right_24 {{ player.getFlag() }}_24_right" href="{{ player.getUrl() }}">{{ player.matchName }}</a></span>
                            {% if player.substituted is defined and player.substituted %}
                                <span class="substituted off"><span class="oi color-red" data-glyph="arrow-bottom"></span></span>
                            {% endif %}
                            {% if player.goal is defined and player.goal %}
                                <span class="goal"><img src="{{ asset('build/images') }}/G.png"> {{ player.goal }}'</span>
                            {% endif %}
                            {% if player.card is defined and player.card %}
                                <span class="card"><img src="{{ asset('build/images') }}/{{ player.card }}.png"></span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endfor %}
    </div>
</div>
    {% if showSubstitutes %}
    <div class="section tableSection substitutesLineUp">
        <h4>{{ '_BENCH_'|trans }}</h4>
        <div class="sectionContent teamsSection">
            {% for lineUp in lineUps %}
                <div class="teamLineUp">
                    <table class="strippedTable">
                        <tbody>
                        {% for player in lineUp.substitute %}
                            <tr>
                                <td>
                                    <span class="playerNumber">{{ player.shirtNumber }}</span>
                                </td>
                                <td>
                                    <span class="playerName"><a class="flag_24 right_24 {{ player.getFlag() }}_24_right" href="{{ player.getUrl() }}">{{ player.matchName }}</a></span>
                                    {% if player.substituted is defined and player.substituted %}
                                        <span class="substituted on"><span class="oi color-green" data-glyph="arrow-top"></span></span>
                                    {% endif %}
                                    {% if player.goal is defined and player.goal %}
                                        <span class="goal"><img src="{{ asset('build/images') }}/G.png"> {{ player.goal }}'</span>
                                    {% endif %}
                                    {% if player.card is defined and player.card %}
                                        <span class="card"><img src="{{ asset('build/images') }}/{{ player.card }}.png"></span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
{% endif %}

{% if stats is defined and not stats is empty %}
<div class="section tableSection substitutesLineUp">
    <h4>{{ '_STATS_'|trans }}</h4>
    <div class="sectionContent">
        <div class="table spacing">
            {% set i = 0 %}
            {% for label,stat in stats %}
                {% if i %}
                    {% set pct_0 = (stat[0] / (stat[0] + stat[1])) * 100 %}
                    {% set pct_1 = (stat[1] / (stat[0] + stat[1])) * 100 %}
                    {% set label_0 = stat[0] %}
                    {% set label_1 = stat[1] %}
                {% else %}
                    {% set pct_0 = stat[0] %}
                    {% set pct_1 = stat[1] %}
                    {% set label_0 = pct_0 %}
                    {% set label_1 = pct_1 %}
                {% endif %}
                <div class="table-row">
                    <div class="table-cell direction-ltr">
                        <span class="h-bar">
                            <span class="pct align-right" style="width: {{ pct_0 }}%;">{% if pct_0 >= 33.33 or i %}{{ label_0 }}{% if not i %}%{% endif %}{% else %}&nbsp;{% endif %}</span>
                            {% if pct_0 < 33.33 and (not i or not label_0) %}<span class="color-off-black">{{ label_0|default(0) }}{% if not i %}%{% endif %}</span>{% endif %}
                        </span>
                    </div>
                    <div class="table-cell align-center color-dark-grey">
                        <strong>{{ label }}</strong>
                    </div>
                    <div class="table-cell">
                        <span class="h-bar">
                            <span class="pct align-left" style="width: {{ pct_1 }}%;">{% if pct_1 >= 33.33 or i %}{{ label_1 }}{% if not i %}%{% endif %}{% else %}&nbsp;{% endif %}</span>
                            {% if pct_1 < 33.33 and (not i or not label_1) %}<span class="color-off-black">{{ label_1|default(0) }}{% if not i %}%{% endif %}</span>{% endif %}
                        </span>
                    </div>
                </div>
                {% set i = i + 1 %}
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{% if referees %}
    {% include 'statistics/matches/referees.html.twig' %}
{% endif %}
    </div>

    <script>
        var ctx = $("#statsChart").get(0).getContext("2d");

        var statistics = JSON.parse($("#statistics").val());
        var teamA = [];
        var teamB = [];
        var labels = [];
        $.each( statistics, function( key, value ) {
            teamA.push(value.teamA);
            teamB.push(value.teamB);
            labels.push(key);
        })

        var horizontalBarChartData = {
            labels: labels,
            datasets: [{
                label: $("#statistics").attr("data-teamA"),
                backgroundColor: "#36a2eb",
                borderColor: "#36a2eb",
                borderWidth: 1,
                data: teamA
            }, {
                label: $("#statistics").attr("data-teamB"),
                backgroundColor: "#ff0000",
                borderColor: "#ff0000",
                data: teamB
            }]

        };

        var stackedLine = new Chart(ctx, {
            type: 'horizontalBar',
            data: horizontalBarChartData,
            options: {
                // Elements options apply to all of the options unless overridden in a dataset
                // In this case, we are setting the border of each horizontal bar to be 2px wide
                elements: {
                    rectangle: {
                        borderWidth: 2,
                    }
                },
                responsive: true,
                legend: {display: false},
            }
        });

        var pieCtx = $("#possessionChart").get(0).getContext("2d");
        var possession = JSON.parse($("#possession").val());
        var possessionData = [];
        var teamB = [];
        var labels = [];
        $.each( possession, function( key, value ) {
            possessionData.push(value);
            labels.push(key);
        })

        var pieChartData = {
            labels: labels,
            datasets: [{
                borderWidth: 1,
                data: possessionData,
                backgroundColor: [
                    "#36a2eb",
                    "#ff0000"
                ]
            }]
        };


        var pie = new Chart(pieCtx, {
            type: 'pie',
            data: pieChartData,
            options: {
                responsive: true,
                animation: {
                    duration: 500,
                    easing: "easeOutQuart",
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        //ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.font= "12px Verdana";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset) {

                            for (var i = 0; i < dataset.data.length; i++) {
                                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                    total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                                    mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
                                    start_angle = model.startAngle,
                                    end_angle = model.endAngle,
                                    mid_angle = start_angle + (end_angle - start_angle)/2;

                                var x = mid_radius * Math.cos(mid_angle);
                                var y = mid_radius * Math.sin(mid_angle);

                                ctx.fillStyle = '#fff';
                            /*    if (i == 1){ // Darker text color for lighter background
                                    ctx.fillStyle = '#444';
                                }*/
                                var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
                                // ctx.fillText(dataset.data[i], model.x + x, model.y + y);
                                // Display percent in another line, line break doesn't work for fillText
                                ctx.fillText(percent, model.x + x, model.y + y + 15);
                            }
                        });
                    }
                }

            }
        });

    </script>
{#    <script type="text/javascript">
        var fieldLineUp = JSON.parse($("#fieldLineUp").val());
        var data = fieldLineUp;
        //Soccer players data. Could be set as a variable or loaded from server
/*
        var data = [
            {name: 'Gianluigi Buffon', position: 'C_GK'},
            {name: 'Leonardo Bonucci', position: 'LC_B'},
            {name: 'Giorgio Chiellini', position: 'C_B'},
            {name: 'Andrea Barzagli', position: 'RC_B'},
            {name: 'Daniele De Rossi', position: 'C_DM'},
            {name: 'Alessandro Florenzi', position: 'L_M'},
            {name: 'Emanuele Giaccherini', position: 'LC_M'},
            {name: 'Marco Parolo', position: 'RC_M'},
            {name: 'Antonio Candreva', position: 'R_M'},
            {name: 'Éder', position: 'LC_F'},
            {name: 'Graziano Pellè', position: 'RC_F'},
        ];
*/

     /*   var data = [];
        for(i = 0; i < fieldLineUp.length; i++){
            data.push({name: 'Gianluigi Buffon', position: 'C_GK'},
        }*/

        $(document).ready(function () {
            var options =  {
                field: {
                    width: "100%",
                    height: "456px",
                    img: '/apis/public/img/soccerfield_green.png',
                    autoReveal:true,
                    onReveal: function () {

                    }
                },
                players: {
                    font_size: 12,
                    reveal: true,
                    sim: false,
                    timeout: 200,
                    fadeTime: 200,
                    img: '/apis/public/img/soccer-player.png',
                    onReveal: function () {

                    }
                }
            };
            $("#soccerfield").soccerfield(data,options);
        });
    </script>#}

{% endblock %}