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

{% block wfbo_title %}Master Agents{% endblock %}

{% block wfbo_content %}

    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }} mb-3"
                 data-testid="{{ label == 'success' ? 'flash-success' : 'flash-error' }}">{{ message }}</div>
        {% endfor %}
    {% endfor %}

<style>
.tree-node { border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.tree-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; cursor: pointer; user-select: none; transition: background .15s; }
.tree-row:hover { filter: brightness(.97); }
.tree-master { background: #1a1a2e; color: #fff; }
.tree-master--gold   { background: linear-gradient(135deg, #8a6d1a 0%, #1a1a2e 70%); }
.tree-master--silver { background: linear-gradient(135deg, #6b7075 0%, #1a1a2e 70%); }
.tree-master--bronze { background: linear-gradient(135deg, #7a4a24 0%, #1a1a2e 70%); }
.tree-agent  { background: #f0f4ff; border-top: 1px solid #e5e9ff; }
.tree-children { display: none; }
.tree-children.is-open { display: block; }
.tree-indent-1 { padding-left: 32px; }
.tree-chevron { display: inline-flex; align-items: center; transition: transform .2s; flex-shrink: 0; opacity: .7; }
.tree-chevron.is-open { transform: rotate(90deg); }
.tree-row-main { display: flex; align-items: center; gap: 10px; }
.tree-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }
.tree-row-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 16px; padding-left: 34px; font-size: 12px; }
.tree-meta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.tree-meta-label { opacity: .55; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.tree-meta-value { font-weight: 600; }
.tree-row-action { flex-shrink: 0; }
.btn-link-action { display: inline-flex; align-items: center; gap: 4px; }
.tree-count-badge { background: rgba(255,255,255,.15); border-radius: 20px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.tree-agent .tree-count-badge { background: rgba(79,70,229,.1); color: #4f46e5; }
.badge-master { background: #4f46e5; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; } /* matches badge-role--agent */
.badge-agent  { background: #d1fae5; color: #065f46; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.tree-empty { padding: 8px 16px 12px; font-size: 12px; color: #9ca3af; font-style: italic; }
.tree-players-header { background: #f5f3ff; border-top: 1px solid #ede9fe; cursor: pointer; }
.tree-players-header:hover { background: #ede9fe; }
.tree-player { background: #fff; border-top: 1px solid #f9fafb; }
.tree-player .tree-name { color: #374151; font-weight: 600; }
.badge-active   { background: #dcfce7; color: #166534; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.badge-suspended { background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:800; flex-shrink:0; background:rgba(255,255,255,.08); }
.tree-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
@media (max-width: 640px) {
    .tree-row-main { flex-wrap: wrap; }
    .tree-name { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tree-row-actions { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
    .tree-row-stats { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); padding-left: 0; }
    .wfbo-toolbar { flex-direction: column; align-items: stretch !important; }
    .wfbo-search-form { flex-wrap: wrap; }
    .wfbo-search-form input[type="search"] { width: 100% !important; }
    .wfbo-search-wrap { flex: 1 1 100%; }
}
</style>

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_master_agents', {period: p.key, search: search}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    <div class="wfbo-toolbar d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
        <p style="font-size:13px; color:#6b7280; margin:0;">
            {{ masterAgents|length }} master agent{{ masterAgents|length != 1 ? 's' : '' }}{% if search %} matching <strong>"{{ search }}"</strong>{% else %} — ranked by total downline bets ({{ period.label }}), click any row to expand{% endif %}.
        </p>
        <form method="GET" action="{{ path('app_wfbo_master_agents') }}"
              class="wfbo-search-form"
              style="display:flex; align-items:center; gap:8px;">
            <input type="hidden" name="period" value="{{ period.period }}">
            <div class="wfbo-search-wrap" style="position:relative;">
                <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 master agents, agents…"
                       style="padding:8px 12px 8px 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; background:#fff; width:300px; max-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 search %}
                <a href="{{ path('app_wfbo_master_agents', {period: period.period}) }}"
                   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>

    {% for master in masterAgents %}
    {% set masterAgents_ = agentsByMaster[master.id] ?? [] %}
    {% set masterAgentCount = masterAgents_|length %}
    {% set rank = loop.index %}
    {% set rankColor = rank == 1 ? '#ffd700' : (rank == 2 ? '#c0c0c0' : (rank == 3 ? '#cd7f32' : '#9ca3af')) %}

    <div class="tree-node" data-testid="tree-master-{{ master.id }}">

        {# ── Master Agent row ── #}
        <div class="tree-row tree-master {% if rank == 1 %}tree-master--gold{% elseif rank == 2 %}tree-master--silver{% elseif rank == 3 %}tree-master--bronze{% endif %}" onclick="toggleNode('master-{{ master.id }}')">
            <div class="tree-row-main">
                <svg class="tree-chevron {% if search %}is-open{% endif %}" id="chevron-master-{{ master.id }}" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
                <span class="rank-badge" data-testid="rank-badge-{{ master.id }}" style="color:{{ rankColor }}; border:1.5px solid {{ rankColor }};">{{ rank }}</span>
                <span class="badge-master">Master Agent</span>
                <span class="tree-name">{{ master.firstName }} {{ master.lastName }}</span>
                <div class="tree-row-actions">
                    <button type="button"
                            data-testid="btn-view-link-master-{{ master.id }}"
                            {% if master.referralCode %}
                            onclick="event.stopPropagation(); openLinkModal('{{ master.firstName }} {{ master.lastName }}', {{ (url('app_register') ~ '?ref=' ~ master.referralCode)|json_encode }})"
                            {% else %}
                            disabled
                            {% endif %}
                            class="btn btn-sm btn-outline-secondary tree-row-action btn-link-action"
                            style="font-size:11px; padding:3px 10px; border-radius:6px;{% if not master.referralCode %} opacity:.5; cursor:not-allowed;{% endif %}"
                            title="{{ master.referralCode ? 'View agent link' : 'No referral code' }}">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                        Link
                    </button>
                    <button type="button"
                            data-testid="btn-edit-commission-{{ master.id }}"
                            onclick="event.stopPropagation(); openEditMasterCommissionModal({{ master.id }}, '{{ master.firstName }} {{ master.lastName }}', {{ master.commissionRateOverride is not null ? master.commissionRateOverride : 'null' }}, {{ master.liveRacingCommissionRateOverride is not null ? master.liveRacingCommissionRateOverride : 'null' }})"
                            class="btn btn-sm btn-outline-secondary tree-row-action"
                            style="font-size:11px; padding:3px 10px; border-radius:6px;">
                        Edit Commission
                    </button>
                </div>
            </div>
            <div class="tree-row-stats">
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Commission</span>
                    <span class="tree-meta-value">
                        {{ master.commissionRateOverride is not null ? master.commissionRateOverride|number_format(2) : masterCommissionRate|number_format(2) }}%
                        {% if master.commissionRateOverride is not null %}<span style="opacity:.6; font-weight:400;">(override)</span>{% endif %}
                    </span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Live Racing Commission</span>
                    <span class="tree-meta-value">
                        {{ master.liveRacingCommissionRateOverride is not null ? master.liveRacingCommissionRateOverride|number_format(2) : liveRacingMasterCommissionRate|number_format(2) }}%
                        {% if master.liveRacingCommissionRateOverride is not null %}<span style="opacity:.6; font-weight:400;">(override)</span>{% endif %}
                    </span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Wallet</span>
                    <span class="tree-meta-value">₱{{ master.walletBalance|number_format(2) }}</span>
                </div>
                <div class="tree-meta-item" style="color:{{ rankColor }};">
                    <span class="tree-meta-label">Total Bet ({{ period.label }})</span>
                    <span class="tree-meta-value">₱{{ (totalBetAmounts[master.id] ?? 0)|number_format(2) }}</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Revenue ({{ period.label }})</span>
                    <span class="tree-meta-value">₱{{ (totalRevenue[master.id] ?? 0)|number_format(2) }}</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Total Deposits ({{ period.label }})</span>
                    <span class="tree-meta-value">₱{{ (totalDeposits[master.id] ?? 0)|number_format(2) }}</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Win Rate</span>
                    <span class="tree-meta-value">{{ (totalWinRate[master.id] ?? 0)|number_format(2) }}%</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Total Players</span>
                    <span class="tree-meta-value">{{ (directReferrals[master.id] ?? [])|length }}</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Active Players</span>
                    <span class="tree-meta-value">{{ activeCounts[master.id] ?? 0 }}</span>
                </div>
                <div class="tree-meta-item" style="color:#a5b4fc;">
                    <span class="tree-meta-label">Agents</span>
                    <span class="tree-meta-value">{{ masterAgentCount }}</span>
                </div>
            </div>
        </div>

        {# ── Agents under this master ── #}
        <div class="tree-children {% if search %}is-open{% endif %}" id="master-{{ master.id }}">
            {% if masterAgents_|length == 0 %}
                <div class="tree-empty tree-indent-1">No agents yet.</div>
            {% else %}
                {% for agent in masterAgents_ %}

                {# Agent row #}
                <div class="tree-row tree-agent tree-indent-1" onclick="toggleNode('agent-{{ agent.id }}')">
                    <div class="tree-row-main">
                        <svg class="tree-chevron {% if search %}is-open{% endif %}" id="chevron-agent-{{ agent.id }}" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 18 15 12 9 6"/>
                        </svg>
                        <span class="badge-agent">Agent</span>
                        <span class="tree-name" style="color:#1e1b4b;">{{ agent.firstName }} {{ agent.lastName }}</span>
                        <div class="tree-row-actions">
                            <button type="button"
                                    data-testid="btn-view-link-agent-{{ agent.id }}"
                                    {% if agent.referralCode %}
                                    onclick="event.stopPropagation(); openLinkModal('{{ agent.firstName }} {{ agent.lastName }}', {{ (url('app_register') ~ '?ref=' ~ agent.referralCode)|json_encode }})"
                                    {% else %}
                                    disabled
                                    {% endif %}
                                    class="btn btn-sm btn-outline-secondary tree-row-action btn-link-action"
                                    style="font-size:11px; padding:3px 10px; border-radius:6px;{% if not agent.referralCode %} opacity:.5; cursor:not-allowed;{% endif %}"
                                    title="{{ agent.referralCode ? 'View agent link' : 'No referral code' }}">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                Link
                            </button>
                            <button type="button"
                                    data-testid="btn-reassign-agent-{{ agent.id }}"
                                    onclick="event.stopPropagation(); openReassignModal({{ agent.id }}, '{{ agent.firstName }} {{ agent.lastName }}')"
                                    class="btn btn-sm btn-outline-secondary tree-row-action"
                                    style="font-size:11px; padding:3px 10px; border-radius:6px;">
                                Reassign
                            </button>
                        </div>
                    </div>
                    <div class="tree-row-stats">
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Commission</span>
                            <span class="tree-meta-value">{{ agent.agentCommissionRate is not null ? agent.agentCommissionRate|number_format(2) ~ '%' : '—' }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Live Racing Commission</span>
                            <span class="tree-meta-value">{{ agent.liveRacingCommissionRate is not null ? agent.liveRacingCommissionRate|number_format(2) ~ '%' : '—' }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Wallet</span>
                            <span class="tree-meta-value">₱{{ agent.walletBalance|number_format(2) }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Revenue ({{ period.label }})</span>
                            <span class="tree-meta-value">₱{{ (totalRevenue[agent.id] ?? 0)|number_format(2) }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Total Deposits ({{ period.label }})</span>
                            <span class="tree-meta-value">₱{{ (totalDeposits[agent.id] ?? 0)|number_format(2) }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Win Rate</span>
                            <span class="tree-meta-value">{{ (totalWinRate[agent.id] ?? 0)|number_format(2) }}%</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Total Players</span>
                            <span class="tree-meta-value">{{ (directReferrals[agent.id] ?? [])|length }}</span>
                        </div>
                        <div class="tree-meta-item" style="color:#4b5563;">
                            <span class="tree-meta-label">Active Players</span>
                            <span class="tree-meta-value">{{ activeCounts[agent.id] ?? 0 }}</span>
                        </div>
                    </div>
                </div>

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

    </div>
    {% else %}
    <div class="card table-card">
        <div class="table-scroll">
            <table class="data-table"><tbody>
                <tr><td class="td-empty">No master agents found.</td></tr>
            </tbody></table>
        </div>
    </div>
    {% endfor %}

{# ── Reassign Modal ── #}
<div id="reassign-modal"
     data-testid="reassign-modal"
     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:12px; padding:28px 32px; width:100%; max-width:460px; position:relative; box-shadow:0 8px 32px rgba(0,0,0,.18);">
        <button onclick="closeReassignModal()"
                style="position:absolute; top:12px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:#9ca3af; line-height:1;">×</button>
        <h3 style="font-size:16px; font-weight:700; margin-bottom:4px; color:#111;">Reassign</h3>
        <p id="reassign-subtitle" style="font-size:13px; color:#6b7280; margin-bottom:20px;"></p>

        <form id="reassign-form" method="POST" action="">
            <label style="font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:6px;">
                New Parent
            </label>

            <select id="select-master" name="parent_id"
                    style="width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; margin-bottom:20px;">
                <option value="">— Select Master Agent —</option>
                {% for ma in allMasterAgents %}
                    <option value="{{ ma.id }}">{{ ma.firstName }} {{ ma.lastName }} ({{ ma.mobileNumber }})</option>
                {% endfor %}
            </select>

            <div class="d-flex gap-2">
                <button type="submit"
                        data-testid="btn-reassign-confirm"
                        style="flex:1; padding:10px; border-radius:8px; background:#111827; color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer;">
                    Confirm
                </button>
                <button type="button" onclick="closeReassignModal()"
                        style="padding:10px 16px; border-radius:8px; background:transparent; color:#6b7280; font-size:13px; border:1px solid #d1d5db; cursor:pointer;">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

{# ── Edit Master Agent Commission Modal ── #}
<div id="edit-master-commission-modal"
     data-testid="edit-master-commission-modal"
     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:12px; padding:28px 32px; width:100%; max-width:460px; position:relative; box-shadow:0 8px 32px rgba(0,0,0,.18);">
        <button onclick="closeEditMasterCommissionModal()"
                style="position:absolute; top:12px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:#9ca3af; line-height:1;">×</button>
        <h3 style="font-size:16px; font-weight:700; margin-bottom:4px; color:#111;">Edit Commission Rates</h3>
        <p id="edit-master-commission-subtitle" style="font-size:13px; color:#6b7280; margin-bottom:20px;"></p>

        <form id="edit-master-commission-form" method="POST" action="">
            <label style="font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:6px;">
                Casino Commission Rate (%)
            </label>
            <input type="number" id="input-master-commission-rate" name="commission_rate"
                   min="0" max="100" step="0.01"
                   placeholder="Leave blank to use global rate ({{ masterCommissionRate|number_format(2) }}%)"
                   style="width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; margin-bottom:16px;">

            <label style="font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:6px;">
                Live Racing Commission Rate (%)
            </label>
            <input type="number" id="input-master-lr-commission-rate" name="live_racing_commission_rate"
                   min="0" max="100" step="0.01"
                   placeholder="Leave blank to use global rate ({{ liveRacingMasterCommissionRate|number_format(2) }}%)"
                   style="width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; margin-bottom:20px;">

            <div class="d-flex gap-2">
                <button type="submit"
                        data-testid="btn-edit-commission-confirm"
                        style="flex:1; padding:10px; border-radius:8px; background:#111827; color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer;">
                    Save
                </button>
                <button type="button" onclick="closeEditMasterCommissionModal()"
                        style="padding:10px 16px; border-radius:8px; background:transparent; color:#6b7280; font-size:13px; border:1px solid #d1d5db; cursor:pointer;">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

{# ── Agent Link Modal ── #}
<div id="agent-link-modal"
     data-testid="agent-link-modal"
     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:12px; padding:28px 32px; width:100%; max-width:460px; position:relative; box-shadow:0 8px 32px rgba(0,0,0,.18);">
        <button onclick="closeAgentLinkModal()"
                style="position:absolute; top:12px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:#9ca3af; line-height:1;">×</button>
        <h3 style="font-size:16px; font-weight:700; margin-bottom:4px; color:#111;">Agent Link</h3>
        <p id="agent-link-subtitle" style="font-size:13px; color:#6b7280; margin-bottom:20px;"></p>

        <label style="font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:6px;">
            Referral Link
        </label>
        <div class="d-flex gap-2" style="margin-bottom:20px;">
            <input type="text" id="agent-link-input" readonly
                   style="flex:1; min-width:0; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; color:#111;">
            <button type="button" id="btn-agent-link-copy"
                    data-testid="btn-agent-link-copy"
                    onclick="copyAgentLink()"
                    style="padding:10px 16px; border-radius:8px; background:#111827; color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer; white-space:nowrap;">
                Copy
            </button>
        </div>

        <button type="button" onclick="closeAgentLinkModal()"
                style="width:100%; padding:10px; border-radius:8px; background:transparent; color:#6b7280; font-size:13px; border:1px solid #d1d5db; cursor:pointer;">
            Close
        </button>
    </div>
</div>

<script>
function toggleNode(id) {
    const el      = document.getElementById(id);
    const chevron = document.getElementById('chevron-' + id);
    if (!el) return;
    const isOpen  = el.classList.toggle('is-open');
    if (chevron) chevron.classList.toggle('is-open', isOpen);
}

function openReassignModal(userId, userName) {
    const modal = document.getElementById('reassign-modal');
    document.getElementById('reassign-subtitle').textContent = 'Move "' + userName + '" to a different Master Agent.';
    document.getElementById('reassign-form').action = '/wfbo/master-agents/' + userId + '/reassign';
    modal.style.display = 'flex';
}

function closeReassignModal() {
    document.getElementById('reassign-modal').style.display = 'none';
}

document.getElementById('reassign-modal').addEventListener('click', function(e) {
    if (e.target === this) closeReassignModal();
});

function openEditMasterCommissionModal(userId, userName, currentRate, currentLrRate) {
    const modal = document.getElementById('edit-master-commission-modal');
    document.getElementById('edit-master-commission-subtitle').textContent = 'Set custom commission rates for "' + userName + '", or leave blank to use the global rates.';
    document.getElementById('edit-master-commission-form').action = '/wfbo/master-agents/' + userId + '/edit-commission';
    document.getElementById('input-master-commission-rate').value = currentRate === null ? '' : currentRate;
    document.getElementById('input-master-lr-commission-rate').value = currentLrRate === null ? '' : currentLrRate;
    modal.style.display = 'flex';
}

function closeEditMasterCommissionModal() {
    document.getElementById('edit-master-commission-modal').style.display = 'none';
}

document.getElementById('edit-master-commission-modal').addEventListener('click', function(e) {
    if (e.target === this) closeEditMasterCommissionModal();
});

function openLinkModal(userName, link) {
    const modal = document.getElementById('agent-link-modal');
    document.getElementById('agent-link-subtitle').textContent = 'Referral link for "' + userName + '".';
    const input = document.getElementById('agent-link-input');
    input.value = link;
    const btn = document.getElementById('btn-agent-link-copy');
    btn.textContent = 'Copy';
    btn.style.backgroundColor = '#111827';
    modal.style.display = 'flex';
}

function closeAgentLinkModal() {
    document.getElementById('agent-link-modal').style.display = 'none';
}

function copyAgentLink() {
    const input = document.getElementById('agent-link-input');
    const btn = document.getElementById('btn-agent-link-copy');
    function onSuccess() {
        btn.textContent = 'Copied!';
        btn.style.backgroundColor = '#16a34a';
        setTimeout(function () { btn.textContent = 'Copy'; btn.style.backgroundColor = '#111827'; }, 2000);
    }
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(input.value).then(onSuccess).catch(function () { fallbackCopy(input, onSuccess); });
    } else {
        fallbackCopy(input, onSuccess);
    }
}

function fallbackCopy(input, onSuccess) {
    input.removeAttribute('readonly');
    input.focus();
    input.select();
    try { document.execCommand('copy'); onSuccess(); } catch (e) {}
    input.setAttribute('readonly', 'readonly');
}

document.getElementById('agent-link-modal').addEventListener('click', function(e) {
    if (e.target === this) closeAgentLinkModal();
});
</script>

{% endblock %}