@extends('layouts.adminlte')

@section('title', 'User Management')
@section('page_title', 'User Management')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <style>
        .signature-pad {
            background: #fff;
            border: 1px dashed #d0d7de;
            border-radius: 6px;
            height: 140px;
            padding: 8px;
        }
        #signatureCanvas {
            width: 100%;
            height: 120px;
            display: block;
        }
        #signaturePreview {
            max-width: 100%;
            max-height: 120px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
        }
        #photoPreview {
            max-width: 120px;
            max-height: 120px;
            border: 1px solid #dee2e6;
            border-radius: 50%;
            object-fit: cover;
        }
        .menu-access-cell {
            max-width: 260px;
            line-height: 1.25;
        }
        .menu-access-more {
            display: inline-block;
            margin-left: 6px;
            font-size: 12px;
            color: #6c757d;
            border: 1px solid rgba(108, 117, 125, 0.35);
            padding: 0 6px;
            border-radius: 999px;
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Users</h3>
            <div class="card-tools d-flex gap-2">
                <a href="{{ route('guides.index', ['section' => 'user-management']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i> User Guide
                </a>
                <a href="{{ route('user.template') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-arrow-down me-1"></i> Template
                </a>
                <a href="{{ route('user.export') }}" class="btn btn-outline-success btn-sm">
                    <i class="fas fa-file-excel me-1"></i> Export
                </a>
                <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
                    <i class="fas fa-file-import me-1"></i> Import
                </button>
                <button class="btn btn-outline-danger btn-sm" id="btnBulkDelete" disabled>
                    <i class="fas fa-trash me-1"></i> Delete Selected (0)
                </button>
                <button class="btn btn-outline-warning btn-sm" id="btnBulkPekerjaProfile" disabled>
                    <i class="fas fa-user-check me-1"></i> Bulk Profil Pekerja (0)
                </button>
                <button class="btn btn-primary btn-sm" id="btnAdd">
                    <i class="fas fa-user-plus me-1"></i> Add User
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="usersTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th style="width: 40px;">
                                <input type="checkbox" id="selectAllUsers" />
                            </th>
                            <th style="width: 60px;">#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Username</th>
                            <th>No HP</th>
                            <th>Department</th>
                            <th>Theme</th>
                            <th>Profil Menu</th>
                            <th>Active</th>
                            <th>Menu Access</th>
                            <th>Signature</th>
                            <th>Photo</th>
                            <th style="width: 140px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalTitle">Add User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="userForm">
                    <div class="modal-body">
                        <input type="hidden" id="userId" />
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" required />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" required />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" class="form-control" id="username" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Profil Menu</label>
                                <select class="form-select" id="department">
                                    <option value="">- Pilih Profil Menu -</option>
                                    @foreach ($menuProfiles as $profile)
                                        <option value="{{ $profile }}">{{ $profile }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nomor HP</label>
                                <input type="text" class="form-control" id="nomor_hp" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Theme Profile</label>
                                <select class="form-select" id="theme_profile">
                                    <option value="default">Default</option>
                                    <option value="ocean">Ocean</option>
                                    <option value="mint">Mint</option>
                                    <option value="midnight">Midnight</option>
                                    <option value="sunset">Sunset</option>
                                    <option value="forest">Forest</option>
                                    <option value="rose">Rose</option>
                                    <option value="amber">Amber</option>
                                    <option value="slate">Slate</option>
                                    <option value="sky">Sky</option>
                                    <option value="emerald">Emerald</option>
                                    <option value="grape">Grape</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Theme Color</label>
                                <input type="color" class="form-control form-control-color" id="theme_color" value="#3b82f6" />
                                <small class="text-muted">Warna utama untuk user ini.</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Sidebar/Layout Profile</label>
                                <select class="form-select" id="layout_profile">
                                    <option value="default">Default Sidebar</option>
                                    <option value="fixed_sidebar">Fixed Sidebar</option>
                                    <option value="fixed_header">Fixed Header</option>
                                    <option value="fixed_footer">Fixed Footer</option>
                                    <option value="fixed_complete">Fixed Complete</option>
                                    <option value="layout_custom">Layout + Custom Area</option>
                                    <option value="sidebar_mini">Sidebar Mini</option>
                                    <option value="sidebar_mini_collapsed">Sidebar Mini + Collapsed</option>
                                    <option value="sidebar_mini_logo">Sidebar Mini + Logo Switch</option>
                                    <option value="layout_rtl">Layout RTL</option>
                                </select>
                                <small class="text-muted">Gaya layout AdminLTE per user.</small>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">Tanda Tangan</label>
                                <div class="row g-2">
                                    <div class="col-lg-6">
                                        <div class="signature-pad">
                                            <canvas id="signatureCanvas"></canvas>
                                        </div>
                                        <div class="d-flex flex-wrap gap-2 mt-2">
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="signatureClear">Clear Canvas</button>
                                            <button type="button" class="btn btn-outline-danger btn-sm" id="signatureRemove">Remove Signature</button>
                                        </div>
                                        <small class="text-muted">Gambar manual di area ini.</small>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="file" class="form-control" id="signature_file" accept="image/png,image/jpeg" />
                                        <div class="mt-2">
                                            <img id="signaturePreview" class="d-none" alt="Signature preview" />
                                        </div>
                                        <small class="text-muted">Upload file JPG/PNG.</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">Foto Profil</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <img id="photoPreview" class="d-none" alt="Photo preview" />
                                    </div>
                                    <div class="col">
                                        <input type="file" class="form-control" id="photo_file" accept="image/png,image/jpeg" />
                                        <div class="d-flex flex-wrap gap-2 mt-2">
                                            <button type="button" class="btn btn-outline-danger btn-sm" id="photoRemove">Remove Photo</button>
                                        </div>
                                        <small class="text-muted">Upload foto JPG/PNG.</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <button type="button" class="btn btn-outline-warning btn-sm" id="resetUserTheme">
                                    Reset Theme ke Default
                                </button>
                            </div>
                            <div class="col-md-6 mb-3 d-none">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="form-label mb-0">Role</label>
                                    <a href="{{ route('role_akses.index') }}" target="_blank" class="small">Referensi Role Akses</a>
                                </div>
                                <select class="form-select" id="role_id">
                                    <option value="">-</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Jika role dipilih, Menu Access otomatis mengikuti role.</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">PIN</label>
                                <input type="text" class="form-control" id="pin" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block">OTP Login</label>
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="otp_enabled">
                                    <label class="form-check-label" for="otp_enabled">Aktifkan OTP untuk user ini</label>
                                </div>
                                <small class="text-muted">Jika nonaktif, user login tanpa OTP.</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Channel OTP</label>
                                <select class="form-select" id="otp_channel">
                                    <option value="none">Tidak aktif</option>
                                    <option value="email">Email</option>
                                    <option value="sms">SMS</option>
                                    <option value="wa">WhatsApp</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="password" />
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Leave empty to keep current password (edit).</small>
                            </div>
                            <div class="col-12 mb-3" id="menuAccessSection">
                                <label class="form-label">Menu Access (From Profil Menu Aktif)</label>
                                <div class="d-flex gap-2 mb-2">
                                    <input type="text" class="form-control form-control-sm" id="menuAccessSearch" placeholder="Search menu access..." />
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="menuAccessSearchClear">Clear</button>
                                </div>
                                <select class="form-select" id="menu_access_ids" multiple size="8">
                                    @foreach ($menus as $menu)
                                        <option value="{{ $menu->id }}">{{ $menu->name }}{{ $menu->department ? ' (' . $menu->department . ')' : '' }}</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Jika role/profil dipilih, menu access otomatis mengikuti toggle di Role Akses.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Users (XLSX)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="importForm">
                    <div class="modal-body">
                        <input type="file" class="form-control" id="importFile" accept=".xlsx,.xls" required />
                        <small class="text-muted">Use the template for correct columns.</small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>

    <script>
        $(function () {
            if (!$.fn.DataTable) {
                Swal.fire('Error', 'DataTables not loaded', 'error');
                return;
            }

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const escapeHtml = (value) => {
                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#39;');
            };

            const userModalEl = document.getElementById('userModal');
            const userModal = new bootstrap.Modal(userModalEl);
            const importModalEl = document.getElementById('importModal');
            const importModal = new bootstrap.Modal(importModalEl);
            const menuAccessSearch = $('#menuAccessSearch');
            const menuAccessSearchClear = $('#menuAccessSearchClear');
            const menuAccessSelect = $('#menu_access_ids');
            const menuAccessSection = $('#menuAccessSection');
            const menuAccessOptions = $('#menu_access_ids option');
            const departmentSelect = $('#department');
            const rolesList = @json($roles->map(fn ($role) => ['id' => $role->id, 'name' => $role->name])->values());
            const rolesByName = new Map(rolesList.map((role) => [String(role.name || '').toLowerCase(), String(role.id)]));
            const allowedDepartments = @json($menuProfiles->values());
            const allowedDeptSet = new Set(allowedDepartments.map((d) => (d || '').toString().trim().toLowerCase()).filter(Boolean));
            const isAllowedDepartment = (value) => {
                const key = (value || '').toString().trim().toLowerCase();
                return key !== '' && allowedDeptSet.has(key);
            };
            const selectedUserIds = new Set();
            const selectAllUsers = $('#selectAllUsers');
            const btnBulkDelete = $('#btnBulkDelete');
            const btnBulkPekerjaProfile = $('#btnBulkPekerjaProfile');
            let usersCache = [];
            const signatureCanvas = document.getElementById('signatureCanvas');
            const signatureCtx = signatureCanvas?.getContext('2d');
            const signatureFile = $('#signature_file');
            const signaturePreview = $('#signaturePreview');
            const photoFile = $('#photo_file');
            const photoPreview = $('#photoPreview');
            const setPreviewImage = (el, src) => {
                if (!src) {
                    el.addClass('d-none').attr('src', '');
                    return;
                }
                el.off('error.preview').on('error.preview', function () {
                    $(this).addClass('d-none').attr('src', '');
                });
                el.attr('src', src).removeClass('d-none');
            };
            const updateSignaturePreviewFromCanvas = () => {
                if (!signatureCanvas || !signatureHasDrawing) {
                    return;
                }
                setPreviewImage(signaturePreview, signatureCanvas.toDataURL('image/png'));
            };
            const otpEnabledInput = $('#otp_enabled');
            const otpChannelInput = $('#otp_channel');
            let signatureDrawing = false;
            let signatureHasDrawing = false;
            let signatureRemoved = false;
            let photoRemoved = false;
            const syncOtpFieldState = () => {
                const isEnabled = otpEnabledInput.is(':checked');
                otpChannelInput.prop('disabled', !isEnabled);
                if (!isEnabled) {
                    otpChannelInput.val('none');
                } else if ((otpChannelInput.val() || 'none') === 'none') {
                    otpChannelInput.val('email');
                }
            };
            const buildDepartmentFilter = () => {
                const headerRow = $('#usersTable thead tr').first();
                const existing = headerRow.find('select[data-role=\"department-filter\"]');
                if (existing.length) {
                    return existing;
                }
                const departmentHeader = headerRow.find('th').eq(6);
                const filter = $(`
                    <select class="form-select form-select-sm mt-1" data-role="department-filter">
                        <option value="">All</option>
                    </select>
                `);
                departmentHeader.append(filter);
                return filter;
            };

            const table = $('#usersTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => {
                            if (row.is_self) {
                                return '<span class="text-muted">-</span>';
                            }
                            return `<input type="checkbox" class="row-select-user" value="${data}" />`;
                        }
                    },
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'email' },
                    { data: 'username', render: (data) => data || '-' },
                    { data: 'nomor_hp', render: (data) => data || '-' },
                    { data: 'department' },
                    {
                        data: null,
                        render: (data, type, row) => {
                            const profile = (row.theme_profile || 'default').toString();
                            const color = (row.theme_color || '').toString();
                            const swatch = color
                                ? `<span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:${color};border:1px solid #cfd4da;vertical-align:middle;margin-right:6px;"></span>`
                                : '';
                            return `${swatch}${profile}`;
                        }
                    },
                    { data: 'roles' },
                    {
                        data: 'role_active',
                        orderable: false,
                        searchable: false,
                        render: (data, type, row) => {
                            if (!row.role_id) return '<span class="text-muted">-</span>';
                            if (row.is_admin_profile) {
                                return '<span class="badge bg-success">Always Active</span>';
                            }
                            const checked = data ? 'checked' : '';
                            return `
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input profile-active-toggle" type="checkbox" data-id="${row.id}" ${checked} />
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'menu_access',
                        render: (data) => {
                            const raw = String(data || '').trim();
                            if (!raw) return '<span class="text-muted">-</span>';

                            const parts = raw
                                .split(',')
                                .map((x) => x.trim())
                                .filter(Boolean);

                            const maxShow = 3;
                            const shown = parts.slice(0, maxShow);
                            const remaining = Math.max(0, parts.length - shown.length);

                            const fullTitle = escapeHtml(parts.join('\n'));
                            const shownText = escapeHtml(shown.join(', '));
                            const more = remaining > 0 ? `<span class="menu-access-more" title="${fullTitle}">+${remaining}</span>` : '';

                            return `<div class="menu-access-cell" title="${fullTitle}">${shownText}${more}</div>`;
                        }
                    },
                    {
                        data: 'signature_url',
                        orderable: false,
                        searchable: false,
                        render: (data) => {
                            if (!data) return '<span class="text-muted">-</span>';
                            return `<img src="${data}" alt="Signature" style="height:32px;max-width:120px;border:1px solid #dee2e6;border-radius:4px;" onerror="this.outerHTML='<span class=&quot;text-muted&quot;>-</span>'" />`;
                        }
                    },
                    {
                        data: 'photo_url',
                        orderable: false,
                        searchable: false,
                        render: (data) => {
                            if (!data) return '<span class="text-muted">-</span>';
                            return `<img src="${data}" alt="Photo" style="height:32px;width:32px;border-radius:50%;object-fit:cover;border:1px solid #dee2e6;" onerror="this.outerHTML='<span class=&quot;text-muted&quot;>-</span>'" />`;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => {
                            const deleteButton = row.is_self
                                ? ''
                                : `<button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>`;
                            return `
                                <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                                ${deleteButton}
                            `;
                        }
                    }
                ]
            });
            const refreshSelectionUi = () => {
                const selectedCount = selectedUserIds.size;
                btnBulkDelete
                    .prop('disabled', selectedCount === 0)
                    .html(`<i class="fas fa-trash me-1"></i> Delete Selected (${selectedCount})`);
                btnBulkPekerjaProfile
                    .prop('disabled', selectedCount === 0)
                    .html(`<i class="fas fa-user-check me-1"></i> Bulk Profil Pekerja (${selectedCount})`);

                const visibleRows = table.rows({ search: 'applied' }).data().toArray();
                const visibleIds = visibleRows.map((row) => String(row.id));
                const selectedVisible = visibleIds.filter((id) => selectedUserIds.has(id)).length;
                selectAllUsers.prop('checked', visibleIds.length > 0 && selectedVisible === visibleIds.length);
                selectAllUsers.prop('indeterminate', selectedVisible > 0 && selectedVisible < visibleIds.length);
            };
            table.on('draw', function () {
                $('#usersTable .row-select-user').each(function () {
                    this.checked = selectedUserIds.has(String($(this).val()));
                });
                refreshSelectionUi();
            });
            const getRowDataFromButton = (buttonEl) => {
                const tr = $(buttonEl).closest('tr');
                const row = table.row(tr);
                if (row.data()) {
                    return row.data();
                }
                const prev = tr.prev();
                return table.row(prev).data() || null;
            };

            const loadUsers = () => {
                $.getJSON('{{ route('user.data') }}')
                    .done((resp) => {
                        usersCache = resp.data || [];
                        selectedUserIds.clear();
                        table.clear().rows.add(usersCache).draw();
                        const filter = buildDepartmentFilter();
                        const departments = allowedDepartments
                            .map((d) => (d || '').toString().trim())
                            .filter(Boolean)
                            .sort((a, b) => a.localeCompare(b));
                        filter.find('option:gt(0)').remove();
                        departments.forEach((dept) => {
                            filter.append(new Option(dept, dept));
                        });
                        refreshSelectionUi();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed to load user data', 'error');
                    });
            };

            $('#usersTable thead').on('change', 'select[data-role="department-filter"]', function () {
                const value = $(this).val();
                table.column(6).search(value ? `^${$.fn.dataTable.util.escapeRegex(value)}$` : '', true, false).draw();
            });

            const reloadTable = () => loadUsers();
            const applyMenuAccessSearch = () => {
                const keyword = menuAccessSearch.val().toString().trim().toLowerCase();
                menuAccessOptions.each(function () {
                    const label = $(this).text().toLowerCase();
                    this.hidden = keyword !== '' && !label.includes(keyword);
                });
            };

            const syncMenuAccessFromRole = async (roleId) => {
                if (!roleId) {
                    menuAccessSelect.prop('disabled', false);
                    return;
                }

                try {
                    const response = await fetch(`{{ url('/role_akses') }}/${roleId}/matrix`, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const payload = await response.json();
                    if (!response.ok) throw new Error(payload?.message || 'Gagal memuat profil menu');

                    const menuIds = (payload.rows || [])
                        .filter((row) => row.permissions?.view?.checked)
                        .map((row) => String(row.id));
                    menuAccessSelect.val(menuIds);
                    menuAccessSelect.prop('disabled', true);
                } catch (error) {
                    toastr.error(error.message || 'Gagal sinkron menu profile');
                }
            };
            const updateMenuAccessState = (roleId) => {
                const hasRole = !!roleId;
                menuAccessSection.toggleClass('d-none', hasRole);
                menuAccessSelect.prop('disabled', hasRole);
                menuAccessSearch.prop('disabled', hasRole);
                menuAccessSearchClear.prop('disabled', hasRole);
            };
            const ensureDepartmentOption = (departmentName) => {
                const value = (departmentName || '').toString().trim();
                if (!value || !isAllowedDepartment(value)) return;
                const exists = departmentSelect.find('option').toArray()
                    .some((opt) => (opt.value || '').trim() === value);
                if (!exists) {
                    departmentSelect.append(new Option(value, value));
                }
            };

            $('#btnAdd').on('click', function () {
                $('#userModalTitle').text('Add User');
                $('#userId').val('');
                $('#userForm')[0].reset();
                $('#department').val('');
                $('#theme_profile').val('default');
                $('#theme_color').val('#3b82f6');
                $('#layout_profile').val('default');
                otpEnabledInput.prop('checked', false);
                otpChannelInput.val('none');
                syncOtpFieldState();
                menuAccessSearch.val('');
                applyMenuAccessSearch();
                menuAccessSelect.val([]);
                menuAccessSelect.prop('disabled', false);
                updateMenuAccessState(null);
                signatureFile.val('');
                signaturePreview.addClass('d-none').attr('src', '');
                photoFile.val('');
                photoPreview.addClass('d-none').attr('src', '');
                photoRemoved = false;
                signatureRemoved = false;
                signatureHasDrawing = false;
                clearSignatureCanvas();
                userModal.show();
            });

            $('#togglePassword').on('click', function () {
                const input = $('#password');
                const icon = $('#togglePassword i');
                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    input.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            $('#usersTable').on('click', '.btn-edit', function () {
                const row = getRowDataFromButton(this);
                if (!row) return;
                $('#userModalTitle').text('Edit User');
                $('#userId').val(row.id);
                $('#name').val(row.name);
                $('#email').val(row.email);
                $('#username').val(row.username || '');
                ensureDepartmentOption(row.department || '');
                if (isAllowedDepartment(row.department || '')) {
                    $('#department').val(row.department || '');
                } else {
                    $('#department').val('');
                }
                $('#theme_profile').val(row.theme_profile || 'default');
                $('#theme_color').val(row.theme_color || '#3b82f6');
                $('#layout_profile').val(row.layout_profile || 'default');
                $('#nomor_hp').val(row.nomor_hp || '');
                $('#pin').val(row.pin || '');
                otpEnabledInput.prop('checked', !!row.otp_enabled);
                otpChannelInput.val(row.otp_channel || 'none');
                syncOtpFieldState();
                $('#role_id').val(row.role_id || '');
                menuAccessSearch.val('');
                applyMenuAccessSearch();
                menuAccessSelect.val((row.menu_access_ids || []).map(String));
                menuAccessSelect.prop('disabled', false);
                $('#password').val('');
                signatureFile.val('');
                signatureRemoved = false;
                signatureHasDrawing = false;
                clearSignatureCanvas();
                setPreviewImage(signaturePreview, row.signature_url || '');
                photoFile.val('');
                photoRemoved = false;
                setPreviewImage(photoPreview, row.photo_url || '');
                updateMenuAccessState(row.role_id || null);
                if (row.role_id && row.role_active) {
                    syncMenuAccessFromRole(row.role_id);
                }
                userModal.show();
            });

            $('#resetUserTheme').on('click', function () {
                $('#theme_profile').val('default');
                $('#theme_color').val('#3b82f6');
                $('#layout_profile').val('default');
            });

            $('#role_id').on('change', function () {
                const roleId = $(this).val();
                updateMenuAccessState(roleId);
                if (!roleId) {
                    menuAccessSelect.prop('disabled', false);
                    return;
                }
                syncMenuAccessFromRole(roleId);
            });
            $('#department').on('change', function () {
                const profileName = (this.value || '').toString().trim().toLowerCase();
                if (!profileName) {
                    $('#role_id').val('').trigger('change');
                    return;
                }
                const roleId = rolesByName.get(profileName);
                if (roleId) {
                    $('#role_id').val(roleId).trigger('change');
                }
            });
            otpEnabledInput.on('change', syncOtpFieldState);

            function resizeSignatureCanvas() {
                if (!signatureCanvas || !signatureCtx) return;
                const rect = signatureCanvas.getBoundingClientRect();
                const ratio = window.devicePixelRatio || 1;
                signatureCanvas.width = rect.width * ratio;
                signatureCanvas.height = rect.height * ratio;
                signatureCtx.setTransform(ratio, 0, 0, ratio, 0, 0);
                signatureCtx.lineWidth = 2;
                signatureCtx.lineCap = 'round';
                signatureCtx.strokeStyle = '#1f2937';
            }

            function clearSignatureCanvas() {
                if (!signatureCanvas || !signatureCtx) return;
                signatureCtx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height);
                signatureHasDrawing = false;
            }

            function getCanvasPoint(event) {
                const rect = signatureCanvas.getBoundingClientRect();
                return {
                    x: event.clientX - rect.left,
                    y: event.clientY - rect.top
                };
            }

            if (signatureCanvas) {
                resizeSignatureCanvas();
                signatureCanvas.addEventListener('pointerdown', function (event) {
                    signatureDrawing = true;
                    signatureRemoved = false;
                    signaturePreview.addClass('d-none').attr('src', '');
                    signatureFile.val('');
                    const point = getCanvasPoint(event);
                    signatureCtx.beginPath();
                    signatureCtx.moveTo(point.x, point.y);
                });
                signatureCanvas.addEventListener('pointermove', function (event) {
                    if (!signatureDrawing) return;
                    const point = getCanvasPoint(event);
                    signatureCtx.lineTo(point.x, point.y);
                    signatureCtx.stroke();
                    signatureHasDrawing = true;
                });
                ['pointerup', 'pointerleave', 'pointercancel'].forEach((evt) => {
                    signatureCanvas.addEventListener(evt, function () {
                        signatureDrawing = false;
                        updateSignaturePreviewFromCanvas();
                    });
                });
                window.addEventListener('resize', resizeSignatureCanvas);
                userModalEl.addEventListener('shown.bs.modal', resizeSignatureCanvas);
            }

            $('#signatureClear').on('click', function () {
                clearSignatureCanvas();
                signaturePreview.addClass('d-none').attr('src', '');
            });

            $('#signatureRemove').on('click', function () {
                signatureRemoved = true;
                signatureFile.val('');
                signaturePreview.addClass('d-none').attr('src', '');
                clearSignatureCanvas();
            });

            signatureFile.on('change', function () {
                const file = this.files[0];
                signatureRemoved = false;
                clearSignatureCanvas();
                if (!file) {
                    signaturePreview.addClass('d-none').attr('src', '');
                    return;
                }
                const url = URL.createObjectURL(file);
                setPreviewImage(signaturePreview, url);
            });

            $('#photoRemove').on('click', function () {
                photoRemoved = true;
                photoFile.val('');
                photoPreview.addClass('d-none').attr('src', '');
            });

            photoFile.on('change', function () {
                const file = this.files[0];
                photoRemoved = false;
                if (!file) {
                    photoPreview.addClass('d-none').attr('src', '');
                    return;
                }
                const url = URL.createObjectURL(file);
                setPreviewImage(photoPreview, url);
            });

            menuAccessSearch.on('input', applyMenuAccessSearch);
            menuAccessSearchClear.on('click', function () {
                menuAccessSearch.val('');
                applyMenuAccessSearch();
                menuAccessSearch.trigger('focus');
            });
            selectAllUsers.on('change', function () {
                const checked = this.checked;
                const rows = table.rows({ search: 'applied' }).data().toArray();
                rows.forEach((row) => {
                    if (row.is_self) return;
                    const id = String(row.id);
                    if (checked) {
                        selectedUserIds.add(id);
                    } else {
                        selectedUserIds.delete(id);
                    }
                });
                $('#usersTable .row-select-user').prop('checked', checked);
                refreshSelectionUi();
            });
            $('#usersTable').on('change', '.row-select-user', function () {
                const id = String($(this).val());
                if (this.checked) {
                    selectedUserIds.add(id);
                } else {
                    selectedUserIds.delete(id);
                }
                refreshSelectionUi();
            });
            $('#usersTable').on('change', '.profile-active-toggle', function () {
                const toggleEl = this;
                const userId = Number($(toggleEl).data('id'));
                const nextValue = !!toggleEl.checked;

                $.ajax({
                    url: `{{ url('/user') }}/${userId}/profile-active`,
                    type: 'PATCH',
                    data: { is_active: nextValue ? 1 : 0 }
                }).done((resp) => {
                    toastr.success(resp?.message || 'Status profil menu diperbarui');
                    reloadTable();
                }).fail((xhr) => {
                    toggleEl.checked = !nextValue;
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update status profil menu', 'error');
                });
            });
            $('#btnBulkDelete').on('click', function () {
                const selectedIds = Array.from(selectedUserIds).map((id) => Number(id));
                const selfId = usersCache.find((user) => user.is_self)?.id;
                const ids = selectedIds.filter((id) => id !== selfId);
                const skippedSelfCount = selectedIds.length - ids.length;

                if (selectedIds.length === 0) {
                    Swal.fire('Info', 'Pilih user dulu untuk dihapus.', 'info');
                    return;
                }
                if (ids.length === 0) {
                    Swal.fire('Info', 'Tidak bisa menghapus user yang sedang login.', 'info');
                    return;
                }

                Swal.fire({
                    title: `Delete ${ids.length} users?`,
                    text: skippedSelfCount > 0
                        ? `${skippedSelfCount} user sedang login akan di-skip.`
                        : 'This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: '{{ route('user.bulk_delete') }}',
                        type: 'POST',
                        data: { ids }
                    }).done((resp) => {
                        selectedUserIds.clear();
                        reloadTable();
                        Swal.fire('Deleted', resp?.message || 'Users deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Bulk delete failed', 'error');
                    });
                });
            });
            $('#btnBulkPekerjaProfile').on('click', function () {
                const selectedIds = Array.from(selectedUserIds).map((id) => Number(id));
                const selfId = usersCache.find((user) => user.is_self)?.id;
                const ids = selectedIds.filter((id) => id !== selfId);
                const skippedSelfCount = selectedIds.length - ids.length;

                if (selectedIds.length === 0) {
                    Swal.fire('Info', 'Pilih user dulu untuk diganti ke Profil Pekerja.', 'info');
                    return;
                }
                if (ids.length === 0) {
                    Swal.fire('Info', 'User yang sedang login tidak bisa diubah lewat bulk ini.', 'info');
                    return;
                }

                Swal.fire({
                    title: `Terapkan Profil Pekerja ke ${ids.length} user?`,
                    html: [
                        '<div class="text-start">',
                        '<div>Perubahan yang akan dilakukan:</div>',
                        '<div>- Profil menu diubah ke <b>Profil Pekerja</b></div>',
                        '<div>- Akses menu disinkronkan mengikuti role tersebut</div>',
                        '<div>- Department dikosongkan</div>',
                        skippedSelfCount > 0 ? `<div class="mt-2 text-muted">${skippedSelfCount} user sedang login akan di-skip.</div>` : '',
                        '</div>'
                    ].join(''),
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, terapkan'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: '{{ route('user.bulk_apply_pekerja_profile') }}',
                        type: 'POST',
                        data: { ids }
                    }).done((resp) => {
                        selectedUserIds.clear();
                        reloadTable();
                        Swal.fire(
                            'Berhasil',
                            resp?.message || 'Profil Pekerja berhasil diterapkan',
                            'success'
                        );
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Bulk ganti Profil Pekerja gagal', 'error');
                    });
                });
            });

            $('#usersTable').on('click', '.btn-delete', function () {
                const row = getRowDataFromButton(this);
                if (!row) return;
                if (row.is_self) {
                    Swal.fire('Info', 'User yang sedang login tidak bisa dihapus', 'info');
                    return;
                }
                const id = row.id;
                Swal.fire({
                    title: 'Delete user?',
                    text: 'This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `/user/${id}`,
                        type: 'DELETE'
                    }).done(() => {
                        selectedUserIds.delete(String(id));
                        reloadTable();
                        Swal.fire('Deleted', 'User deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            $('#userForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#userId').val();
                const url = id ? `/user/${id}` : '{{ route('user.store') }}';
                const method = id ? 'PUT' : 'POST';
                const formData = new FormData();
                formData.append('name', $('#name').val());
                formData.append('email', $('#email').val());
                formData.append('username', $('#username').val());
                formData.append('department', $('#department').val());
                formData.append('theme_profile', $('#theme_profile').val());
                formData.append('theme_color', $('#theme_color').val());
                formData.append('layout_profile', $('#layout_profile').val());
                formData.append('nomor_hp', $('#nomor_hp').val());
                formData.append('pin', $('#pin').val());
                formData.append('otp_enabled', otpEnabledInput.is(':checked') ? '1' : '0');
                formData.append('otp_channel', otpChannelInput.val() || 'none');
                formData.append('role_id', $('#role_id').val());
                formData.append('password', $('#password').val());
                ($('#menu_access_ids').val() || []).forEach((menuId) => formData.append('menu_access_ids[]', menuId));

                const file = signatureFile[0]?.files?.[0];
                if (signatureRemoved) {
                    formData.append('signature_remove', '1');
                } else if (file) {
                    formData.append('signature_file', file);
                } else if (signatureHasDrawing && signatureCanvas) {
                    formData.append('signature_data', signatureCanvas.toDataURL('image/png'));
                }
                const photo = photoFile[0]?.files?.[0];
                if (photoRemoved) {
                    formData.append('photo_remove', '1');
                } else if (photo) {
                    formData.append('photo_file', photo);
                }

                $.ajax({
                    url,
                    type: method,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(() => {
                    userModal.hide();
                    reloadTable();
                    Swal.fire('Success', 'User saved', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#importForm').on('submit', function (e) {
                e.preventDefault();
                const file = $('#importFile')[0].files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: '{{ route('user.import') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(() => {
                    importModal.hide();
                    $('#importForm')[0].reset();
                    reloadTable();
                    Swal.fire('Success', 'Import completed', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import failed', 'error');
                });
            });

            loadUsers();
            applyMenuAccessSearch();
            updateMenuAccessState($('#role_id').val());
            syncOtpFieldState();
        });
    </script>
@endpush