{% extends "admin/layout.html" %}
{% block title %}User Management – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-user-management">{% trans %}User Management{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Total registered users:{% endtrans %} <strong data-testid="text-total-users">{{ total }}</strong></p>
    </div>
    <div class="flex items-center gap-3 flex-wrap">
        <a href="{{ full_url('/admin/users/new') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 hover:shadow-xl transition-all" data-testid="link-create-user">
            <i class="fa fa-user-plus"></i> {% trans %}New User{% endtrans %}
        </a>
        <a href="{{ full_url('/admin/payments') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="link-view-payments">
            <i class="fa fa-money-bill-transfer text-green-500"></i> {% trans %}View All Payments{% endtrans %}
        </a>
    </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

{# ── URL helper: build query string preserving current filters, overriding page ─ #}
{% macro page_url(p) %}?search={{ search|urlencode }}&plan_id={{ plan_id or '' }}&status={{ status }}&per_page={{ per_page }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}&page={{ p }}{% endmacro %}
{# ── Sort link helper ──────────────────────────────────────────────────────── #}
{% macro sort_link(col, label) %}{% set nd = 'asc' if (sort_by == col and sort_dir == 'desc') else 'desc' %}<a href="?search={{ search|urlencode }}&plan_id={{ plan_id or '' }}&status={{ status }}&per_page={{ per_page }}&sort_by={{ col }}&sort_dir={{ nd }}&page=1" class="flex items-center gap-1 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">{{ label }}{% if sort_by == col %}<i class="fa fa-arrow-{{ 'up' if sort_dir == 'asc' else 'down' }} text-indigo-500 text-[10px]"></i>{% else %}<i class="fa fa-arrows-up-down text-gray-300 dark:text-gray-600 text-[10px]"></i>{% endif %}</a>{% endmacro %}

<!-- Search / Filter Toolbar -->
<form method="GET" action="" class="mb-4 p-3 bg-gray-50 dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 flex flex-wrap items-end gap-3" data-testid="form-user-filters">
    <div class="flex-1 min-w-[180px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Search{% endtrans %}</label>
        <div class="relative">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
            <input type="text" name="search" value="{{ search }}" placeholder="{% trans %}Username or email...{% endtrans %}"
                class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                data-testid="input-user-search">
        </div>
    </div>
    <div class="min-w-[140px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Plan{% endtrans %}</label>
        <select name="plan_id" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-testid="select-filter-plan">
            <option value="">{% trans %}All Plans{% endtrans %}</option>
            {% for p in plans %}<option value="{{ p.id }}" {% if p.id == plan_id %}selected{% endif %}>{{ p.name }}</option>{% endfor %}
        </select>
    </div>
    <div class="min-w-[140px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Status{% endtrans %}</label>
        <select name="status" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-testid="select-filter-status">
            <option value="">{% trans %}All Status{% endtrans %}</option>
            <option value="active" {% if status == 'active' %}selected{% endif %}>{% trans %}Active{% endtrans %}</option>
            <option value="expired" {% if status == 'expired' %}selected{% endif %}>{% trans %}Expired{% endtrans %}</option>
            <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>{% trans %}Cancelled{% endtrans %}</option>
            <option value="free" {% if status == 'free' %}selected{% endif %}>{% trans %}Free{% endtrans %}</option>
        </select>
    </div>
    <div class="min-w-[110px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Per page{% endtrans %}</label>
        <select name="per_page" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-testid="select-per-page">
            {% for n in [10, 25, 50, 100] %}<option value="{{ n }}" {% if n == per_page %}selected{% endif %}>{{ n }}</option>{% endfor %}
        </select>
    </div>
    <input type="hidden" name="sort_by" value="{{ sort_by }}">
    <input type="hidden" name="sort_dir" value="{{ sort_dir }}">
    <div class="flex gap-2 flex-shrink-0">
        <button type="submit" class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all" data-testid="btn-apply-filters">
            <i class="fa fa-filter mr-1"></i>{% trans %}Apply{% endtrans %}
        </button>
        <a href="{{ full_url('/admin/users') }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-reset-filters">
            <i class="fa fa-xmark mr-1"></i>{% trans %}Reset{% endtrans %}
        </a>
    </div>
</form>

<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm" data-testid="table-users">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">#</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{{ sort_link('username', _('User')) }}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{{ sort_link('plan', _('Plan & Status')) }}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{% trans %}Files{% endtrans %}</th>
                    <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-400">{{ sort_link('created_at', _('Joined')) }}</th>
                    <th class="px-4 py-3 text-right font-semibold text-gray-600 dark:text-gray-400">{% trans %}Actions{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% if users %}
                {% for u in users %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-user-{{ u.id }}">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ u.id }}</td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200" data-testid="text-username-{{ u.id }}">{{ u.username }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400" data-testid="text-email-{{ u.id }}">{{ u.email }}</div>
                        <div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{% trans %}Files{% endtrans %}: {{ u.file_count }} · {% trans %}Conv{% endtrans %}: {{ u.conversion_count }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <!-- Quick plan change -->
                        <form method="POST" action="{{ full_url('/admin/users/' ~ u.id ~ '/change-plan') }}" class="flex items-center gap-1.5 mb-1.5" data-testid="form-change-plan-{{ u.id }}">
                            <select name="plan_id" class="px-2 py-1 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs" data-testid="select-plan-{{ u.id }}">
                                {% for p in plans %}
                                <option value="{{ p.id }}" {% if p.id == u.plan_id %}selected{% endif %}>{{ p.name }}</option>
                                {% endfor %}
                            </select>
                            <button type="submit" class="px-2 py-1 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 text-xs hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-all" data-testid="btn-update-plan-{{ u.id }}">{% trans %}Set{% endtrans %}</button>
                        </form>
                        <span class="inline-block px-2 py-0.5 rounded text-xs font-medium
                            {% if u.subscription_status == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif u.subscription_status == 'expired' %}bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400
                            {% elif u.subscription_status == 'cancelled' %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400
                            {% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400{% endif %}"
                            data-testid="text-status-{{ u.id }}">
                            {{ u.subscription_status|title if u.subscription_status else 'Free' }}
                        </span>
                        {% if u.subscription_expires_at %}
                        <div class="text-xs text-gray-400 mt-0.5">{% trans %}Expires{% endtrans %}: {{ u.subscription_expires_at[:10] }}</div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-center" data-testid="text-files-{{ u.id }}">{{ u.file_count }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs" data-testid="text-joined-{{ u.id }}">{{ u.created_at[:10] if u.created_at else '–' }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ full_url('/admin/users/' ~ u.id ~ '/edit') }}"
                                class="px-3 py-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 text-xs font-semibold hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-all"
                                data-testid="btn-edit-user-{{ u.id }}">
                                <i class="fa fa-pen-to-square mr-1"></i>{% trans %}Edit{% endtrans %}
                            </a>
                            <button type="button"
                                onclick="document.getElementById('manual-pay-modal-{{ u.id }}').classList.remove('hidden')"
                                class="px-3 py-1.5 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-semibold hover:bg-green-200 dark:hover:bg-green-900/50 transition-all"
                                data-testid="btn-manual-payment-{{ u.id }}">
                                <i class="fa fa-money-bill-wave mr-1"></i>{% trans %}Pay{% endtrans %}
                            </button>
                            <button class="btn-delete-user px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 text-xs font-medium transition-all" data-id="{{ u.id }}" data-testid="btn-delete-user-{{ u.id }}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>

                <!-- Manual Payment Modal for each user -->
                <tr class="hidden" id="manual-pay-modal-{{ u.id }}-row">
                    <td colspan="6"></td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500" data-testid="text-no-users">{% trans %}No users registered yet.{% endtrans %}</td>
                </tr>
            {% endif %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% set _start = (page - 1) * per_page + 1 %}
    {% set _end   = [page * per_page, total]|min %}
    <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 flex flex-wrap items-center justify-between gap-3">
        <span class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-pagination-info">
            {% if total > 0 %}{% trans %}Showing{% endtrans %} {{ _start }}–{{ _end }} {% trans %}of{% endtrans %} {{ total }}{% else %}{% trans %}No results{% endtrans %}{% endif %}
        </span>
        {% if total_pages > 1 %}
        <div class="flex items-center gap-1 flex-wrap" data-testid="pagination-users">
            {# First / Prev #}
            {% if page > 1 %}
            <a href="{{ page_url(1) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-first-page">«</a>
            <a href="{{ page_url(page - 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-prev-page">‹ {% trans %}Prev{% endtrans %}</a>
            {% endif %}
            {# Numbered pages – show up to 7 around current #}
            {% set _lo = [1, page - 2]|max %}
            {% set _hi = [total_pages, page + 2]|min %}
            {% if _lo > 1 %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {% for p in range(_lo, _hi + 1) %}
            <a href="{{ page_url(p) }}"
               class="px-3 py-1 rounded border text-xs transition-all
               {% if p == page %}bg-indigo-600 border-indigo-600 text-white font-bold{% else %}border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}"
               data-testid="btn-page-{{ p }}">{{ p }}</a>
            {% endfor %}
            {% if _hi < total_pages %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {# Next / Last #}
            {% if page < total_pages %}
            <a href="{{ page_url(page + 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-next-page">{% trans %}Next{% endtrans %} ›</a>
            <a href="{{ page_url(total_pages) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-last-page">»</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Manual Payment Modals (one per user, outside table) -->
{% for u in users %}
<div id="manual-pay-modal-{{ u.id }}" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-lg">
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-white">{% trans %}Record Manual Payment{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}For{% endtrans %} <strong>{{ u.username }}</strong> ({{ u.email }})</p>
            </div>
            <button onclick="document.getElementById('manual-pay-modal-{{ u.id }}').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <form method="POST" action="{{ full_url('/admin/users/' ~ u.id ~ '/manual-payment') }}" class="p-6 space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <!-- Plan -->
                <div class="col-span-2">
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Assign Plan{% endtrans %} <span class="text-red-500">*</span></label>
                    <select name="plan_id" required class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-mp-plan-{{ u.id }}">
                        <option value="">{% trans %}Select a plan...{% endtrans %}</option>
                        {% for p in plans %}
                        <option value="{{ p.id }}" {% if p.id == u.plan_id %}selected{% endif %}>
                            {{ p.name }} {% if p.price_monthly > 0 %}(${{ '%.2f'|format(p.price_monthly) }}/mo){% else %}(Free){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Amount -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Amount Paid{% endtrans %}</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
                        <input type="number" name="amount" min="0" step="0.01" placeholder="0.00"
                            class="w-full pl-7 pr-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm"
                            data-testid="input-mp-amount-{{ u.id }}">
                    </div>
                </div>

                <!-- Currency -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Currency{% endtrans %}</label>
                    <select name="currency" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-mp-currency-{{ u.id }}">
                        <option value="USD">{% trans %}USD{% endtrans %}</option>
                        <option value="EUR">{% trans %}EUR{% endtrans %}</option>
                        <option value="GBP">{% trans %}GBP{% endtrans %}</option>
                        <option value="AUD">{% trans %}AUD{% endtrans %}</option>
                        <option value="CAD">{% trans %}CAD{% endtrans %}</option>
                        <option value="INR">{% trans %}INR{% endtrans %}</option>
                        <option value="JPY">{% trans %}JPY{% endtrans %}</option>
                        <option value="OTHER">{% trans %}Other{% endtrans %}</option>
                    </select>
                </div>

                <!-- Payment Method -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Payment Method{% endtrans %}</label>
                    <select name="method" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-mp-method-{{ u.id }}">
                        <option value="cash">{% trans %}Cash{% endtrans %}</option>
                        <option value="bank_transfer">{% trans %}Bank Transfer{% endtrans %}</option>
                        <option value="crypto">{% trans %}Cryptocurrency{% endtrans %}</option>
                        <option value="check">{% trans %}Check / Cheque{% endtrans %}</option>
                        <option value="wire">{% trans %}Wire Transfer{% endtrans %}</option>
                        <option value="mobile_money">{% trans %}Mobile Money{% endtrans %}</option>
                        <option value="other">{% trans %}Other{% endtrans %}</option>
                    </select>
                </div>

                <!-- Subscription Expiry -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Subscription Expires{% endtrans %}</label>
                    <input type="date" name="subscription_expires_at"
                        value="{{ u.subscription_expires_at[:10] if u.subscription_expires_at else '' }}"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm"
                        data-testid="input-mp-expires-{{ u.id }}">
                    <p class="mt-1 text-xs text-gray-400">{% trans %}Leave blank for no expiry{% endtrans %}</p>
                </div>

                <!-- Notes -->
                <div class="col-span-2">
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Notes / Reference{% endtrans %}</label>
                    <input type="text" name="notes" placeholder="{% trans %}Transaction ID, invoice number, any notes...{% endtrans %}"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm"
                        data-testid="input-mp-notes-{{ u.id }}">
                </div>
            </div>

            <!-- Info box -->
            <div class="p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-xs text-blue-700 dark:text-blue-400">
                <i class="fa fa-circle-info mr-1"></i>
                {% trans %}This will immediately set the user's plan and mark their account as active. The payment will be recorded in Manual Payments for your records.{% endtrans %}
            </div>

            <div class="flex gap-3 pt-1">
                <button type="submit" class="flex-1 py-3 rounded-xl bg-green-500 hover:bg-green-600 text-white font-bold transition-all shadow-lg shadow-green-500/20" data-testid="btn-confirm-mp-{{ u.id }}">
                    <i class="fa fa-check mr-2"></i>{% trans %}Record Payment & Set Plan{% endtrans %}
                </button>
                <button type="button" onclick="document.getElementById('manual-pay-modal-{{ u.id }}').classList.add('hidden')"
                    class="px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endfor %}

{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    $(document).on('click', '.btn-delete-user', function() {
        var id = $(this).data('id');
        var $row = $(this).closest('tr');
        var msg = 'Delete this user account permanently?\n\n\u2022 All their files, conversions, and uploads from storage\n\u2022 All shared links (those links will stop working)\n\u2022 All team memberships and access grants\n\u2022 Their sessions, API keys, and account settings\n\u2022 Payment and billing history';
        window.ocConfirm(msg, function() {
        $.ajax({
            url: '/admin/users/' + id + '/delete',
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            success: function(res) {
                if (res.success) { $row.fadeOut(300, function() { $(this).remove(); }); }
            }
        });
    });
    // Close modals on backdrop click
    document.querySelectorAll('[id^="manual-pay-modal-"]').forEach(function(modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) modal.classList.add('hidden');
        });
    });
});
</script>
{% endblock %}