@extends('parts.container')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" />
    <style>
        .api-user-page .api-key-card {
            border: 1px solid rgba(34, 120, 255, 0.18);
            border-radius: 16px;
            padding: 1.25rem;
            background: linear-gradient(135deg, rgba(34, 120, 255, 0.12), rgba(0, 186, 148, 0.08));
            box-shadow: 0 10px 30px rgba(34, 120, 255, 0.08);
        }

        .api-user-page .api-key-card h6,
        .api-user-page .api-key-card p,
        .api-user-page .api-key-card small,
        .api-user-page .api-key-card .api-key-meta {
            color: inherit;
        }

        .api-user-page .api-key-display {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            padding: 0.75rem;
            border-radius: 12px;
            border: 1px dashed rgba(34, 120, 255, 0.28);
            background-color: rgba(255, 255, 255, 0.7);
        }

        .api-user-page .api-key-display input {
            border: 0;
            box-shadow: none;
            background: transparent;
            font-family: monospace;
            font-size: 0.95rem;
            padding: 0;
        }

        .api-user-page .api-key-display input:focus {
            box-shadow: none;
        }

        .api-user-page .modal-subtitle {
            color: #6c757d;
            font-size: 0.92rem;
        }

        .api-user-page .form-hint {
            font-size: 0.82rem;
        }

        .api-user-page .table td small {
            display: block;
            margin-top: 0.15rem;
        }

        body.dark .api-user-page .api-key-card {
            border-color: rgba(103, 156, 255, 0.3);
            background: linear-gradient(135deg, rgba(18, 48, 99, 0.88), rgba(13, 87, 78, 0.72));
            box-shadow: none;
        }

        body.dark .api-user-page .api-key-display {
            border-color: rgba(151, 194, 255, 0.28);
            background-color: rgba(8, 18, 38, 0.72);
        }

        body.dark .api-user-page .modal-subtitle,
        body.dark .api-user-page .form-hint,
        body.dark .api-user-page .api-key-meta,
        body.dark .api-user-page .text-muted {
            color: #c2c8d0 !important;
        }

        .charge-overrides-table th,
        .charge-overrides-table td {
            vertical-align: middle;
            padding: 0.7rem 0.75rem;
        }

        .charge-overrides-table th {
            white-space: nowrap;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: #6c757d;
        }

        .charge-overrides-table td:nth-child(1) {
            width: 60px;
            text-align: center;
        }

        .charge-overrides-table td:nth-child(2) {
            min-width: 150px;
            font-weight: 500;
        }

        .charge-overrides-table td:nth-child(3),
        .charge-overrides-table td:nth-child(5) {
            min-width: 130px;
        }

        .charge-overrides-table td:nth-child(4) {
            min-width: 140px;
        }

        .charge-overrides-table td:nth-child(6) {
            min-width: 170px;
        }

        .charge-overrides-table .form-check-input {
            width: 1.15em;
            height: 1.15em;
            cursor: pointer;
        }

        body.dark .charge-overrides-table th {
            color: #c2c8d0;
        }
    </style>
@endsection

