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

{% block title %}{{ subject.firstName }} {{ subject.lastName }} — Transactions{% endblock %}
{% block wfbo_title %}User Transactions{% endblock %}

{% block wfbo_content %}

<style>
@media (max-width: 480px) {
    .stack-table thead { display: none; }
    .stack-table tbody tr {
        display: block;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
    }
    .stack-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        text-align: left !important;
    }
    .stack-table tbody td:last-child { border-bottom: none !important; }
    .stack-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 11px;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-right: 10px;
    }
    .stack-table tbody td p { margin: 0; }
}
/* ── Family tree styles ── */
.ft-tree { display: flex; flex-direction: column; align-items: center; padding: 20px 0 8px; }
.ft-node { display: flex; flex-direction: column; align-items: center; }
.ft-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 24px; display: flex; flex-direction: column; align-items: center;
    gap: 4px; min-width: 200px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ft-card--master { background: #1a1a2e; border-color: #2d2d4a; }
.ft-card--agent  { background: #f0f4ff; border-color: #dde4ff; }
.ft-card--current { background: #f0fdf4; border-color: #bbf7d0; }
.ft-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 10px; border-radius: 6px;
}
.ft-badge--master { background: #4f46e5; color: #fff; }
.ft-badge--agent  { background: #d1fae5; color: #065f46; }
.ft-badge--player { background: #e5e7eb; color: #374151; }
.ft-name { font-weight: 600; font-size: 14px; color: #111827; }
.ft-name--light { color: #e5e7eb; }
.ft-current { font-size: 10px; color: #6b7280; margin-top: 2px; }
.ft-line-v { width: 2px; height: 28px; background: #d1d5db; }
.collapse-chevron { transition: transform .2s; }
.collapse-chevron.is-open { transform: rotate(180deg); }
</style>

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

    {# ── User header ── #}
    <div class="d-flex align-items-start justify-content-between gap-3 mb-4 flex-wrap">
        <div>
            <a href="{{ path('app_wfbo_users') }}"
               class="back-link"
               data-testid="btn-back-to-users">
                ← Back to Users
            </a>
            <div class="d-flex align-items-center gap-3">
                <div class="avatar--lg">
                    {{ subject.firstName|first|upper }}{{ subject.lastName|first|upper }}
                </div>
                <div>
                    <p class="user-name-heading" style="color: #000000;" data-testid="user-transactions-name">
                        {{ subject.firstName }} {{ subject.lastName }}
                        {% if subject.isHouseAgent %}
                            <span class="badge-role" style="background:#0f766e;color:#ffffff;font-size:11px;vertical-align:middle;" data-testid="badge-house-agent">House Agent</span>
                        {% endif %}
                    </p>
                    <p class="pagination-info mb-0">{{ subject.userIdentifier }}</p>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center gap-3">
            {# Wallet balance badge #}
            <div class="wallet-badge">
                <p class="wallet-badge__label">Wallet Balance</p>
                <p class="wallet-badge__amount" data-testid="user-wallet-balance">
                    ₱{{ subject.walletBalance|number_format(2) }}
                </p>
            </div>

            {# Actions dropdown #}
            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_ADMIN') %}
            {% set isPlainUser = 'ROLE_MASTER_AGENT' not in subject.roles and 'ROLE_AGENT' not in subject.roles and 'ROLE_ADMIN' not in subject.roles and 'ROLE_SUPER_ADMIN' not in subject.roles and 'ROLE_FINANCE' not in subject.roles and 'ROLE_OPERATIONS' not in subject.roles and 'ROLE_AUDITOR' not in subject.roles %}

            {# Hidden forms — triggered by dropdown items #}
            <form id="form-suspend-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'suspend'}) }}" data-testid="form-suspend-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-unsuspend-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'unsuspend'}) }}" data-testid="form-unsuspend-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-hold-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'hold'}) }}" data-testid="form-hold-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-unhold-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'unhold'}) }}" data-testid="form-unhold-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-promote-agent-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'promote-agent'}) }}" data-testid="form-promote-agent-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-demote-agent-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'demote-agent'}) }}" data-testid="form-demote-agent-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% if 'ROLE_ADMIN' not in subject.roles and 'ROLE_SUPER_ADMIN' not in subject.roles %}
            <form id="form-promote-admin-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'promote-admin'}) }}" data-testid="form-promote-admin-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% else %}
            <form id="form-demote-admin-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'demote-admin'}) }}" data-testid="form-demote-admin-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% endif %}
            {% if 'ROLE_FINANCE' not in subject.roles %}
            <form id="form-promote-finance-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'promote-finance'}) }}" data-testid="form-promote-finance-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% else %}
            <form id="form-demote-finance-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'demote-finance'}) }}" data-testid="form-demote-finance-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% endif %}
            {% if 'ROLE_OPERATIONS' not in subject.roles %}
            <form id="form-promote-operations-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'promote-operations'}) }}" data-testid="form-promote-operations-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% else %}
            <form id="form-demote-operations-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'demote-operations'}) }}" data-testid="form-demote-operations-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% endif %}
            {% if 'ROLE_AUDITOR' not in subject.roles %}
            <form id="form-promote-auditor-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'promote-auditor'}) }}" data-testid="form-promote-auditor-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% else %}
            <form id="form-demote-auditor-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: subject.id, type: 'demote-auditor'}) }}" data-testid="form-demote-auditor-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            {% endif %}
            <form id="form-reset-password-{{ subject.id }}" method="post"
                  action="{{ path('app_wfbo_reset_password', {id: subject.id}) }}"
                  data-testid="form-reset-password-{{ subject.id }}"
                  style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_reset_password_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
            </form>
            <form id="form-house-win-rate-{{ subject.id }}" method="post"
                  action="{{ path('app_wfbo_user_house_win_rate', {id: subject.id}) }}"
                  data-testid="form-house-win-rate-{{ subject.id }}"
                  style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_house_win_rate_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
                <input type="hidden" name="house_win_rate" id="house-win-rate-input-{{ subject.id }}" value="">
            </form>

            {% if is_granted('ROLE_SUPER_ADMIN') %}
            <form id="form-enable-test-account-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_test_account', {id: subject.id}) }}" data-testid="form-enable-test-account-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_test_account_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
                <input type="hidden" name="enabled" value="1">
            </form>
            <form id="form-disable-test-account-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_test_account', {id: subject.id}) }}" data-testid="form-disable-test-account-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_test_account_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
                <input type="hidden" name="enabled" value="0">
            </form>
            <form id="form-enable-house-agent-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_house_agent', {id: subject.id}) }}" data-testid="form-enable-house-agent-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_house_agent_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
                <input type="hidden" name="enabled" value="1">
            </form>
            <form id="form-disable-house-agent-{{ subject.id }}" method="post" action="{{ path('app_wfbo_user_house_agent', {id: subject.id}) }}" data-testid="form-disable-house-agent-{{ subject.id }}" style="display:none;" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_house_agent_' ~ subject.id) }}">
                <input type="hidden" name="page" value="1">
                <input type="hidden" name="enabled" value="0">
            </form>
            {% endif %}

            {# Dropdown trigger #}
            <div class="dropdown">
                <button class="btn btn-actions-trigger dropdown-toggle"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-testid="btn-actions">
                    Actions
                </button>
                <ul class="dropdown-menu dropdown-menu-end dropdown-menu--light" style="right:0;left:auto;max-width:90vw;" data-testid="actions-menu">

                    {% if is_granted('ROLE_ADMIN') %}
                    {# ── Status ── #}
                    {% if not subject.isSuspended %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-suspend-{{ subject.id }}', 'Suspend {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }}? They will lose access to the platform.')"
                                    data-testid="btn-suspend"
                                    class="dropdown-item--danger">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                Suspend User
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-unsuspend-{{ subject.id }}').submit()"
                                    data-testid="btn-unsuspend"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                Unsuspend User
                            </button>
                        </li>
                    {% endif %}

                    {% if not subject.isOnHold %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-hold-{{ subject.id }}', 'Hold {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }}? They will not be able to place bets or view the YouTube stream.')"
                                    data-testid="btn-hold"
                                    class="dropdown-item--warning">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                Hold User
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-unhold-{{ subject.id }}').submit()"
                                    data-testid="btn-unhold"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                Unhold User
                            </button>
                        </li>
                    {% endif %}

                    <li><hr class="dropdown-divider dropdown-divider--light"></li>

                    {# ── Agent role ── #}
                    {% if 'ROLE_MASTER_AGENT' in subject.roles %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-demote-agent-{{ subject.id }}').submit()"
                                    data-testid="btn-demote-agent"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                Remove Agent
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-promote-agent-{{ subject.id }}', 'Set {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as Master Agent?')"
                                    data-testid="btn-promote-agent"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
                                Set as Master Agent
                            </button>
                        </li>
                    {% endif %}

                    {# ── Admin role ── #}
                    {% if 'ROLE_ADMIN' in subject.roles or 'ROLE_SUPER_ADMIN' in subject.roles %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-demote-admin-{{ subject.id }}').submit()"
                                    data-testid="btn-demote-admin"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                Remove Admin
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-promote-admin-{{ subject.id }}', 'Set {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as Admin?')"
                                    data-testid="btn-promote-admin"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                Set as Admin
                            </button>
                        </li>
                    {% endif %}

                    {# ── Finance role ── #}
                    {% if 'ROLE_FINANCE' in subject.roles %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-demote-finance-{{ subject.id }}').submit()"
                                    data-testid="btn-demote-finance"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                Remove Finance
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-promote-finance-{{ subject.id }}', 'Set {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as Finance?')"
                                    data-testid="btn-promote-finance"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                                Set as Finance
                            </button>
                        </li>
                    {% endif %}

                    {# ── Operations role ── #}
                    {% if 'ROLE_OPERATIONS' in subject.roles %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-demote-operations-{{ subject.id }}').submit()"
                                    data-testid="btn-demote-operations"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                Remove Operations
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-promote-operations-{{ subject.id }}', 'Set {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as Operations?')"
                                    data-testid="btn-promote-operations"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                                Set as Operations
                            </button>
                        </li>
                    {% endif %}

                    {# ── Auditor role (system adjustments) ── #}
                    {% if 'ROLE_AUDITOR' in subject.roles %}
                        <li>
                            <button type="button"
                                    onclick="document.getElementById('form-demote-auditor-{{ subject.id }}').submit()"
                                    data-testid="btn-demote-auditor"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                Remove Auditor
                            </button>
                        </li>
                    {% else %}
                        <li>
                            <button type="button"
                                    onclick="openConfirmModal('form-promote-auditor-{{ subject.id }}', 'Set {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as Auditor? They will be able to make system wallet adjustments.')"
                                    data-testid="btn-promote-auditor"
                                    class="dropdown-item--action">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4"/><path d="M12 3a9 9 0 1 0 9 9"/></svg>
                                Set as Auditor
                            </button>
                        </li>
                    {% endif %}

                    {# ── Test Account (super admin only) ── #}
                    {% if is_granted('ROLE_SUPER_ADMIN') %}
                        <li><hr class="dropdown-divider dropdown-divider--light"></li>
                        {% if subject.isTestAccount %}
                            <li>
                                <button type="button"
                                        onclick="document.getElementById('form-disable-test-account-{{ subject.id }}').submit()"
                                        data-testid="btn-disable-test-account"
                                        class="dropdown-item--action">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                    Remove Test Account
                                </button>
                            </li>
                        {% else %}
                            <li>
                                <button type="button"
                                        onclick="openConfirmModal('form-enable-test-account-{{ subject.id }}', 'Mark {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as a Test Account? Their activity will be excluded from reports and dashboards.')"
                                        data-testid="btn-enable-test-account"
                                        class="dropdown-item--action">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                                    Mark as Test Account
                                </button>
                            </li>
                        {% endif %}
                        {% if subject.isHouseAgent %}
                            <li>
                                <button type="button"
                                        onclick="document.getElementById('form-disable-house-agent-{{ subject.id }}').submit()"
                                        data-testid="btn-disable-house-agent"
                                        class="dropdown-item--action">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                                    Remove House Agent
                                </button>
                            </li>
                        {% else %}
                            <li>
                                <button type="button"
                                        onclick="openConfirmModal('form-enable-house-agent-{{ subject.id }}', 'Mark {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }} as a House Agent? Commission it earns is treated as site revenue and its wallet is kept out of the agent-liability breakdown.')"
                                        data-testid="btn-enable-house-agent"
                                        class="dropdown-item--action">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                                    Mark as House Agent
                                </button>
                            </li>
                        {% endif %}
                    {% endif %}

                    {# ── Change Agent (plain users only) ── #}
                    {% if isPlainUser %}
                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                    <li>
                        <button type="button"
                                onclick="openChangeAgentModal({{ subject.id }}, {{ subject.referredBy ? subject.referredBy.id : 'null' }}, '{{ csrf_token('wfbo_change_agent_' ~ subject.id) }}', '{{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }}')"
                                data-testid="btn-change-agent"
                                class="dropdown-item--action">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                            Change Agent
                        </button>
                    </li>
                    {% endif %}

                    {% if is_granted('ROLE_ADMIN') %}
                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                    <li>
                        <button type="button"
                                onclick="openHouseWinRateModal({{ subject.id }}, {{ subject.houseWinRate ?? '-1' }}, {{ subject.streakSofteningEnabled ? 'true' : 'false' }}, '{{ csrf_token('wfbo_user_house_win_rate_' ~ subject.id) }}', '{{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }}')"
                                data-testid="btn-house-win-rate"
                                class="dropdown-item--action">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                            Set Player Loss Rate
                        </button>
                    </li>
                    {% endif %}

                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                    <li>
                        <button type="button"
                                onclick="openConfirmModal('form-reset-password-{{ subject.id }}', 'Reset password for {{ subject.firstName|e('js') }} {{ subject.lastName|e('js') }}? A new password will be generated.')"
                                data-testid="btn-reset-password"
                                class="dropdown-item--danger">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                            Reset Password
                        </button>
                    </li>
                    {% endif %}

                </ul>
            </div>
            {% endif %}
        </div>
    </div>

    {# ── Upline family tree ── #}
    {% if treeUplineChain|length > 0 or isAgent %}
    <div class="card mb-4" style="border: 1px solid #e5e7eb;">
        <div class="card-body card-body--compact">
            <p class="stat-label--sm fw-semibold mb-3">Agents</p>

            <div class="ft-tree">
                {% for uplineUser in treeUplineChain %}
                {% set uIsMaster = 'ROLE_MASTER_AGENT' in uplineUser.roles %}
                {% set uIsAgent = 'ROLE_AGENT' in uplineUser.roles %}
                <div class="ft-node">
                    <div class="ft-card {{ uIsMaster ? 'ft-card--master' : 'ft-card--agent' }}">
                        {% if uIsMaster %}
                            <span class="ft-badge ft-badge--master">Master Agent</span>
                        {% elseif uIsAgent %}
                            <span class="ft-badge ft-badge--agent">Agent</span>
                        {% endif %}
                        <div style="display:flex; align-items:center; gap:6px;">
                            <span class="ft-name {{ uIsMaster ? 'ft-name--light' : '' }}">
                                {{ uplineUser.firstName }} {{ uplineUser.lastName }}
                            </span>
                            <button type="button"
                                    class="btn-copy"
                                    data-controller="copy"
                                    data-copy-text-value="{{ uplineUser.firstName }} {{ uplineUser.lastName }}"
                                    data-action="copy#copy"
                                    aria-label="Copy name"
                                    data-testid="btn-copy-upline-{{ uplineUser.id }}">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="ft-line-v"></div>
                {% endfor %}

                {% set subjectIsMaster = 'ROLE_MASTER_AGENT' in subject.roles %}
                {% set subjectIsAgent = 'ROLE_AGENT' in subject.roles %}
                <div class="ft-node">
                    <div class="ft-card ft-card--current">
                        {% if subjectIsMaster %}
                            <span class="ft-badge ft-badge--master">Master Agent</span>
                        {% elseif subjectIsAgent %}
                            <span class="ft-badge ft-badge--agent">Agent</span>
                        {% else %}
                            <span class="ft-badge ft-badge--player">Player</span>
                        {% endif %}
                        <span class="ft-name">{{ subject.firstName }} {{ subject.lastName }}</span>
                        <span class="ft-current">viewing</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    {% endif %}

    {# ── System Adjustment form (ROLE_AUDITOR only) ── #}
    {% if is_granted('ROLE_AUDITOR') %}
    <div class="card mb-4" style="border: 1px solid #e5e7eb;">
        <div class="card-body card-body--compact">
            <p class="stat-label--sm fw-semibold mb-1">System Adjustment</p>
            <p class="text-muted mb-2" style="font-size:0.75rem;">Auditor only — credit or debit this player's wallet.</p>
            <form method="post"
                  action="{{ path('app_wfbo_wallet_adjustment', {id: subject.id}) }}"
                  data-testid="wallet-adjustment-form">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_wallet_adjustment_' ~ subject.id) }}">
                <div class="d-flex gap-2 align-items-end flex-wrap">
                    <div>
                        <label class="form-label form-label--sm" for="adj-amount">
                            Amount
                            <span class="text-muted" style="font-size:0.75rem;">(negative = debit)</span>
                        </label>
                        <input type="number"
                               id="adj-amount"
                               name="amount"
                               step="0.01"
                               placeholder="e.g. 500.00 or -200.00"
                               class="form-control form-control-sm"
                               style="width: 190px; background-color: #ffffff; border: 1px solid #000000; color: #000000;"
                               required
                               data-testid="adj-amount">
                    </div>
                    <div style="flex: 1; min-width: 200px;">
                        <label class="form-label form-label--sm" for="adj-reason">Reason</label>
                        <input type="text"
                               id="adj-reason"
                               name="reason"
                               maxlength="500"
                               placeholder="Required"
                               class="form-control form-control-sm"
                               style="background-color: #ffffff; border: 1px solid #000000; color: #000000;"
                               required
                               data-testid="adj-reason">
                    </div>
                    <button type="submit"
                            class="btn btn-sm btn-primary"
                            data-testid="adj-submit">
                        Apply
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {# ── Period filter (scopes the stat cards below only, not the tables) ── #}
    {% set periodPresets = [
        {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'},
        {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in periodPresets %}
            <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: currentType, page: currentPage, period: p.key}) }}"
               class="period-pill {% if period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}

        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: currentType, page: currentPage, period: period}) }}"
           class="btn btn-sm btn-outline-secondary ms-auto"
           data-testid="btn-transactions-refresh">
            ↻ Refresh
        </a>
    </div>

    {# ── Stats row ── #}
    {% set colClass = 'col-12 col-sm-4' %}
    <div class="row g-3 mb-4">
        <div class="{{ colClass }}">
            <div class="card h-100" style="background-color: #ffffff; border: 1px solid #d1fae5;">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Deposited</p>
                    <p class="stat-value--md stat-value--green" data-testid="stat-total-deposited">
                        ₱{{ totalDeposited|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Bet Amount</p>
                    <p class="stat-value--md" data-testid="stat-total-bet-amount">
                        ₱{{ totalBetAmount|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Win Amount</p>
                    <p class="stat-value--md stat-value--green" data-testid="stat-total-win-amount">
                        ₱{{ totalWinAmount|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        {% if isAgent %}
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Commission</p>
                    <p class="stat-value--md stat-value--green" data-testid="stat-total-commission-amount">
                        ₱{{ totalCommissionAmount|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Direct Referrals</p>
                    <p class="stat-value--md" data-testid="stat-direct-referrals">
                        {{ directReferralCount }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Players Logged In · {{ periodLabel }}</p>
                    <p class="stat-value--md" data-testid="stat-players-logged-in">
                        {{ playersLoggedIn }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Active Players · {{ periodLabel }}</p>
                    <p class="stat-value--md" data-testid="stat-active-players">
                        {{ activePlayers }}
                    </p>
                </div>
            </div>
        </div>
        {% if 'ROLE_MASTER_AGENT' in subject.roles %}
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Referrals from Agents</p>
                    <p class="stat-value--md" data-testid="stat-sub-agent-referrals">
                        {{ subAgentReferralCount }}
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Player Bet Amount</p>
                    <p class="stat-value--md" data-testid="stat-total-player-bet-amount">
                        ₱{{ totalPlayerBetAmount|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Player Win Amount</p>
                    <p class="stat-value--md stat-value--green" data-testid="stat-total-player-win-amount">
                        ₱{{ totalPlayerWinAmount|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100 card--pending-neutral">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Win Rate</p>
                    <p class="stat-value--md" data-testid="stat-total-player-win-rate">
                        {{ totalPlayerWinRate|number_format(2) }}%
                    </p>
                </div>
            </div>
        </div>
        <div class="{{ colClass }}">
            <div class="card h-100" style="background-color: #ffffff; border: 1px solid #d1fae5;">
                <div class="card-body card-body--compact">
                    <p class="stat-label--sm">Total Revenue Collected</p>
                    <p class="stat-value--md stat-value--green" data-testid="stat-total-revenue-collected">
                        ₱{{ totalPlayerRevenue|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    {# ── Type tabs ── #}
    <div class="d-flex gap-2 mb-3 tabs-border-bottom">
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'deposits'}) }}"
           class="tab-link--block {% if currentType == 'deposits' %}is-active{% endif %}">
            Deposits <span class="tab-count">({{ depositCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'withdrawals'}) }}"
           class="tab-link--block {% if currentType == 'withdrawals' %}is-active{% endif %}">
            Withdrawals <span class="tab-count">({{ withdrawalCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'bets'}) }}"
           class="tab-link--block {% if currentType == 'bets' %}is-active{% endif %}">
            Bets <span class="tab-count">({{ betCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'adjustments'}) }}"
           class="tab-link--block {% if currentType == 'adjustments' %}is-active{% endif %}"
           data-testid="tab-adjustments">
            Adjustments <span class="tab-count">({{ adjustmentCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'activity'}) }}"
           class="tab-link--block {% if currentType == 'activity' %}is-active{% endif %}"
           data-testid="tab-activity">
            Activity <span class="tab-count">({{ activityCount }})</span>
        </a>
        {% if isAgent %}
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'commissions'}) }}"
           class="tab-link--block {% if currentType == 'commissions' %}is-active{% endif %}"
           data-testid="tab-commissions">
            Commissions <span class="tab-count">({{ commissionCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'players'}) }}"
           class="tab-link--block {% if currentType == 'players' %}is-active{% endif %}"
           data-testid="tab-players">
            Players <span class="tab-count">({{ playerCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'agents'}) }}"
           class="tab-link--block {% if currentType == 'agents' %}is-active{% endif %}"
           data-testid="tab-agents">
            Agents <span class="tab-count">({{ agentCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'playerbets'}) }}"
           class="tab-link--block {% if currentType == 'playerbets' %}is-active{% endif %}"
           data-testid="tab-player-bets">
            Player Bets <span class="tab-count">({{ playerBetCount }})</span>
        </a>
        <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'commissions-by-race'}) }}"
           class="tab-link--block {% if currentType == 'commissions-by-race' %}is-active{% endif %}"
           data-testid="tab-commissions-by-race">
            By Event / Race <span class="tab-count">({{ commEventCount }})</span>
        </a>
        {% endif %}
    </div>

        {# ── Unified transactions table (deposits/withdrawals/adjustments) ── #}
    {% if currentType in ['deposits', 'withdrawals', 'adjustments'] %}
    <div class="table-card--tabbed" data-testid="user-transactions-table-card">
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-transactions-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Date</th>


                        <th class="th-gray">Type</th>
                        <th class="th-gray">Description</th>
                        <th class="th-gray th-gray--right">Amount</th>
                        <th class="th-gray th-gray--right">Balance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr class="table-row" data-testid="transaction-row-{{ tx.id }}">
                        <td class="td-cell td-cell--nowrap">
                            <p class="date-primary td-cell--dark">{{ tx.createdAt|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ tx.createdAt|date('h:i A') }}</p>
                        </td>
                        <td class="td-cell">
                            {% if tx.type == 'deposit' %}
                                <span class="badge-status badge-status--approved">Deposit</span>
                            {% elseif tx.type == 'withdrawal' %}
                                <span class="badge-status badge-status--pending">Withdrawal</span>
                            {% elseif tx.type == 'bet' %}
                                <span class="badge-status" style="background:#fef3c7; color:#92400e;">Bet</span>
                            {% elseif tx.type == 'win' %}
                                <span class="badge-status badge-status--approved">Win</span>
                            {% elseif tx.type == 'adjustment' %}
                                <span class="badge-status" style="background:#e0e7ff; color:#3730a3;">Adjustment</span>
                            {% elseif tx.type == 'refund' %}
                                <span class="badge-status badge-status--approved">Refund</span>
                            {% elseif tx.type == 'commission' %}
                                <span class="badge-status" style="background:#dbeafe; color:#1d4ed8;">Commission</span>
                            {% else %}
                                <span class="badge-status">{{ tx.type|capitalize }}</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--dark" style="max-width: 280px;">
                            <span class="text-truncate-cell">{{ tx.description ?? '—' }}</span>
                        </td>
                        <td class="td-cell td-cell--nowrap text-end">
                            {% set absAmount = tx.absoluteAmount %}
                            {% if tx.amount > 0 %}
                                <p class="amount-approved">+₱{{ absAmount|number_format(2) }}</p>
                            {% else %}
                                <p class="amount-rejected">-₱{{ absAmount|number_format(2) }}</p>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--dark text-end fw-semibold">
                            ₱{{ tx.balanceAfter|number_format(2) }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty td-empty--lg">
                            No {{ currentType }} found for this user.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Bets table (real per-game bet entities via WfboController::betUnion) ── #}
    {% if currentType == 'bets' %}
    <form method="GET" action="{{ path('app_wfbo_user_transactions', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3" data-testid="bets-search-form">
        <input type="hidden" name="type" value="bets">
        <div style="position:relative; max-width:100%; flex:0 1 260px; min-width:160px;">
            <svg style="position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:#9ca3af;"
                 width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
            <input type="search" name="search" value="{{ currentSearch }}"
                   data-testid="bets-search-input"
                   placeholder="Search by Ref #…"
                   style="padding:8px 12px 8px 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff; width:100%; outline:none;"
                   onfocus="this.style.borderColor='#111'" onblur="this.style.borderColor='#e5e7eb'">
        </div>
        <button type="submit"
                style="padding:8px 16px; border-radius:8px; background:#111827; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;">
            Search
        </button>
        {% if currentSearch %}
            <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'bets'}) }}"
               style="padding:8px 14px; border-radius:8px; border:1px solid #e5e7eb; color:#6b7280; font-size:13px; text-decoration:none; white-space:nowrap;">
                Clear
            </a>
            <span class="pagination-info" style="margin:0;">{{ total }} match{{ total != 1 ? 'es' : '' }} for <strong>"{{ currentSearch }}"</strong></span>
        {% endif %}
    </form>

    <form method="GET" action="{{ path('app_wfbo_user_lr_bets_export', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3"
          data-testid="lr-bets-export-form">
        <label style="font-size:13px; color:#374151; font-weight:600;">Export Live Racing bets for</label>
        <input type="date" name="date" value="{{ 'now'|date('Y-m-d') }}" required
               data-testid="lr-bets-export-date"
               style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
        <button type="submit" data-testid="btn-export-lr-bets"
                style="padding:8px 16px; border-radius:8px; background:#7c3aed; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;">
            &#8595; Export PDF
        </button>
    </form>

    <div class="table-card--tabbed" data-testid="user-bets-table-card">
        <div class="table-scroll">
            <table class="data-table stack-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-bets-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Date</th>
                        <th class="th-gray">Game</th>
                        <th class="th-gray">Ref #</th>
                        <th class="th-gray">Detail</th>
                        <th class="th-gray th-gray--right">Bet</th>
                        <th class="th-gray th-gray--right">Payout</th>
                        <th class="th-gray">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    {% for bet in bets %}
                    <tr class="table-row" data-testid="bet-row-{{ bet.game }}-{{ bet.id }}">
                        {{ _self.bet_cells(bet, lrBetSummaries) }}
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="td-empty td-empty--lg">No bets found for this user.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# Shared per-game bet cells (Date/Game/Ref/Detail/Bet/Payout/Outcome), used by
       the Bets panel and the Player Bets panel. #}
    {% macro bet_cells(bet, lrBetSummaries) %}
                        <td data-label="Date" class="td-cell td-cell--nowrap">
                            <p class="date-primary td-cell--dark">{{ bet.created_at|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ bet.created_at|date('h:i A') }}</p>
                        </td>

                        <td data-label="Game" class="td-cell" style="white-space: nowrap;">
                            {% if bet.game == 'vk' %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Video Karera</span>
                            {% elseif bet.game == 'high-low' %}
                                <span class="badge-status" style="background:#14532d;color:#4ade80;border-color:#166534;">Pataasan</span>
                            {% elseif bet.game == 'mines' %}
                                <span class="badge-status" style="background:#312e81;color:#c7d2fe;border-color:#4338ca;">Mines</span>
                            {% elseif bet.game == 'fk' %}
                                <span class="badge-status" style="background:#4c1d95;color:#ddd6fe;border-color:#5b21b6;">Fruit King</span>
                            {% elseif bet.game == 'ezdos' %}
                                <span class="badge-status" style="background:#0c4a6e;color:#7dd3fc;border-color:#0369a1;">EZDOS</span>
                            {% elseif bet.game == 'pk' %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Pachinko</span>
                            {% elseif bet.game == 'h2h' %}
                                <span class="badge-status" style="background:#7c2d12;color:#fed7aa;border-color:#9a3412;">Head2Head</span>
                            {% elseif bet.game == 'lr' %}
                                <span class="badge-status" style="background:#1e3a5f;color:#93c5fd;border-color:#2563eb;">Live Racing</span>
                            {% elseif bet.game == 'cg' %}
                                <span class="badge-status" style="background:#7c2d12;color:#fed7aa;border-color:#9a3412;">Color Game</span>
                            {% else %}
                            {% endif %}
                        </td>

                        <td data-label="Ref #" class="td-cell td-cell--dark font-mono-sm fw-semibold">
                            #{{ bet.ref_id }}
                        </td>

                        <td data-label="Detail" class="td-cell">
                            {% if bet.game == 'high-low' %}
                                {% if bet.round_cards is defined and bet.round_cards is not null %}
                                    {% set cards = bet.round_cards|split('|') %}
                                    {% set winnerCard = bet.round_result in ['card1', 'card2'] ? attribute({card1: cards[0], card2: cards[1]}, bet.round_result) : null %}
                                    <div>
                                        <div style="white-space:nowrap;margin-bottom:4px;">
                                            <img src="{{ asset('game/small_cards/' ~ cards[0] ~ '.png') }}" alt="" style="height:30px;width:auto;margin-right:2px;border-radius:2px;">
                                            <img src="{{ asset('game/small_cards/' ~ cards[1] ~ '.png') }}" alt="" style="height:30px;width:auto;border-radius:2px;">
                                        </div>
                                        <div>
                                            <span class="font-mono-sm fw-semibold" style="color:#374151;">
                                                Bet:
                                                <span style="background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                    Card {{ bet.description|slice(4) }}
                                                </span>
                                            </span>
                                            {% if bet.round_result is defined and bet.round_result is not null %}
                                            <span style="margin-left:6px;" class="font-mono-sm fw-semibold" style="color:#374151;">
                                                Result:
                                                <span style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                    Card {{ bet.round_result|slice(4) }} ↑
                                                </span>
                                                {% if winnerCard %}
                                                <img src="{{ asset('game/small_cards/' ~ winnerCard ~ '.png') }}" alt="" style="height:20px;width:auto;vertical-align:middle;margin-left:3px;border-radius:2px;">
                                                {% endif %}
                                            </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% else %}
                                    <div>
                                        <span class="font-mono-sm fw-semibold" style="color:#374151;">
                                            Bet:
                                            <span style="background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;padding:1px 6px;border-radius:4px;font-weight:700;">
                                                Card {{ bet.description|slice(4) }}
                                            </span>
                                        </span>
                                    </div>
                                {% endif %}
                            {% elseif bet.game == 'cg' %}
                                {% set dice = bet.round_result ? bet.round_result|split(',') : [] %}
                                {% set cgDiceBg = {'yellow':'#F4B942','white':'#F5F5F5','pink':'#FF3E9A','blue':'#3D87E8','red':'#E63946','green':'#3FB65D'} %}
                                {% set cgDiceFg = {'yellow':'#3a2606','white':'#1a1330','pink':'#ffffff','blue':'#ffffff','red':'#ffffff','green':'#ffffff'} %}
                                <div>
                                    <span class="badge-detail">{{ bet.description }}</span>
                                    {% if dice|length == 3 %}
                                    <div style="white-space:nowrap;margin-top:4px;">
                                        {% for d in dice %}
                                            <span title="{{ d|capitalize }}" style="display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:{{ cgDiceBg[d]|default('#e5e7eb') }};color:{{ cgDiceFg[d]|default('#374151') }};border:1px solid rgba(0,0,0,0.15);font-weight:700;font-size:11px;text-transform:uppercase;margin-right:3px;">{{ d|slice(0, 1) }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            {% elseif bet.game == 'mines' %}
                                <span class="badge-detail">
                                    {{ bet.description|replace({'_': ' '})|capitalize }} — {{ bet.round_result }} tile{{ bet.round_result == '1' ? '' : 's' }} revealed
                                </span>
                            {% elseif bet.game == 'fk' %}
                                <span class="badge-detail">
                                    Bet: {{ bet.description|capitalize }}{% if bet.round_result %} — Landed: {{ bet.round_result|capitalize }}{% endif %}
                                </span>
                            {% elseif bet.game == 'pk' %}
                                <span class="badge-detail">{{ bet.description }}</span>
                            {% elseif bet.game == 'h2h' %}
                                <span class="badge-detail">{{ bet.description }}</span>
                            {% elseif bet.game == 'lr' %}
                                {# The per-leg candidate breakdown is precomputed in PHP
                                   (WfboController::resolveLrSelectionSummaries) - a boxed
                                   ticket can carry 900+ combos and doing this in Twig blew
                                   the request memory limit. #}
                                <span class="badge-detail">{{ bet.description|title }}{% if lrBetSummaries[bet.id] is defined and lrBetSummaries[bet.id] %} — {{ lrBetSummaries[bet.id] }}{% endif %}</span>{% if bet.combo_count is defined and bet.combo_count > 1 %} <span class="text-muted">(×{{ bet.combo_count }})</span>{% endif %}
                            {% else %}
                                <span class="badge-detail">{{ bet.description }}</span>
                            {% endif %}
                        </td>

                        <td data-label="Bet" class="td-cell td-cell--nowrap text-end">
                            <p class="amount-primary">₱{{ bet.amount|number_format(2) }}</p>
                        </td>

                        <td data-label="Payout" class="td-cell td-cell--nowrap text-end">
                            {% if (bet.status == 'won' or bet.status == 'mixed') and bet.payout and bet.payout > 0 %}
                                <p class="amount-approved">₱{{ bet.payout|number_format(2) }}</p>
                            {% else %}
                                <p class="amount-neutral">—</p>
                            {% endif %}
                        </td>

                        <td data-label="Outcome" class="td-cell">
                            {% if bet.status == 'won' %}
                                <span class="badge-status badge-status--won">Won</span>
                            {% elseif bet.status == 'lost' %}
                                <span class="badge-status badge-status--lost">Lose</span>
                            {% elseif bet.status == 'void' %}
                                <span class="badge-status" style="background:#374151;color:#e5e7eb;">Void</span>
                            {% elseif bet.status == 'mixed' %}
                                {% set counts = bet.status_counts is not null ? bet.status_counts|json_decode : null %}
                                {% set mixedParts = [] %}
                                {% if counts %}
                                    {% if counts.pending > 0 %}{% set mixedParts = mixedParts|merge([counts.pending ~ ' pending']) %}{% endif %}
                                    {% if counts.won > 0 %}{% set mixedParts = mixedParts|merge([counts.won ~ ' won']) %}{% endif %}
                                    {% if counts.lost > 0 %}{% set mixedParts = mixedParts|merge([counts.lost ~ ' lose']) %}{% endif %}
                                    {% if counts.void > 0 %}{% set mixedParts = mixedParts|merge([counts.void ~ ' void']) %}{% endif %}
                                {% endif %}
                                <span class="badge-status" style="background:#4c1d95;color:#ddd6fe;">{{ mixedParts|length > 0 ? mixedParts|join(', ') : 'Mixed' }}</span>
                            {% else %}
                                <span class="badge-status badge-status--neutral">Pending</span>
                            {% endif %}
                        </td>
    {% endmacro %}

    {# ── Player Bets table (agent downline) ── #}
    {% if currentType == 'playerbets' %}
    <form method="GET" action="{{ path('app_wfbo_user_transactions', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3" data-testid="player-bets-search-form">
        <input type="hidden" name="type" value="playerbets">
        <div style="position:relative; max-width:100%; flex:0 1 260px; min-width:160px;">
            <input type="search" name="search" value="{{ currentSearch }}"
                   data-testid="player-bets-search-input"
                   placeholder="Search by Ref #…"
                   style="padding:8px 12px 8px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff; width:100%; outline:none;">
        </div>
        <button type="submit"
                style="padding:8px 16px; border-radius:8px; background:#111827; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;">
            Search
        </button>
        {% if currentSearch %}
            <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'playerbets'}) }}"
               style="padding:8px 14px; border-radius:8px; border:1px solid #e5e7eb; color:#6b7280; font-size:13px; text-decoration:none; white-space:nowrap;">
                Clear
            </a>
        {% endif %}
    </form>

    <div class="table-card--tabbed" data-testid="user-player-bets-table-card">
        <div class="table-scroll">
            <table class="data-table stack-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-player-bets-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Player</th>
                        <th class="th-gray">Date</th>
                        <th class="th-gray">Game</th>
                        <th class="th-gray">Ref #</th>
                        <th class="th-gray">Detail</th>
                        <th class="th-gray th-gray--right">Bet</th>
                        <th class="th-gray th-gray--right">Payout</th>
                        <th class="th-gray">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    {% for bet in bets %}
                    {% set player = betPlayers[bet.bettor_id] ?? null %}
                    <tr class="table-row" data-testid="player-bet-row-{{ bet.game }}-{{ bet.id }}">
                        <td data-label="Player" class="td-cell fw-semibold">
                            <a href="{{ path('app_wfbo_user_transactions', {id: bet.bettor_id}) }}" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">
                                {{ player ? player.firstName ~ ' ' ~ player.lastName : '#' ~ bet.bettor_id }}
                            </a>
                        </td>
                        {{ _self.bet_cells(bet, lrBetSummaries) }}
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="td-empty td-empty--lg">No bets found for this agent's players.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

{# ── Activity log table ── #}
    {% if currentType == 'activity' %}
    <div class="table-card--tabbed" data-testid="user-activity-table-card">
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-activity-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Date</th>
                        <th class="th-gray">Action</th>
                        <th class="th-gray">Performed By</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in auditLogs %}
                    <tr class="table-row" data-testid="activity-row-{{ log.id }}">

                        <td class="td-cell td-cell--nowrap">
                            <p class="date-primary td-cell--dark">{{ log.createdAt|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ log.createdAt|date('h:i A') }}</p>
                        </td>

                        <td class="td-cell td-cell--dark font-mono-sm">
                            {{ log.action }}
                        </td>

                        <td class="td-cell td-cell--dark td-cell--nowrap font-mono-sm">
                            {% if log.actor %}
                                {{ log.actor.firstName }} {{ log.actor.lastName }}
                            {% else %}
                                —
                            {% endif %}
                        </td>

                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="td-empty td-empty--lg">
                            No activity recorded for this user.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Commissions table (agent/sub-agent users only) ── #}
    {% if currentType == 'commissions' %}
    <form method="GET" action="{{ path('app_wfbo_user_transactions', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3"
          data-testid="commissions-filter-form">
        <input type="hidden" name="type" value="commissions">
        <label style="font-size:13px; color:#374151; font-weight:600;">Live Racing event</label>
        <select name="event" data-testid="commissions-filter-event" onchange="this.form.submit()"
                style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
            <option value="">All events (all games)</option>
            {% for e in commEvents %}
                <option value="{{ e.id }}" {{ currentCommEvent == e.id ? 'selected' : '' }}>
                    {{ e.management.name }} — {{ e.eventDate|date('Y-m-d') }}
                </option>
            {% endfor %}
        </select>
        <select name="race" data-testid="commissions-filter-race" {{ commEventRaces is empty ? 'disabled' : '' }}
                style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
            <option value="">All races</option>
            {% for r in commEventRaces %}
                <option value="{{ r.id }}" {{ currentCommRace == r.id ? 'selected' : '' }}>Race {{ r.raceNumber }}</option>
            {% endfor %}
        </select>
        <button type="submit" data-testid="btn-commissions-filter"
                style="padding:8px 16px; border-radius:8px; background:#1d4ed8; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer;">
            Filter
        </button>
        {% if currentCommEvent %}
            <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'commissions'}) }}"
               data-testid="commissions-filter-clear"
               style="font-size:13px; color:#6b7280; text-decoration:underline;">Clear</a>
            <span class="pagination-info" style="font-size:12px; color:#6b7280;">
                Live Racing commissions only · {{ total }} entr{{ total == 1 ? 'y' : 'ies' }}
            </span>
        {% endif %}
    </form>

    <form method="GET" action="{{ path('app_wfbo_user_commissions_export', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3"
          data-testid="commissions-export-form">
        <label style="font-size:13px; color:#374151; font-weight:600;">Export commissions</label>
        <input type="date" name="from" value="{{ 'now'|date('Y-m-01') }}" required
               data-testid="commissions-export-from"
               style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
        <span style="font-size:13px; color:#374151;">to</span>
        <input type="date" name="to" value="{{ 'now'|date('Y-m-d') }}" required
               data-testid="commissions-export-to"
               style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
        <button type="submit" data-testid="btn-export-commissions"
                style="padding:8px 16px; border-radius:8px; background:#047857; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; white-space:nowrap;">
            &#8595; Export PDF
        </button>
    </form>

    <div class="table-card--tabbed" data-testid="user-commissions-table-card">
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-commissions-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Date</th>
                        <th class="th-gray">Player</th>
                        <th class="th-gray">Mobile #</th>
                        <th class="th-gray">Game</th>
                        <th class="th-gray">Ref #</th>
                        <th class="th-gray">Detail</th>
                        <th class="th-gray th-gray--right">Bet Amount</th>
                        <th class="th-gray th-gray--right">Commission</th>
                        <th class="th-gray">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for commission in commissions %}
                    {% if commission.bet is defined %}
                    {# ── Live Racing commission (live_racing_commission) ── #}
                    <tr class="table-row" data-testid="commission-row-lr-{{ commission.bet.id }}">
                        <td class="td-cell td-cell--nowrap">
                            <p class="date-primary td-cell--dark">{{ commission.createdAt|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ commission.createdAt|date('h:i A') }}</p>
                        </td>
                        <td class="td-cell td-cell--dark">
                            {{ commission.sourcePlayer.firstName }} {{ commission.sourcePlayer.lastName }}
                        </td>
                        <td class="td-cell td-cell--dark font-mono-sm">
                            {{ commission.sourcePlayer.userIdentifier }}
                        </td>
                        <td class="td-cell" style="white-space: nowrap;">
                            <span class="badge-status" style="background:#0c4a6e;color:#7dd3fc;border-color:#0369a1;">Live Racing</span>
                        </td>
                        <td class="td-cell td-cell--dark font-mono-sm fw-semibold">
                            {{ commission.bet.referenceNumber }}
                        </td>
                        <td class="td-cell td-cell--dark font-mono-sm fw-bold">
                            {{ commission.bet.betTypeKey|replace({'_': ' '})|title }} · {{ commission.role|capitalize }}
                            {% set meta = lrCommissionMeta[commission.id] ?? null %}
                            {% if meta %}
                                <span class="date-secondary d-block">{{ meta.eventLabel }}{% if meta.raceNumbers is not empty %} · R{{ meta.raceNumbers|join(', R') }}{% endif %}</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--nowrap text-end">
                            <p class="amount-primary">₱{{ commission.bet.amount|number_format(2) }}</p>
                        </td>
                        <td class="td-cell td-cell--nowrap text-end">
                            <p class="amount-approved">₱{{ commission.amount|number_format(2) }}</p>
                        </td>
                        <td class="td-cell">
                            {% if commission.bet.status == 'won' %}
                                <span class="badge-status badge-status--won">Won</span>
                            {% elseif commission.bet.status == 'lost' %}
                                <span class="badge-status badge-status--lost">Lose</span>
                            {% elseif commission.bet.status == 'void' %}
                                <span class="badge-status badge-status--neutral">Void</span>
                            {% else %}
                                <span class="badge-status badge-status--neutral">Processing</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    {% set cb = commission.raceBet ?? commission.highLowBet ?? commission.colorGameBet ?? commission.minesGame ?? commission.fruitKingBet ?? commission.pachinkoBet %}
                    <tr class="table-row" data-testid="commission-row-{{ cb.id }}">

                        <td class="td-cell td-cell--nowrap">
                            <p class="date-primary td-cell--dark">{{ commission.createdAt|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ commission.createdAt|date('h:i A') }}</p>
                        </td>

                        <td class="td-cell td-cell--dark">
                            {{ commission.sourcePlayer.firstName }} {{ commission.sourcePlayer.lastName }}
                        </td>

                        <td class="td-cell td-cell--dark font-mono-sm">
                            {{ commission.sourcePlayer.userIdentifier }}
                        </td>

                        <td class="td-cell" style="white-space: nowrap;">
                            {% if commission.raceBet %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Video Karera</span>
                            {% elseif commission.highLowBet %}
                                <span class="badge-status" style="background:#14532d;color:#4ade80;border-color:#166534;">Pataasan</span>
                            {% elseif commission.colorGameBet %}
                                <span class="badge-status" style="background:#7c2d12;color:#fed7aa;border-color:#9a3412;">Color Game</span>
                            {% elseif commission.fruitKingBet %}
                                <span class="badge-status" style="background:#4c1d95;color:#ddd6fe;border-color:#5b21b6;">Fruit King</span>
                            {% elseif commission.ezdosBet %}
                                <span class="badge-status" style="background:#0c4a6e;color:#7dd3fc;border-color:#0369a1;">EZDOS</span>
                            {% elseif commission.pachinkoBet %}
                                <span class="badge-status" style="background:#1e1b4b;color:#a5b4fc;border-color:#3730a3;">Pachinko</span>
                            {% elseif commission.h2hBet %}
                                <span class="badge-status" style="background:#7c2d12;color:#fed7aa;border-color:#9a3412;">Head2Head</span>
                            {% else %}
                                <span class="badge-status" style="background:#312e81;color:#c7d2fe;border-color:#4338ca;">Mines</span>
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark font-mono-sm fw-semibold">
                            {% if commission.raceBet %}
                                #{{ commission.raceBet.race.id }}
                            {% elseif commission.highLowBet %}
                                #{{ commission.highLowBet.round.id }}
                            {% elseif commission.ezdosBet %}
                                #{{ commission.ezdosBet.draw.id }}
                            {% elseif commission.h2hBet %}
                                #{{ commission.h2hBet.race.id }}
                            {% else %}
                                #{{ cb.id }}
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark font-mono-sm fw-bold">
                            {% if commission.raceBet %}
                                {{ commission.raceBet.firstHorse }}-{{ commission.raceBet.secondHorse }}
                            {% elseif commission.highLowBet %}
                                {% if commission.highLowBet.prediction == 'card1' %}
                                    <span style="color:#f87171;">Card 1</span>
                                {% else %}
                                    <span style="color:#4ade80;">Card 2</span>
                                {% endif %}
                            {% elseif commission.colorGameBet %}
                                {{ commission.colorGameBet.color|capitalize }} · {{ commission.colorGameBet.matchCount }} match
                            {% elseif commission.fruitKingBet %}
                                {{ commission.fruitKingBet.symbol|capitalize }}{% if commission.fruitKingBet.resultSymbol %} — {{ commission.fruitKingBet.resultSymbol|capitalize }}{% if commission.fruitKingBet.resultTier == 'triple' %} (triple){% endif %}{% endif %}
                            {% elseif commission.ezdosBet %}
                                {{ commission.ezdosBet.number1 }} × {{ commission.ezdosBet.number2 }}
                            {% elseif commission.pachinkoBet %}
                                {{ commission.pachinkoBet.multiplier }}×
                            {% elseif commission.h2hBet %}
                                Race {{ commission.h2hBet.race.raceNo }} - Horse {{ commission.h2hBet.horse }}
                            {% else %}
                                {{ commission.minesGame.tier|replace({'_': ' '})|capitalize }} — {{ commission.minesGame.tilesRevealed }} tile{{ commission.minesGame.tilesRevealed == 1 ? '' : 's' }} revealed
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--nowrap text-end">
                            <p class="amount-primary">₱{{ cb.amount|number_format(2) }}</p>
                        </td>

                        <td class="td-cell td-cell--nowrap text-end">
                            <p class="amount-approved">₱{{ commission.amount|number_format(2) }}</p>
                        </td>

                        <td class="td-cell">
                            {% if cb.status == 'won' or cb.status == 'cashed_out' %}
                                <span class="badge-status badge-status--won">Won</span>
                            {% elseif cb.status == 'lost' or cb.status == 'busted' %}
                                <span class="badge-status badge-status--lost">Lose</span>
                            {% else %}
                                <span class="badge-status badge-status--neutral">Processing</span>
                            {% endif %}
                        </td>

                    </tr>
                    {% endif %}
                    {% else %}
                    <tr>
                        <td colspan="9" class="td-empty td-empty--lg">
                            No commissions found for this agent.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Commission by event / race (Live Racing, agent/sub-agent only) ── #}
    {% if currentType == 'commissions-by-race' %}
    <form method="GET" action="{{ path('app_wfbo_user_transactions', {id: subject.id}) }}"
          class="d-flex flex-wrap align-items-center gap-2 mb-3"
          data-testid="commissions-by-race-filter-form">
        <input type="hidden" name="type" value="commissions-by-race">
        <label style="font-size:13px; color:#374151; font-weight:600;">Live Racing event</label>
        <select name="event" data-testid="commissions-by-race-filter-event" onchange="this.form.submit()"
                style="padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff;">
            <option value="">Select an event…</option>
            {% for e in commEvents %}
                <option value="{{ e.id }}" {{ currentCommEvent == e.id ? 'selected' : '' }}>
                    {{ e.management.name }} — {{ e.eventDate|date('Y-m-d') }}
                </option>
            {% endfor %}
        </select>
    </form>

    <p class="pagination-info mb-3" style="font-size:12px; color:#6b7280;">
        Commission from a multi-race bet is attributed to its last leg — the race it settles
        against. Click a race to see its entries.
    </p>

    <div class="table-card--tabbed" data-testid="commissions-by-race-table-card">
        {% if currentCommEvent is null %}
            <p class="td-empty td-empty--lg" data-testid="commissions-by-race-empty-prompt">
                Select an event above to see its per-race commission breakdown.
            </p>
        {% else %}
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="commissions-by-race-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">Race</th>
                        <th class="th-gray th-gray--right">Losing Bets</th>
                        <th class="th-gray th-gray--right">Commission</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in commRaceRows %}
                    <tr class="table-row" data-testid="cbr-race-{{ currentCommEvent }}-{{ r.raceId }}">
                        <td class="td-cell td-cell--dark">
                            <a href="{{ path('app_wfbo_user_transactions', {id: subject.id, type: 'commissions', event: currentCommEvent, race: r.raceId}) }}"
                               style="color:inherit;text-decoration:underline;text-underline-offset:2px;">Race {{ r.raceNumber }}</a>
                        </td>
                        <td class="td-cell td-cell--nowrap text-end">{{ r.betCount }}</td>
                        <td class="td-cell td-cell--nowrap text-end">₱{{ r.commission|number_format(2) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="td-empty td-empty--lg">No Live Racing commissions for this event.</td>
                    </tr>
                    {% endfor %}
                    {% if commRaceUnattributed != '0.00' %}
                    <tr class="table-row" data-testid="cbr-unattributed-{{ currentCommEvent }}">
                        <td class="td-cell td-cell--muted">Unattributed</td>
                        <td class="td-cell td-cell--nowrap text-end">—</td>
                        <td class="td-cell td-cell--nowrap text-end">₱{{ commRaceUnattributed|number_format(2) }}</td>
                    </tr>
                    {% endif %}
                </tbody>
                {% if commRaceTotal %}
                <tfoot>
                    <tr class="table-row fw-bold" data-testid="cbr-event-total-{{ currentCommEvent }}">
                        <td class="td-cell td-cell--dark">Total</td>
                        <td class="td-cell td-cell--nowrap text-end">{{ commRaceTotal.betCount }}</td>
                        <td class="td-cell td-cell--nowrap text-end">₱{{ commRaceTotal.commission|number_format(2) }}</td>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# ── Players table ── #}
    {% if currentType == 'players' %}
    <div class="table-card--tabbed" data-testid="user-players-table-card">
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-players-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">#</th>
                        <th class="th-gray">Player Name</th>
                        <th class="th-gray">Mobile</th>
                        <th class="th-gray">Joined</th>
                        <th class="th-gray">Last Seen</th>
                        <th class="th-gray">Last Bet</th>
                    </tr>
                </thead>
                <tbody>
                    {% for player in referredPlayers %}
                    <tr class="table-row" data-testid="player-row-{{ player.id }}">
                        <td class="td-cell td-cell--muted" style="font-weight:700;">{{ loop.index }}</td>
                        <td class="td-cell fw-semibold">
                            <a href="{{ path('app_wfbo_user_transactions', {id: player.id}) }}" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">
                                {{ player.firstName }} {{ player.lastName }}
                            </a>
                        </td>
                        <td class="td-cell td-cell--muted font-mono-sm">{{ player.mobileNumber }}</td>
                        <td class="td-cell td-cell--dark font-mono-sm">{{ player.createdAt|date('M d, Y') }}</td>
                        <td class="td-cell td-cell--muted font-mono-sm" data-testid="player-last-seen-{{ player.id }}">
                            {{ player.lastSeenAt ? player.lastSeenAt|date('M d, H:i') : '—' }}
                        </td>
                        <td class="td-cell td-cell--muted font-mono-sm" data-testid="player-last-bet-{{ player.id }}">
                            {% set lb = latestBetByPlayer[player.id] ?? null %}
                            {% if lb %}{{ lb.placedAt|date('M d, H:i') }} <span class="td-cell--muted">· {{ lb.game }}</span>{% else %}—{% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="td-empty td-empty--lg">No referred players found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Agents table ── #}
    {% if currentType == 'agents' %}
    <div class="table-card--tabbed" data-testid="user-agents-table-card">
        <div class="table-scroll">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="user-agents-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-gray">#</th>
                        <th class="th-gray">Agent Name</th>
                        <th class="th-gray">Mobile</th>
                        <th class="th-gray">Role</th>
                        <th class="th-gray">Joined</th>
                    </tr>
                </thead>
                <tbody>
                    {% for agent in downlineAgents %}
                    {% set isSub = 'ROLE_SUB_AGENT' in agent.roles %}
                    <tr class="table-row" data-testid="agent-row-{{ agent.id }}">
                        <td class="td-cell td-cell--muted" style="font-weight:700;">{{ loop.index }}</td>
                        <td class="td-cell fw-semibold">
                            <a href="{{ path('app_wfbo_user_transactions', {id: agent.id}) }}" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">
                                {{ agent.firstName }} {{ agent.lastName }}
                            </a>
                        </td>
                        <td class="td-cell td-cell--muted font-mono-sm">{{ agent.mobileNumber }}</td>
                        <td class="td-cell">
                            {% if isSub %}
                                <span class="badge-status" style="background:#f0f4ff;color:#2563eb;border-color:#dde4ff;">Sub-Agent</span>
                            {% elseif 'ROLE_AGENT' in agent.roles %}
                                <span class="badge-status" style="background:#d1fae5;color:#065f46;border-color:#bbf7d0;">Agent</span>
                            {% else %}
                                <span class="badge-status" style="background:#4f46e5;color:#ffffff;border-color:#3730a3;">Master Agent</span>
                            {% endif %}
                        </td>
                        <td class="td-cell td-cell--dark font-mono-sm">{{ agent.createdAt|date('M d, Y') }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="td-empty td-empty--lg">No agents found under this account.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Pagination ── #}
    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="pagination">
        <p class="pagination-info">
            Page {{ currentPage }} of {{ totalPages }} &nbsp;·&nbsp; {{ total }} total
        </p>
        <div class="d-flex gap-2">
            {% set pageParams = {id: subject.id, type: currentType} %}
            {% if currentSearch %}{% set pageParams = pageParams|merge({search: currentSearch}) %}{% endif %}
            {% if currentCommEvent %}{% set pageParams = pageParams|merge({event: currentCommEvent}) %}{% endif %}
            {% if currentCommRace %}{% set pageParams = pageParams|merge({race: currentCommRace}) %}{% endif %}
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_user_transactions', pageParams|merge({page: currentPage - 1})) }}"
                   class="btn btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_user_transactions', pageParams|merge({page: currentPage + 1})) }}"
                   class="btn btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}

{% if is_granted('ROLE_ADMIN') %}
{# ── Change Agent Modal ── #}
<div class="modal fade" id="changeAgentModal" tabindex="-1" aria-labelledby="changeAgentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeAgentModalLabel">Change Agent</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="changeAgentForm" method="post" action="">
                <div class="modal-body">
                    <input type="hidden" name="_token" id="changeAgentToken">
                    <input type="hidden" name="page" id="changeAgentPage">
                    <p class="text-muted mb-3" id="changeAgentSubtitle"></p>
                    <label for="changeAgentSelect" class="form-label fw-semibold">Search Agent</label>
                    <input type="text" id="changeAgentSearch" class="form-control mb-2" placeholder="Type to search..." oninput="filterChangeAgentList()">
                    <select name="agent_id" id="changeAgentSelect" class="form-select" size="8" style="height:auto;min-height:200px;">
                        <option value="">— No Agent —</option>
                        {% if agentsGrouped.masterAgents|length > 0 %}
                        <optgroup label="━━━ Master Agents ━━━">
                            {% for agent in agentsGrouped.masterAgents %}
                                <option value="{{ agent.id }}" class="agent-option" data-name="{{ agent.firstName|lower }} {{ agent.lastName|lower }} {{ agent.userIdentifier|lower }}">{{ agent.firstName }} {{ agent.lastName }} ({{ agent.userIdentifier }})</option>
                            {% endfor %}
                        </optgroup>
                        {% endif %}
                        {% if agentsGrouped.agents|length > 0 %}
                        <optgroup label="━━━ Agents ━━━">
                            {% for agent in agentsGrouped.agents %}
                                <option value="{{ agent.id }}" class="agent-option" data-name="{{ agent.firstName|lower }} {{ agent.lastName|lower }} {{ agent.userIdentifier|lower }}">{{ agent.firstName }} {{ agent.lastName }} ({{ agent.userIdentifier }})</option>
                            {% endfor %}
                        </optgroup>
                        {% endif %}
                        {% if agentsGrouped.subAgents|length > 0 %}
                        <optgroup label="━━━ Sub Agents ━━━">
                            {% for agent in agentsGrouped.subAgents %}
                                <option value="{{ agent.id }}" class="agent-option" data-name="{{ agent.firstName|lower }} {{ agent.lastName|lower }} {{ agent.userIdentifier|lower }}">{{ agent.firstName }} {{ agent.lastName }} ({{ agent.userIdentifier }})</option>
                            {% endfor %}
                        </optgroup>
                        {% endif %}
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

{# ── House Win Rate Modal ── #}
<div class="modal fade" id="houseWinRateModal" tabindex="-1" aria-labelledby="houseWinRateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="houseWinRateModalLabel">Set Player Loss Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="houseWinRateForm" method="post" action="">
                <div class="modal-body">
                    <input type="hidden" name="_token" id="houseWinRateToken">
                    <input type="hidden" name="page" id="houseWinRatePage">
                    <p class="text-muted mb-3" id="houseWinRateSubtitle"></p>
                    <label for="houseWinRateInput" class="form-label fw-semibold">Player Loss Rate (%)</label>
                    <div class="input-group" style="max-width: 200px;">
                        <input type="number" name="house_win_rate" id="houseWinRateInput"
                               class="form-control border-end-0"
                               min="0" max="100" placeholder="Use defaults">
                        <span class="input-group-text input-group-suffix">%</span>
                    </div>
                    <p class="form-hint mt-2">
                        Override the general and per-game player loss rate for this user.
                        Leave blank to use defaults.
                    </p>
                    <div class="form-check mt-3">
                        <input type="hidden" name="streak_softening_enabled" value="0">
                        <input type="checkbox" class="form-check-input" name="streak_softening_enabled" value="1"
                               id="houseWinRateStreakToggle">
                        <label class="form-check-label" for="houseWinRateStreakToggle">
                            Give this player a break after a losing streak
                        </label>
                    </div>
                    <p class="form-hint mt-1">
                        When ON, a player who loses many bets in a row gets an easier chance to
                        win for a while. When OFF, their Loss Rate above stays exactly as set,
                        no matter how many times in a row they lose.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

{# ── Reset Password Result Modal ── #}
{% set resetPwd = _flashes['reset_password_value'] ?? [] %}
{% set resetName = _flashes['reset_password_name'] ?? [] %}
{% if resetPwd %}
<div class="modal fade" id="resetPasswordResultModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Password Reset</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p class="mb-1" style="font-size:0.85rem; color:#ffffff;">New password for</p>
                <p class="fw-semibold mb-3" style="color:#ffffff;" data-testid="reset-result-name">{{ resetName[0] ?? '' }}</p>
                <div class="d-flex align-items-center justify-content-center gap-2">
                    <code class="fs-5 fw-bold px-3 py-2"
                          style="background:#f3f4f6; border-radius:6px; letter-spacing:0.05em;"
                          data-testid="reset-result-password">{{ resetPwd[0] }}</code>
                    <button type="button"
                            onclick="navigator.clipboard.writeText({{ resetPwd[0]|json_encode }})"
                            class="btn btn-sm btn-outline-secondary"
                            title="Copy">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                    </button>
                </div>
                <p class="mt-3 text-danger" style="font-size:0.78rem;">Share this with the user and close — it won't be shown again.</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal" data-testid="reset-result-done">Done</button>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    bootstrap.Modal.getOrCreateInstance(document.getElementById('resetPasswordResultModal')).show();
});
</script>
{% endif %}

{# ── Generic Confirmation Modal ── #}
{% if is_granted('ROLE_ADMIN') %}
<div class="modal fade" id="confirmActionModal" tabindex="-1" aria-labelledby="confirmActionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmActionModalLabel">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="confirmActionMessage" style="margin:0;"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmActionBtn" data-testid="btn-confirm-action">Confirm</button>
            </div>
        </div>
    </div>
</div>
<script>
function openConfirmModal(formId, message) {
    document.getElementById('confirmActionMessage').textContent = message;
    document.getElementById('confirmActionBtn').onclick = function () {
        bootstrap.Modal.getInstance(document.getElementById('confirmActionModal')).hide();
        document.getElementById(formId).submit();
    };
    bootstrap.Modal.getOrCreateInstance(document.getElementById('confirmActionModal')).show();
}

function openChangeAgentModal(userId, currentAgentId, csrfToken, userName) {
    document.getElementById('changeAgentSubtitle').textContent = 'Changing agent for: ' + userName;
    document.getElementById('changeAgentForm').action = '/wfbo/users/' + userId + '/change-agent';
    document.getElementById('changeAgentToken').value = csrfToken;
    document.getElementById('changeAgentPage').value = '1';
    var select = document.getElementById('changeAgentSelect');
    select.value = currentAgentId !== null ? String(currentAgentId) : '';
    document.getElementById('changeAgentSearch').value = '';
    document.querySelectorAll('.agent-option').forEach(function(opt) {
        opt.style.display = '';
    });
    document.querySelectorAll('#changeAgentSelect optgroup').forEach(function(grp) {
        grp.style.display = '';
    });
    bootstrap.Modal.getOrCreateInstance(document.getElementById('changeAgentModal')).show();
}

function filterChangeAgentList() {
    var query = document.getElementById('changeAgentSearch').value.toLowerCase().trim();
    document.querySelectorAll('.agent-option').forEach(function(opt) {
        var match = opt.dataset.name.indexOf(query) !== -1;
        opt.style.display = match ? '' : 'none';
    });
    document.querySelectorAll('#changeAgentSelect optgroup').forEach(function(grp) {
        var hasVisible = Array.from(grp.querySelectorAll('.agent-option')).some(function(opt) {
            return opt.style.display !== 'none';
        });
        grp.style.display = hasVisible ? '' : 'none';
    });
}

function openHouseWinRateModal(userId, currentRate, streakSofteningEnabled, csrfToken, userName) {
    document.getElementById('houseWinRateSubtitle').textContent = 'Setting house win rate for: ' + userName;
    document.getElementById('houseWinRateForm').action = '/wfbo/users/' + userId + '/house-win-rate';
    document.getElementById('houseWinRateToken').value = csrfToken;
    document.getElementById('houseWinRatePage').value = '1';
    var input = document.getElementById('houseWinRateInput');
    input.value = currentRate !== null && currentRate !== -1 ? String(currentRate) : '';
    document.getElementById('houseWinRateStreakToggle').checked = streakSofteningEnabled;
    bootstrap.Modal.getOrCreateInstance(document.getElementById('houseWinRateModal')).show();
}
</script>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function (el) {
        new bootstrap.Dropdown(el, {
            popperConfig: function (config) {
                config.strategy = 'fixed';
                return config;
            }
        });
    });
});
</script>

{% endblock %}