{% extends 'user/layout.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('chart') }}
{% endblock %}

{% block head %}
    {{ parent() }}
    {{ encore_entry_script_tags('chart') }}
{% endblock %}

{% block profile_content %}

    {% if years is empty %}
        {{ widgets.callout('warning', 'error.no_entries_found') }}
    {% endif %}

    <script type="text/javascript">
        function userProfileChartOptions() {
            return {
                maintainAspectRatio: true,
                responsive: true,
                legend: false,
                barPercentage: 0.5,
                categoryPercentage: 0.9,
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        },
                        gridLines: {
                            display: true,
                            color: '{{ kimai_context.chart.grid_color }}',
                            lineWidth: 1
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
                        }
                    }
                }
            };
        }
    </script>

    {% for year,yearStat in years %}

        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_title %}{{ year }}{% endblock %}
            {% block box_body %}

                <div class="chart">
                    <canvas id="userProfileChart{{ year }}" style="height: {{ kimai_context.chart.height }}px;"></canvas>
                </div>
                <script type="text/javascript">
                    document.addEventListener('kimai.initialized', function() {
                        var userProfileChartData{{ year }} = {
                            labels: moment.months(),
                            datasets: [
                                {
                                    label: '{{ year }}',
                                    backgroundColor: '{{ kimai_context.chart.background_color }}',
                                    borderColor: '{{ kimai_context.chart.border_color }}',
                                    data: [
                                        {% for month in yearStat.months %}
                                        {{ (month.totalDuration / 3600)|number_format(2, '.', '') }}
                                        {% if not loop.last %},{% endif %}
                                        {% endfor %}
                                    ],
                                    realData        : [
                                        {% for month in yearStat.months %}
                                        '{{ month.totalDuration|duration }}'
                                        {% if not loop.last %},{% endif %}
                                        {% endfor %}
                                    ]
                                }
                            ]
                        };

                        var userProfileChartCanvas{{ year }} = $("#userProfileChart{{ year }}").get(0).getContext("2d");

                        var userProfileChart{{ year }} = new Chart(
                            userProfileChartCanvas{{ year }}, {
                                type: 'bar',
                                data: userProfileChartData{{ year }},
                                options: userProfileChartOptions()
                            }
                        );
                    });
                </script>
            {% endblock %}
        {% endembed %}

    {% endfor %}

{% endblock %}