{% extends "base.html" %}
{% block title %}Sub-Admins Management - OpenVPN Manager{% endblock %}

{% block content %}
<style>
.sub-admin-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.10), rgba(17, 24, 39, 0.55) 65%);
    border: 1px solid rgba(var(--stat-rgb), 0.25);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 10px 26px -18px rgba(var(--stat-rgb), 0.6);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sub-admin-card .node-actions-compact {
    margin-top: auto;
    padding-top: 1rem;
}
.sub-admin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--stat-rgb), 0.5);
    box-shadow: 0 14px 28px -14px rgba(var(--stat-rgb), 0.4);
}
.light-theme .sub-admin-card {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.07), rgba(255, 255, 255, 0.85) 65%);
    border-color: rgba(var(--stat-rgb-light), 0.28);
    box-shadow: 0 10px 22px -18px rgba(var(--stat-rgb-light), 0.35);
}
.light-theme .sub-admin-card:hover {
    border-color: rgba(var(--stat-rgb-light), 0.55);
    box-shadow: 0 14px 24px -14px rgba(var(--stat-rgb-light), 0.28);
}

.sub-admin-card-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background-color: rgba(var(--stat-rgb), 0.16);
    color: rgb(var(--stat-rgb));
    box-shadow: 0 0 14px -4px rgba(var(--stat-rgb), 0.5);
    transition: transform 0.3s ease;
}
.group:hover .sub-admin-card-icon {
    transform: rotate(-10deg);
}
.light-theme .sub-admin-card-icon {
    background-color: rgba(var(--stat-rgb-light), 0.12);
    color: rgb(var(--stat-rgb-light));
    box-shadow: 0 0 10px -3px rgba(var(--stat-rgb-light), 0.35);
}

.sub-admin-card .node-stat-item .stat-value {
    background-color: rgba(var(--stat-rgb), 0.1);
    border-color: rgba(var(--stat-rgb), 0.3);
}
.light-theme .sub-admin-card .node-stat-item .stat-value {
    background-color: rgba(var(--stat-rgb-light), 0.08);
    border-color: rgba(var(--stat-rgb-light), 0.3);
}

.sub-admin-card .node-action-btn-compact:hover {
    background-color: rgb(var(--stat-rgb));
}
.light-theme .sub-admin-card .node-action-btn-compact:hover {
    background-color: rgb(var(--stat-rgb-light));
}

#subAdminLogsTable thead {
    background: rgba(96, 165, 250, 0.08);
}
#subAdminLogsTable tbody tr:hover {
    background: rgba(96, 165, 250, 0.06);
}
.light-theme #subAdminLogsTable thead {
    background: rgba(37, 99, 235, 0.06);
}
.light-theme #subAdminLogsTable tbody tr:hover {
    background: rgba(37, 99, 235, 0.05);
}
</style>
<div class="container mx-auto px-4 py-8">

    <div class="mb-6 flex justify-between items-center"> 
    <a href="{{ url_for('index_with_path') }}" class="bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-6 py-2 rounded-lg items-center gap-2 transition-all duration-200 hover:shadow-lg">
        <i class="fas fa-arrow-left fa-fw"></i>
        <span>Home</span>
    </a>
</div>



<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
    <div class="mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
        <div>
            <p class="mini-stat-label">Total Resellers</p>
            <p class="mini-stat-value">{{ sub_admin_stats.total }}</p>
        </div>
        <div class="mini-stat-icon"><i class="fas fa-users"></i></div>
    </div>

    <div class="mini-stat-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
        <div>
            <p class="mini-stat-label">Active</p>
            <p class="mini-stat-value">{{ sub_admin_stats.active }}</p>
        </div>
        <div class="mini-stat-icon"><i class="fas fa-user-check"></i></div>
    </div>

    <div class="mini-stat-card" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
        <div>
            <p class="mini-stat-label">Inactive</p>
            <p class="mini-stat-value">{{ sub_admin_stats.inactive }}</p>
        </div>
        <div class="mini-stat-icon"><i class="fas fa-user-slash"></i></div>
    </div>

    <div class="mini-stat-card" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
        <div>
            <p class="mini-stat-label">Expired</p>
            <p class="mini-stat-value">{{ sub_admin_stats.expired }}</p>
        </div>
        <div class="mini-stat-icon"><i class="fas fa-clock"></i></div>
    </div>
</div>

