{% 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.nothing_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];
                        }
                    }
                }
                {%- if is_granted('view_reporting') and (app.user.id == user.id or is_granted('view_other_timesheet')) -%}
                ,
                onClick: function(event, elements) {
                    var element = elements[0];
                    var month = this.data.datasets[0].monthData[element._index];
                    var formattedMonth = moment(month).format('{{ stat_date_format }}');
                    var reportUrl = '{{ path('report_user_month', {'user': user.id, 'date': 'XXXXX'})|raw }}'.replace('XXXXX', formattedMonth);
                    document.location = reportUrl;
                }
            {% endif %}
            };
        }
    </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 %}
                                    ],
                                    monthData: [
                                        {% for month in yearStat.months %}
                                        '{{ yearStat.year }}-{{ month.month|length == 1 ? '0'~ month.month : month.month }}-01'
                                        {% if not loop.last %},{% endif %}
                                        {% endfor %}
                                    ],
                                }
                            ]
                        };

                        var userProfileChart{{ year }} = new Chart(
                            $("#userProfileChart{{ year }}").get(0).getContext("2d"), {
                                type: 'bar',
                                data: userProfileChartData{{ year }},
                                options: userProfileChartOptions()
                            }
                        );
                    });
                </script>
            {% endblock %}
        {% endembed %}

    {% endfor %}

{% endblock %}
