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

{% block title %}Deposits & Withdrawals{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-requests-title">Downline Deposits &amp; Withdrawals</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        {{ total }} {{ type }} request{{ total != 1 ? 's' : '' }}{{ currentStatus ? ' (' ~ currentStatus ~ ')' : '' }}{% if search %} matching "{{ search }}"{% endif %}.
    </p>

    {# ── Type sub-tabs ── #}
    <div class="d-flex gap-2 mb-3 flex-wrap">
        {% set types = [{label: 'Deposits', value: 'deposits'}, {label: 'Withdrawals', value: 'withdrawals'}] %}
        {% for t in types %}
            <a href="{{ path('app_agent_requests', {type: t.value}) }}"
               class="filter-pill {% if type == t.value %}is-active{% endif %}"
               data-testid="agent-requests-tab-{{ t.value }}">{{ t.label }}</a>
        {% endfor %}
    </div>

    {# ── Status filter pills ── #}
    <div class="d-flex gap-2 mb-3 flex-wrap" data-testid="agent-requests-status-filters">
        {% set filters = [
            {label: 'All',      value: null},
            {label: 'Pending',  value: 'pending'},
            {label: 'Approved', value: 'approved'},
            {label: 'Rejected', value: 'rejected'},
        ] %}
        {% for f in filters %}
            <a href="{{ path('app_agent_requests', {type: type, status: f.value, search: search}|filter(v => v is not null and v != '')) }}"
               class="filter-pill {% if currentStatus == f.value %}is-active{% endif %}"
               data-testid="filter-{{ f.label|lower }}">
                {{ f.label }}
                {% if f.value == 'pending' %}
                    <span class="filter-count-badge {% if currentStatus == 'pending' %}filter-count-badge--active{% else %}filter-count-badge--default{% endif %}">
                        {{ pendingCount }}
                    </span>
                {% endif %}
            </a>
        {% endfor %}
    </div>

    <form method="GET" action="{{ path('app_agent_requests') }}" class="d-flex gap-2 mb-3" data-testid="agent-requests-search-form">
        <input type="hidden" name="type" value="{{ type }}">
        {% if currentStatus %}<input type="hidden" name="status" value="{{ currentStatus }}">{% endif %}
        <input type="search" name="search" value="{{ search }}"
               placeholder="Search by name or mobile…"
               class="form-control"
               style="max-width:320px; background:#1a1a1a; border:1px solid #2a2a2a; color:#ffffff; border-radius:8px; padding:8px 12px; font-size:13px;"
               data-testid="agent-requests-search-input">
        <button type="submit"
                style="padding:8px 18px; border-radius:8px; background:#ffffff; color:#000000; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;"
                data-testid="agent-requests-search-btn">
            Search
        </button>
        {% if search %}
            <a href="{{ path('app_agent_requests', {type: type, status: currentStatus}|filter(v => v is not null and v != '')) }}"
               style="padding:8px 14px; border-radius:8px; border:1px solid #2a2a2a; color:#afafaf; font-size:13px; text-decoration:none; display:inline-flex; align-items:center;"
               data-testid="agent-requests-search-clear">
                Clear
            </a>
        {% endif %}
    </form>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-requests-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">#</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Amount</th>
                        {% if type == 'deposits' %}
                            <th class="th-white">Ref. No.</th>
                        {% else %}
                            <th class="th-white">Bank</th>
                        {% endif %}
                        <th class="th-white">Submitted</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Reviewed</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    <tr class="table-row" data-testid="agent-request-row-{{ row.id }}">
                        <td class="td-cell td-cell--id">{{ row.id }}</td>
                        <td class="td-cell">
                            <p class="fw-medium mb-0">{{ row.user.firstName }} {{ row.user.lastName }}</p>
                            <p class="td-cell--muted mb-0 font-mono-sm">{{ row.user.mobileNumber }}</p>
                        </td>
                        <td class="td-cell td-cell--nowrap fw-semibold">
                            ₱{{ row.amount|number_format(2) }}
                            {% if type == 'deposits' and row.approvedAmount is not null %}
                                <p class="td-cell--muted mb-0" style="font-size:11px;">Approved: ₱{{ row.approvedAmount|number_format(2) }}</p>
                            {% endif %}
                        </td>
                        {% if type == 'deposits' %}
                            <td class="td-cell td-cell--muted td-cell--nowrap font-mono-sm">{{ row.transactionReference ?? '—' }}</td>
                        {% else %}
                            <td class="td-cell td-cell--muted">
                                {{ row.bankName }}<br>
                                <span class="font-mono-sm">{{ row.bankAccountName }} · {{ row.bankAccountNumber }}</span>
                            </td>
                        {% endif %}
                        <td class="td-cell td-cell--muted td-cell--nowrap">{{ row.createdAt|date('M d, Y H:i') }}</td>
                        <td class="td-cell">
                            {% if row.status == 'pending' %}
                                <span class="badge-status badge-status--pending" data-testid="badge-request-{{ row.id }}">Pending</span>
                            {% elseif row.status == 'approved' %}
                                <span class="badge-status badge-status--approved" data-testid="badge-request-{{ row.id }}">Approved</span>
                            {% else %}
                                <span class="badge-status badge-status--rejected" data-testid="badge-request-{{ row.id }}">Rejected</span>
                            {% endif %}
                            {% if row.reviewNote %}
                                <p class="td-cell--muted mb-0" style="font-size:11px;">{{ row.reviewNote }}</p>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {% if row.reviewedAt %}
                                {{ row.reviewedAt|date('M d, H:i') }}
                                {% if row.reviewedBy %}<br><span style="font-size:11px;">by {{ row.reviewedBy.firstName }} {{ row.reviewedBy.lastName }}</span>{% endif %}
                            {% else %}
                                —
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="td-empty">No {{ type }} requests from your downline{{ currentStatus ? ' with status "' ~ currentStatus ~ '"' : '' }}.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="agent-requests-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_agent_requests', {type: type, page: currentPage - 1, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}" class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_agent_requests', {type: type, page: currentPage + 1, status: currentStatus, search: search}|filter(v => v is not null and v != '')) }}" class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}