<div class="compact-card mb-6" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
    <div class="flex flex-col md:flex-row items-start gap-x-8 gap-y-6">
        <div class="w-full md:w-1/3 flex-shrink-0">
            <h3 class="compact-card-title text-base"><i class="fas fa-search text-blue-400"></i> Search Resellers</h3>
            <form id="subAdminSearchForm" method="GET" action="{{ url_for('sub_admins_management') }}">
                <div class="relative">
                    <input type="text" id="subAdminSearchInput" name="search"
                           placeholder="Search by username, notes or Telegram ID..."
                           class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           value="{{ search or '' }}"
                           autocomplete="off">
                    <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"></button>
                </div>
            </form>
        </div>

        <div class="w-full md:flex-grow">
            <h3 class="compact-card-title text-base"><i class="fas fa-filter text-blue-400"></i> Filter by Status</h3>
            <div id="subAdminFilterControls" class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                <div class="sub-admin-filter-card filter-card-label" data-status="active" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                    <input type="radio" name="sub_admin_status_filter" value="active" class="sub-admin-filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <div class="filter-icon"><i class="fas fa-user-check"></i></div>
                    <span class="filter-text">Active</span>
                </div>

                <div class="sub-admin-filter-card filter-card-label" data-status="inactive" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
                    <input type="radio" name="sub_admin_status_filter" value="inactive" class="sub-admin-filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <div class="filter-icon"><i class="fas fa-user-slash"></i></div>
                    <span class="filter-text">Inactive</span>
                </div>

                <div class="sub-admin-filter-card filter-card-label" data-status="expired" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
                    <input type="radio" name="sub_admin_status_filter" value="expired" class="sub-admin-filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <div class="filter-icon"><i class="fas fa-clock"></i></div>
                    <span class="filter-text">Expired</span>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <div class="lg:col-span-1 flex flex-col gap-y-6">
    <div class="compact-card lg:sticky lg:top-6" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
        <h2 class="compact-card-title text-base mb-4"><i class="fas fa-bolt text-purple-400"></i> Sub-Admin Quick Actions</h2>

        <button onclick="openAddSubAdminModal()" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base transition-all duration-200 hover:shadow-lg">
            <i class="fas fa-plus mr-2"></i> Create Sub-Admin Account
        </button>

        <button id="openLogsModalBtn" class="mt-4 w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base transition-all duration-200 hover:shadow-lg">
            <i class="fas fa-clipboard-list fa-fw"></i>
            <span>Audit Logs</span>
        </button>

        <a href="{{ url_for('sub_admins_usage_report') }}" class="mt-4 w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base transition-all duration-200 hover:shadow-lg flex items-center justify-center gap-2">
            <i class="fas fa-chart-column fa-fw"></i>
            <span>Usage Report</span>
        </a>
    </div>
</div>

        <div class="lg:col-span-2 flex flex-col gap-y-6">
            <div class="compact-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                <div id="subAdminProtocolFilterControls" class="flex items-center justify-center gap-2 flex-wrap mb-4">
                    <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 59,130,246; --stat-rgb-light: 37,99,235;" title="OpenVPN">
                        <input type="checkbox" name="protocol_filter" value="openvpn" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                        <i class="fas fa-shield-alt filter-icon"></i>
                    </label>
                    <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 167,139,250; --stat-rgb-light: 124,58,237;" title="L2TP">
                        <input type="checkbox" name="protocol_filter" value="l2tp" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                        <i class="fas fa-key filter-icon"></i>
                    </label>
                    <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;" title="Cisco">
                        <input type="checkbox" name="protocol_filter" value="cisco" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                        <i class="fas fa-globe filter-icon"></i>
                    </label>
                    <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;" title="WireGuard">
                        <input type="checkbox" name="protocol_filter" value="wireguard" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                        <i class="fas fa-network-wired filter-icon"></i>
                    </label>
                    <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;" title="sing-box">
                        <input type="checkbox" name="protocol_filter" value="singbox" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                        <i class="fas fa-bolt filter-icon"></i>
                    </label>
                </div>

                <h3 class="compact-card-title text-base"><i class="fas fa-list text-blue-400"></i> Sub-Admins List</h3>

                <div id="subAdminListContainer" class="grid grid-cols-1 xl:grid-cols-2 gap-4 transition-opacity duration-200">
    {% if sub_admin_data %}
        {% for sa, user_count in sub_admin_data %}
            {% include '_sub_admin_card.html' %}
        {% endfor %}
    {% else %}
        <div class="col-span-full text-center text-gray-400 py-10">
            <div class="w-14 h-14 mx-auto mb-4 rounded-lg bg-gray-900 border border-gray-700 flex items-center justify-center">
                <i class="fas fa-search text-xl"></i>
            </div>
            <p class="text-gray-300 font-semibold">No sub-admins found.</p>
            <p class="text-gray-500 text-sm mt-2">Change the search text or selected filter.</p>
        </div>
    {% endif %}
</div>
            </div>
        </div>
    </div>
</div>

<div id="deleteSubAdminModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-md border border-gray-700">
        <h2 class="text-xl font-bold text-white flex items-center gap-3 mb-4">
            <span class="system-status-icon-badge text-red-400 bg-red-900">
                <i class="fas fa-trash"></i>
            </span>
            <span>Confirm Deletion</span>
        </h2>
        <div class="compact-card" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
            <p class="text-gray-300" id="deleteConfirmText">Are you sure?</p>
        </div>
        <form id="deleteSubAdminForm" method="POST" class="hidden"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"></form>
        <div class="flex gap-4 mt-4">
            <button onclick="closeDeleteSubAdminModal()" class="flex-1 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Cancel</button>
            <button onclick="confirmDeleteSubAdmin()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Yes, Delete</button>
        </div>
    </div>
</div>

<div id="resetUsageModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-md border border-gray-700">
        <h2 class="text-xl font-bold text-white flex items-center gap-3 mb-4">
            <span class="system-status-icon-badge text-red-400 bg-red-900">
                <i class="fas fa-sync-alt"></i>
            </span>
            <span>Confirm Usage Reset</span>
        </h2>
        <div class="compact-card" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
            <p class="text-gray-300" id="resetConfirmText">Are you sure?</p>
        </div>
        <form id="resetUsageForm" method="POST" class="hidden"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"></form>
        <div class="flex gap-4 mt-4">
            <button onclick="closeResetUsageModal()" class="flex-1 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Cancel</button>
            <button onclick="confirmResetUsage()" class="flex-1 bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Yes, Reset</button>
        </div>
    </div>
