@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav')

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div>
                        <h6 class="mb-1 text-dark font-weight-bold"><i class="fas fa-eye me-2"></i>Detail Finger - <span id="detailFingerDate">{{ $tanggal_label }} ({{ $hari }})</span></h6>
                        <p class="text-sm text-secondary mb-0">Detail fingerprint per karyawan untuk tanggal terpilih.
                            @if(!empty($selected_status_labels))
                                <span class="badge bg-info ms-1">Status: {{ implode(', ', $selected_status_labels) }}</span>
                            @else
                                <span class="badge bg-secondary ms-1">Semua Status</span>
                            @endif
                        </p>
                    </div>
                    <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>Kembali
                    </button>
                </div>

                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="departemenDetail" class="form-label text-sm font-weight-bold">Departemen</label>
                        <select class="form-select" id="departemenDetail">
                            <option value="">-- Semua Departemen --</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="karyawanDetail" class="form-label text-sm font-weight-bold">Karyawan</label>
                        <input type="hidden" name="karyawan" id="nik_hidden" value="">
                        <div class="input-group">
                            <input type="text" class="form-control" id="karyawanDetail" placeholder="Pilih karyawan" readonly>
                            <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex h-100 align-items-end">
                            <button type="button" class="btn btn-primary w-100 mb-0" onclick="applyDetailFilter()">
                                <i class="fas fa-filter me-2"></i>Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div>
                        <h6 class="text-dark font-weight-bold mb-0"><i class="fas fa-circle-exclamation me-2 text-warning"></i>Data Tanpa Shift</h6>
                        <p class="text-sm text-secondary mb-0">Data yang tidak memiliki shift/jadwal (missing shift).</p>
                    </div>
                    <span class="badge" style="background-color: #fb6340 !important; color: #ffffff !important;" id="detailBelumLengkapCount">{{ count($rows_belum_lengkap ?? []) }} data</span>
                </div>
                <div class="table-responsive table-wrap-centered">
                    <table class="table table-hover align-items-center mb-0" id="detailBelumLengkapTable">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center" style="width: 50px;">No</th>
                                <th class="text-center" style="width: 110px;">Shift</th>
                                <th class="text-center" style="width: 90px;">PIN</th>
                                <th class="text-center" style="width: 120px;">NIK</th>
                                <th class="text-center" style="width: 80px;">Libur</th>
                                <th>Nama</th>
                                <th class="text-center">Departemen</th>
                                <th class="text-center">Grup</th>
                                <th class="text-center">Jam<br><small>Masuk</small></th>
                                <th class="text-center">Scan<br><small>Masuk</small></th>
                                <th class="text-center">Terlambat</th>
                                <th class="text-center">Jam<br><small>Keluar</small></th>
                                <th class="text-center">Scan<br><small>Keluar</small></th>
                                <th class="text-center">Pulang<br><small>Cepat</small></th>
                                <th class="text-center">Durasi</th>
                                <th class="text-center" style="width: 120px;">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <h6 class="text-dark font-weight-bold mb-0"><i class="fas fa-circle-check me-2 text-success"></i>Data Lengkap</h6>
                    <span class="badge bg-primary" id="detailLengkapCount">{{ count($rows ?? []) }} data</span>
                </div>
                <div class="table-responsive table-wrap-centered">
                    <table class="table table-hover align-items-center mb-0" id="detailTable">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center" style="width: 50px;">No</th>
                                <th class="text-center" style="width: 110px;">Shift</th>
                                <th class="text-center" style="width: 90px;">PIN</th>
                                <th class="text-center" style="width: 120px;">NIK</th>
                                <th class="text-center" style="width: 80px;">Libur</th>
                                <th>Nama</th>
                                <th class="text-center">Departemen</th>
                                <th class="text-center">Grup</th>
                                <th class="text-center">Jam<br><small>Masuk</small></th>
                                <th class="text-center">Scan<br><small>Masuk</small></th>
                                <th class="text-center">Terlambat</th>
                                <th class="text-center">Jam<br><small>Keluar</small></th>
                                <th class="text-center">Scan<br><small>Keluar</small></th>
                                <th class="text-center">Pulang<br><small>Cepat</small></th>
                                <th class="text-center">Durasi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <code>Note : <span class="text-danger">●</span> Data Missing</code>
                </div>
            </div>
        </div>

    </div>

    {{-- Modal Karyawan Picker --}}
    <div class="modal fade" id="karyawanPickerModal" 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 mb-0">List Data Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
