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

{% block title %}{{ player.firstName }} {{ player.lastName }}{% endblock %}

{% block agent_content %}

    <a href="{{ path('app_agent_player_monitor') }}" style="font-size:13px; color:#afafaf; text-decoration:none;" data-testid="agent-player-detail-back">← Back to Player Monitor</a>

    <h1 class="fw-bold mb-1 mt-2 text-white" data-testid="agent-player-detail-title">{{ player.firstName }} {{ player.lastName }}</h1>
    <p class="mb-4 font-mono-sm" style="color:#afafaf;">{{ player.mobileNumber }}</p>

    <div class="row g-3 mb-4">
        {% set cards = [
            {label: 'Cash In (all-time)',  value: '₱' ~ cashIn|number_format(2),  testid: 'stat-player-detail-cash-in'},
            {label: 'Cash Out (all-time)', value: '₱' ~ cashOut|number_format(2), testid: 'stat-player-detail-cash-out'},
            {label: 'Last Load',           value: lastLoadAt ? lastLoadAt|date('M d, Y') : 'Never', testid: 'stat-player-detail-last-load'},
            {label: 'Last Bet',            value: lastBet ? (lastBet.placedAt|date('M d') ~ ' · ' ~ lastBet.game) : '—', testid: 'stat-player-detail-last-bet'},
        ] %}
        {% for c in cards %}
            <div class="col-6 col-md-3">
                <div class="card-body--compact dark-card h-100">
                    <p class="stat-label--sm mb-2">{{ c.label }}</p>
                    <p class="stat-value--lg mb-0 text-white" style="font-size:18px;" data-testid="{{ c.testid }}">{{ c.value }}</p>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="d-flex gap-2 mb-3 flex-wrap">
        {% for t in [{label: 'Deposits (' ~ depositCount ~ ')', value: 'deposits'}, {label: 'Withdrawals (' ~ withdrawalCount ~ ')', value: 'withdrawals'}] %}
            <a href="{{ path('app_agent_player_detail', {id: player.id, tab: t.value}) }}"
               class="filter-pill {% if tab == t.value %}is-active{% endif %}"
               data-testid="agent-player-detail-tab-{{ t.value }}">{{ t.label }}</a>
        {% endfor %}
    </div>

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-player-detail-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">#</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">{{ tab == 'deposits' ? 'Ref. No.' : 'Bank' }}</th>
                        <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-player-detail-row-{{ row.id }}">
                        <td class="td-cell td-cell--id">{{ row.id }}</td>
                        <td class="td-cell td-cell--nowrap fw-semibold">
                            ₱{{ row.amount|number_format(2) }}
                            {% if tab == '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 tab == '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"><span class="font-mono-sm">{{ row.bankName }}</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">Pending</span>
                            {% elseif row.status == 'approved' %}<span class="badge-status badge-status--approved">Approved</span>
                            {% else %}<span class="badge-status badge-status--rejected">Rejected</span>{% endif %}
                        </td>
                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ row.reviewedAt ? row.reviewedAt|date('M d, Y H:i') : '—' }}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="td-empty">No {{ tab }} yet.</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-player-detail-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }} &middot; {{ total }} total</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}<a href="{{ path('app_agent_player_detail', {id: player.id, tab: tab, page: currentPage - 1}) }}" class="btn-page-prev">← Previous</a>{% endif %}
            {% if currentPage < totalPages %}<a href="{{ path('app_agent_player_detail', {id: player.id, tab: tab, page: currentPage + 1}) }}" class="btn-page-next">Next →</a>{% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}