</div>

<div id="addSubAdminModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-2xl border border-gray-700 flex flex-col" style="height:95vh; max-height: 720px;">
        <div class="flex-shrink-0 flex justify-between items-center pb-4 border-b border-gray-700">
            <h2 class="text-xl font-bold text-white flex items-center gap-3">
                <span class="system-status-icon-badge text-purple-400 bg-purple-900">
                    <i class="fas fa-user-plus"></i>
                </span>
                <span>Add New Sub-Admin</span>
            </h2>
            <button onclick="closeAddSubAdminModal()" class="text-gray-400 hover:text-white transition-colors">
                <i class="fas fa-times fa-lg"></i>
            </button>
        </div>
        <form action="{{ url_for('add_sub_admin_route') }}" method="POST" class="flex-grow min-h-0 flex flex-col overflow-hidden">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="flex-grow min-h-0 custom-scroll space-y-5 pt-6" style="overflow-y: auto; padding: 0 0.5rem 1.5rem 0.5rem;">
                <div class="compact-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                    <h3 class="compact-card-title"><i class="fas fa-id-card text-purple-400"></i> Account Details</h3>
					
					
					
					
<div class="mt-4">
  <label class="server-select-label block w-full">
    <input id="sa_is_active_modal" name="is_active" type="checkbox" class="sr-only" checked>

    <div class="server-select-card w-full flex items-start justify-between gap-3 p-3">
      <div class="flex items-start gap-2 min-w-0">
        <i class="fas fa-user-shield icon"></i>

        <div class="min-w-0">
          <div class="name text-sm font-medium">Account Status</div>
          <div class="text-[10px] modal-muted mt-0.5 leading-snug">
            Click to enable or disable this sub-admin.
          </div>
        </div>
      </div>

      <span id="saActiveBadgeModal"
            class="ss-status text-[11px] font-semibold px-2.5 py-1 rounded-full border flex-shrink-0"></span>
    </div>
  </label>
</div>
                    <div class="space-y-4 mt-4">
                        <div>
                            <label for="sa_username_modal" class="block text-sm font-medium text-gray-300 mb-1">Username</label>
                            <input type="text" id="sa_username_modal" name="username" required placeholder="e.g. reseller_john" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>

                        <div>
                            <label for="sa_password_modal" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
                            <input type="password" id="sa_password_modal" name="password" required placeholder="Choose a strong password" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>

                        <div>
                            <label for="sa_panel_path_modal" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-1">
                                Dedicated Panel Path
                            </label>
                            <div class="flex rounded-lg overflow-hidden border border-gray-600 focus-within:ring-2 focus-within:ring-indigo-500">
                                <span class="px-3 py-2 bg-gray-900 text-gray-400 text-sm font-mono border-r border-gray-600">/r/</span>
                                <input type="text" id="sa_panel_path_modal" name="panel_path"
                                       pattern="[A-Za-z0-9_-]{3,80}"
                                       class="w-full px-4 py-2 bg-gray-700 text-white border-none focus:outline-none focus:ring-0"
                                       placeholder="optional-path">
                            </div>
                            <p class="text-[10px] text-gray-400 mt-1">Optional. Use only letters, numbers, dash or underscore. Example: ali</p>
                        </div>

                        <div>
                            <label for="sa_panel_port_modal" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-1">
                                Dedicated Panel Port
                            </label>
                            <input type="number" id="sa_panel_port_modal" name="panel_port" min="1" max="65535"
                                   class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                   placeholder="e.g. 2083 (Optional)">
                        </div>

                        <div>
                            <label for="sa_sub_port_modal" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-1">
                                Dedicated Sub Port
                            </label>
                            <input type="number" id="sa_sub_port_modal" name="subscription_port" min="1" max="65535"
                                   class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                   placeholder="e.g. 2096 (Optional)">
                        </div>
                    </div>
                </div>


