@extends('layouts.adminlte')

@section('title', 'PENUGASAN LOKASI')
@section('page_title', 'PENUGASAN LOKASI (HARIAN)')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        #assignSiteMulti + .select2-container .select2-selection--multiple {
            min-height: 74px;
            height: auto;
            max-height: 150px;
            overflow-y: auto;
            align-items: flex-start;
        }
        #assignSiteMulti + .select2-container .select2-selection__rendered {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: flex-start;
            white-space: normal;
        }
        #assignSiteMulti + .select2-container .select2-selection__choice {
            margin: 2px 0 0 0;
        }
        .site-pill { display: inline-block; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 999px; margin: 0 4px 4px 0; font-size: 12px; }
        .missing-user-box { border: 1px dashed #38bdf8; background: #f0f9ff; border-radius: 12px; padding: 14px; }
        .missing-user-table { max-height: 320px; overflow: auto; border: 1px solid #dbeafe; border-radius: 10px; background: #fff; }
    </style>
@endpush

@section('content')
    <div class="alert {{ $siteRequiredDefault ? 'alert-info' : 'alert-warning' }} d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
            <strong>Default scan lokasi:</strong>
            {{ $siteRequiredDefault ? 'Wajib. User tanpa default lokasi aktif atau override harian akan ditolak submit presensi.' : 'Tidak wajib. Lokasi tetap bisa diatur per user/default atau override harian.' }}
        </div>
        <a class="btn btn-sm btn-outline-primary" href="{{ route('attendance_mobile_notification_settings.index') }}">
            Atur di Mobile Setting
        </a>
    </div>

    <div class="card">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <strong>Karyawan Belum Punya Default Lokasi</strong>
                <div class="text-muted small">Set default sekali per karyawan mulai tanggal A sampai seterusnya. Override harian dipakai hanya jika tanggal tertentu harus pindah lokasi.</div>
            </div>
            <span class="badge bg-info text-dark" id="missingCountBadge">0 belum punya default aktif</span>
        </div>
        <div class="card-body">
            <div class="missing-user-box">
                <div class="row g-2 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label">Mulai Berlaku / Tanggal Referensi</label>
                        <input type="date" id="missingWorkDate" class="form-control" value="{{ now()->format('Y-m-d') }}" />
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Profil Bulan</label>
                        <select id="missingProfilBulan" class="form-select">
                            <option value="">Semua profil / master aktif</option>
                            @foreach (($profilBulans ?? []) as $p)
                                <option value="{{ (int) $p->id }}">{{ $p->code }} - {{ $p->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Filter Area Kerja</label>
                        <select id="missingArea" class="form-select" multiple></select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Cari Karyawan</label>
                        <input type="text" id="missingQ" class="form-control" placeholder="kode / finger / nama" />
                    </div>
                    <div class="col-md-1 d-grid">
                        <button class="btn btn-primary" id="btnLoadMissing"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="row g-2 mt-2 align-items-end">
                    <div class="col-md-9">
                        <label class="form-label">Paste Excel / Bulk Search</label>
                        <textarea id="missingPasteBox" class="form-control" rows="2" placeholder="Tempel kode finger / NIK / nama dari Excel, boleh tab atau baris baru"></textarea>
                    </div>
                    <div class="col-md-3 d-grid gap-2">
                        <button class="btn btn-outline-primary" id="btnPasteSearch">
                            <i class="fas fa-bullseye me-1"></i>Cari & Centang
                        </button>
                        <button class="btn btn-outline-secondary" id="btnPasteClear">
                            <i class="fas fa-eraser me-1"></i>Bersihkan
                        </button>
                    </div>
                </div>
                <div class="mt-2 d-flex flex-wrap gap-2">
                    <button class="btn btn-outline-info btn-sm" id="btnSelectMissingByArea">
                        <i class="fas fa-tags me-1"></i>Centang Area Terpilih
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="btnImportDefaultFromLastOverride">
                        <i class="fas fa-history me-1"></i>Ambil Default dari Override Terakhir
                    </button>
                    <button class="btn btn-outline-primary btn-sm" id="btnAssignMissingSelected">
                        <i class="fas fa-check-square me-1"></i>Set Default Terpilih
                    </button>
                    <button class="btn btn-outline-success btn-sm" id="btnAssignMissingAll">
                        <i class="fas fa-users me-1"></i>Set Default Semua Hasil
                    </button>
                    <button class="btn btn-warning btn-sm" id="btnGenerateLoginSelected">
                        <i class="fas fa-user-plus me-1"></i>Generate Login Terpilih
                    </button>
                    <button class="btn btn-dark btn-sm" id="btnGenerateLoginAll">
                        <i class="fas fa-users-cog me-1"></i>Generate Login Semua Hasil
                    </button>
                    <button class="btn btn-outline-danger btn-sm" id="btnBulkAnywhereAll">
                        <i class="fas fa-map-marker-alt me-1"></i>Bebas Area Semua Filter
                    </button>
                    <button class="btn btn-outline-danger btn-sm" id="btnBulkAnywhereMissingSelected">
                        <i class="fas fa-user-check me-1"></i>Bebas Radius Terpilih
                    </button>
                    <div class="form-check form-switch align-self-center ms-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="toggleAnywhereAll">
                        <label class="form-check-label small fw-semibold" for="toggleAnywhereAll">
                            Toggle Bebas Radius
                        </label>
                    </div>
                    <span class="text-muted small align-self-center">Default berlaku mulai tanggal di atas sampai seterusnya. Tabel bawah dipakai untuk override tanggal khusus X-Y.</span>
                </div>
                <div class="missing-user-table mt-2">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:36px;"><input type="checkbox" id="missingCheckAll"></th>
                                <th style="width:160px;">Kode / Finger</th>
                                <th>Nama</th>
                                <th style="width:170px;">Login</th>
                                <th style="width:300px;">Jabatan</th>
                                <th style="width:260px;">Area Kerja</th>
                            </tr>
                        </thead>
                        <tbody id="missingUserBody">
                            <tr><td colspan="6" class="text-muted text-center py-3">Klik Tampilkan untuk cek user yang belum punya default aktif pada tanggal referensi.</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label">Dari Tanggal</label>
                    <input type="date" id="filterDateFrom" class="form-control" value="{{ now()->startOfMonth()->format('Y-m-d') }}" />
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sampai Tanggal</label>
                    <input type="date" id="filterDateTo" class="form-control" value="{{ now()->endOfMonth()->format('Y-m-d') }}" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Search Karyawan</label>
                    <input type="text" id="filterQ" class="form-control" placeholder="kode / nama" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">Filter Lokasi</label>
                    <select id="filterSite" class="form-select"></select>
                </div>
                <div class="col-md-2 text-end">
                    <button class="btn btn-primary" id="btnFilter"><i class="fas fa-filter me-1"></i>Tampilkan</button>
                    <button class="btn btn-outline-primary" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
                </div>
            </div>
            <div class="mt-2 d-flex gap-2 flex-wrap">
                <a class="btn btn-outline-success btn-sm" href="{{ route('attendance_site_assignments.template') }}"><i class="fas fa-file-excel me-1"></i>Template Excel</a>
                <button class="btn btn-outline-success btn-sm" id="btnExportExisting"><i class="fas fa-file-export me-1"></i>Export Existing</button>
                <button class="btn btn-outline-primary btn-sm" id="btnOpenImport"><i class="fas fa-file-import me-1"></i>Import Excel</button>
                <button class="btn btn-outline-warning btn-sm" id="btnBulkUpdateDefaults"><i class="fas fa-edit me-1"></i>Bulk Update Default Terpilih</button>
                <button class="btn btn-outline-danger btn-sm" id="btnBulkAnywhereTableSelected"><i class="fas fa-map-marker-alt me-1"></i>Bebas Radius Terpilih</button>
                <button class="btn btn-danger btn-sm" id="btnResetPasswordSelected"><i class="fas fa-key me-1"></i>Reset Password Default Terpilih</button>
            </div>
            <div class="row g-2 mt-2 align-items-end">
                <div class="col-md-9">
                    <label class="form-label">Paste Excel / Search Tabel</label>
                    <textarea id="tablePasteBox" class="form-control" rows="2" placeholder="Tempel kode finger / NIK / nama dari Excel, boleh tab atau baris baru"></textarea>
                </div>
                <div class="col-md-3 d-grid gap-2">
                    <button class="btn btn-outline-primary" id="btnTablePasteSearch"><i class="fas fa-search me-1"></i>Cari di Tabel</button>
                    <button class="btn btn-outline-secondary" id="btnTablePasteClear"><i class="fas fa-eraser me-1"></i>Reset Filter</button>
                </div>
            </div>

            <div class="mt-3 table-responsive">
                <table class="table table-striped table-bordered align-middle" id="tblAssign" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width:36px;"><input type="checkbox" id="tableCheckAll"></th>
                            <th style="width:60px;">No</th>
                            <th style="width:120px;">Tanggal</th>
                            <th style="width:150px;">Mode</th>
                            <th>Karyawan</th>
                            <th style="width:170px;">Login</th>
                            <th style="width:260px;">Lokasi (Allowed)</th>
                            <th>Catatan</th>
                            <th style="width:120px;">Aktif</th>
                            <th style="width:160px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignModalTitle">Tambah Penugasan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="assignId" />
                    <input type="hidden" id="assignRowType" value="override" />
                    <div class="row g-2">
                        <div class="col-12" id="assignModeWrap">
                            <div class="form-check form-switch border rounded bg-light p-2 ps-5">
                                <input class="form-check-input" type="checkbox" role="switch" id="assignForever">
                                <label class="form-check-label fw-semibold" for="assignForever">Selalu berlaku mulai tanggal ini</label>
                                <div class="text-muted small">Aktifkan ini jika lokasi menjadi default karyawan sampai diubah lagi. Nonaktifkan untuk override tanggal khusus X-Y.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Karyawan</label>
                            <select id="assignKaryawan" class="form-select"></select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" id="assignWorkDateLabel">Dari Tanggal</label>
                            <input type="date" id="assignWorkDate" class="form-control" />
                        </div>
                        <div class="col-md-3" id="assignWorkDateEndWrap">
                            <label class="form-label">Sampai Tanggal</label>
                            <input type="date" id="assignWorkDateEnd" class="form-control" />
                        </div>
                        <div class="col-md-3" id="assignActiveWrap">
                            <label class="form-label">Aktif</label>
                            <select id="assignActive" class="form-select">
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch border rounded bg-light p-2 ps-5">
                                <input class="form-check-input" type="checkbox" role="switch" id="assignAnywhere">
                                <label class="form-check-label fw-semibold" for="assignAnywhere">Bebas area / anywhere</label>
                                <div class="text-muted small">Untuk event, dinas luar, atau tanggal tertentu tanpa wajib radius lokasi.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Site Code (Single)</label>
                            <select id="assignSiteSingle" class="form-select"></select>
                        <div class="text-muted small mt-1">Isi ini untuk 1 lokasi wajib. Jika butuh beberapa lokasi, gunakan Allowed Sites. Gunakan kode <b>DINAS</b> untuk tugas dinas luar (bebas lokasi).</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Allowed Sites (Multi)</label>
                            <select id="assignSiteMulti" class="form-select" multiple></select>
                            <div class="text-muted small mt-1">Jika diisi, user boleh check-in/out di salah satu lokasi yang dipilih.</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Catatan</label>
                            <textarea id="assignNotes" class="form-control" rows="2" placeholder="opsional"></textarea>
                        </div>
                        <div class="col-12">
                            <div class="alert alert-info mb-0" id="assignModeInfo">
                                Override harian bisa diisi rentang tanggal X-Y. Sistem akan menolak check-in/out bila pada tanggal itu GPS berada di luar radius lokasi yang di-assign.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnSave">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulkAssignModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Set Default Lokasi Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="bulkAssignScope" value="selected" />
                    <input type="hidden" id="bulkAssignSource" value="missing" />
                    <div class="alert alert-info small mb-3" id="bulkAssignInfo">
                        Pilih default lokasi untuk karyawan terpilih.
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Area kerja diproses</label>
                        <div class="form-control-plaintext fw-semibold" id="bulkAssignAreaLabel">-</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Lokasi Assign</label>
                        <select id="bulkAssignSites" class="form-select" multiple></select>
                        <div class="text-muted small mt-1">Bisa pilih lebih dari satu lokasi. Default ini berlaku mulai tanggal referensi di halaman utama sampai diubah lagi, lalu override harian dipakai hanya untuk tanggal khusus.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Mulai Berlaku</label>
                        <input type="date" id="bulkAssignWorkDate" class="form-control" />
                        <div class="text-muted small mt-1">Kosongkan bila ingin memakai tanggal referensi dari panel atas.</div>
                    </div>
                    <div class="border rounded p-2">
                        <label class="d-block mb-2">
                            <input type="radio" name="bulkAssignMode" value="single" checked>
                            <strong>Single Lokasi</strong>
                            <span class="text-muted small d-block ms-3">Simpan satu lokasi utama. Jika beberapa lokasi dipilih, yang dipakai lokasi pertama.</span>
                        </label>
                        <label class="d-block mb-0">
                            <input type="radio" name="bulkAssignMode" value="multi">
                            <strong>Multi Lokasi</strong>
                            <span class="text-muted small d-block ms-3">User boleh scan di salah satu lokasi default yang dipilih.</span>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnConfirmBulkAssign">Simpan Default</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Site Assignment (XLSX)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2 small text-muted">
                        Kolom wajib: <code>work_date</code>, <code>employee_code</code>.<br>
                        Kolom lokasi: <code>site_code</code> atau <code>allowed_site_codes</code> (pisah koma). Gunakan <code>DINAS</code> untuk tugas dinas luar (bebas lokasi).<br>
                        Jika pilih profil bulan, hanya karyawan di profil tersebut yang diimport.
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Profil Bulan (opsional)</label>
                        <select id="importProfilBulan" class="form-select">
                            <option value="">- Semua Profil -</option>
                            @foreach (($profilBulans ?? []) as $p)
                                <option value="{{ (int) $p->id }}">{{ $p->code }} - {{ $p->name }}</option>
                            @endforeach
                        </select>
                        <div class="text-muted small mt-1">Jika profil belum ada (profil baru), sistem akan memberi notifikasi.</div>
                    </div>
                    <div>
                        <label class="form-label">File Excel</label>
                        <input type="file" class="form-control" id="importFile" accept=".xlsx,.xls" />
                    </div>
                    <div class="mt-3" id="previewSection" style="display:none;">
                        <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
                            <span class="badge bg-primary" id="previewTotal">Total: 0</span>
                            <span class="badge bg-success" id="previewValid">Valid: 0</span>
                            <span class="badge bg-secondary" id="previewSkipped">Skipped: 0</span>
                            <span class="badge bg-danger" id="previewInvalid">Invalid: 0</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle">
                                <thead>
                                    <tr>
                                        <th>Row</th>
                                        <th>Tanggal</th>
                                        <th>Employee</th>
                                        <th>Site</th>
                                        <th>Allowed</th>
                                        <th>Aktif</th>
                                        <th>Status</th>
                                        <th>Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="previewBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-outline-primary" id="btnPreviewImport">Preview</button>
                    <button type="button" class="btn btn-primary" id="btnConfirmImport" disabled>Simpan Import</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        const csrfToken = '{{ csrf_token() }}';
        const modal = new bootstrap.Modal(document.getElementById('assignModal'));
        const bulkAssignModal = new bootstrap.Modal(document.getElementById('bulkAssignModal'));
        const importModal = new bootstrap.Modal(document.getElementById('importModal'));
        let table = null;
        let rows = [];
        let missingRows = [];
        let importPreviewId = '';
        let lastMissingCheckIndex = null;
        let lastTableDefaultCheckIndex = null;

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

        function todayYmd(){
            const now = new Date();
            now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
            return now.toISOString().slice(0, 10);
        }

        function initSelect2(){
            $('#filterSite').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: 'Semua',
                ajax: {
                    url: '{{ route('attendance_site_assignments.refs.sites') }}',
                    dataType: 'json',
                    delay: 250,
                    data: (params) => ({ q: params.term || '' }),
                    processResults: (data) => data,
                    cache: true
                }
            });

            $('#assignKaryawan').select2({
                theme: 'bootstrap-5',
                dropdownParent: $('#assignModal'),
                ajax: {
                    url: '{{ route('attendance_site_assignments.refs.karyawans') }}',
                    dataType: 'json',
                    delay: 250,
                    data: (params) => ({ q: params.term || '' }),
                    processResults: (data) => data,
                    cache: true
                }
            });

            const siteAjax = {
                url: '{{ route('attendance_site_assignments.refs.sites') }}',
                dataType: 'json',
                delay: 250,
                data: (params) => ({ q: params.term || '' }),
                processResults: (data) => data,
                cache: true
            };

            $('#assignSiteSingle').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: 'Pilih site',
                dropdownParent: $('#assignModal'),
                ajax: siteAjax
            });

            $('#assignSiteMulti').select2({
                theme: 'bootstrap-5',
                placeholder: 'Pilih site (bisa lebih dari 1)',
                dropdownParent: $('#assignModal'),
                ajax: siteAjax
            });

            $('#bulkAssignSites').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: 'Pilih lokasi',
                dropdownParent: $('#bulkAssignModal'),
                closeOnSelect: false,
                ajax: siteAjax
            });

            $('#missingArea').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: 'Pilih area kerja dari master karyawan',
                closeOnSelect: false,
                ajax: {
                    url: '{{ route('attendance_site_assignments.refs.areas') }}',
                    dataType: 'json',
                    delay: 250,
                    data: (params) => ({ q: params.term || '' }),
                    processResults: (data) => data,
                    cache: true
                }
            });
        }

        function pillHtml(labels){
            if(!labels || !Array.isArray(labels) || labels.length===0) return '-';
            return labels.map(item => {
                const code = typeof item === 'object' ? String(item.code || '') : String(item || '');
                const name = typeof item === 'object' ? String(item.name || code) : code;
                const label = name !== code ? `${code} - ${name}` : code;
                return `<span class="site-pill">${escapeHtml(label)}</span>`;
            }).join('');
        }

        function normalizePasteTokens(raw){
            const value = String(raw || '').trim();
            const hasListSeparator = /[,;\t\r\n]/.test(value);
            const looksLikeCodeList = /^[A-Za-z0-9_\-.,;\s\t\r\n]+$/.test(value)
                && /\s+/.test(value)
                && !/[A-Za-z]+\s+[A-Za-z]+/.test(value);
            const parts = (hasListSeparator || looksLikeCodeList)
                ? value.split(/[\s,;]+/)
                : [value];
            return parts
                .map(item => item.replace(/\s+/g, ' ').trim())
                .filter(Boolean)
                .map(item => item.toLowerCase());
        }

        function escapeRegex(value){
            return String(value || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }

        function tablePasteSearch(){
            const tokens = normalizePasteTokens($('#tablePasteBox').val());
            if (!tokens.length) {
                Swal.fire('Warning', 'Tempel data dulu.', 'warning');
                return;
            }
            const pattern = tokens.map(escapeRegex).join('|');
            table.search(pattern, true, false).draw();
        }

        function tableSearchFromRaw(raw){
            const tokens = normalizePasteTokens(raw);
            if (tokens.length <= 1) {
                table.search(String(raw || '')).draw();
                return;
            }
            const pattern = tokens.map(escapeRegex).join('|');
            table.search(pattern, true, false).draw();
        }

        function bindCommaSearch(){
            const filterInput = $('#tblAssign_filter input');
            filterInput.attr('placeholder', 'Search: 411, 412, nama');
            filterInput.off('.DT');
            filterInput.off('input keyup search paste cut');
            filterInput.on('input keyup search paste cut', function(){
                const input = this;
                setTimeout(function(){ tableSearchFromRaw(input.value); }, 0);
            });
        }

        function tablePasteClear(){
            $('#tablePasteBox').val('');
            table.search('').draw();
            $('#tblAssign_filter input').val('');
        }

        function matchMissingRowByToken(row, token){
            const haystack = [row.employee_code, row.finger_id, row.full_name, row.login_username]
                .map(v => String(v || '').toLowerCase())
                .join(' ');
            return haystack.includes(token);
        }

        function pasteSearchMissingUsers(){
            const tokens = normalizePasteTokens($('#missingPasteBox').val());
            if (!tokens.length) {
                Swal.fire('Warning', 'Tempel data dulu.', 'warning');
                return;
            }
            $('#missingUserBody .missing-user-check').prop('checked', false);
            const matchedIds = new Set();
            missingRows.forEach((row) => {
                const hit = tokens.some((token) => matchMissingRowByToken(row, token));
                if (hit) matchedIds.add(Number(row.id));
            });
            $('#missingUserBody .missing-user-check').each(function(){
                const id = Number($(this).val() || 0);
                $(this).prop('checked', matchedIds.has(id));
            });
            syncMissingCheckAll();
            if (!matchedIds.size) {
                Swal.fire('Info', 'Tidak ada hasil yang cocok pada data yang sedang tampil.', 'info');
            }
        }

        function loadData(){
            const params = new URLSearchParams({
                date_from: $('#filterDateFrom').val() || '',
                date_to: $('#filterDateTo').val() || '',
                q: $('#filterQ').val() || '',
                site_code: ($('#filterSite').val() || '').toString()
            });
            $.get(`{{ route('attendance_site_assignments.data') }}?${params.toString()}`)
                .done(resp => {
                    rows = resp.data || [];
                    $('#tableCheckAll').prop('checked', false);
                    lastTableDefaultCheckIndex = null;
                    table.clear().rows.add(rows).draw();
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data', 'error'));
        }

        function renderMissingUsers(){
            $('#missingCountBadge').text(`${missingRows.length} belum punya default aktif`);
            $('#missingCheckAll').prop('checked', false);
            lastMissingCheckIndex = null;
            if (!missingRows.length) {
                $('#missingUserBody').html('<tr><td colspan="6" class="text-muted text-center py-3">Semua user pada filter ini sudah punya default aktif untuk tanggal referensi.</td></tr>');
                return;
            }
            $('#missingUserBody').html(missingRows.map(row => `
                <tr>
                    <td><input type="checkbox" class="missing-user-check" value="${Number(row.id)}" data-area-key="${escapeHtml(row.area_key || '')}"></td>
                    <td>
                        <div><strong>${escapeHtml(row.employee_code || '-')}</strong></div>
                        <div class="text-muted small">Finger: ${escapeHtml(row.finger_id || '-')}</div>
                    </td>
                    <td>${escapeHtml(row.full_name || '-')}</td>
                    <td>
                        ${Number(row.login_user_id || 0) > 0
                            ? `<span class="badge bg-success">Sudah Login</span><div class="small text-muted">${escapeHtml(row.login_username || '-')}</div>`
                            : '<span class="badge bg-danger">Belum Generate</span>'}
                    </td>
                    <td>${escapeHtml(row.jabatan || '-')}</td>
                    <td>${escapeHtml(row.area || '-')}</td>
                </tr>
            `).join(''));
        }

        function loadMissingUsers(afterLoad){
            const params = new URLSearchParams({
                work_date: $('#missingWorkDate').val() || '',
                profil_bulan_id: $('#missingProfilBulan').val() || '',
                q: $('#missingQ').val() || '',
            });
            ($('#missingArea').val() || []).forEach((areaKey) => params.append('area_filters[]', areaKey));
            $('#missingUserBody').html('<tr><td colspan="6" class="text-muted text-center py-3">Memuat data...</td></tr>');
            $.get(`{{ route('attendance_site_assignments.missing_users') }}?${params.toString()}`)
                .done(resp => {
                    missingRows = resp.data || [];
                    renderMissingUsers();
                    if (typeof afterLoad === 'function') {
                        afterLoad();
                    }
                })
                .fail(xhr => {
                    missingRows = [];
                    renderMissingUsers();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load user tanpa default aktif', 'error');
                });
        }

        function assignMissingUsers(scope){
            const workDate = $('#missingWorkDate').val() || '';
            const selectedIds = $('#missingUserBody .missing-user-check:checked').map(function(){ return Number($(this).val()); }).get();
            if (!workDate) {
                Swal.fire('Warning', 'Tanggal wajib diisi.', 'warning');
                return;
            }
            if (scope === 'selected' && selectedIds.length === 0) {
                Swal.fire('Warning', 'Centang minimal 1 karyawan.', 'warning');
                return;
            }
            if (scope === 'all' && missingRows.length === 0) {
                Swal.fire('Warning', 'Tidak ada karyawan pada hasil filter saat ini.', 'warning');
                return;
            }

            const label = scope === 'all'
                ? `semua hasil filter (${missingRows.length} tampil)`
                : `${selectedIds.length} karyawan terpilih`;
            const areaLabels = ($('#missingArea').select2('data') || []).map(item => item.text).filter(Boolean);
            $('#bulkAssignScope').val(scope);
            $('#bulkAssignSource').val('missing');
            $('#bulkAssignWorkDate').val(workDate || $('#missingWorkDate').val() || '');
            $('#bulkAssignInfo').html(`Target <strong>${escapeHtml(label)}</strong>. Default lokasi yang dipilih akan berlaku mulai <strong>${escapeHtml(workDate)}</strong> sampai diubah lagi.`);
            $('#bulkAssignAreaLabel').text(areaLabels.length ? areaLabels.join(', ') : 'Semua area pada hasil filter');
            $('#bulkAssignSites').val(null).trigger('change');
            $('input[name="bulkAssignMode"][value="single"]').prop('checked', true);
            bulkAssignModal.show();
        }

        function generatePekerjaLogin(scope){
            const workDate = $('#missingWorkDate').val() || '';
            const selectedIds = $('#missingUserBody .missing-user-check:checked').map(function(){ return Number($(this).val()); }).get();
            if (!workDate) {
                Swal.fire('Warning', 'Tanggal wajib diisi.', 'warning');
                return;
            }
            if (scope === 'selected' && selectedIds.length === 0) {
                Swal.fire('Warning', 'Centang minimal 1 karyawan.', 'warning');
                return;
            }
            if (scope === 'all' && missingRows.length === 0) {
                Swal.fire('Warning', 'Tidak ada karyawan pada hasil filter saat ini.', 'warning');
                return;
            }

            const targetLabel = scope === 'all'
                ? `semua hasil filter (${missingRows.length} tampil)`
                : `${selectedIds.length} karyawan terpilih`;

            Swal.fire({
                title: 'Generate login Profil Pekerja',
                html: `<div class="text-start small mb-2">Target: <strong>${escapeHtml(targetLabel)}</strong></div>
                    <label class="form-label w-100 text-start">Password awal</label>
                    <input type="text" id="swalDefaultPassword" class="form-control" value="123456">`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Generate',
                preConfirm: () => {
                    const password = ($('#swalDefaultPassword').val() || '').toString();
                    if (password.length < 6) {
                        Swal.showValidationMessage('Password minimal 6 karakter.');
                        return false;
                    }
                    return password;
                }
            }).then(res => {
                if (!res.isConfirmed) return;
                const params = {
                    work_date: workDate,
                    scope,
                    karyawan_ids: selectedIds,
                    q: $('#missingQ').val() || '',
                    profil_bulan_id: $('#missingProfilBulan').val() || '',
                    default_password: res.value,
                };
                ($('#missingArea').val() || []).forEach((areaKey, index) => {
                    params[`area_filters[${index}]`] = areaKey;
                });
                $.post(`{{ route('attendance_site_assignments.missing_users.generate_pekerja_login') }}`, params)
                    .done(resp => {
                        loadMissingUsers();
                        Swal.fire('Success', `${resp.message || 'Generate selesai'}<br>Created: ${resp.created || 0}, Updated: ${resp.updated || 0}, Skipped: ${resp.skipped || 0}`, 'success');
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Generate login gagal', 'error'));
            });
        }

        function generateDefaultLogin(karyawanId, employeeCode){
            const workDate = $('#dateFrom').val() || $('#missingWorkDate').val() || new Date().toISOString().slice(0, 10);
            Swal.fire({
                title: 'Generate login default?',
                html: `<div class="small">Karyawan: <strong>${escapeHtml(employeeCode || '-')}</strong><br>Password awal: <strong>123456</strong></div>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Generate',
                cancelButtonText: 'Batal'
            }).then(result => {
                if (!result.isConfirmed) return;
                $.post(`{{ route('attendance_site_assignments.missing_users.generate_pekerja_login') }}`, {
                    work_date: workDate,
                    scope: 'selected',
                    karyawan_ids: [Number(karyawanId)],
                    default_password: '123456'
                }).done(resp => {
                    loadData();
                    Swal.fire('Berhasil', resp.message || 'Login berhasil dibuat.', 'success');
                }).fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Generate login gagal.', 'error'));
            });
        }
        function openBulkUpdateDefaults(){
            const selectedDefaultIds = $('#tblAssign .table-default-check:checked').map(function(){
                return Number($(this).val());
            }).get();

            if (!selectedDefaultIds.length) {
                Swal.fire('Warning', 'Centang minimal 1 row default lokasi di tabel bawah.', 'warning');
                return;
            }

            $('#bulkAssignScope').val('selected');
            $('#bulkAssignSource').val('table-defaults');
            $('#bulkAssignWorkDate').val($('#missingWorkDate').val() || '');
            $('#bulkAssignInfo').html(`Target <strong>${selectedDefaultIds.length} default karyawan</strong>. Lokasi default baru akan menggantikan setting sebelumnya mulai <strong>${escapeHtml($('#missingWorkDate').val() || '-')}</strong>.`);
            $('#bulkAssignAreaLabel').text('Default existing dari tabel bawah');
            $('#bulkAssignSites').val(null).trigger('change');
            $('input[name="bulkAssignMode"][value="single"]').prop('checked', true);
            bulkAssignModal.show();
        }

        function resetSelectedPasswords(){
            const selectedDefaultIds = $('#tblAssign .table-default-check:checked').map(function(){
                return Number($(this).val());
            }).get();
            if (!selectedDefaultIds.length) {
                Swal.fire('Warning', 'Centang minimal 1 row default lokasi di tabel bawah.', 'warning');
                return;
            }
            Swal.fire({
                title: `Reset password ${selectedDefaultIds.length} user?`,
                html: 'Password default akan menjadi <strong>12345678</strong>.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Reset Password'
            }).then(res => {
                if (!res.isConfirmed) return;
                $.post(`{{ route('attendance_site_assignments.reset_pekerja_password') }}`, { karyawan_ids: selectedDefaultIds })
                    .done(resp => {
                        loadData();
                        Swal.fire('Success', `${resp.message || 'Reset selesai'}<br>Updated: ${resp.updated || 0}, Belum ada login: ${resp.missing || 0}`, 'success');
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Reset password gagal', 'error'));
            });
        }

        function executeBulkAssign(){
            const scope = $('#bulkAssignScope').val() || 'selected';
            const source = $('#bulkAssignSource').val() || 'missing';
            const siteCodes = normalizeCodeArray($('#bulkAssignSites').val());
            const workDate = $('#bulkAssignWorkDate').val() || $('#missingWorkDate').val() || '';
            const selectedIds = source === 'table-defaults'
                ? $('#tblAssign .table-default-check:checked').map(function(){ return Number($(this).val()); }).get()
                : $('#missingUserBody .missing-user-check:checked').map(function(){ return Number($(this).val()); }).get();
            const assignMode = $('input[name="bulkAssignMode"]:checked').val() || (siteCodes.length > 1 ? 'multi' : 'single');

            if (!siteCodes.length) {
                Swal.fire('Warning', 'Pilih minimal 1 lokasi untuk set default.', 'warning');
                return;
            }
            if (source === 'table-defaults' && selectedIds.length === 0) {
                Swal.fire('Warning', 'Centang minimal 1 row default lokasi di tabel bawah.', 'warning');
                return;
            }

            $.ajax({
                url: '{{ route('attendance_site_assignments.missing_users.bulk_assign') }}',
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken },
                data: {
                    work_date: workDate,
                    site_codes: siteCodes,
                    assign_mode: assignMode,
                    scope,
                    karyawan_ids: selectedIds,
                    profil_bulan_id: $('#missingProfilBulan').val() || '',
                    area_filters: $('#missingArea').val() || [],
                    q: $('#missingQ').val() || '',
                }
            }).done(resp => {
                const data = resp.data || {};
                bulkAssignModal.hide();
                Swal.fire('Success', `${resp.message || 'Selesai'} Created: ${data.created || 0}, Updated: ${data.updated || 0}`, 'success');
                loadMissingUsers();
                loadData();
            }).fail(xhr => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Set default lokasi gagal', 'error');
            });
        }

        function bulkAnywhereAll(){
            const workDate = $('#missingWorkDate').val() || '';
            const areaLabels = ($('#missingArea').select2('data') || []).map(item => item.text).filter(Boolean);
            const targetLabel = areaLabels.length ? areaLabels.join(', ') : 'semua karyawan aktif sesuai filter';
            if (!workDate) {
                Swal.fire('Warning', 'Tanggal referensi wajib diisi.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Bebaskan area massal?',
                html: `Akan membuat override <strong>ANYWHERE</strong> tanggal <strong>${escapeHtml(workDate)}</strong> untuk <strong>${escapeHtml(targetLabel)}</strong>. Setelah tanggal lewat, otomatis kembali ke default area lama.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, proses',
                cancelButtonText: 'Batal'
            }).then(res => {
                if(!res.isConfirmed) return;
                $.ajax({
                    url: '{{ route('attendance_site_assignments.bulk_anywhere') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: {
                        work_date: workDate,
                        work_date_end: workDate,
                        scope: 'all',
                        profil_bulan_id: $('#missingProfilBulan').val() || '',
                        area_filters: $('#missingArea').val() || [],
                        q: $('#missingQ').val() || '',
                    }
                }).done(resp => {
                    const data = resp.data || {};
                    Swal.fire('Success', `${resp.message || 'Selesai'} Karyawan: ${data.employees || 0}, Created: ${data.created || 0}, Updated: ${data.updated || 0}`, 'success');
                    loadData();
                }).fail(xhr => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Bebas area massal gagal', 'error');
                });
            });
        }

        function bulkAnywhereSelected(source){
            const ids = source === 'table'
                ? $('#tblAssign .table-default-check:checked').map(function(){ return Number($(this).val()); }).get()
                : $('#missingUserBody .missing-user-check:checked').map(function(){ return Number($(this).val()); }).get();
            const defaultFrom = source === 'table'
                ? ($('#filterDateFrom').val() || new Date().toISOString().slice(0, 10))
                : ($('#missingWorkDate').val() || new Date().toISOString().slice(0, 10));
            const defaultTo = source === 'table'
                ? ($('#filterDateTo').val() || defaultFrom)
                : defaultFrom;
            if (!ids.length) {
                Swal.fire('Warning', 'Centang minimal 1 karyawan dulu.', 'warning');
                return;
            }

            Swal.fire({
                title: `Bebas radius ${ids.length} karyawan?`,
                html: `
                    <div class="text-start">
                        <label class="form-label">Dari Tanggal</label>
                        <input type="date" id="swalAnywhereFrom" class="form-control" value="${escapeHtml(defaultFrom)}">
                        <label class="form-label mt-2">Sampai Tanggal</label>
                        <input type="date" id="swalAnywhereTo" class="form-control" value="${escapeHtml(defaultTo)}">
                        <div class="text-muted small mt-2">Kosongkan sampai tanggal jika ingin berlaku seterusnya sebagai default ANYWHERE.</div>
                    </div>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Proses',
                cancelButtonText: 'Batal',
                preConfirm: () => {
                    const from = $('#swalAnywhereFrom').val();
                    const to = $('#swalAnywhereTo').val() || from;
                    if (!from) {
                        Swal.showValidationMessage('Dari tanggal wajib diisi.');
                        return false;
                    }
                    if (to && to < from) {
                        Swal.showValidationMessage('Sampai tanggal tidak boleh lebih kecil.');
                        return false;
                    }
                    return { from, to };
                }
            }).then(res => {
                if (!res.isConfirmed) return;
                const forever = !res.value.to;
                $.ajax({
                    url: forever
                        ? '{{ route('attendance_site_assignments.missing_users.bulk_assign') }}'
                        : '{{ route('attendance_site_assignments.bulk_anywhere') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: forever ? {
                        work_date: res.value.from,
                        scope: 'selected',
                        karyawan_ids: ids,
                        site_codes: ['ANYWHERE'],
                        assign_mode: 'single',
                    } : {
                        work_date: res.value.from,
                        work_date_end: res.value.to,
                        scope: 'selected',
                        karyawan_ids: ids,
                    },
                }).done(resp => {
                    const data = resp.data || {};
                    Swal.fire('Success', `${resp.message || 'Selesai'} Karyawan: ${data.employees || ids.length}, Created: ${data.created || 0}, Updated: ${data.updated || 0}`, 'success');
                    loadMissingUsers();
                    loadData();
                }).fail(xhr => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Bebas radius terpilih gagal', 'error');
                });
            });
        }

        function toggleAnywhereAll(){
            const enabled = $('#toggleAnywhereAll').is(':checked');
            const defaultWorkDate = $('#missingWorkDate').val() || new Date().toISOString().slice(0, 10);
            const areaLabels = ($('#missingArea').select2('data') || []).map(item => item.text).filter(Boolean);
            const targetLabel = areaLabels.length ? areaLabels.join(', ') : 'semua karyawan aktif sesuai filter';

            Swal.fire({
                title: enabled ? 'Aktifkan bebas radius?' : 'Matikan bebas radius?',
                html: enabled
                    ? `Pilih tanggal untuk <strong>${escapeHtml(targetLabel)}</strong>.`
                    : `Override <strong>ANYWHERE</strong> tanggal <strong>${escapeHtml(defaultWorkDate)}</strong> akan dimatikan. Radius/default lokasi aktif kembali.`,
                input: enabled ? 'date' : undefined,
                inputValue: enabled ? defaultWorkDate : undefined,
                inputAttributes: enabled ? { required: 'required' } : undefined,
                icon: enabled ? 'warning' : 'question',
                showCancelButton: true,
                confirmButtonText: enabled ? 'ON, bebaskan' : 'OFF, aktifkan radius',
                cancelButtonText: 'Batal',
                preConfirm: (value) => {
                    if (enabled && !value) {
                        Swal.showValidationMessage('Tanggal wajib dipilih.');
                        return false;
                    }
                    return value || defaultWorkDate;
                }
            }).then(res => {
                if(!res.isConfirmed) {
                    $('#toggleAnywhereAll').prop('checked', !enabled);
                    return;
                }
                const workDate = res.value || defaultWorkDate;
                $('#missingWorkDate').val(workDate);
                $.ajax({
                    url: '{{ route('attendance_site_assignments.bulk_anywhere_toggle') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: {
                        enabled: enabled ? 1 : 0,
                        work_date: workDate,
                        work_date_end: workDate,
                        scope: 'all',
                        profil_bulan_id: $('#missingProfilBulan').val() || '',
                        area_filters: $('#missingArea').val() || [],
                        q: $('#missingQ').val() || '',
                    }
                }).done(resp => {
                    const data = resp.data || {};
                    Swal.fire('Success', `${resp.message || 'Selesai'} Karyawan: ${data.employees || 0}, Updated: ${data.updated || 0}`, 'success');
                    loadData();
                }).fail(xhr => {
                    $('#toggleAnywhereAll').prop('checked', !enabled);
                    Swal.fire('Error', xhr.responseJSON?.message || 'Toggle bebas radius gagal', 'error');
                });
            });
        }

        function markMissingRowsBySelectedArea(){
            const selectedAreas = ($('#missingArea').val() || []).map(v => String(v));
            if (!selectedAreas.length) {
                $('#missingUserBody .missing-user-check').prop('checked', true);
                syncMissingCheckAll();
                return $('#missingUserBody .missing-user-check:checked').length;
            }

            let checked = 0;
            $('#missingUserBody .missing-user-check').each(function(){
                const areaKey = String($(this).data('area-key') || '');
                const match = selectedAreas.includes(areaKey);
                $(this).prop('checked', match);
                if (match) checked++;
            });
            syncMissingCheckAll();
            return checked;
        }

        function syncMissingCheckAll(){
            const $checks = $('#missingUserBody .missing-user-check');
            const total = $checks.length;
            const checked = $checks.filter(':checked').length;
            $('#missingCheckAll').prop('checked', total > 0 && checked === total);
        }

        function syncTableCheckAll(){
            const $checks = $('#tblAssign .table-default-check');
            const total = $checks.length;
            const checked = $checks.filter(':checked').length;
            $('#tableCheckAll').prop('checked', total > 0 && checked === total);
        }

        function applyRangeSelection($checks, fromIndex, toIndex, targetState){
            const start = Math.min(fromIndex, toIndex);
            const end = Math.max(fromIndex, toIndex);
            $checks.slice(start, end + 1).prop('checked', targetState);
        }

        function handleRangeClick($checks, currentEl, lastIndex, event){
            const currentIndex = $checks.index(currentEl);
            if (currentIndex < 0) {
                return currentIndex;
            }

            if (event.shiftKey && lastIndex !== null && lastIndex >= 0) {
                applyRangeSelection($checks, lastIndex, currentIndex, $(currentEl).is(':checked'));
            }

            return currentIndex;
        }

        function selectMissingByArea(){
            const selectedAreas = ($('#missingArea').val() || []).map(v => String(v));
            if (!selectedAreas.length) {
                markMissingRowsBySelectedArea();
                Swal.fire('Info', 'Tidak ada filter area dipilih, jadi semua row yang tampil dicentang.', 'info');
                return;
            }

            const checked = markMissingRowsBySelectedArea();
            if (checked === 0) {
                loadMissingUsers(function(){
                    const rechecked = markMissingRowsBySelectedArea();
                    if (rechecked === 0) {
                Swal.fire('Info', 'Tidak ada karyawan tanpa default lokasi pada area terpilih.', 'info');
                    }
                });
            }
        }

        function importDefaultsFromLastOverride(){
            Swal.fire({
                title: 'Ambil Default dari Override Terakhir?',
                html: 'Sistem akan mencari <b>override harian aktif terakhir</b> per karyawan, lalu mengisinya menjadi <b>default lokasi</b>.<br><br><b>Default yang sudah terisi tidak akan ditimpa.</b>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Ambil',
                cancelButtonText: 'Batal'
            }).then(result => {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Memproses...',
                    text: 'Mengambil default dari override terakhir.',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: '{{ route('attendance_site_assignments.defaults.import_last_overrides') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { overwrite_existing: 0 }
                })
                .done(resp => {
                    const data = resp.data || {};
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        html: `
                            <div class="text-start">
                                <div>${escapeHtml(resp.message || 'Berhasil.')}</div>
                                <hr>
                                <div>Sumber override: <b>${Number(data.source_count || 0)}</b></div>
                                <div>Default terisi: <b>${Number(data.updated || 0)}</b></div>
                                <div>Skip default sudah ada: <b>${Number(data.skipped_existing || 0)}</b></div>
                                <div>Skip source kosong: <b>${Number(data.skipped_empty || 0)}</b></div>
                            </div>
                        `
                    });
                    loadMissingUsers();
                })
                .fail(xhr => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal mengambil default dari override terakhir', 'error');
                });
            });
        }

        function resetModal(){
            $('#assignId').val('');
            $('#assignRowType').val('override');
            $('#assignModalTitle').text('Tambah Penugasan');
            $('#assignForever').prop('checked', false);
            $('#assignModeWrap').show();
            $('#assignWorkDate').val(todayYmd());
            $('#assignWorkDateEnd').val(todayYmd());
            $('#assignActive').val('1');
            $('#assignActive').prop('disabled', false);
            $('#assignAnywhere')
                .prop('checked', false)
                .data('was-checked', false)
                .removeData('before-anywhere');
            $('#assignSiteSingle, #assignSiteMulti').removeData('before-anywhere');
            $('#assignNotes').val('');
            $('#assignKaryawan').val(null).trigger('change');
            $('#assignSiteSingle').val(null).trigger('change');
            $('#assignSiteMulti').val(null).trigger('change');
            toggleAssignMode();
            toggleAnywhereMode();
        }

        function toggleAssignMode(){
            const isDefault = $('#assignForever').is(':checked');
            $('#assignWorkDateLabel').text(isDefault ? 'Mulai Berlaku' : 'Dari Tanggal');
            $('#assignWorkDateEndWrap').toggle(!isDefault);
            $('#assignActiveWrap').toggle(!isDefault);
            $('#assignActive').prop('disabled', isDefault).val('1');
            $('#assignAnywhere').prop('disabled', isDefault);
            if(isDefault && $('#assignAnywhere').is(':checked')){
                $('#assignAnywhere').prop('checked', false);
                toggleAnywhereMode();
            }
            $('#assignModeInfo')
                .toggleClass('alert-success', isDefault)
                .toggleClass('alert-info', !isDefault)
                .html(isDefault
                    ? 'Mode default seterusnya akan mengisi lokasi default di Master Karyawan. Berlaku mulai tanggal ini sampai default lokasi diubah lagi.'
                    : 'Override harian bisa diisi rentang tanggal X-Y. Sistem akan menolak check-in/out bila pada tanggal itu GPS berada di luar radius lokasi yang di-assign.'
                );
        }

        function hasOptionValue($el, value){
            return $el.find('option').filter(function(){
                return String(this.value || '').trim().toUpperCase() === value;
            }).length > 0;
        }

        function fillSelect2($el, id, text){
            const code = String(id || '').trim().toUpperCase();
            if(!code) return;
            const label = text || code;
            let selected = ($el.val() || []);
            if(!Array.isArray(selected)) selected = selected ? [selected] : [];
            if(!hasOptionValue($el, code)){
                $el.append(new Option(label, code, false, false));
            }
            selected = Array.from(new Set(selected.map(v => String(v || '').trim().toUpperCase()).filter(Boolean).concat(code)));
            $el.val($el.prop('multiple') ? selected : code).trigger('change');
        }

        function isAnywhereCode(code){
            return ['ANYWHERE', 'OFFSITE', 'MOBILE', 'DINAS', 'DL'].includes(String(code || '').trim().toUpperCase());
        }

        function normalizeCodeArray(values){
            return Array.from(new Set((values || []).map(v => String(v || '').trim().toUpperCase()).filter(Boolean)));
        }

        function normalizeSelectValues($el, values){
            const unique = normalizeCodeArray(values);
            unique.forEach(code => {
                if(!hasOptionValue($el, code)){
                    $el.append(new Option(code, code, false, false));
                }
            });
            $el.val($el.prop('multiple') ? unique : (unique[0] || null)).trigger('change.select2');
            return unique;
        }

        function normalizeSiteSelections(){
            if($('#assignAnywhere').is(':checked')){
                return { single: 'ANYWHERE', multi: ['ANYWHERE'] };
            }
            const single = normalizeSelectValues($('#assignSiteSingle'), [$('#assignSiteSingle').val()])[0] || '';
            const multi = normalizeSelectValues($('#assignSiteMulti'), $('#assignSiteMulti').val())
                .filter(code => code !== single && !isAnywhereCode(code));
            normalizeSelectValues($('#assignSiteMulti'), multi);
            return { single, multi };
        }

        function selectedSiteSnapshot(){
            return {
                single: ($('#assignSiteSingle').select2('data') || []).filter(item => !isAnywhereCode(item.id)),
                multi: ($('#assignSiteMulti').select2('data') || []).filter(item => !isAnywhereCode(item.id))
            };
        }

        function restoreSiteSnapshot(snapshot){
            (snapshot.single || []).forEach(item => fillSelect2($('#assignSiteSingle'), item.id, item.text));
            (snapshot.multi || []).forEach(item => fillSelect2($('#assignSiteMulti'), item.id, item.text));
        }

        function toggleAnywhereMode(){
            const checked = $('#assignAnywhere').is(':checked');
            const wasChecked = $('#assignAnywhere').data('was-checked') === true;
            if(checked){
                if(!wasChecked){
                    const before = selectedSiteSnapshot();
                    $('#assignSiteSingle').data('before-anywhere', before.single);
                    $('#assignSiteMulti').data('before-anywhere', before.multi);
                    $('#assignSiteSingle').val(null).trigger('change');
                    $('#assignSiteMulti').val(null).trigger('change');
                }
            }else{
                let snapshot = {
                    single: $('#assignSiteSingle').data('before-anywhere') || [],
                    multi: $('#assignSiteMulti').data('before-anywhere') || []
                };
                if(snapshot.single.length === 0 && snapshot.multi.length === 0){
                    snapshot = {};
                }
                restoreSiteSnapshot(snapshot);
            }
            $('#assignSiteSingle, #assignSiteMulti').prop('disabled', checked);
            $('#assignAnywhere').data('was-checked', checked);
        }

        function openEdit(id){
            const row = rows.find(r => Number(r.id)===Number(id));
            const rowByStringId = rows.find(r => String(r.id) === String(id));
            const targetRow = row || rowByStringId;
            if(!targetRow) return;
            resetModal();
            $('#assignId').val(targetRow.id);
            $('#assignRowType').val(targetRow.row_type || 'override');
            $('#assignModalTitle').text(targetRow.row_type === 'default' ? 'Edit Default Lokasi' : 'Edit Penugasan');
            $('#assignForever').prop('checked', targetRow.row_type === 'default');
            $('#assignModeWrap').hide();
            $('#assignWorkDate').val(targetRow.work_date || '');
            $('#assignWorkDateEnd').val(targetRow.work_date || '');
            $('#assignActive').val(targetRow.is_active ? '1' : '0');
            $('#assignActive').prop('disabled', targetRow.row_type === 'default');
            $('#assignNotes').val(targetRow.row_type === 'default' ? '' : (targetRow.notes || ''));
            fillSelect2($('#assignKaryawan'), targetRow.karyawan_id, `${targetRow.employee_code || ''} - ${targetRow.full_name || ''}`.trim());
            const codes = [targetRow.site_code].concat(targetRow.allowed_site_codes || []);
            const isAnywhere = codes.some(isAnywhereCode);
            if(targetRow.site_code && !isAnywhereCode(targetRow.site_code)){
                fillSelect2($('#assignSiteSingle'), targetRow.site_code, targetRow.site_code);
            }
            if(targetRow.allowed_site_codes && Array.isArray(targetRow.allowed_site_codes)){
                targetRow.allowed_site_codes.filter(c => !isAnywhereCode(c)).forEach(c => fillSelect2($('#assignSiteMulti'), c, c));
            }
            $('#assignAnywhere').prop('checked', isAnywhere);
            toggleAssignMode();
            toggleAnywhereMode();
            modal.show();
        }

        function save(){
            const id = $('#assignId').val();
            const rowType = $('#assignRowType').val() || 'override';
            const isDefaultMode = rowType === 'default' || (!id && $('#assignForever').is(':checked'));
            const sites = normalizeSiteSelections();
            const payload = {
                karyawan_id: $('#assignKaryawan').val(),
                work_date: $('#assignWorkDate').val() || todayYmd(),
                work_date_end: $('#assignWorkDateEnd').val(),
                site_code: sites.single,
                allowed_site_codes: sites.multi,
                notes: $('#assignNotes').val(),
                is_active: $('#assignActive').val() === '1' ? 1 : 0
            };
            if($('#assignAnywhere').is(':checked')){
                const before = {
                    single: $('#assignSiteSingle').data('before-anywhere') || [],
                    multi: $('#assignSiteMulti').data('before-anywhere') || []
                };
                payload.site_code = 'ANYWHERE';
                payload.allowed_site_codes = ['ANYWHERE'];
            }
            if(!payload.karyawan_id || !payload.work_date){
                Swal.fire('Warning', 'Karyawan dan tanggal mulai wajib diisi', 'warning');
                return;
            }
            if((!payload.site_code || String(payload.site_code).trim()==='') && (!payload.allowed_site_codes || payload.allowed_site_codes.length===0)){
                Swal.fire('Warning', 'Pilih minimal 1 lokasi', 'warning');
                return;
            }

            const url = isDefaultMode
                ? `{{ route('attendance_site_assignments.defaults.store') }}`
                : (id ? `{{ url('/attendance-site-assignments') }}/${id}` : `{{ route('attendance_site_assignments.store') }}`);
            const method = isDefaultMode ? 'POST' : (id ? 'PUT' : 'POST');

            $.ajax({
                url,
                method,
                headers: { 'X-CSRF-TOKEN': csrfToken },
                data: payload
            })
            .done(resp => {
                modal.hide();
                loadData();
                loadMissingUsers();
                Swal.fire('Success', resp.message || 'Saved', 'success');
            })
            .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan', 'error'));
        }

        function destroyRow(id){
            const row = rows.find(r => String(r.id) === String(id));
            const isDefaultRow = String(row?.row_type || '') === 'default';
            Swal.fire({
                title: 'Hapus?',
                text: isDefaultRow
                    ? 'Default lokasi karyawan akan dihapus dari Master Karyawan.'
                    : 'Penugasan lokasi akan dihapus permanen.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Hapus',
                cancelButtonText: 'Batal'
            }).then(res => {
                if(!res.isConfirmed) return;
                $.ajax({
                    url: isDefaultRow
                        ? `{{ url('/attendance-site-assignments/defaults') }}/${row.karyawan_id}`
                        : `{{ url('/attendance-site-assignments') }}/${String(id).replace('override:', '')}`,
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                })
                .done(resp => {
                    loadData();
                    Swal.fire('Deleted', resp.message || 'Deleted', 'success');
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus', 'error'));
            });
        }

        $(function(){
            initSelect2();
            table = $('#tblAssign').DataTable({
                data: [],
                pageLength: 25,
                columns: [
                    { data: null, orderable: false, searchable: false, render: (d)=> d.row_type === 'default'
                        ? `<input type="checkbox" class="table-default-check" value="${Number(d.karyawan_id || 0)}">`
                        : `<input type="checkbox" disabled>` },
                    { data: null, render: (d,t,r,meta)=> meta.row + 1 },
                    { data: 'work_date_label', render: (d)=> d || '-' },
                    { data: 'row_type', render: (d, t, r)=> d === 'default'
                        ? '<span class="badge bg-primary">Default</span>'
                        : '<span class="badge bg-warning text-dark">Override</span>' },
                    { data: null, render: (d)=> `<div><strong>${d.employee_code || '-'}</strong></div><div class="text-muted">${d.full_name || '-'}</div>` },
                    { data: null, render: (d)=> Number(d.login_user_id || 0) > 0
                        ? `<span class="badge bg-success">Sudah Login</span><div class="small text-muted">${escapeHtml(d.login_username || '-')}</div>`
                        : `<button type="button" class="btn btn-sm btn-danger btn-generate-default-login" data-karyawan-id="${Number(d.karyawan_id || 0)}" data-employee-code="${escapeHtml(d.employee_code || '')}"><i class="fas fa-user-plus me-1"></i>Belum Generate</button>` },
                    { data: 'allowed_site_labels', render: (d)=> pillHtml(d) },
                    { data: 'notes', defaultContent: '-' },
                    { data: 'is_active', render: (d)=> d ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-secondary">Nonaktif</span>' },
                    { data: null, render: (d)=> `
                        <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${d.id}">Edit</button>
                        <button class="btn btn-sm btn-outline-danger btn-del" data-id="${d.id}">${d.row_type === 'default' ? 'Clear' : 'Hapus'}</button>
                    ` }
                ]
            });

            bindCommaSearch();
            $('#tblAssign').on('click', '.btn-generate-default-login', function(){
                generateDefaultLogin($(this).data('karyawan-id'), $(this).data('employee-code'));
            });            $('#btnFilter').on('click', loadData);
            $('#btnTablePasteSearch').on('click', tablePasteSearch);
            $('#btnTablePasteClear').on('click', tablePasteClear);
            $('#btnLoadMissing').on('click', loadMissingUsers);
            $('#assignForever').on('change', toggleAssignMode);
            $('#assignAnywhere').on('change', toggleAnywhereMode);
            $('#btnSelectMissingByArea').on('click', selectMissingByArea);
            $('#btnImportDefaultFromLastOverride').on('click', importDefaultsFromLastOverride);
            $('#btnPasteSearch').on('click', pasteSearchMissingUsers);
            $('#btnPasteClear').on('click', function(){ $('#missingPasteBox').val(''); });
            $('#btnAssignMissingSelected').on('click', function(){ assignMissingUsers('selected'); });
            $('#btnAssignMissingAll').on('click', function(){ assignMissingUsers('all'); });
            $('#btnGenerateLoginSelected').on('click', function(){ generatePekerjaLogin('selected'); });
            $('#btnGenerateLoginAll').on('click', function(){ generatePekerjaLogin('all'); });
            $('#btnBulkAnywhereAll').on('click', bulkAnywhereAll);
            $('#btnBulkAnywhereMissingSelected').on('click', function(){ bulkAnywhereSelected('missing'); });
            $('#btnBulkAnywhereTableSelected').on('click', function(){ bulkAnywhereSelected('table'); });
            $('#toggleAnywhereAll').on('change', toggleAnywhereAll);
            $('#btnBulkUpdateDefaults').on('click', openBulkUpdateDefaults);
            $('#btnResetPasswordSelected').on('click', resetSelectedPasswords);
            $('#btnConfirmBulkAssign').on('click', executeBulkAssign);
            $('#missingCheckAll').on('change', function(){
                $('#missingUserBody .missing-user-check').prop('checked', $(this).is(':checked'));
                syncMissingCheckAll();
            });
            $('#tableCheckAll').on('change', function(){
                $('#tblAssign .table-default-check').prop('checked', $(this).is(':checked'));
                syncTableCheckAll();
            });
            $('#missingUserBody').on('click', '.missing-user-check', function(e){
                const $checks = $('#missingUserBody .missing-user-check');
                lastMissingCheckIndex = handleRangeClick($checks, this, lastMissingCheckIndex, e);
                syncMissingCheckAll();
            });
            $('#tblAssign').on('click', '.table-default-check', function(e){
                const $checks = $('#tblAssign .table-default-check');
                lastTableDefaultCheckIndex = handleRangeClick($checks, this, lastTableDefaultCheckIndex, e);
                syncTableCheckAll();
            });
            $('#missingQ').on('keydown', function(e){
                if (e.key === 'Enter') {
                    e.preventDefault();
                    loadMissingUsers();
                }
            });
            $('#btnAdd').on('click', function(){ resetModal(); modal.show(); });
            $('#btnSave').on('click', save);
            $('#tblAssign').on('click', '.btn-edit', function(){ openEdit($(this).data('id')); });
            $('#tblAssign').on('click', '.btn-del', function(){ destroyRow($(this).data('id')); });
            table.on('draw', function(){
                syncTableCheckAll();
            });
            $('#btnOpenImport').on('click', function () {
                $('#importFile').val('');
                $('#importProfilBulan').val('');
                $('#previewSection').hide();
                $('#previewBody').html('');
                $('#btnConfirmImport').prop('disabled', true);
                importPreviewId = '';
                importModal.show();
            });
            $('#btnPreviewImport').on('click', function () {
                const file = $('#importFile')[0]?.files?.[0];
                if (!file) {
                    Swal.fire('Warning', 'Pilih file Excel dulu.', 'warning');
                    return;
                }
                const form = new FormData();
                form.append('file', file);
                const profilId = $('#importProfilBulan').val();
                if (profilId) form.append('profil_bulan_id', profilId);

                $.ajax({
                    url: '{{ route('attendance_site_assignments.import.preview') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: form,
                    processData: false,
                    contentType: false,
                }).done(resp => {
                    if (resp?.meta?.profil_not_found) {
                        Swal.fire('Info', resp?.message || 'Profil bulan belum ada.', 'info');
                        return;
                    }
                    const data = resp?.data || {};
                    importPreviewId = resp?.preview_id || '';
                    $('#previewTotal').text(`Total: ${data.total || 0}`);
                    $('#previewValid').text(`Valid: ${data.valid || 0}`);
                    $('#previewSkipped').text(`Skipped: ${data.skipped || 0}`);
                    $('#previewInvalid').text(`Invalid: ${data.invalid || 0}`);
                    const rowsPreview = (data.rows || []).slice(0, 200);
                    const statusBadge = (status) => {
                        if (status === 'new') return '<span class="badge bg-success">NEW</span>';
                        if (status === 'update') return '<span class="badge bg-primary">UPDATE</span>';
                        if (status === 'skipped') return '<span class="badge bg-secondary">SKIP</span>';
                        return '<span class="badge bg-danger">INVALID</span>';
                    };
                    $('#previewBody').html(rowsPreview.map(r => `
                        <tr>
                            <td>${r.row || ''}</td>
                            <td>${r.work_date || ''}</td>
                            <td>${r.employee_code || ''}</td>
                            <td>${r.site_code || ''}</td>
                            <td>${r.allowed_site_codes || ''}</td>
                            <td>${Number(r.is_active || 0) === 1 ? 'Ya' : 'Tidak'}</td>
                            <td>${statusBadge(r.status)}</td>
                            <td>${r.message || ''}</td>
                        </tr>
                    `).join(''));
                    $('#previewSection').show();
                    $('#btnConfirmImport').prop('disabled', !importPreviewId || (data.valid || 0) <= 0);
                }).fail(xhr => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import gagal', 'error');
                });
            });

            $('#btnConfirmImport').on('click', function () {
                if (!importPreviewId) {
                    Swal.fire('Warning', 'Preview belum ada.', 'warning');
                    return;
                }
                $.ajax({
                    url: '{{ route('attendance_site_assignments.import.confirm') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { preview_id: importPreviewId }
                }).done(resp => {
                    importModal.hide();
                    const data = resp?.data || {};
                    const errorLink = resp?.error_report_url
                        ? `<div class="mt-2"><a href="${resp.error_report_url}" class="btn btn-sm btn-outline-danger">Download Error Report</a></div>`
                        : '';
                    Swal.fire({
                        title: 'Import Tersimpan',
                        html: `
                            <div>Total: ${data.total || 0}</div>
                            <div>Created: ${data.created || 0}</div>
                            <div>Updated: ${data.updated || 0}</div>
                            <div>Skipped: ${data.skipped || 0}</div>
                            <div>Invalid: ${data.invalid || 0}</div>
                            ${errorLink}
                        `,
                        icon: 'success'
                    });
                    loadData();
                }).fail(xhr => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import gagal', 'error');
                });
            });

            $('#btnExportExisting').on('click', function () {
                const params = new URLSearchParams({
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || '',
                    q: $('#filterQ').val() || '',
                    site_code: ($('#filterSite').val() || '').toString(),
                });
                const profilId = $('#importProfilBulan').val();
                if (profilId) params.set('profil_bulan_id', profilId);
                window.open(`{{ route('attendance_site_assignments.export') }}?${params.toString()}`, '_blank');
            });

            // Initial load
            loadData();
            loadMissingUsers();
            $('#assignWorkDate').on('change', function(){
                if (!$('#assignWorkDateEnd').val()) {
                    $('#assignWorkDateEnd').val($(this).val());
                }
            });
            $('#assignSiteSingle, #assignSiteMulti').on('select2:select select2:unselect', function(){
                normalizeSiteSelections();
            });
        });
    </script>
@endpush