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

{% block title %}Users — WFBO{% endblock %}
{% block wfbo_title %}Users{% endblock %}

{% block wfbo_content %}

<style>
.agent-link { color: #2563eb; text-decoration: none; font-weight: 600; }
.agent-link:hover { color: #1d4ed8; text-decoration: underline; cursor: pointer; }
</style>

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

    {# Header row + Search #}
    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
        <p class="pagination-info" style="margin:0;">
            {{ total }} user{{ total != 1 ? 's' : '' }}{% if search %} matching <strong>"{{ search }}"</strong>{% endif %}{% if role %} filtered by <strong>{{ role == 'ROLE_USER' ? 'User' : role == 'ROLE_SUPER_ADMIN' ? 'SADMIN' : role|replace({'ROLE_': '', '_': ' '})|title }}</strong>{% endif %}{% if not search and not role %} total{% endif %}
        </p>
        <form method="GET" action="{{ path('app_wfbo_users') }}"
              style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;">
            <div style="position:relative; max-width:100%; flex:1 1 200px; min-width:140px;">
                <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="{{ search }}"
                       placeholder="Search by name, mobile or email…"
                       style="padding:8px 12px 8px 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff; width:280px; max-width:100%; outline:none;"
                       onfocus="this.style.borderColor='#111'" onblur="this.style.borderColor='#e5e7eb'">
            </div>
            <select name="role" style="padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff; outline:none; max-width:100%;">
                <option value="">All Roles</option>
                <option value="ROLE_USER" {% if role == 'ROLE_USER' %}selected{% endif %}>User</option>
                <option value="ROLE_ADMIN" {% if role == 'ROLE_ADMIN' %}selected{% endif %}>Admin</option>
                <option value="ROLE_SUPER_ADMIN" {% if role == 'ROLE_SUPER_ADMIN' %}selected{% endif %}>SADMIN</option>
                <option value="ROLE_MASTER_AGENT" {% if role == 'ROLE_MASTER_AGENT' %}selected{% endif %}>Master Agent</option>
                <option value="ROLE_AGENT" {% if role == 'ROLE_AGENT' %}selected{% endif %}>Agent</option>
                <option value="ROLE_FINANCE" {% if role == 'ROLE_FINANCE' %}selected{% endif %}>Finance</option>
                <option value="ROLE_OPERATIONS" {% if role == 'ROLE_OPERATIONS' %}selected{% endif %}>Operations</option>
            </select>
            <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 search or role %}
                <a href="{{ path('app_wfbo_users') }}"
                   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>

    {# Table #}
    <div class="card table-card" data-testid="users-table-card">
        <div class="table-scroll">
            <table class="table data-table" style="margin: 0; --bs-table-color: #000000; --bs-table-bg: #ffffff;" data-testid="users-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">#</th>
                        <th class="th-white">Name</th>
                        <th class="th-white">Mobile</th>
                        <th class="th-white">Roles</th>
                        <th class="th-white">Agent</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">PLR%</th>
                        <th class="th-white">Wallet</th>
                        <th class="th-white">Registered</th>
                        <th class="th-white">Last Login</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr class="table-row" data-testid="user-row-{{ user.id }}">

                        {# ID #}
                        <td class="td-cell td-cell--id">{{ user.id }}</td>

                        {# Name #}
                        <td class="td-cell td-cell--nowrap fw-semibold">
                            {{ user.firstName }} {{ user.lastName }}
                        </td>

                        {# Mobile #}
                        <td class="td-cell td-cell--dark td-cell--nowrap">{{ user.mobileNumber }}</td>

                        {# Roles #}
                        {% set isPlainUser = 'ROLE_MASTER_AGENT' not in user.roles and 'ROLE_AGENT' not in user.roles and 'ROLE_ADMIN' not in user.roles and 'ROLE_SUPER_ADMIN' not in user.roles and 'ROLE_FINANCE' not in user.roles and 'ROLE_OPERATIONS' not in user.roles %}
                        <td class="td-cell">
                            <div class="d-flex flex-wrap gap-1">
                                {% for role in user.roles %}
                                    {% if role != 'ROLE_USER' %}
                                        <span class="badge-role {% if role == 'ROLE_ADMIN' or role == 'ROLE_SUPER_ADMIN' %}badge-role--admin{% elseif role == 'ROLE_MASTER_AGENT' %}badge-role--agent{% elseif role == 'ROLE_AGENT' %}badge-role--agent-role{% elseif role == 'ROLE_FINANCE' %}badge-role--finance{% elseif role == 'ROLE_OPERATIONS' %}badge-role--operations{% else %}badge-role--default{% endif %}">
                                            {% if role == 'ROLE_ADMIN' or role == 'ROLE_SUPER_ADMIN' %}Admin{% elseif role == 'ROLE_MASTER_AGENT' %}Master Agent{% elseif role == 'ROLE_AGENT' %}Agent{% elseif role == 'ROLE_FINANCE' %}Finance{% elseif role == 'ROLE_OPERATIONS' %}Operations{% else %}{{ role }}{% endif %}
                                        </span>
                                    {% endif %}
                                {% endfor %}
                                {% if isPlainUser %}
                                    <span class="badge-role badge-role--default">User</span>
                                {% endif %}
                                {% if user.isOnHold %}
                                    <span class="badge-role" style="background:#f59e0b;color:#ffffff;" data-testid="badge-on-hold-{{ user.id }}">
                                        On Hold
                                    </span>
                                {% endif %}
                                {% if user.isTestAccount %}
                                    <span class="badge-role badge-role--suspended" data-testid="badge-test-account-{{ user.id }}">
                                        Test Account
                                    </span>
                                {% endif %}
                            </div>
                        </td>

                        {# Agent #}
                        <td class="td-cell td-cell--nowrap">
                            {% if isPlainUser %}
                                {% if user.referredBy %}
                                    <a href="{{ path('app_wfbo_users', {search: user.referredBy.firstName ~ ' ' ~ user.referredBy.lastName}) }}"
                                       class="agent-link"
                                       data-testid="agent-link-{{ user.id }}"
                                       title="Filter by {{ user.referredBy.firstName }} {{ user.referredBy.lastName }}">
                                        {{ user.referredBy.firstName }} {{ user.referredBy.lastName }}
                                    </a>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </td>

                        {# Status #}
                        <td class="td-cell">
                            {% if user.isSuspended %}
                                <span class="badge-role badge-role--suspended"
                                      data-testid="badge-suspended-{{ user.id }}">
                                    Suspended
                                </span>
                            {% else %}
                                <span class="badge-role badge-role--active"
                                      data-testid="badge-active-{{ user.id }}">
                                    Active
                                </span>
                            {% endif %}
                        </td>

                        {# PLR % #}
                        <td class="td-cell">
                            {% if user.houseWinRate is not null %}
                                <span class="badge-role badge-role--{{ user.houseWinRate >= 70 ? 'active' : 'suspended' }}">
                                    {{ user.houseWinRate }}%
                                </span>
                            {% else %}
                                <span class="text-muted">&mdash;</span>
                            {% endif %}
                        </td>

                        {# Wallet #}
                        <td class="td-cell td-cell--nowrap">₱{{ user.walletBalance|number_format(2) }}</td>

                        {# Registered #}
                        <td class="td-cell td-cell--nowrap" style="font-size:12px; color:#6b7280;">
                            {{ user.createdAt ? user.createdAt|date('M d, Y') : '<span class="text-muted">—</span>'|raw }}
                        </td>

                        {# Last Login #}
                        <td class="td-cell td-cell--nowrap" style="font-size:12px; color:#6b7280;">
                            {{ user.lastLoginAt ? user.lastLoginAt|date('M d, Y') : '<span class="text-muted">—</span>'|raw }}
                        </td>

                        {# Actions #}
                        <td class="td-cell">

                            {# Hidden forms — triggered by dropdown items #}
                            {% if is_granted('ROLE_ADMIN') %}
                            <form id="form-suspend-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'suspend'}) }}" data-testid="form-suspend-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-unsuspend-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'unsuspend'}) }}" data-testid="form-unsuspend-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-hold-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'hold'}) }}" data-testid="form-hold-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-unhold-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'unhold'}) }}" data-testid="form-unhold-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-promote-agent-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'promote-agent'}) }}" data-testid="form-promote-agent-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-demote-agent-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'demote-agent'}) }}" data-testid="form-demote-agent-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% if 'ROLE_ADMIN' not in user.roles and 'ROLE_SUPER_ADMIN' not in user.roles %}
                            <form id="form-promote-admin-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'promote-admin'}) }}" data-testid="form-promote-admin-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% else %}
                            <form id="form-demote-admin-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'demote-admin'}) }}" data-testid="form-demote-admin-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% endif %}
                            {% if 'ROLE_FINANCE' not in user.roles %}
                            <form id="form-promote-finance-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'promote-finance'}) }}" data-testid="form-promote-finance-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% else %}
                            <form id="form-demote-finance-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'demote-finance'}) }}" data-testid="form-demote-finance-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% endif %}
                            {% if 'ROLE_OPERATIONS' not in user.roles %}
                            <form id="form-promote-operations-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'promote-operations'}) }}" data-testid="form-promote-operations-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% else %}
                            <form id="form-demote-operations-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_action', {id: user.id, type: 'demote-operations'}) }}" data-testid="form-demote-operations-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% endif %}
                            <form id="form-reset-password-{{ user.id }}" method="post"
                                  action="{{ path('app_wfbo_reset_password', {id: user.id}) }}"
                                  data-testid="form-reset-password-{{ user.id }}"
                                  style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_reset_password_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            <form id="form-house-win-rate-{{ user.id }}" method="post"
                                  action="{{ path('app_wfbo_user_house_win_rate', {id: user.id}) }}"
                                  data-testid="form-house-win-rate-{{ user.id }}"
                                  style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_house_win_rate_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                                <input type="hidden" name="house_win_rate" id="house-win-rate-input-{{ user.id }}" value="">
                            </form>
                            {% endif %}
                            {% set isAnyAgent = 'ROLE_MASTER_AGENT' in user.roles or 'ROLE_AGENT' in user.roles or 'ROLE_SUB_AGENT' in user.roles %}
                            {% if is_granted('ROLE_SUPER_ADMIN') %}
                            <form id="form-enable-test-account-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_test_account', {id: user.id}) }}" data-testid="form-enable-test-account-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_test_account_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                                <input type="hidden" name="enabled" value="1">
                            </form>
                            <form id="form-disable-test-account-{{ user.id }}" method="post" action="{{ path('app_wfbo_user_test_account', {id: user.id}) }}" data-testid="form-disable-test-account-{{ user.id }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_test_account_' ~ user.id) }}">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                                <input type="hidden" name="enabled" value="0">
                            </form>
                            <form id="form-transfer-from-{{ user.id }}" method="post" action="{{ path('app_wfbo_transfer_balance', {fromUserId: user.id}) }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_transfer_balance') }}">
                                <input type="hidden" name="to_user_id" id="transfer-to-user-id-{{ user.id }}" value="">
                                <input type="hidden" name="amount" id="transfer-amount-{{ user.id }}" value="">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% if isAnyAgent and is_granted('ROLE_SUPER_ADMIN') %}
                            <form id="form-transfer-players-{{ user.id }}" method="post" action="{{ path('app_wfbo_transfer_players', {fromAgentId: user.id}) }}" style="display:none;" data-turbo="false">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_transfer_players') }}">
                                <input type="hidden" name="to_agent_id" id="transfer-players-to-agent-id-{{ user.id }}" value="">
                                <input type="hidden" name="page" value="{{ currentPage }}">
                            </form>
                            {% endif %}
                            {% 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-{{ user.id }}">
                                    Actions
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end dropdown-menu--light" style="right:0;left:auto;max-width:90vw;" data-testid="actions-menu-{{ user.id }}">

                                    {# ── View ── #}
                                    <li>
                                        <a class="dropdown-item dropdown-item--view"
                                           href="{{ path('app_wfbo_user_transactions', {id: user.id}) }}"
                                           data-testid="btn-view-transactions-{{ user.id }}">
                                            <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="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                                            View Transactions
                                        </a>
                                    </li>

                                    {% if is_granted('ROLE_ADMIN') %}
                                    <li><hr class="dropdown-divider dropdown-divider--light"></li>

                                    {# ── Status ── #}
                                    {% if not user.isSuspended %}
                                        <li>
                                            <button type="button"
                                                    onclick="openConfirmModal('form-suspend-{{ user.id }}', 'Suspend {{ user.firstName|e('js') }} {{ user.lastName|e('js') }}? They will lose access to the platform.')"
                                                    data-testid="btn-suspend-{{ user.id }}"
                                                    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-{{ user.id }}').submit()"
                                                    data-testid="btn-unsuspend-{{ user.id }}"
                                                    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 user.isOnHold %}
                                        <li>
                                            <button type="button"
                                                    onclick="openConfirmModal('form-hold-{{ user.id }}', 'Hold {{ user.firstName|e('js') }} {{ user.lastName|e('js') }}? They will not be able to place bets or view the YouTube stream.')"
                                                    data-testid="btn-hold-{{ user.id }}"
                                                    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-{{ user.id }}').submit()"
                                                    data-testid="btn-unhold-{{ user.id }}"
                                                    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 %}

                                    {# ── Change Agent (plain users only) ── #}
                                    {% if isPlainUser %}
                                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                                    <li>
                                        <button type="button"
                                                onclick="openChangeAgentModal({{ user.id }}, {{ user.referredBy ? user.referredBy.id : 'null' }}, '{{ csrf_token('wfbo_change_agent_' ~ user.id) }}', '{{ user.firstName|e('js') }} {{ user.lastName|e('js') }}', {{ currentPage }})"
                                                data-testid="btn-change-agent-{{ user.id }}"
                                                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({{ user.id }}, {{ user.houseWinRate ?? '-1' }}, {{ user.streakSofteningEnabled ? 'true' : 'false' }}, '{{ csrf_token('wfbo_user_house_win_rate_' ~ user.id) }}', '{{ user.firstName|e('js') }} {{ user.lastName|e('js') }}', {{ currentPage }})"
                                                data-testid="btn-house-win-rate-{{ user.id }}"
                                                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 Loose Rate
                                        </button>
                                    </li>
                                    {% endif %}

                                    {# ── Transfer Balance (super admin only) ── #}
                                    {% if is_granted('ROLE_SUPER_ADMIN') %}
                                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                                    <li>
                                        <button type="button"
                                                onclick="openTransferModal({{ user.id }}, '{{ user.firstName|e('js') }} {{ user.lastName|e('js') }}', {{ user.walletBalance }})"
                                                data-testid="btn-transfer-balance-{{ user.id }}"
                                                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 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                                            Transfer Balance
                                        </button>
                                    </li>
                                    {% if isAnyAgent %}
                                    <li>
                                        <button type="button"
                                                onclick="openTransferPlayersModal({{ user.id }}, '{{ user.firstName|e('js') }} {{ user.lastName|e('js') }}')"
                                                data-testid="btn-transfer-players-{{ user.id }}"
                                                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>
                                            Transfer Players
                                        </button>
                                    </li>
                                    {% endif %}
                                    {% endif %}

                                    <li><hr class="dropdown-divider dropdown-divider--light"></li>
                                    <li>
                                        <button type="button"
                                                onclick="openConfirmModal('form-reset-password-{{ user.id }}', 'Reset password for {{ user.firstName|e('js') }} {{ user.lastName|e('js') }}? A new password will be generated.')"
                                                data-testid="btn-reset-password-{{ user.id }}"
                                                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>
                        </td>

                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="11" class="td-empty">
                            No users found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# 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 }}
        </p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_users', {page: currentPage - 1, search: search, role: role}) }}"
                   class="btn btn-page-prev"
                   data-testid="btn-prev-page">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_users', {page: currentPage + 1, search: search, role: role}) }}"
                   class="btn btn-page-next"
                   data-testid="btn-next-page">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{# ── Change Agent Modal ── #}
{% if is_granted('ROLE_ADMIN') %}
<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>
<script>
function openChangeAgentModal(userId, currentAgentId, csrfToken, userName, page) {
    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 = page;
    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, page) {
    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 = page;
    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>

{# ── House Win Rate Modal ── #}
{% if is_granted('ROLE_ADMIN') %}
<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 Loose 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 Loose 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 loose 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 Loose 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 %}

{# ── Transfer Balance Modal ── #}
{% if is_granted('ROLE_SUPER_ADMIN') %}
<div class="modal fade" id="transferModal" tabindex="-1" aria-labelledby="transferModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transferModalLabel">Transfer Balance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="transferFromUserId" value="">
                <div class="mb-3">
                    <label class="form-label--sm">From</label>
                    <p class="fw-semibold mb-1" id="transferFromName" style="font-size:14px; color:#111827;"></p>
                    <p class="mb-0" style="font-size:13px; color:#6b7280;" id="transferFromBalance"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label--sm" for="transferToSearch">Transfer To</label>
                    <input type="text" id="transferToSearch" class="form-control"
                           placeholder="Type name, mobile or email…"
                           style="max-width:100%; background:#fff; color:#111; border:1px solid #d1d5db;"
                           oninput="filterTransferUsers(this.value)"
                           data-testid="input-transfer-to-search">
                    <div id="transferUserList" style="max-height:200px; overflow-y:auto; margin-top:4px; border:1px solid #e5e7eb; border-radius:6px; display:none;"></div>
                    <p id="transferToSelected" class="mt-2 mb-0" style="font-size:13px; color:#059669; display:none;"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label--sm" for="transferAmount">Amount (₱)</label>
                    <input type="number" id="transferAmount" class="form-control"
                           placeholder="0.00" min="0.01" step="0.01"
                           style="max-width:100%; background:#fff; color:#111; border:1px solid #d1d5db;"
                           data-testid="input-transfer-amount">
                </div>
            </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="transferConfirmBtn"
                        onclick="confirmTransfer()" data-testid="btn-transfer-confirm">Transfer</button>
            </div>
        </div>
    </div>
</div>

{# ── Transfer Confirmation Modal ── #}
<div class="modal fade" id="transferConfirmModal" tabindex="-1" aria-labelledby="transferConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transferConfirmModalLabel">Confirm Transfer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="transferConfirmMessage" style="margin:0; white-space:pre-wrap;"></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="transferConfirmExecuteBtn" data-testid="btn-transfer-execute">Confirm</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% 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();
}
</script>
{% endif %}

{% if is_granted('ROLE_SUPER_ADMIN') %}
<script>
const TRANSFER_USERS = {{ usersJson|raw }};
let transferToUserId = null;

function openTransferModal(userId, userName, balance) {
    transferToUserId = null;
    document.getElementById('transferFromUserId').value = userId;
    document.getElementById('transferFromName').textContent = userName;
    document.getElementById('transferFromBalance').textContent = 'Balance: ₱' + Number(balance).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    document.getElementById('transferToSearch').value = '';
    document.getElementById('transferAmount').value = '';
    document.getElementById('transferToSelected').style.display = 'none';
    document.getElementById('transferUserList').style.display = 'none';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('transferModal')).show();
}

function filterTransferUsers(query) {
    const list = document.getElementById('transferUserList');
    const selected = document.getElementById('transferToSelected');
    selected.style.display = 'none';
    transferToUserId = null;

    if (query.length < 1) {
        list.style.display = 'none';
        return;
    }

    const q = query.toLowerCase();
    const fromUserId = parseInt(document.getElementById('transferFromUserId').value);
    const matches = TRANSFER_USERS.filter(function(u) {
        if (u.id === fromUserId) return false;
        return u.firstName.toLowerCase().indexOf(q) !== -1
            || u.lastName.toLowerCase().indexOf(q) !== -1
            || (u.firstName + ' ' + u.lastName).toLowerCase().indexOf(q) !== -1
            || u.mobileNumber.indexOf(q) !== -1;
    }).slice(0, 20);

    if (matches.length === 0) {
        list.innerHTML = '<div style="padding:8px; color:#9ca3af; font-size:13px;">No users found</div>';
        list.style.display = 'block';
        return;
    }

    list.innerHTML = matches.map(function(u) {
        return '<div onclick="selectTransferUser(' + u.id + ', \'' + u.firstName.replace(/'/g, "\\'") + ' ' + u.lastName.replace(/'/g, "\\'") + '\')" style="padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0; font-size:13px; color:#111;" data-testid="transfer-user-option-' + u.id + '">'
            + '<span class="fw-semibold">' + u.firstName + ' ' + u.lastName + '</span>'
            + ' <span style="color:#9ca3af;">' + u.mobileNumber + '</span>'
            + '</div>';
    }).join('');
    list.style.display = 'block';
}

function selectTransferUser(userId, name) {
    transferToUserId = userId;
    document.getElementById('transferUserList').style.display = 'none';
    document.getElementById('transferToSearch').value = '';
    const selected = document.getElementById('transferToSelected');
    selected.textContent = '\u2713 To: ' + name;
    selected.style.display = 'block';
}

function confirmTransfer() {
    var amount = parseFloat(document.getElementById('transferAmount').value);
    if (!transferToUserId) {
        alert('Please select a target user.');
        return;
    }
    if (!amount || amount <= 0) {
        alert('Please enter a valid amount.');
        return;
    }
    var fromUserId = document.getElementById('transferFromUserId').value;
    var userName = document.getElementById('transferFromName').textContent;
    var balText = document.getElementById('transferFromBalance').textContent;

    document.getElementById('transferConfirmMessage').textContent =
        'Transfer \u20B1' + amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) +
        '\n\nFrom: ' + userName + '\n' + balText +
        '\n\nTo: User #' + transferToUserId;

    bootstrap.Modal.getInstance(document.getElementById('transferModal')).hide();

    document.getElementById('transferConfirmExecuteBtn').onclick = function () {
        document.getElementById('transfer-to-user-id-' + fromUserId).value = transferToUserId;
        document.getElementById('transfer-amount-' + fromUserId).value = amount.toFixed(2);
        bootstrap.Modal.getInstance(document.getElementById('transferConfirmModal')).hide();
        document.getElementById('form-transfer-from-' + fromUserId).submit();
    };
    bootstrap.Modal.getOrCreateInstance(document.getElementById('transferConfirmModal')).show();
}
</script>
{% endif %}

{# ── Transfer Players Modal ── #}
{% if is_granted('ROLE_SUPER_ADMIN') %}
<div class="modal fade" id="transferPlayersModal" tabindex="-1" aria-labelledby="transferPlayersModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transferPlayersModalLabel">Transfer Players</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="transferPlayersFromAgentId" value="">
                <div class="mb-3">
                    <label class="form-label--sm">From Agent</label>
                    <p class="fw-semibold mb-1" id="transferPlayersFromName" style="font-size:14px; color:#111827;"></p>
                    <p class="mb-0" style="font-size:13px; color:#6b7280;" id="transferPlayersFromCount"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label--sm" for="transferPlayersToSearch">Transfer Players To</label>
                    <input type="text" id="transferPlayersToSearch" class="form-control"
                           placeholder="Type agent name or mobile…"
                           style="max-width:100%; background:#fff; color:#111; border:1px solid #d1d5db;"
                           oninput="filterTransferPlayersTargets(this.value)"
                           data-testid="input-transfer-players-to-search">
                    <div id="transferPlayersAgentList" style="max-height:200px; overflow-y:auto; margin-top:4px; border:1px solid #e5e7eb; border-radius:6px; display:none;"></div>
                    <p id="transferPlayersToSelected" class="mt-2 mb-0" style="font-size:13px; color:#059669; display:none;"></p>
                </div>
            </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="transferPlayersConfirmBtn"
                        onclick="confirmTransferPlayers()" data-testid="btn-transfer-players-confirm">Transfer Players</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="transferPlayersConfirmModal" tabindex="-1" aria-labelledby="transferPlayersConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transferPlayersConfirmModalLabel">Confirm Transfer Players</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="transferPlayersConfirmMessage" style="margin:0; white-space:pre-wrap;"></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="transferPlayersConfirmExecuteBtn" data-testid="btn-transfer-players-execute">Confirm</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% if is_granted('ROLE_SUPER_ADMIN') %}
<script>
var TRANSFER_AGENTS = {{ agentsJson|raw }};
var TRANSFER_PLAYER_COUNTS = {{ playerCountsJson|raw }};
var transferPlayersToAgentId = null;

function openTransferPlayersModal(agentId, agentName) {
    transferPlayersToAgentId = null;
    document.getElementById('transferPlayersFromAgentId').value = agentId;
    document.getElementById('transferPlayersFromName').textContent = agentName;
    var count = TRANSFER_PLAYER_COUNTS[agentId] || 0;
    document.getElementById('transferPlayersFromCount').textContent = 'Players: ' + count;
    document.getElementById('transferPlayersToSearch').value = '';
    document.getElementById('transferPlayersToSelected').style.display = 'none';
    document.getElementById('transferPlayersAgentList').style.display = 'none';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('transferPlayersModal')).show();
}

function filterTransferPlayersTargets(query) {
    var list = document.getElementById('transferPlayersAgentList');
    document.getElementById('transferPlayersToSelected').style.display = 'none';
    transferPlayersToAgentId = null;
    if (query.length < 1) { list.style.display = 'none'; return; }
    var q = query.toLowerCase();
    var fromAgentId = parseInt(document.getElementById('transferPlayersFromAgentId').value);
    var matches = TRANSFER_AGENTS.filter(function(a) {
        if (a.id === fromAgentId) return false;
        return a.firstName.toLowerCase().indexOf(q) !== -1
            || a.lastName.toLowerCase().indexOf(q) !== -1
            || (a.firstName + ' ' + a.lastName).toLowerCase().indexOf(q) !== -1
            || a.mobileNumber.indexOf(q) !== -1;
    }).slice(0, 20);
    if (matches.length === 0) {
        list.innerHTML = '<div>No agents found</div>';
        list.style.display = 'block'; return;
    }
    var html = '';
    matches.forEach(function(a) {
        var pc = TRANSFER_PLAYER_COUNTS[a.id] || 0;
        var safe = (a.firstName + ' ' + a.lastName).replace(/'/g, '');
        html += '<div onclick="selectTransferPlayersTarget(' + a.id + ",'" + safe + "')" + '" style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0;font-size:13px;color:#111;" data-testid="transfer-players-option-' + a.id + '">'
            + '<b>' + safe + '</b> '
            + a.mobileNumber + ' (' + pc + ' players)</div>';
    });
    list.innerHTML = html;
    list.style.display = 'block';
}

function selectTransferPlayersTarget(agentId, name) {
    transferPlayersToAgentId = agentId;
    document.getElementById('transferPlayersAgentList').style.display = 'none';
    document.getElementById('transferPlayersToSearch').value = '';
    var s = document.getElementById('transferPlayersToSelected');
    s.textContent = '✓ To: ' + name;
    s.style.display = 'block';
}

function confirmTransferPlayers() {
    if (!transferPlayersToAgentId) { alert('Please select a target agent.'); return; }
    var fid = document.getElementById('transferPlayersFromAgentId').value;
    var fn = document.getElementById('transferPlayersFromName').textContent;
    var fc = document.getElementById('transferPlayersFromCount').textContent;
    var tn = document.getElementById('transferPlayersToSelected').textContent.replace('✓ To: ', '');
    document.getElementById('transferPlayersConfirmMessage').textContent =
        'Transfer all ' + fc.toLowerCase() + '\n\nFrom: ' + fn + '\nTo: ' + tn + ' (Agent #' + transferPlayersToAgentId + ')\n\nThis action cannot be undone.';
    bootstrap.Modal.getInstance(document.getElementById('transferPlayersModal')).hide();
    document.getElementById('transferPlayersConfirmExecuteBtn').onclick = function () {
        document.getElementById('transfer-players-to-agent-id-' + fid).value = transferPlayersToAgentId;
        bootstrap.Modal.getInstance(document.getElementById('transferPlayersConfirmModal')).hide();
        document.getElementById('form-transfer-players-' + fid).submit();
    };
    bootstrap.Modal.getOrCreateInstance(document.getElementById('transferPlayersConfirmModal')).show();
}
</script>
{% endif %}
{% endblock %}