<div class="compact-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
    <h3 class="compact-card-title">
        <i class="fas fa-shield-alt text-green-400"></i> Allowed Protocols
    </h3>
    <p class="text-xs text-gray-400 mb-3">Select which protocols this sub-admin's users can access.</p>

    <div class="grid grid-cols-2 gap-3">
        <label class="server-select-label block">
            <input type="checkbox" name="allow_openvpn" checked class="sr-only">
            <div class="server-select-card w-full flex items-center justify-between gap-2 px-3 py-2">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-shield-alt icon text-indigo-400"></i>
                    <div class="min-w-0">
                        <div class="name text-xs font-semibold">OpenVPN</div>
                        <div class="text-xs modal-muted">Default VPN</div>
                    </div>
                </div>
            </div>
        </label>

        <label class="server-select-label block">
            <input type="checkbox" name="allow_l2tp" checked class="sr-only">
            <div class="server-select-card w-full flex items-center justify-between gap-2 px-3 py-2">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-layer-group icon text-blue-400"></i>
                    <div class="min-w-0">
                        <div class="name text-xs font-semibold">L2TP / IPsec</div>
                        <div class="text-xs modal-muted">Native VPN</div>
                    </div>
                </div>
            </div>
        </label>

        <label class="server-select-label block">
            <input type="checkbox" name="allow_cisco" checked class="sr-only">
            <div class="server-select-card w-full flex items-center justify-between gap-2 px-3 py-2">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-globe icon text-cyan-400"></i>
                    <div class="min-w-0">
                        <div class="name text-xs font-semibold">Cisco AnyConnect</div>
                        <div class="text-xs modal-muted">Cisco VPN</div>
                    </div>
                </div>
            </div>
        </label>

        <div class="server-select-label block cursor-pointer" onclick="openWgPicker(wgPickerCtxSubAdminAdd)">
            <input type="checkbox" name="allow_wg1" id="allow_wg1_add" checked class="sr-only">
            <div class="server-select-card w-full flex items-center justify-between gap-2 px-3 py-2">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-network-wired icon text-green-400"></i>
                    <div class="min-w-0">
                        <div class="name text-xs font-semibold">WireGuard</div>
                        <div class="text-xs modal-muted" id="wgSummarySubAdminAdd">wg1</div>
                    </div>
                </div>
            </div>
            <div id="wgInstancesHiddenSubAdminAdd" class="hidden"></div>
        </div>

        <div class="server-select-label block cursor-pointer" onclick="openSingboxPicker(singboxPickerCtxSubAdminAdd)">
            <input type="checkbox" name="allow_singbox" id="allow_singbox_add" checked class="sr-only">
            <div class="server-select-card w-full flex items-center justify-between gap-2 px-3 py-2">
                <div class="flex items-center gap-2 min-w-0">
                    <i class="fas fa-bolt icon text-yellow-400"></i>
                    <div class="min-w-0">
                        <div class="name text-xs font-semibold">sing-box</div>
                        <div class="text-xs modal-muted" id="singboxSummarySubAdminAdd">Not selected</div>
                    </div>
                </div>
            </div>
            <div id="singboxInboundsHiddenSubAdminAdd" class="hidden"></div>
        </div>
    </div>
</div>


                <div class="compact-card" style="--stat-rgb: 250,204,21; --stat-rgb-light: 202,138,4;">
                    <h3 class="compact-card-title"><i class="fas fa-coins text-yellow-400"></i> Account Type & Billing</h3>

                    <div class="grid grid-cols-2 gap-4 mb-5">
                        <label class="allocation-selector-label">
                            <input type="radio" name="allocation_mode" value="standard" checked onclick="toggleSubAdminMode('standard', 'add')">
                            <div class="allocation-select-card">
                                <div class="icon-box">
                                    <i class="fas fa-layer-group"></i>
                                </div>
                                <span class="text-sm font-medium text-gray-300 text-label">Standard</span>
                            </div>
                        </label>
                        
                        <label class="allocation-selector-label">
                            <input type="radio" name="allocation_mode" value="credit" onclick="toggleSubAdminMode('credit', 'add')">
                            <div class="allocation-select-card">
                                <div class="icon-box">
                                    <i class="fas fa-wallet"></i>
                                </div>
                                <span class="text-sm font-medium text-gray-300 text-label">Credit (Pay-as-you-go)</span>
                            </div>
                        </label>
                    </div>

                    <div id="credit_fields_add" class="hidden animate-fade-in space-y-4">
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Currency Unit</label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="currency-selector-label">
                                    <input type="radio" name="currency_unit" value="TOMAN" checked onchange="updateCurrencyInputs('add', 'TOMAN')">
                                    <div class="currency-select-card">
                                        <div class="icon-box">
                                            <span class="font-bold text-xs">T</span>
                                        </div>
                                        <span class="text-sm font-medium text-gray-400 currency-text">Toman</span>
                                    </div>
                                </label>
                                
                                <label class="currency-selector-label">
                                    <input type="radio" name="currency_unit" value="DOLLAR" onchange="updateCurrencyInputs('add', 'DOLLAR')">
                                    <div class="currency-select-card">
                                        <div class="icon-box">
                                            <i class="fas fa-dollar-sign text-xs"></i>
                                        </div>
                                        <span class="text-sm font-medium text-gray-400 currency-text">Dollar (USD)</span>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-1">Price Per GB</label>
                                <div class="relative">
                                    <input type="number" id="price_per_gb_add" name="price_per_gb" step="1" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-purple-500 pl-8" placeholder="5000">
                                    <span class="absolute left-3 top-2.5 text-gray-400 text-xs currency-symbol-add">T</span>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-1">Initial Wallet Balance</label>
                                <div class="relative">
                                    <input type="number" id="wallet_balance_add" name="wallet_balance" step="1" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-purple-500 pl-8" placeholder="500000">
                                    <span class="absolute left-3 top-2.5 text-gray-400 text-xs currency-symbol-add">T</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="standard_fields_add" class="space-y-4">
                        <div>
                            <label for="sa_max_users_modal" class="block text-sm font-medium text-gray-300 mb-1">Max Users</label>
                            <input type="number" id="sa_max_users_modal" name="max_users_limit" min="1" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Unlimited">
                        </div>
                        <div>
                            <label for="sa_max_data_modal" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-2">
                                <span>Total Usage Quota (GB)</span>
                                <span id="sa_max_data_modal_preview" class="text-xs font-semibold px-2 py-1 rounded-full bg-gray-700/60 text-gray-300 border border-gray-600/50 whitespace-nowrap"></span>
                            </label>
                            <input type="number" id="sa_max_data_modal" name="total_usage_quota_gb" min="0.01" step="0.01" oninput="updateGbQuotaPreview(this, 'sa_max_data_modal_preview')" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Optional (e.g. 500)">
                        </div>
                        <div>
                            <label for="sa_expiry_date_modal" class="block text-sm font-medium text-gray-300 mb-1">Expiry Date</label>
                            <input type="text" id="sa_expiry_date_modal" name="expiry_date" class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-tarikh" placeholder="Optional: Select date...">
                        </div>
                    </div>
                </div>

                <div class="compact-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                    <h3 class="compact-card-title"><i class="fas fa-server text-blue-400"></i> Server Access Control</h3>
                    <p class="text-xs text-gray-400 mb-3">Select which download options this sub-admin's users can see.</p>
                    <div id="server-access-container-add-modal" class="grid grid-cols-2 gap-2 p-3 bg-gray-900/50 rounded-lg border border-gray-600 max-h-40 overflow-y-auto custom-scroll">
                        <div class="col-span-full text-center text-gray-400">Loading server options...</div>
                    </div>
                </div>

                <div class="compact-card">
                    <div>
                        <label for="sa_notes_modal" class="block text-sm font-medium text-gray-300 mb-1">Notes (Optional)</label>
                        <textarea id="sa_notes_modal" name="notes" rows="2" placeholder="Optional notes..."
                                  class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
                    </div>
                   
                </div>
            </div>
            <div class="flex-shrink-0 pt-4 mt-4 border-t border-gray-700">
                <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base transition-all duration-200 hover:shadow-lg">
                    <i class="fas fa-check mr-2"></i> Create Sub-Admin Account
                </button>
            </div>
        </form>
    </div>
