{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Loaders — WFBO{% endblock %}

{% block wfbo_title %}Loaders{% endblock %}

{% block wfbo_content %}

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
    ] %}
    <div class="period-filter-bar">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_loaders', {period: p.key}) }}"
               class="period-pill {% if period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    {# ── Approved deposits by loader ── #}
    <div class="card mb-4">
        <div class="card-body" style="padding: 0;">
            <table style="width:100%; border-collapse:collapse; font-size:0.9rem;"
                   data-testid="loaders-breakdown">
                <thead>
                    <tr style="background:#f8fafc; border-bottom:1px solid #e5e7eb;">
                        <th style="padding:12px 16px; text-align:left; font-weight:600; color:#374151;">
                            Name
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">{{ periodLabel }}</span>
                        </th>
                        <th style="padding:12px 16px; text-align:right; font-weight:600; color:#374151;">Approved Deposits</th>
                        <th style="padding:12px 16px; text-align:right; font-weight:600; color:#374151;">
                            Avg Approval Time
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">10am–10pm PHT</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in loaderRows %}
                        <tr style="border-bottom:1px solid #f3f4f6;" data-testid="loaders-row-{{ row.user.id }}">
                            <td style="padding:14px 16px; color:#374151;">{{ row.user.firstName }} {{ row.user.lastName }}</td>
                            <td style="padding:14px 16px; text-align:right; font-weight:600; color:#374151;">₱{{ row.total|number_format(2) }}</td>
                            <td style="padding:14px 16px; text-align:right; color:#374151;" data-testid="loaders-row-{{ row.user.id }}-avg-approval">{{ row.avgApprovalTimeLabel }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="3" style="padding:14px 16px; color:#9ca3af;">No loaders configured.</td>
                        </tr>
                    {% endfor %}
                    <tr style="border-bottom:1px solid #f3f4f6;" data-testid="loaders-row-unassigned">
                        <td style="padding:14px 16px; color:#374151;">Unassigned / Other</td>
                        <td style="padding:14px 16px; text-align:right; font-weight:600; color:#374151;">₱{{ unassigned|number_format(2) }}</td>
                        <td style="padding:14px 16px; text-align:right; color:#9ca3af;">—</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr style="border-top:2px solid #d1d5db; background:#f1f5f9;" data-testid="loaders-row-total">
                        <td style="padding:14px 16px; font-weight:700; color:#111827;">Total</td>
                        <td style="padding:14px 16px; text-align:right; font-weight:700; color:#16a34a;">₱{{ loaderTotal|number_format(2) }}</td>
                        <td style="padding:14px 16px; text-align:right; color:#9ca3af;">—</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

{% endblock %}