{# templates/report/statistics.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}{{ 'app.report.statistics_page_title'|trans }}{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('statistics') }}
{% endblock %}

{% block body %}

<script>
    window.Statistics = {
        monthsShort: {{ deMonthsShort()|json_encode|raw }},
        weekdaysShort: {{ deWeekdaysShort()|json_encode|raw }},
        i18n: {
            billable:       {{ 'app.service.billable'|trans|json_encode|raw }},
            nonBillable:    {{ 'app.service.not_billable'|trans|json_encode|raw }},
            hours:          {{ 'app.statistics.hours'|trans|json_encode|raw }},
            revenue:        {{ 'app.statistics.revenue'|trans|json_encode|raw }},
            loading:        {{ 'app.statistics.loading'|trans|json_encode|raw }},
            errorLoad:      {{ 'app.statistics.error_load'|trans|json_encode|raw }},
            weekShort:      {{ 'app.date.week_short'|trans|json_encode|raw }},
            clients:        {{ 'app.statistics.clients'|trans|json_encode|raw }},
            projects:       {{ 'app.statistics.projects'|trans|json_encode|raw }},
            services:       {{ 'app.statistics.services'|trans|json_encode|raw }},
            rest:           {{ 'app.statistics.rest'|trans|json_encode|raw }},
            noService:      {{ 'app.statistics.no_service'|trans|json_encode|raw }},
        }
    };
</script>

<div class="report-page">

    <div class="report-header">
        <h1 class="report-header__title">{{ 'app.report.statistics_page_title'|trans }}</h1>

        <div class="report-header__right">
            <a href="{{ path('report_statistics') }}" class="report-stats-bubble report-stats-bubble--active">
                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="report-stats-bubble__icon">
                    <rect x="2" y="10" width="4" height="8" rx="1" stroke="currentColor" stroke-width="1.3"/>
                    <rect x="8" y="6" width="4" height="12" rx="1" stroke="currentColor" stroke-width="1.3"/>
                    <rect x="14" y="2" width="4" height="16" rx="1" stroke="currentColor" stroke-width="1.3"/>
                </svg>
                {{ 'app.report.tab_statistics'|trans }}
            </a>

            <nav class="account-tabs">
                <a href="{{ path('report_times') }}"
                   class="account-tab">
                    {{ 'app.report.tab_times'|trans }}
                </a>
                <span class="account-tab account-tab--disabled">
                    {{ 'app.report.tab_projects'|trans }}
                </span>
            </nav>
        </div>
    </div>

    <div class="report-content">
        <div class="report-card">

            <div class="statistics-toolbar">
                <h2 class="statistics-toolbar__title">{{ 'app.statistics.chart_title'|trans }}</h2>
                <div class="statistics-toolbar__controls">
                    {% if not isTracker and userList|length > 1 %}
                        <select class="statistics-range-select" id="stats-user-select">
                            <option value="">{{ accountName }}</option>
                            {% for user in userList %}
                                <option value="{{ user.id }}">{{ user.name }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                    <select class="statistics-range-select" id="stats-metric-select">
                        <option value="hours" selected>{{ 'app.statistics.hours'|trans }}</option>
                        <option value="revenue">{{ 'app.statistics.revenue'|trans }}</option>
                    </select>
                    <select class="statistics-range-select" id="stats-range-select">
                        <option value="12months" selected>{{ 'app.statistics.range_12months'|trans }}</option>
                        <option value="6months">{{ 'app.statistics.range_6months'|trans }}</option>
                        <option value="4weeks">{{ 'app.statistics.range_4weeks'|trans }}</option>
                    </select>
                </div>
            </div>

            <div class="statistics-chart-wrap" id="stats-chart-wrap">
                <canvas id="stats-chart"></canvas>
            </div>

            <div class="statistics-legend">
                <span class="statistics-legend__item statistics-legend__item--billable">
                    {{ 'app.service.billable'|trans }}
                </span>
                <span class="statistics-legend__item statistics-legend__item--non-billable">
                    {{ 'app.service.not_billable'|trans }}
                </span>
            </div>

        </div>

        <div class="statistics-donuts" id="stats-donuts">
            <div class="statistics-donut">
                <h3 class="statistics-donut__title">{{ 'app.statistics.clients'|trans }}</h3>
                <div class="statistics-donut__wrap">
                    <canvas id="donut-clients"></canvas>
                </div>
                <div class="statistics-donut__legend" id="donut-legend-clients"></div>
            </div>
            <div class="statistics-donut">
                <h3 class="statistics-donut__title">{{ 'app.statistics.projects'|trans }}</h3>
                <div class="statistics-donut__wrap">
                    <canvas id="donut-projects"></canvas>
                </div>
                <div class="statistics-donut__legend" id="donut-legend-projects"></div>
            </div>
            <div class="statistics-donut">
                <h3 class="statistics-donut__title">{{ 'app.statistics.services'|trans }}</h3>
                <div class="statistics-donut__wrap">
                    <canvas id="donut-services"></canvas>
                </div>
                <div class="statistics-donut__legend" id="donut-legend-services"></div>
            </div>
        </div>

    </div>

</div>

{% endblock %}