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

@section('content')
    @include('layouts.navbars.auth.topnav')
    
    <div class="container-fluid py-3">
        @include('components.karyawan-tanpa-ftm-alert')

        {{-- FILTER + DATA SECTION --}}
        <div class="card shadow-sm mb-4" id="dataMissingContainer">
            <div class="card-body pb-2">
                <div class="mb-2">
                    <h6 class="mb-1 text-dark font-weight-bold">Data Missing</h6>
                    <div class="px-3 py-2 rounded-2 mb-2" style="background-color: #f1f3f5; border: 1px solid #d9dfe3;">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fas fa-circle-info text-primary"></i>
                            <span class="text-sm font-weight-bold" style="color: #344767 !important;">Petunjuk Umum Klarifikasi Data Absensi</span>
                        </div>
                        <div class="text-sm mb-2 font-weight-bold" style="color: #344767 !important;">A. Ketentuan Klarifikasi</div>
                        <ul class="text-sm mb-2 ps-4" style="color: #344767 !important;">
                            <li class="mb-1"><strong>Mangkir, Skorsing, dan Insidental:</strong> klarifikasi dilakukan melalui <strong>sistem FTM</strong>.</li>
                            <li class="mb-1"><strong>Izin, Cuti, dan Sakit:</strong> klarifikasi dilakukan melalui <strong>MSJHRIS</strong>.</li>
                            <li class="mb-1"><strong>Keterlambatan, Pulang Cepat Tanpa Izin, dan Tidak Scan In/Scan Out:</strong> tidak perlu melakukan klarifikasi melalui FTM maupun MSJHRIS. Langsung tekan tombol <strong>Konfirmasi Data Missing</strong> pada sistem.</li>
                        </ul>
                        <div class="text-sm mb-2 font-weight-bold" style="color: #344767 !important;">B. Aturan Penulisan Alasan pada Sistem FTM</div>
                        <div class="text-sm mb-1" style="color: #344767 !important;">Untuk data <strong>Mangkir, Skorsing, dan Insidental</strong>, gunakan format berikut:</div>
                        <ol class="text-sm mb-2 ps-4" style="color: #344767 !important;">
                            <li class="mb-1"><strong>Mangkir</strong> &mdash; gunakan kata <strong>"Mangkir"</strong> pada kolom alasan. Jika ingin menambahkan keterangan: <strong>Mangkir (keterangan)</strong>. Contoh: <strong>Mangkir</strong>, <strong>Mangkir (ketiduran)</strong>.</li>
                            <li class="mb-1"><strong>Skorsing</strong> &mdash; gunakan kata <strong>"Skorsing" </strong> pada kolom alasan. Jika ingin menambahkan keterangan: <strong>Skorsing (keterangan)</strong>. Contoh: <strong>Skorsing</strong>, <strong>Skorsing (ketiduran)</strong>.</li>
                            <li class="mb-1"><strong>Insidental Scan</strong> &mdash; gunakan kata <strong>"Insidental"</strong> pada kolom alasan. Jika ingin menambahkan keterangan: <strong>Insidental (keterangan)</strong>. Contoh: <strong>Insidental</strong>, <strong>Insidental (Finger Tidak Terdeteksi)</strong>, <strong>Insidental (Jari Terluka)</strong>.</li>
                            <li class="mb-1"><strong>Insidental Absen</strong> &mdash; gunakan format <strong>Insidental (keterangan)</strong> sesuai kondisi. Contoh: <strong>Insidental (Diliburkan karena mesin mati)</strong>.</li>
                        </ol>
                        <div class="text-sm mb-0" style="color: #344767 !important;"><strong>Catatan Penting:</strong> pastikan penulisan alasan mengikuti format di atas agar data klarifikasi dapat <strong>dikenali dan diproses oleh sistem dengan benar</strong>.</div>
                    </div>
                    <div id="noFtmAlertContainer">@include('components.karyawan-tanpa-ftm-alert')</div>
                </div>
                <form id="filterForm" method="GET">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label for="tanggal_mulai" class="form-label text-sm font-weight-bold">Tanggal Mulai</label>
                            <input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" value="{{ $default_tanggal_mulai ?? ($latest_attendance_date ?? now()->toDateString()) }}">
                        </div>
                        <div class="col-md-3">
                            <label for="tanggal_akhir" class="form-label text-sm font-weight-bold">Tanggal Akhir</label>
                            <input type="date" class="form-control" id="tanggal_akhir" name="tanggal_akhir" value="{{ $default_tanggal_akhir ?? ($latest_attendance_date ?? now()->toDateString()) }}">
                        </div>
                        
                        

                        <div class="col-md-3">
                            <label for="status" class="form-label text-sm font-weight-bold">Status Data Missing</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">Semua Status Data Missing</option>
                                <option value="Tidak Ada Jadwal Shift">Tidak Ada Jadwal Shift</option>
                                <option value="Tidak Ada Scan">Tidak Ada Scan</option>
                                <option value="Belum Finger In">Belum Finger In</option>
                                <option value="Belum Finger Out">Belum Finger Out</option>
                                <option value="Terlambat">Terlambat</option>
                                <option value="Pulang Cepat">Pulang Cepat</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="shift" class="form-label text-sm font-weight-bold">Shift</label>
                            <select class="form-select" id="shift" name="shift">
                                <option value="">Semua Shift</option>
                                @foreach (($shift_options ?? []) as $shift)
                                    <option value="{{ $shift->value }}">{{ $shift->label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="status_karyawan" class="form-label text-sm font-weight-bold">Status Karyawan</label>
                            @php
                                $statusFilterForRole = $status_filter_for_role ?? [
                                    'is_krl_role' => false,
                                    'is_hrd_role' => false,
                                    'preselected_status_ids' => [],
                                    'preselected_status_names' => [],
                                    'readonly' => false,
                                    'message' => '',
                                ];
                            @endphp

                            @if ($statusFilterForRole['readonly'])
                                <div class="position-relative">
                                    <select class="form-control select2"
                                        name="status_karyawan[]"
                                        id="status_karyawan"
                                        multiple
                                        @if ($statusFilterForRole['is_krl_role']) readonly @endif>
                                        <option value="all">Semua Status</option>
                                        @if ($status_karyawan_options)
                                            @foreach ($status_karyawan_options as $statusKaryawan)
                                                <br />
<b>Warning</b>:  Undefined variable $statusKaryawan in <b>/opt/lampp/htdocs/msjabsensi/resources/views/absens/trsmis/list.blade.php</b> on line <b>94</b><br />
                                                <option value="{{ $sAsArray[0] }}"
                                                    @if(!empty($statusFilterForRole['preselected_status_ids']) && in_array($sAsArray[0], $statusFilterForRole['preselected_status_ids'])) selected @endif>
                                                    {{ $sAsArray[1] }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @if ($statusFilterForRole['is_krl_role'])
                                        <div class="position-absolute top-0 end-0 p-1" style="margin-top: -6px; margin-left: -6px;">
                                            <i class="fas fa-lock text-secondary" style="font-size: 10px;"></i>
                                        </div>
                                    @endif
                                </div>
                                @if (!empty($statusFilterForRole['message']))
                                    <small class="text-warning d-block mt-1">
                                        <i class="fas fa-info-circle me-1"></i>{{ $statusFilterForRole['message'] }}
                                    </small>
                                @endif
                            @else
                                <select class="form-control select2"
                                    name="status_karyawan[]"
                                    id="status_karyawan"
                                    multiple>
                                    <option value="all" {{ empty($statusFilterForRole['preselected_status_ids']) ? 'selected' : '' }}>Semua Status</option>
                                    @if ($status_karyawan_options)
                                        @foreach ($status_karyawan_options as $statusKaryawan)
                                            <br />
<b>Warning</b>:  Undefined variable $statusKaryawan in <b>/opt/lampp/htdocs/msjabsensi/resources/views/absens/trsmis/list.blade.php</b> on line <b>121</b><br />
                                            <option value="{{ $sAsArray[0] }}"
                                                @if(!empty($statusFilterForRole['preselected_status_ids']) && in_array($sAsArray[0], $statusFilterForRole['preselected_status_ids'])) selected @endif>
                                                {{ $sAsArray[1] }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            @endif
                        </div>
                        
                        <div class="col-md-3">
                            <label for="departemen" class="form-label text-sm font-weight-bold">Departemen</label>
                            <select class="form-select" id="departemen" name="departemen">
                                <option value="">Semua Departemen</option>
                                @foreach (($departemen ?? []) as $dept)
                                    <option value="{{ $dept->nama }}">{{ $dept->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="grub" class="form-label text-sm font-weight-bold">Grup</label>
                            <select class="form-select" id="grub" name="grub">
                                <option value="">Semua Grup</option>
                                @foreach (($group_options ?? []) as $grp)
                                    <option value="{{ $grp->nama_grup }}">{{ $grp->nama_grup }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        
                        
                        <div class="col-md-3">
                            <label for="karyawan" 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="karyawan" name="karyawan_display" 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-12">
                            <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                                <div id="lastKonfirmasiInfoWrap">
                                    <div class="badge bg-gradient-info text-white px-3 py-2 shadow-sm border border-info-subtle" style="font-size: 0.8rem; font-weight: 600; white-space: nowrap;">
                                        <i class="fas fa-clock me-1"></i>
                                        <span id="lastKonfirmasiInfo">Terakhir kali konfirmasi: {{ $last_confirmed_at_formatted ?? 'belum ada' }}</span>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary mb-0 px-8" onclick="getDataMissing()">
                                    <i class="fas fa-search me-2"></i>Tampilkan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            {{-- ACTION BAR --}}
            <div class="px-3 pb-2 d-flex flex-column align-items-start gap-2" id="actionBar">
                <div class="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
                    <div id="dataMissingExportButtons" class="d-flex gap-2 flex-wrap justify-content-start"></div>
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap" id="primaryActionButtons">
                    <span class="text-sm me-2">
                        <strong class="text-primary" id="selectedCount">0</strong> data terpilih
                    </span>
                    <button class="btn btn-primary action-btn-uniform" onclick="toggleSelectAll()">
                        <i class="fas fa-check-square me-1"></i>Pilih Semua
                    </button>
                    <button class="btn btn-warning action-btn-uniform" id="btnKonfirmasi" onclick="konfirmasiSelected()" disabled
                        title="Konfirmasi data missing terpilih (kategori mengikuti status baris)">
                        <i class="fas fa-user-check me-1"></i>Konfirmasi Data Missing
                    </button>
                </div>
            </div>

            {{-- DATA TABLE --}}
            <div id="dataTableCard" class="pb-3 px-3">
                <div class="table-responsive table-wrap-centered">
                    <table class="table table-hover align-items-center mb-0" id="dataMissingTable">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 40px;">
                                    <input type="checkbox" id="selectAll" onchange="syncSelectAllRows(this.checked)" onclick="event.stopPropagation()">
                                </th>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th>PIN</th>
                                <th>NIK</th>
                                <th>Shift</th>
                                <th>Libur</th>
                                <th>Nama Karyawan</th>
                                <th>Departemen</th>
                                <th>Grup</th>
                                <th>Jam Masuk</th>
                                <th>Scan Masuk</th>
                                <th>Terlambat</th>
                                <th>Jam Keluar</th>
                                <th>Scan Keluar</th>
                                <th>Pulang Cepat</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <tr>
                                <td colspan="17" class="text-center py-4 text-secondary text-sm font-weight-normal">
                                    Klik tombol Tampilkan untuk memuat data.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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>

    {{-- Modal Konfirmasi Data Missing --}}
    <div class="modal fade" id="konfirmasiDataMissingModal" 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"><i class="fas fa-user-check me-2 text-warning"></i>Konfirmasi Data Missing</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-sm text-secondary mb-2" id="konfirmasiModalInfo">
                        Status mengikuti status pada list data, apabila ingin melakukan perubahan status tekan tombol dengan icon <i class="fas fa-pen"></i>.
                    </p>
                    <div class="table-responsive" style="max-height: 50vh; overflow-y: auto;">
                        <table class="table table-hover align-items-center mb-0">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th scope="col">No</th>
                                    <th scope="col">Tanggal</th>
                                    <th scope="col">Nama Karyawan</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody id="konfirmasiModalBody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-warning" id="btnModalKonfirmasiSimpan" onclick="submitKonfirmasiDataMissing()">
                        <i class="fas fa-user-check me-1"></i><span id="btnModalKonfirmasiLabel">Ya, Konfirmasi</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Edit Status (dibuka dari ikon edit pada kolom Status modal konfirmasi) --}}
    <div class="modal fade" id="editStatusDataMissingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mb-0"><i class="fas fa-pen-to-square me-2 text-primary"></i>Edit Status Data Missing</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-sm text-secondary mb-3" id="editStatusRowInfo"></div>
                    <div class="mb-3">
                        <label for="editStatusAwal" class="form-label text-sm font-weight-bold mb-1">Status Awal</label>
                        <input type="text" class="form-control form-control-sm" id="editStatusAwal" readonly style="background-color: #f8f9fa;">
                    </div>
                    <div class="mb-3">
                        <label for="editStatusAkhir" class="form-label text-sm font-weight-bold mb-1">Status Akhir <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="editStatusAkhir" onchange="updateEditStatusPreview()">
                            <option value="Belum Finger In">Belum Finger In</option>
                            <option value="Belum Finger Out">Belum Finger Out</option>
                            <option value="Terlambat">Terlambat</option>
                            <option value="Pulang Cepat">Pulang Cepat</option>
                        </select>
                        <small class="text-muted d-block mt-1">Nilai ini yang disimpan ke <strong>report</strong></small>
                    </div>
                    <div class="mb-3">
                        <label for="editStatusKeterangan" class="form-label text-sm font-weight-bold mb-1">Keterangan</label>
                        <input type="text" class="form-control form-control-sm" id="editStatusKeterangan" maxlength="200" placeholder="cth: tidak finger out 3 kali" oninput="updateEditStatusPreview()">
                        <small class="text-muted d-block mt-1">Kosongkan bila tanpa keterangan tambahan.</small>
                    </div>
                    <div class="px-3 py-2 rounded-2 text-sm" style="background-color: #f1f3f5; border: 1px solid #d9dfe3;">
                        <span class="font-weight-bold">Keterangan yang disimpan:</span>
                        <span id="editStatusKeteranganPreview">Konfirmasi -</span>
                    </div>
                    <div class="text-sm text-secondary mt-2 mb-0">
                        <i class="fas fa-info-circle me-1"></i>Status yang diperbaharui akan disimpan di report data missing
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-arrow-left me-1"></i>Kembali</button>
                    <button type="button" class="btn btn-primary" onclick="saveEditStatusModal()"><i class="fas fa-save me-1"></i>Simpan</button>
                </div>
            </div>
        </div>
    </div>

    {{-- JAVASCRIPT --}}
    @push('js')
    <script>
        function loadNoFtmAlert() {
            var tanggalMulai = document.getElementById('tanggal_mulai')?.value;
            var tanggalAkhir = document.getElementById('tanggal_akhir')?.value;
            if (!tanggalMulai) return;

            var start = tanggalMulai;
            var end = tanggalAkhir
                ? new Date(new Date(tanggalAkhir).getTime() + 86400000).toISOString().slice(0, 10) // tanggal_akhir + 1 hari (exclusive)
                : null;

            fetch('{{ route('noftm.alert') }}?start=' + start + (end ? '&end=' + end : ''), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
                .then(function (res) { return res.text(); })
                .then(function (html) {
                    var container = document.getElementById('noFtmAlertContainer');
                    if (container) container.innerHTML = html;
                })
                .catch(function (e) { console.error('Gagal memuat alert karyawan tanpa FTM', e); });
        }

        document.getElementById('tanggal_mulai')?.addEventListener('change', loadNoFtmAlert);
        document.getElementById('tanggal_akhir')?.addEventListener('change', loadNoFtmAlert);
        // muat ulang sesuai nilai default filter saat halaman dibuka
        document.addEventListener('DOMContentLoaded', loadNoFtmAlert);
        // Ganti filter departemen/grup/status karyawan -> reset pilihan karyawan
        // dan reload modal picker jika sedang terbuka.
        ['departemen', 'grub', 'status_karyawan'].forEach(function (id) {
            document.getElementById(id)?.addEventListener('change', function () {
                if (typeof clearKaryawanSelection === 'function') {
                    clearKaryawanSelection();
                }
            });
        });
    </script>
    <style>
        .table-wrap-centered,
        #dataMissingTable_wrapper {
            max-width: 100%;
            margin: 0;
        }
        #actionBar .action-btn-uniform,
        #dataMissingExportButtons .btn {
            font-size: 0.875rem;
            padding: 0.5rem 0.9rem;
            line-height: 1.2;
        }
        #dataMissingExportButtons,
        #primaryActionButtons {
            margin-left: 0;
            padding-left: 0;
        }
        #actionBar {
            gap: 0.35rem !important;
            padding-bottom: 0.4rem !important;
        }
        #actionBar #primaryActionButtons {
            margin-bottom: 0;
        }
        #lastKonfirmasiInfoWrap {
            min-height: 34px;
        }
    </style>
    <script>
        let dataMissingTable = null;
        $(document).ready(function() {});

        // ===== State fitur edit status pada modal konfirmasi =====
        // Opsi status akhir (dropdown edit) — wajib sama dengan validasi backend.
        const MANUAL_STATUS_OPTIONS = ['Belum Finger In', 'Belum Finger Out', 'Terlambat', 'Pulang Cepat'];
        // Hasil edit per id baris: id => { statusAkhir, keterangan }.
        let editedRowOverrides = new Map();
        // Id baris yang sedang dibuka pada modal edit status.
        let currentEditRowId = null;
        // Flag cegah klik ganda saat submit konfirmasi.
        let konfirmasiSubmitting = false;

        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 = ($('#departemen').val() || '').trim();
            const statusKaryawanSelectEl = document.getElementById('status_karyawan');
            let statusKaryawanVals = [];
            if (statusKaryawanSelectEl && statusKaryawanSelectEl.selectedOptions) {
                for (let i = 0; i < statusKaryawanSelectEl.selectedOptions.length; i++) {
                    const value = statusKaryawanSelectEl.selectedOptions[i].value;
                    if (value && value !== 'all') {
                        statusKaryawanVals.push(value);
                    }
                }
            }

            $.ajax({
                url: '{{ url('/trsmis/get-karyawan') }}',
                method: 'GET',
                cache: false,
                data: {
                    query: '',
                    departemen: document.getElementById('departemen') ? document.getElementById('departemen').value : '',
                    grub: document.getElementById('grub') ? document.getElementById('grub').value : '',
                    status_karyawan: statusKaryawanVals
                },
                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('[Trsmis 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;
            document.getElementById('nik_hidden').value = karyawan.nik || '';
            document.getElementById('karyawan').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`;
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const m = bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal'));
                if (m) m.hide();
            }
        }

        function clearKaryawanSelection() {
            document.getElementById('nik_hidden').value = '';
            document.getElementById('karyawan').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 styleMsjButtons() {
            $('#dataMissingExportButtons .dt-button').addClass('btn btn-secondary');
            $('#dataMissingExportButtons .dt-button').removeClass('dt-button');
        }

        function getDataMissing() {
            const tanggalMulai = document.getElementById('tanggal_mulai').value;
            const tanggalAkhir = document.getElementById('tanggal_akhir').value;

            // Validasi: tanggal awal tidak boleh lebih besar dari tanggal akhir.
            if (tanggalMulai && tanggalAkhir && tanggalMulai > tanggalAkhir) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Rentang Tanggal Tidak Valid',
                    html: 'Tanggal awal tidak boleh lebih besar dari tanggal akhir.<br>' +
                          'Contoh: tanggal akhir <strong>02 Agustus</strong>, maka tanggal awal maksimal <strong>02 Agustus</strong>.',
                    confirmButtonColor: '#5e72e4'
                });
                return;
            }

            const statusKaryawanSelect = document.getElementById('status_karyawan');
            let statusKaryawan = [];
            if (statusKaryawanSelect && statusKaryawanSelect.selectedOptions) {
                for (let i = 0; i < statusKaryawanSelect.selectedOptions.length; i++) {
                    const value = statusKaryawanSelect.selectedOptions[i].value;
                    if (value && value !== 'all') {
                        statusKaryawan.push(value);
                    }
                }
            }

            $.ajax({
                url: '{{ url("/trsmis/check-missing-shift") }}',
                method: 'GET',
                data: {
                    tanggal_mulai: tanggalMulai,
                    tanggal_akhir: tanggalAkhir,
                    status_karyawan: statusKaryawan
                },
                success: function (checkResponse) {
                    const alertResult = showInitialDataCheckWarning(
                        checkResponse.missing_shift_check,
                        checkResponse.pull_status,
                        checkResponse.pull_status_by_status
                    );
                    const continueLoading = function () { loadDataMissing(); };
                    if (alertResult && typeof alertResult.then === 'function') {
                        alertResult.then(continueLoading);
                    } else {
                        continueLoading();
                    }
                },
                error: function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Memeriksa Data',
                        text: 'Pengecekan kelengkapan data gagal. Data missing tidak dimuat.',
                        confirmButtonColor: '#5e72e4'
                    });
                }
            });
        }

        function loadDataMissing() {
            const tanggalMulai = document.getElementById('tanggal_mulai').value;
            const tanggalAkhir = document.getElementById('tanggal_akhir').value;

            const karyawan = document.getElementById('nik_hidden') ? document.getElementById('nik_hidden').value.trim() : '';
            const shift = document.getElementById('shift').value;
            const grub = document.getElementById('grub').value;
            const departemen = document.getElementById('departemen').value;
            const statusFilter = document.getElementById('status') ? document.getElementById('status').value : '';

            // Read multiple status_karyawan values from select2
            const statusKaryawanSelect = document.getElementById('status_karyawan');
            let statusKaryawan = [];
            if (statusKaryawanSelect && statusKaryawanSelect.selectedOptions) {
                for (let i = 0; i < statusKaryawanSelect.selectedOptions.length; i++) {
                    const value = statusKaryawanSelect.selectedOptions[i].value;
                    if (value === 'all' || value) {
                        statusKaryawan.push(value);
                    }
                }
            }
            // If "all" selected or nothing selected, send empty (all statuses)
            if (statusKaryawan.length === 0 || (statusKaryawan.length === 1 && statusKaryawan[0] === 'all')) {
                statusKaryawan = [];
            }

            document.getElementById('selectedCount').textContent = '0';
            document.getElementById('selectAll').checked = false;
            selectedMissingRows.clear();
            editedRowOverrides.clear();
            allMissingRowsData = [];

            if (dataMissingTable) {
                dataMissingTable.destroy();
                dataMissingTable = null;
            }

            document.getElementById('dataMissingExportButtons').innerHTML = '';
            document.getElementById('tableBody').innerHTML = `
                <tr>
                    <td colspan="17" class="text-center py-5 text-sm font-weight-normal">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-sm text-secondary mt-3">Memuat data missing...</p>
                    </td>
                </tr>
            `;

            $.ajax({
                url: '{{ url("/trsmis/ajax") }}',
                method: 'GET',
                data: {
                    tanggal_mulai: tanggalMulai,
                    tanggal_akhir: tanggalAkhir,
                    karyawan: karyawan,
                    shift: shift,
                    grub: grub,
                    departemen: departemen,
                    status: statusFilter,
                    status_karyawan: statusKaryawan
                },
                success: function(response) {
                    renderLastKonfirmasi(response.last_confirmed_at_formatted);

                    if (response.success && response.data.length > 0) {
                        renderTable(response.data);
                    } else {
                            document.getElementById('tableBody').innerHTML = `
                                <tr>
                                    <td colspan="17" class="text-center py-5 text-sm font-weight-normal">
                                        <i class="fas fa-inbox fa-3x text-secondary mb-3 d-block"></i>
                                        <p class="text-sm text-secondary">Tidak ada data missing untuk periode yang dipilih</p>
                                    </td>
                                </tr>
                            `;
                            document.getElementById('selectedCount').textContent = '0';
                            document.getElementById('selectAll').checked = false;
                    }
                },
                error: function(xhr, status, error) {
                    document.getElementById('tableBody').innerHTML = `
                        <tr>
                            <td colspan="17" class="text-center py-5 text-danger text-sm font-weight-normal">
                                <i class="fas fa-exclamation-triangle fa-2x mb-3 d-block"></i>
                                <p>Error: ${error}</p>
                            </td>
                        </tr>
                    `;
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat data. Silakan coba lagi.',
                        confirmButtonColor: '#5e72e4'
                    });
                }
            });
        }

        function renderLastKonfirmasi(lastConfirmedAtFormatted) {
            const target = document.getElementById('lastKonfirmasiInfo');

            if (!target) {
                return;
            }

            if (!lastConfirmedAtFormatted) {
                target.textContent = 'Terakhir kali konfirmasi: belum ada';
            } else {
                target.textContent = `Terakhir kali konfirmasi: ${lastConfirmedAtFormatted}`;
            }
        }

        function showInitialDataCheckWarning(summary, pullStatus, pullStatusByStatus) {
            const notPulled = (pullStatus && pullStatus.not_pulled) ? pullStatus.not_pulled : [];
            const incompletePull = (pullStatus && pullStatus.incomplete) ? pullStatus.incomplete : [];
            const statusPullRows = (pullStatusByStatus && pullStatusByStatus.rows)
                ? pullStatusByStatus.rows
                : [];
            const hasPullProblem = statusPullRows.length > 0 || notPulled.length > 0 || incompletePull.length > 0;
            const hasSummaryProblem = summary && summary.has && summary.dates;

            if (!hasPullProblem && !hasSummaryProblem) {
                return null;
            }

            const statusSummary = {};
            const conditionPriority = {
                'Lengkap': 1,
                'Belum Lengkap': 2,
                'Belum Dipull': 3
            };
            const addStatusSummary = function (date, status, condition, total) {
                const key = `${date}|${status}`;
                const current = statusSummary[key];
                const normalizedTotal = total === null || total === undefined || total === '-' || total === ''
                    ? null
                    : Number(total);
                if (!current || (conditionPriority[condition] || 0) > (conditionPriority[current.condition] || 0)) {
                    statusSummary[key] = { date, status, condition, total: normalizedTotal };
                } else if (normalizedTotal !== null && (current.total === null || normalizedTotal > current.total)) {
                    current.total = normalizedTotal;
                }
            };

            statusPullRows.forEach(item => addStatusSummary(item.tanggal, item.status, item.condition, item.total));
            if (!statusPullRows.length) {
                notPulled.forEach(date => addStatusSummary(date, '-', 'Belum Dipull', '-'));
                incompletePull.forEach(date => addStatusSummary(date, '-', 'Belum Lengkap', '-'));
            }
            if (hasSummaryProblem) {
                Object.entries(summary.dates).forEach(([date, detail]) => {
                    (detail.complete || []).forEach(item => addStatusSummary(date, item.status, 'Lengkap', '-'));
                    (detail.incomplete || []).forEach(item => addStatusSummary(date, item.status, 'Belum Lengkap', Number(item.total || 0)));
                });
            }

            const tableRows = Object.values(statusSummary).map(item => {
                const badgeHtml = item.condition === 'Lengkap'
                    ? '<span class="badge bg-success">Lengkap</span>'
                    : item.condition === 'Belum Dipull'
                        ? '<span class="badge bg-danger">Belum Dipull</span>'
                        : '<span class="badge" style="background-color: #fb6340 !important; color: #ffffff !important;">Belum Lengkap</span>';
                const totalHtml = item.condition === 'Belum Lengkap' && item.total !== null && item.total !== undefined
                    ? `${Number(item.total)} data`
                    : '-';
                return `<tr><td>${escapeHtml(formatDate(item.date))}</td><td>${escapeHtml(item.status)}</td><td>${badgeHtml}</td><td>${escapeHtml(totalHtml)}</td></tr>`;
            });

            const summaryTable = `<div class="table-responsive text-left"><table class="table table-sm table-bordered mb-0"><thead style="background-color: #00b7bd4f;"><tr><th>Tanggal</th><th>Status Karyawan</th><th>Kondisi</th><th>Jumlah</th></tr></thead><tbody>${tableRows.join('')}</tbody></table></div>`;

            return Swal.fire({
                icon: 'warning',
                title: 'Data Belum Lengkap',
                html: `${summaryTable}<div class="text-sm text-secondary text-left mt-3">Silakan pull ulang data dan pastikan semua data tukar jadwal telah diinput pada sistem FTM. Data missing belum dimuat.</div>`,
                width: '900px',
                confirmButtonColor: '#028284'
            });
        }

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

        function escapeForJsSingleQuote(value) {
            return String(value)
                .replace(/\\/g, '\\\\')
                .replace(/'/g, "\\'")
                .replace(/\n/g, ' ')
                .replace(/\r/g, ' ');
        }

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

        function sortMissingRowsFirst(data) {
            // Baris selectable (ada checkbox) selalu di atas, lalu urut tanggal asc.
            // Dibuat stabil: simpan index awal agar urutan dalam grup tetap konsisten.
            return (data || []).map((row, idx) => ({ row: row, idx: idx })).sort((a, b) => {
                const aSel = (typeof isSelectableRow === 'function' && isSelectableRow(a.row.status)) ? 0 : 1;
                const bSel = (typeof isSelectableRow === 'function' && isSelectableRow(b.row.status)) ? 0 : 1;
                if (aSel !== bSel) return aSel - bSel;
                const aDate = String(a.row.tanggal || '');
                const bDate = String(b.row.tanggal || '');
                if (aDate !== bDate) return aDate < bDate ? -1 : 1;
                return a.idx - b.idx;
            }).map(item => item.row);
        }

        function buildRowsHtml(data, withCheckbox = true, checkboxClass = 'row-checkbox', onChangeHandler = 'updateSelectedCount()') {
            let html = '';

            data.forEach((row, index) => {
                const selectable = (typeof isSelectableRow === 'function') ? isSelectableRow(row.status) : false;
                const statusItems = String(row.status || '')
                    .split(',')
                    .map(item => item.trim())
                    .filter(item => item.length > 0);

                const statusBadges = statusItems.map((statusItem) => {
                    let statusClass = 'bg-gradient-secondary';
                    const normalizedStatus = statusItem.toUpperCase();

                    if (normalizedStatus === 'BELUM FINGER OUT' || normalizedStatus === 'BELUM FINGER IN') {
                        statusClass = 'bg-danger';
                    } else if (normalizedStatus === 'TIDAK ADA SCAN' || normalizedStatus === 'TIDAK ADA JADWAL SHIFT' || normalizedStatus === 'MANGKIR') {
                        statusClass = 'bg-danger';
                    } else if (normalizedStatus === 'INSIDENTAL') {
                        statusClass = 'bg-gradient-warning';
                    } else if (normalizedStatus === 'IZIN' || normalizedStatus === 'SAKIT' || normalizedStatus === 'CUTI' || normalizedStatus === 'TUKAR JADWAL') {
                        statusClass = 'bg-gradient-info';
                    } else if (normalizedStatus === 'LUPA SCAN') {
                        statusClass = 'bg-gradient-warning';
                    }

                    return `<span class="badge badge-sm ${statusClass} me-1">${escapeHtml(statusItem)}</span>`;
                }).join('');

                html += `
                    <tr>
                        ${withCheckbox && selectable ? `<td class="text-sm font-weight-normal" data-order="0"><input type="checkbox" class="${checkboxClass}" value="${row.id}" data-status="${escapeHtml(row.status || '')}" onchange="${onChangeHandler}"></td>` : '<td class="text-sm font-weight-normal" data-order="1"></td>'}
                        <td class="text-sm font-weight-normal">${index + 1}</td>
                        <td class="text-sm font-weight-normal" data-order="${escapeHtml(row.tanggal || '')}">${formatDate(row.tanggal)}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(row.pin || '-')}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(row.nik || '-')}</td>
                        <td class="text-sm font-weight-normal">${isMissingShift(row.shift) ? '<span class="badge badge-sm bg-danger">Missing</span>' : escapeHtml(row.shift)}</td>
                        <td class="text-center">${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>'}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(row.nama || '-')}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(row.departemen || '-')}</td>
                        <td class="text-sm font-weight-normal">${escapeHtml(row.grub || '-')}</td>
                        <td class="text-sm font-weight-normal">${row.jam_masuk ? escapeHtml(row.jam_masuk) : '-'}</td>
                        <td class="text-sm font-weight-normal">${row.scan_masuk ? escapeHtml(row.scan_masuk) : '<span class="badge badge-sm bg-danger">Missing</span>'}</td>
                        <td class="text-sm font-weight-normal">${row.terlambat ? escapeHtml(row.terlambat) : '-'}</td>
                        <td class="text-sm font-weight-normal">${row.jam_keluar ? escapeHtml(row.jam_keluar) : '-'}</td>
                        <td class="text-sm font-weight-normal">${row.scan_keluar ? escapeHtml(row.scan_keluar) : '<span class="badge badge-sm bg-danger">Missing</span>'}</td>
                        <td class="text-sm font-weight-normal">${row.pulang_cepat ? escapeHtml(row.pulang_cepat) : '-'}</td>
                        <td class="text-sm font-weight-normal">${statusBadges || '-'}</td>
                    </tr>
                `;
            });

            return html;
        }

        function renderTable(data) {
            // Kumpulkan baris yang ada checkbox-nya (selectable) di atas / halaman awal.
            const sortedData = sortMissingRowsFirst(data || []);
            allMissingRowsData = sortedData;
            document.getElementById('tableBody').innerHTML = buildRowsHtml(sortedData, true, 'row-checkbox', 'onRowCheckboxChange(this)');

            dataMissingTable = $('#dataMissingTable').DataTable({
                language: {
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },
                searching: true,
                responsive: true,
                order: [[0, 'asc'], [2, 'asc']],
                orderFixed: [[0, 'asc']],
                columnDefs: [
                    { targets: 0, orderable: true }
                ],
                dom: 'Brtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                        autoFilter: true,
                        sheetName: 'Data Missing',
                        exportOptions: { columns: ':visible:not(:first-child):not(:last-child)' }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: { columns: ':visible:not(:first-child):not(:last-child)' }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                        exportOptions: { columns: ':visible:not(:first-child):not(:last-child)' }
                    }
                ]
            });

            dataMissingTable.buttons().container().appendTo('#dataMissingExportButtons');
            styleMsjButtons();
            document.getElementById('selectAll').checked = false;
            updateSelectedCount();

            // Sinkronkan checkbox tiap kali halaman paginasi digambar ulang,
            // agar pilihan lintas halaman tetap tampil tercentang.
            dataMissingTable.on('draw', restoreVisibleCheckboxes);
        }

        function formatDate(dateStr) {
            if (!dateStr) return '-';
            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

            if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
                const [year, month, day] = dateStr.split('-');
                const monthIndex = Math.max(0, parseInt(month, 10) - 1);
                return `${day} ${months[monthIndex] || '-'} ${year}`;
            }

            const date = new Date(dateStr);
            if (Number.isNaN(date.getTime())) {
                return dateStr;
            }

            const day = String(date.getDate()).padStart(2, '0');
            const month = months[date.getMonth()] || '-';
            const year = date.getFullYear();
            return `${day} ${month} ${year}`;
        }

        // Simpan pilihan lintas halaman paginasi: id => status baris.
        let selectedMissingRows = new Map();
        // Semua data terakhir yang dirender (untuk Pilih Semua lintas halaman).
        let allMissingRowsData = [];

        // Status yang boleh dipilih (checkbox): Terlambat, Pulang Cepat, Belum Finger In, Belum Finger Out.
        const SELECTABLE_STATUSES = ['TERLAMBAT', 'PULANG CEPAT', 'BELUM FINGER IN', 'BELUM FINGER OUT'];

        function isSelectableRow(status) {
            const items = String(status || '')
                .split(',')
                .map(item => item.trim().toUpperCase())
                .filter(item => item.length > 0);

            if (items.length === 0) {
                return false;
            }

            return items.some(item => SELECTABLE_STATUSES.includes(item));
        }

        function getCurrentPageCheckboxes() {
            // Ambil checkbox hanya dari halaman paginasi yang sedang aktif.
            if (dataMissingTable) {
                return Array.from(dataMissingTable.rows({ page: 'current' }).nodes())
                    .map(tr => tr.querySelector('.row-checkbox'))
                    .filter(Boolean);
            }

            return Array.from(document.querySelectorAll('.row-checkbox'));
        }

        function syncSelectAllRows(isChecked) {
            // Hanya pilih baris pada HALAMAN AKTIF (tidak lintas page).
            getCurrentPageCheckboxes().forEach(cb => {
                const id = parseInt(cb.value, 10);
                if (isChecked && isSelectableRow(cb.dataset.status)) {
                    selectedMissingRows.set(id, String(cb.dataset.status || '').trim());
                } else {
                    selectedMissingRows.delete(id);
                }
                cb.checked = isChecked && isSelectableRow(cb.dataset.status);
            });

            updateSelectedCount();
        }

        function restoreVisibleCheckboxes() {
            // Sinkronkan checkbox pada halaman aktif dengan pilihan tersimpan
            // (dipanggil setiap DataTable menggambar ulang halaman).
            document.querySelectorAll('.row-checkbox').forEach(cb => {
                const id = parseInt(cb.value, 10);
                cb.checked = selectedMissingRows.has(id);
            });

            // Header select-all harus dihitung ulang: kalau halaman baru belum
            // dipilih semua, header tidak ikut tercentang.
            updateSelectedCount();
        }

        function totalSelectableCount() {
            return allMissingRowsData.filter(row => isSelectableRow(row.status)).length;
        }

        function toggleSelectAll() {
            // Tombol "Pilih Semua": memilih/membatalkan SEMUA baris selectable
            // di SEMUA halaman paginasi.
            const shouldSelect = selectedMissingRows.size < totalSelectableCount();
            syncAllPagesSelection(shouldSelect);
        }

        function syncAllPagesSelection(isChecked) {
            if (isChecked) {
                // Tambahkan semua baris selectable dari seluruh data.
                allMissingRowsData.forEach(row => {
                    if (isSelectableRow(row.status)) {
                        selectedMissingRows.set(parseInt(row.id, 10), String(row.status || '').trim());
                    }
                });
            } else {
                selectedMissingRows.clear();
            }

            // Sinkronkan tampilan checkbox halaman aktif + header.
            restoreVisibleCheckboxes();
            updateSelectedCount();
        }

        function onRowCheckboxChange(cb) {
            const id = parseInt(cb.value, 10);
            if (cb.checked) {
                selectedMissingRows.set(id, String(cb.dataset.status || '').trim());
            } else {
                selectedMissingRows.delete(id);
            }
            updateSelectedCount();
        }

        function updateSelectedCount() {
            const checkedCount = selectedMissingRows.size;
            document.getElementById('selectedCount').textContent = checkedCount;

            // Header select-all tercentang penuh bila semua baris selectable pada
            // halaman aktif sudah masuk pilihan.
            const visibleCheckboxes = getCurrentPageCheckboxes();
            const allVisibleSelected = visibleCheckboxes.length > 0 &&
                visibleCheckboxes.every(cb => selectedMissingRows.has(parseInt(cb.value, 10)));
            document.getElementById('selectAll').checked = allVisibleSelected;

            const btn = document.getElementById('btnKonfirmasi');
            if (btn) {
                btn.disabled = checkedCount === 0;
            }
        }

        // ===== Konfirmasi Data Missing (Bootstrap modal) =====

        function getOrCreateModal(el) {
            if (!el) {
                return null;
            }
            return bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el);
        }

        // Format keterangan sesuai ketentuan: "Konfirmasi kategori (keterangan)"
        // contoh: "Konfirmasi Terlambat (tidak finger out 3 kali)".
        function buildFormattedKeterangan(statusAkhir, keterangan) {
            const ket = String(keterangan || '').trim();
            return ket !== ''
                ? `Konfirmasi ${statusAkhir} (${ket})`
                : `Konfirmasi ${statusAkhir}`;
        }

        // Status akhir default saat modal edit dibuka: bagian status pertama
        // yang merupakan salah satu opsi dropdown edit.
        function resolveDefaultStatusAkhir(statusAwal) {
            const parts = String(statusAwal || '').split(',').map(s => s.trim()).filter(Boolean);
            for (const part of parts) {
                const matched = MANUAL_STATUS_OPTIONS.find(opt => opt.toUpperCase() === part.toUpperCase());
                if (matched) {
                    return matched;
                }
            }
            return MANUAL_STATUS_OPTIONS[0];
        }

        // Render kolom Status pada modal konfirmasi:
        // - Belum diedit : badge status asli + tombol icon edit.
        // - Sudah diedit : hanya badge status baru (hasil edit) dengan icon edit
        //                  di dalam badge, lalu keterangan + tombol Reset.
        function refreshKonfirmasiEditInfo(id) {
            const container = document.getElementById('konfStatusCell_' + id);
            if (!container) {
                return;
            }

            const rowId = parseInt(id, 10);
            const fullRow = allMissingRowsData.find(r => parseInt(r.id, 10) === rowId);
            const override = editedRowOverrides.get(rowId);

            if (!override) {
                const statusList = fullRow && fullRow.status
                    ? String(fullRow.status).split(',').map(s => s.trim()).filter(Boolean)
                    : [];
                const statusBadges = statusList.map(statusItem => {
                    let badgeClass = 'bg-gradient-secondary';
                    const normalized = statusItem.toUpperCase();

                    if (
                        normalized === 'BELUM FINGER OUT' ||
                        normalized === 'BELUM FINGER IN' ||
                        normalized === 'TIDAK ADA SCAN' ||
                        normalized === 'TIDAK ADA JADWAL SHIFT' ||
                        normalized === 'MANGKIR'
                    ) {
                        badgeClass = 'bg-danger';
                    } else if (normalized === 'INSIDENTAL') {
                        badgeClass = 'bg-gradient-warning';
                    } else if (
                        normalized === 'IZIN' ||
                        normalized === 'SAKIT' ||
                        normalized === 'CUTI' ||
                        normalized === 'TUKAR JADWAL'
                    ) {
                        badgeClass = 'bg-gradient-info';
                    } else if (normalized === 'LUPA SCAN') {
                        badgeClass = 'bg-gradient-warning';
                    }

                    return `<span class="badge badge-sm ${badgeClass} me-1">${escapeHtml(statusItem)}</span>`;
                }).join(' ');

                container.innerHTML = `
                    ${statusBadges || '-'}
                    <button type="button" class="btn btn-sm btn-outline-primary ms-1" style="padding: 0.1rem 0.45rem; vertical-align: middle;" onclick="openEditStatusModal(${rowId})" title="Edit status yang akan disimpan ke trs_data_missing_status">
                        <i class="fas fa-pen"></i>
                    </button>`;
                return;
            }

            // Sudah diedit: tampilkan HANYA status baru; icon edit ada di badge,
            // tombol Reset di samping badge.
            container.innerHTML = `
                <span class="badge badge-sm bg-success" style="cursor: pointer;" onclick="openEditStatusModal(${rowId})" title="Edit kembali status yang akan disimpan ke trs_data_missing_status">
                    ${escapeHtml(override.statusAkhir)}<i class="fas fa-pen ms-1" style="font-size: 0.7rem;"></i>
                </span>
                <button type="button" class="btn btn-link btn-sm p-0 ms-1" style="font-size: 0.75rem; vertical-align: middle;" onclick="resetEditStatus(${rowId})" title="Batalkan edit status">
                    <i class="fas fa-rotate-left me-1"></i>Reset
                </button>
                <div class="text-sm mt-1">
                    <span class="text-secondary">${escapeHtml(buildFormattedKeterangan(override.statusAkhir, override.keterangan))}</span>
                </div>`;
        }

        function resetEditStatus(id) {
            editedRowOverrides.delete(parseInt(id, 10));
            refreshKonfirmasiEditInfo(id);
        }

        // Preview keterangan final pada modal edit.
        function updateEditStatusPreview() {
            const statusAkhir = document.getElementById('editStatusAkhir').value;
            const keterangan = document.getElementById('editStatusKeterangan').value;
            document.getElementById('editStatusKeteranganPreview').textContent =
                buildFormattedKeterangan(statusAkhir, keterangan);
        }

        // Bangun payload baris terpilih; sertakan hasil edit bila baris diedit
        // (status_akhir -> kolom kategori, keterangan -> catatan bebas).
        function buildKonfirmasiRows() {
            return Array.from(selectedMissingRows.entries()).map(([id, status]) => {
                if (!Number.isInteger(id) || id <= 0) {
                    return null;
                }

                const item = { id: id, status: status };
                const override = editedRowOverrides.get(id);
                if (override) {
                    item.status_akhir = override.statusAkhir;
                    item.keterangan = override.keterangan;
                }
                return item;
            }).filter(row => row !== null);
        }

        // Konfirmasi Selected Data (kategori mengikuti status tiap baris;
        // status bisa diedit per baris lewat ikon edit pada kolom Status).
        function konfirmasiSelected() {
            // Ambil pilihan dari Map tersimpan (tetap valid lintas halaman paginasi).
            const rows = buildKonfirmasiRows();

            if (rows.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada data terpilih',
                    text: 'Silakan pilih minimal satu baris data missing yang akan dikonfirmasi.',
                    confirmButtonColor: '#5e74e5'
                });
                return;
            }

            const tableRowsHtml = rows.map((row, index) => {
                const fullRow = allMissingRowsData.find(r => parseInt(r.id, 10) === parseInt(row.id, 10));
                const rowDate = fullRow && fullRow.tanggal ? formatDate(fullRow.tanggal) : '-';
                const rowNama = fullRow && fullRow.nama ? escapeHtml(fullRow.nama) : '-';
                return `
                    <tr>
                        <td class="px-4 py-2 text-center">${index + 1}</td>
                        <td class="px-4 py-2 text-center">${rowDate}</td>
                        <td class="px-4 py-2">${rowNama}</td>
                        <td class="px-4 py-2">
                            <div id="konfStatusCell_${row.id}"></div>
                        </td>
                    </tr>
                `;
            }).join('');

            document.getElementById('konfirmasiModalBody').innerHTML = tableRowsHtml;
            document.getElementById('btnModalKonfirmasiLabel').textContent = `Ya, Konfirmasi (${rows.length} data)`;
            document.getElementById('konfirmasiModalInfo').innerHTML =
                'Status mengikuti status pada list data, apabila ingin melakukan perubahan status tekan tombol dengan icon <i class="fas fa-pen"></i>.';

            getOrCreateModal(document.getElementById('konfirmasiDataMissingModal')).show();

            // Tampilkan kembali info edit yang sudah tersimpan untuk tiap baris.
            rows.forEach(r => refreshKonfirmasiEditInfo(r.id));
        }

        // Submit konfirmasi dari modal; payload menyertakan hasil edit per baris.
        function submitKonfirmasiDataMissing() {
            if (konfirmasiSubmitting) {
                return;
            }

            const rows = buildKonfirmasiRows();
            if (rows.length === 0) {
                const emptyInst = bootstrap.Modal.getInstance(document.getElementById('konfirmasiDataMissingModal'));
                if (emptyInst) {
                    emptyInst.hide();
                }
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada data terpilih',
                    text: 'Silakan pilih minimal satu baris data missing yang akan dikonfirmasi.',
                    confirmButtonColor: '#5e74e5'
                });
                return;
            }

            konfirmasiSubmitting = true;
            const btn = document.getElementById('btnModalKonfirmasiSimpan');
            btn.disabled = true;
            document.getElementById('btnModalKonfirmasiLabel').textContent = 'Memproses...';

            $.ajax({
                url: '{{ url("/trsmis/konfirmasi") }}',
                method: 'POST',
                data: {
                    rows: rows,
                    action: 'confirm',
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response && response.success) {
                        const inst = bootstrap.Modal.getInstance(document.getElementById('konfirmasiDataMissingModal'));
                        if (inst) {
                            inst.hide();
                        }
                        renderLastKonfirmasi(response.last_confirmed_at_formatted);
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message || 'Data berhasil dikonfirmasi.',
                            confirmButtonColor: '#5e72e4'
                        }).then(() => getDataMissing());
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: (response && response.message) || 'Terjadi kesalahan.',
                            confirmButtonColor: '#5e72e4'
                        });
                    }
                },
                error: function(xhr) {
                    let message = 'Terjadi kesalahan saat menyimpan konfirmasi.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: message,
                        confirmButtonColor: '#5e72e4'
                    });
                },
                complete: function() {
                    konfirmasiSubmitting = false;
                    btn.disabled = false;
                    document.getElementById('btnModalKonfirmasiLabel').textContent = `Ya, Konfirmasi (${rows.length} data)`;
                }
            });
        }

        // Buka modal edit status untuk satu baris (ikon edit pada kolom Status).
        function openEditStatusModal(id) {
            const rowId = parseInt(id, 10);
            const fullRow = allMissingRowsData.find(r => parseInt(r.id, 10) === rowId);
            if (!fullRow) {
                return;
            }

            currentEditRowId = rowId;
            const statusAwal = String(fullRow.status || '').trim() || '-';
            const override = editedRowOverrides.get(rowId);

            document.getElementById('editStatusRowInfo').innerHTML =
                `<i class="fas fa-user me-1"></i><strong>${escapeHtml(fullRow.nama || '-')}</strong> &middot; ` +
                `${escapeHtml(formatDate(fullRow.tanggal))} &middot; NIK ${escapeHtml(fullRow.nik || '-')}`;
            document.getElementById('editStatusAwal').value = statusAwal;
            document.getElementById('editStatusAkhir').value = override
                ? override.statusAkhir
                : resolveDefaultStatusAkhir(statusAwal);
            document.getElementById('editStatusKeterangan').value = override ? String(override.keterangan || '') : '';
            updateEditStatusPreview();

            // Sembunyikan modal konfirmasi dulu agar kedua modal tidak tumpang tindih.
            const confirmEl = document.getElementById('konfirmasiDataMissingModal');
            const confirmInst = bootstrap.Modal.getInstance(confirmEl);
            if (confirmInst) {
                const onConfirmHidden = function () {
                    confirmEl.removeEventListener('hidden.bs.modal', onConfirmHidden);
                    getOrCreateModal(document.getElementById('editStatusDataMissingModal')).show();
                };
                confirmEl.addEventListener('hidden.bs.modal', onConfirmHidden);
                confirmInst.hide();
            } else {
                getOrCreateModal(document.getElementById('editStatusDataMissingModal')).show();
            }
        }

        // Simpan hasil edit ke Map lalu tutup modal edit
        // ('hidden.bs.modal' -> refresh info & buka lagi modal konfirmasi).
        function saveEditStatusModal() {
            if (currentEditRowId === null) {
                return;
            }

            const statusAkhir = document.getElementById('editStatusAkhir').value;
            const keterangan = document.getElementById('editStatusKeterangan').value.trim();

            if (MANUAL_STATUS_OPTIONS.indexOf(statusAkhir) === -1) {
                return;
            }

            editedRowOverrides.set(currentEditRowId, { statusAkhir: statusAkhir, keterangan: keterangan });

            const editInst = bootstrap.Modal.getInstance(document.getElementById('editStatusDataMissingModal'));
            if (editInst) {
                editInst.hide();
            }
        }

        // Setelah modal edit ditutup (Simpan/Kembali/ESC): muat ulang info edit
        // pada kolom Status, lalu tampilkan kembali modal konfirmasi.
        document.addEventListener('DOMContentLoaded', function () {
            const editModalEl = document.getElementById('editStatusDataMissingModal');
            if (!editModalEl) {
                return;
            }
            editModalEl.addEventListener('hidden.bs.modal', function () {
                refreshKonfirmasiEditInfo(currentEditRowId);
                currentEditRowId = null;
                if (selectedMissingRows.size > 0) {
                    getOrCreateModal(document.getElementById('konfirmasiDataMissingModal')).show();
                }
            });
        });
        function initSelect2Trsmis() {
            const isReadonly = {{ $status_filter_for_role['readonly'] ?? false ? 'true' : 'false' }};

            $('#status_karyawan').select2({
                placeholder: 'Pilih Status Karyawan',
                allowClear: !isReadonly,
                width: '100%',
                multiple: true,
                language: {
                    noResults: () => "Tidak ada hasil",
                    searching: () => "Mencari..."
                },
                closeOnSelect: !isReadonly,
                selectOnClose: !isReadonly,
                disabled: isReadonly
            });

            if (isReadonly) {
                $('#status_karyawan').prop('readonly', true);
                $('#status_karyawan').prop('disabled', true);
            }
        }

        function normalizeStatusKaryawanSelection(event) {
            const select = document.getElementById('status_karyawan');
            if (!select) return;
            const values = Array.from(select.selectedOptions).map(option => option.value);
            const selectedValue = event && event.params && event.params.data
                ? String(event.params.data.id)
                : '';
            if (selectedValue === 'all') {
                $(select).val(['all']).trigger('change.select2');
            } else if (selectedValue !== '' && values.includes('all')) {
                $(select).val(values.filter(value => value !== 'all')).trigger('change.select2');
            } else if (values.length === 0) {
                $(select).val(['all']).trigger('change.select2');
            }
        }

        $(document).ready(function() {
            $(document).on('select2:select select2:unselect', '#status_karyawan', normalizeStatusKaryawanSelection);
            if (typeof $.fn.select2 === 'undefined') {
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">');
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap.css">');
                $.getScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js')
                    .done(function() { initSelect2Trsmis(); })
                    .fail(function() { console.warn('Select2 CDN gagal dimuat'); });
            } else {
                initSelect2Trsmis();
            }
        });

    </script>
    @endpush
@endsection