@section('content')
<div class="api-user-page layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="row layout-top-spacing">
            <div class="col-12">
                <div id="apiKeyFlash" class="api-key-card mb-4 d-none" role="status" aria-live="polite">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                        <div>
                            <h6 class="mb-2">API key created</h6>
                            <p class="mb-2">This key is shown once. Copy it now and store it securely.</p>
                            <div class="api-key-display">
                                <input id="apiKeyFlashValue" type="text" class="form-control" readonly>
                                <button type="button" class="btn btn-primary" id="copyApiKeyButton">Copy key</button>
                            </div>
                            <small id="apiKeyCopyFeedback" class="form-hint d-block mt-2 api-key-meta"></small>
                        </div>
                        <button type="button" class="btn btn-outline-secondary" id="dismissApiKeyFlash">Dismiss</button>
                    </div>
                </div>

                <div class="widget-content widget-content-area br-8 p-3">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                        <div>
                            <h5 class="mb-1">API Users</h5>
                            <small class="text-muted">Manage API credentials for organization users.</small>
                        </div>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#apiUserModal">Create API User</button>
                    </div>
                    <table class="table style-3 dt-table-hover" id="apiUsersTable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Organization</th>
                                <th>Contact</th>
                                <th>Email</th>
                                <th>Email comms</th>
                                <th>Last Rotated</th>
                                <th>Created</th>
                                <th>Updated</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="apiUserModal" tabindex="-1" aria-labelledby="apiUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="apiUserModalLabel">Create API User</h5>
                    <div class="modal-subtitle mt-1">Create the user, then the generated API key will be shown once on the users list.</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="apiUserForm">
                    <div id="apiUserFormAlert" class="alert alert-danger d-none mb-3" role="alert"></div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="orgName" class="form-label">Organization name<span class="text-danger">*</span></label>
                            <input id="orgName" name="organization_name" type="text" class="form-control" autocomplete="organization" required>
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Email address<span class="text-danger">*</span></label>
                            <input id="email" name="email" type="email" class="form-control" autocomplete="email" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactName" class="form-label">Contact name<span class="text-danger">*</span></label>
                            <input id="contactName" name="contact_name" type="text" class="form-control" autocomplete="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactPhone" class="form-label">Contact phone</label>
                            <input id="contactPhone" name="contact_phone" type="text" class="form-control" autocomplete="tel" placeholder="e.g. +254700000000">
                        </div>
                        <div class="col-md-6">
                            <label for="password" class="form-label">Password<span class="text-danger">*</span></label>
                            <input id="password" name="password" type="password" class="form-control" autocomplete="new-password" minlength="8" required>
                            <small class="form-hint text-muted">Use at least 8 characters.</small>
                        </div>
                        <div class="col-md-6">
                            <label for="currency" class="form-label">Wallet currency</label>
                            <select id="currency" name="currency_code" class="form-control">
                                <option value="">Select currency (optional)</option>
                                @foreach(($currencies ?? []) as $currency)
                                    <option value="{{ strtoupper($currency->code) }}" @selected(strtoupper($currency->code) === 'KES')>
                                        {{ strtoupper($currency->code) }} - {{ $currency->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-hint text-muted">Only currencies created in the system are available.</small>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveApiUser">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="chargeOverridesModal" tabindex="-1" aria-labelledby="chargeOverridesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="chargeOverridesModalLabel">Charge Overrides</h5>
                    <div class="modal-subtitle mt-1">Override default charge settings for <strong><span id="chargeOverridesUserName"></span></strong>. Leave a row unchecked to use the global default.</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="chargeOverridesAlert" class="alert alert-danger d-none mb-3" role="alert"></div>
                <input type="hidden" id="chargeOverridesUserId" value="">
                <div id="chargeOverridesBody">
                    <p class="text-muted">Loading...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveChargeOverrides">Save overrides</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let table;

const apiUsersListUrl = '{{ route('api-users.list') }}';
const apiUsersStoreUrl = '{{ route('api-users.store') }}';
const apiUsersRotateBaseUrl = '{{ url('/admin/api-users') }}';
const apiUsersStatementBaseUrl = '{{ url('/admin/users') }}';
const flashStorageKey = 'api-user-created-credentials';

const apiUserModalElement = document.getElementById('apiUserModal');
const apiUserForm = document.getElementById('apiUserForm');
const apiUserFormAlert = document.getElementById('apiUserFormAlert');
const saveApiUserButton = document.getElementById('saveApiUser');
const apiKeyFlash = document.getElementById('apiKeyFlash');
const apiKeyFlashValue = document.getElementById('apiKeyFlashValue');
const apiKeyCopyFeedback = document.getElementById('apiKeyCopyFeedback');
const copyApiKeyButton = document.getElementById('copyApiKeyButton');
const dismissApiKeyFlashButton = document.getElementById('dismissApiKeyFlash');

function loadApiUsers() {
    fetch(apiUsersListUrl)
        .then((response) => response.json())
        .then((resp) => {
            const rows = Array.isArray(resp?.data) ? resp.data : [];

            if (!table) {
                table = $('#apiUsersTable').DataTable({
                    data: rows,
                    columns: [
                        {
                            data: 'organization_name',
                            render: (value) => value || '<span class="text-muted">-</span>',
                        },
                        {
                            data: null,
                            render: (row) => {
                                const name = row.api_contact_name || '-';
                                const phone = row.api_contact_phone ? `<small class="text-muted">${row.api_contact_phone}</small>` : '';
                                return `${name}${phone}`;
                            },
                        },
                        { data: 'email' },
                        {
                            data: null,
                            orderable: false,
                            render: (row) => `
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input btnToggleEmailNotifications" type="checkbox" role="switch"
                                        data-user-id="${row.id}"
                                        data-org="${escapeAttribute(row.organization_name || '')}"
                                        data-email="${escapeAttribute(row.email || '')}"
                                        ${row.api_email_notifications_enabled ? 'checked' : ''}>
                                </div>`,
                        },
                        {
                            data: 'api_key_last_rotated_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: 'created_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: 'updated_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: (row) => `
                                <div class="d-flex gap-2 flex-wrap">
                                    <a class="btn btn-sm btn-outline-secondary" href="${apiUsersStatementBaseUrl}/${row.id}/statement">Statement</a>
                                    <button type="button" class="btn btn-sm btn-outline-primary btnRotateApiKey" data-user-id="${row.id}" data-org="${escapeAttribute(row.organization_name || '')}" data-email="${escapeAttribute(row.email || '')}">Regenerate key</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary btnChargeOverrides" data-user-id="${row.id}" data-org="${escapeAttribute(row.organization_name || '')}" data-email="${escapeAttribute(row.email || '')}">Charge overrides</button>
                                </div>`,
                        },
                    ],
                    scrollX: true,
                });
            } else {
                table.clear();
                table.rows.add(rows);
                table.draw();
            }
        });
}

function formatDateTime(value) {
    if (!value) {
        return '<span class="text-muted">-</span>';
    }

    const date = new Date(value);
    if (Number.isNaN(date.getTime())) {
        return value;
    }

    return date.toLocaleString(undefined, {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
    });
}

function escapeAttribute(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

function resetApiUserForm() {
    apiUserForm.reset();
    if ([...document.getElementById('currency').options].some((option) => option.value === 'KES')) {
        document.getElementById('currency').value = 'KES';
    }
    apiUserFormAlert.classList.add('d-none');
    apiUserFormAlert.innerHTML = '';
}

function setSaveState(isSaving) {
    saveApiUserButton.disabled = isSaving;
    saveApiUserButton.textContent = isSaving ? 'Saving...' : 'Save';
}

function showFormError(message) {
    apiUserFormAlert.classList.remove('d-none');
    apiUserFormAlert.innerHTML = message;
}

function storeApiKeyFlash(data) {
    sessionStorage.setItem(flashStorageKey, JSON.stringify({
        api_key: data.api_key,
        email: data.email,
        organization_name: data.organization_name,
        event: data.event || 'created',
        created_at: new Date().toISOString(),
    }));
}

function dismissApiKeyFlash() {
    sessionStorage.removeItem(flashStorageKey);
    apiKeyFlash.classList.add('d-none');
    apiKeyFlashValue.value = '';
    apiKeyCopyFeedback.textContent = '';
}

function renderStoredApiKeyFlash() {
    const stored = sessionStorage.getItem(flashStorageKey);
    if (!stored) {
        return;
    }

    try {
        const data = JSON.parse(stored);
        apiKeyFlash.classList.remove('d-none');
        apiKeyFlashValue.value = data.api_key || '';
        const action = data.event === 'rotated' ? 'Regenerated for' : 'Created for';
        apiKeyCopyFeedback.textContent = data.email
            ? `${action} ${data.organization_name || 'the user'} (${data.email}).`
            : 'Copy this key now and store it securely.';
    } catch (error) {
        dismissApiKeyFlash();
    }
}

async function copyApiKey() {
    const value = apiKeyFlashValue.value;
    if (!value) {
        return;
    }

    try {
        if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(value);
        } else {
            apiKeyFlashValue.focus();
            apiKeyFlashValue.select();
            apiKeyFlashValue.setSelectionRange(0, value.length);
            document.execCommand('copy');
        }

        apiKeyCopyFeedback.textContent = 'API key copied.';
        copyApiKeyButton.textContent = 'Copied';
        window.setTimeout(() => {
            copyApiKeyButton.textContent = 'Copy key';
        }, 1600);
    } catch (error) {
        apiKeyCopyFeedback.textContent = 'Copy failed. Select the key and copy it manually.';
    }
}

apiUserModalElement.addEventListener('hidden.bs.modal', resetApiUserForm);
apiUserForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    await submitApiUserForm();
});
copyApiKeyButton.addEventListener('click', copyApiKey);
dismissApiKeyFlashButton.addEventListener('click', dismissApiKeyFlash);

saveApiUserButton.addEventListener('click', async () => {
    await submitApiUserForm();
});

async function submitApiUserForm() {
    if (!apiUserForm.reportValidity()) {
        return;
    }

    setSaveState(true);
    apiUserFormAlert.classList.add('d-none');

    const payload = {
        organization_name: document.getElementById('orgName').value.trim(),
        contact_name: document.getElementById('contactName').value.trim(),
        contact_phone: document.getElementById('contactPhone').value.trim(),
        email: document.getElementById('email').value.trim(),
        password: document.getElementById('password').value,
        currency_code: document.getElementById('currency').value.trim(),
    };

    try {
        const response = await fetch(apiUsersStoreUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify(payload),
        });

        const resp = await response.json();

        if (!response.ok) {
            if (resp.errors && typeof resp.errors === 'object') {
                const errors = Object.values(resp.errors).flat().map((message) => `<div>${message}</div>`).join('');
                showFormError(errors || 'Unable to create API user.');
            } else {
                showFormError(resp.message || 'Unable to create API user.');
            }
            return;
        }

        const modal = bootstrap.Modal.getInstance(apiUserModalElement);
        storeApiKeyFlash({
            api_key: resp?.data?.api_key,
            email: resp?.data?.user?.email || '',
            organization_name: resp?.data?.user?.organization_name || '',
            event: 'created',
        });

        if (modal) {
            modal.hide();
        }

        renderStoredApiKeyFlash();
        loadApiUsers();
    } catch (error) {
        showFormError('A network error occurred while creating the API user.');
    } finally {
        setSaveState(false);
    }
}

async function rotateApiKey(userId, organizationName, email) {
    const confirmed = window.confirm(`Regenerate the API key for ${organizationName || email || 'this user'}? The previous key will stop working.`);
    if (!confirmed) {
        return;
    }

    try {
        const response = await fetch(`${apiUsersRotateBaseUrl}/${userId}/rotate-key`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        });

        const resp = await response.json();

        if (!response.ok || !resp.success) {
            showFormError(resp.message || 'Unable to regenerate the API key.');
            return;
        }

        storeApiKeyFlash({
            api_key: resp?.data?.api_key,
            email: resp?.data?.email || email || '',
            organization_name: resp?.data?.organization_name || organizationName || '',
            event: 'rotated',
        });
        renderStoredApiKeyFlash();
        loadApiUsers();
    } catch (error) {
        showFormError('A network error occurred while regenerating the API key.');
    }
}

async function toggleEmailNotifications(checkbox) {
    const { userId, org, email } = checkbox.dataset;
    const enabled = checkbox.checked;

    try {
        const response = await fetch(`${apiUsersRotateBaseUrl}/${userId}/email-notifications`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ enabled }),
        });

        const resp = await response.json();

        if (!response.ok || !resp.success) {
            checkbox.checked = !enabled;
            window.alert(resp.message || 'Unable to update email communications.');
            return;
        }
    } catch (error) {
        checkbox.checked = !enabled;
        window.alert(`A network error occurred while updating email communications for ${org || email || 'this user'}.`);
    }
}

document.getElementById('apiUsersTable').addEventListener('click', async (event) => {
    const rotateButton = event.target.closest('.btnRotateApiKey');
    if (rotateButton) {
        await rotateApiKey(rotateButton.dataset.userId, rotateButton.dataset.org, rotateButton.dataset.email);
    }

    const chargeButton = event.target.closest('.btnChargeOverrides');
    if (chargeButton) {
        await openChargeOverrides(chargeButton.dataset.userId, chargeButton.dataset.org, chargeButton.dataset.email);
    }
});

const chargeOverridesModalElement = document.getElementById('chargeOverridesModal');
const chargeOverridesModal = new bootstrap.Modal(chargeOverridesModalElement);
const chargeOverridesBody = document.getElementById('chargeOverridesBody');
const chargeOverridesAlert = document.getElementById('chargeOverridesAlert');
const chargeOverridesBaseUrl = '{{ url('/admin/api-users') }}';

function chargeOverridesAlertShow(message) {
    chargeOverridesAlert.classList.remove('d-none');
    chargeOverridesAlert.textContent = message;
}

async function openChargeOverrides(userId, org, email) {
    document.getElementById('chargeOverridesUserId').value = userId;
    document.getElementById('chargeOverridesUserName').textContent = org || email || 'this API user';
    chargeOverridesAlert.classList.add('d-none');
    chargeOverridesBody.innerHTML = '<p class="text-muted">Loading...</p>';
    chargeOverridesModal.show();

    try {
        const response = await fetch(`${chargeOverridesBaseUrl}/${userId}/charge-settings`, {
            headers: { 'Accept': 'application/json' },
        });
        const resp = await response.json();

        if (!response.ok || !resp.success) {
            chargeOverridesBody.innerHTML = '';
            chargeOverridesAlertShow(resp.message || 'Unable to load charge settings.');
            return;
        }

        renderChargeOverrides(resp.data);
    } catch (error) {
        chargeOverridesBody.innerHTML = '';
        chargeOverridesAlertShow('A network error occurred while loading charge settings.');
    }
}

function renderChargeOverrides(data) {
    const { definitions, global, overrides } = data;
    let html = '';

    Object.entries(definitions).forEach(([groupKey, group]) => {
        // Charge behaviour (add/deduct) only applies to top-ups; outbound transaction
        // types always deduct the fee from the wallet, so the control is omitted there.
        const showChargeMode = groupKey === 'top_ups';

        html += `<h6 class="mt-4 mb-2">${escapeAttribute(group.label)}</h6>`;
        html += '<div class="table-responsive"><table class="table table-bordered charge-overrides-table"><thead><tr>';
        html += '<th title="Override this charge">On</th><th>Type</th><th>Minimum</th><th>Percentage</th><th>Maximum</th>';
        if (showChargeMode) {
            html += '<th>Behaviour</th>';
        }
        html += '</tr></thead><tbody>';

        Object.entries(group.items).forEach(([code, label]) => {
            const globalSetting = global[code] || {};
            const override = overrides[code] || null;
            const enabled = !!override;
            const minValue = override ? override.min_amount : (globalSetting.min_amount ?? 0);
            const percentValue = override ? override.percentage : (globalSetting.percentage ?? 0);
            const maxValue = override ? override.max_amount : globalSetting.max_amount;
            const modeValue = override ? override.charge_mode : (globalSetting.charge_mode || 'add');

            html += `<tr data-code="${code}">
                <td><input type="checkbox" class="form-check-input chargeOverrideEnabled" ${enabled ? 'checked' : ''}></td>
                <td>${escapeAttribute(label)}</td>
                <td><input type="number" class="form-control chargeOverrideMin" min="0" step="0.01" value="${minValue ?? ''}" ${enabled ? '' : 'disabled'}></td>
                <td>
                    <div class="input-group">
                        <input type="number" class="form-control chargeOverridePercentage" min="0" max="100" step="0.01" value="${percentValue ?? ''}" ${enabled ? '' : 'disabled'}>
                        <span class="input-group-text">%</span>
                    </div>
                </td>
                <td><input type="number" class="form-control chargeOverrideMax" min="0" step="0.01" value="${maxValue ?? ''}" placeholder="No cap" ${enabled ? '' : 'disabled'}></td>`;

            if (showChargeMode) {
                html += `<td>
                    <select class="form-control chargeOverrideMode" ${enabled ? '' : 'disabled'}>
                        <option value="add" ${modeValue === 'add' ? 'selected' : ''}>Add to amount</option>
                        <option value="deduct" ${modeValue === 'deduct' ? 'selected' : ''}>Deduct from amount</option>
                    </select>
                </td>`;
            }

            html += '</tr>';
        });

        html += '</tbody></table></div>';
    });

    chargeOverridesBody.innerHTML = html;

    chargeOverridesBody.querySelectorAll('.chargeOverrideEnabled').forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            const row = checkbox.closest('tr');
            row.querySelectorAll('input:not(.chargeOverrideEnabled), select').forEach((field) => {
                field.disabled = !checkbox.checked;
            });
        });
    });
}

document.getElementById('saveChargeOverrides').addEventListener('click', async () => {
    const userId = document.getElementById('chargeOverridesUserId').value;
    chargeOverridesAlert.classList.add('d-none');

    const settings = {};
    chargeOverridesBody.querySelectorAll('tr[data-code]').forEach((row) => {
        const code = row.dataset.code;
        const enabled = row.querySelector('.chargeOverrideEnabled').checked;
        const modeField = row.querySelector('.chargeOverrideMode');
        settings[code] = {
            enabled,
            min_amount: row.querySelector('.chargeOverrideMin').value || null,
            percentage: row.querySelector('.chargeOverridePercentage').value || null,
            max_amount: row.querySelector('.chargeOverrideMax').value || null,
            ...(modeField ? { charge_mode: modeField.value } : {}),
        };
    });

    try {
        const response = await fetch(`${chargeOverridesBaseUrl}/${userId}/charge-settings`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ settings }),
        });

        const resp = await response.json();

        if (!response.ok || !resp.success) {
            const errors = resp.errors && typeof resp.errors === 'object'
                ? Object.values(resp.errors).flat().join(' ')
                : null;
            chargeOverridesAlertShow(errors || resp.message || 'Unable to save charge overrides.');
            return;
        }

        chargeOverridesModal.hide();
    } catch (error) {
        chargeOverridesAlertShow('A network error occurred while saving charge overrides.');
    }
});

document.getElementById('apiUsersTable').addEventListener('change', async (event) => {
    const checkbox = event.target.closest('.btnToggleEmailNotifications');
    if (!checkbox) {
        return;
    }

    await toggleEmailNotifications(checkbox);
});

renderStoredApiKeyFlash();
loadApiUsers();
</script>
@endsection