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

{% set monthsShort = deMonthsShort() %}

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

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

{% block body %}

<div class="report-page">

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

        <div class="report-header__right">
            <span class="report-account-name">
                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="report-account-name__icon">
                    <path d="M10 11a4 4 0 100-8 4 4 0 000 8zM3 17a7 7 0 0114 0" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
                </svg>
                {{ accountName }}
            </span>

            <nav class="account-tabs">
                <a href="{{ path('report_times') }}"
                   class="account-tab account-tab--active">
                    {{ '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">

            {# ── Toolbar ──────────────────────────────────────────────────────── #}
            <div class="report-toolbar">
                <div class="report-toolbar__left">
                    <span class="report-toolbar__action report-toolbar__action--disabled">
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="6.5" cy="6.5" r="4" stroke="currentColor" stroke-width="1.3"/>
                            <path d="M11 11l2.5 2.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                        </svg>
                        {{ 'app.report.toolbar_filter'|trans }}
                    </span>
                    <span class="report-toolbar__action report-toolbar__action--disabled">
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        {{ 'app.report.toolbar_edit'|trans }}
                    </span>
                </div>
            </div>

            {# ── Tabellen-Header ───────────────────────────────────────────────── #}
            <div class="report-table">
                <div class="report-table__head">
                    <div class="report-table__cell report-table__cell--date">
                        {{ 'app.report.col_date'|trans }}
                        <span class="report-table__sort-icon">▾</span>
                    </div>
                    <div class="report-table__cell report-table__cell--client">{{ 'app.report.col_client'|trans }}</div>
                    <div class="report-table__cell report-table__cell--project">{{ 'app.report.col_project'|trans }}</div>
                    <div class="report-table__cell report-table__cell--service">{{ 'app.report.col_service'|trans }}</div>
                    <div class="report-table__cell report-table__cell--user">{{ 'app.report.col_user'|trans }}</div>
                    <div class="report-table__cell report-table__cell--note">{{ 'app.report.col_note'|trans }}</div>
                    <div class="report-table__cell report-table__cell--duration">
                        {{ 'app.report.col_hours'|trans }}
                        <span class="report-table__summary">{{ totalDuration }}</span>
                    </div>
                    <div class="report-table__cell report-table__cell--revenue">
                        {{ 'app.report.col_revenue'|trans }}
                        <span class="report-table__summary">{{ totalRevenue|number_format(2, ',', '.') }} €</span>
                    </div>
                    <div class="report-table__cell report-table__cell--lock"></div>
                </div>

                {# ── Einträge ──────────────────────────────────────────────────── #}
                {% for entry in entries %}
                    {% set service    = entry.service %}
                    {% set billable   = (service is null or service.billable) %}
                    {% set hourlyRate = entry.project.client.hourlyRate %}
                    {% set weekDateStr = entry.date|date('Y-m-d') %}
                    {% set editUrl    = path('timetracking_week_date', {date: weekDateStr}) ~ '?editEntry=' ~ entry.id %}
                    {% set monthShort = monthsShort[entry.date|date('n') - 1] %}

                    <div class="report-table__row{% if entry.invoiced %} report-table__row--invoiced{% endif %}"
                         data-entry-id="{{ entry.id }}"
                         data-invoiced="{{ entry.invoiced ? 'true' : 'false' }}">

                        <div class="report-table__cell report-table__cell--date">
                            <a href="{{ editUrl }}" class="report-table__date-link">
                                {{ entry.date|date('j') }}. {{ monthShort }} {{ entry.date|date('y') }}
                            </a>
                        </div>

                        <div class="report-table__cell report-table__cell--client">
                            {{ entry.project.client.name }}
                        </div>

                        <div class="report-table__cell report-table__cell--project">
                            {{ entry.project.name }}
                        </div>

                        <div class="report-table__cell report-table__cell--service">
                            {{ service ? service.name : '' }}
                        </div>

                        <div class="report-table__cell report-table__cell--user">
                            {{ userMap[entry.userId] ?? ('User #' ~ entry.userId) }}
                        </div>

                        <div class="report-table__cell report-table__cell--note">
                            {{ entry.note }}
                        </div>

                        <div class="report-table__cell report-table__cell--duration">
                            {{ entry.durationFormatted }}
                        </div>

                        <div class="report-table__cell report-table__cell--revenue">
                            {% if billable and hourlyRate is not null %}
                                {{ (hourlyRate * entry.duration / 60)|number_format(2, ',', '.') }} €
                            {% endif %}
                        </div>

                        <div class="report-table__cell report-table__cell--lock">
                            <button class="report-lock{% if entry.invoiced %} report-lock--invoiced{% endif %}"
                                    data-action="toggle-invoiced"
                                    title="{{ entry.invoiced ? 'app.report.btn_unlock'|trans : 'app.report.btn_lock'|trans }}">
                                {% include '_atoms/icon-lock.html.twig' %}
                            </button>
                        </div>

                    </div>
                {% else %}
                    <div class="report-table__empty">{{ 'app.report.no_entries'|trans }}</div>
                {% endfor %}

                {# ── Pagination-Footer ─────────────────────────────────────────── #}
                <div class="report-pagination">
                    <div class="report-pagination__limits">
                        {{ 'app.report.show'|trans }}
                        {% for l in validLimits %}
                            {% if l == limit %}
                                <strong>{{ l }}</strong>
                            {% else %}
                                <a href="{{ path('report_times', {limit: l}) }}">{{ l }}</a>
                            {% endif %}
                        {% endfor %}
                        {{ 'app.report.of_total'|trans({'%count%': totalCount|number_format(0, ',', '.')}) }}
                    </div>
                    <span class="report-pagination__duration">{{ totalDuration }}</span>
                    <span class="report-pagination__revenue">{{ totalRevenue|number_format(2, ',', '.') }} €</span>
                    <span class="report-pagination__lock-spacer"></span>
                </div>

            </div>{# /.report-table #}

        </div>{# /.report-card #}
    </div>{# /.report-content #}

</div>{# /.report-page #}

{% endblock %}