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

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

{% block wfbo_title %}Expenses{% endblock %}

{% block wfbo_content %}

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    {# ── 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_expenses', {period: p.key}) }}"
               class="period-pill {% if period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <p class="wfbo-card-desc mb-0">
                Business expenses recorded for {{ periodLabel }}.
            </p>
        </div>
        <a href="{{ path('app_wfbo_expense_new') }}"
           class="pill-link--primary"
           data-testid="btn-new-expense">
            + Add New
        </a>
    </div>

    <div class="table-card">
        <div class="card-body p-0">

            {% if expenses is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No expenses recorded for this period.
                </p>
            {% else %}
                <table class="w-100" data-testid="expenses-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Date</th>
                            <th class="th-white">Description</th>
                            <th class="th-white">Amount</th>
                            <th class="th-white">Receipt</th>
                            <th class="th-white">Recorded By</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for expense in expenses %}
                        <tr class="table-row" data-testid="expense-row-{{ expense.id }}">
                            <td class="td-cell td-cell--dark fw-semibold">{{ expense.expenseDate|date('M d, Y') }}</td>
                            <td class="td-cell">{{ expense.description }}</td>
                            <td class="td-cell">₱{{ expense.amount|number_format(2) }}</td>
                            <td class="td-cell">
                                {% if expense.attachmentUrl %}
                                    <a href="{{ expense.attachmentUrl }}" target="_blank" rel="noopener"
                                       class="pill-link--secondary"
                                       data-testid="btn-view-receipt-{{ expense.id }}">View</a>
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                            <td class="td-cell">{{ expense.recordedBy.firstName }} {{ expense.recordedBy.lastName }}</td>
                            <td class="td-cell">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_expense_edit', {id: expense.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-{{ expense.id }}">
                                        Edit
                                    </a>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_expense_delete', {id: expense.id}) }}"
                                          onsubmit="return confirm('Delete this expense?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_expense_delete_' ~ expense.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-{{ expense.id }}">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr class="table-row" data-testid="expense-row-total">
                            <td class="td-cell td-cell--dark fw-semibold">Total</td>
                            <td class="td-cell"></td>
                            <td class="td-cell fw-semibold">₱{{ expenseTotal|number_format(2) }}</td>
                            <td class="td-cell"></td>
                            <td class="td-cell"></td>
                            <td class="td-cell"></td>
                        </tr>
                    </tfoot>
                </table>
            {% endif %}

        </div>
    </div>

{% endblock %}