{% extends "base.html" %}
{% block title %}Edit Sub-Admin: {{ sub_admin.username }} - OpenVPN Manager{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ url_for('sub_admins_management') }}" 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>Back to Sub-Admins</span>
        </a>
    </div>
    
    <div class="max-w-3xl mx-auto bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 md:p-8 rounded-2xl shadow-2xl border border-gray-700">
        <div class="mb-6 flex items-center gap-3">
            <span class="system-status-icon-badge text-purple-400 bg-purple-900">
                <i class="fas fa-user-shield"></i>
            </span>
            <div>
                <h2 class="text-2xl font-bold text-white">Edit Sub-Admin</h2>
                <p class="text-sm text-gray-400">Update details for <span class="font-semibold text-indigo-400">{{ sub_admin.username }}</span></p>
            </div>
        </div>

        <form action="{{ url_for('edit_sub_admin_route', sub_admin_id=sub_admin.id) }}" method="POST" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <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="edit_sa_is_active" 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="editSaActiveBadge"
            class="ss-status text-[11px] font-semibold px-2.5 py-1 rounded-full border flex-shrink-0">
      </span>
    </div>
  </label>
</div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                    <div>
                        <label for="edit_sa_username" class="block text-sm font-medium text-gray-300 mb-1">Username</label>
                        <input type="text" id="edit_sa_username" name="username" value="{{ sub_admin.username }}" required
                               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="edit_sa_password" class="block text-sm font-medium text-gray-300 mb-1">New Password</label>
                        <input type="password" id="edit_sa_password" name="password" placeholder="Leave blank to keep unchanged"
                               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 class="md:col-span-2">
                        <label for="edit_sa_panel_path" 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="edit_sa_panel_path" name="panel_path"
                                   value="{{ sub_admin.panel_path if sub_admin.panel_path else '' }}"
                                   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="Default: no dedicated path">
                        </div>
                        <p class="text-[10px] text-gray-400 mt-1">Optional. Leave blank to use the default panel path.</p>
                    </div>

                    <div>
                        <label for="edit_sa_panel_port" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-1">
                            Dedicated Panel Port
                        </label>
                        <input type="number" id="edit_sa_panel_port" name="panel_port"
                               value="{{ sub_admin.panel_port if sub_admin.panel_port else '' }}"
                               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="Default (Main)">
                    </div>

                    <div>
                        <label for="edit_sa_sub_port" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-1">
                            Dedicated Sub Port
                        </label>
                        <input type="number" id="edit_sa_sub_port" name="subscription_port"
                               value="{{ sub_admin.subscription_port if sub_admin.subscription_port else '' }}"
                               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="Default (Main)">
                    </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" {% if sub_admin.allow_openvpn %}checked{% endif %} 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" {% if sub_admin.allow_l2tp %}checked{% endif %} 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" {% if sub_admin.allow_cisco %}checked{% endif %} 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>

        {% set extra_wg = allowed_wg_list | reject('equalto', 'wg1') | list %}
        {% set wg_summary_parts = (['wg1'] if sub_admin.allow_wg1 else []) + extra_wg %}
        <div class="server-select-label block cursor-pointer" onclick="openWgPicker(wgPickerCtxSubAdminEdit)">
            <input type="checkbox" name="allow_wg1" id="allow_wg1_edit" {% if sub_admin.allow_wg1 %}checked{% endif %} 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="wgSummarySubAdminEdit">{{ wg_summary_parts | join(', ') if wg_summary_parts else 'Not selected' }}</div>
                    </div>
                </div>
            </div>
            <div id="wgInstancesHiddenSubAdminEdit" class="hidden">
                {% for name in extra_wg %}
                <input type="hidden" name="allowed_wg_instances" value="{{ name }}">
                {% endfor %}
            </div>
        </div>

        <div class="server-select-label block cursor-pointer" onclick="openSingboxPicker(singboxPickerCtxSubAdminEdit)">
            <input type="checkbox" name="allow_singbox" id="allow_singbox_edit" {% if allowed_singbox_list %}checked{% endif %} 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="singboxSummarySubAdminEdit">{{ allowed_singbox_list | join(', ') if allowed_singbox_list else 'Not selected' }}</div>
                    </div>
                </div>
            </div>
            <div id="singboxInboundsHiddenSubAdminEdit" class="hidden">
                {% for tag in allowed_singbox_list %}
                <input type="hidden" name="allowed_singbox_inbounds" value="{{ tag }}">
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
const wgPickerCtxSubAdminEdit = {
    containerId: 'wgInstancesHiddenSubAdminEdit',
    fieldName: 'allowed_wg_instances',
    summaryId: 'wgSummarySubAdminEdit',
    wg1CheckboxId: 'allow_wg1_edit',
    baseLabel: 'wg1'
};

const singboxPickerCtxSubAdminEdit = {
    containerId: 'singboxInboundsHiddenSubAdminEdit',
    fieldName: 'allowed_singbox_inbounds',
    summaryId: 'singboxSummarySubAdminEdit',
    checkboxId: 'allow_singbox_edit'
};