</div>




<div id="logsModal" class="audit-modal-overlay">
    <div class="audit-modal-dialog">

        <div class="audit-modal-head">
            <h3 class="audit-modal-title">
                <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                    <i class="fas fa-history"></i>
                </span>
                Audit Logs
            </h3>
            <button id="closeLogsModalBtn" class="audit-modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="audit-modal-filters">
            <select id="filterActionType">
                <option value="">All Actions</option>
                <option value="CREATE">Create</option>
                <option value="DELETE">Delete</option>
                <option value="ADD_TRAFFIC">Add Traffic</option>
                <option value="REDUCE_TRAFFIC">Reduce Traffic</option>
                <option value="RESET_TRAFFIC">Reset Traffic</option>
                <option value="CHARGE_WALLET">Charge Wallet</option>
            </select>
            <input type="text" id="filterUsername" placeholder="Username...">
            <input type="text" id="filterStartDate" placeholder="Start Date">
            <input type="text" id="filterEndDate" placeholder="End Date">
            <button id="applyLogsFilterBtn" class="audit-modal-apply-btn">Apply Filter</button>
        </div>

        <div class="audit-modal-body custom-scroll">
            <table class="audit-table" id="subAdminLogsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Target</th>
                        <th>Action</th>
                        <th>Details</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody id="logsTableBody"></tbody>
            </table>
            <div id="logsLoadingIndicator" class="audit-modal-loading hidden">
                <i class="fas fa-circle-notch fa-spin"></i>
            </div>
        </div>

        <div id="logsPaginationContainer" class="audit-modal-foot"></div>
    </div>
</div>




