@extends('layouts.master')

@section('title', 'Kelola User Hotspot')
@section('page-title', 'Kelola User Hotspot')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pelanggan.css') }}">
@endsection

@section('content')
    <div class="pelanggan-page">
        <div class="card page-header-card mb-3">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="mb-1">Kelola User Hotspot MikroTik</h4>
                    <small class="text-muted">Buat atau perbarui user hotspot langsung dari aplikasi.</small>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('pelanggan.hotspot-user-pairing') }}" class="btn btn-outline-info">
                        <i class="bx bx-link-alt"></i> Pairing User
                    </a>
                    <a href="{{ route('pelanggan.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Kembali
                    </a>
                </div>
            </div>
        </div>

        <div id="manage-toast-wrap" style="position:fixed;top:74px;right:16px;z-index:2000;width:320px;"></div>

        <div class="card mb-3">
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-md-6">
                        <label class="form-label mb-0">Router MikroTik</label>
                        <select id="router-select" class="form-select">
                            @foreach ($servers as $server)
                                <option value="{{ $server->id }}" @selected($selectedServerId == $server->id)>
                                    {{ $server->name }} ({{ $server->host }}:{{ $server->port }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 d-flex gap-2">
                        <button type="button" id="btn-load-users" class="btn btn-outline-primary">
                            <i class="bx bx-cloud-download"></i> Load User
                        </button>
                        <button type="button" id="btn-new-user" class="btn btn-outline-success">
                            <i class="bx bx-plus"></i> User Baru
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <div class="section-title mb-2">Dashboard Sinkronisasi MikroTik</div>
                @php
                    $global = $syncDashboard['global'] ?? [];
                    $selected = $syncDashboard['selected'] ?? [];
                    $perRouter = $syncDashboard['per_router'] ?? collect();
                @endphp
                <div class="row g-2">
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100 bg-light-subtle">
                            <div class="small text-muted">Total Hotspot User (Global)</div>
                            <div class="fw-semibold fs-5">{{ number_format((int) ($global['total'] ?? 0), 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Sudah Dipasangkan (Global)</div>
                            <div class="fw-semibold fs-5 text-success">{{ number_format((int) ($global['paired'] ?? 0), 0, ',', '.') }}</div>
                            <small class="text-muted">Belum: {{ number_format((int) ($global['unpaired'] ?? 0), 0, ',', '.') }}</small>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Sinkron Sukses (Global)</div>
                            <div class="fw-semibold fs-5 text-success">{{ number_format((int) ($global['sync_success'] ?? 0), 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Sinkron Gagal (Global)</div>
                            <div class="fw-semibold fs-5 text-danger">{{ number_format((int) ($global['sync_failed'] ?? 0), 0, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100 bg-light-subtle">
                            <div class="small text-muted">Router Terpilih</div>
                            <div class="fw-semibold fs-6">
                                {{ optional($servers->firstWhere('id', $selectedServerId))->name ?? '-' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Total Router Terpilih</div>
                            <div class="fw-semibold fs-5">{{ number_format((int) ($selected['total'] ?? 0), 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Paired Router Terpilih</div>
                            <div class="fw-semibold fs-5 text-success">{{ number_format((int) ($selected['paired'] ?? 0), 0, ',', '.') }}</div>
                            <small class="text-muted">Belum: {{ number_format((int) ($selected['unpaired'] ?? 0), 0, ',', '.') }}</small>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="border rounded p-2 h-100">
                            <div class="small text-muted">Sinkron (OK/Gagal)</div>
                            <div class="fw-semibold fs-6">
                                <span class="text-success">{{ number_format((int) ($selected['sync_success'] ?? 0), 0, ',', '.') }}</span>
                                /
                                <span class="text-danger">{{ number_format((int) ($selected['sync_failed'] ?? 0), 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <details class="mt-2">
                    <summary class="small text-primary" style="cursor:pointer;">Lihat Ringkasan Per Router</summary>
                    <div class="table-responsive mt-2">
                        <table class="table table-sm align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Router</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Paired</th>
                                    <th class="text-end">Belum</th>
                                    <th class="text-end">Sync OK</th>
                                    <th class="text-end">Sync Gagal</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($perRouter as $r)
                                    <tr>
                                        <td>{{ $r['name'] }} <span class="text-muted">({{ $r['host'] }}:{{ $r['port'] }})</span></td>
                                        <td class="text-end">{{ number_format((int) $r['total'], 0, ',', '.') }}</td>
                                        <td class="text-end text-success">{{ number_format((int) $r['paired'], 0, ',', '.') }}</td>
                                        <td class="text-end">{{ number_format((int) $r['unpaired'], 0, ',', '.') }}</td>
                                        <td class="text-end text-success">{{ number_format((int) $r['sync_success'], 0, ',', '.') }}</td>
                                        <td class="text-end text-danger">{{ number_format((int) $r['sync_failed'], 0, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </details>
            </div>
        </div>

        <ul class="nav nav-pills mb-3 gap-2" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-manage-user" type="button" role="tab">
                    Kelola User
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-unpaired-user" type="button" role="tab">
                    User MikroTik Belum Dipasangkan
                </button>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-manage-user" role="tabpanel">
                <div class="row g-3">
                    <div class="col-lg-6">
                        <div class="card table-card h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-2 gap-2">
                                    <div class="section-title mb-0">Daftar User Hotspot</div>
                                    <input type="text" id="user-search" class="form-control form-control-sm" style="max-width:220px;"
                                        placeholder="Cari user/comment/profile">
                                </div>
                                <div class="table-responsive" style="max-height:520px;">
                                    <table class="table table-sm align-middle" id="users-table">
                                        <thead>
                                            <tr>
                                                <th>Username</th>
                                                <th>Profile</th>
                                                <th>Status</th>
                                                <th class="text-end">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="4" class="text-center text-muted py-4">Klik "Load User" untuk mengambil data dari router.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <div class="section-title mb-3">Form User Hotspot</div>
                                <form id="manage-user-form">
                                    <input type="hidden" name="id" id="field-id">
                                    <input type="hidden" name="old_username" id="field-old-username">

                                    <div class="mb-2">
                                        <label class="form-label mb-0">Username</label>
                                        <input type="text" class="form-control" name="username" id="field-username" required maxlength="100">
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label mb-0">Profile</label>
                                        <select class="form-select" name="profile" id="field-profile">
                                            <option value="">-- Klik Load User dulu --</option>
                                        </select>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label mb-0">Comment</label>
                                        <input type="text" class="form-control" name="comment" id="field-comment" maxlength="255">
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="1" id="field-disabled" name="disabled">
                                        <label class="form-check-label" for="field-disabled">Disabled</label>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-success" id="btn-save-user">
                                            <i class="bx bx-save"></i> Simpan User
                                        </button>
                                        <button type="button" class="btn btn-outline-danger" id="btn-delete-user" disabled>
                                            <i class="bx bx-trash"></i> Hapus User
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" id="btn-reset-form">Reset Form</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-unpaired-user" role="tabpanel">
                <div class="card table-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2 gap-2">
                            <div class="section-title mb-0">User MikroTik Belum Dipasangkan</div>
                            <small class="text-muted">Pilih pelanggan lalu klik pasangkan.</small>
                        </div>
                        <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-unpaired-select-all">
                                Pilih Semua
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-unpaired-unselect-all">
                                Bersihkan Pilihan
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-success" id="btn-unpaired-bulk-pair">
                                <i class="bx bx-link"></i> Pasangkan Terpilih
                            </button>
                            <small class="text-muted" id="unpaired-selected-count">0 dipilih</small>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm align-middle" id="unpaired-users-table">
                                <thead>
                                    <tr>
                                        <th style="width:42px;">Pilih</th>
                                        <th>Username</th>
                                        <th>Profile</th>
                                        <th>Comment</th>
                                        <th>Status</th>
                                        <th style="min-width: 360px;">Pasangkan Cepat</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">Klik "Load User" untuk melihat user yang belum dipasangkan.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadUrl = @json(route('pelanggan.hotspot-router-users-manage'));
            const profilesUrl = @json(route('pelanggan.hotspot-router-profiles'));
            const saveUrl = @json(route('pelanggan.hotspot-router-users-manage-save'));
            const deleteUrl = @json(route('pelanggan.hotspot-router-users-manage-delete'));
            const pairUrlTemplate = @json(route('pelanggan.hotspot-pair', ['pelanggan' => '__ID__']));
            const csrfToken = @json(csrf_token());
            const toastWrap = document.getElementById('manage-toast-wrap');

            const routerSelect = document.getElementById('router-select');
            const loadBtn = document.getElementById('btn-load-users');
            const newBtn = document.getElementById('btn-new-user');
            const saveBtn = document.getElementById('btn-save-user');
            const deleteBtn = document.getElementById('btn-delete-user');
            const resetBtn = document.getElementById('btn-reset-form');
            const searchInput = document.getElementById('user-search');
            const usersTableBody = document.querySelector('#users-table tbody');
            const unpairedUsersTableBody = document.querySelector('#unpaired-users-table tbody');
            const btnUnpairedSelectAll = document.getElementById('btn-unpaired-select-all');
            const btnUnpairedUnselectAll = document.getElementById('btn-unpaired-unselect-all');
            const btnUnpairedBulkPair = document.getElementById('btn-unpaired-bulk-pair');
            const unpairedSelectedCount = document.getElementById('unpaired-selected-count');
            const form = document.getElementById('manage-user-form');

            const fieldId = document.getElementById('field-id');
            const fieldOldUsername = document.getElementById('field-old-username');
            const fieldUsername = document.getElementById('field-username');
            const fieldProfile = document.getElementById('field-profile');
            const fieldComment = document.getElementById('field-comment');
            const fieldDisabled = document.getElementById('field-disabled');

            let allUsers = [];
            let selectedId = '';
            let profilesByServer = {};
            let usageByUsername = {};
            let customers = [];
            let unpairedUsers = [];
            let hasLoadedUsers = false;

            function normalize(v) {
                return String(v || '').trim().toLowerCase();
            }

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

            function showToast(message, type = 'info', duration = 1800) {
                if (!toastWrap) return;
                const node = document.createElement('div');
                node.style.cssText = 'border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(-8px);transition:all .18s ease;';
                const palette = {
                    success: ['#dff7e6', '#0f5a2a', '#b9ebc8'],
                    danger: ['#fde9eb', '#7b1f28', '#f6c7cd'],
                    info: ['#e8f3ff', '#184c86', '#c9e1ff'],
                    warning: ['#fff5df', '#7a5a12', '#f7dfab']
                };
                const colors = palette[type] || palette.info;
                node.style.background = colors[0];
                node.style.color = colors[1];
                node.style.border = '1px solid ' + colors[2];
                node.textContent = message;
                toastWrap.appendChild(node);
                requestAnimationFrame(() => {
                    node.style.opacity = '1';
                    node.style.transform = 'translateY(0)';
                });
                setTimeout(() => {
                    node.style.opacity = '0';
                    node.style.transform = 'translateY(-8px)';
                    setTimeout(() => node.remove(), 180);
                }, duration);
            }

            function resetForm() {
                selectedId = '';
                fieldId.value = '';
                fieldOldUsername.value = '';
                fieldUsername.value = '';
                const profiles = profilesByServer[Number(routerSelect.value || 0)] || [];
                if (Array.isArray(profiles) && profiles.length > 0) {
                    renderProfileOptions(profiles, '');
                } else {
                    fieldProfile.innerHTML = '<option value="">-- Klik Load User dulu --</option>';
                }
                fieldComment.value = '';
                fieldDisabled.checked = false;
                if (deleteBtn) deleteBtn.disabled = true;
            }

            function renderInitialPlaceholder(message) {
                usersTableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">' + escapeHtml(message) + '</td></tr>';
            }

            function renderUnpairedPlaceholder(message) {
                if (!unpairedUsersTableBody) return;
                unpairedUsersTableBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">' + escapeHtml(message) + '</td></tr>';
                updateUnpairedSelectedCount();
            }

            function customerOptionLabel(customer) {
                const kode = String(customer.kode_pelanggan || '').trim();
                const nama = String(customer.nama || '').trim();
                const kec = String(customer.kecamatan || '').trim();
                const desa = String(customer.desa || '').trim();
                const wilayah = [kec, desa].filter(Boolean).join(' / ');
                return (kode !== '' ? kode + ' - ' : '') + nama + (wilayah !== '' ? ' (' + wilayah + ')' : '');
            }

            function getAvailableCustomers() {
                return customers.filter(function(c) {
                    return normalize(c.hotspot_username || '') === '';
                });
            }

            function renderProfileOptions(list, selectedValue = '') {
                const selectedNorm = normalize(selectedValue);
                const items = Array.isArray(list) ? list : [];
                const html = ['<option value="">-- Pilih Profile --</option>'];

                items.forEach(function(p) {
                    const name = String((p && p.name) || '').trim();
                    if (!name) return;
                    const isSelected = normalize(name) === selectedNorm ? ' selected' : '';
                    html.push('<option value="' + escapeHtml(name) + '"' + isSelected + '>' + escapeHtml(name) + '</option>');
                });

                if (selectedValue && !items.some(function(p) {
                    return normalize((p && p.name) || '') === selectedNorm;
                })) {
                    html.push('<option value="' + escapeHtml(selectedValue) + '" selected>' + escapeHtml(selectedValue) + ' (manual)</option>');
                }

                fieldProfile.innerHTML = html.join('');
            }

            async function loadProfiles(forceReload = false) {
                const serverId = Number(routerSelect.value || 0);
                if (!serverId) {
                    renderProfileOptions([], '');
                    return;
                }

                if (!forceReload && Array.isArray(profilesByServer[serverId])) {
                    renderProfileOptions(profilesByServer[serverId], fieldProfile.value || '');
                    return;
                }

                try {
                    const url = new URL(profilesUrl, window.location.origin);
                    url.searchParams.set('mikrotik_server_id', String(serverId));
                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal mengambil profile hotspot.');

                    profilesByServer[serverId] = Array.isArray(json.profiles) ? json.profiles : [];
                    renderProfileOptions(profilesByServer[serverId], fieldProfile.value || '');
                } catch (err) {
                    renderProfileOptions([], fieldProfile.value || '');
                    showToast(err.message || 'Gagal mengambil profile hotspot.', 'warning', 2200);
                }
            }

            function setFormFromUser(user) {
                selectedId = String(user.id || '');
                fieldId.value = selectedId;
                fieldOldUsername.value = String(user.name || '');
                fieldUsername.value = String(user.name || '');
                renderProfileOptions(profilesByServer[Number(routerSelect.value || 0)] || [], String(user.profile || ''));
                fieldComment.value = String(user.comment || '');
                fieldDisabled.checked = Boolean(user.disabled);
                if (deleteBtn) deleteBtn.disabled = selectedId === '';
            }

            function renderUsers() {
                const keyword = normalize(searchInput.value || '');
                const filtered = allUsers.filter(function(u) {
                    if (!keyword) return true;
                    const str = normalize((u.name || '') + ' ' + (u.profile || '') + ' ' + (u.comment || ''));
                    return str.includes(keyword);
                });

                if (!filtered.length) {
                    usersTableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">Data user tidak ditemukan.</td></tr>';
                    return;
                }

                usersTableBody.innerHTML = filtered.map(function(u) {
                    const id = String(u.id || '');
                    const activeClass = id === selectedId ? 'table-primary' : '';
                    const statusBadge = u.disabled ? 'mk-badge mk-badge-neutral' : 'mk-badge mk-badge-success';
                    const statusText = u.disabled ? 'Disabled' : 'Aktif';
                    const username = escapeHtml(String(u.name || '-'));
                    const profile = escapeHtml(String(u.profile || '-'));
                    const comment = escapeHtml(String(u.comment || ''));
                    const usedBy = usageByUsername[normalize(u.name || '')] || null;
                    const usageInfo = usedBy ? ('<div class="small text-muted">Dipakai: ' + escapeHtml(String(usedBy.nama || '-')) + '</div>') : '';

                    return '' +
                        '<tr class="user-item-row ' + activeClass + '" data-id="' + id + '">' +
                        '<td><div class="fw-semibold">' + username + '</div><div class="small text-muted">' + (comment || '-') + '</div>' + usageInfo + '</td>' +
                        '<td>' + profile + '</td>' +
                        '<td><span class="' + statusBadge + '">' + statusText + '</span></td>' +
                        '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-primary user-edit-btn" data-id="' + id + '"><i class="bx bx-edit-alt"></i> Edit</button></td>' +
                        '</tr>';
                }).join('');
            }

            function renderUnpairedUsers() {
                if (!unpairedUsersTableBody) return;

                if (!hasLoadedUsers) {
                    renderUnpairedPlaceholder('Klik "Load User" untuk melihat user yang belum dipasangkan.');
                    return;
                }

                const availableCustomers = getAvailableCustomers();
                if (unpairedUsers.length === 0) {
                    renderUnpairedPlaceholder('Semua user hotspot pada router ini sudah dipasangkan.');
                    return;
                }

                unpairedUsersTableBody.innerHTML = unpairedUsers.map(function(u) {
                    const username = String(u.name || '').trim();
                    const profile = String(u.profile || '-').trim() || '-';
                    const comment = String(u.comment || '-').trim() || '-';
                    const statusClass = u.disabled ? 'mk-badge mk-badge-neutral' : 'mk-badge mk-badge-success';
                    const statusText = u.disabled ? 'Disabled' : 'Aktif';

                    const options = availableCustomers.length
                        ? availableCustomers.map(function(c) {
                            return '<option value="' + String(c.id) + '">' + escapeHtml(customerOptionLabel(c)) + '</option>';
                        }).join('')
                        : '<option value="">-- Tidak ada pelanggan kosong --</option>';

                    const selectDisabled = availableCustomers.length ? '' : ' disabled';
                    const buttonDisabled = availableCustomers.length ? '' : ' disabled';

                    return '' +
                        '<tr>' +
                        '<td><input type="checkbox" class="form-check-input quick-pair-check" data-username="' + escapeHtml(username) + '"></td>' +
                        '<td><div class="fw-semibold">' + escapeHtml(username) + '</div></td>' +
                        '<td>' + escapeHtml(profile) + '</td>' +
                        '<td>' + escapeHtml(comment) + '</td>' +
                        '<td><span class="' + statusClass + '">' + statusText + '</span></td>' +
                        '<td>' +
                        '<div class="d-flex gap-2">' +
                        '<select class="form-select form-select-sm quick-pair-customer"' + selectDisabled + ' data-username="' + escapeHtml(username) + '">' +
                        options +
                        '</select>' +
                        '<button type="button" class="btn btn-sm btn-outline-success quick-pair-btn" data-username="' + escapeHtml(username) + '"' + buttonDisabled + '>' +
                        '<i class="bx bx-link"></i> Pasangkan' +
                        '</button>' +
                        '</div>' +
                        '</td>' +
                        '</tr>';
                }).join('');
                updateUnpairedSelectedCount();
            }

            function updateUnpairedSelectedCount() {
                if (!unpairedSelectedCount || !unpairedUsersTableBody) return;
                const checkedCount = unpairedUsersTableBody.querySelectorAll('.quick-pair-check:checked').length;
                unpairedSelectedCount.textContent = checkedCount + ' dipilih';
            }

            async function quickPairUser(username, customerId, buttonEl) {
                const serverId = Number(routerSelect.value || 0);
                if (!serverId || !customerId || !username) return;

                const url = pairUrlTemplate.replace('__ID__', String(customerId));
                const payload = new URLSearchParams();
                payload.set('_token', csrfToken);
                payload.set('mikrotik_server_id', String(serverId));
                payload.set('hotspot_username', String(username));
                const selectedCustomer = customers.find(function(c) {
                    return Number(c.id) === Number(customerId);
                }) || null;

                if (buttonEl) buttonEl.disabled = true;
                try {
                    const res = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal memasangkan user.');

                    usageByUsername[normalize(username)] = {
                        id: Number(customerId),
                        nama: String((selectedCustomer && selectedCustomer.nama) || '')
                    };
                    customers = customers.map(function(c) {
                        if (Number(c.id) === Number(customerId)) {
                            return Object.assign({}, c, { hotspot_username: username });
                        }
                        return c;
                    });
                    unpairedUsers = unpairedUsers.filter(function(u) {
                        return normalize(u.name || '') !== normalize(username);
                    });

                    renderUsers();
                    renderUnpairedUsers();
                    showToast(json.message || 'User berhasil dipasangkan.', 'success', 1800);
                } catch (err) {
                    showToast(err.message || 'Gagal memasangkan user.', 'danger', 2500);
                } finally {
                    if (buttonEl) buttonEl.disabled = false;
                }
            }

            async function bulkPairSelected() {
                if (!unpairedUsersTableBody) return;
                const checked = Array.from(unpairedUsersTableBody.querySelectorAll('.quick-pair-check:checked'));
                if (checked.length === 0) {
                    showToast('Pilih minimal satu user untuk bulk pairing.', 'warning', 2000);
                    return;
                }

                const assignments = [];
                const usedCustomers = new Set();
                for (const checkbox of checked) {
                    const row = checkbox.closest('tr');
                    const username = String(checkbox.dataset.username || '').trim();
                    const select = row ? row.querySelector('.quick-pair-customer') : null;
                    const customerId = Number(select ? (select.value || 0) : 0);
                    if (!username || !customerId) {
                        continue;
                    }
                    if (usedCustomers.has(customerId)) {
                        showToast('Satu pelanggan tidak boleh dipakai untuk lebih dari satu user dalam satu batch.', 'warning', 2400);
                        return;
                    }
                    usedCustomers.add(customerId);
                    assignments.push({ username, customerId });
                }

                if (assignments.length === 0) {
                    showToast('Belum ada pasangan user-pelanggan yang valid untuk diproses.', 'warning', 2200);
                    return;
                }

                const original = btnUnpairedBulkPair ? btnUnpairedBulkPair.innerHTML : '';
                if (btnUnpairedBulkPair) {
                    btnUnpairedBulkPair.disabled = true;
                    btnUnpairedBulkPair.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Memproses';
                }

                let successCount = 0;
                const failures = [];
                for (const item of assignments) {
                    const url = pairUrlTemplate.replace('__ID__', String(item.customerId));
                    const payload = new URLSearchParams();
                    payload.set('_token', csrfToken);
                    payload.set('mikrotik_server_id', String(Number(routerSelect.value || 0)));
                    payload.set('hotspot_username', String(item.username));
                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            },
                            body: payload.toString()
                        });
                        const json = await res.json();
                        if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal memasangkan user.');

                        const selectedCustomer = customers.find(function(c) {
                            return Number(c.id) === Number(item.customerId);
                        }) || null;
                        usageByUsername[normalize(item.username)] = {
                            id: Number(item.customerId),
                            nama: String((selectedCustomer && selectedCustomer.nama) || '')
                        };
                        customers = customers.map(function(c) {
                            if (Number(c.id) === Number(item.customerId)) {
                                return Object.assign({}, c, { hotspot_username: item.username });
                            }
                            return c;
                        });
                        successCount++;
                    } catch (err) {
                        failures.push(item.username + ': ' + (err.message || 'gagal'));
                    }
                }

                unpairedUsers = unpairedUsers.filter(function(u) {
                    return !usageByUsername[normalize(u.name || '')];
                });
                renderUsers();
                renderUnpairedUsers();

                if (successCount > 0) {
                    showToast(successCount + ' user berhasil dipasangkan.', 'success', 2000);
                }
                if (failures.length > 0) {
                    showToast('Sebagian gagal (' + failures.length + '): ' + failures.slice(0, 2).join(' | '), 'danger', 3200);
                }

                if (btnUnpairedBulkPair) {
                    btnUnpairedBulkPair.disabled = false;
                    btnUnpairedBulkPair.innerHTML = original;
                }
            }

            async function loadUsers() {
                const serverId = Number(routerSelect.value || 0);
                if (!serverId) {
                    showToast('Pilih router terlebih dahulu.', 'warning');
                    return;
                }

                loadBtn.disabled = true;
                const oldLabel = loadBtn.innerHTML;
                loadBtn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Loading';
                try {
                    await loadProfiles(true);
                    const url = new URL(loadUrl, window.location.origin);
                    url.searchParams.set('mikrotik_server_id', String(serverId));
                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal mengambil user hotspot.');

                    allUsers = Array.isArray(json.users) ? json.users : [];
                    unpairedUsers = Array.isArray(json.unpaired_users) ? json.unpaired_users : [];
                    usageByUsername = json.usage && typeof json.usage === 'object' ? json.usage : {};
                    customers = Array.isArray(json.customers) ? json.customers : [];
                    hasLoadedUsers = true;
                    renderUsers();
                    renderUnpairedUsers();
                    showToast(json.message || 'Data user berhasil dimuat.', 'success', 1600);
                } catch (err) {
                    allUsers = [];
                    unpairedUsers = [];
                    usageByUsername = {};
                    customers = [];
                    hasLoadedUsers = false;
                    renderUsers();
                    renderUnpairedUsers();
                    showToast(err.message || 'Terjadi kesalahan.', 'danger', 2500);
                } finally {
                    loadBtn.disabled = false;
                    loadBtn.innerHTML = oldLabel;
                }
            }

            async function saveUser(e) {
                e.preventDefault();
                const serverId = Number(routerSelect.value || 0);
                if (!serverId) {
                    showToast('Pilih router terlebih dahulu.', 'warning');
                    return;
                }
                if (!fieldUsername.value.trim()) {
                    showToast('Username wajib diisi.', 'warning');
                    return;
                }

                saveBtn.disabled = true;
                const payload = new URLSearchParams();
                payload.set('_token', csrfToken);
                payload.set('mikrotik_server_id', String(serverId));
                payload.set('id', fieldId.value || '');
                payload.set('old_username', fieldOldUsername.value || '');
                payload.set('username', fieldUsername.value || '');
                payload.set('password', fieldUsername.value || '');
                payload.set('profile', fieldProfile.value || '');
                payload.set('comment', fieldComment.value || '');
                payload.set('disabled', fieldDisabled.checked ? '1' : '0');

                try {
                    const res = await fetch(saveUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal simpan user hotspot.');

                    const saved = json.data || {};
                    selectedId = String(saved.id || fieldId.value || '');
                    if (selectedId) fieldId.value = selectedId;
                    if (saved.name) fieldOldUsername.value = String(saved.name);

                    await loadUsers();
                    const selected = allUsers.find(u => String(u.id || '') === selectedId);
                    if (selected) setFormFromUser(selected);
                    renderUsers();
                    showToast(json.message || 'User hotspot berhasil disimpan.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal menyimpan user hotspot.', 'danger', 2500);
                } finally {
                    saveBtn.disabled = false;
                }
            }

            async function deleteUser() {
                const serverId = Number(routerSelect.value || 0);
                if (!serverId) {
                    showToast('Pilih router terlebih dahulu.', 'warning');
                    return;
                }

                const userId = fieldId.value || '';
                const username = fieldOldUsername.value || fieldUsername.value || '';
                if (!userId && !username) {
                    showToast('Pilih user yang ingin dihapus terlebih dahulu.', 'warning');
                    return;
                }

                if (!window.confirm('Hapus user hotspot ini dari router?')) {
                    return;
                }

                if (deleteBtn) deleteBtn.disabled = true;
                try {
                    const payload = new URLSearchParams();
                    payload.set('_token', csrfToken);
                    payload.set('_method', 'DELETE');
                    payload.set('mikrotik_server_id', String(serverId));
                    payload.set('id', userId);
                    payload.set('username', username);

                    const res = await fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: payload.toString()
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal menghapus user hotspot.');

                    resetForm();
                    await loadUsers();
                    showToast(json.message || 'User hotspot berhasil dihapus.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal menghapus user hotspot.', 'danger', 2600);
                } finally {
                    if (deleteBtn) deleteBtn.disabled = fieldId.value === '';
                }
            }

            usersTableBody.addEventListener('click', function(e) {
                const editBtn = e.target.closest('.user-edit-btn');
                const row = editBtn ? editBtn.closest('.user-item-row') : e.target.closest('.user-item-row');
                if (!row) return;
                const id = String(row.dataset.id || '');
                const user = allUsers.find(u => String(u.id || '') === id);
                if (!user) return;
                setFormFromUser(user);
                renderUsers();
            });

            if (unpairedUsersTableBody) {
                unpairedUsersTableBody.addEventListener('click', function(e) {
                    const btn = e.target.closest('.quick-pair-btn');
                    if (!btn) return;

                    const username = String(btn.dataset.username || '').trim();
                    const wrap = btn.closest('tr');
                    const select = wrap ? wrap.querySelector('.quick-pair-customer') : null;
                    const customerId = Number(select ? (select.value || 0) : 0);
                    if (!customerId) {
                        showToast('Pilih pelanggan terlebih dahulu.', 'warning', 1800);
                        return;
                    }
                    quickPairUser(username, customerId, btn);
                });

                unpairedUsersTableBody.addEventListener('change', function(e) {
                    const checkbox = e.target.closest('.quick-pair-check');
                    if (!checkbox) return;
                    updateUnpairedSelectedCount();
                });
            }

            searchInput.addEventListener('input', renderUsers);
            loadBtn.addEventListener('click', loadUsers);
            if (btnUnpairedSelectAll) {
                btnUnpairedSelectAll.addEventListener('click', function() {
                    if (!unpairedUsersTableBody) return;
                    unpairedUsersTableBody.querySelectorAll('.quick-pair-check').forEach(function(cb) {
                        cb.checked = true;
                    });
                    updateUnpairedSelectedCount();
                });
            }
            if (btnUnpairedUnselectAll) {
                btnUnpairedUnselectAll.addEventListener('click', function() {
                    if (!unpairedUsersTableBody) return;
                    unpairedUsersTableBody.querySelectorAll('.quick-pair-check').forEach(function(cb) {
                        cb.checked = false;
                    });
                    updateUnpairedSelectedCount();
                });
            }
            if (btnUnpairedBulkPair) {
                btnUnpairedBulkPair.addEventListener('click', bulkPairSelected);
            }
            routerSelect.addEventListener('change', function() {
                profilesByServer = {};
                allUsers = [];
                unpairedUsers = [];
                usageByUsername = {};
                customers = [];
                hasLoadedUsers = false;
                fieldProfile.innerHTML = '<option value="">-- Klik Load User dulu --</option>';
                resetForm();
                renderInitialPlaceholder('Router berubah. Klik "Load User" untuk mengambil data dari router terpilih.');
                renderUnpairedPlaceholder('Router berubah. Klik "Load User" untuk melihat user yang belum dipasangkan.');
            });
            newBtn.addEventListener('click', function() {
                resetForm();
                renderUsers();
                renderUnpairedUsers();
            });
            if (deleteBtn) {
                deleteBtn.addEventListener('click', deleteUser);
            }
            resetBtn.addEventListener('click', function() {
                resetForm();
                renderUsers();
                renderUnpairedUsers();
            });
            form.addEventListener('submit', saveUser);
            renderInitialPlaceholder('Klik "Load User" untuk mengambil data dari router.');
            renderUnpairedPlaceholder('Klik "Load User" untuk melihat user yang belum dipasangkan.');
        });
    </script>
@endsection