@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; }
        .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="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>
                    <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:300px;">Jabatan</th>
                                <th style="width:260px;">Area Kerja</th>
                            </tr>
                        </thead>
                        <tbody id="missingUserBody">
                            <tr><td colspan="5" 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>
            </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: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-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="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 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(codes){
            if(!codes || !Array.isArray(codes) || codes.length===0) return '-';
            return codes.map(c => `<span class="site-pill">${String(c)}</span>`).join('');
        }

        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="5" 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>${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="5" 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');
            $('#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 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');
            $('#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 executeBulkAssign(){
            const scope = $('#bulkAssignScope').val() || 'selected';
            const source = $('#bulkAssignSource').val() || 'missing';
            const siteCodes = ($('#bulkAssignSites').val() || []).map(v => String(v));
            const workDate = $('#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 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('');
            $('#assignWorkDateEnd').val('');
            $('#assignActive').val('1');
            $('#assignActive').prop('disabled', false);
            $('#assignNotes').val('');
            $('#assignKaryawan').val(null).trigger('change');
            $('#assignSiteSingle').val(null).trigger('change');
            $('#assignSiteMulti').val(null).trigger('change');
            toggleAssignMode();
        }

        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');
            $('#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 fillSelect2($el, id, text){
            if(!id) return;
            const opt = new Option(text || id, id, true, true);
            $el.append(opt).trigger('change');
        }

        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());
            if(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.forEach(c => fillSelect2($('#assignSiteMulti'), c, c));
            }
            toggleAssignMode();
            modal.show();
        }

        function save(){
            const id = $('#assignId').val();
            const rowType = $('#assignRowType').val() || 'override';
            const isDefaultMode = rowType === 'default' || (!id && $('#assignForever').is(':checked'));
            const payload = {
                karyawan_id: $('#assignKaryawan').val(),
                work_date: $('#assignWorkDate').val(),
                work_date_end: $('#assignWorkDateEnd').val(),
                site_code: $('#assignSiteSingle').val(),
                allowed_site_codes: $('#assignSiteMulti').val() || [],
                notes: $('#assignNotes').val(),
                is_active: $('#assignActive').val() === '1' ? 1 : 0
            };
            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: 'allowed_site_codes', 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>
                    ` }
                ]
            });

            $('#btnFilter').on('click', loadData);
            $('#btnLoadMissing').on('click', loadMissingUsers);
            $('#assignForever').on('change', toggleAssignMode);
            $('#btnSelectMissingByArea').on('click', selectMissingByArea);
            $('#btnImportDefaultFromLastOverride').on('click', importDefaultsFromLastOverride);
            $('#btnAssignMissingSelected').on('click', function(){ assignMissingUsers('selected'); });
            $('#btnAssignMissingAll').on('click', function(){ assignMissingUsers('all'); });
            $('#btnBulkUpdateDefaults').on('click', openBulkUpdateDefaults);
            $('#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());
                }
            });
        });
    </script>
@endpush