<script>
    function copyLinkToClipboard(text, btn) {
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text).then(() => {
                showFeedback(btn);
            }).catch(err => {
                console.error('Failed to copy:', err);
                fallbackCopy(text, btn);
            });
        } else {
            fallbackCopy(text, btn);
        }
    }

    function fallbackCopy(text, btn) {
        const textArea = document.createElement("textarea");
        textArea.value = text;
        textArea.style.position = "fixed";
        textArea.style.left = "-9999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            showFeedback(btn);
        } catch (err) {
            console.error('Fallback copy failed:', err);
        }
        document.body.removeChild(textArea);
    }

    function showFeedback(btn) {
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check text-green-400"></i>';
        setTimeout(() => {
            btn.innerHTML = originalHtml;
        }, 2000);
    }

    let subAdminIdToDelete = null;
    let subAdminIdToReset = null;

    function openDeleteSubAdminModal(id, username) {
        subAdminIdToDelete = id;
        const modal = document.getElementById('deleteSubAdminModal');
        const textElement = modal.querySelector('#deleteConfirmText');
        textElement.innerHTML = `Are you sure you want to delete sub-admin <strong class="text-yellow-400">${username}</strong>? This will also permanently delete all of their users.`;
        modal.classList.remove('hidden');
    }

    function closeDeleteSubAdminModal() {
        document.getElementById('deleteSubAdminModal').classList.add('hidden');
        subAdminIdToDelete = null;
    }

    function confirmDeleteSubAdmin() {
        if (subAdminIdToDelete) {
            const form = document.getElementById('deleteSubAdminForm');
            form.action = `{{ url_for('delete_sub_admin_route', sub_admin_id=0) }}`.replace('0', subAdminIdToDelete);
            form.submit();
        }
    }

    function openResetUsageModal(id, username) {
        subAdminIdToReset = id;
        const modal = document.getElementById('resetUsageModal');
        const textElement = modal.querySelector('#resetConfirmText');
        textElement.innerHTML = `Are you sure you want to reset the total data usage for <strong class="text-yellow-400">${username}</strong> to zero?`;
        modal.classList.remove('hidden');
    }

    function closeResetUsageModal() {
        document.getElementById('resetUsageModal').classList.add('hidden');
        subAdminIdToReset = null;
    }

    function confirmResetUsage() {
        if (subAdminIdToReset) {
            const form = document.getElementById('resetUsageForm');
            form.action = `{{ url_for('reset_sub_admin_usage', sub_admin_id=0) }}`.replace('0', subAdminIdToReset);
            form.submit();
        }
    }

    function toggleSubAdminMode(mode, type) {
        const standardFields = document.getElementById(`standard_fields_${type}`);
        const creditFields = document.getElementById(`credit_fields_${type}`);
        
        if (mode === 'credit') {
            standardFields.classList.add('hidden');
            creditFields.classList.remove('hidden');
        } else {
            standardFields.classList.remove('hidden');
            creditFields.classList.add('hidden');
        }
    }
    
    function updateCurrencyInputs(type, currency) {
        const priceInput = document.getElementById(`price_per_gb_${type}`);
        const walletInput = document.getElementById(`wallet_balance_${type}`);
        const symbols = document.querySelectorAll(`.currency-symbol-${type}`);
        
        if (currency === 'DOLLAR') {
            priceInput.step = "0.0001";
            priceInput.placeholder = "0.0004";
            
            walletInput.step = "0.0001";
            walletInput.placeholder = "10.0000";
            
            symbols.forEach(el => el.innerHTML = '<i class="fas fa-dollar-sign"></i>');
        } else {
            priceInput.step = "1";
            priceInput.placeholder = "5000";
            
            walletInput.step = "1";
            walletInput.placeholder = "500000";
            
            if (priceInput.value && priceInput.value % 1 !== 0) priceInput.value = Math.floor(priceInput.value);
            if (walletInput.value && walletInput.value % 1 !== 0) walletInput.value = Math.floor(walletInput.value);

            symbols.forEach(el => el.innerText = 'T');
        }
    }
	
	
	
	
	
	
	