<style>
    .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
    .picker-search-wrap > .form-control { height: calc(1.5em + 1rem + 2px); }
    .picker-search-wrap > .btn { height: calc(1.5em + 1rem + 2px); }
</style>
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="karyawanPickerSearch" placeholder="Cari..." oninput="filterKaryawanPicker()">
                            <button class="btn btn-primary" type="button" onclick="filterKaryawanPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <style>
            #detailTable_wrapper .dataTables_filter,
            #detailBelumLengkapTable_wrapper .dataTables_filter {
                margin-bottom: 10px;
            }

            #detailTable_wrapper .dataTables_filter input,
            #detailBelumLengkapTable_wrapper .dataTables_filter input {
                border: 1px solid #d2d6da;
                border-radius: 0.5rem;
                padding: 0.25rem 0.75rem;
                margin-left: 8px;
                outline: none;
            }

            #detailTable_wrapper .dataTables_filter input:focus,
            #detailBelumLengkapTable_wrapper .dataTables_filter input:focus {
                border-color: #5e72e4;
                box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.25);
            }

            #detailTable th,
            #detailTable td {
                vertical-align: middle;
            }

            .table-wrap-centered,
            #detailTable_wrapper {
                max-width: 99%;
                margin: 0 auto;
            }

            #detailTable_wrapper .dt-buttons,
            #detailBelumLengkapTable_wrapper .dt-buttons {
                margin-bottom: 10px;
            }

            #detailBelumLengkapTable th,
            #detailBelumLengkapTable td {
                vertical-align: middle;
            }

            .table-wrap-centered,
            #detailBelumLengkapTable_wrapper {
                max-width: 99%;
                margin: 0 auto;
            }
        </style>
        <script>
            let detailTable = null;
            let belumLengkapTable = null;
            let allDetailData = @json($rows ?? []);
            let allBelumLengkapData = @json($rows_belum_lengkap ?? []);
            let filteredDetailData = [];

            function emptyToDash(value) {
                return value && String(value).trim() !== '' && String(value).trim() !== '-' ? value : '-';
            }

            function isMissingValue(value) {
                const normalized = String(value || '').trim().toUpperCase();
                return normalized === '' || normalized === '-' || normalized.includes('MISSING');
            }

            function hasDetailIssue(row) {
                const shift = isMissingValue(row.shift_code || row.shift);
                const jamMasuk = isMissingValue(row.jam_masuk);
                const scanMasuk = isMissingValue(row.scan_masuk);
                const jamKeluar = isMissingValue(row.jam_keluar);
                const scanKeluar = isMissingValue(row.scan_keluar);
                const terlambat = String(row.terlambat || '').trim() !== '' && String(row.terlambat || '').trim() !== '00:00';
                const pulangCepat = String(row.pulang_cepat || '').trim() !== '' && String(row.pulang_cepat || '').trim() !== '00:00';

                return shift || jamMasuk || scanMasuk || jamKeluar || scanKeluar || terlambat || pulangCepat;
            }

            function applyMsjButtonStyle(wrapperSelector) {
                $(`${wrapperSelector} .dt-button`).addClass('btn btn-secondary mb-0 me-1');
                $(`${wrapperSelector} .dt-button`).removeClass('dt-button');
            }

            function populateDetailDepartemenOptions(rows) {
                const select = $('#departemenDetail');
                const current = select.val() || '';
                const departments = [...new Set(rows
                    .map((row) => (row.departemen || '').trim())
                    .filter((value) => value && value !== '-')
                )].sort((a, b) => a.localeCompare(b));

                select.empty();
                select.append('<option value="">-- Semua Departemen --</option>');
                departments.forEach((dept) => {
                    const selected = current === dept ? 'selected' : '';
                    select.append(`<option value="${dept}" ${selected}>${dept}</option>`);
                });
            }

            let selectedDetailNik = '';

            function applyDetailFilter() {
                const departemen = ($('#departemenDetail').val() || '').trim();
                const karyawan = ($('#karyawanDetail').val() || '').trim().toLowerCase();

                let rows = allDetailData.slice();

                if (departemen !== '') {
                    rows = rows.filter((row) => (row.departemen || '').trim() === departemen);
                }

                rows = filterRowsByKaryawan(rows, departemen, karyawan);

                filteredDetailData = rows;
                renderDetailTable(filteredDetailData);
                renderBelumLengkapTable(filterBelumLengkapRows(departemen, karyawan));
            }

            function filterRowsByKaryawan(rows, departemen, karyawan) {
                // Karyawan dipilih lewat modal picker -> cocokkan NIK persis
                if (selectedDetailNik !== '') {
                    const selected = selectedDetailNik.replace(/^0+/, '').toLowerCase();
                    return rows.filter((row) => String(row.nik || '').replace(/^0+/, '').toLowerCase() === selected);
                }

                if (karyawan !== '') {
                    return rows.filter((row) => {
                        const nik = String(row.nik || '').toLowerCase();
                        const nama = String(row.nama || '').toLowerCase();
                        return nik.includes(karyawan) || nama.includes(karyawan);
                    });
                }

                return rows;
            }

            function filterBelumLengkapRows(departemen, karyawan) {
                let rows = allBelumLengkapData.slice();

                if (departemen !== '') {
                    rows = rows.filter((row) => (row.departemen || '').trim() === departemen);
                }

                return filterRowsByKaryawan(rows, departemen, karyawan);
            }

            function belumLengkapKeterangan(row) {
                return 'Tidak ada shift/jadwal';
            }

            function renderBelumLengkapTable(rows) {
                if (belumLengkapTable) {
                    belumLengkapTable.destroy();
                }

                const tbody = $('#detailBelumLengkapTable tbody');
                tbody.empty();

                // Deduplicate rows by id_pull to prevent duplicate rendering
                const seenIdPulls = new Set();
                const uniqueRows = rows.filter(row => {
                    const idPull = row.id_pull || row.id;
                    if (seenIdPulls.has(idPull)) {
                        return false;
                    }
                    seenIdPulls.add(idPull);
                    return true;
                });

                $('#detailBelumLengkapCount').text(uniqueRows.length + ' data');

                uniqueRows.forEach((row, index) => {
                    const shiftLabel = emptyToDash(row.shift_code || row.shift);
                    const shiftDesc = emptyToDash(row.shift_name || row.shift_desc);
                    const grup = emptyToDash(row.nama_grup || row.grub || row.grub_desc);
                    const holidayIcon = row.holiday ? '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>' : '<i class="fas fa-times-circle text-danger" style="font-size: 1.2rem;"></i>';

                    tbody.append(`
                        <tr>
                            <td class="text-center">${index + 1}</td>
                            <td class="text-center">${shiftLabel}<br><small class="text-secondary">${shiftDesc}</small></td>
                            <td class="text-center">${emptyToDash(row.pin)}</td>
                            <td class="text-center">${emptyToDash(row.nik)}</td>
                            <td class="text-center">${holidayIcon}</td>
                            <td>${emptyToDash(row.nama)}</td>
                            <td class="text-center">${emptyToDash(row.departemen)}</td>
                            <td class="text-center">${grup}</td>
                            <td class="text-center">${emptyToDash(row.jam_masuk)}</td>
                            <td class="text-center">${emptyToDash(row.scan_masuk)}</td>
                            <td class="text-center">${(row.terlambat && row.terlambat !== '00:00') ? row.terlambat : ''}</td>
                            <td class="text-center">${emptyToDash(row.jam_keluar)}</td>
                            <td class="text-center">${emptyToDash(row.scan_keluar)}</td>
                            <td class="text-center">${(row.pulang_cepat && row.pulang_cepat !== '00:00') ? row.pulang_cepat : ''}</td>
                            <td class="text-center">${emptyToDash(row.durasi)}</td>
                            <td class="text-center"><span class="badge" style="background-color: #fb6340 !important; color: #ffffff !important;">${belumLengkapKeterangan(row)}</span></td>
                        </tr>
                    `);
                });

                belumLengkapTable = $('#detailBelumLengkapTable').DataTable({
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Data tidak ditemukan',
                        emptyTable: 'Tidak ada data belum lengkap',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    searching: true,
                    responsive: true,
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                            title: `Detail Finger Belum Lengkap {{ $tanggal_label }}`,
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                            title: `Detail Finger Belum Lengkap {{ $tanggal_label }}`,
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                            title: `Detail Finger Belum Lengkap {{ $tanggal_label }}`,
                            exportOptions: { columns: ':visible' }
                        }
                    ]
                });

                applyMsjButtonStyle('#detailBelumLengkapTable_wrapper');
                $('#detailBelumLengkapTable_length').hide();
            }

            function renderDetailTable(rows) {
                if (detailTable) {
                    detailTable.destroy();
                }

                const tbody = $('#detailTable tbody');
                tbody.empty();

                // Deduplicate rows by id_pull to prevent duplicate rendering
                const seenIdPulls = new Set();
                const uniqueRows = rows.filter(row => {
                    const idPull = row.id_pull || row.id;
                    if (seenIdPulls.has(idPull)) {
                        return false;
                    }
                    seenIdPulls.add(idPull);
                    return true;
                });

                if (!uniqueRows.length) {
                    // Leave tbody empty, DataTables will handle emptyTable message
                } else {
                    uniqueRows.forEach((row, index) => {
                        const shiftLabel = emptyToDash(row.shift_code || row.shift);
                        const shiftDesc = emptyToDash(row.shift_name || row.shift_desc);
                        const grup = emptyToDash(row.nama_grup || row.grub || row.grub_desc);
                        const rowStyle = hasDetailIssue(row) ? 'background-color: #ffe3e3;' : '';
                        const holidayIcon = row.holiday ? '<i class="fas fa-check-circle text-success" style="font-size: 1.2rem;"></i>' : '<i class="fas fa-times-circle text-danger" style="font-size: 1.2rem;"></i>';

                        tbody.append(`
                            <tr style="${rowStyle}">
                                <td class="text-center">${index + 1}</td>
                                <td class="text-center">${shiftLabel}<br><small class="text-secondary">${shiftDesc}</small></td>
                                <td class="text-center">${emptyToDash(row.pin)}</td>
                                <td class="text-center">${emptyToDash(row.nik)}</td>
                                <td class="text-center">${holidayIcon}</td>
                                <td>${emptyToDash(row.nama)}</td>
                                <td class="text-center">${emptyToDash(row.departemen)}</td>
                                <td class="text-center">${grup}</td>
                                <td class="text-center">${emptyToDash(row.jam_masuk)}</td>
                                <td class="text-center">${emptyToDash(row.scan_masuk)}</td>
                                <td class="text-center">${(row.terlambat && row.terlambat !== '00:00') ? row.terlambat : ''}</td>
                                <td class="text-center">${emptyToDash(row.jam_keluar)}</td>
                                <td class="text-center">${emptyToDash(row.scan_keluar)}</td>
                                <td class="text-center">${(row.pulang_cepat && row.pulang_cepat !== '00:00') ? row.pulang_cepat : ''}</td>
                                <td class="text-center">${emptyToDash(row.durasi)}</td>
                            </tr>
                        `);
                    });
                }

                detailTable = $('#detailTable').DataTable({
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Data tidak ditemukan',
                        emptyTable: 'Data tidak ditemukan',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    searching: true,
                    responsive: true,
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                            title: `Detail Finger {{ $tanggal_label }}`,
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                            title: `Detail Finger {{ $tanggal_label }}`,
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                            title: `Detail Finger {{ $tanggal_label }}`,
                            exportOptions: { columns: ':visible' }
                        }
                    ]
                });

                applyMsjButtonStyle('#detailTable_wrapper');
                $('#detailTable_length').hide();
            }

            let karyawanPickerTable = null;
            let karyawanPickerData = [];

            function openKaryawanModal() {
                document.getElementById('karyawanPickerSearch').value = '';
                loadKaryawanPickerData();
                if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
                }
            }

            function loadKaryawanPickerData() {
                const departemen = ($('#departemenDetail').val() || '').trim();
                $.ajax({
                    url: '{{ url('/trspul/get-karyawan') }}',
                    method: 'GET',
                    cache: false,
                    data: { query: '', departemen: departemen },
                    success: function (response) {
                        if (response.success) {
                            const data = response.data || [];
                            if (karyawanPickerTable) {
                                karyawanPickerTable.destroy();
                                karyawanPickerTable = null;
                            }
                            renderKaryawanPickerRows(data);
                            if (data.length > 0) {
                                initKaryawanPickerTable();
                            }
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('[Trspul Picker] AJAX error:', status, error);
                    }
                });
            }

            function renderKaryawanPickerRows(data) {
                karyawanPickerData = data;
                const tbody = document.getElementById('karyawanPickerBody');
                if (!data.length) {
                    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">Tidak ada data</td></tr>';
                    return;
                }
                let html = '';
                data.forEach((k, idx) => {
                    const rowStyle = String(k.isactive ?? '1') === '1' ? '' : 'background-color:#ffe9ed;';
                    html += `<tr style="cursor:pointer;${rowStyle}" onclick="selectKaryawanFromModal(${idx})">
                        <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                        <td>${escapeHtml(k.nik || '-')}</td>
                        <td>${escapeHtml(k.nama || '-')}</td>
                        <td>${escapeHtml(k.departemen || '-')}</td>
                    </tr>`;
                });
                tbody.innerHTML = html;
            }

            function initKaryawanPickerTable() {
                if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                    language: {
                        zeroRecords: 'Tekan Tombol Cari Dahulu',
                        info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                        infoEmpty: 'Showing 0 to 0 of 0 entries',
                        infoFiltered: '(filtered from _MAX_ total entries)',
                        paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' }
                    },
                    pageLength: 10,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    order: [[1, 'asc']],
                    responsive: true,
                    pagingType: 'simple_numbers',
                    dom: 'tip'
                });
            }

            function filterKaryawanPicker() {
                const keyword = document.getElementById('karyawanPickerSearch').value.trim();
                if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
            }

            function selectKaryawanFromModal(index) {
                const karyawan = karyawanPickerData[index];
                if (!karyawan) return;
                selectedDetailNik = karyawan.nik || '';
                document.getElementById('nik_hidden').value = selectedDetailNik;
                document.getElementById('karyawanDetail').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`;
                if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    const m = bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal'));
                    if (m) m.hide();
                }
                // Filter baru berjalan saat tombol Filter ditekan
            }

            function clearKaryawanSelection() {
                selectedDetailNik = '';
                document.getElementById('nik_hidden').value = '';
                document.getElementById('karyawanDetail').value = '';
                reloadKaryawanPickerIfOpen();
            }

            function reloadKaryawanPickerIfOpen() {
                var modalEl = document.getElementById('karyawanPickerModal');
                var isModalOpen = modalEl && (modalEl.classList.contains('show') || getComputedStyle(modalEl).display !== 'none');
                if (isModalOpen) {
                    var searchEl = document.getElementById('karyawanPickerSearch');
                    if (searchEl) searchEl.value = '';
                    loadKaryawanPickerData();
                }
            }

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

            $(document).ready(function() {
                $('#departemenDetail').on('change', function() {
                    clearKaryawanSelection();
                });

                populateDetailDepartemenOptions(allDetailData.concat(allBelumLengkapData));
                renderDetailTable(allDetailData);
                renderBelumLengkapTable(allBelumLengkapData);
            });
        </script>
    @endpush
@endsection