@extends('layouts.app')

@php
    $pageTitle = 'Employees';
    $pageHeading = 'Employee Directory';
    $pageDescription = 'Daftar karyawan inti dari ADMS untuk kebutuhan sinkronisasi dan mapping device.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--employees';
    $sessionRole = strtolower((string) ($currentUser['role'] ?? (!empty($currentUser['is_superuser']) ? 'admin' : 'viewer')));
    $canOperateMachineUsers = in_array($sessionRole, ['admin', 'operator'], true);
    $canAdminEmployees = $sessionRole === 'admin';
    $openCreateEmployeeModal = session('open_employee_create_modal') || old('employee_create_form') === '1';
@endphp

@push('styles')
<style>
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .hero {
        border: 1px solid #7dd3fc !important;
        border-left: 5px solid #0284c7 !important;
        background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
        box-shadow: 0 3px 10px rgba(2, 132, 199, 0.12) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-intro {
        padding: 10px 14px !important;
        margin-bottom: 10px !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .hero h3 {
        color: #0c4a6e !important;
        font-weight: 800 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-intro h3 {
        margin-bottom: 3px !important;
        font-size: 14px !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-intro p {
        font-size: 11px;
        line-height: 1.45 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-summary-stats {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card {
        min-height: 58px;
        padding: 8px 10px !important;
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card:nth-child(4n + 1) {
        background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card:nth-child(4n + 2) {
        background: linear-gradient(135deg, #047857, #059669) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card:nth-child(4n + 3) {
        background: linear-gradient(135deg, #c2410c, #ea580c) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card:nth-child(4n + 4) {
        background: linear-gradient(135deg, #0369a1, #0891b2) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card .label,
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card .meta {
        color: rgba(255, 255, 255, 0.84) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card .label {
        font-size: 9px !important;
        font-weight: 800 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card .value {
        margin-top: 1px !important;
        color: #fff !important;
        font-size: 18px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .stats .card .meta {
        display: none !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-filter-card {
        padding: 8px !important;
        margin-bottom: 10px !important;
        border: 1px solid #93c5fd !important;
        border-left: 5px solid #2563eb !important;
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.10) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-filter-card .filters {
        gap: 7px !important;
        padding: 7px !important;
        border: 0 !important;
        background: #eff6ff !important;
        margin-bottom: 0 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-filter-card input,
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-filter-card select {
        border-color: #93c5fd !important;
        font-weight: 600;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-list-card {
        padding: 10px !important;
        border: 1px solid #94a3b8 !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.10) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-list-head {
        margin-bottom: 8px !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-list-head .muted {
        font-size: 10px !important;
        line-height: 1.4;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-list-card h3 {
        color: #0f172a !important;
        font-weight: 800;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar {
        border: 1px solid #94a3b8 !important;
        border-radius: 0.4rem !important;
        background: linear-gradient(135deg, #e2e8f0, #f8fafc) !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar .pill-link {
        color: #fff !important;
        border: 1px solid transparent !important;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
        font-weight: 700 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar .pill-link:hover {
        filter: brightness(0.9);
        transform: translateY(-1px);
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar .primary {
        background: #047857 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar button[formaction*="bulk-set-role"] {
        background: #b45309 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="sync"] {
        background: #1d4ed8 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="copy"] {
        background: #047857 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="move"] {
        background: #0369a1 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="delete"],
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="delete-app"] {
        background: #b91c1c !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [data-action-mode="schedule-delete"] {
        background: #c2410c !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-action-toolbar [onclick*="toggleResignImportModal"] {
        background: #475569 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .datatable-toolbar {
        background: #e2e8f0 !important;
        border-color: #94a3b8 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .table-scroll {
        border-color: #94a3b8 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees table thead th {
        color: #fff !important;
        background: #1e3a5f !important;
        border-color: #365a7d !important;
        font-weight: 800 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees table tbody tr:nth-child(even) {
        background: #f1f5f9 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees table tbody tr:hover {
        background: #dbeafe !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .status {
        color: #fff !important;
        background: #047857 !important;
        border: 1px solid #065f46 !important;
        font-weight: 800 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .status.pending {
        color: #fff !important;
        background: #c2410c !important;
        border-color: #9a3412 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-source-badge {
        color: #fff !important;
        background: #d97706 !important;
        border-color: #b45309 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-row-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 6px 9px !important;
        border-radius: 0.3rem !important;
        color: #fff !important;
        border: 0 !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-row-action--edit {
        background: #1d4ed8 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-row-action--calendar {
        background: #0369a1 !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-table > tbody > tr > td {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        vertical-align: middle;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-table > tbody > tr > td:last-child {
        min-width: 260px;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-table > tbody > tr > td:last-child > div {
        display: inline-flex !important;
        align-items: center;
        margin: 2px !important;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-directory-table .employee-row-action {
        min-height: 28px;
        padding: 4px 7px !important;
        white-space: nowrap;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-api-new {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 24px;
        padding: 3px 7px;
        border: 1px solid #93c5fd;
        border-radius: 999px;
        color: #1d4ed8;
        background: linear-gradient(135deg, #dbeafe, #eff6ff);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-api-new::before {
        content: '*';
        font-size: 12px;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-hot {
        color: #9a3412;
        background: #fff7ed;
        border-color: #fdba74;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-hot::before {
        content: none;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-update-label {
        color: #64748b;
        font-size: 10px;
        white-space: nowrap;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-symbol {
        display:inline-flex; align-items:center; justify-content:center;
        min-width:28px; height:24px; padding:0 5px; border-radius:999px; font-size:9px; font-weight:900;
        border:1px solid transparent;
    }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-symbol--active { color:#047857; background:#d1fae5; border-color:#6ee7b7; }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-symbol--inactive { color:#b91c1c; background:#fee2e2; border-color:#fca5a5; }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-symbol--admin { color:#92400e; background:#fef3c7; border-color:#fbbf24; }
    .wdms-adminlte-shell .main.ops-datatable-theme--employees .employee-symbol--user { color:#475569; background:#e2e8f0; border-color:#cbd5e1; }
</style>
@endpush

@section('content')
    <section class="hero employee-directory-intro">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Employee module untuk kontrol data master.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Halaman ini menampilkan data employee yang sudah ada di ADMS agar proses mapping ke device, mobile, dan attendance lebih mudah dipantau dari Laravel.
        </p>
    </section>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Berhasil</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Ada input yang perlu dicek</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    @if (empty($deviceScopeSummary))
        <section class="stats employee-summary-stats" style="grid-template-columns: repeat(4, minmax(0, 1fr));">
            <div class="card">
                <div class="label">Total Employees</div>
                <div class="value">{{ number_format($summary['total']) }}</div>
                <div class="meta">Seluruh employee pada database.</div>
            </div>
            <div class="card">
                <div class="label">Active Employees</div>
                <div class="value">{{ number_format($summary['active']) }}</div>
                <div class="meta">Siap dipakai operasional.</div>
            </div>
            <div class="card">
                <div class="label">Mobile Ready</div>
                <div class="value">{{ number_format($summary['mobile_ready']) }}</div>
                <div class="meta">Employee aktif di mobile.</div>
            </div>
            <div class="card">
                <div class="label">Finger Registered</div>
                <div class="value">{{ number_format($summary['finger_registered']) }}</div>
                <div class="meta">Sudah memiliki fingerprint.</div>
            </div>
        </section>
    @endif

    @if (! empty($deviceScopeSummary))
        <section class="stats employee-summary-stats" style="grid-template-columns: repeat(4, minmax(0, 1fr));">
            <div class="card">
                <div class="label">User Di Mesin Ini</div>
                <div class="value">{{ number_format($deviceScopeSummary['total_users']) }}</div>
                <div class="meta">{{ $deviceScopeSummary['alias'] }} - {{ $deviceScopeSummary['sn'] }}</div>
            </div>
            <div class="card">
                <div class="label">Admin Mesin</div>
                <div class="value">{{ number_format($deviceScopeSummary['admin_users']) }}</div>
                <div class="meta">User mesin dengan role `ADMIN` pada scope device ini.</div>
            </div>
            <div class="card">
                <div class="label">Finger Registered</div>
                <div class="value">{{ number_format($deviceScopeSummary['finger_users']) }}</div>
                <div class="meta">User scope mesin ini yang punya template sidik jari.</div>
            </div>
            <div class="card">
                <div class="label">Active User</div>
                <div class="value">{{ number_format($deviceScopeSummary['active_users']) }}</div>
                <div class="meta">User aktif yang terdeteksi ada di mesin ini.</div>
            </div>
        </section>
    @endif

    <section class="table-card employee-filter-card">
        <form method="GET" action="{{ route('employees.index') }}" class="filters">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari emp code, nama, email, mobile... Gunakan =1 untuk exact emp code">
            <div style="grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px;">
                @if (!empty($bulkQuickMeta['active']))
                    <span class="status" style="background: rgba(37, 99, 235, 0.14); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.18);">Bulk paste aktif</span>
                    <span class="muted" style="font-size: 13px;">
                        {{ (int) ($bulkQuickMeta['matched_tokens'] ?? 0) }} data cocok / {{ (int) ($bulkQuickMeta['unmatched_tokens'] ?? 0) }} tidak cocok
                    </span>
                    @if (!empty($bulkQuickMeta['unmatched_list']))
                        <span class="muted" style="font-size: 12px;">
                            Tidak cocok: {{ implode(', ', array_slice($bulkQuickMeta['unmatched_list'], 0, 12)) }}@if (count($bulkQuickMeta['unmatched_list']) > 12) ... @endif
                        </span>
                    @endif
                @endif
            </div>
            <label style="display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);">
                <input type="checkbox" name="exact_emp_code" value="1" @checked($filters['exact_emp_code'] ?? false)>
                Exact Emp Code
            </label>
            <select name="status_filter">
                <option value="">- Semua Status -</option>
                <option value="1" @selected(($filters['status_filter'] ?? '') === '1')>Active</option>
                <option value="0" @selected(($filters['status_filter'] ?? '') === '0')>Inactive</option>
            </select>
            <select name="finger_filter">
                <option value="">- Semua Fingerprint -</option>
                <option value="yes" @selected(($filters['finger_filter'] ?? '') === 'yes')>Sudah register</option>
                <option value="no" @selected(($filters['finger_filter'] ?? '') === 'no')>Belum register</option>
            </select>
            <select name="department_filter">
                <option value="">- Semua Department -</option>
                @foreach ($departments as $department)
                    <option value="{{ $department->id }}" @selected((string) ($filters['department_filter'] ?? '') === (string) $department->id)>
                        {{ $department->dept_name }}
                    </option>
                @endforeach
            </select>
            <select name="device_filter">
                <option value="">- Semua Mesin -</option>
                @foreach ($devices as $device)
                    <option value="{{ $device->sn }}" @selected((string) ($filters['device_filter'] ?? '') === (string) $device->sn)>
                        {{ match ($device->presence_status ?? 'offline') {
                            'online' => '??',
                            'stale' => '??',
                            default => '?',
                        } }} {{ strtoupper((string) ($device->presence_label ?? 'Offline')) }} - {{ $device->alias ?: $device->sn }} ({{ $device->sn }})
                    </option>
                @endforeach
            </select>
            <select name="role_filter">
                <option value="">- Semua Role Mesin -</option>
                <option value="admin" @selected(($filters['role_filter'] ?? '') === 'admin')>ADMIN</option>
                <option value="user" @selected(($filters['role_filter'] ?? '') === 'user')>USER BIASA</option>
            </select>
            <label style="display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);">
                <input type="checkbox" name="updated_today" value="1" @checked($filters['updated_today'] ?? false)>
                Updated today
            </label>
            <select name="per_page">
                @foreach ([10,25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 50) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('employees.index') }}" class="pill-link secondary">Reset</a>
        </form>
        @if (! empty($filters['device_filter']))
            <div class="muted" style="margin-top: 12px; font-size: 13px; line-height: 1.7;">
                Sedang menampilkan user yang terdeteksi di mesin <strong>{{ $filters['device_filter'] }}</strong> berdasarkan <code>enroll_sn</code>, template finger di <code>iclock_biodata</code>, atau transaksi dari terminal tersebut. Ini cocok untuk audit lalu aksi massal update/hapus user per mesin.
            </div>
        @endif
    </section>

    <section class="table-card employee-list-card">
        <form method="POST" action="{{ route('employees.bulk-delete-device') }}" id="bulk-employee-action-form">
            @csrf
        <div class="employee-list-head" style="display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px;">
            <div>
                <h3 style="margin: 0 0 6px;">Employee List</h3>
                <div class="muted" style="font-size: 13px;">Centang employee dulu. Untuk aksi ke mesin, picker target mesin akan muncul sebagai modal agar lebih rapi saat jumlah device banyak.</div>
                @if ($sessionRole === 'operator')
                    <div style="margin-top:6px;">
                        <span class="status" style="background:#0d6efd; color:#fff; border:1px solid #0a58ca;">Akses OPERATOR: Copy, Move, Hapus dari Mesin</span>
                    </div>
                @endif
            </div>
            <div class="employee-action-toolbar" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(45, 106, 79, 0.16); background: linear-gradient(135deg, rgba(45, 106, 79, 0.10), rgba(201, 162, 39, 0.08));">
                @if ($canAdminEmployees)
                    <button type="button" class="pill-link primary" onclick="toggleCreateEmployeeModal(true)">
                        Tambah Employee
                    </button>
                    <button type="submit" formaction="{{ route('employees.bulk-set-role') }}" name="role_mode" value="admin" class="pill-link secondary" onclick="return confirm('Set role mesin employee terpilih menjadi ADMIN di database? Perubahan ini belum dikirim ke mesin.')">
                        Set as Admin
                    </button>
                    <button type="submit" formaction="{{ route('employees.bulk-set-role') }}" name="role_mode" value="user" class="pill-link secondary" onclick="return confirm('Set role mesin employee terpilih menjadi USER BIASA di database? Perubahan ini belum dikirim ke mesin.')">
                        Set as User
                    </button>
                    <button type="button" class="pill-link secondary" data-machine-action-trigger data-action-url="{{ route('employees.bulk-sync-device') }}" data-action-mode="sync" data-action-label="Update Ke Mesin">
                        Update Ke Mesin
                    </button>
                @endif
                @if ($canOperateMachineUsers)
                    <button type="button" class="pill-link secondary" data-machine-action-trigger data-action-url="{{ route('employees.bulk-sync-device') }}" data-action-mode="copy" data-action-label="Copy Ke Mesin">
                        Copy Ke Mesin
                    </button>
                    <button type="button" class="pill-link secondary" data-machine-action-trigger data-action-url="{{ route('employees.bulk-move-device') }}" data-action-mode="move" data-action-label="Move Ke Mesin">
                        Move Ke Mesin
                    </button>
                    <button type="button" class="pill-link secondary" data-machine-action-trigger data-action-url="{{ route('employees.bulk-delete-device') }}" data-action-mode="delete" data-action-label="Hapus Dari Mesin">
                        Hapus Dari Mesin
                    </button>
                @endif
                @if ($canAdminEmployees)
                    <button
                        type="button"
                        class="pill-link secondary"
                        data-machine-action-trigger
                        data-action-url="{{ route('employees.bulk-delete-device-scheduled') }}"
                        data-action-mode="schedule-delete"
                        data-action-label="Jadwalkan Hapus Dari Mesin"
                    >
                        Jadwalkan Hapus Dari Mesin
                    </button>
                    <button
                        type="button"
                        class="pill-link secondary"
                        style="color: #fffaf2; background: linear-gradient(135deg, #8d2f23, #b42318);"
                        data-machine-action-trigger
                        data-action-url="{{ route('employees.bulk-delete-app') }}"
                        data-action-mode="delete-app"
                        data-action-label="Hapus Dari Aplikasi"
                    >
                        Hapus Dari Aplikasi
                    </button>
                    <button type="button" class="pill-link secondary" style="border: 1px solid rgba(68, 98, 137, 0.22); background: rgba(68, 98, 137, 0.10); color: #355070;" onclick="toggleResignImportModal(true)">
                        BULK RESIGN
                    </button>
                @endif
                @if ($canAdminEmployees)
                    <a href="{{ route('employees.export.xlsx') }}" class="pill-link primary">
                        Export to XLSX
                    </a>
                @endif
            </div>
        </div>
        @if (method_exists($employees, 'links'))
            @php
                $employeePaginationInfo = 'Menampilkan '.($employees->firstItem() ?? 0).'-'.($employees->lastItem() ?? 0).' dari '.$employees->total().' employee';
                $employeePerPageUrl = function ($size) {
                    return request()->fullUrlWithQuery(['per_page' => $size, 'page' => 1]);
                };
            @endphp
            <div class="datatable-toolbar" style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;">
                <div class="muted" style="font-size:9px; font-weight:700;">{{ $employeePaginationInfo }}</div>
                <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                    <span class="muted" style="font-size:12px;">Limit</span>
                    @foreach ([10,25,50,100,250] as $size)
                        <a href="{{ $employeePerPageUrl($size) }}" class="pill-link {{ (int) ($filters['per_page'] ?? 50) === $size ? 'primary' : 'secondary' }}" style="padding:6px 10px; font-size:12px;">{{ $size }}</a>
                    @endforeach
                </div>
                {{ $employees->onEachSide(1)->links() }}
            </div>
        @endif
        <div data-datatable data-datatable-server="1">
        <div class="table-scroll">
        <table class="employee-directory-table">
            <thead>
                <tr>
                    <th style="width: 40px;">
                        <input type="checkbox" data-check-all-employees>
                    </th>
                    <th>Emp Code</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>Department</th>
                    <th>Position</th>
                    <th>Status</th>
                    <th>Role Mesin</th>
                    <th>App Status</th>
                    <th>Source Mesin</th>
                    <th>Enroll SN</th>
                    <th>Fingerprint</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($employees as $employee)
                    <tr>
                        <td>
                            <input
                                type="checkbox"
                                name="employee_ids[]"
                                value="{{ $employee->id }}"
                                data-employee-checkbox
                                data-employee-code="{{ $employee->emp_code }}"
                                data-employee-name="{{ trim(($employee->first_name ?? '').' '.($employee->last_name ?? '')) ?: '-' }}"
                                data-employee-enroll-sn="{{ $employee->enroll_sn ?: '' }}"
                                data-employee-source-sn="{{ $employee->enroll_sn ?: '' }}"
                            >
                        </td>
                        <td>{{ $employee->emp_code }}</td>
                        <td>{{ trim(($employee->first_name ?? '').' '.($employee->last_name ?? '')) ?: '-' }}</td>
                        <td>{{ $employee->email ?: '-' }}</td>
                        <td>{{ $employee->mobile ?: '-' }}</td>
                        <td>{{ $employee->department_name ?: ($employee->department_id ?: '-') }}</td>
                        <td>{{ $employee->position_name ?: ($employee->position_id ?: '-') }}</td>
                        <td>
                            @if ((int) $employee->is_active === 1)
                                <span class="employee-symbol employee-symbol--active" role="img" aria-label="Aktif" title="Aktif"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg></span>
                            @else
                                <span class="employee-symbol employee-symbol--inactive" role="img" aria-label="Tidak aktif" title="Tidak aktif"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 6 12 12M6 18 18 6"/></svg></span>
                            @endif
                        </td>
                        <td>
                            @if ((int) ($employee->dev_privilege ?? 0) === 14)
                                <span class="employee-symbol employee-symbol--admin" role="img" aria-label="Admin mesin" title="Admin mesin"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m12 3 8 4v5c0 5-8 9-8 9s-8-4-8-9V7z"/><path d="m8 12 3 3 5-5"/></svg></span>
                            @else
                                <span class="employee-symbol employee-symbol--user" role="img" aria-label="User mesin" title="User mesin"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M5 21v-2a7 7 0 0 1 14 0v2"/></svg></span>
                            @endif
                        </td>
                        <td>{{ $employee->app_status }}</td>
                        <td>{{ $employee->enroll_sn ?: '-' }}</td>
                        <td>{{ $employee->enroll_sn ?: '-' }}</td>
                        <td>
                            @if ($canAdminEmployees)
                                @if ((int) $employee->fingerprint_count > 0)
                                    <button
                                        type="button"
                                        class="status"
                                        style="border: 0; cursor: pointer;"
                                        data-fingerprint-trigger
                                        data-employee-id="{{ $employee->id }}"
                                        data-employee-name="{{ trim(($employee->first_name ?? '').' '.($employee->last_name ?? '')) ?: $employee->emp_code }}"
                                        data-employee-code="{{ $employee->emp_code }}"
                                    >
                                        {{ (int) $employee->fingerprint_count }} template
                                    </button>
                                @else
                                    <button
                                        type="button"
                                        class="status pending"
                                        style="border: 0; cursor: pointer;"
                                        data-fingerprint-trigger
                                        data-employee-id="{{ $employee->id }}"
                                        data-employee-name="{{ trim(($employee->first_name ?? '').' '.($employee->last_name ?? '')) ?: $employee->emp_code }}"
                                        data-employee-code="{{ $employee->emp_code }}"
                                    >
                                        Belum register
                                    </button>
                                @endif
                            @elseif ((int) $employee->fingerprint_count > 0)
                                <span class="status">{{ (int) $employee->fingerprint_count }} template</span>
                            @else
                                <span class="status pending">Belum register</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $registeredAt = $employee->create_time ? \Carbon\Carbon::parse($employee->create_time) : null;
                                $badgeNow = now();
                                $isNewEmployee = $registeredAt && $registeredAt->lte($badgeNow) && $registeredAt->gt($badgeNow->copy()->subDays(7));
                            @endphp
                            @if ($isNewEmployee)
                                <div style="margin-bottom: 6px;">
                                    <span class="employee-api-new employee-hot" title="Baru terdaftar di ADMS: {{ $employee->create_time }}. Penanda berlaku 7 hari.">
                                        <span aria-hidden="true">&#128293;</span> HOT
                                    </span>
                                </div>
                            @endif
                            @if ($canAdminEmployees)
                                <a href="{{ route('employees.edit', $employee->id) }}" class="employee-row-action employee-row-action--edit" title="Edit employee" aria-label="Edit employee {{ $employee->emp_code }}">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m16 3 5 5-13 13H3v-5zM14 5l5 5"/></svg>
                                </a>
                            @endif
                            <div style="margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;">
                                <a href="{{ route('employees.transactions-calendar', $employee->id) }}" class="employee-row-action employee-row-action--calendar" title="Kalender transaksi" aria-label="Kalender transaksi {{ $employee->emp_code }}">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4m10-4v4M3 11h18M7 15h3m4 0h3"/></svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="14" class="muted">Belum ada data employee.</td></tr>
                @endforelse
            </tbody>
        </table>
        </div>
        </div>
        @if (method_exists($employees, 'links'))
            <div class="datatable-toolbar" style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px;">
                <div class="muted" style="font-size:9px; font-weight:700;">{{ $employeePaginationInfo }}</div>
                <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                    <span class="muted" style="font-size:12px;">Limit</span>
                    @foreach ([10,25,50,100,250] as $size)
                        <a href="{{ $employeePerPageUrl($size) }}" class="pill-link {{ (int) ($filters['per_page'] ?? 50) === $size ? 'primary' : 'secondary' }}" style="padding:6px 10px; font-size:12px;">{{ $size }}</a>
                    @endforeach
                </div>
                {{ $employees->onEachSide(1)->links() }}
            </div>
        @endif

        <div id="machine-action-modal" class="modal-backdrop" onclick="if (event.target === this) toggleMachineActionModal(false)">
            <div class="modal-card" style="max-width: 760px;">
                <div class="modal-head">
                    <div>
                        <h3 id="machine-action-modal-title" style="margin: 0;">Target Mesin</h3>
                        <div id="machine-action-modal-summary" class="muted" style="margin-top: 6px; font-size: 13px;">Pilih satu atau banyak mesin target.</div>
                    </div>
                    <button type="button" class="modal-close" onclick="toggleMachineActionModal(false)">&times;</button>
                </div>
                <div class="modal-body">
                    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;">
                        <strong style="font-size: 13px; color: var(--ink);">Target Mesin</strong>
                        <span class="muted" style="font-size:12px;" data-terminal-selected-count>Semua target default</span>
                    </div>
                    <div style="display:grid; gap:10px; margin-bottom: 12px;">
                        <div style="padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.62);">
                            <div style="font-weight:700; color:var(--ink); margin-bottom:6px;">Preview Proses</div>
                            <div class="muted" data-machine-action-preview style="font-size:9px; line-height:1.75;">
                                Pilih employee dan mesin target untuk melihat ringkasan source dan tujuan.
                            </div>
                        </div>
                    </div>
                    <div data-delete-app-wrapper style="display:none; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(141, 47, 35, 0.18); background: rgba(141, 47, 35, 0.06);">
                        <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                            <input type="checkbox" name="delete_on_machine" value="1" data-delete-on-machine style="margin-top: 3px;" checked>
                            <div style="min-width:0;">
                                <div style="font-weight: 800; color: #7f1d1d;">Hapus juga di mesin</div>
                                <div class="muted" style="margin-top: 4px; font-size: 13px; line-height: 1.7;">
                                    Jika dicentang, command <code>DATA DEL_USER</code> ikut di-queue ke mesin target. Kalau mesin tidak dipilih, sistem akan kirim ke semua mesin <strong>Approved</strong>.
                                </div>
                            </div>
                        </label>
                    </div>
                    <input
                        type="text"
                        placeholder="Cari alias atau SN mesin..."
                        data-terminal-filter
                        style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong); margin-bottom: 8px;"
                    >
                    <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 8px;">
                        <button type="button" class="pill-link secondary" data-terminal-select="approved">Pilih Semua Approved</button>
                        <button type="button" class="pill-link secondary" data-terminal-select="clear">Clear</button>
                    </div>
                    <div
                        data-terminal-picker
                        style="max-height: 280px; overflow:auto; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-strong); display:grid; gap:8px;"
                    >
                        @foreach ($terminals as $terminal)
                            <label
                                data-terminal-option
                                data-search="{{ strtolower(trim(($terminal->alias ?: '') . ' ' . ($terminal->sn ?: ''))) }}"
                                style="display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius: 14px; border: 1px solid rgba(29, 42, 36, 0.08); background: rgba(255,255,255,0.55); cursor:pointer;"
                            >
                                <input
                                    type="checkbox"
                                    name="target_terminal_ids[]"
                                    value="{{ $terminal->id }}"
                                    data-terminal-checkbox
                                    data-terminal-approved="{{ (int) $terminal->status === 1 ? '1' : '0' }}"
                                    style="margin-top: 3px;"
                                >
                                <div style="min-width:0;">
                                    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                                        <strong style="color: var(--ink);">{{ $terminal->alias ?: '-' }}</strong>
                                        @if ((int) $terminal->status === 1)
                                            <span class="status">Approved</span>
                                        @else
                                            <span class="status pending">Pending</span>
                                        @endif
                                        @php
                                            $terminalPresenceStatus = $terminal->presence_status ?? 'offline';
                                            $terminalPresenceLabel = strtoupper((string) ($terminal->presence_label ?? 'Offline'));
                                            $terminalPresenceStyle = match ($terminalPresenceStatus) {
                                                'online' => 'background: rgba(45, 106, 79, 0.16); color: #1f6a45; border: 1px solid rgba(45, 106, 79, 0.18);',
                                                'stale' => 'background: rgba(201, 162, 39, 0.18); color: #8b5e12; border: 1px solid rgba(201, 162, 39, 0.2);',
                                                default => 'background: rgba(180, 35, 24, 0.12); color: #9f261b; border: 1px solid rgba(180, 35, 24, 0.18);',
                                            };
                                        @endphp
                                        <span class="status" style="{{ $terminalPresenceStyle }}">{{ $terminalPresenceLabel }}</span>
                                    </div>
                                    <div class="muted" style="font-size: 12px; margin-top: 4px;">SN: {{ $terminal->sn }} @if(!empty($terminal->presence_meta)) - {{ $terminal->presence_meta }} @endif</div>
                                </div>
                            </label>
                        @endforeach
                    </div>

                    <div data-schedule-wrapper style="display:none; margin-top: 14px;">
                        <label for="scheduled_for" style="display:block; margin-bottom: 8px; font-size: 13px; color: var(--ink); font-weight: 700;">
                            Waktu Jalankan Hapus
                        </label>
                        <input
                            id="scheduled_for"
                            type="datetime-local"
                            name="scheduled_for"
                            value="{{ old('scheduled_for') }}"
                            style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                            title="Pilih waktu untuk bulk hapus terjadwal"
                        >
                    </div>

                    <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 16px; flex-wrap: wrap;">
                        <button type="button" class="pill-link secondary" onclick="toggleMachineActionModal(false)">Batal</button>
                        <button type="button" class="pill-link primary" id="machine-action-modal-confirm">Lanjutkan</button>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </section>

    @if ($canAdminEmployees)
        <div id="create-employee-modal" class="modal-backdrop{{ $openCreateEmployeeModal ? ' open' : '' }}" onclick="if (event.target === this) toggleCreateEmployeeModal(false)">
            <div class="modal-card" style="max-width: 920px;">
                <div class="modal-head">
                    <div>
                        <h3 style="margin: 0;">Tambah Employee</h3>
                        <div class="muted" style="margin-top: 6px; font-size: 13px;">
                            Minimal isi <strong>PIN / User ID</strong>, <strong>Nama</strong>, dan <strong>Password Device</strong>. Setelah itu bisa simpan ke database saja atau langsung kirim ke mesin.
                        </div>
                    </div>
                    <button type="button" class="modal-close" onclick="toggleCreateEmployeeModal(false)">&times;</button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('employees.store') }}" style="display:grid; gap:18px;">
                        @csrf
                        <input type="hidden" name="employee_create_form" value="1">

                        <div style="padding: 14px 16px; border-radius: 18px; background: rgba(19, 41, 61, 0.05); border: 1px solid rgba(19, 41, 61, 0.10); line-height: 1.75;">
                            <strong style="display:block; margin-bottom:6px; color: var(--ink);">Alur</strong>
                            <span class="muted" style="font-size: 13px;">
                                `Simpan Database Saja` hanya membuat data employee di ADMS. `Simpan + Send Ke Mesin` akan membuat data employee lalu queue command <code>DATA USER</code> dan <code>QUERY USERINFO</code> ke mesin yang dipilih.
                            </span>
                        </div>

                        <div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px;">
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">PIN / User ID</strong>
                                <input type="text" name="emp_code" value="{{ old('emp_code') }}" maxlength="25" required placeholder="Contoh: 10025" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Password Device</strong>
                                <input type="text" name="device_password" value="{{ old('device_password') }}" maxlength="20" required placeholder="Password lokal user di mesin" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                        </div>

                        <div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px;">
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Nama Depan / Nama Utama</strong>
                                <input type="text" name="first_name" value="{{ old('first_name') }}" maxlength="25" required placeholder="Nama yang tampil di mesin" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Nama Belakang</strong>
                                <input type="text" name="last_name" value="{{ old('last_name') }}" maxlength="25" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                        </div>

                        <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px;">
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Nickname</strong>
                                <input type="text" name="nickname" value="{{ old('nickname') }}" maxlength="25" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Mobile</strong>
                                <input type="text" name="mobile" value="{{ old('mobile') }}" maxlength="20" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Email</strong>
                                <input type="email" name="email" value="{{ old('email') }}" maxlength="50" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                        </div>

                        <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px;">
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Department</strong>
                                <select name="department_id" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                    <option value="">- Pilih Department -</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}" @selected((string) old('department_id') === (string) $department->id)>
                                            {{ $department->dept_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Position</strong>
                                <select name="position_id" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                    <option value="">- Pilih Position -</option>
                                    @foreach ($positions as $position)
                                        <option value="{{ $position->id }}" @selected((string) old('position_id') === (string) $position->id)>
                                            {{ $position->position_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Status</strong>
                                <select name="is_active" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                    <option value="1" @selected((string) old('is_active', '1') === '1')>Active</option>
                                    <option value="0" @selected((string) old('is_active') === '0')>Inactive</option>
                                </select>
                            </label>
                        </div>

                        <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px;">
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Verify Mode</strong>
                                <input type="number" name="verify_mode" value="{{ old('verify_mode') }}" min="0" max="999" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Card Number</strong>
                                <input type="text" name="card_no" value="{{ old('card_no') }}" maxlength="20" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">App Status</strong>
                                <input type="number" name="app_status" value="{{ old('app_status') }}" min="0" max="9" placeholder="Opsional" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                        </div>

                        <div style="padding: 16px; border-radius: 18px; border: 1px solid rgba(45, 106, 79, 0.14); background: linear-gradient(135deg, rgba(45, 106, 79, 0.06), rgba(201, 162, 39, 0.06)); display:grid; gap:12px;">
                            <div>
                                <strong style="display:block; color: var(--ink);">Kirim ke Mesin Saat Simpan</strong>
                                <div class="muted" style="margin-top: 4px; font-size: 13px; line-height: 1.7;">
                                    Jika pakai tombol `Simpan + Send Ke Mesin`, pilih satu mesin tujuan di bawah. Sistem akan menyimpan employee lalu mengirim command create user ke terminal tersebut.
                                </div>
                            </div>
                            <label style="display:grid; gap:8px;">
                                <strong style="font-size: 13px; color: var(--ink);">Mesin Tujuan</strong>
                                <select name="target_terminal_id" style="width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                    <option value="">- Pilih Mesin Tujuan -</option>
                                    @foreach ($terminals as $terminal)
                                        @php
                                            $terminalState = (int) ($terminal->status ?? 0) === 1 ? 'Approved' : 'Pending';
                                            $terminalPresence = strtoupper((string) ($terminal->presence_label ?? 'Offline'));
                                        @endphp
                                        <option value="{{ $terminal->id }}" @selected((string) old('target_terminal_id') === (string) $terminal->id)>
                                            {{ $terminal->alias ?: $terminal->sn }} | {{ $terminal->sn }} | {{ $terminalState }} | {{ $terminalPresence }}
                                        </option>
                                    @endforeach
                                </select>
                            </label>
                            @if ($terminals->isEmpty())
                                <div class="muted" style="font-size: 13px;">Belum ada mesin yang terdaftar. Employee tetap bisa disimpan ke database tanpa kirim ke mesin.</div>
                            @endif
                        </div>

                        <div style="display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;">
                            <button
                                type="button"
                                class="pill-link secondary"
                                onclick="toggleCreateEmployeeModal(false)"
                            >
                                Batal
                            </button>
                            <button
                                type="submit"
                                style="border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: var(--ink); background: var(--panel-strong);"
                            >
                                Simpan Database Saja
                            </button>
                            <button
                                type="submit"
                                name="submit_mode"
                                value="sync"
                                style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, var(--green-deep), var(--green));"
                            >
                                Simpan + Send Ke Mesin
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <div id="resign-import-modal" class="modal-backdrop" onclick="if (event.target === this) toggleResignImportModal(false)">
        <div class="modal-card" style="max-width: 720px;">
            <div class="modal-head">
                <h3>BULK RESIGN</h3>
                <button type="button" class="modal-close" onclick="toggleResignImportModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <div class="muted" style="margin-bottom: 14px; line-height: 1.7;">
                    Upload file <code>XLSX</code>, <code>CSV</code>, atau <code>TXT</code> berisi daftar resign. Minimal kolom <code>emp_code</code> atau <code>pin</code>.
                    Setelah upload, kita review dulu user yang cocok di database sebelum command hapus massal dikirim ke mesin.
                </div>
                <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px;">
                    <a href="{{ route('employees.resign-import.template', ['format' => 'xlsx']) }}" class="pill-link secondary">Template XLSX</a>
                    <a href="{{ route('employees.resign-import.template', ['format' => 'csv']) }}" class="pill-link secondary">Template CSV</a>
                </div>
                <form method="POST" action="{{ route('employees.resign-import.preview') }}" enctype="multipart/form-data" style="display:grid; gap:14px;">
                    @csrf
                    <input type="file" name="import_file" accept=".csv,.txt,.xlsx" required style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                    <div class="muted" style="font-size: 13px;">
                        Header yang didukung: <code>emp_code</code>, <code>pin</code>, <code>employee_code</code>, opsional <code>name</code>, <code>note</code>.
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:10px;">
                        <button type="button" class="pill-link secondary" onclick="toggleResignImportModal(false)">Batal</button>
                        <button type="submit" class="pill-link primary">Upload & Review</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if (! empty($resignImportPreview))
        <form id="resign-import-clear-form" method="POST" action="{{ route('employees.resign-import.clear') }}">
            @csrf
        </form>
        <div id="resign-import-review-modal" class="modal-backdrop open" onclick="if (event.target === this) toggleResignImportReviewModal(false)">
            <div class="modal-card" style="max-width: 920px;">
                <div class="modal-head">
                    <div>
                        <h3 style="margin:0;">Review Resign Import</h3>
                        <div class="muted" style="margin-top:6px; font-size:9px;">
                            Review dulu user resign yang cocok, lalu pilih mesin target untuk hapus massal dari device.
                        </div>
                    </div>
                    <button type="button" class="modal-close" onclick="toggleResignImportReviewModal(false)">&times;</button>
                </div>
                <div class="modal-body">
                    <section class="stats" style="grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px;">
                        <div class="card">
                            <div class="label">Total Rows</div>
                            <div class="value">{{ number_format($resignImportPreview['total_rows'] ?? 0) }}</div>
                            <div class="meta">Total baris yang dibaca dari file resign.</div>
                        </div>
                        <div class="card">
                            <div class="label">Matched</div>
                            <div class="value">{{ number_format($resignImportPreview['matched_count'] ?? 0) }}</div>
                            <div class="meta">Baris yang cocok dengan employee di database.</div>
                        </div>
                        <div class="card">
                            <div class="label">Unmatched</div>
                            <div class="value">{{ number_format($resignImportPreview['unmatched_count'] ?? 0) }}</div>
                            <div class="meta">Perlu dicek lagi karena tidak ketemu atau emp code kosong.</div>
                        </div>
                    </section>

                    <div style="display:grid; gap:16px;">
                        <form method="POST" action="{{ route('employees.resign-import.execute-delete') }}" style="display:grid; gap:14px;">
                            @csrf
                            <input type="hidden" name="enforce_selection" value="1">
                            <div style="display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap;">
                                <div>
                                    <strong style="display:block; margin-bottom:6px;">Matched (Yang Akan Diproses)</strong>
                                    <div class="muted" style="font-size: 13px;">
                                        Centang user yang mau dihapus dari mesin. Kalau tidak ada yang dicentang, proses akan dibatalkan.
                                    </div>
                                </div>
                                <div style="display:flex; gap:8px; flex-wrap:wrap;">
                                    <button type="button" class="pill-link secondary" data-resign-select="all">Pilih Semua</button>
                                    <button type="button" class="pill-link secondary" data-resign-select="clear">Clear</button>
                                </div>
                            </div>
                            <div data-datatable style="margin-top: 8px;">
                                <div class="datatable-toolbar">
                                    <input type="text" data-datatable-search placeholder="Cari cepat di daftar resign matched...">
                                    <div class="datatable-meta" data-datatable-meta></div>
                                </div>
                                <div class="table-scroll">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th style="width: 40px;">
                                                    <input type="checkbox" data-resign-check-all title="Pilih semua yang tampil">
                                                </th>
                                                <th>Emp Code</th>
                                                <th>Name</th>
                                                <th>Enroll SN</th>
                                                <th>Catatan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse (($resignImportPreview['matched'] ?? []) as $row)
                                                <tr>
                                                    <td>
                                                        <input
                                                            type="checkbox"
                                                            name="selected_employee_ids[]"
                                                            value="{{ (int) ($row['employee_id'] ?? 0) }}"
                                                            data-resign-employee-checkbox
                                                            checked
                                                        >
                                                    </td>
                                                    <td>{{ $row['emp_code'] }}</td>
                                                    <td>{{ $row['employee_name'] }}</td>
                                                    <td>{{ $row['enroll_sn'] ?: '-' }}</td>
                                                    <td>{{ $row['note'] ?: '-' }}</td>
                                                </tr>
                                            @empty
                                                <tr><td colspan="5" class="muted">Belum ada user resign yang cocok di database.</td></tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        @if (! empty($resignImportPreview['unmatched']))
                            <div>
                                <strong style="display:block; margin-bottom:8px;">Unmatched</strong>
                                <div data-datatable>
                                    <div class="datatable-toolbar">
                                        <input type="text" data-datatable-search placeholder="Cari cepat di unmatched...">
                                        <div class="datatable-meta" data-datatable-meta></div>
                                    </div>
                                    <div class="table-scroll">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Baris</th>
                                                    <th>Emp Code</th>
                                                    <th>Name</th>
                                                    <th>Catatan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (($resignImportPreview['unmatched'] ?? []) as $row)
                                                    <tr>
                                                        <td>{{ $row['row_number'] }}</td>
                                                        <td>{{ $row['emp_code'] ?: '-' }}</td>
                                                        <td>{{ $row['name'] ?: '-' }}</td>
                                                        <td>{{ $row['note'] ?: '-' }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif

                            <div>
                                <strong style="display:block; margin-bottom:8px;">Pilih Mesin Target</strong>
                                <div class="muted" style="margin-bottom: 10px; font-size: 13px;">
                                    Pilih satu atau banyak mesin tempat user resign ini harus dihapus.
                                </div>
                                <div class="muted" style="margin-bottom: 10px; font-size: 13px;">
                                    Tips: kalau tidak pilih mesin, sistem akan mengirim ke semua mesin <strong>Approved</strong>.
                                </div>
                                <div style="max-height: 240px; overflow:auto; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-strong); display:grid; gap:8px;">
                                    @foreach ($terminals as $terminal)
                                        <label style="display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius: 14px; border: 1px solid rgba(29, 42, 36, 0.08); background: rgba(255,255,255,0.55); cursor:pointer;">
                                            <input type="checkbox" name="target_terminal_ids[]" value="{{ $terminal->id }}" style="margin-top: 3px;">
                                            <div>
                                                <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                                                    <strong>{{ $terminal->alias ?: $terminal->sn }}</strong>
                                                    @if ((int) $terminal->status === 1)
                                                        <span class="status">Approved</span>
                                                    @else
                                                        <span class="status pending">Pending</span>
                                                    @endif
                                                    @php
                                                        $terminalPresenceStatus = $terminal->presence_status ?? 'offline';
                                                        $terminalPresenceLabel = strtoupper((string) ($terminal->presence_label ?? 'Offline'));
                                                        $terminalPresenceStyle = match ($terminalPresenceStatus) {
                                                            'online' => 'background: rgba(45, 106, 79, 0.16); color: #1f6a45; border: 1px solid rgba(45, 106, 79, 0.18);',
                                                            'stale' => 'background: rgba(201, 162, 39, 0.18); color: #8b5e12; border: 1px solid rgba(201, 162, 39, 0.2);',
                                                            default => 'background: rgba(180, 35, 24, 0.12); color: #9f261b; border: 1px solid rgba(180, 35, 24, 0.18);',
                                                        };
                                                    @endphp
                                                    <span class="status" style="{{ $terminalPresenceStyle }}">{{ $terminalPresenceLabel }}</span>
                                                </div>
                                                <div class="muted" style="font-size: 12px; margin-top: 4px;">SN: {{ $terminal->sn }} @if(!empty($terminal->presence_meta)) - {{ $terminal->presence_meta }} @endif</div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div style="display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;">
                                <button type="button" class="pill-link secondary" onclick="document.getElementById('resign-import-clear-form').submit()">Buang Preview</button>
                                <div style="display:flex; gap:10px;">
                                    <button type="button" class="pill-link secondary" onclick="toggleResignImportReviewModal(false)">Tutup</button>
                                    <button type="submit" class="pill-link primary" onclick="return confirm('Queue hapus user resign ke mesin target?')">Hapus Dari Mesin</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div id="fingerprint-detail-modal" class="modal-backdrop" onclick="if (event.target === this) toggleFingerprintModal(false)">
        <div class="modal-card" style="max-width: 1180px;">
            <div class="modal-head">
                <h3>Fingerprint Detail</h3>
                <button type="button" class="modal-close" onclick="toggleFingerprintModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <div id="fingerprint-detail-summary" class="muted" style="margin-bottom: 8px;"></div>
                <div id="fingerprint-detail-feedback" class="muted" style="margin-bottom: 14px; font-size: 13px;"></div>
                <div style="display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 18px; align-items: start;">
                    <div style="padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(19, 41, 61, 0.96)); color: #eff6ff;">
                        <div style="font-weight: 700; margin-bottom: 12px;">Pilih FID Untuk Enroll Sidik Jari</div>
                        <div class="muted" style="color: rgba(239, 246, 255, 0.76); margin-bottom: 16px; font-size: 13px;">
                            Nomor FID mengikuti layout jari seperti di mesin. Nomor yang sudah terisi akan ditandai. Klik salah satu nomor untuk mendaftarkan sidik jari baru ke mesin yang dipilih.
                        </div>
                        <div id="finger-map-grid" style="display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;"></div>
                    </div>
                    <div style="display:grid; gap: 14px;">
                        <div style="padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong);">
                            <div style="font-weight: 700; margin-bottom: 8px;">Enroll Ke Mesin</div>
                            <label style="display:grid; gap: 8px;">
                                <span class="muted" style="font-size: 13px;">Target mesin</span>
                                <select id="fingerprint-enroll-terminal" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: white;">
                                    <option value="">- Pilih mesin -</option>
                                    @foreach ($terminals as $terminal)
                                        <option value="{{ $terminal->id }}">{{ match ($terminal->presence_status ?? 'offline') {
                                            'online' => '??',
                                            'stale' => '??',
                                            default => '?',
                                        } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})</option>
                                    @endforeach
                                </select>
                            </label>
                            <div class="muted" id="fingerprint-enroll-hint" style="margin-top: 10px; font-size: 13px;">
                                Pilih mesin dulu, lalu klik nomor FID pada peta jari di sebelah kiri.
                            </div>
                        </div>
                        <div class="table-scroll">
                            <table>
                                <thead>
                                    <tr>
                                        <th style="width: 40px;">
                                            <input type="checkbox" id="fingerprint-conflict-check-all">
                                        </th>
                                        <th>FID</th>
                                        <th>Nama Jari</th>
                                        <th>Index</th>
                                        <th>Version</th>
                                        <th>Valid</th>
                                        <th>Konflik</th>
                                        <th>SN</th>
                                        <th>Updated</th>
                                    </tr>
                                </thead>
                                <tbody id="fingerprint-detail-body">
                                    <tr><td colspan="9" class="muted">Belum ada data template.</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-scroll">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Terminal</th>
                                        <th>FID</th>
                                        <th>Nama Jari</th>
                                        <th>Queued</th>
                                        <th>Status</th>
                                        <th>Callback</th>
                                    </tr>
                                </thead>
                                <tbody id="fingerprint-enroll-history-body">
                                    <tr><td colspan="6" class="muted">Belum ada history enroll sidik jari.</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 20px; padding: 18px; border-radius: 18px; border: 1px solid rgba(180, 35, 24, 0.14); background: rgba(180, 35, 24, 0.04);">
                    <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
                        <div>
                            <div style="font-weight:700;">Review Konflik Sidik Jari</div>
                            <div class="muted" style="font-size:9px;">Centang sidik jari yang salah, lalu hapus dari user ini dan queue update ke mesin sumber.</div>
                        </div>
                        <div id="fingerprint-conflict-selected" class="status pending">0 sidik jari dipilih</div>
                    </div>
                    <div style="margin-top: 12px; display:grid; gap:10px;">
                        <textarea id="fingerprint-conflict-notes" rows="2" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong); resize: vertical;" placeholder="Catatan conflict, contoh: salah registrasi user lama / finger ganda saat enroll."></textarea>
                        <div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
                            <button type="button" id="fingerprint-conflict-delete-button" class="pill-link secondary" style="background: rgba(180, 35, 24, 0.12); color: var(--red); border: 1px solid rgba(180, 35, 24, 0.18);">Hapus Selected Sidik Jari + Update ke Mesin</button>
                        </div>
                    </div>
                    <div class="table-scroll" style="margin-top: 14px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Waktu</th>
                                    <th>FID</th>
                                    <th>Nama Jari</th>
                                    <th>Status</th>
                                    <th>Mesin</th>
                                    <th>Catatan</th>
                                </tr>
                            </thead>
                            <tbody id="fingerprint-conflict-history-body">
                                <tr><td colspan="6" class="muted">Belum ada history konflik sidik jari.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div style="margin-top: 20px; padding: 18px; border-radius: 18px; border: 1px solid rgba(45, 106, 79, 0.16); background: rgba(45, 106, 79, 0.04);">
                    <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
                        <div>
                            <div style="font-weight:700;">Review Transaksi Konflik</div>
                            <div class="muted" style="font-size:9px;">Cari transaksi user ini dalam rentang tanggal tertentu, lalu pindahkan transaksi terpilih ke user tujuan.</div>
                        </div>
                        <div id="fingerprint-transaction-selected" class="status pending">0 transaksi dipilih</div>
                    </div>
                    <div style="margin-top: 14px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;">
                        <label style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">Tanggal Dari</span>
                            <input type="date" id="fingerprint-transaction-date-from" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        </label>
                        <label style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">Tanggal Sampai</span>
                            <input type="date" id="fingerprint-transaction-date-to" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        </label>
                        <div style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">User Tujuan</span>
                            <div style="display:flex; gap:8px;">
                                <input type="text" id="fingerprint-target-search" placeholder="Cari emp code / nama" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                <button type="button" id="fingerprint-target-search-button" class="pill-link secondary">Cari</button>
                            </div>
                        </div>
                        <label style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">Pilih User Tujuan</span>
                            <select id="fingerprint-target-employee-select" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                <option value="">- Pilih user tujuan -</option>
                            </select>
                        </label>
                    </div>
                    <div style="margin-top: 12px; display:grid; grid-template-columns: 1.2fr 1.8fr auto; gap: 12px; align-items:end;">
                        <label style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">Alasan Transfer</span>
                            <input type="text" id="fingerprint-transfer-reason" value="conflict_fingerprint_registration" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        </label>
                        <label style="display:grid; gap:8px;">
                            <span class="muted" style="font-size:9px;">Catatan Transfer</span>
                            <input type="text" id="fingerprint-transfer-notes" placeholder="Contoh: transaksi salah masuk ke user ini karena finger ganda." style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        </label>
                        <div style="display:flex; gap:10px; flex-wrap:wrap;">
                            <button type="button" id="fingerprint-transaction-load-button" class="pill-link secondary">Cari Transaksi</button>
                            <button type="button" id="fingerprint-transaction-transfer-button" class="pill-link secondary" style="background: rgba(45, 106, 79, 0.12); color: var(--green-deep); border: 1px solid rgba(45, 106, 79, 0.18);">Pindah Selected ke User B</button>
                        </div>
                    </div>
                    <div class="table-scroll" style="margin-top: 14px;">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width:40px;"><input type="checkbox" id="fingerprint-transaction-check-all"></th>
                                    <th>ID</th>
                                    <th>Punch Time</th>
                                    <th>State</th>
                                    <th>Verify</th>
                                    <th>Terminal</th>
                                    <th>Source</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody id="fingerprint-transaction-body">
                                <tr><td colspan="8" class="muted">Isi tanggal lalu klik cari transaksi.</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="table-scroll" style="margin-top: 14px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Waktu Transfer</th>
                                    <th>Transaksi</th>
                                    <th>Dari</th>
                                    <th>Ke</th>
                                    <th>Tipe</th>
                                    <th>Alasan</th>
                                    <th>Catatan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="fingerprint-transfer-history-body">
                                <tr><td colspan="8" class="muted">Belum ada history transfer transaksi.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="fingerprint-preview-modal" class="modal-backdrop" onclick="if (event.target === this) toggleFingerprintPreviewModal(false)">
        <div class="modal-card" style="max-width: 760px;">
            <div class="modal-head">
                <div>
                    <h3 style="margin: 0;">Preview Template Fingerprint</h3>
                    <div id="fingerprint-preview-subtitle" class="muted" style="margin-top: 6px; font-size: 13px;">Preview visual dari template TMP.</div>
                </div>
                <button type="button" class="modal-close" onclick="toggleFingerprintPreviewModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <div style="display:flex; justify-content:flex-end; margin-bottom: 10px;">
                    <a id="fingerprint-preview-download" href="#" class="pill-link secondary" target="_blank" rel="noopener">Download SVG</a>
                </div>
                <div style="border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong); padding: 12px;">
                    <img id="fingerprint-preview-image" src="" alt="Fingerprint Preview" style="display:block; width:100%; height:auto; border-radius:14px; background:#fff;">
                </div>
            </div>
        </div>
    </div>

    <form id="fingerprint-enroll-form" method="POST" style="display:none;">
        @csrf
        <input type="hidden" name="terminal_id" id="fingerprint-enroll-terminal-id">
        <input type="hidden" name="fid" id="fingerprint-enroll-fid">
    </form>
@endsection

@push('scripts')
<script>
    function toggleCreateEmployeeModal(force) {
        const panel = document.getElementById('create-employee-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    function toggleFingerprintModal(force) {
        const panel = document.getElementById('fingerprint-detail-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    function toggleFingerprintPreviewModal(force) {
        const panel = document.getElementById('fingerprint-preview-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    function toggleMachineActionModal(force) {
        const panel = document.getElementById('machine-action-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    function toggleResignImportModal(force) {
        const panel = document.getElementById('resign-import-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    function toggleResignImportReviewModal(force) {
        const panel = document.getElementById('resign-import-review-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    const fingerprintConflictRoutes = {
        detail: '{{ route('employees.finger-conflict.detail', ['employee' => '__EMPLOYEE__']) }}',
        deleteFingers: '{{ route('employees.finger-conflict.delete-fingers', ['employee' => '__EMPLOYEE__']) }}',
        conflictTransactions: '{{ route('employees.conflict-transactions', ['employee' => '__EMPLOYEE__']) }}',
        transferTransactions: '{{ route('employees.conflict-transactions.transfer', ['employee' => '__EMPLOYEE__']) }}',
        employeeOptions: '{{ route('employees.options') }}',
        undoTransfer: '{{ route('transactions.conflict-transfer.undo', ['history' => '__HISTORY__']) }}',
    };
    const fingerprintConflictLabels = {
        0: 'Kiri Kelingking',
        1: 'Kiri Manis',
        2: 'Kiri Tengah',
        3: 'Kiri Telunjuk',
        4: 'Kiri Jempol',
        5: 'Kanan Jempol',
        6: 'Kanan Telunjuk',
        7: 'Kanan Tengah',
        8: 'Kanan Manis',
        9: 'Kanan Kelingking'
    };
    const fingerprintConflictState = {
        employeeId: null,
        employeeCode: null,
        employeeName: null,
    };
    const fingerprintDetailModal = document.getElementById('fingerprint-detail-modal');
    const fingerprintDetailSummary = document.getElementById('fingerprint-detail-summary');
    const fingerprintDetailFeedback = document.getElementById('fingerprint-detail-feedback');
    const fingerprintDetailBody = document.getElementById('fingerprint-detail-body');
    const fingerprintEnrollHistoryBody = document.getElementById('fingerprint-enroll-history-body');
    const fingerprintConflictHistoryBody = document.getElementById('fingerprint-conflict-history-body');
    const fingerprintTransferHistoryBody = document.getElementById('fingerprint-transfer-history-body');
    const fingerprintSelectedBadge = document.getElementById('fingerprint-conflict-selected');
    const fingerprintDeleteButton = document.getElementById('fingerprint-conflict-delete-button');
    const fingerprintConflictNotes = document.getElementById('fingerprint-conflict-notes');
    const fingerprintConflictCheckAll = document.getElementById('fingerprint-conflict-check-all');
    const fingerprintTransactionBody = document.getElementById('fingerprint-transaction-body');
    const fingerprintTransactionSelected = document.getElementById('fingerprint-transaction-selected');
    const fingerprintTransactionCheckAll = document.getElementById('fingerprint-transaction-check-all');
    const fingerprintTransactionLoadButton = document.getElementById('fingerprint-transaction-load-button');
    const fingerprintTransactionTransferButton = document.getElementById('fingerprint-transaction-transfer-button');
    const fingerprintTransactionDateFrom = document.getElementById('fingerprint-transaction-date-from');
    const fingerprintTransactionDateTo = document.getElementById('fingerprint-transaction-date-to');
    const fingerprintTargetSearch = document.getElementById('fingerprint-target-search');
    const fingerprintTargetSearchButton = document.getElementById('fingerprint-target-search-button');
    const fingerprintTargetEmployeeSelect = document.getElementById('fingerprint-target-employee-select');
    const fingerprintTransferReason = document.getElementById('fingerprint-transfer-reason');
    const fingerprintTransferNotes = document.getElementById('fingerprint-transfer-notes');

    const fingerprintConflictUrl = function (template, employeeId) {
        return template.replace('__EMPLOYEE__', String(employeeId));
    };

    const fingerprintConflictSelectedFingerIds = function () {
        return Array.from(document.querySelectorAll('[data-fingerprint-conflict-checkbox]:checked')).map(function (checkbox) {
            return Number(checkbox.value);
        }).filter(Boolean);
    };

    const fingerprintConflictSelectedTransactionIds = function () {
        return Array.from(document.querySelectorAll('[data-transaction-conflict-checkbox]:checked')).map(function (checkbox) {
            return Number(checkbox.value);
        }).filter(Boolean);
    };

    const updateFingerprintConflictSelectedBadge = function () {
        if (fingerprintSelectedBadge) {
            fingerprintSelectedBadge.textContent = fingerprintConflictSelectedFingerIds().length + ' sidik jari dipilih';
        }
    };

    const updateTransactionConflictSelectedBadge = function () {
        if (fingerprintTransactionSelected) {
            fingerprintTransactionSelected.textContent = fingerprintConflictSelectedTransactionIds().length + ' transaksi dipilih';
        }
    };

    const renderFingerprintEnrollHistory = function (historyRows) {
        if (!fingerprintEnrollHistoryBody) {
            return;
        }

        fingerprintEnrollHistoryBody.innerHTML = '';

        if (!historyRows.length) {
            fingerprintEnrollHistoryBody.innerHTML = '<tr><td colspan="6" class="muted">Belum ada history enroll sidik jari.</td></tr>';
            return;
        }

        historyRows.forEach(function (row) {
            const badgeStyles = {
                success: 'background: rgba(45, 106, 79, 0.14); color: var(--green-deep);',
                warning: 'background: rgba(183, 121, 31, 0.14); color: var(--amber);',
                danger: 'background: rgba(180, 35, 24, 0.12); color: var(--red);',
                pending: 'background: rgba(68, 98, 137, 0.14); color: #355070;'
            };
            const style = badgeStyles[row.result_class] || badgeStyles.pending;
            fingerprintEnrollHistoryBody.insertAdjacentHTML('beforeend', `
                <tr>
                    <td>${row.terminal_alias || row.terminal_sn || '-'}</td>
                    <td>${row.fid ?? '-'}</td>
                    <td>${row.finger_label ?? fingerprintConflictLabels[row.fid] ?? '-'}</td>
                    <td>${row.commit_time ?? '-'}</td>
                    <td><span class="status" style="${style}">${row.result_label ?? '-'}</span></td>
                    <td>${row.callback_time ?? row.result_detail ?? '-'}</td>
                </tr>
            `);
        });
    };

    const renderFingerprintConflictHistory = function (rows) {
        if (!fingerprintConflictHistoryBody) {
            return;
        }

        fingerprintConflictHistoryBody.innerHTML = '';

        if (!rows.length) {
            fingerprintConflictHistoryBody.innerHTML = '<tr><td colspan="6" class="muted">Belum ada history konflik sidik jari.</td></tr>';
            return;
        }

        rows.forEach(function (row) {
            fingerprintConflictHistoryBody.insertAdjacentHTML('beforeend', `
                <tr>
                    <td>${row.created_at ?? '-'}</td>
                    <td>${row.bio_no ?? '-'}</td>
                    <td>${row.finger_label ?? '-'}</td>
                    <td><span class="status pending">${row.status ?? '-'}</span></td>
                    <td>${(row.queued_terminal_ids || []).length ? 'ID ' + (row.queued_terminal_ids || []).join(', ') : '-'}</td>
                    <td>${row.notes ?? '-'}</td>
                </tr>
            `);
        });
    };

    const renderTransferHistory = function (rows) {
        if (!fingerprintTransferHistoryBody) {
            return;
        }

        fingerprintTransferHistoryBody.innerHTML = '';

        if (!rows.length) {
            fingerprintTransferHistoryBody.innerHTML = '<tr><td colspan="8" class="muted">Belum ada history transfer transaksi.</td></tr>';
            return;
        }

        rows.forEach(function (row) {
            fingerprintTransferHistoryBody.insertAdjacentHTML('beforeend', `
                <tr>
                    <td>${row.created_at ?? '-'}</td>
                    <td>#${row.transaction_id ?? '-'}</td>
                    <td>${row.from_emp_code ?? '-'}</td>
                    <td>${row.to_emp_code ?? '-'}</td>
                    <td>${row.transfer_type ?? '-'}</td>
                    <td>${row.transfer_reason ?? '-'}</td>
                    <td>${row.notes ?? '-'}</td>
                    <td>${row.can_undo ? `<button type="button" class="pill-link secondary" style="padding:4px 9px; font-size:11px;" data-transfer-undo="${row.id}">Undo</button>` : '<span class="muted">-</span>'}</td>
                </tr>
            `);
        });
    };

    const renderFingerMap = function (rows, historyRows) {
        const fingerMapGrid = document.getElementById('finger-map-grid');
        const terminalSelect = document.getElementById('fingerprint-enroll-terminal');
        const enrollHint = document.getElementById('fingerprint-enroll-hint');
        const enrollForm = document.getElementById('fingerprint-enroll-form');
        const enrollTerminalId = document.getElementById('fingerprint-enroll-terminal-id');
        const enrollFid = document.getElementById('fingerprint-enroll-fid');

        if (!fingerMapGrid) {
            return;
        }

        const occupiedFids = new Set(rows.map(function (row) {
            return String(row.bio_no ?? '');
        }));
        const latestStatusByFinger = {};
        historyRows.forEach(function (row) {
            const key = String(row.terminal_id || '') + ':' + String(row.fid || '');
            if (!latestStatusByFinger[key]) {
                latestStatusByFinger[key] = row;
            }
        });

        if (terminalSelect) {
            terminalSelect.value = '';
        }
        if (enrollHint) {
            enrollHint.textContent = 'Pilih mesin dulu, lalu klik nomor FID pada peta jari di sebelah kiri.';
        }

        fingerMapGrid.innerHTML = '';
        [0,1,2,3,4,5,6,7,8,9].forEach(function (fid) {
            const isOccupied = occupiedFids.has(String(fid));
            const buttonColor = isOccupied
                ? 'background: rgba(45, 106, 79, 0.22); border: 1px solid rgba(45, 106, 79, 0.35); color: #d1fae5;'
                : 'background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #eff6ff;';

            fingerMapGrid.insertAdjacentHTML('beforeend', `
                <button type="button" data-fid-enroll="${fid}" style="min-height: 74px; border-radius: 18px; font-weight: 800; cursor: pointer; ${buttonColor}" title="${fingerprintConflictLabels[fid] || ('FID ' + fid)}">
                    <div style="font-size: 24px; line-height: 1;">${fid}</div>
                    <div style="font-size: 11px; margin-top: 6px; opacity: 0.9;">${fingerprintConflictLabels[fid] || ('FID ' + fid)}</div>
                    <div style="font-size: 11px; margin-top: 4px; opacity: 0.82;" data-fid-state="${fid}">${isOccupied ? 'Sudah ada' : 'Kosong'}</div>
                </button>
            `);
        });

        const updateFingerStatuses = function () {
            const selectedTerminalId = terminalSelect?.value || '';
            fingerMapGrid.querySelectorAll('[data-fid-state]').forEach(function (stateNode) {
                const fid = stateNode.getAttribute('data-fid-state');
                const isOccupied = occupiedFids.has(String(fid));
                const statusRow = latestStatusByFinger[String(selectedTerminalId) + ':' + String(fid)];
                if (statusRow && selectedTerminalId) {
                    stateNode.textContent = statusRow.result_label || (isOccupied ? 'Sudah ada' : 'Kosong');
                    stateNode.style.color = statusRow.result_class === 'success' ? '#bbf7d0' : (statusRow.result_class === 'danger' ? '#fecaca' : '#fde68a');
                    return;
                }
                stateNode.textContent = isOccupied ? 'Sudah ada' : 'Kosong';
                stateNode.style.color = '';
            });
        };

        fingerMapGrid.querySelectorAll('[data-fid-enroll]').forEach(function (fidButton) {
            fidButton.addEventListener('click', function () {
                const terminalId = terminalSelect?.value || '';
                const fid = fidButton.getAttribute('data-fid-enroll');
                if (!terminalId) {
                    window.alert('Pilih mesin tujuan dulu sebelum enroll sidik jari.');
                    terminalSelect?.focus();
                    return;
                }
                if (!enrollForm || !enrollTerminalId || !enrollFid) {
                    return;
                }
                enrollTerminalId.value = terminalId;
                enrollFid.value = fid;
                enrollForm.setAttribute('action', '/employees/' + fingerprintConflictState.employeeId + '/enroll-fingerprint');
                if (window.confirm('Queue enroll sidik jari FID ' + fid + ' untuk employee ' + fingerprintConflictState.employeeCode + ' ke mesin terpilih?')) {
                    enrollForm.submit();
                }
            });
        });

        updateFingerStatuses();
        if (terminalSelect) {
            if (terminalSelect._fingerStatusHandler) {
                terminalSelect.removeEventListener('change', terminalSelect._fingerStatusHandler);
            }
            terminalSelect._fingerStatusHandler = function () {
                updateFingerStatuses();
            };
            terminalSelect.addEventListener('change', terminalSelect._fingerStatusHandler);
        }
    };

    const renderFingerprintRows = function (rows) {
        if (!fingerprintDetailBody) {
            return;
        }

        fingerprintDetailBody.innerHTML = '';
        if (!rows.length) {
            fingerprintDetailBody.innerHTML = '<tr><td colspan="9" class="muted">Belum ada data template.</td></tr>';
            updateFingerprintConflictSelectedBadge();
            return;
        }

        rows.forEach(function (row) {
            const version = [row.major_ver || '', row.minor_ver || ''].join(' ').trim() || '-';
            const previewUrl = row.preview_url || '';
            const conflictSummary = Number(row.conflict_count || 0) > 0
                ? `<span class="status pending" title="${(row.conflict_rows || []).map(function (item) { return item.emp_code + ' - ' + item.employee_name; }).join(', ')}">${row.conflict_count} user lain</span>`
                : '<span class="muted">-</span>';
            fingerprintDetailBody.insertAdjacentHTML('beforeend', `
                <tr>
                    <td><input type="checkbox" value="${row.id}" data-fingerprint-conflict-checkbox></td>
                    <td>${row.bio_no ?? '-'}</td>
                    <td>${row.finger_label ?? fingerprintConflictLabels[row.bio_no] ?? '-'}</td>
                    <td>${row.bio_index ?? '-'}</td>
                    <td>${version}</td>
                    <td>${parseInt(row.valid ?? 0, 10) === 1 ? 'Yes' : 'No'}</td>
                    <td>${conflictSummary}</td>
                    <td>
                        <div>${row.sn ?? '-'}</div>
                        ${previewUrl ? `<div style="display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;"><button type="button" class="pill-link secondary" style="padding:4px 9px; font-size:11px;" data-fingerprint-preview-open="${previewUrl}" data-fingerprint-preview-label="${row.finger_label ?? fingerprintConflictLabels[row.bio_no] ?? '-'}">Preview</button>${row.preview_download_url ? `<a href="${row.preview_download_url}" class="pill-link secondary" style="padding:4px 9px; font-size:11px;">Download SVG</a>` : ''}</div>` : ''}
                    </td>
                    <td>${row.update_time ?? row.create_time ?? '-'}</td>
                </tr>
            `);
        });

        fingerprintDetailBody.querySelectorAll('[data-fingerprint-conflict-checkbox]').forEach(function (checkbox) {
            checkbox.addEventListener('change', updateFingerprintConflictSelectedBadge);
        });
        if (fingerprintConflictCheckAll) {
            fingerprintConflictCheckAll.checked = false;
        }
        updateFingerprintConflictSelectedBadge();
    };

    const applyFingerprintDetailPayload = function (payload) {
        const employee = payload.employee || {};
        const rows = payload.fingerprints || [];
        const historyRows = payload.enroll_history || [];
        const conflictRows = payload.conflict_actions || [];
        const transferRows = payload.transfer_history || [];

        fingerprintConflictState.employeeId = employee.id || fingerprintConflictState.employeeId;
        fingerprintConflictState.employeeCode = employee.emp_code || fingerprintConflictState.employeeCode;
        fingerprintConflictState.employeeName = employee.name || fingerprintConflictState.employeeName;
        if (fingerprintDetailModal) {
            fingerprintDetailModal.dataset.employeeId = String(fingerprintConflictState.employeeId || '');
        }
        if (fingerprintDetailSummary) {
            fingerprintDetailSummary.innerHTML = '<strong style="color: var(--ink);">' + (fingerprintConflictState.employeeName || '-') + '</strong> | Emp Code ' + (fingerprintConflictState.employeeCode || '-') + ' | ' + rows.length + ' template';
        }
        if (fingerprintDetailFeedback) {
            const successCount = historyRows.filter(function (row) { return row.result_class === 'success'; }).length;
            const failedCount = historyRows.filter(function (row) { return row.result_class === 'danger'; }).length;
            const waitingCount = historyRows.filter(function (row) { return row.result_class === 'pending' || row.result_class === 'warning'; }).length;
            const duplicateCount = rows.filter(function (row) { return Number(row.conflict_count || 0) > 0; }).length;
            fingerprintDetailFeedback.textContent = 'Riwayat enroll: ' + successCount + ' sukses, ' + waitingCount + ' menunggu, ' + failedCount + ' gagal/expired. Konflik template terdeteksi pada ' + duplicateCount + ' slot sidik jari.';
        }
        renderFingerprintRows(rows);
        renderFingerprintEnrollHistory(historyRows);
        renderFingerprintConflictHistory(conflictRows);
        renderTransferHistory(transferRows);
        renderFingerMap(rows, historyRows);
    };

    const refreshFingerprintConflictDetail = function () {
        if (!fingerprintConflictState.employeeId) {
            return Promise.resolve();
        }
        return fetch(fingerprintConflictUrl(fingerprintConflictRoutes.detail, fingerprintConflictState.employeeId), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat detail konflik sidik jari.');
                }
                return response.json();
            })
            .then(function (payload) {
                applyFingerprintDetailPayload(payload);
            });
    };

    const loadFingerprintConflictTransactions = function () {
        if (!fingerprintConflictState.employeeId || !fingerprintTransactionBody) {
            return;
        }
        const params = new URLSearchParams();
        if (fingerprintTransactionDateFrom?.value) {
            params.set('date_from', fingerprintTransactionDateFrom.value);
        }
        if (fingerprintTransactionDateTo?.value) {
            params.set('date_to', fingerprintTransactionDateTo.value);
        }
        fingerprintTransactionBody.innerHTML = '<tr><td colspan="8" class="muted">Memuat transaksi...</td></tr>';
        fetch(fingerprintConflictUrl(fingerprintConflictRoutes.conflictTransactions, fingerprintConflictState.employeeId) + '?' + params.toString(), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat transaksi konflik.');
                }
                return response.json();
            })
            .then(function (payload) {
                const rows = payload.rows || [];
                fingerprintTransactionBody.innerHTML = '';
                if (!rows.length) {
                    fingerprintTransactionBody.innerHTML = '<tr><td colspan="8" class="muted">Tidak ada transaksi di rentang tanggal ini.</td></tr>';
                } else {
                    rows.forEach(function (row) {
                        fingerprintTransactionBody.insertAdjacentHTML('beforeend', `
                            <tr>
                                <td><input type="checkbox" value="${row.id}" data-transaction-conflict-checkbox></td>
                                <td>${row.id}</td>
                                <td>${row.punch_time ?? '-'}</td>
                                <td>${row.punch_state_label ?? '-'}</td>
                                <td>${row.verify_type_label ?? '-'}</td>
                                <td>${row.terminal_sn ?? '-'}</td>
                                <td>${row.source_label ?? '-'}</td>
                                <td>${row.reserved ?? '-'}</td>
                            </tr>
                        `);
                    });
                }
                fingerprintTransactionBody.querySelectorAll('[data-transaction-conflict-checkbox]').forEach(function (checkbox) {
                    checkbox.addEventListener('change', updateTransactionConflictSelectedBadge);
                });
                if (fingerprintTransactionCheckAll) {
                    fingerprintTransactionCheckAll.checked = false;
                }
                updateTransactionConflictSelectedBadge();
            })
            .catch(function (error) {
                fingerprintTransactionBody.innerHTML = '<tr><td colspan="8" class="muted">' + error.message + '</td></tr>';
            });
    };

    const searchFingerprintTargetEmployees = function () {
        if (!fingerprintTargetEmployeeSelect) {
            return;
        }
        const query = (fingerprintTargetSearch?.value || '').trim();
        const params = new URLSearchParams();
        params.set('exclude_employee_id', String(fingerprintConflictState.employeeId || ''));
        if (query !== '') {
            params.set('q', query);
        }
        fingerprintTargetEmployeeSelect.innerHTML = '<option value="">Memuat user...</option>';
        fetch(fingerprintConflictRoutes.employeeOptions + '?' + params.toString(), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat user tujuan.');
                }
                return response.json();
            })
            .then(function (payload) {
                const rows = payload.rows || [];
                fingerprintTargetEmployeeSelect.innerHTML = '<option value="">- Pilih user tujuan -</option>';
                rows.forEach(function (row) {
                    const option = document.createElement('option');
                    option.value = String(row.id);
                    option.textContent = row.emp_code + ' - ' + row.name + (row.is_active ? '' : ' (inactive)');
                    fingerprintTargetEmployeeSelect.appendChild(option);
                });
            })
            .catch(function (error) {
                fingerprintTargetEmployeeSelect.innerHTML = '<option value="">' + error.message + '</option>';
            });
    };

    fingerprintConflictCheckAll?.addEventListener('change', function () {
        document.querySelectorAll('[data-fingerprint-conflict-checkbox]').forEach(function (checkbox) {
            checkbox.checked = fingerprintConflictCheckAll.checked;
        });
        updateFingerprintConflictSelectedBadge();
    });

    fingerprintTransactionCheckAll?.addEventListener('change', function () {
        document.querySelectorAll('[data-transaction-conflict-checkbox]').forEach(function (checkbox) {
            checkbox.checked = fingerprintTransactionCheckAll.checked;
        });
        updateTransactionConflictSelectedBadge();
    });

    fingerprintDeleteButton?.addEventListener('click', function () {
        const selectedIds = fingerprintConflictSelectedFingerIds();
        if (!selectedIds.length || !fingerprintConflictState.employeeId) {
            window.alert('Pilih sidik jari yang mau dihapus dulu.');
            return;
        }
        if (!window.confirm('Hapus ' + selectedIds.length + ' sidik jari dari user ini dan queue update ke mesin sumber?')) {
            return;
        }
        fetch(fingerprintConflictUrl(fingerprintConflictRoutes.deleteFingers, fingerprintConflictState.employeeId), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                biodata_ids: selectedIds,
                notes: fingerprintConflictNotes?.value || '',
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal menghapus sidik jari.');
                }
                return payload;
            })
            .then(function (payload) {
                if (payload.detail) {
                    applyFingerprintDetailPayload({
                        employee: {
                            id: fingerprintConflictState.employeeId,
                            emp_code: fingerprintConflictState.employeeCode,
                            name: fingerprintConflictState.employeeName,
                        },
                        fingerprints: payload.detail.fingerprints || [],
                        enroll_history: payload.detail.enroll_history || [],
                        conflict_actions: payload.detail.conflict_actions || [],
                        transfer_history: payload.detail.transfer_history || [],
                    });
                } else {
                    refreshFingerprintConflictDetail();
                }
                window.alert(payload.message || 'Sidik jari berhasil dihapus dan di-queue ke mesin.');
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    fingerprintTransactionLoadButton?.addEventListener('click', function () {
        loadFingerprintConflictTransactions();
    });

    fingerprintTargetSearchButton?.addEventListener('click', function () {
        searchFingerprintTargetEmployees();
    });

    fingerprintTargetSearch?.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            searchFingerprintTargetEmployees();
        }
    });

    fingerprintTransactionTransferButton?.addEventListener('click', function () {
        const transactionIds = fingerprintConflictSelectedTransactionIds();
        const targetEmployeeId = fingerprintTargetEmployeeSelect?.value || '';
        if (!transactionIds.length) {
            window.alert('Pilih transaksi yang mau dipindah dulu.');
            return;
        }
        if (!targetEmployeeId) {
            window.alert('Pilih user tujuan dulu.');
            return;
        }
        if (!window.confirm('Pindahkan ' + transactionIds.length + ' transaksi dari ' + fingerprintConflictState.employeeCode + ' ke user tujuan terpilih?')) {
            return;
        }
        fetch(fingerprintConflictUrl(fingerprintConflictRoutes.transferTransactions, fingerprintConflictState.employeeId), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                transaction_ids: transactionIds,
                target_employee_id: targetEmployeeId,
                transfer_reason: fingerprintTransferReason?.value || 'conflict_fingerprint_registration',
                notes: fingerprintTransferNotes?.value || '',
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal memindahkan transaksi.');
                }
                return payload;
            })
            .then(function (payload) {
                window.alert(payload.message || 'Transaksi berhasil dipindah.');
                loadFingerprintConflictTransactions();
                refreshFingerprintConflictDetail();
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    fingerprintTransferHistoryBody?.addEventListener('click', function (event) {
        const button = event.target.closest('[data-transfer-undo]');
        if (!button) {
            return;
        }

        const historyId = button.getAttribute('data-transfer-undo');
        if (!historyId) {
            return;
        }

        if (!window.confirm('Undo transfer transaksi ini dan kembalikan ke user asal?')) {
            return;
        }

        fetch(fingerprintConflictRoutes.undoTransfer.replace('__HISTORY__', String(historyId)), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                notes: 'Undo dari review fingerprint conflict',
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal undo transfer transaksi.');
                }
                return payload;
            })
            .then(function (payload) {
                window.alert(payload.message || 'Undo transfer berhasil.');
                loadFingerprintConflictTransactions();
                refreshFingerprintConflictDetail();
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    document.querySelectorAll('[data-fingerprint-trigger]').forEach(function (button) {
        button.addEventListener('click', function () {
            const employeeId = button.getAttribute('data-employee-id') || '';
            const employeeName = button.getAttribute('data-employee-name') || '-';
            const employeeCode = button.getAttribute('data-employee-code') || '-';
            fingerprintConflictState.employeeId = employeeId;
            fingerprintConflictState.employeeName = employeeName;
            fingerprintConflictState.employeeCode = employeeCode;

            if (fingerprintDetailSummary) {
                fingerprintDetailSummary.innerHTML = '<strong style="color: var(--ink);">' + employeeName + '</strong> | Emp Code ' + employeeCode + ' | memuat detail...';
            }
            if (fingerprintDetailFeedback) {
                fingerprintDetailFeedback.textContent = 'Memuat rincian sidik jari, history enroll, dan history transfer conflict...';
            }
            if (fingerprintConflictNotes) {
                fingerprintConflictNotes.value = '';
            }
            if (fingerprintTransferNotes) {
                fingerprintTransferNotes.value = '';
            }
            if (fingerprintTransferReason) {
                fingerprintTransferReason.value = 'conflict_fingerprint_registration';
            }
            if (fingerprintTargetSearch) {
                fingerprintTargetSearch.value = '';
            }
            if (fingerprintTargetEmployeeSelect) {
                fingerprintTargetEmployeeSelect.innerHTML = '<option value="">- Pilih user tujuan -</option>';
            }
            if (fingerprintTransactionDateFrom) {
                fingerprintTransactionDateFrom.value = '';
            }
            if (fingerprintTransactionDateTo) {
                fingerprintTransactionDateTo.value = '';
            }
            if (fingerprintTransactionBody) {
                fingerprintTransactionBody.innerHTML = '<tr><td colspan="8" class="muted">Isi tanggal lalu klik cari transaksi.</td></tr>';
            }
            updateFingerprintConflictSelectedBadge();
            updateTransactionConflictSelectedBadge();
            toggleFingerprintModal(true);
            searchFingerprintTargetEmployees();
            refreshFingerprintConflictDetail().catch(function (error) {
                if (fingerprintDetailFeedback) {
                    fingerprintDetailFeedback.textContent = error.message;
                }
            });
        });
    });
    document.addEventListener('click', function (event) {
        const trigger = event.target.closest('[data-fingerprint-preview-open]');
        if (!trigger) {
            return;
        }

        const previewUrl = trigger.getAttribute('data-fingerprint-preview-open') || '';
        const previewLabel = trigger.getAttribute('data-fingerprint-preview-label') || 'Fingerprint';
        const image = document.getElementById('fingerprint-preview-image');
        const subtitle = document.getElementById('fingerprint-preview-subtitle');
        const downloadLink = document.getElementById('fingerprint-preview-download');

        if (image) {
            image.src = previewUrl;
        }

        if (subtitle) {
            subtitle.textContent = previewLabel + ' - preview visual dari template TMP, bukan foto sensor asli.';
        }

        if (downloadLink) {
            downloadLink.href = previewUrl + (previewUrl.includes('?') ? '&' : '?') + 'download=1';
        }

        toggleFingerprintPreviewModal(true);
    });

    document.getElementById('fingerprint-enroll-terminal')?.addEventListener('change', function () {
        const enrollHint = document.getElementById('fingerprint-enroll-hint');
        if (enrollHint) {
            enrollHint.textContent = this.value
                ? 'Mesin sudah dipilih. Sekarang klik nomor FID untuk queue enroll sidik jari.'
                : 'Pilih mesin dulu, lalu klik nomor FID pada peta jari di sebelah kiri.';
        }
    });

    (function () {
        const bulkForm = document.getElementById('bulk-employee-action-form');
        const employeeCheckboxes = Array.from(document.querySelectorAll('[data-employee-checkbox]'));
        const machineActionButtons = Array.from(document.querySelectorAll('[data-machine-action-trigger]'));
        const modal = document.getElementById('machine-action-modal');
        const modalTitle = document.getElementById('machine-action-modal-title');
        const modalSummary = document.getElementById('machine-action-modal-summary');
        const modalConfirmButton = document.getElementById('machine-action-modal-confirm');
        const scheduleWrapper = modal?.querySelector('[data-schedule-wrapper]');
        const scheduleInput = document.getElementById('scheduled_for');
        const filterInput = document.querySelector('[data-terminal-filter]');
        const picker = document.querySelector('[data-terminal-picker]');
        const selectedCount = document.querySelector('[data-terminal-selected-count]');
        const checkboxes = Array.from(document.querySelectorAll('[data-terminal-checkbox]'));
        const options = Array.from(document.querySelectorAll('[data-terminal-option]'));
        const approvedButton = document.querySelector('[data-terminal-select="approved"]');
        const clearButton = document.querySelector('[data-terminal-select="clear"]');
        const previewNode = modal?.querySelector('[data-machine-action-preview]');
        const deleteAppWrapper = modal?.querySelector('[data-delete-app-wrapper]');
        const deleteOnMachineCheckbox = modal?.querySelector('[data-delete-on-machine]');

        if (!bulkForm || !modal || !filterInput || !picker || !checkboxes.length) {
            return;
        }

        const selectedEmployeeNodes = function () {
            return employeeCheckboxes.filter(function (checkbox) {
                return checkbox.checked;
            });
        };

        const countSelectedEmployees = function () {
            return selectedEmployeeNodes().length;
        };

        const buildPreviewText = function () {
            if (!previewNode) {
                return;
            }

            const actionMode = modal.dataset.actionMode || 'sync';
            const selectedEmployees = selectedEmployeeNodes();
            const deleteOnMachine = !!(deleteOnMachineCheckbox && deleteOnMachineCheckbox.checked);
            const selectedTargets = checkboxes.filter(function (checkbox) {
                return checkbox.checked;
            });

            if (!selectedEmployees.length) {
                previewNode.textContent = 'Pilih employee dan mesin target untuk melihat ringkasan source dan tujuan.';
                return;
            }

            const employeeLabels = selectedEmployees.slice(0, 5).map(function (checkbox) {
                const code = checkbox.getAttribute('data-employee-code') || checkbox.value;
                const name = checkbox.getAttribute('data-employee-name') || '-';
                return code + ' - ' + name;
            });
            const employeeSuffix = selectedEmployees.length > 5
                ? ' +' + (selectedEmployees.length - 5) + ' employee lain'
                : '';

            const sourceLabels = Array.from(new Set(selectedEmployees
                .map(function (checkbox) {
                    return (checkbox.getAttribute('data-employee-source-sn') || '').trim();
                })
                .filter(function (value) {
                    return value !== '';
                })));

            const targetLabels = selectedTargets.map(function (checkbox) {
                const option = checkbox.closest('[data-terminal-option]');
                const title = option?.querySelector('strong')?.textContent?.trim() || '';
                const muted = option?.querySelector('.muted')?.textContent?.trim() || '';
                return (title !== '' ? title : checkbox.value) + (muted !== '' ? ' (' + muted.replace(/^SN:\s*/i, '') + ')' : '');
            });

            let actionLine = 'Aksi akan memakai target default tiap employee.';
            if (actionMode === 'copy') {
                actionLine = targetLabels.length
                    ? 'Copy akan mengirim `DATA USER` + `DATA FP` ke: ' + targetLabels.join(', ') + '. Mesin sumber tidak dihapus.'
                    : 'Copy memakai target default employee bila kamu tidak pilih mesin secara manual.';
            } else if (actionMode === 'move') {
                actionLine = targetLabels.length
                    ? 'Move akan mengirim `DATA USER` + `DATA FP` ke: ' + targetLabels.join(', ') + ', lalu kirim `DATA DEL_USER` ke mesin sumber yang terdeteksi.'
                    : 'Untuk move, pilih minimal satu mesin tujuan.';
            } else if (actionMode === 'delete') {
                actionLine = targetLabels.length
                    ? 'Delete akan dikirim ke: ' + targetLabels.join(', ') + '.'
                    : 'Delete akan memakai target default employee bila tidak ada mesin yang dipilih.';
            } else if (actionMode === 'schedule-delete') {
                actionLine = targetLabels.length
                    ? 'Delete terjadwal akan dikirim ke: ' + targetLabels.join(', ') + '.'
                    : 'Delete terjadwal akan memakai target default employee bila tidak ada mesin yang dipilih.';
            } else if (actionMode === 'delete-app') {
                actionLine = !deleteOnMachine
                    ? 'Hapus dari aplikasi saja. Tidak ada command yang dikirim ke mesin.'
                    : targetLabels.length
                        ? 'Hapus dari aplikasi dan kirim `DATA DEL_USER` ke: ' + targetLabels.join(', ') + '.'
                        : 'Hapus dari aplikasi dan kirim `DATA DEL_USER` ke semua mesin Approved.';
            } else {
                actionLine = targetLabels.length
                    ? 'Update akan dikirim ke: ' + targetLabels.join(', ') + '.'
                    : 'Update akan memakai target default employee bila tidak ada mesin yang dipilih.';
            }

            const sourceLine = sourceLabels.length
                ? 'Source terdeteksi dari Enroll SN saat ini: ' + sourceLabels.join(', ') + '.'
                : 'Source mesin belum terdeteksi dari Enroll SN pada employee yang dipilih.';

            previewNode.innerHTML = ''
                + '<div><strong>Employee:</strong> ' + employeeLabels.join(', ') + employeeSuffix + '</div>'
                + '<div style="margin-top:4px;"><strong>Source:</strong> ' + sourceLine + '</div>'
                + '<div style="margin-top:4px;"><strong>Target:</strong> ' + actionLine + '</div>';
        };

        const openMachineActionModal = function (button) {
            const selectedEmployees = countSelectedEmployees();

            if (selectedEmployees < 1) {
                window.alert('Pilih employee dulu sebelum menentukan target mesin.');
                return;
            }

            const label = button.getAttribute('data-action-label') || 'Aksi Ke Mesin';
            const actionUrl = button.getAttribute('data-action-url') || bulkForm.getAttribute('action');
            const actionMode = button.getAttribute('data-action-mode') || 'sync';

            modal.dataset.actionUrl = actionUrl;
            modal.dataset.actionMode = actionMode;

            if (modalTitle) {
                modalTitle.textContent = label;
            }

            if (modalSummary) {
                modalSummary.textContent = actionMode === 'move'
                    ? selectedEmployees + ' employee dipilih. Pilih satu atau banyak mesin tujuan. Sistem akan kirim `DATA USER` + `DATA FP` ke semua mesin tujuan lalu kirim `DATA DEL_USER` ke mesin sumber yang terdeteksi.'
                    : actionMode === 'copy'
                        ? selectedEmployees + ' employee dipilih. Copy akan mengirim `DATA USER` + `DATA FP` ke mesin tujuan tanpa menghapus dari mesin sumber.'
                    : actionMode === 'delete-app'
                        ? selectedEmployees + ' employee dipilih. Employee akan dihapus dari aplikasi (termasuk template biometrik). Kamu bisa centang opsi untuk ikut hapus dari mesin.'
                    : selectedEmployees + ' employee dipilih. Tentukan satu atau banyak mesin target, atau biarkan kosong untuk memakai target default employee.';
            }

            if (modalConfirmButton) {
                modalConfirmButton.textContent = label;
            }

            if (scheduleWrapper) {
                scheduleWrapper.style.display = actionMode === 'schedule-delete' ? '' : 'none';
            }

            if (deleteAppWrapper) {
                deleteAppWrapper.style.display = actionMode === 'delete-app' ? '' : 'none';
            }
            if (deleteOnMachineCheckbox) {
                deleteOnMachineCheckbox.checked = actionMode === 'delete-app';
            }
            // Pastikan picker mesin tidak terkunci dari state sebelumnya.
            const enableTargets = actionMode !== 'delete-app' || (deleteOnMachineCheckbox && deleteOnMachineCheckbox.checked);
            checkboxes.forEach(function (checkbox) {
                checkbox.disabled = !enableTargets;
            });
            if (actionMode === 'delete-app') {
                // Default: kalau tidak pilih mesin, backend akan pakai semua Approved.
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = false;
                });
                updateSelectedLabel();
            }

            buildPreviewText();
            toggleMachineActionModal(true);
        };

        const updateSelectedLabel = function () {
            const selected = checkboxes.filter(function (checkbox) {
                return checkbox.checked;
            }).length;
            const actionMode = modal.dataset.actionMode || 'sync';
            const deleteOnMachine = !!(deleteOnMachineCheckbox && deleteOnMachineCheckbox.checked);

            if (!selectedCount) {
                return;
            }

            if (actionMode === 'delete-app') {
                selectedCount.textContent = !deleteOnMachine
                    ? 'Tanpa hapus ke mesin'
                    : (selected > 0 ? selected + ' mesin dipilih' : 'Semua Approved');
            } else {
                selectedCount.textContent = selected > 0
                    ? selected + ' mesin dipilih'
                    : 'Semua target default';
            }

            buildPreviewText();
        };

        filterInput.addEventListener('input', function () {
            const needle = filterInput.value.trim().toLowerCase();

            options.forEach(function (option) {
                const haystack = option.getAttribute('data-search') || '';
                option.style.display = needle === '' || haystack.includes(needle) ? '' : 'none';
            });
        });

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', updateSelectedLabel);
        });

        employeeCheckboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', buildPreviewText);
        });

        approvedButton?.addEventListener('click', function () {
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = checkbox.getAttribute('data-terminal-approved') === '1';
            });
            updateSelectedLabel();
        });

        clearButton?.addEventListener('click', function () {
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = false;
            });
            updateSelectedLabel();
        });

        machineActionButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                openMachineActionModal(button);
            });
        });

        modalConfirmButton?.addEventListener('click', function () {
            const actionUrl = modal.dataset.actionUrl || bulkForm.getAttribute('action');
            const actionMode = modal.dataset.actionMode || 'sync';
            const selectedTargets = checkboxes.filter(function (checkbox) {
                return checkbox.checked;
            }).length;
            const deleteOnMachine = !!(deleteOnMachineCheckbox && deleteOnMachineCheckbox.checked);

            if (actionMode === 'schedule-delete' && scheduleInput && !scheduleInput.value) {
                window.alert('Isi dulu waktu jadwal hapus dari mesin.');
                scheduleInput.focus();
                return;
            }

            if (actionMode === 'move' && selectedTargets < 1) {
                window.alert('Untuk move user, pilih minimal satu mesin tujuan.');
                return;
            }

            if (actionMode === 'delete-app') {
                const message = !deleteOnMachine
                    ? 'Hapus employee terpilih dari aplikasi? Opsi hapus ke mesin tidak dicentang.'
                    : (selectedTargets > 0
                        ? 'Hapus employee terpilih dari aplikasi dan queue hapus ke mesin yang dipilih?'
                        : 'Hapus employee terpilih dari aplikasi dan queue hapus ke semua mesin Approved?');

                if (!window.confirm(message)) {
                    return;
                }
            }

            bulkForm.setAttribute('action', actionUrl);
            bulkForm.submit();
        });

        deleteOnMachineCheckbox?.addEventListener('change', function () {
            const actionMode = modal.dataset.actionMode || 'sync';
            if (actionMode !== 'delete-app') {
                return;
            }

            const enabled = !!deleteOnMachineCheckbox.checked;
            checkboxes.forEach(function (checkbox) {
                checkbox.disabled = !enabled;
                if (!enabled) {
                    checkbox.checked = false;
                }
            });
            updateSelectedLabel();
        });

        updateSelectedLabel();
    })();

    (function () {
        const wrapper = document.getElementById('resign-import-review-modal');
        if (!wrapper) {
            return;
        }

        const rowCheckboxes = Array.from(wrapper.querySelectorAll('[data-resign-employee-checkbox]'));
        const checkAll = wrapper.querySelector('[data-resign-check-all]');
        const selectAllBtn = wrapper.querySelector('[data-resign-select="all"]');
        const clearBtn = wrapper.querySelector('[data-resign-select="clear"]');

        const setAll = function (value) {
            rowCheckboxes.forEach(function (checkbox) {
                checkbox.checked = value;
            });
        };

        checkAll?.addEventListener('change', function () {
            setAll(!!checkAll.checked);
        });

        selectAllBtn?.addEventListener('click', function () {
            setAll(true);
            if (checkAll) {
                checkAll.checked = true;
            }
        });

        clearBtn?.addEventListener('click', function () {
            setAll(false);
            if (checkAll) {
                checkAll.checked = false;
            }
        });
    })();
</script>
@endpush