document.addEventListener('DOMContentLoaded', function() {
    if (typeof refreshWgSummary === 'function') refreshWgSummary(wgPickerCtxSubAdminEdit);
    if (typeof refreshSingboxSummary === 'function') refreshSingboxSummary(singboxPickerCtxSubAdminEdit);
});
</script>


            <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" {% if sub_admin.allocation_mode != 'credit' %}checked{% endif %} onclick="toggleSubAdminMode('standard', 'edit')">
                        <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" {% if sub_admin.allocation_mode == 'credit' %}checked{% endif %} onclick="toggleSubAdminMode('credit', 'edit')">
                        <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_edit" class="{% if sub_admin.allocation_mode != 'credit' %}hidden{% endif %} space-y-4 animate-fade-in">
                    
                    <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" {% if sub_admin.currency_unit != 'DOLLAR' %}checked{% endif %} onchange="updateCurrencyInputs('edit', '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" {% if sub_admin.currency_unit == 'DOLLAR' %}checked{% endif %} onchange="updateCurrencyInputs('edit', '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_edit" name="price_per_gb" 
                                       value="{{ '{:.4f}'.format(sub_admin.price_per_gb).rstrip('0').rstrip('.') if sub_admin.currency_unit == 'DOLLAR' else '{:.0f}'.format(sub_admin.price_per_gb) }}" 
                                       step="{% if sub_admin.currency_unit == 'DOLLAR' %}0.0001{% else %}1{% endif %}" 
                                       class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-purple-500 pl-8">
                                <span class="absolute left-3 top-2.5 text-gray-400 text-xs currency-symbol-edit">
                                    {% if sub_admin.currency_unit == 'DOLLAR' %}<i class="fas fa-dollar-sign"></i>{% else %}T{% endif %}
                                </span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-1">Current Wallet Balance</label>
                            <div class="relative">
                                <input type="number" id="wallet_balance_edit" name="wallet_balance" 
                                       value="{{ '{:.4f}'.format(sub_admin.wallet_balance).rstrip('0').rstrip('.') if sub_admin.currency_unit == 'DOLLAR' else '{:.0f}'.format(sub_admin.wallet_balance) }}" 
                                       step="{% if sub_admin.currency_unit == 'DOLLAR' %}0.0001{% else %}1{% endif %}"
                                       class="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-purple-500 pl-8">
                                <span class="absolute left-3 top-2.5 text-gray-400 text-xs currency-symbol-edit">
                                    {% if sub_admin.currency_unit == 'DOLLAR' %}<i class="fas fa-dollar-sign"></i>{% else %}T{% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="standard_fields_edit" class="{% if sub_admin.allocation_mode == 'credit' %}hidden{% endif %} grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="edit_sa_max_users" class="block text-sm font-medium text-gray-300 mb-1">Max Users</label>
                        <input type="number" id="edit_sa_max_users" name="max_users_limit" value="{{ sub_admin.max_users_limit if sub_admin.max_users_limit is not none else '' }}" 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="edit_sa_max_data" class="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-2">
                            <span>Total Quota (GB)</span>
                            <span id="edit_sa_used_badge" class="access-pill">Used: {{ sub_admin.total_data_used_bytes|format_bytes }}</span>
                        </label>
                        <input type="number" id="edit_sa_max_data" name="total_usage_quota_gb" value="{{ sub_admin.total_usage_quota_gb if sub_admin.total_usage_quota_gb is not none else '' }}" min="0.01" step="0.01"
                               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">
                    </div>
                    <div>
                        <label for="edit_sa_expiry_date" class="block text-sm font-medium text-gray-300 mb-1">Expiry Date</label>
                        <input type="text" id="edit_sa_expiry_date" name="expiry_date" value="{{ sub_admin.expiry_date.strftime('%Y-%m-%d') if sub_admin.expiry_date else '' }}"
                               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="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-4">Select which download options this sub-admin's users can see.</p>
                <div id="server-access-container-edit" class="grid grid-cols-2 sm:grid-cols-3 gap-2 p-3 bg-gray-900/50 rounded-lg border border-gray-600 max-h-48 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="edit_sa_notes" class="block text-sm font-medium text-gray-300 mb-1">Notes</label>
                    <textarea id="edit_sa_notes" name="notes" rows="3" 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">{{ sub_admin.notes or '' }}</textarea>
                </div>
                
            </div>

            <div class="flex justify-end items-center gap-x-4 pt-6 border-t border-gray-700">
                <a href="{{ url_for('sub_admins_management') }}" 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 flex items-center gap-2 transition-all duration-200 hover:shadow-lg">
                    Cancel
                </a>
                <button type="submit" class="bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-all duration-200 hover:shadow-lg">
                    <i class="fas fa-save"></i> Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
<script>
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";
        walletInput.step = "0.0001";
        symbols.forEach(el => el.innerHTML = '<i class="fas fa-dollar-sign"></i>');
    } else {
        priceInput.step = "1";
        walletInput.step = "1";
        
        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');
    }
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    JalaliCalendar.initDatePicker("#edit_sa_expiry_date", {
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        disableMobile: true,
    });

    const allServers = {{ all_servers | tojson }};
    const currentAllowed = {{ current_allowed | tojson }};
    const container = document.getElementById('server-access-container-edit');
    if (container && allServers) {
        container.innerHTML = '';
        allServers.forEach(server => {
            const isChecked = currentAllowed.includes(server.id) ? 'checked' : '';
            const label = document.createElement('label');
            label.className = 'server-select-label';
            let iconClass = 'fa-server'; 
            if (server.id.startsWith('multi_server')) iconClass = 'fa-globe-americas';
            else if (server.id.startsWith('node_')) iconClass = 'fa-network-wired';

            label.innerHTML = `
                <input type="checkbox" name="allowed_servers" value="${server.id}" ${isChecked}>
                <div class="server-select-card">
                    <i class="fas ${iconClass} icon"></i>
                    <span class="name text-sm">${server.name}</span>
                </div>
            `;
            container.appendChild(label);
        });
    }
});
</script>




{% endblock %}