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

{% block title %}My Sub-Agents{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-sub-agents-title">My Sub-Agents</h1>
    <p class="mb-4" style="font-size:13px; color:#afafaf;">
        {{ rows|length }} sub-agent{{ rows|length != 1 ? 's' : '' }}{% if search %} matching "{{ search }}"{% else %} under your account, ranked by activity{% endif %}.
    </p>

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

    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="agent-sub-agents-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white" style="width:40px;">#</th>
                        <th class="th-white">Sub-Agent</th>
                        <th class="th-white">Mobile</th>
                        <th class="th-white">Commission</th>
                        <th class="th-white">Invited Players</th>
                        <th class="th-white">Active Players</th>
                        <th class="th-white">Total Earned</th>
                        <th class="th-white">Wallet</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    {% set sub = row[0] %}
                    {% set rank = loop.index %}
                    <tr class="table-row" data-testid="agent-sub-agents-row-{{ sub.id }}">
                        <td class="td-cell td-cell--muted" style="font-weight:700;">
                            {% if rank == 1 %}
                                <span style="color:#ffd700;">{{ rank }}</span>
                            {% elseif rank == 2 %}
                                <span style="color:#c0c0c0;">{{ rank }}</span>
                            {% elseif rank == 3 %}
                                <span style="color:#cd7f32;">{{ rank }}</span>
                            {% else %}
                                {{ rank }}
                            {% endif %}
                        </td>
                        <td class="td-cell fw-semibold">{{ sub.firstName }} {{ sub.lastName }}</td>
                        <td class="td-cell td-cell--muted font-mono-sm">{{ sub.mobileNumber }}</td>
                        <td class="td-cell">
                            {% if sub.agentCommissionRate is not null %}
                                <span style="color:#000000; font-weight:600;">{{ sub.agentCommissionRate|number_format(2) }}%</span>
                            {% else %}
                                <span class="td-cell--muted">—</span>
                            {% endif %}
                        </td>
                        <td class="td-cell fw-semibold">{{ row.totalInvited }}</td>
                        <td class="td-cell fw-semibold">
                            {% if row.activePlayers > 0 %}
                                <span style="color:#60a5fa;">{{ row.activePlayers }}</span>
                            {% else %}
                                <span class="td-cell--muted">0</span>
                            {% endif %}
                        </td>
                        <td class="td-cell fw-semibold">₱{{ row.totalCommission|number_format(2) }}</td>
                        <td class="td-cell fw-semibold">₱{{ sub.walletBalance|number_format(2) }}</td>
                        <td class="td-cell td-cell--nowrap">
                            <button type="button"
                                    onclick="openEditCommissionModal({{ sub.id }}, '{{ sub.firstName }} {{ sub.lastName }}', {{ sub.agentCommissionRate ?? 0 }}, '{{ path('app_agent_edit_commission', {id: sub.id}) }}')"
                                    style="padding:5px 12px; border-radius:6px; background:#2a2a2a; color:#ffffff; font-size:12px; font-weight:600; border:1px solid #3a3a3a; cursor:pointer;">
                                Edit Commission
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" class="td-empty">No sub-agents yet. Promote players to Sub-Agent from the Players tab.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Edit Commission Modal #}
    <div id="edit-commission-modal"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
        <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:28px 32px; width:100%; max-width:400px; position:relative;">
            <button onclick="closeEditCommissionModal()"
                    style="position:absolute; top:12px; right:16px; background:none; border:none; color:#afafaf; font-size:20px; cursor:pointer; line-height:1;">×</button>
            <h3 style="color:#ffffff; font-size:16px; font-weight:700; margin-bottom:6px;">Edit Commission Rate</h3>
            <p id="edit-commission-subtitle" style="color:#afafaf; font-size:13px; margin-bottom:20px;"></p>
            <form id="edit-commission-form" method="POST" action="">
                <label style="color:#afafaf; font-size:12px; font-weight:600; display:block; margin-bottom:6px;">Commission Rate (%)</label>
                <input type="number" name="commission_rate" id="edit-commission-rate"
                       min="0" max="100" step="0.01" required
                       style="width:100%; background:#111; border:1px solid #2a2a2a; color:#fff; border-radius:8px; padding:10px 12px; font-size:14px; margin-bottom:20px;">
                <div class="d-flex gap-2">
                    <button type="submit" style="flex:1; padding:10px; border-radius:8px; background:#ffffff; color:#000000; font-size:13px; font-weight:700; border:none; cursor:pointer;">Save</button>
                    <button type="button" onclick="closeEditCommissionModal()" style="padding:10px 16px; border-radius:8px; background:transparent; color:#afafaf; font-size:13px; border:1px solid #2a2a2a; cursor:pointer;">Cancel</button>
                </div>
            </form>
        </div>
    </div>

<script>
function openEditCommissionModal(userId, userName, currentRate, actionUrl) {
    document.getElementById('edit-commission-subtitle').textContent = 'Update commission rate for ' + userName + '.';
    document.getElementById('edit-commission-form').action = actionUrl;
    document.getElementById('edit-commission-rate').value = parseFloat(currentRate).toFixed(2);
    document.getElementById('edit-commission-modal').style.display = 'flex';
}
function closeEditCommissionModal() {
    document.getElementById('edit-commission-modal').style.display = 'none';
}
document.getElementById('edit-commission-modal').addEventListener('click', function(e) {
    if (e.target === this) closeEditCommissionModal();
});
</script>

{% endblock %}