document.addEventListener("DOMContentLoaded", function () {
    const subAdminSearchForm = document.getElementById("subAdminSearchForm");
    const subAdminSearchInput = document.getElementById("subAdminSearchInput");
    const subAdminFilterControls = document.getElementById("subAdminFilterControls");
    const subAdminProtocolFilterControls = document.getElementById("subAdminProtocolFilterControls");
    const subAdminListContainer = document.getElementById("subAdminListContainer");

    if (!subAdminSearchForm || !subAdminSearchInput || !subAdminFilterControls || !subAdminListContainer) {
        return;
    }

    let currentSubAdminSearch = new URLSearchParams(window.location.search).get("search") || "";
    let currentSubAdminStatus = new URLSearchParams(window.location.search).get("status") || "all";
    let currentSubAdminProtocol = new URLSearchParams(window.location.search).get("protocol") || "all";
    let lastCheckedSubAdminRadio = null;

    function debounce(func, delay) {
        let timer;

        return function (...args) {
            clearTimeout(timer);

            timer = setTimeout(function () {
                func.apply(null, args);
            }, delay);
        };
    }

    function updateSubAdminFilterCards() {
        const cards = subAdminFilterControls.querySelectorAll(".sub-admin-filter-card");
        const radios = subAdminFilterControls.querySelectorAll(".sub-admin-filter-radio");

        radios.forEach(function (radio) {
            radio.checked = false;
        });

        lastCheckedSubAdminRadio = null;

        if (currentSubAdminStatus !== "all") {
            const activeRadio = subAdminFilterControls.querySelector(`.sub-admin-filter-radio[value="${currentSubAdminStatus}"]`);
            if (activeRadio) {
                activeRadio.checked = true;
                lastCheckedSubAdminRadio = activeRadio;
            }
        }

        cards.forEach(function (card) {
            const radio = card.querySelector(".sub-admin-filter-radio");
            card.classList.toggle("filter-card-active", !!(radio && radio.checked));
        });
    }

    function updateSubAdminProtocolFilterCards() {
        if (!subAdminProtocolFilterControls) return;
        subAdminProtocolFilterControls.querySelectorAll(".filter-card-label").forEach(function (card) {
            const cb = card.querySelector('input[type="checkbox"]');
            if (!cb) return;
            cb.checked = currentSubAdminProtocol !== "all" && currentSubAdminProtocol.split(",").includes(cb.value);
            card.classList.toggle("filter-card-active", cb.checked);
        });
    }

    async function fetchAndUpdateSubAdmins(search = currentSubAdminSearch, status = currentSubAdminStatus, protocol = currentSubAdminProtocol) {
        subAdminListContainer.style.opacity = "0.45";

        const params = new URLSearchParams();

        if (search) {
            params.set("search", search);
        }

        if (protocol && protocol !== "all") {
            params.set("protocol", protocol);
        }

        if (status && status !== "all") {
            params.set("status", status);
        }

        const newUrl = new URL(window.location.href);

        newUrl.searchParams.delete("search");
        newUrl.searchParams.delete("status");
        newUrl.searchParams.delete("protocol");

        if (search) {
            newUrl.searchParams.set("search", search);
        }

        if (status && status !== "all") {
            newUrl.searchParams.set("status", status);
        }

        if (protocol && protocol !== "all") {
            newUrl.searchParams.set("protocol", protocol);
        }

        window.history.replaceState({}, "", newUrl.toString());

        try {
            const response = await fetch(`{{ url_for('api_sub_admins_list') }}?${params.toString()}`);

            if (!response.ok) {
                throw new Error("API request failed");
            }

            const data = await response.json();

            if (!data.success) {
                throw new Error(data.message || "API request failed");
            }

            subAdminListContainer.innerHTML = data.html;

            currentSubAdminSearch = search;
            currentSubAdminStatus = status || "all";
            currentSubAdminProtocol = protocol || "all";

            updateSubAdminFilterCards();
            updateSubAdminProtocolFilterCards();
        } catch (error) {
            console.error("Sub-admin fetch error:", error);

            subAdminListContainer.innerHTML = `
                <div class="col-span-full text-center text-red-400 py-10">
                    Error loading sub-admins.
                </div>
            `;
        } finally {
            subAdminListContainer.style.opacity = "1";
        }
    }

    subAdminSearchForm.addEventListener("submit", function (event) {
        event.preventDefault();
    });

    subAdminSearchInput.addEventListener(
        "input",
        debounce(function (event) {
            fetchAndUpdateSubAdmins(event.target.value.trim(), currentSubAdminStatus);
        }, 400)
    );

    subAdminFilterControls.addEventListener("click", function (event) {
        const card = event.target.closest(".sub-admin-filter-card");

        if (!card) {
            return;
        }

        event.preventDefault();

        const radio = card.querySelector(".sub-admin-filter-radio");

        if (!radio) {
            return;
        }

        let nextStatus;

        if (radio === lastCheckedSubAdminRadio) {
            radio.checked = false;
            lastCheckedSubAdminRadio = null;
            nextStatus = "all";
        } else {
            if (lastCheckedSubAdminRadio) {
                lastCheckedSubAdminRadio.checked = false;
            }

            radio.checked = true;
            lastCheckedSubAdminRadio = radio;
            nextStatus = radio.value;
        }

        fetchAndUpdateSubAdmins(currentSubAdminSearch, nextStatus);
    });

    if (subAdminProtocolFilterControls) {
        subAdminProtocolFilterControls.addEventListener("click", function (event) {
            const card = event.target.closest(".filter-card-label");
            if (!card) return;

            const selected = Array.from(subAdminProtocolFilterControls.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
            const nextProtocol = selected.length ? selected.join(",") : "all";
            card.classList.toggle("filter-card-active", !!card.querySelector('input[type="checkbox"]').checked);

            fetchAndUpdateSubAdmins(currentSubAdminSearch, currentSubAdminStatus, nextProtocol);
        });
    }

    updateSubAdminFilterCards();
    updateSubAdminProtocolFilterCards();
});
	
	
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const logsModal = document.getElementById("logsModal");
    const logsTableBody = document.getElementById("logsTableBody");
    const logsLoadingIndicator = document.getElementById("logsLoadingIndicator");
    const openLogsModalBtn = document.getElementById("openLogsModalBtn");
    const closeLogsModalBtn = document.getElementById("closeLogsModalBtn");
    const applyLogsFilterBtn = document.getElementById("applyLogsFilterBtn");
    
    let currentPage = 1;

    if (typeof JalaliCalendar !== "undefined") {
        JalaliCalendar.initDatePicker("#filterStartDate", {
            dateFormat: "Y-m-d",
            disableMobile: true
        });
        JalaliCalendar.initDatePicker("#filterEndDate", {
            dateFormat: "Y-m-d",
            disableMobile: true
        });
    }

    function getBadgeClass(action) {
        const colors = {
            "CREATE": "bg-green-900/40 text-green-400 border-green-800",
            "DELETE": "bg-red-900/40 text-red-400 border-red-800",
            "ADD_TRAFFIC": "bg-blue-900/40 text-blue-400 border-blue-800",
            "REDUCE_TRAFFIC": "bg-yellow-900/40 text-yellow-400 border-yellow-800",
            "RESET_TRAFFIC": "bg-purple-900/40 text-purple-400 border-purple-800",
            "CHARGE_WALLET": "bg-green-900/40 text-green-400 border-green-800",
            "PLAN_STANDARD": "bg-indigo-900/40 text-indigo-400 border-indigo-800",
            "PLAN_PAY_AS_YOU_GO": "bg-orange-900/40 text-orange-400 border-orange-800"
        };
        return colors[action] || "bg-gray-700/50 text-gray-300 border-gray-600";
    }

    function closeModalOnBackground(e) {
        if (e.target === logsModal) {
            logsModal.classList.remove("audit-modal-open");
            document.body.style.overflow = '';
        }
    }

    function renderLogsPagination(currentPageNum, totalPages) {
        const container = document.getElementById('logsPaginationContainer');
        if (!container) return;
        if (!totalPages || totalPages <= 1) { container.innerHTML = ''; return; }

        let html = `<a href="#" data-page="${currentPageNum - 1}" class="pagination-link pagination-pill ${currentPageNum <= 1 ? 'cursor-not-allowed' : ''}">&laquo;</a>`;

        const pages = [];
        for (let p = 1; p <= totalPages; p++) {
            if (p === 1 || p === totalPages || Math.abs(p - currentPageNum) <= 1) {
                pages.push(p);
            } else if (pages[pages.length - 1] !== '...') {
                pages.push('...');
            }
        }
        pages.forEach(p => {
            if (p === '...') {
                html += `<span class="px-2 text-gray-500">...</span>`;
            } else {
                html += `<a href="#" data-page="${p}" class="pagination-link pagination-pill ${p === currentPageNum ? 'is-current' : ''}">${p}</a>`;
            }
        });

        html += `<a href="#" data-page="${currentPageNum + 1}" class="pagination-link pagination-pill ${currentPageNum >= totalPages ? 'cursor-not-allowed' : ''}">&raquo;</a>`;

        container.innerHTML = html;
    }

    window.fetchLogs = function(resetPage = false) {
        if (resetPage) currentPage = 1;
        if (logsLoadingIndicator) logsLoadingIndicator.classList.remove("hidden");

        const actionType = document.getElementById("filterActionType").value;
        const username = document.getElementById("filterUsername").value;
        const startDate = document.getElementById("filterStartDate").value;
        const endDate = document.getElementById("filterEndDate").value;

        const url = `/api/v1/sub-admins/logs?page=${currentPage}&action_type=${encodeURIComponent(actionType)}&username=${encodeURIComponent(username)}&start_date=${encodeURIComponent(startDate)}&end_date=${encodeURIComponent(endDate)}`;

        fetch(url)
            .then(res => res.json())
            .then(data => {
                if (logsLoadingIndicator) logsLoadingIndicator.classList.add("hidden");

                if (data.success) {
                    if (!data.logs.length) {
                        logsTableBody.innerHTML = `<tr><td colspan="5"><div class="audit-modal-empty"><i class="fas fa-inbox"></i><div class="mt-2">No logs found.</div></div></td></tr>`;
                    } else {
                        logsTableBody.innerHTML = "";
                        data.logs.forEach(log => {
                            const logDate = new Date(log.timestamp.replace(' ', 'T') + 'Z');
                            const localTime = JalaliCalendar.formatDateDisplay(logDate, { withSeconds: true });

                            const tr = document.createElement("tr");
                            tr.innerHTML = `
                                <td data-label="ID" class="font-mono">#${log.id}</td>
                                <td data-label="Target" class="font-semibold">${escapeHtml(log.username)}</td>
                                <td data-label="Action"><span class="px-1.5 py-0.5 rounded text-[10px] font-bold border ${getBadgeClass(log.action)}">${log.action}</span></td>
                                <td data-label="Details">${escapeHtml(log.details)}</td>
                                <td data-label="Time" class="audit-table-time">${localTime}</td>
                            `;
                            logsTableBody.appendChild(tr);
                        });
                    }

                    renderLogsPagination(data.current_page, data.total_pages);
                } else if (data.error) {
                    console.error("API Error:", data.error);
                    logsTableBody.innerHTML = `<tr><td colspan="5"><div class="audit-modal-empty text-red-400">Error: ${escapeHtml(data.error)}</div></td></tr>`;
                }
            })
            .catch(err => {
                if (logsLoadingIndicator) logsLoadingIndicator.classList.add("hidden");
                console.error("Fetch Error:", err);
                logsTableBody.innerHTML = `<tr><td colspan="5"><div class="audit-modal-empty text-red-400">Network error. Please try again.</div></td></tr>`;
            });
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
            return c;
        });
    }

    if (applyLogsFilterBtn) {
        applyLogsFilterBtn.addEventListener("click", () => fetchLogs(true));
    }

    const logsPaginationContainer = document.getElementById("logsPaginationContainer");
    if (logsPaginationContainer) {
        logsPaginationContainer.addEventListener("click", (e) => {
            const l = e.target.closest('a.pagination-link');
            if (!l || l.classList.contains('cursor-not-allowed')) return;
            e.preventDefault();
            const page = parseInt(l.dataset.page, 10);
            if (!page || page < 1) return;
            currentPage = page;
            fetchLogs();
            const bodyEl = document.querySelector('#logsModal .audit-modal-body');
            if (bodyEl) bodyEl.scrollTop = 0;
        });
    }

    if (openLogsModalBtn) {
        openLogsModalBtn.addEventListener("click", () => {
            logsModal.classList.add("audit-modal-open");
            fetchLogs(true);
            document.body.style.overflow = 'hidden';
        });
    }

    if (closeLogsModalBtn) {
        closeLogsModalBtn.addEventListener("click", () => {
            logsModal.classList.remove("audit-modal-open");
            document.body.style.overflow = '';
        });
    }

    if (logsModal) {
        logsModal.addEventListener("click", closeModalOnBackground);
    }

    window.addEventListener('popstate', function() {
        if (logsModal && logsModal.classList.contains('audit-modal-open')) {
            logsModal.classList.remove('audit-modal-open');
            document.body.style.overflow = '';
        }
    });
});

function updateGbQuotaPreview(input, previewId) {
    const preview = document.getElementById(previewId);
    if (!preview) return;
    const gb = parseFloat(input.value);
    if (!gb || gb <= 0) {
        preview.textContent = '';
        return;
    }
    const trim = (s) => s.includes('.') ? s.replace(/0+$/, '').replace(/\.$/, '') : s;
    if (gb >= 1000) {
        preview.textContent = `≈ ${trim((gb / 1024).toFixed(2))} TB`;
    } else {
        preview.textContent = '';
    }
}
</script>


{% endblock %}