@extends('layouts.adminlte')

@section('title', 'SURAT PERINTAH LEMBUR')
@section('page_title', 'SURAT PERINTAH LEMBUR')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/fullcalendar/index.global.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
<style>
  .select2-container--bootstrap-5 .select2-selection {
      min-height: 31px;
  }
  .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
      line-height: 29px;
  }
  .select2-container--bootstrap-5 .select2-selection__arrow {
      height: 29px;
  }
  #splTableLoading {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.78);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 20;
      backdrop-filter: blur(1px);
  }
  #splTableLoading .loading-panel {
      min-width: 220px;
      text-align: center;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0,0,0,.08);
      padding: 1rem 1.25rem;
  }
  #splTableLoading .loading-text {
      font-weight: 600;
      color: #495057;
  }
  #splModal .modal-dialog {
      margin: 1rem auto;
      max-width: min(1140px, calc(100vw - 2rem));
      height: calc(100vh - 2rem);
  }
  #splModal .modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
  }
  #splModal .modal-header,
  #splModal .modal-footer {
      flex-shrink: 0;
  }
  #splModal #splForm {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
  }
  #splModal .modal-body {
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
  }
  #splModal .spl-compact-grid .form-label {
      font-size: .84rem;
      margin-bottom: .2rem;
  }
  #splModal .spl-compact-grid .form-control,
  #splModal .spl-compact-grid .form-select {
      min-height: calc(1.5em + .65rem + 2px);
      padding-top: .32rem;
      padding-bottom: .32rem;
  }
  #splModal .spl-compact-note {
      font-size: .78rem;
  }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Surat Perintah Lembur + Approval</h3>
        <div class="d-flex gap-2">
            <div class="btn-group btn-group-sm" role="group" aria-label="Switch View">
                <button class="btn btn-outline-secondary active" id="btnViewTable" type="button">Table</button>
                <button class="btn btn-outline-secondary" id="btnViewCalendar" type="button">Calendar</button>
            </div>
            @if(!($selfMode ?? false))
            <div class="btn-group btn-group-sm" role="group" aria-label="Import">
                <a class="btn btn-outline-secondary" href="{{ route('surat_perintah_lembur.import_template') }}">
                    <i class="fas fa-file-excel me-1"></i>Template Import
                </a>
                <button class="btn btn-outline-primary" id="btnImportXlsx" type="button">
                    <i class="fas fa-file-upload me-1"></i>Import XLSX
                </button>
            </div>
            <a class="btn btn-outline-primary btn-sm" href="{{ route('surat_perintah_lembur.review_candidate_index') }}">
                <i class="fas fa-search-plus me-1"></i>Review Candidate SPL
            </a>
            <a class="btn btn-outline-success btn-sm" href="{{ route('surat_perintah_lembur.separate_payout_index') }}">
                <i class="fas fa-wallet me-1"></i>Payout SPL Separate
            </a>
            <button class="btn btn-outline-info btn-sm" id="btnSyncSplThirdParty" type="button">
                <i class="fas fa-database me-1"></i>Sync SPL 3rd Party
            </button>
            <button class="btn btn-outline-secondary btn-sm" id="btnDiagnoseSplThirdParty" type="button">
                <i class="fas fa-fingerprint me-1"></i>Diagnosa Finger SPL
            </button>
            @endif
            <button class="btn btn-primary btn-sm" id="btnAdd">Tambah SPL</button>
        </div>
    </div>
    <div class="card-body">
        <div class="d-flex flex-wrap gap-2 mb-3">
            <button class="btn btn-sm btn-primary btn-special-filter active" data-filter="all" type="button">Semua SPL</button>
            <button class="btn btn-sm btn-outline-primary btn-special-filter" data-filter="special" type="button">Special Only</button>
            <button class="btn btn-sm btn-outline-primary btn-special-filter" data-filter="payroll" type="button">Masuk Payroll</button>
            <button class="btn btn-sm btn-outline-primary btn-special-filter" data-filter="separate" type="button">Bayar Terpisah</button>
            <span class="badge text-bg-secondary align-self-center" id="splSpecialFilterBadge">Filter: Semua SPL</span>
        </div>
        <div id="tableViewWrapper">
            @if(!($selfMode ?? false))
            <div class="d-flex flex-wrap gap-2 mb-2">
                <button class="btn btn-sm btn-outline-warning" id="btnBulkUpdate">Bulk Edit</button>
                <button class="btn btn-sm btn-outline-primary" id="btnBulkSubmit">Bulk Submit</button>
                <button class="btn btn-sm btn-outline-success" id="btnBulkApprove">Bulk Approve</button>
                <button class="btn btn-sm btn-outline-secondary" id="btnBulkUnapprove">Bulk Batal Approve</button>
                <button class="btn btn-sm btn-outline-danger" id="btnBulkReject">Bulk Reject</button>
                <button class="btn btn-sm btn-danger" id="btnBulkDelete">Bulk Delete</button>
            </div>
            @endif
        <div class="card border-0 bg-light-subtle mb-3">
            <div class="card-body py-3">
                <div class="row g-2 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">Tanggal Dari</label>
                        <input type="date" class="form-control form-control-sm" id="splFilterDateFrom">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">Tanggal Sampai</label>
                        <input type="date" class="form-control form-control-sm" id="splFilterDateTo">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">Pencarian User</label>
                        <input type="text" class="form-control form-control-sm" id="splFilterEmployee" placeholder="Kode / nama karyawan...">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">Pencarian No Job</label>
                        <select class="form-select form-select-sm" id="splFilterJob">
                            <option value="">Semua no job</option>
                            <option value="__UNJOB__">Unjob / No Job</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1">Approval</label>
                        <select class="form-select form-select-sm" id="splFilterApproval">
                            <option value="all">All</option>
                            <option value="approved">Approved</option>
                            <option value="unapproved">Belum Approve</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex gap-2">
                        <button class="btn btn-sm btn-primary flex-fill" id="btnApplySplFilter" type="button">
                            <i class="fas fa-filter me-1"></i>Terapkan
                        </button>
                        <button class="btn btn-sm btn-outline-secondary flex-fill" id="btnResetSplFilter" type="button">
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-relative">
            <div id="splTableLoading">
                <div class="loading-panel">
                    <div class="spinner-border text-primary mb-2" role="status" aria-hidden="true"></div>
                    <div class="loading-text">Memuat data SPL...</div>
                    <div class="small text-muted mt-1" id="splTableLoadingSubtext">Mohon tunggu sebentar.</div>
                </div>
            </div>
            <table id="splTable" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th style="width:32px"><input type="checkbox" id="checkAllRows"></th>
                        <th>No SPL</th>
                        <th>Karyawan</th>
                        <th>Jenis SPL</th>
                        <th>Tanggal Kerja</th>
                        <th>Jam</th>
                        <th>Flow</th>
                        <th>Level Approval</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        </div>

        <div id="calendarViewWrapper" class="d-none">
        <div id="splCalendar"></div>
        </div>
    </div>
</div>

@if(!($selfMode ?? false))
<div class="modal fade" id="splImportModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Import SPL (XLSX) + Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info py-2">
            <div class="small">
                Alur: Upload file -> Preview (validasi per baris) -> Import (commit).
                Jika ada baris gagal, download Error Report (Excel) untuk melihat detail.
            </div>
        </div>
        <div class="row g-2 align-items-end">
            <div class="col-md-8">
                <label class="form-label">File XLSX</label>
                <input type="file" class="form-control" id="splImportFile" accept=".xlsx,.xls" />
                <div class="small text-muted mt-1">
                    Kolom minimal: <code>work_date</code>, <code>employee_code</code>. Lainnya opsional sesuai template.
                </div>
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button class="btn btn-outline-primary w-100" id="btnSplImportPreview" type="button">
                    Preview
                </button>
                <button class="btn btn-primary w-100" id="btnSplImportCommit" type="button" disabled>
                    Import
                </button>
            </div>
        </div>
        <hr>
        <div class="d-flex flex-wrap gap-2 mb-2">
            <div class="badge text-bg-secondary" id="splImportStatTotal">Total: 0</div>
            <div class="badge text-bg-success" id="splImportStatValid">Valid: 0</div>
            <div class="badge text-bg-danger" id="splImportStatInvalid">Invalid: 0</div>
            <div class="badge text-bg-warning text-dark" id="splImportStatDuplicate">Duplikat: 0</div>
            <a class="btn btn-outline-danger btn-sm d-none" id="splImportErrorReportLink" target="_blank">Download Error Report</a>
        </div>
        <div class="table-responsive" style="max-height: 50vh; overflow:auto;">
            <table class="table table-sm table-striped align-middle" id="splImportPreviewTable">
                <thead>
                    <tr>
                        <th style="width:70px">Row</th>
                        <th style="width:90px">Status</th>
                        <th style="width:110px">Tanggal</th>
                        <th style="width:110px">Emp</th>
                        <th style="width:120px">Jenis</th>
                        <th style="width:110px">Jam</th>
                        <th style="width:240px">Rule / Bonus</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endif

@if(!($selfMode ?? false))
<div class="modal fade" id="splThirdPartySyncModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Sync SPL 3rd Party ke Tabel Request SPL</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info">
            Sinkronisasi membaca tabel <code>hrd_input_lembur</code> dan join ke <code>pegawai_all</code>, lalu mencocokkan karyawan Aplikasi memakai <code>finger_id</code>.
            Default range mulai <strong>2025-12-26</strong> sampai hari ini.
            <div class="small mt-2">
                Mapping baku: <code>hrd_input_lembur.id_pegawai = pegawai_all.idx</code>, primary key sumber <code>id_cek</code>, dan finger sumber memakai <code>pegawai_all.kd_finger</code>.
            </div>
            <div class="small mt-1"><strong>Apply Sync</strong> akan membuat / memperbarui record di tabel request SPL utama pada halaman ini.</div>
        </div>
        <div class="alert alert-secondary border d-none mb-3 py-2" id="splSyncSuggestCollapsed">
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2">
                <div>
                    <strong>Saran range disembunyikan.</strong>
                    <span class="small text-muted">Data tidak hilang, hanya panelnya diringkas di browser ini.</span>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" id="btnShowSplSyncSuggestion">
                    Tampilkan Saran
                </button>
            </div>
        </div>
        <div class="border rounded-3 p-3 bg-light-subtle mb-3" id="splSyncSuggestPanel">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2">
                <div>
                    <div class="fw-semibold">Saran Range Tanggal Belum Terambil</div>
                    <div class="small text-muted" id="splSyncSuggestSummary">Memuat saran tanggal dari source SPL 3rd party...</div>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnReloadSplSyncSuggestion">
                        <i class="fas fa-rotate me-1"></i>Refresh Saran
                    </button>
                    <button type="button" class="btn btn-outline-dark btn-sm" id="btnHideSplSyncSuggestion">
                        Sembunyikan
                    </button>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-2 mt-3" id="splSyncSuggestRanges">
                <span class="badge text-bg-secondary">Belum ada saran</span>
            </div>
            <div class="small text-muted mt-2" id="splSyncSuggestHint">
                Klik salah satu saran untuk mengisi Tanggal A dan Tanggal B otomatis.
            </div>
        </div>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Tanggal A (Dari)</label>
                <input type="date" class="form-control" id="splSyncDateFrom" value="2025-12-26">
            </div>
            <div class="col-md-6">
                <label class="form-label">Tanggal B (Sampai)</label>
                <input type="date" class="form-control" id="splSyncDateTo" value="{{ now()->toDateString() }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Tabel SPL Sumber</label>
                <input type="text" class="form-control" id="splSyncSourceTable" value="hrd_input_lembur">
            </div>
            <div class="col-md-6">
                <label class="form-label">Tabel Pegawai Sumber</label>
                <input type="text" class="form-control" id="splSyncEmployeeTable" value="pegawai_all">
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="splSyncUpdateExisting" checked>
                    <label class="form-check-label" for="splSyncUpdateExisting">
                        Update data sync lama jika source reference yang sama ditemukan lagi.
                    </label>
                </div>
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" id="splSyncAutoSubmit">
                    <label class="form-check-label" for="splSyncAutoSubmit">
                        Langsung submit ke approval setelah draft SPL dibuat / diupdate
                    </label>
                    <div class="small text-muted">Kalau OFF, Apply Sync hanya membuat draft. Kalau ON, dokumen draft akan langsung masuk flow approval.</div>
                </div>
            </div>
        </div>
        <div class="border-top mt-4 pt-3">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2 mb-2">
                <div>
                    <div class="fw-semibold">Preview Source 3rd Party</div>
                    <div class="small text-muted">Klik <strong>Preview Sync</strong> untuk melihat data sumber lebih dulu. Data belum masuk ke Aplikasi sampai tombol <strong>Apply Sync</strong> dijalankan.</div>
                </div>
                <div class="d-flex flex-wrap gap-2 small" id="splSyncPreviewSummary">
                    <span class="badge text-bg-secondary">Belum ada preview</span>
                </div>
            </div>
            <div class="alert alert-light border d-none" id="splSyncPreviewMeta"></div>
            <div class="table-responsive border rounded" style="max-height: 46vh; overflow:auto;">
                <table class="table table-sm table-striped align-middle mb-0" id="splSyncPreviewTable">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th style="width:56px;">#</th>
                            <th style="width:120px;">Status</th>
                            <th style="width:110px;">Tanggal</th>
                            <th style="width:110px;">Jam</th>
                            <th style="width:100px;">Finger</th>
                            <th style="width:220px;">Pegawai Sumber</th>
                            <th style="width:220px;">Match Aplikasi</th>
                            <th style="width:110px;">Aksi</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">Belum ada preview source SPL 3rd party.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="border-top mt-4 pt-3">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2 mb-2">
                <div>
                    <div class="fw-semibold">Diagnosa Match Finger</div>
                    <div class="small text-muted">Cek apakah <code>pegawai_all.kd_finger</code> sudah match ke <code>master_karyawans.finger_id</code> di Aplikasi.</div>
                </div>
                <div class="d-flex flex-wrap gap-2 small" id="splSyncDiagnosticSummary">
                    <span class="badge text-bg-secondary">Belum ada diagnosa</span>
                </div>
            </div>
            <div class="row g-2 mb-2">
                <div class="col-md-5">
                    <input type="text" class="form-control form-control-sm" id="splSyncDiagnosticSearch" placeholder="Cari kd_finger / nama / kode karyawan...">
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-sm" id="splSyncDiagnosticDateFilter">
                        <option value="">Semua tanggal</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-center">
                    <div class="small text-muted" id="splSyncDiagnosticSearchInfo">Belum ada data diagnosa.</div>
                </div>
            </div>
            <div class="alert alert-light border d-none" id="splSyncDiagnosticMeta"></div>
            <div class="row g-3">
                <div class="col-lg-7">
                    <div class="small fw-semibold mb-2">Sumber 3rd Party per Nomor Job</div>
                    <div class="table-responsive border rounded" style="max-height: 36vh; overflow:auto;">
                        <table class="table table-sm table-striped align-middle mb-0" id="splSyncDiagnosticSourceTable">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:56px;">#</th>
                                    <th style="width:110px;">Tanggal</th>
                                    <th style="width:220px;">Nomor Job</th>
                                    <th style="width:310px;">Rincian Orang</th>
                                    <th style="width:120px;">Status</th>
                                    <th>Catatan Source</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">Belum ada diagnosa source SPL.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="small fw-semibold mb-2">Match Aplikasi & Profil Bulan</div>
                    <div class="table-responsive border rounded" style="max-height: 36vh; overflow:auto;">
                        <table class="table table-sm table-striped align-middle mb-0" id="splSyncDiagnosticMatchTable">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:56px;">#</th>
                                    <th style="width:180px;">Match Aplikasi</th>
                                    <th style="width:190px;">Profil Bulan</th>
                                    <th style="width:120px;">Status Profil</th>
                                    <th>Catatan Match</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">Belum ada diagnosa match finger.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="border-top mt-3 pt-3">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2 mb-2">
                    <div>
                        <div class="fw-semibold">Inbox Kandidat Pegawai</div>
                        <div class="small text-muted">Kasus <code>Finger Kosong</code>, <code>Join Pegawai Gagal</code>, dan <code>Belum Match Aplikasi</code> dicatat di sini supaya operator bisa follow up pembuatan master karyawan.</div>
                    </div>
                    <div class="d-flex flex-wrap gap-2 small" id="splSyncCandidateSummary">
                        <span class="badge text-bg-secondary">Belum ada kandidat</span>
                    </div>
                </div>
                <div class="table-responsive border rounded" style="max-height: 28vh; overflow:auto;">
                    <table class="table table-sm table-striped align-middle mb-0" id="splSyncCandidateTable">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th style="width:56px;">#</th>
                                <th style="width:120px;">Status</th>
                                <th style="width:140px;">Tipe</th>
                                <th style="width:120px;">Finger</th>
                                <th style="width:220px;">Pegawai Sumber</th>
                                <th style="width:120px;">Periode</th>
                                <th style="width:90px;">Muncul</th>
                                <th>Catatan</th>
                                <th style="width:220px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">Belum ada kandidat pegawai yang dicatat.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="small text-muted mt-2">Alur operator: diagnosa dulu, catat kandidat, lalu gunakan tombol <strong>Review Master</strong> untuk konfirmasi pembuatan/pembenahan Master Karyawan tanpa reload halaman.</div>
                <div class="alert alert-light border small mt-3 mb-0">
                    <div class="fw-semibold mb-2">Keterangan Aksi Kandidat</div>
                    <div class="d-flex flex-column gap-1">
                        <div><span class="badge bg-warning text-dark me-2">Tinjau</span>Lihat detail kandidat terlebih dulu sebelum diputuskan.</div>
                        <div><span class="badge bg-success me-2">Mapped</span>Kandidat diarahkan ke data <code>master_karyawans</code> yang sudah ada, bukan membuat master baru.</div>
                        <div><span class="badge bg-secondary me-2">Abaikan</span>Tutup/noise. Tidak diproses ke master maupun SPL.</div>
                        <div><span class="badge bg-primary me-2">Review Master</span>Buka form master karyawan untuk buat baru atau lengkapi data existing.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="border-top mt-4 pt-3">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2 mb-2">
                <div>
                    <div class="fw-semibold">Staging Dummy SPL 3rd Party</div>
                    <div class="small text-muted">Tabel ini menampung data dummy/perhitungan dari server lama. Tidak ikut approval SPL resmi.</div>
                </div>
                <div class="small text-muted" id="splDummyDataCaption">Memuat data staging...</div>
            </div>
            <div class="table-responsive border rounded" style="max-height: 36vh; overflow:auto;">
                <table class="table table-sm table-striped align-middle mb-0" id="splDummyDataTable">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th style="width:56px;">#</th>
                            <th style="width:110px;">Tanggal</th>
                            <th style="width:110px;">Jam</th>
                            <th style="width:100px;">Finger</th>
                            <th style="width:220px;">Pegawai Sumber</th>
                            <th style="width:220px;">Match Aplikasi</th>
                            <th style="width:120px;">Status</th>
                            <th style="width:120px;">Batch</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">Belum ada data dummy staging.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="w-100 mb-2">
            <div class="alert alert-info small mb-0 py-2 px-3">
                <div class="fw-semibold mb-1">Fungsi Tombol Proses</div>
                <div class="d-flex flex-column gap-1">
                    <div><strong>Catat Kandidat</strong>: simpan hasil temuan kandidat untuk tindak lanjut operator.</div>
                    <div><strong>Diagnosa Finger</strong>: cek apakah <code>kd_finger</code> sumber sudah match ke <code>master_karyawans.finger_id</code>.</div>
                    <div><strong>Preview ke Tabel SPL</strong>: simulasi hasil source SPL ke tabel preview, belum masuk SPL resmi.</div>
                    <div><strong>Import Dummy ke Staging</strong>: kirim ke tabel dummy/staging untuk pembanding, tidak ikut approval resmi.</div>
                    <div><strong>Apply ke Tabel SPL</strong>: benar-benar masukkan hasil source ke tabel SPL aplikasi.</div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-outline-success" id="btnCaptureSplCandidates">Catat Kandidat</button>
        <button type="button" class="btn btn-outline-dark" id="btnDiagnoseSplThirdPartyModal">Diagnosa Finger</button>
        <button type="button" class="btn btn-outline-primary" id="btnPreviewSplThirdPartySync">Preview ke Tabel SPL</button>
        <button type="button" class="btn btn-outline-secondary" id="btnImportSplThirdPartyDummy">Import Dummy ke Staging</button>
        <button type="button" class="btn btn-primary" id="btnApplySplThirdPartySync">Apply ke Tabel SPL</button>
      </div>
    </div>
  </div>
</div>
@endif

<div class="modal fade" id="splModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title" id="splModalTitle">Tambah Surat Perintah Lembur</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="splForm">
        <div class="modal-body">
            <div class="mb-2">
                <label class="form-label">Karyawan</label>
                <div class="border rounded-3 p-3 mb-2 bg-light-subtle">
                    <div class="d-flex flex-column flex-lg-row gap-2 align-items-lg-center justify-content-between">
                        <div>
                            <div class="fw-semibold small text-uppercase text-muted">Sort & Search Karyawan</div>
                            <div class="small text-muted">Pilih target pencarian dulu, lalu search akan menyesuaikan target aktif.</div>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-sm btn-primary btn-karyawan-sort active" data-sort-type="all">Semua</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="code">Kode</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="name">Nama</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="group">Group</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="export_group">Group Cetak</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetKaryawanSort">Reset</button>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="form-label mb-0" for="karyawanSearch">Cari Karyawan</label>
                            <span class="badge text-bg-primary" id="karyawanSearchActiveBadge">Semua</span>
                        </div>
                    </div>
                </div>
                <input type="text" id="karyawanSearch" class="form-control mb-2" placeholder="Cari kode / nama karyawan...">
                <div class="form-text mb-2" id="karyawanSearchHint">Sedang mencari berdasarkan kode atau nama karyawan.</div>
                <select id="karyawanId" class="d-none" required></select>
                <div class="border rounded-3 overflow-hidden" id="karyawanTableWrap">
                    <div class="table-responsive" style="max-height: 320px; overflow:auto;">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:38px;" id="karyawanTableCheckHead">
                                        <input type="checkbox" id="checkAllKaryawanRows">
                                    </th>
                                    <th style="width:120px;">Kode</th>
                                    <th>Nama</th>
                                    <th style="width:140px;">Group</th>
                                    <th style="width:170px;">Group Cetak</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanTableBody">
                                <tr><td colspan="5" class="text-muted text-center py-3">Memuat data karyawan...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="small text-muted" id="karyawanMultiHint" style="display:none;">Tip: tahan Ctrl untuk pilih multiple karyawan.</div>
                <div class="small text-muted mt-1" id="karyawanSelectionCount">0 karyawan dipilih.</div>
                <div class="small text-muted mt-1">Bisa pilih banyak karyawan. Sistem akan membuat SPL terpisah per karyawan, jadi approval tetap berjalan per user.</div>
            </div>
            <div class="spl-compact-grid">
                <div class="row g-2 mb-2">
                    <div class="col-lg-4 col-md-6">
                        <label class="form-label">Flow Approval</label>
                        <select id="flowId" class="form-select"></select>
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label class="form-label">Tgl Pengajuan</label>
                        <input type="date" id="requestDate" class="form-control" required />
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label class="form-label">Tgl Lembur</label>
                        <input type="date" id="workDate" class="form-control" required />
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <label class="form-label">No Job / Project</label>
                        <select id="jobId" class="form-select"></select>
                    </div>
                </div>
                <div class="row g-2 mb-2 align-items-end">
                    <div class="col-lg-4 col-md-6">
                        <label class="form-label">Pilihan Jenis Lembur</label>
                        <select id="overtimeTypePreset" class="form-select">
                            <option value="all">1. 1 pilihan boleh semua</option>
                            <option value="nr1">2. OT Normal / Continues / Target / Emergency / NoRest 1</option>
                            <option value="nr2">3. OT Normal / Continues / Target / Emergency / NoRest 2</option>
                            <option value="nr1_nr2">4. OT Normal / Continues / Target / Emergency / NoRest 1 + NoRest 2</option>
                            <option value="normal_only">5. OT Normal: masuk lebih awal atau normal setelah pulang</option>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <label class="form-label">Jenis SPL Langsung</label>
                        <div class="border rounded p-2 bg-light min-vh-0">
                            <div class="d-flex flex-wrap gap-2" id="overtimeTypeQuickChoices"></div>
                            <div class="small text-muted mt-2" id="selectedOvertimeTypeHint">Pilih salah satu jenis SPL yang muncul.</div>
                        </div>
                        <select id="overtimeType" class="form-select d-none"></select>
                    </div>
                    <div class="col-lg-2 col-md-6" id="timeRangeStartWrap">
                        <label class="form-label">Mulai</label>
                        <input type="time" id="startTime" class="form-control" required />
                    </div>
                    <div class="col-lg-2 col-md-6" id="timeRangeEndWrap">
                        <label class="form-label">Selesai</label>
                        <input type="time" id="endTime" class="form-control" required />
                    </div>
                </div>
                <div class="spl-compact-note text-muted mb-2" id="overtimeTypePresetHint">
                    Pilih preset lalu pilih jenis SPL aktif. Untuk kasus 1 hari ada beberapa blok lembur, gunakan 1 form ini lalu tambahkan segmen satu per satu ke daftar.
                </div>
            </div>
            <div class="border rounded-3 p-3 mt-3 bg-light-subtle d-none" id="specialRuleSection">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div>
                        <div class="fw-semibold">Special Overtime / Bonus Logic</div>
                        <div class="small text-muted" id="specialRuleSectionHint">Field tambahan ini hanya aktif untuk jenis SPL khusus.</div>
                    </div>
                    <span class="badge text-bg-primary" id="specialRuleTypeBadge">Special Rule</span>
                </div>

                <div class="row g-2 d-none" id="emergencyRuleFields">
                    <div class="col-md-4">
                        <label class="form-label">Tambahan Jam Lembur Emergency</label>
                        <input type="number" step="0.01" min="0" id="emergencyBonusHours" class="form-control" placeholder="Contoh: 2.5">
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-1">Insentif Nominal Emergency</label>
                            <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none d-none" id="btnApplyEmergencyNominalDefault">Pakai Default</button>
                        </div>
                        <input type="number" step="0.01" min="0" id="emergencyBonusNominal" class="form-control" placeholder="Contoh: 50000">
                        <div class="form-text" id="emergencyDefaultNominalHint">Default nominal belum diatur.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Metode Pembayaran Bonus</label>
                        <select id="bonusPaymentMode" class="form-select"></select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Baseline Emergency</label>
                        <select id="emergencyBaselineMode" class="form-select"></select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Profile Multiplier Emergency</label>
                        <select id="emergencyMultiplierProfile" class="form-select"></select>
                        <div class="form-text" id="emergencyMultiplierProfileHint">Default emergency dimulai setelah baseline dan memakai profile multiplier yang dipilih.</div>
                    </div>
                    <div class="col-12">
                        <div class="form-text">
                            Jika pada hari itu sudah ada lembur, emergency dibaca setelah baseline selesai. Jam actual tetap jujur; multiplier emergency dan insentif nominal bisa dibayar via payroll atau terpisah.
                        </div>
                    </div>
                </div>

                <div class="row g-2 d-none" id="workTargetRuleFields">
                    <div class="col-md-4">
                        <label class="form-label">Minimum Actual Jam</label>
                        <input type="number" step="0.01" min="0" id="workTargetMinimumActualHours" class="form-control" placeholder="Contoh: 2">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Cap Bonus Jam (Opsional)</label>
                        <input type="number" step="0.01" min="0" id="workTargetBonusCapHours" class="form-control" placeholder="Contoh: 2">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Override Bonus Jam (Opsional)</label>
                        <input type="number" step="0.01" min="0" id="workTargetBonusHours" class="form-control" placeholder="Kosongkan jika bonus dihitung dari sisa target">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Metode Pembayaran Bonus</label>
                        <select id="workTargetPaymentMode" class="form-select"></select>
                    </div>
                    <div class="col-md-6 d-flex align-items-end">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="workTargetCompletionRequired" checked>
                            <label class="form-check-label" for="workTargetCompletionRequired">
                                Bonus hanya berlaku jika pekerjaan dinyatakan selesai
                            </label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-text">
                            Jam actual tetap mengikuti log nyata. Jika pekerjaan selesai lebih cepat, sisa target bisa dibaca sebagai bonus terpisah sesuai approval dan rule payroll.
                        </div>
                    </div>
                </div>

                <div class="row g-2 d-none" id="continuesRuleFields">
                    <div class="col-md-4">
                        <label class="form-label">Target Coverage Hours</label>
                        <input type="number" step="0.01" min="0" id="continuesTargetCoverageHours" class="form-control" placeholder="Contoh: 24">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Jam Kerja Hari Berikutnya</label>
                        <input type="number" step="0.01" min="0" id="continuesNextDayWorkHours" class="form-control" placeholder="Contoh: 4">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kekurangan Jam</label>
                        <input type="number" step="0.01" min="0" id="continuesShortageHours" class="form-control" placeholder="Contoh: 4">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Konversi Bonus</label>
                        <select id="continuesConversionMode" class="form-select"></select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Metode Pembayaran Bonus</label>
                        <select id="continuesPaymentMode" class="form-select"></select>
                    </div>
                </div>

                <div class="row g-2 mt-1 d-none" id="specialSettlementFields">
                    <div class="col-md-6 d-none" id="targetProfilBulanWrap">
                        <label class="form-label">Target Profil Bulan Payroll</label>
                        <select id="targetProfilBulanId" class="form-select"></select>
                        <div class="form-text">Wajib dipilih jika bonus SPL special digabung ke payroll.</div>
                    </div>
                    <div class="col-md-6 d-none" id="separateReleaseProfilBulanWrap">
                        <label class="form-label">Profil Bulan Cair Separate</label>
                        <select id="separateReleaseProfilBulanId" class="form-select"></select>
                        <div class="form-text">Opsional. Pakai ini jika bonus separate baru cair di periode lain, misalnya 2-3 bulan berikutnya.</div>
                    </div>
                </div>

                <div class="mt-2">
                    <label class="form-label">Catatan Bonus / Kebijakan</label>
                    <textarea id="specialNotes" class="form-control" rows="2" placeholder="Catatan tambahan untuk approval dan payroll"></textarea>
                </div>
            </div>
            <div class="border rounded-3 p-3 mt-3 bg-white" id="splSegmentsBuilderSection">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                    <div>
                        <div class="fw-semibold">Daftar Segmen SPL Hari Ini</div>
                        <div class="small text-muted" id="splSegmentsBuilderHint">Gunakan 1 form ini untuk banyak blok SPL di tanggal yang sama: misalnya OT awal kerja, OT setelah pulang, lalu NoRest.</div>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary" id="btnAddSplSegment">
                        <i class="fas fa-plus me-1"></i>Tambah Segmen ke Daftar
                    </button>
                </div>
                <div class="alert alert-info py-2 px-3 small mb-2">
                    <strong>Alur cepat:</strong> pilih jenis SPL aktif, isi jam/rule-nya, klik <strong>Tambah Segmen ke Daftar</strong>, ulangi untuk blok berikutnya, lalu <strong>Save</strong> sekali untuk menyimpan semua segmen.
                </div>
                <div class="small text-muted mb-2" id="splSegmentsCountHint">Belum ada segmen tambahan. Jika tidak menambah segmen, sistem tetap menyimpan 1 SPL dari form aktif.</div>
                <div class="border rounded-3 px-3 py-2 bg-light mb-2">
                    <div class="small text-muted mb-1">Urutan terbaca operator</div>
                    <div class="small fw-semibold text-dark" id="splSegmentsSequencePreview">
                        Belum ada rantai segmen. Contoh: OT Normal Before -> Jam Kerja Normal -> NoRest-1 -> Jam Kerja Normal -> NoRest-2 -> OT Normal After.
                    </div>
                </div>
                <div class="text-muted small border rounded-3 px-3 py-2 bg-light" id="splSegmentsEmptyState">
                    Belum ada segmen di daftar. Contoh: OT Normal sebelum kerja, OT Normal setelah pulang, lalu NoRest.
                </div>
                <div class="table-responsive d-none" id="splSegmentsTableWrap">
                    <table class="table table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:56px;">#</th>
                                <th style="width:220px;">Jenis</th>
                                <th style="width:150px;">Jam</th>
                                <th>Ringkas</th>
                                <th style="width:90px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="splSegmentsTableBody"></tbody>
                    </table>
                </div>
            </div>
            <input type="hidden" id="extendFromId" value="">
            <div class="mt-2"><label class="form-label">Alasan</label><textarea id="reason" class="form-control" rows="2"></textarea></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/index.global.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function(){
    const selfMode = @json($selfMode ?? false);
    const enforceJob = @json((bool) config('project_job_costing.enforce_daily_assignment', true));
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    const modal = new bootstrap.Modal(document.getElementById('splModal'));
    const importModalEl = document.getElementById('splImportModal');
    const importModal = importModalEl ? new bootstrap.Modal(importModalEl) : null;
    const thirdPartySyncModalEl = document.getElementById('splThirdPartySyncModal');
    const thirdPartySyncModal = thirdPartySyncModalEl ? new bootstrap.Modal(thirdPartySyncModalEl) : null;
    let rows = []; let refs = {karyawans:[], flows:[], jobs:[], assignments:[], currentProfilBulanId:null, currentProfilBulanLabel:null}; let editId = null; let calendar = null; let table = null; let splSegments = [];
    const overtimePresetRules = {
        all: {
            allowed: ['normal', 'no_rest', 'no_rest_skip_break', 'emergency_on_call', 'work_target', 'continues_next_day'],
            hint: 'Semua pilihan jenis SPL ditampilkan.'
        },
        nr1: {
            allowed: ['normal', 'no_rest', 'emergency_on_call', 'work_target', 'continues_next_day'],
            hint: 'Tampilkan OT Normal, special overtime, dan NoRest-1.'
        },
        nr2: {
            allowed: ['normal', 'no_rest_skip_break', 'emergency_on_call', 'work_target', 'continues_next_day'],
            hint: 'Tampilkan OT Normal, special overtime, dan NoRest-2.'
        },
        nr1_nr2: {
            allowed: ['normal', 'no_rest', 'no_rest_skip_break', 'emergency_on_call', 'work_target', 'continues_next_day'],
            hint: 'Tampilkan OT Normal, special overtime, NoRest-1, dan NoRest-2.'
        },
        normal_only: {
            allowed: ['normal'],
            hint: 'Khusus OT Normal. Dipakai untuk masuk lebih awal atau OT normal setelah pulang.'
        }
    };
    const splDetailUrlBase = '{{ url('/surat-perintah-lembur/detail') }}';
    const projectJobRefUrl = '{{ route('project_job_refs.jobs') }}';
    let splTableLoadingTimer = null;
    let splTableLoadingStartedAt = 0;
    let splDataXhr = null;
    let splTableSearchDebounceTimer = null;
    let splPlainMode = false;
    let splPlainFallbackTimer = null;
    let importToken = null;
    let splDiagnosticRows = [];
    let splDiagnosticDetailRows = [];
    let karyawanSearchMode = 'all';
    let isKaryawanMultiMode = true;
    let splSpecialFilterMode = 'all';
    let splSelectedRowIds = new Set();
    let splLastSelectedRowId = null;
    const openIdFromUrl = Number(new URLSearchParams(window.location.search).get('open_id') || 0);
    let autoOpenedFromUrl = false;
    const syncThirdPartyPreviewUrl = '{{ route('surat_perintah_lembur.sync_third_party.preview') }}';
    const syncThirdPartyDiagnoseUrl = '{{ route('surat_perintah_lembur.sync_third_party.diagnose') }}';
    const syncThirdPartySuggestionsUrl = '{{ route('surat_perintah_lembur.sync_third_party.suggestions') }}';
    const syncThirdPartyDummyImportUrl = '{{ route('surat_perintah_lembur.sync_third_party.import_dummy') }}';
    const syncThirdPartyDummyDataUrl = '{{ route('surat_perintah_lembur.sync_third_party.dummy_data') }}';
    const splSyncSuggestionHiddenKey = 'ahsp.spl.third_party_suggestions.hidden';
    const syncThirdPartyStatusUrl = '{{ route('surat_perintah_lembur.sync_third_party.status', ['jobId' => '__JOB_ID__']) }}';
    const syncThirdPartyCandidateCaptureUrl = '{{ route('surat_perintah_lembur.sync_third_party.candidates.capture') }}';
    const syncThirdPartyCandidateDataUrl = '{{ route('surat_perintah_lembur.sync_third_party.candidates.data') }}';
    const syncThirdPartyCandidateStatusUrl = '{{ route('surat_perintah_lembur.sync_third_party.candidates.status', ['id' => '__ID__']) }}';
    const syncThirdPartyCandidateMasterReviewUrl = '{{ route('surat_perintah_lembur.sync_third_party.candidates.master_review', ['id' => '__ID__']) }}';
    const syncThirdPartyCandidateMasterCommitUrl = '{{ route('surat_perintah_lembur.sync_third_party.candidates.master_commit', ['id' => '__ID__']) }}';

    const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    }[ch]));

    function statusBadge(s){
        const map = { draft:'secondary', submitted:'secondary', in_review:'secondary', approved:'success', rejected:'secondary', cancelled:'dark' };
        return `<span class="badge text-bg-${map[s]||'secondary'}">${s||'-'}</span>`;
    }
    function statusColor(s){
        const map = { draft:'#9aa0a6', submitted:'#9aa0a6', in_review:'#9aa0a6', approved:'#198754', rejected:'#9aa0a6', cancelled:'#212529' };
        return map[s] || '#6c757d';
    }
    function separateStatusBadge(s){
        const map = {
            pending: 'warning text-dark',
            paid: 'success'
        };
        const cls = map[s] || 'secondary';
        return `<span class="badge text-bg-${cls}">${s || '-'}</span>`;
    }
    function getSelectedIds(){
        return Array.from(splSelectedRowIds)
            .map(x => Number(x))
            .filter(x => x > 0);
    }
    function setSplRowSelection(id, selected){
        id = Number(id);
        if (!(id > 0)) return;
        if (selected) {
            splSelectedRowIds.add(id);
        } else {
            splSelectedRowIds.delete(id);
        }
    }
    function removeSelectedIds(ids){
        (ids || []).forEach(id => splSelectedRowIds.delete(Number(id)));
        syncCurrentPageChecks();
    }
    function syncCurrentPageChecks(){
        $('.row-check').each(function(){
            const id = Number($(this).val());
            $(this).prop('checked', id > 0 && splSelectedRowIds.has(id));
        });
        refreshHeaderCheck();
    }
    function refreshHeaderCheck(){
        const total = $('.row-check').length;
        const checked = $('.row-check:checked').length;
        $('#checkAllRows')
            .prop('checked', total > 0 && total === checked)
            .prop('indeterminate', checked > 0 && checked < total);
    }
    function applySplVisibleRangeSelection(targetId, selected){
        targetId = Number(targetId);
        if (!(targetId > 0) || !splLastSelectedRowId) return false;
        const visibleChecks = $('.row-check').toArray();
        const fromIndex = visibleChecks.findIndex(el => Number($(el).val()) === splLastSelectedRowId);
        const toIndex = visibleChecks.findIndex(el => Number($(el).val()) === targetId);
        if (fromIndex < 0 || toIndex < 0) return false;

        const start = Math.min(fromIndex, toIndex);
        const end = Math.max(fromIndex, toIndex);
        for (let i = start; i <= end; i++) {
            const rowId = Number($(visibleChecks[i]).val());
            $(visibleChecks[i]).prop('checked', selected);
            setSplRowSelection(rowId, selected);
        }
        refreshHeaderCheck();
        return true;
    }
    function clearSelectedRows(){
        splSelectedRowIds.clear();
        splLastSelectedRowId = null;
        $('#checkAllRows').prop('checked', false);
        $('.row-check').prop('checked', false);
    }

    function normalizeSplDateRange(){
        const from = $('#splFilterDateFrom').val();
        const to = $('#splFilterDateTo').val();
        if (from && !to) {
            $('#splFilterDateTo').val(from);
            return;
        }
        if (!from && to) {
            $('#splFilterDateFrom').val(to);
            return;
        }
        if (from && to && to < from) {
            $('#splFilterDateTo').val(from);
            if (window.toastr) {
                toastr.info('Tanggal sampai disamakan dengan tanggal dari karena range terbalik.');
            }
        }
    }

    function splChronologicalSort(a, b){
        const dateCmp = String(b?.work_date || '').localeCompare(String(a?.work_date || ''));
        if (dateCmp !== 0) return dateCmp;
        const startCmp = String(a?.start_time || '').localeCompare(String(b?.start_time || ''));
        if (startCmp !== 0) return startCmp;
        const endCmp = String(a?.end_time || '').localeCompare(String(b?.end_time || ''));
        if (endCmp !== 0) return endCmp;
        return Number(b?.id || 0) - Number(a?.id || 0);
    }

    function splTimeSortKey(row){
        return [
            String(row?.start_time || '99:99').slice(0, 5),
            String(row?.end_time || '99:99').slice(0, 5),
            String(row?.document_no || ''),
            String(row?.id || '')
        ].join('|');
    }

    function renderImportPreviewTable(previewRows){
        const tbody = $('#splImportPreviewTable tbody');
        tbody.empty();
        (previewRows || []).forEach(r => {
            const s = (r.status || '').toLowerCase();
            const badge = s === 'valid'
                ? '<span class="badge text-bg-success">valid</span>'
                : s === 'duplicate'
                    ? '<span class="badge text-bg-warning text-dark">duplicate</span>'
                    : '<span class="badge text-bg-danger">invalid</span>';
            const jam = (r.overtime_type === 'no_rest')
                ? '-'
                : `${(r.start_time||'-')} - ${(r.end_time||'-')}`;
            const ruleSummary = renderSpecialRuleSummary(r.rule_summary || null);
            tbody.append(`
                <tr>
                    <td>${r.row ?? ''}</td>
                    <td>${badge}</td>
                    <td>${r.work_date ?? ''}</td>
                    <td>${r.employee_code ?? ''}</td>
                    <td>${r.overtime_type ?? ''}</td>
                    <td>${jam}</td>
                    <td>${ruleSummary || '<span class="text-muted small">-</span>'}</td>
                    <td class="small">${(r.message ?? '').toString()}</td>
                </tr>
            `);
        });
    }

    $('#btnImportXlsx').on('click', function(){
        importToken = null;
        $('#splImportFile').val('');
        $('#btnSplImportCommit').prop('disabled', true);
        $('#splImportPreviewTable tbody').empty();
        $('#splImportStatTotal').text('Total: 0');
        $('#splImportStatValid').text('Valid: 0');
        $('#splImportStatInvalid').text('Invalid: 0');
        $('#splImportStatDuplicate').text('Duplikat: 0');
        $('#splImportErrorReportLink').addClass('d-none').attr('href', '#');
        importModal?.show();
    });

    $('#btnSplImportPreview').on('click', function(){
        const file = $('#splImportFile')[0]?.files?.[0];
        if (!file) return Swal.fire('Warning', 'Pilih file XLSX terlebih dahulu.', 'warning');
        const fd = new FormData();
        fd.append('file', file);
        $('#btnSplImportPreview').prop('disabled', true).text('Previewing...');
        $('#btnSplImportCommit').prop('disabled', true);

        $.ajax({
            url: '{{ route('surat_perintah_lembur.import_preview') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
        }).done(resp => {
            importToken = resp?.token || null;
            $('#splImportStatTotal').text(`Total: ${resp?.total || 0}`);
            $('#splImportStatValid').text(`Valid: ${resp?.valid || 0}`);
            $('#splImportStatInvalid').text(`Invalid: ${resp?.invalid || 0}`);
            $('#splImportStatDuplicate').text(`Duplikat: ${resp?.duplicate || 0}`);
            renderImportPreviewTable(resp?.rows || []);

            if (resp?.error_report_url) {
                $('#splImportErrorReportLink').removeClass('d-none').attr('href', resp.error_report_url);
            }

            const canCommit = (resp?.valid || 0) > 0 && importToken;
            $('#btnSplImportCommit').prop('disabled', !canCommit);
        }).fail(xhr => {
            Swal.fire('Error', xhr.responseJSON?.message || 'Preview import gagal.', 'error');
        }).always(() => {
            $('#btnSplImportPreview').prop('disabled', false).text('Preview');
        });
    });

    $('#btnSplImportCommit').on('click', function(){
        if (!importToken) return Swal.fire('Warning', 'Token preview tidak ada. Jalankan preview dulu.', 'warning');
        Swal.fire({
            title: 'Import SPL?',
            text: 'Data valid akan dibuat sebagai SPL Draft (bisa Bulk Submit/Approve setelahnya).',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, import',
        }).then(r => {
            if (!r.isConfirmed) return;
            $('#btnSplImportCommit').prop('disabled', true).text('Importing...');
            $.post('{{ route('surat_perintah_lembur.import_commit') }}', { token: importToken })
                .done(resp => {
                    const msg = resp?.message || 'Import selesai.';
                    const detail = `Created: ${resp?.created || 0}\nSkipped: ${resp?.skipped || 0}\nErrors: ${resp?.errors || 0}`;
                    if (resp?.error_report_url) {
                        $('#splImportErrorReportLink').removeClass('d-none').attr('href', resp.error_report_url);
                    }
                    Swal.fire('Success', msg + '\n' + detail, 'success');
                    importToken = null;
                    $('#btnSplImportCommit').prop('disabled', true).text('Import');
                    // refresh data table & calendar
                    loadData();
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Import gagal.', 'error'))
                .always(() => $('#btnSplImportCommit').prop('disabled', false).text('Import'));
        });
    });
    function renderBulkResult(resp, fallbackTitle){
        const msg = resp?.message || fallbackTitle || 'Selesai';
        const skipped = resp?.meta?.skipped || [];
        if (!skipped.length) {
            Swal.fire('Success', msg, 'success');
            return;
        }
        const preview = skipped.slice(0, 12).map(x => `#${x.id}: ${x.reason}`).join('<br>');
        Swal.fire({
            icon: 'warning',
            title: msg,
            html: `<div class="text-start">Sebagian data di-skip:<br>${preview}${skipped.length > 12 ? '<br>...dst' : ''}</div>`
        });
    }

    function fillSpecialRuleFields(rulePayload){
        const payload = rulePayload || {};
        $('#emergencyBonusHours').val(payload.emergency_bonus_hours ?? '');
        $('#emergencyBonusNominal').val(payload.emergency_bonus_nominal ?? '');
        $('#bonusPaymentMode').val(payload.bonus_payment_mode || '');
        $('#emergencyBaselineMode').val(payload.emergency_baseline_mode || 'after_normal_or_existing_ot');
        $('#emergencyMultiplierProfile').val(payload.emergency_multiplier_profile || 'default');
        $('#workTargetBonusHours').val(payload.work_target_bonus_hours ?? '');
        $('#workTargetBonusCapHours').val(payload.work_target_bonus_cap_hours ?? '');
        $('#workTargetMinimumActualHours').val(payload.work_target_minimum_actual_hours ?? '');
        $('#workTargetCompletionRequired').prop('checked', payload.work_target_completion_required !== false);
        $('#workTargetPaymentMode').val(payload.bonus_payment_mode || '');
        $('#continuesTargetCoverageHours').val(payload.continues_target_coverage_hours ?? '');
        $('#continuesNextDayWorkHours').val(payload.continues_next_day_work_hours ?? '');
        $('#continuesShortageHours').val(payload.continues_shortage_hours ?? '');
        $('#continuesConversionMode').val(payload.continues_conversion_mode || '');
        $('#continuesPaymentMode').val(payload.bonus_payment_mode || '');
        $('#specialNotes').val(payload.special_notes || '');
        syncOvertimeTypeUI();
    }

    function formatIdrNumber(value){
        return Number(value || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function normalizeRuleKey(value){
        return String(value || '').trim().toUpperCase();
    }

    function getEmergencyDefaultNominal(){
        return Number(refs?.emergencyOnCallDefaultNominal || 0);
    }

    function getSelectedKaryawanRows(){
        const selectedIds = new Set(getSelectedKaryawanValues().filter(Boolean));
        return (refs.karyawans || []).filter(row => selectedIds.has(String(row.id)));
    }

    function resolveEmergencyNominalForRow(row){
        const rules = refs?.emergencyOnCallNominalRules || {};
        const byExportGroup = rules.by_export_group || {};
        const byEmployeeGroup = rules.by_employee_group || {};
        const priority = Array.isArray(rules.priority) && rules.priority.length ? rules.priority : ['export_group', 'employee_group', 'global'];

        const exportGroupKey = normalizeRuleKey(row?.export_employee_group);
        const employeeGroupKey = normalizeRuleKey(row?.employee_group);
        const globalNominal = getEmergencyDefaultNominal();

        for (const key of priority) {
            if (key === 'export_group' && exportGroupKey && byExportGroup[exportGroupKey] > 0) {
                return {
                    amount: Number(byExportGroup[exportGroupKey]),
                    source: `Group Cetak: ${row.export_employee_group}`
                };
            }
            if (key === 'employee_group' && employeeGroupKey && byEmployeeGroup[employeeGroupKey] > 0) {
                return {
                    amount: Number(byEmployeeGroup[employeeGroupKey]),
                    source: `Group: ${row.employee_group}`
                };
            }
            if (key === 'global' && globalNominal > 0) {
                return {
                    amount: Number(globalNominal),
                    source: 'Default global'
                };
            }
        }

        return {
            amount: 0,
            source: 'Belum ada default'
        };
    }

    function resolveEmergencySelectionDefault(){
        const selectedRows = getSelectedKaryawanRows();
        if (!selectedRows.length) {
            const globalNominal = getEmergencyDefaultNominal();
            return globalNominal > 0
                ? { amount: globalNominal, source: 'Default global', isMixed: false, count: 0 }
                : { amount: 0, source: 'Belum ada default', isMixed: false, count: 0 };
        }

        const resolved = selectedRows.map(resolveEmergencyNominalForRow).filter(x => Number(x.amount || 0) > 0);
        if (!resolved.length) {
            return { amount: 0, source: 'Belum ada default untuk karyawan terpilih', isMixed: false, count: selectedRows.length };
        }

        const uniqueAmounts = Array.from(new Set(resolved.map(x => Number(x.amount).toFixed(2))));
        if (uniqueAmounts.length > 1) {
            return {
                amount: 0,
                source: 'Pilihan karyawan punya default nominal berbeda. Gunakan filter Group / Group Cetak lalu pilih per batch.',
                isMixed: true,
                count: selectedRows.length
            };
        }

        return {
            amount: Number(uniqueAmounts[0]),
            source: resolved[0].source,
            isMixed: false,
            count: selectedRows.length
        };
    }

    function syncEmergencyDefaultHint(){
        const resolved = resolveEmergencySelectionDefault();
        if (resolved.isMixed) {
            $('#emergencyDefaultNominalHint').text(resolved.source);
            $('#emergencyDefaultNominalHint').removeClass('text-muted').addClass('text-warning');
            $('#btnApplyEmergencyNominalDefault').addClass('d-none');
            return;
        }

        $('#emergencyDefaultNominalHint').removeClass('text-warning').addClass('text-muted');
        $('#emergencyDefaultNominalHint').text(
            resolved.amount > 0
                ? `Default nominal: Rp ${formatIdrNumber(resolved.amount)} (${resolved.source})`
                : (resolved.source || 'Default nominal belum diatur.')
        );
        $('#btnApplyEmergencyNominalDefault').toggleClass('d-none', resolved.amount <= 0);
    }

    function applyEmergencyDefaultNominal(force = false){
        const resolved = resolveEmergencySelectionDefault();
        if (resolved.isMixed || resolved.amount <= 0) return;
        if (String($('#overtimeType').val() || '') !== 'emergency_on_call') return;
        const currentValue = Number($('#emergencyBonusNominal').val() || 0);
        if (force || currentValue <= 0) {
            $('#emergencyBonusNominal').val(resolved.amount.toFixed(2).replace(/\.00$/, ''));
        }
    }

    function buildSpecialRulePayloadForSubmit(payload){
        const type = String($('#overtimeType').val() || '');
        if (type === 'emergency_on_call') {
            payload.emergency_bonus_hours = $('#emergencyBonusHours').val();
            payload.emergency_bonus_nominal = $('#emergencyBonusNominal').val();
            payload.bonus_payment_mode = $('#bonusPaymentMode').val();
            payload.emergency_baseline_mode = $('#emergencyBaselineMode').val();
            payload.emergency_multiplier_profile = $('#emergencyMultiplierProfile').val();
            payload.special_notes = $('#specialNotes').val();
        } else if (type === 'work_target') {
            payload.work_target_bonus_hours = $('#workTargetBonusHours').val();
            payload.work_target_bonus_cap_hours = $('#workTargetBonusCapHours').val();
            payload.work_target_minimum_actual_hours = $('#workTargetMinimumActualHours').val();
            payload.work_target_completion_required = $('#workTargetCompletionRequired').is(':checked') ? 1 : 0;
            payload.bonus_payment_mode = $('#workTargetPaymentMode').val();
            payload.special_notes = $('#specialNotes').val();
        } else if (type === 'continues_next_day') {
            payload.continues_target_coverage_hours = $('#continuesTargetCoverageHours').val();
            payload.continues_next_day_work_hours = $('#continuesNextDayWorkHours').val();
            payload.continues_shortage_hours = $('#continuesShortageHours').val();
            payload.continues_conversion_mode = $('#continuesConversionMode').val();
            payload.bonus_payment_mode = $('#continuesPaymentMode').val();
            payload.special_notes = $('#specialNotes').val();
        }
        payload.target_profil_bulan_id = $('#targetProfilBulanId').val();
        payload.separate_release_profil_bulan_id = $('#separateReleaseProfilBulanId').val();
        return payload;
    }

    function isSplSegmentBuilderEnabled(){
        return !editId && !String($('#extendFromId').val() || '').trim();
    }

    function isNoRestTriggerType(type){
        const normalized = String(type || '').trim();
        return normalized === 'no_rest' || normalized === 'no_rest_skip_break';
    }

    function formatSegmentTimeLabel(segment){
        const type = String(segment?.overtime_type || '');
        if (type === 'no_rest') {
            return 'NoRest-1';
        }
        if (type === 'no_rest_skip_break') {
            return 'NoRest-2';
        }
        return `${String(segment?.start_time || '-').slice(0, 5)} - ${String(segment?.end_time || '-').slice(0, 5)}`;
    }

    function formatSegmentSummary(segment){
        const type = String(segment?.overtime_type || '');
        const bits = [];
        if (type === 'normal') {
            const start = String(segment?.start_time || '').slice(0, 5);
            bits.push(start && start < '08:00' ? 'Masuk lebih awal' : 'Normal setelah pulang');
        }
        if (type === 'no_rest') {
            bits.push('Trigger normal included / tanpa rest pertama');
        }
        if (type === 'no_rest_skip_break') {
            bits.push('Trigger mulai multiplier langsung tanpa x0');
        }
        if (type === 'emergency_on_call') {
            const mode = String(segment?.bonus_payment_mode || '');
            if (mode) bits.push(`Bayar: ${mode}`);
        }
        if (type === 'work_target' && Number(segment?.work_target_bonus_hours || 0) > 0) {
            bits.push(`Bonus jam ${Number(segment.work_target_bonus_hours).toFixed(2)}`);
        }
        if (type === 'continues_next_day' && Number(segment?.continues_shortage_hours || 0) > 0) {
            bits.push(`Kekurangan ${Number(segment.continues_shortage_hours).toFixed(2)} jam`);
        }
        if (segment?.special_notes) {
            bits.push(String(segment.special_notes));
        }
        return bits.filter(Boolean).join(' | ') || '-';
    }

    function getSegmentSortWeight(segment){
        const type = String(segment?.overtime_type || '').trim();
        const start = String(segment?.start_time || '').slice(0, 5);
        if (type === 'normal') {
            return (start && start < '08:00') ? 10 : 70;
        }
        if (type === 'no_rest') return 30;
        if (type === 'no_rest_skip_break') return 50;
        if (type === 'emergency_on_call') return 80;
        if (type === 'work_target') return 85;
        if (type === 'continues_next_day') return 90;
        return 99;
    }

    function sortSplSegments(){
        splSegments = (splSegments || []).slice().sort((a, b) => {
            const weightDiff = getSegmentSortWeight(a) - getSegmentSortWeight(b);
            if (weightDiff !== 0) return weightDiff;
            const aStart = String(a?.start_time || '');
            const bStart = String(b?.start_time || '');
            return aStart.localeCompare(bStart);
        });
    }

    function buildSplSegmentSequencePreview(){
        if (!Array.isArray(splSegments) || !splSegments.length) {
            return 'Belum ada rantai segmen. Contoh: OT Normal Before -> Jam Kerja Normal 4 -> NoRest-1 -> Jam Kerja Normal 4 -> NoRest-2 -> OT Normal After.';
        }

        const hasNormalBefore = splSegments.some((segment) => {
            return String(segment?.overtime_type || '') === 'normal'
                && String(segment?.start_time || '').slice(0, 5) < '08:00';
        });
        const hasNoRest1 = splSegments.some((segment) => String(segment?.overtime_type || '') === 'no_rest');
        const hasNoRest2 = splSegments.some((segment) => String(segment?.overtime_type || '') === 'no_rest_skip_break');
        const hasNormalAfter = splSegments.some((segment) => {
            return String(segment?.overtime_type || '') === 'normal'
                && String(segment?.start_time || '').slice(0, 5) >= '08:00';
        });
        const hasEmergency = splSegments.some((segment) => String(segment?.overtime_type || '') === 'emergency_on_call');
        const hasTarget = splSegments.some((segment) => String(segment?.overtime_type || '') === 'work_target');
        const hasContinues = splSegments.some((segment) => String(segment?.overtime_type || '') === 'continues_next_day');

        const parts = [];
        if (hasNormalBefore) {
            parts.push('OT Normal Before');
        }
        if (hasNoRest1) {
            if (parts.length) parts.push('Jam Kerja Normal 4');
            parts.push('NoRest-1');
        }
        if (hasNoRest2) {
            if (parts.length) parts.push('Jam Kerja Normal 4');
            parts.push('NoRest-2');
        }
        if (hasNormalAfter) {
            parts.push('OT Normal After');
        }

        const trailingSpecial = [];
        if (hasEmergency) trailingSpecial.push('Emergency');
        if (hasTarget) trailingSpecial.push('Target');
        if (hasContinues) trailingSpecial.push('Continues Workday');

        if (trailingSpecial.length) {
            if (parts.length) {
                const lastIndex = parts.length - 1;
                parts[lastIndex] = `${parts[lastIndex]} + ${trailingSpecial.join(' + ')}`;
            } else {
                parts.push(trailingSpecial.join(' + '));
            }
        }

        return parts.join(' -> ') || 'Segmen aktif belum terbaca.';
    }

    function renderSplSegments(){
        const enabled = isSplSegmentBuilderEnabled();
        $('#btnAddSplSegment').prop('disabled', !enabled);
        $('#splSegmentsBuilderHint').text(
            enabled
                ? 'Gunakan 1 form ini untuk banyak blok SPL di tanggal yang sama: misalnya OT awal kerja, OT setelah pulang, lalu NoRest.'
                : 'Mode multi segmen hanya aktif untuk tambah SPL baru. Edit atau extend tetap memakai 1 row per form.'
        );
        if (!enabled) {
            $('#splSegmentsTableWrap').addClass('d-none');
            $('#splSegmentsEmptyState').removeClass('d-none').text('Mode multi segmen nonaktif saat edit atau extend SPL.');
            $('#splSegmentsCountHint').text('Mode multi segmen hanya dipakai saat tambah SPL baru.');
            $('#splSegmentsSequencePreview').text('Mode multi segmen nonaktif saat edit atau extend SPL.');
            return;
        }

        $('#splSegmentsCountHint').text(
            splSegments.length > 0
                ? `${splSegments.length} segmen siap disimpan. Sekali Save akan membuat ${splSegments.length} row SPL per karyawan terpilih.`
                : 'Belum ada segmen. Jika hanya ada 1 blok lembur, boleh langsung Save. Jika ada beberapa blok, tambahkan dulu segmennya satu per satu.'
        );
        $('#splSegmentsSequencePreview').text(buildSplSegmentSequencePreview());

        if (!splSegments.length) {
            $('#splSegmentsTableBody').empty();
            $('#splSegmentsTableWrap').addClass('d-none');
            $('#splSegmentsEmptyState').removeClass('d-none').text('Belum ada segmen di daftar. Contoh 1 hari: OT Normal sebelum kerja, OT Normal setelah pulang, lalu NoRest. Semua cukup dari 1 form ini.');
            return;
        }

        sortSplSegments();
        $('#splSegmentsEmptyState').addClass('d-none');
        $('#splSegmentsTableWrap').removeClass('d-none');
        $('#splSegmentsTableBody').html(splSegments.map((segment, index) => `
            <tr>
                <td>${index + 1}</td>
                <td><span class="badge text-bg-primary">${escapeHtml(formatOvertimeTypeLabel(segment.overtime_type, 'OT Normal'))}</span></td>
                <td>${escapeHtml(formatSegmentTimeLabel(segment))}</td>
                <td class="small text-muted">${escapeHtml(formatSegmentSummary(segment))}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-spl-segment" data-index="${index}">Hapus</button>
                </td>
            </tr>
        `).join(''));
    }

    function collectCurrentSplSegment(){
        const type = String($('#overtimeType').val() || 'normal').trim() || 'normal';
        const payload = {
            overtime_type: type,
            start_time: isNoRestTriggerType(type) ? '00:00' : String($('#startTime').val() || '').trim(),
            end_time: isNoRestTriggerType(type) ? '00:00' : String($('#endTime').val() || '').trim(),
        };
        if (!isNoRestTriggerType(type) && (!payload.start_time || !payload.end_time)) {
            throw new Error('Mulai dan Selesai wajib diisi untuk segmen ini.');
        }
        buildSpecialRulePayloadForSubmit(payload);
        return payload;
    }

    function addCurrentSplSegment(){
        if (!isSplSegmentBuilderEnabled()) return;
        try {
            const segment = collectCurrentSplSegment();
            splSegments.push(segment);
            renderSplSegments();
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: `Segmen ${formatOvertimeTypeLabel(segment.overtime_type, 'OT Normal')} ditambahkan`,
                showConfirmButton: false,
                timer: 1400
            });
        } catch (error) {
            Swal.fire('Info', error?.message || 'Segmen belum lengkap.', 'info');
        }
    }

    function renderSpecialRuleSummary(summary){
        if (!summary || !Array.isArray(summary.lines) || !summary.lines.length) return '';
        const computed = [];
        if (Number(summary.computed_bonus_hours || 0) > 0) {
            computed.push(`<span class="badge text-bg-warning text-dark">Bonus Jam ${Number(summary.computed_bonus_hours).toFixed(2)}</span>`);
        }
        if (Number(summary.computed_bonus_nominal || 0) > 0) {
            computed.push(`<span class="badge text-bg-primary">Nominal Rp ${Number(summary.computed_bonus_nominal).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</span>`);
        }
        if (Number(summary.computed_bonus_hk || 0) > 0) {
            computed.push(`<span class="badge text-bg-success">Bonus HK ${Number(summary.computed_bonus_hk)}</span>`);
        }
        if (summary.payment_mode_label) {
            computed.push(`<span class="badge text-bg-info">${summary.payment_mode_label}</span>`);
        }
        return `
            <div class="small text-muted mt-1">
                ${computed.length ? `<div class="d-flex flex-wrap gap-1 mb-1">${computed.join('')}</div>` : ''}
                ${summary.lines.map(line => `<div>${line}</div>`).join('')}
            </div>
        `;
    }

    function buildApprovalDetailHtml(row){
        const base = [
            `<div><b>No SPL:</b> ${row.document_no||'-'}</div>`,
            `<div><b>Karyawan:</b> ${(row.employee_code||'-')} - ${(row.employee_name||'-')}</div>`,
            `<div><b>Status:</b> ${row.status||'-'}</div>`,
            `<div><b>Tanggal:</b> ${row.work_date||'-'}</div>`,
            `<div><b>Jam:</b> ${String(row.start_time||'-').slice(0,5)} - ${String(row.end_time||'-').slice(0,5)}</div>`,
            `<div><b>Jenis SPL:</b> ${row.overtime_type_label||'-'}</div>`,
            `<div><b>Alasan:</b> ${row.reason||'-'}</div>`
        ];
        const settlement = row.settlement_summary || null;
        const settlementHtml = settlement ? `
            <div class="mt-2 p-2 border rounded bg-light">
                <div class="fw-semibold mb-1">Payout Ready</div>
                <div><b>Mode Bayar:</b> ${settlement.payment_mode_label || '-'}</div>
                <div><b>Target Profil Payroll:</b> ${row.target_profil_bulan_label || '-'}</div>
                <div><b>Profil Cair Separate:</b> ${row.separate_release_profil_bulan_label || '-'}</div>
                <div><b>Bonus Jam Payroll:</b> ${Number(settlement.payroll_bonus_hours || 0).toFixed(2)}</div>
                <div><b>Bonus HK Payroll:</b> ${Number(settlement.payroll_bonus_hk || 0)}</div>
                <div><b>Bonus Nominal Payroll:</b> Rp ${Number(settlement.payroll_bonus_nominal || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</div>
                <div><b>Bonus Jam Terpisah:</b> ${Number(settlement.separate_bonus_hours || 0).toFixed(2)}</div>
                <div><b>Bonus HK Terpisah:</b> ${Number(settlement.separate_bonus_hk || 0)}</div>
                <div><b>Bonus Nominal Terpisah:</b> Rp ${Number(settlement.separate_bonus_nominal || 0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</div>
            </div>
        ` : '';
        return `<div class="text-start">${base.join('')}${renderSpecialRuleSummary(row.rule_summary)}${settlementHtml}</div>`;
    }

    function setView(viewMode){
        const isTable = viewMode === 'table';
        $('#tableViewWrapper').toggleClass('d-none', !isTable);
        $('#calendarViewWrapper').toggleClass('d-none', isTable);
        $('#btnViewTable').toggleClass('active', isTable);
        $('#btnViewCalendar').toggleClass('active', !isTable);
        if (!isTable && calendar) {
            calendar.render();
        }
    }

    function renderJobBadge(row){
        if (!row || !row.job_id) {
            return '<div class="mt-1"><span class="badge text-bg-danger">Unjob</span></div>';
        }
        const code = row.job_code ? String(row.job_code) : 'Job';
        const title = row.job_name ? String(row.job_name).replace(/"/g, '&quot;') : '';
        return `<div class="mt-1"><span class="badge text-bg-info"${title ? ` title="${title}"` : ''}>${code}</span></div>`;
    }
    function renderSplActionButtons(row){
        let btn = '';
        if (row.can_edit) btn += `<button class="btn btn-xs btn-outline-warning btn-edit" data-id="${row.id}">Edit</button> `;
        if (row.can_delete) btn += `<button class="btn btn-xs btn-outline-danger btn-delete" data-id="${row.id}">Delete</button> `;
        if (['draft'].includes((row.status||''))) btn += `<button class="btn btn-xs btn-outline-primary btn-submit" data-id="${row.id}">Submit</button> `;
        if (row.can_approve) btn += `<button class="btn btn-xs btn-outline-success btn-approve" data-id="${row.id}">Approve</button> `;
        if (row.can_unapprove) btn += `<button class="btn btn-xs btn-outline-secondary btn-unapprove" data-id="${row.id}">Batal Approve</button> `;
        if (row.can_reject) btn += `<button class="btn btn-xs btn-outline-danger btn-reject" data-id="${row.id}">Reject</button> `;
        if ((row.status||'') === 'approved' && row.needs_extend) btn += `<button class="btn btn-xs btn-outline-warning btn-extend" data-id="${row.id}">Extend</button> `;
        return btn || '<span class="text-muted">-</span>';
    }
    function getSplSyncStatusMeta(status){
        const key = String(status || '').trim().toLowerCase();
        const map = {
            created_from_source: { cls: 'text-bg-primary', label: 'Sync Baru' },
            updated_from_source: { cls: 'text-bg-warning text-dark', label: 'Source Updated' },
            changed_pending: { cls: 'text-bg-info text-dark', label: 'Perlu Sync' },
            changed_locked: { cls: 'text-bg-danger', label: 'Changed Locked' },
            unchanged: { cls: 'text-bg-secondary', label: 'Sync OK' },
        };
        return map[key] || null;
    }
    function renderSplSyncBadge(row){
        if (!row || String(row.source_system || '') !== 'third_party_spl') {
            return '';
        }
        const meta = getSplSyncStatusMeta(row.sync_status);
        const titleParts = [
            row.sync_change_summary || '',
            row.sync_last_checked_at ? `Cek: ${row.sync_last_checked_at}` : '',
            row.source_synced_at ? `Sync: ${row.source_synced_at}` : ''
        ].filter(Boolean);
        const title = titleParts.length ? ` title="${escapeHtml(titleParts.join(' | '))}"` : '';
        const syncBadge = meta
            ? `<span class="badge ${meta.cls}"${title}>${meta.label}</span>`
            : '';
        return `<div class="mt-1 d-flex flex-wrap gap-1">
            <span class="badge text-bg-secondary">3rd Party</span>
            ${syncBadge}
        </div>`;
    }

    function setSplTableLoading(isLoading){
        $('#splTableLoading').css('display', isLoading ? 'flex' : 'none');
        $('#btnApplySplFilter, #btnResetSplFilter').prop('disabled', isLoading);
        $('#splFilterDateFrom, #splFilterDateTo, #splFilterEmployee, #splFilterApproval').prop('disabled', isLoading);
        $('#splTable_filter input').prop('disabled', isLoading);
        if ($('#splFilterJob').data('select2')) {
            $('#splFilterJob').prop('disabled', isLoading).trigger('change.select2');
        } else {
            $('#splFilterJob').prop('disabled', isLoading);
        }

        if (splTableLoadingTimer) {
            clearInterval(splTableLoadingTimer);
            splTableLoadingTimer = null;
        }

        if (isLoading) {
            splTableLoadingStartedAt = Date.now();
            $('#splTableLoadingSubtext').text('Menyiapkan pencarian...');
            splTableLoadingTimer = setInterval(() => {
                const seconds = Math.max(0, Math.floor((Date.now() - splTableLoadingStartedAt) / 1000));
                let message = `Memuat hasil pencarian... ${seconds} detik`;
                if (seconds >= 10 && seconds < 20) {
                    message = `Masih memuat... ${seconds} detik. Data sedang disusun dari server.`;
                } else if (seconds >= 20) {
                    message = `Masih berjalan ${seconds} detik. Kalau lama sekali, kita cek filter atau beban data.`;
                }
                $('#splTableLoadingSubtext').text(message);
            }, 1000);
        } else {
            $('#splTableLoadingSubtext').text('Mohon tunggu sebentar.');
        }
    }

    function buildSplDataParams(data = {}){
        normalizeSplDateRange();
        const selectedJobValue = $('#splFilterJob').val() || '';
        const selectedJobText = ($('#splFilterJob').find('option:selected').text() || '').trim();
        return {
            ...data,
            date_from: $('#splFilterDateFrom').val() || '',
            date_to: $('#splFilterDateTo').val() || '',
            employee_query: ($('#splFilterEmployee').val() || '').trim(),
            job_query: selectedJobValue && selectedJobValue !== '__UNJOB__' ? selectedJobText : '',
            job_id: selectedJobValue,
            special_filter: splSpecialFilterMode,
            approval_filter: $('#splFilterApproval').val() || 'all'
        };
    }

    function renderSplPlainTable(items){
        const tbody = $('#splTable tbody');
        tbody.empty();
        if (!Array.isArray(items) || !items.length) {
            tbody.html('<tr><td colspan="10" class="text-center text-muted py-4">Belum ada data SPL.</td></tr>');
            return;
        }
        const html = items.map((r) => {
            const jam = `${String(r.start_time || '-').slice(0,5)} - ${String(r.end_time || '-').slice(0,5)}`;
            const actual = (r.actual_out || r.actual_in) ? `<div class="small text-muted">Actual: ${(r.actual_in||'-')} - ${(r.actual_out||'-')}</div>` : '';
            const warn = r.needs_extend ? `<span class="badge bg-warning text-dark ms-1" title="Actual pulang lebih lama dari SPL approved">Need Extend</span>` : '';
            return `
                <tr>
                    <td><input type="checkbox" class="row-check" value="${r.id}"></td>
                    <td><div>${escapeHtml(r.document_no || '-')}</div>${renderSplSyncBadge(r)}</td>
                    <td><div>${escapeHtml(r.employee_code || '-')} - ${escapeHtml(r.employee_name || '-')}</div>${renderJobBadge(r)}</td>
                    <td>${escapeHtml(r.overtime_type_label || 'Normal')}</td>
                    <td>${escapeHtml(r.work_date || '-')}</td>
                    <td><div>${escapeHtml(jam)}${warn}</div>${actual}${renderSpecialRuleSummary(r.rule_summary)}</td>
                    <td>${escapeHtml(r.flow_name || '-')}</td>
                    <td>${escapeHtml(r.pending_level || '-')}</td>
                    <td>${statusBadge(r.status)}</td>
                    <td>${renderSplActionButtons(r)}</td>
                </tr>
            `;
        }).join('');
        tbody.html(html);
        syncCurrentPageChecks();
    }

    function fetchSplData(params = {}){
        if (splDataXhr && splDataXhr.readyState !== 4) {
            splDataXhr.abort();
        }
        return splDataXhr = $.ajax({
            url: '{{ route('surat_perintah_lembur.data') }}',
            type: 'GET',
            dataType: 'json',
            timeout: 180000,
            data: buildSplDataParams(params)
        }).always(() => {
            splDataXhr = null;
        });
    }

    function activateSplPlainMode(resp = null){
        splPlainMode = true;
        try {
            if ($.fn.DataTable.isDataTable('#splTable')) {
                $('#splTable').DataTable().destroy();
            }
        } catch (e) {}
        $('#splTable_filter').remove();
        rows = (Array.isArray(resp?.data) ? resp.data : []).slice().sort(splChronologicalSort);
        renderSplPlainTable(rows);
        renderCalendar();
        setSplTableLoading(false);
    }

    function scheduleSplPlainFallback(){
        if (splPlainFallbackTimer) {
            clearTimeout(splPlainFallbackTimer);
        }
        splPlainFallbackTimer = setTimeout(() => {
            if (splPlainMode) return;
            const hasRows = $('#splTable tbody tr').length > 0;
            if (hasRows) return;
            fetchSplData({draw: 1, start: 0, length: 25})
                .done((resp) => {
                    activateSplPlainMode(resp);
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: 'Mode Aman SPL Aktif',
                        text: 'Tabel utama dialihkan ke render ringan.',
                        showConfirmButton: false,
                        timer: 2400
                    });
                })
                .fail(() => {
                    setSplTableLoading(false);
                });
        }, 1800);
    }

    let bulkActionLoadingTimer = null;
    let bulkActionLoadingStartedAt = 0;
    let bulkActionLoadingTotal = 0;

    function updateBulkActionLoading(processedRows, totalRows, meta = {}){
        const total = Math.max(0, Number(totalRows || bulkActionLoadingTotal || 0));
        const processed = Math.max(0, Math.min(total || Number(processedRows || 0), Number(processedRows || 0)));
        const success = Math.max(0, Number(meta.success || meta.approved || meta.submitted || meta.updated || meta.deleted || meta.rejected || meta.unapproved || 0));
        const skipped = Math.max(0, Number(meta.skipped || 0));
        const percent = total > 0 ? Math.min(100, Math.round((processed / total) * 100)) : 0;

        $('#bulkActionProcessedCount').text(`${processed} / ${total}`);
        $('#bulkActionApprovedCount').text(success);
        $('#bulkActionSkippedCount').text(skipped);
        $('#bulkActionPercent').text(`${percent}%`);
        $('#bulkActionProgressBar')
            .css('width', `${percent}%`)
            .attr('aria-valuenow', percent);

        if (meta.chunk && meta.chunkTotal) {
            $('#bulkActionChunkText').text(`Batch ${meta.chunk} / ${meta.chunkTotal}`);
        } else {
            $('#bulkActionChunkText').text('');
        }
    }

    function closeBulkActionLoading(){
        if (Swal.isVisible()) {
            Swal.close();
        }
    }

    function openBulkActionLoading(title, totalRows, actionLabel){
        bulkActionLoadingStartedAt = Date.now();
        bulkActionLoadingTotal = Math.max(0, Number(totalRows || 0));
        Swal.fire({
            title: title,
            html: `
                <div class="text-center">
                    <div class="spinner-border text-primary mb-3" role="status" aria-hidden="true"></div>
                    <div class="fw-semibold mb-1">Memproses ${totalRows} data</div>
                    <div class="text-muted small" id="bulkActionLoadingText">Menyiapkan ${actionLabel}...</div>
                    <div class="progress mt-3" style="height: 10px;">
                        <div id="bulkActionProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2 small">
                        <span id="bulkActionProcessedCount">0 / ${totalRows}</span>
                        <span id="bulkActionPercent">0%</span>
                    </div>
                    <div class="row g-2 text-start mt-2">
                        <div class="col-6">
                            <div class="border rounded p-2 bg-light">
                                <div class="text-muted small">Berhasil</div>
                                <div class="fw-semibold" id="bulkActionApprovedCount">0</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2 bg-light">
                                <div class="text-muted small">Skip</div>
                                <div class="fw-semibold" id="bulkActionSkippedCount">0</div>
                            </div>
                        </div>
                    </div>
                    <div class="text-muted small mt-2" id="bulkActionChunkText"></div>
                </div>
            `,
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
                if (bulkActionLoadingTimer) {
                    clearInterval(bulkActionLoadingTimer);
                }
                bulkActionLoadingTimer = setInterval(() => {
                    const seconds = Math.max(0, Math.floor((Date.now() - bulkActionLoadingStartedAt) / 1000));
                    let message = `Memproses ${actionLabel}... ${seconds} detik`;
                    if (seconds >= 10 && seconds < 20) {
                        message = `${actionLabel} masih berjalan... ${seconds} detik`;
                    } else if (seconds >= 20) {
                        message = `${actionLabel} cukup lama... ${seconds} detik. Server masih bekerja.`;
                    }
                    const node = document.getElementById('bulkActionLoadingText');
                    if (node) {
                        node.textContent = message;
                    }
                }, 1000);
                updateBulkActionLoading(0, totalRows, {});
            },
            willClose: () => {
                if (bulkActionLoadingTimer) {
                    clearInterval(bulkActionLoadingTimer);
                    bulkActionLoadingTimer = null;
                }
                bulkActionLoadingTotal = 0;
            }
        });
    }

    function chunkArray(items, size){
        const chunks = [];
        const chunkSize = Math.max(1, Number(size || 25));
        for (let i = 0; i < items.length; i += chunkSize) {
            chunks.push(items.slice(i, i + chunkSize));
        }
        return chunks;
    }

    const bulkMetaSuccessKeys = ['approved', 'submitted', 'updated', 'deleted', 'rejected', 'unapproved'];

    function mergeBulkMeta(target, meta){
        const source = meta || {};
        bulkMetaSuccessKeys.forEach(key => {
            target[key] = Number(target[key] || 0) + Number(source[key] || 0);
        });
        const skippedItems = Array.isArray(source.skipped) ? source.skipped : [];
        target.skipped = (target.skipped || []).concat(skippedItems);
        target.success = bulkMetaSuccessKeys.reduce((sum, key) => sum + Number(target[key] || 0), 0);
        return target;
    }

    function buildBulkSummary(title, summary){
        const skipped = Array.isArray(summary?.skipped) ? summary.skipped : [];
        return {
            message: `${title}. Berhasil: ${Number(summary?.success || 0)}, Skip: ${skipped.length}`,
            meta: summary || {}
        };
    }

    function runBulkActionInChunks(options){
        const ids = Array.from(new Set((options.ids || []).map(id => Number(id)).filter(id => id > 0)));
        if (!ids.length) {
            return Promise.resolve();
        }

        const chunkSize = Number(options.chunkSize || 40);
        const concurrency = Math.max(1, Number(options.concurrency || 3));
        const chunks = chunkArray(ids, chunkSize);
        const payload = options.payload || {};
        const title = options.title || 'Bulk Berjalan';
        const actionLabel = options.actionLabel || 'bulk action';
        const successTitle = options.successTitle || 'Bulk selesai';

        openBulkActionLoading(title, ids.length, actionLabel);

        let processed = 0;
        let nextIndex = 0;
        let active = 0;
        let failed = false;
        const summary = { skipped: [], success: 0 };

        return new Promise((resolve, reject) => {
            const launchNext = () => {
                if (failed) return;
                if (processed >= ids.length && active === 0) {
                    resolve(summary);
                    return;
                }

                while (active < concurrency && nextIndex < chunks.length) {
                    const chunkIndex = nextIndex++;
                    const chunkIds = chunks[chunkIndex];
                    active++;

                    updateBulkActionLoading(processed, ids.length, {
                        ...summary,
                        skipped: summary.skipped.length,
                        chunk: chunkIndex + 1,
                        chunkTotal: chunks.length
                    });

                    $.ajax({
                        url: options.url,
                        method: 'POST',
                        data: {
                            ...payload,
                            ids: chunkIds
                        }
                    })
                        .done(resp => {
                            mergeBulkMeta(summary, resp?.meta || {});
                            processed += chunkIds.length;
                            updateBulkActionLoading(processed, ids.length, {
                                ...summary,
                                skipped: summary.skipped.length,
                                chunk: chunkIndex + 1,
                                chunkTotal: chunks.length
                            });
                        })
                        .fail(xhr => {
                            failed = true;
                            closeBulkActionLoading();
                            const message = xhr.responseJSON?.message || `${actionLabel} gagal`;
                            Swal.fire('Error', `${message} (batch ${chunkIndex + 1}/${chunks.length})`, 'error');
                            reject(xhr);
                        })
                        .always(() => {
                            active--;
                            launchNext();
                        });
                }
            };

            launchNext();
        }).then(summary => {
            closeBulkActionLoading();
            if (options.removeSelection) {
                removeSelectedIds(ids);
            } else {
                syncCurrentPageChecks();
            }
            loadData(false);
            renderBulkResult(buildBulkSummary(successTitle, summary), successTitle);
            return summary;
        });
    }

    function runBulkApproveInChunks(ids, notes){
        return runBulkActionInChunks({
            ids,
            url: '{{ route('surat_perintah_lembur.bulk_approve') }}',
            payload: { notes: notes || '' },
            title: 'Bulk Approve Berjalan',
            actionLabel: 'bulk approve',
            successTitle: 'Bulk approve selesai',
            chunkSize: 25,
            concurrency: 3
        });
    }

    function initSplDataTable(){
        try {
            table = $('#splTable').DataTable({
                deferRender: true,
                processing: true,
                serverSide: true,
                searchDelay: 500,
                ajax: function(data, callback){
                    setSplTableLoading(true);
                    fetchSplData(data).done(resp => {
                        rows = (Array.isArray(resp?.data) ? resp.data : []).slice().sort(splChronologicalSort);
                        requestAnimationFrame(() => {
                            callback(resp);
                            syncCurrentPageChecks();
                            renderCalendar();
                            if (openIdFromUrl > 0 && !autoOpenedFromUrl) {
                                autoOpenedFromUrl = true;
                                fetchSplDetail(openIdFromUrl)
                                    .done(target => {
                                        if (!target) {
                                            Swal.fire('Info', 'Data SPL tidak ditemukan atau tidak bisa diakses.', 'info');
                                        } else if (!target.can_edit) {
                                            Swal.fire('Info', 'SPL ini sudah tidak bisa diedit. Status: ' + (target.status || '-'), 'info');
                                        } else {
                                            openEdit(target);
                                        }
                                    })
                                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
                            }
                            setSplTableLoading(false);
                        });
                    }).fail(xhr => {
                        if (xhr.statusText === 'abort') {
                            return;
                        }
                        const message = xhr.statusText === 'timeout'
                            ? 'Pencarian SPL terlalu lama. Coba sempitkan tanggal atau user.'
                            : (xhr.responseJSON?.message || 'Gagal memuat data SPL.');
                        callback({
                            draw: Number(data.draw || 0),
                            recordsTotal: 0,
                            recordsFiltered: 0,
                            data: []
                        });
                        setSplTableLoading(false);
                        activateSplPlainMode({ data: [] });
                        Swal.fire('Error', message, 'error');
                    });
                },
                columns: [
                    {data:null, orderable:false, searchable:false, render:(d,t,r)=>`<input type="checkbox" class="row-check" value="${r.id}">`},
                    {data:'document_no', render:(v,t,r)=>`<div>${escapeHtml(v || '-')}</div>${renderSplSyncBadge(r)}`},
                    {data:null, render:r=>`<div>${escapeHtml(r.employee_code||'-')} - ${escapeHtml(r.employee_name||'-')}</div>${renderJobBadge(r)}`},
                    {data:'overtime_type_label', render:v=>escapeHtml(v||'Normal')},
                    {data:'work_date'},
                    {data:null, render:r=>{
                        const jam = `${String(r.start_time||'-').slice(0,5)} - ${String(r.end_time||'-').slice(0,5)}`;
                        const actual = (r.actual_out || r.actual_in) ? `<div class="small text-muted">Actual: ${(r.actual_in||'-')} - ${(r.actual_out||'-')}</div>` : '';
                        const warn = r.needs_extend ? `<span class="badge bg-warning text-dark ms-1" title="Actual pulang lebih lama dari SPL approved">Need Extend</span>` : '';
                        return `<div>${escapeHtml(jam)}${warn}</div>${actual}${renderSpecialRuleSummary(r.rule_summary)}`;
                    }},
                    {data:'flow_name', render:v=>escapeHtml(v||'-')},
                    {data:'pending_level', render:v=>escapeHtml(v||'-')},
                    {data:'status', render:v=>statusBadge(v)},
                    {data:null, orderable:false, render:(d,t,r)=>renderSplActionButtons(r)}
                ],
                order: [[4, 'desc']]
            });
            $('#splTable_filter input')
                .off('.DT')
                .on('input', function(){
                    const value = this.value || '';
                    if (splTableSearchDebounceTimer) {
                        clearTimeout(splTableSearchDebounceTimer);
                    }
                    splTableSearchDebounceTimer = setTimeout(() => {
                        if (table) table.search(value).draw(false);
                    }, 350);
                });
            scheduleSplPlainFallback();
        } catch (e) {
            console.error('SPL DataTable init failed, switching to plain mode.', e);
            activateSplPlainMode({ data: [] });
        }
    }
    initSplDataTable();
    const separatePayoutTable = $('#splSeparatePayoutTable').length ? $('#splSeparatePayoutTable').DataTable({
        data: [],
        columns: [
            {data:'document_no'},
            {data:'work_date'},
            {data:null, render:r=>`${r.employee_code||'-'} - ${r.employee_name||'-'}`},
            {data:'overtime_type_label'},
            {data:'bonus_hours', render:v=>Number(v||0).toFixed(2)},
            {data:'bonus_hk', render:v=>Number(v||0)},
            {data:null, render:(d,t,r)=>`<div class="fw-semibold">Rp ${Number(r.estimated_nominal||0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</div><div class="small text-muted">${r.estimate_label || 'Estimasi bonus'}</div>`},
            {data:'release_profil_bulan_label', render:v=>v || '<span class="text-muted">Belum dijadwalkan</span>'},
            {data:'status', render:v=>separateStatusBadge(v)},
            {data:'payment_notes', render:(v,t,r)=>v || r.notes || '<span class="text-muted">-</span>'},
            {data:null, orderable:false, render:(d,t,r)=>{
                if (String(r.status || '') === 'paid') {
                    return `<div class="d-flex flex-column gap-1"><span class="text-success small">Paid ${r.paid_at || ''}</span><button class="btn btn-xs btn-outline-warning btn-undo-paid-separate" data-id="${r.id}">Undo Paid</button></div>`;
                }
                return `<button class="btn btn-xs btn-outline-success btn-mark-paid-separate" data-id="${r.id}">Mark Paid</button>`;
            }}
        ]
    }) : null;
    function byId(id){ return (rows||[]).find(x => Number(x.id) === Number(id)); }
    function mergeRowDetail(detail){
        if (!detail || !detail.id) return detail;
        const targetId = Number(detail.id);
        rows = (rows || []).map(row => Number(row.id) === targetId ? {...row, ...detail} : row);
        return byId(targetId) || detail;
    }
    function fetchSplDetail(id){
        const existing = byId(id);
        if (existing && Object.prototype.hasOwnProperty.call(existing, 'rule_payload')) {
            return $.Deferred().resolve(existing).promise();
        }
        return $.getJSON(`${splDetailUrlBase}/${id}`).then(resp => mergeRowDetail(resp?.data || null));
    }
    function resetForm(){
        editId = null;
        splSegments = [];
        $('#extendFromId').val('');
        $('#splModalTitle').text('Tambah Surat Perintah Lembur');
        if (!selfMode) setKaryawanMulti(true);
        resetKaryawanSearchMode();
        $('#karyawanId').val(isKaryawanMultiMode ? [] : '');
        renderKaryawanOptions('');
        $('#requestDate').val(new Date().toISOString().slice(0,10));
        $('#workDate').val(new Date().toISOString().slice(0,10));
        setSplJobSelection(null, '', '');
        $('#startTime').val('18:00');
        $('#endTime').val('21:00');
        $('#overtimeTypePreset').val('all');
        applyOvertimePresetSelection({ preserveSelection: false });
        $('#overtimeType').val('normal');
        fillSpecialRuleFields({});
        $('#targetProfilBulanId').val('');
        $('#separateReleaseProfilBulanId').val('');
        $('#reason').val('');
        syncOvertimeTypeUI();
        applyEmergencyDefaultNominal();
        syncEmergencyDefaultHint();
        renderSplSegments();
    }
    function openEdit(row){
        editId = Number(row.id);
        splSegments = [];
        $('#extendFromId').val('');
        $('#splModalTitle').text('Edit Surat Perintah Lembur');
        setKaryawanMulti(false);
        resetKaryawanSearchMode();
        $('#karyawanId').val(row.karyawan_id ? String(row.karyawan_id) : '');
        renderKaryawanOptions('');
        setSplJobSelection(row.job_id ? String(row.job_id) : '__UNJOB__', row.job_code || '', row.job_name || '');
        $('#flowId').val(row.approval_flow_id || '');
        $('#requestDate').val(row.request_date || new Date().toISOString().slice(0,10));
        $('#workDate').val(row.work_date || '');
        $('#overtimeTypePreset').val(resolveOvertimePresetFromType(row.overtime_type || 'normal'));
        applyOvertimePresetSelection({ preserveSelection: false });
        $('#overtimeType').val(row.overtime_type || 'normal');
        $('#startTime').val((row.start_time||'').slice(0,5));
        $('#endTime').val((row.end_time||'').slice(0,5));
        fillSpecialRuleFields(row.rule_payload || {});
        $('#targetProfilBulanId').val(row.target_profil_bulan_id ? String(row.target_profil_bulan_id) : '');
        $('#separateReleaseProfilBulanId').val(row.separate_release_profil_bulan_id ? String(row.separate_release_profil_bulan_id) : '');
        $('#reason').val(row.reason || '');
        syncOvertimeTypeUI();
        renderSplSegments();
        modal.show();
    }

    function openExtend(row){
        editId = null;
        splSegments = [];
        $('#extendFromId').val(String(row.id));
        $('#splModalTitle').text('Extend SPL (Tambahan Jam)');
        setKaryawanMulti(false);
        resetKaryawanSearchMode();
        $('#karyawanId').val(row.karyawan_id ? String(row.karyawan_id) : '');
        renderKaryawanOptions('');
        setSplJobSelection(row.job_id ? String(row.job_id) : '__UNJOB__', row.job_code || '', row.job_name || '');
        $('#flowId').val(row.approval_flow_id || '');
        $('#requestDate').val(new Date().toISOString().slice(0,10));
        $('#workDate').val(row.work_date || new Date().toISOString().slice(0,10));
        $('#overtimeTypePreset').val(resolveOvertimePresetFromType(row.overtime_type || 'normal'));
        applyOvertimePresetSelection({ preserveSelection: false });
        $('#overtimeType').val(row.overtime_type || 'normal');
        $('#startTime').val((row.end_time||'').slice(0,5) || '18:00');
        $('#endTime').val((row.actual_out||row.end_time||'').slice(0,5) || '21:00');
        fillSpecialRuleFields(row.rule_payload || {});
        $('#targetProfilBulanId').val(row.target_profil_bulan_id ? String(row.target_profil_bulan_id) : '');
        $('#separateReleaseProfilBulanId').val(row.separate_release_profil_bulan_id ? String(row.separate_release_profil_bulan_id) : '');
        const baseReason = row.reason ? String(row.reason) : '';
        $('#reason').val(`Extend dari ${row.document_no || ('SPL#' + row.id)}. ${baseReason}`.trim());
        syncOvertimeTypeUI();
        renderSplSegments();
        modal.show();
    }

    function getCurrentBonusPaymentMode(){
        const type = String($('#overtimeType').val() || '');
        if (type === 'emergency_on_call') return String($('#bonusPaymentMode').val() || '');
        if (type === 'work_target') return String($('#workTargetPaymentMode').val() || '');
        if (type === 'continues_next_day') return String($('#continuesPaymentMode').val() || '');
        return '';
    }

    function syncOvertimeTypeUI(){
        const type = String($('#overtimeType').val() || '');
        const isNoRestTrigger = isNoRestTriggerType(type);
        const isEmergency = type === 'emergency_on_call';
        const isWorkTarget = type === 'work_target';
        const isContinues = type === 'continues_next_day';
        $('#timeRangeStartWrap, #timeRangeEndWrap').toggleClass('d-none', isNoRestTrigger);
        $('#startTime, #endTime').prop('required', !isNoRestTrigger);
        $('#specialRuleSection').toggleClass('d-none', !(isEmergency || isWorkTarget || isContinues));
        $('#emergencyRuleFields').toggleClass('d-none', !isEmergency);
        $('#workTargetRuleFields').toggleClass('d-none', !isWorkTarget);
        $('#continuesRuleFields').toggleClass('d-none', !isContinues);
        $('#specialSettlementFields').toggleClass('d-none', !(isEmergency || isWorkTarget || isContinues));
        $('#specialRuleTypeBadge').text(
            isEmergency ? 'Emergency On Call'
            : isWorkTarget ? 'Work Target'
            : isContinues ? 'Continues Workday'
            : 'Special Rule'
        );
        $('#specialRuleSectionHint').text(
            isEmergency ? 'Emergency On Call bisa berisi insentif nominal dan/atau tambahan jam lembur pada hari kerja tersebut.'
            : isWorkTarget ? 'Jam actual tetap jujur. Sisa target yang valid diproses sebagai bonus terpisah sesuai approval.'
            : isContinues ? 'Kekurangan jam workday bisa dikonversi menjadi bonus jam atau bonus 1 HK.'
            : 'Field tambahan ini hanya aktif untuk jenis SPL khusus.'
        );
        $('#bonusPaymentMode').prop('required', isEmergency);
        $('#emergencyBonusHours, #emergencyBonusNominal').prop('required', false);
        $('#workTargetPaymentMode').prop('required', isWorkTarget);
        $('#workTargetBonusHours, #workTargetBonusCapHours, #workTargetMinimumActualHours').prop('required', false);
        $('#continuesTargetCoverageHours, #continuesNextDayWorkHours, #continuesShortageHours, #continuesConversionMode, #continuesPaymentMode').prop('required', isContinues);
        const paymentMode = getCurrentBonusPaymentMode();
        const isPayroll = paymentMode === 'payroll';
        const isSeparate = paymentMode === 'separate';
        $('#targetProfilBulanWrap').toggleClass('d-none', !(isEmergency || isWorkTarget || isContinues) || !isPayroll);
        $('#separateReleaseProfilBulanWrap').toggleClass('d-none', !(isEmergency || isWorkTarget || isContinues) || !isSeparate);
        $('#targetProfilBulanId').prop('required', (isEmergency || isWorkTarget || isContinues) && isPayroll);
        if (isEmergency) {
            applyEmergencyDefaultNominal();
            if (!$('#emergencyBaselineMode').val()) {
                $('#emergencyBaselineMode').val('after_normal_or_existing_ot');
            }
            if (!$('#emergencyMultiplierProfile').val()) {
                $('#emergencyMultiplierProfile').val('default');
            }
            syncEmergencyMultiplierProfileHint();
        }
        if (isWorkTarget && !$('#workTargetPaymentMode').val()) {
            $('#workTargetPaymentMode').val('payroll');
        }
        if (isNoRestTrigger) {
            $('#startTime').val('');
            $('#endTime').val('');
        } else {
            if (!$('#startTime').val()) $('#startTime').val('18:00');
            if (!$('#endTime').val()) $('#endTime').val('21:00');
        }
    }
    function renderCalendar(){
        const calendarEl = document.getElementById('splCalendar');
        const events = getFilteredSplRows().slice().sort(splChronologicalSort).map(r => {
            const startText = String(r.start_time || '-').slice(0, 5);
            const endText = String(r.end_time || '-').slice(0, 5);
            return {
            id: String(r.id),
            title: `${startText}-${endText} ${r.document_no || 'SPL'}`,
            start: r.work_date,
            allDay: true,
            backgroundColor: statusColor(r.status),
            borderColor: statusColor(r.status),
            extendedProps: { row: r, sortKey: splTimeSortKey(r) }
            };
        });
        if (!calendar) {
            calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'id',
                initialView: 'dayGridMonth',
                height: 'auto',
                firstDay: 1,
                eventOrder: function(a, b){
                    return String(a.extendedProps?.sortKey || '').localeCompare(String(b.extendedProps?.sortKey || ''));
                },
                buttonText: {
                    today: 'Hari ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    day: 'Hari',
                    list: 'Daftar'
                },
                noEventsContent: 'Belum ada data SPL.',
                events: events,
                eventClick: function(info){
                    const baseRow = info.event.extendedProps.row;
                    fetchSplDetail(baseRow.id).done((r) => {
                        let html = buildApprovalDetailHtml(r);
                        Swal.fire({
                            title: 'Detail SPL',
                            html,
                            showCancelButton: !!r.can_delete,
                            cancelButtonText: 'Delete',
                            showDenyButton: !!r.can_edit,
                            denyButtonText: 'Edit',
                            confirmButtonText: 'Close'
                        }).then(res => {
                            if (res.isDenied && r.can_edit) openEdit(r);
                            if (res.dismiss === Swal.DismissReason.cancel && r.can_delete) {
                                Swal.fire({title:'Hapus SPL ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
                                    if(!x.isConfirmed) return;
                                    $.ajax({url:`{{ url('/surat-perintah-lembur') }}/${r.id}`, method:'DELETE'})
                                        .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
                                        .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                                });
                            }
                        });
                    }).fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
                }
            });
            calendar.render();
        } else {
            calendar.removeAllEvents();
            events.forEach(e => calendar.addEvent(e));
        }
    }

    function getSelectedKaryawanValues(){
        const selected = $('#karyawanId').val() || [];
        return Array.isArray(selected) ? selected.map(String) : [String(selected)];
    }

    function syncKaryawanSelectionCount(){
        const count = getSelectedKaryawanValues().filter(Boolean).length;
        $('#karyawanSelectionCount').text(`${count} karyawan dipilih.`);
        $('#checkAllKaryawanRows').prop('checked', isKaryawanMultiMode && count > 0 && count === $('#karyawanTableBody .karyawan-row-select').length);
    }

    function setSelectedKaryawanValues(values){
        const normalized = (Array.isArray(values) ? values : [values])
            .map(v => String(v || '').trim())
            .filter(Boolean);
        if (isKaryawanMultiMode) {
            $('#karyawanId').val(normalized);
        } else {
            $('#karyawanId').val(normalized[0] || '');
        }
        syncKaryawanSelectionCount();
        syncEmergencyDefaultHint();
        applyEmergencyDefaultNominal();
    }

    function applyKaryawanSearchModeUi(){
        $('.btn-karyawan-sort')
            .removeClass('active btn-primary')
            .addClass('btn-outline-primary');
        $(`.btn-karyawan-sort[data-sort-type="${karyawanSearchMode}"]`)
            .removeClass('btn-outline-primary')
            .addClass('active btn-primary');

        const meta = {
            all: {
                badge: 'Semua',
                placeholder: 'Cari kode / nama karyawan...',
                hint: 'Sedang mencari berdasarkan kode atau nama karyawan.'
            },
            code: {
                badge: 'Kode',
                placeholder: 'Cari kode karyawan...',
                hint: 'Sedang mencari berdasarkan kode karyawan.'
            },
            name: {
                badge: 'Nama',
                placeholder: 'Cari nama karyawan...',
                hint: 'Sedang mencari berdasarkan nama karyawan.'
            },
            group: {
                badge: 'Group',
                placeholder: 'Cari group karyawan...',
                hint: 'Sedang mencari berdasarkan group karyawan.'
            },
            export_group: {
                badge: 'Group Cetak',
                placeholder: 'Cari group cetak...',
                hint: 'Sedang mencari berdasarkan group cetak aktif/profil bulan terbaru.'
            }
        }[karyawanSearchMode] || {
            badge: 'Semua',
            placeholder: 'Cari kode / nama karyawan...',
            hint: 'Sedang mencari berdasarkan kode atau nama karyawan.'
        };

        $('#karyawanSearchActiveBadge').text(meta.badge);
        $('#karyawanSearch').attr('placeholder', meta.placeholder);
        $('#karyawanSearchHint').text(meta.hint);
    }

    function resetKaryawanSearchMode(){
        karyawanSearchMode = 'all';
        $('#karyawanSearch').val('');
        applyKaryawanSearchModeUi();
    }

    function resolveKaryawanDividerLabel(row){
        if (karyawanSearchMode === 'group') {
            return String(row.employee_group || '').trim() || 'Tanpa Group';
        }
        if (karyawanSearchMode === 'export_group') {
            return String(row.export_employee_group || '').trim() || 'Tanpa Group Cetak';
        }
        if (karyawanSearchMode === 'name') {
            return (String(row.full_name || '').trim().charAt(0) || '#').toUpperCase();
        }
        if (karyawanSearchMode === 'code') {
            return (String(row.employee_code || '').trim().charAt(0) || '#').toUpperCase();
        }
        return '';
    }

    function renderKaryawanOptions(filterText = null){
        const keyword = String(filterText ?? $('#karyawanSearch').val() ?? '').trim().toLowerCase();
        const selectedValues = getSelectedKaryawanValues();
        const filtered = (refs.karyawans || [])
            .slice()
            .sort((a, b) => {
                if (karyawanSearchMode === 'export_group') {
                    return String(a.export_employee_group || '').localeCompare(String(b.export_employee_group || ''), 'id')
                        || String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                if (karyawanSearchMode === 'group') {
                    return String(a.employee_group || '').localeCompare(String(b.employee_group || ''), 'id')
                        || String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                if (karyawanSearchMode === 'name') {
                    return String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                return String(a.employee_code || '').localeCompare(String(b.employee_code || ''), 'id');
            })
            .filter(x => {
                if (!keyword) return true;
                const code = String(x.employee_code || '').toLowerCase();
                const name = String(x.full_name || '').toLowerCase();
                const group = String(x.employee_group || '').toLowerCase();
                const exportGroup = String(x.export_employee_group || '').toLowerCase();
                if (karyawanSearchMode === 'code') return code.includes(keyword);
                if (karyawanSearchMode === 'name') return name.includes(keyword);
                if (karyawanSearchMode === 'group') return group.includes(keyword);
                if (karyawanSearchMode === 'export_group') return exportGroup.includes(keyword);
                return code.includes(keyword) || name.includes(keyword) || group.includes(keyword) || exportGroup.includes(keyword);
            });

        let previousDividerLabel = null;
        const isMultipleSelect = $('#karyawanId').prop('multiple');
        const blankOption = isMultipleSelect ? '' : '<option value=""></option>';
        $('#karyawanId').html(blankOption + filtered.map(x => {
            const tags = [];
            if (x.employee_group) tags.push(x.employee_group);
            if (x.export_employee_group) tags.push(`Cetak: ${x.export_employee_group}`);
            return `<option value="${x.id}">${x.employee_code} - ${x.full_name}${tags.length ? ' [' + tags.join(' | ') + ']' : ''}</option>`;
        }).join(''));

        const stillAvailable = selectedValues.filter(v => $('#karyawanId option[value="' + v + '"]').length > 0);
        if (stillAvailable.length) {
            $('#karyawanId').val(isMultipleSelect ? stillAvailable : stillAvailable[0]);
        } else {
            $('#karyawanId').val(isMultipleSelect ? [] : '');
        }
        const selectedSet = new Set(getSelectedKaryawanValues().filter(Boolean));
        const rowsHtml = filtered.length ? filtered.map(x => {
            const dividerLabel = resolveKaryawanDividerLabel(x);
            const dividerHtml = dividerLabel && karyawanSearchMode !== 'all' && dividerLabel !== previousDividerLabel
                ? `<tr class="table-secondary small text-uppercase fw-semibold"><td colspan="5">` + dividerLabel + `</td></tr>`
                : '';
            previousDividerLabel = dividerLabel || previousDividerLabel;
            return `${dividerHtml}
                <tr class="karyawan-table-row" data-karyawan-id="${x.id}" style="cursor:pointer;">
                    <td>
                        <input type="checkbox" class="form-check-input karyawan-row-select" value="${x.id}" ${selectedSet.has(String(x.id)) ? 'checked' : ''}>
                    </td>
                    <td class="fw-semibold">${x.employee_code || '-'}</td>
                    <td>${x.full_name || '-'}</td>
                    <td>${x.employee_group || '<span class="text-muted">-</span>'}</td>
                    <td>${x.export_employee_group || '<span class="text-muted">-</span>'}</td>
                </tr>`;
        }).join('') : '<tr><td colspan="5" class="text-muted text-center py-3">Tidak ada hasil karyawan.</td></tr>';
        $('#karyawanTableBody').html(rowsHtml);
        if (!isKaryawanMultiMode) {
            $('#checkAllKaryawanRows').prop('checked', false);
        }
        syncKaryawanSelectionCount();
        syncEmergencyDefaultHint();
    }

    function formatOvertimeTypeLabel(value, label){
        const normalized = String(value || '').trim();
        const map = {
            normal: 'OT Normal',
            no_rest: 'NoRest-1',
            no_rest_skip_break: 'NoRest-2',
            emergency_on_call: 'Emergency On Call',
            work_target: 'Work Target',
            continues_next_day: 'Continues Workday'
        };
        return map[normalized] || label || 'OT Normal';
    }

    function renderOvertimeTypeQuickChoices(){
        const allowed = new Set(getAllowedOvertimeTypeValues());
        const currentValue = String($('#overtimeType').val() || '');
        const items = (refs.splTypes || []).filter((x) => (x.type || 'option') !== 'divider' && allowed.has(String(x.value || '')));
        const container = $('#overtimeTypeQuickChoices');
        if (!container.length) return;
        if (!items.length) {
            container.html('<span class="text-muted small">Belum ada opsi jenis SPL untuk preset ini.</span>');
            $('#selectedOvertimeTypeHint').text('Belum ada opsi jenis SPL untuk preset ini.');
            return;
        }
        container.html(items.map((item) => {
            const value = String(item.value || '');
            const activeClass = value === currentValue ? 'btn-primary active' : 'btn-outline-primary';
            return `<button type="button" class="btn btn-sm ${activeClass} btn-overtime-type-quick" data-value="${escapeHtml(value)}">${escapeHtml(formatOvertimeTypeLabel(value, item.label))}</button>`;
        }).join(''));
        const currentItem = items.find((item) => String(item.value || '') === currentValue) || items[0];
        $('#selectedOvertimeTypeHint').text(`Form aktif: ${formatOvertimeTypeLabel(currentItem?.value || '', currentItem?.label || 'OT Normal')}`);
    }

    function getAllowedOvertimeTypeValues(){
        const preset = String($('#overtimeTypePreset').val() || 'all');
        return overtimePresetRules[preset]?.allowed || overtimePresetRules.all.allowed;
    }

    function renderOvertimeTypeOptions(items, includeBlank = false){
        const allowed = new Set(getAllowedOvertimeTypeValues());
        const html = [];
        if (includeBlank) {
            html.push('<option value="">- tidak diubah -</option>');
        }
        let dividerRendered = false;
        (items || []).forEach(x => {
            if ((x.type || 'option') === 'divider') {
                if (!dividerRendered && [...allowed].some((value) => ['emergency_on_call', 'work_target', 'continues_next_day'].includes(value))) {
                    html.push(`<option value="" disabled>${x.label}</option>`);
                    dividerRendered = true;
                }
                return;
            }
            if (!allowed.has(String(x.value || ''))) {
                return;
            }
            html.push(`<option value="${x.value}">${formatOvertimeTypeLabel(x.value, x.label)}</option>`);
        });
        return html.join('');
    }

    function resolveOvertimePresetFromType(type){
        const normalized = String(type || 'normal').trim();
        if (normalized === 'no_rest') return 'nr1';
        if (normalized === 'no_rest_skip_break') return 'nr2';
        if (normalized === 'normal') return 'normal_only';
        return 'all';
    }

    function applyOvertimePresetSelection(options = {}){
        const preserveSelection = options.preserveSelection !== false;
        const currentValue = String($('#overtimeType').val() || 'normal');
        const nextOptions = renderOvertimeTypeOptions(refs.splTypes || []);
        $('#overtimeType').html(nextOptions);

        const allowed = getAllowedOvertimeTypeValues();
        const fallbackValue = allowed.includes('normal') ? 'normal' : (allowed[0] || '');
        const nextValue = preserveSelection && allowed.includes(currentValue) ? currentValue : fallbackValue;
        $('#overtimeType').val(nextValue || '');

        const preset = String($('#overtimeTypePreset').val() || 'all');
        $('#overtimeTypePresetHint').text(overtimePresetRules[preset]?.hint || overtimePresetRules.all.hint);
        renderOvertimeTypeQuickChoices();
        syncOvertimeTypeUI();
    }

    function getFilteredSplRows(){
        return rows || [];
    }

    function syncEmergencyMultiplierProfileHint(){
        const value = String($('#emergencyMultiplierProfile').val() || '');
        const row = (refs.emergencyMultiplierProfiles || []).find(x => String(x.value || '') === value);
        $('#emergencyMultiplierProfileHint').text(row?.notes || 'Default emergency dimulai setelah baseline dan memakai profile multiplier yang dipilih.');
    }

    function applySplSpecialFilterUi(){
        $('.btn-special-filter').removeClass('active btn-primary').addClass('btn-outline-primary');
        $(`.btn-special-filter[data-filter="${splSpecialFilterMode}"]`).removeClass('btn-outline-primary').addClass('active btn-primary');
        const labels = {
            all: 'Semua SPL',
            special: 'Special Overtime',
            payroll: 'Bonus Masuk Payroll',
            separate: 'Bonus Bayar Terpisah'
        };
        $('#splSpecialFilterBadge').text(`Filter: ${labels[splSpecialFilterMode] || 'Semua SPL'}`);
    }

    function loadRefs(){
        return $.getJSON('{{ route('surat_perintah_lembur.refs') }}').done(resp=>{
            refs = resp.data || resp || refs;
            renderKaryawanOptions('');
            $('#flowId').html(['<option value="">- Default / Admin-HRD -</option>'].concat((refs.flows||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`)).join(''));
            applyOvertimePresetSelection({ preserveSelection: false });
            $('#bonusPaymentMode').html(['<option value="">- pilih metode bayar -</option>'].concat((refs.bonusPaymentModes||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            $('#workTargetPaymentMode').html(['<option value="">- pilih metode bayar -</option>'].concat((refs.bonusPaymentModes||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            $('#continuesPaymentMode').html(['<option value="">- pilih metode bayar -</option>'].concat((refs.bonusPaymentModes||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            $('#continuesConversionMode').html(['<option value="">- pilih konversi -</option>'].concat((refs.continuesConversionModes||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            $('#emergencyBaselineMode').html(['<option value="">- pilih baseline emergency -</option>'].concat((refs.emergencyBaselineModes||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            $('#emergencyMultiplierProfile').html(['<option value="">- pilih profile multiplier -</option>'].concat((refs.emergencyMultiplierProfiles||[]).map(x=>`<option value="${x.value}">${x.label}</option>`)).join(''));
            syncEmergencyDefaultHint();
            syncEmergencyMultiplierProfileHint();
            const profilOptions = ['<option value="">- pilih profil bulan -</option>'].concat((refs.profilBulans||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`)).join('');
            $('#targetProfilBulanId').html(profilOptions);
            $('#separateReleaseProfilBulanId').html(profilOptions);
            $('#separateReleaseProfilFilter').html(['<option value="">- Semua Profil Cair -</option>'].concat((refs.profilBulans||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`)).join(''));
            $('#separateCurrentProfilBadge').text(`Profil aktif: ${refs.currentProfilBulanLabel || '-'}`);
            if (refs.currentProfilBulanId && !$('#separateReleaseProfilFilter').val()) {
                $('#separateReleaseProfilFilter').val(String(refs.currentProfilBulanId));
            }
            if (!$('#separatePayoutStatusFilter').val()) {
                $('#separatePayoutStatusFilter').val('pending');
            }
            $('#jobId').html(['<option value=\"\">-</option>'].concat((refs.jobs||[]).map(x=>`<option value=\"${x.id}\">${x.code} - ${x.name}</option>`)).join(''));
            initSplJobSelect();
            if (selfMode && (refs.karyawans||[]).length === 1) {
                $('#karyawanId').val(String(refs.karyawans[0].id)).prop('disabled', true);
                $('#karyawanTableWrap').addClass('opacity-75');
                $('#karyawanSearch').val('').prop('disabled', true);
            } else {
                $('#karyawanId').prop('disabled', false);
                $('#karyawanTableWrap').removeClass('opacity-75');
                $('#karyawanSearch').prop('disabled', false);
            }
            renderKaryawanOptions($('#karyawanSearch').val());
            syncOvertimeTypeUI();
            if (enforceJob) {
                $('#jobId').prop('required', true);
            }
            refreshSeparatePayoutExportHref();
        });
    }

    function setKaryawanMulti(enabled){
        isKaryawanMultiMode = !!enabled;
        if (enabled) {
            $('#karyawanId').attr('multiple', 'multiple').attr('size', '6');
            $('#karyawanMultiHint').show();
            $('#karyawanTableCheckHead').show();
        } else {
            $('#karyawanId').removeAttr('multiple').removeAttr('size');
            $('#karyawanMultiHint').hide();
            $('#karyawanTableCheckHead').hide();
            $('#checkAllKaryawanRows').prop('checked', false);
        }
        renderKaryawanOptions($('#karyawanSearch').val());
    }

    function tryAutoPickJob(){
        if (!refs.assignments) return;
        const workDate = String($('#workDate').val() || '');
        if (!workDate) return;
        const selected = ($('#karyawanId').val() || []);
        const ids = Array.isArray(selected) ? selected.map(x=>Number(x)).filter(x=>x>0) : [Number(selected)].filter(x=>x>0);
        if (!ids.length) return;
        const matches = (refs.assignments||[]).filter(a => String(a.work_date) === workDate && ids.includes(Number(a.karyawan_id)));
        if (!matches.length) return;
        if (String($('#jobId').val() || '').trim() === '__UNJOB__') return;
        const jobId = Number(matches[0].job_id);
        const allSame = matches.every(m => Number(m.job_id) === jobId);
        if (allSame && jobId > 0) {
            setSplJobSelection(String(jobId), matches[0].job_code || '', matches[0].job_name || '');
        }
    }

    function loadData(resetPaging = false){
        if (splPlainMode || !table) {
            setSplTableLoading(true);
            fetchSplData({ draw: 1, start: 0, length: 25 })
                .done((resp) => activateSplPlainMode(resp))
                .fail((xhr) => {
                    setSplTableLoading(false);
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat data SPL.', 'error');
                });
            return table;
        }
        table.ajax.reload(null, resetPaging);
        scheduleSplPlainFallback();
        return table;
    }

    function loadSeparatePayoutData(){
        if (!separatePayoutTable) return $.Deferred().resolve().promise();
        const params = {
            release_profil_bulan_id: $('#separateReleaseProfilFilter').val() || '',
            status: $('#separatePayoutStatusFilter').val() || ''
        };
        return $.getJSON('{{ route('surat_perintah_lembur.separate_payout_data') }}', params).done(resp => {
            separatePayoutTable.clear().rows.add(resp.data || []).draw();
        });
    }

    function refreshSeparatePayoutExportHref(){
        const url = new URL(`{{ route('surat_perintah_lembur.separate_payout_export') }}`, window.location.origin);
        const releaseProfil = $('#separateReleaseProfilFilter').val() || '';
        const status = $('#separatePayoutStatusFilter').val() || '';
        if (releaseProfil) url.searchParams.set('release_profil_bulan_id', releaseProfil);
        if (status) url.searchParams.set('status', status);
        $('#btnExportSeparatePayout').attr('href', url.toString());
    }

    function collectThirdPartySyncPayload(apply = false){
        return {
            apply: apply ? 1 : 0,
            auto_submit: $('#splSyncAutoSubmit').is(':checked') ? 1 : 0,
            connection: 'third_party',
            source_table: $('#splSyncSourceTable').val() || 'hrd_input_lembur',
            employee_table: $('#splSyncEmployeeTable').val() || 'pegawai_all',
            date_from: $('#splSyncDateFrom').val() || '2025-12-26',
            date_to: $('#splSyncDateTo').val() || '{{ now()->toDateString() }}',
            update_existing: $('#splSyncUpdateExisting').is(':checked') ? 1 : 0,
            preview_limit: 100
        };
    }

    function isSplSyncSuggestionHidden(){
        try {
            return window.localStorage.getItem(splSyncSuggestionHiddenKey) === '1';
        } catch (e) {
            return false;
        }
    }

    function setSplSyncSuggestionHidden(hidden){
        try {
            if (hidden) {
                window.localStorage.setItem(splSyncSuggestionHiddenKey, '1');
            } else {
                window.localStorage.removeItem(splSyncSuggestionHiddenKey);
            }
        } catch (e) {
            // Kalau browser menolak localStorage, tetap jalankan toggle visual sesi ini.
        }
        $('#splSyncSuggestPanel').toggleClass('d-none', !!hidden);
        $('#splSyncSuggestCollapsed').toggleClass('d-none', !hidden);
    }

    function loadThirdPartySyncSuggestions(){
        setSplSyncSuggestionHidden(false);
        $('#splSyncSuggestSummary').text('Memuat saran tanggal dari source SPL 3rd party...');
        $('#splSyncSuggestRanges').html('<span class="badge text-bg-secondary">Memuat...</span>');
        return $.ajax({
            url: syncThirdPartySuggestionsUrl,
            type: 'POST',
            timeout: 180000,
            data: {
                connection: 'third_party',
                source_table: $('#splSyncSourceTable').val() || 'hrd_input_lembur',
                date_from: '2025-12-26',
                date_to: '{{ now()->toDateString() }}'
            }
        }).done((resp) => {
            renderThirdPartySyncSuggestions(resp);
        }).fail((xhr) => {
            const msg = xhr.responseJSON?.output || xhr.responseJSON?.message || 'Saran tanggal belum bisa dimuat.';
            $('#splSyncSuggestSummary').text(msg);
            $('#splSyncSuggestRanges').html('<span class="badge text-bg-danger">Gagal memuat saran</span>');
        });
    }

    function initSplJobFilter(){
        const $jobFilter = $('#splFilterJob');
        if (!$jobFilter.length) return;
        if ($jobFilter.data('select2')) {
            $jobFilter.select2('destroy');
        }

        $jobFilter.select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Cari no job / nama job...',
            allowClear: true,
            ajax: {
                url: projectJobRefUrl,
                dataType: 'json',
                delay: 250,
                data: function(params){
                    return {
                        q: params.term || '',
                        work_date: $('#splFilterDateTo').val() || $('#splFilterDateFrom').val() || '{{ now()->toDateString() }}'
                    };
                },
                processResults: function(data){
                    return { results: data.results || [] };
                }
            }
        });
    }

    function initSplJobSelect(){
        const $jobSelect = $('#jobId');
        if (!$jobSelect.length) return;
        if ($jobSelect.data('select2')) {
            $jobSelect.select2('destroy');
        }

        if (!$jobSelect.find('option[value="__UNJOB__"]').length) {
            $jobSelect.append(new Option('Unjob / No Job', '__UNJOB__', false, false));
        }

        $jobSelect.select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Cari no job / nama project...',
            allowClear: true,
            dropdownParent: $('#splModal'),
            ajax: {
                url: projectJobRefUrl,
                dataType: 'json',
                delay: 250,
                data: function(params){
                    return {
                        q: params.term || '',
                        work_date: $('#workDate').val() || $('#requestDate').val() || '{{ now()->toDateString() }}'
                    };
                },
                processResults: function(data){
                    return { results: data.results || [] };
                }
            }
        });
    }

    function setSplJobSelection(jobId, jobCode = '', jobName = ''){
        const $jobSelect = $('#jobId');
        const normalizedId = String(jobId || '').trim();
        if (!$jobSelect.length) return;

        if (!normalizedId) {
            $jobSelect.val('').trigger('change');
            return;
        }

        if (normalizedId === '__UNJOB__') {
            if (!$jobSelect.find('option[value="__UNJOB__"]').length) {
                $jobSelect.append(new Option('Unjob / No Job', '__UNJOB__', true, true));
            }
            $jobSelect.val('__UNJOB__').trigger('change');
            return;
        }

        if (!$jobSelect.find(`option[value="${normalizedId}"]`).length) {
            const label = [String(jobCode || '').trim(), String(jobName || '').trim()]
                .filter(Boolean)
                .join(' - ') || `Job #${normalizedId}`;
            const option = new Option(label, normalizedId, true, true);
            $jobSelect.append(option);
        }

        $jobSelect.val(normalizedId).trigger('change');
    }

    function renderThirdPartySyncSuggestions(resp){
        const meta = resp?.meta || {};
        const ranges = Array.isArray(resp?.ranges) ? resp.ranges : [];
        const rows = Array.isArray(resp?.rows) ? resp.rows : [];
        const suggestedFrom = meta.suggested_from || '2025-12-26';
        const suggestedTo = meta.suggested_to || '{{ now()->toDateString() }}';

        if (suggestedFrom) $('#splSyncDateFrom').val(suggestedFrom);
        if (suggestedTo) $('#splSyncDateTo').val(suggestedTo);

        if (!ranges.length) {
            $('#splSyncSuggestSummary').text(`Tidak ada kandidat create/update pada ${meta.date_range?.[0] || '-'} s/d ${meta.date_range?.[1] || '-'}. Data yang sudah ada, locked, invalid, atau belum match tidak dihitung sebagai utang sync.`);
            $('#splSyncSuggestRanges').html('<span class="badge text-bg-success">Tidak ada kandidat perlu sync</span>');
            return;
        }

        $('#splSyncSuggestSummary').text(
            `Siap sync ${Number(meta.pending_rows || 0)} row pada ${Number(meta.pending_dates || 0)} tanggal dari ${Number(meta.source_dates || rows.length || 0)} tanggal source. Sudah ada/locked ${Number(meta.skipped_rows || 0)} row, perlu cek mapping ${Number(meta.blocked_rows || 0)} row.`
        );

        const chips = ranges.map((range, idx) => {
            const label = range.date_from === range.date_to
                ? range.date_from
                : `${range.date_from} s/d ${range.date_to}`;
            const status = String(range.status || '');
            const badgeClass = status === 'actionable'
                ? 'text-bg-success'
                : (status === 'partial' ? 'text-bg-warning text-dark' : 'text-bg-danger');
            return `
                <button type="button"
                        class="btn btn-sm ${idx === ranges.length - 1 ? 'btn-primary' : 'btn-outline-primary'} btn-spl-suggest-range"
                        data-from="${escapeHtml(range.date_from)}"
                        data-to="${escapeHtml(range.date_to)}">
                    ${escapeHtml(label)}
                    <span class="badge ms-2 ${badgeClass}">${escapeHtml(range.status_label || 'Perlu Sync')}</span>
                    <span class="small ms-2">perlu ${escapeHtml(range.remaining_count)} row</span>
                </button>
            `;
        });

        $('#splSyncSuggestRanges').html(chips.join(''));
    }

    function syncThirdPartyPreview(){
        return $.ajax({
            url: syncThirdPartyPreviewUrl,
            type: 'POST',
            timeout: 180000,
            data: collectThirdPartySyncPayload(false)
        });
    }

    function diagnoseThirdPartyFinger(){
        const payload = collectThirdPartySyncPayload(false);
        payload.preview_limit = 500;
        return $.ajax({
            url: syncThirdPartyDiagnoseUrl,
            type: 'POST',
            timeout: 180000,
            data: payload
        });
    }

    function syncThirdPartyStart(apply = false){
        return $.ajax({
            url: '{{ route('surat_perintah_lembur.sync_third_party.start') }}',
            type: 'POST',
            timeout: 180000,
            data: collectThirdPartySyncPayload(apply)
        });
    }

    function importThirdPartyDummy(){
        return $.ajax({
            url: syncThirdPartyDummyImportUrl,
            type: 'POST',
            timeout: 180000,
            data: collectThirdPartySyncPayload(false)
        });
    }

    function loadThirdPartyDummyData(){
        return $.ajax({
            url: syncThirdPartyDummyDataUrl,
            type: 'GET',
            cache: false,
            data: {
                date_from: $('#splSyncDateFrom').val() || '',
                date_to: $('#splSyncDateTo').val() || ''
            }
        }).done((resp) => {
            renderThirdPartyDummyData(resp?.data || []);
        });
    }

    function previewStatusBadge(status, label){
        const map = {
            ready_create: 'text-bg-success',
            will_update: 'text-bg-primary',
            existing_locked: 'text-bg-dark',
            existing_local: 'text-bg-warning text-dark',
            missing_join: 'text-bg-danger',
            join_pegawai_gagal: 'text-bg-danger',
            missing_finger: 'text-bg-danger',
            finger_kosong: 'text-bg-danger',
            missing_karyawan: 'text-bg-danger',
            belum_match_ahsp: 'text-bg-danger',
            invalid_datetime: 'text-bg-secondary',
            'tanggal/jam_invalid': 'text-bg-secondary',
            profil_match: 'text-bg-success',
            match_profil_bulan: 'text-bg-success',
            profil_not_assigned: 'text-bg-warning text-dark',
            belum_di_profil_bulan: 'text-bg-warning text-dark',
            no_profile_period: 'text-bg-secondary',
            tidak_ada_profil_bulan: 'text-bg-secondary',
            no_karyawan: 'text-bg-danger'
        };
        const cls = map[String(status || '').toLowerCase()] || 'text-bg-secondary';
        return `<span class="badge ${cls}">${escapeHtml(label || status || '-')}</span>`;
    }

    function renderThirdPartySyncPreview(resp){
        const summary = $('#splSyncPreviewSummary');
        const meta = $('#splSyncPreviewMeta');
        const tbody = $('#splSyncPreviewTable tbody');
        const rows = Array.isArray(resp?.rows) ? resp.rows : [];
        const stats = resp?.stats || {};
        const sourceRows = Number(resp?.meta?.source_rows || 0);
        const previewLimit = Number(resp?.meta?.preview_limit || rows.length || 0);
        const joinInfo = resp?.meta?.join || '-';
        const sourceInfo = resp?.meta?.source || '-';
        const employeeInfo = resp?.meta?.employee_source || '-';
        const range = Array.isArray(resp?.meta?.date_range) ? resp.meta.date_range.join(' s/d ') : '-';

        summary.html(`
            <span class="badge text-bg-secondary">Source: ${sourceRows}</span>
            <span class="badge text-bg-success">Create: ${Number(stats.ready_create || 0)}</span>
            <span class="badge text-bg-primary">Update: ${Number(stats.will_update || 0)}</span>
            <span class="badge text-bg-warning text-dark">Existing: ${Number(stats.existing_local || 0)}</span>
            <span class="badge text-bg-dark">Locked: ${Number(stats.existing_locked || 0)}</span>
            <span class="badge text-bg-danger">Butuh Cek: ${Number(stats.missing_finger || 0) + Number(stats.missing_karyawan || 0) + Number(stats.invalid_datetime || 0)}</span>
            <span class="badge text-bg-info">Preview: ${Number(stats.previewed || rows.length)} / ${previewLimit}</span>
        `);
        meta
            .removeClass('d-none')
            .html(`
                <div class="small mb-1"><strong>Range:</strong> ${escapeHtml(range)}</div>
                <div class="small mb-1"><strong>Sumber SPL:</strong> <code>${escapeHtml(sourceInfo)}</code></div>
                <div class="small mb-1"><strong>Sumber Pegawai:</strong> <code>${escapeHtml(employeeInfo)}</code></div>
                <div class="small mb-0"><strong>Join:</strong> <code>${escapeHtml(joinInfo)}</code></div>
            `);

        tbody.empty();
        if (!rows.length) {
            tbody.append('<tr><td colspan="9" class="text-center text-muted py-4">Tidak ada data source SPL pada range tanggal ini.</td></tr>');
            return;
        }

        rows.forEach((row) => {
            const sourceEmployeeParts = [];
            if (row.source_employee_code) sourceEmployeeParts.push(`<div class="fw-semibold">${escapeHtml(row.source_employee_code)}</div>`);
            if (row.source_employee_name) sourceEmployeeParts.push(`<div>${escapeHtml(row.source_employee_name)}</div>`);
            if (row.join_source_value) sourceEmployeeParts.push(`<div class="small text-muted">join SPL: ${escapeHtml(row.join_source_value)}</div>`);

            const ahspParts = [];
            if (row.ahsp_employee_code) ahspParts.push(`<div class="fw-semibold">${escapeHtml(row.ahsp_employee_code)}</div>`);
            if (row.ahsp_employee_name) ahspParts.push(`<div>${escapeHtml(row.ahsp_employee_name)}</div>`);
            ahspParts.push(`<div class="small text-muted">${row.job_id ? 'Job terdeteksi: #' + escapeHtml(row.job_id) : 'Job harian belum terdeteksi'}</div>`);

            tbody.append(`
                <tr>
                    <td>${escapeHtml(row.row_no)}</td>
                    <td>${previewStatusBadge(row.status, row.status_label)}</td>
                    <td>${escapeHtml(row.work_date || '-')}</td>
                    <td>${escapeHtml((row.start_time || '-') + ' - ' + (row.end_time || '-'))}</td>
                    <td>
                        <div>${escapeHtml(row.finger_raw || '-')}</div>
                        ${row.source_pk ? `<div class="small text-muted">src# ${escapeHtml(row.source_pk)}</div>` : ''}
                    </td>
                    <td>${sourceEmployeeParts.join('') || '<span class="text-muted">-</span>'}</td>
                    <td>${ahspParts.join('') || '<span class="text-muted">Belum match</span>'}</td>
                    <td><span class="badge text-bg-light border">${escapeHtml(row.action_label || '-')}</span></td>
                    <td>
                        <div>${escapeHtml(row.notes || '-')}</div>
                        ${row.reason ? `<div class="small text-muted mt-1">Reason: ${escapeHtml(row.reason)}</div>` : ''}
                    </td>
                </tr>
            `);
        });
    }

    function renderThirdPartyDummyData(rows){
        const tbody = $('#splDummyDataTable tbody');
        const caption = $('#splDummyDataCaption');
        tbody.empty();
        caption.text(`Menampilkan ${Array.isArray(rows) ? rows.length : 0} baris staging lokal.`);

        if (!Array.isArray(rows) || !rows.length) {
            tbody.append('<tr><td colspan="9" class="text-center text-muted py-4">Belum ada data dummy staging pada range ini.</td></tr>');
            return;
        }

        rows.forEach((row, idx) => {
            const sourceEmployeeParts = [];
            if (row.source_employee_code) sourceEmployeeParts.push(`<div class="fw-semibold">${escapeHtml(row.source_employee_code)}</div>`);
            if (row.source_employee_name) sourceEmployeeParts.push(`<div>${escapeHtml(row.source_employee_name)}</div>`);

            const ahspParts = [];
            if (row.matched_employee_code) ahspParts.push(`<div class="fw-semibold">${escapeHtml(row.matched_employee_code)}</div>`);
            if (row.matched_employee_name) ahspParts.push(`<div>${escapeHtml(row.matched_employee_name)}</div>`);
            if (row.matched_job_id) ahspParts.push(`<div class="small text-muted">Job #${escapeHtml(row.matched_job_id)}</div>`);

            tbody.append(`
                <tr>
                    <td>${idx + 1}</td>
                    <td>${escapeHtml(row.work_date || '-')}</td>
                    <td>${escapeHtml((row.start_time || '-') + ' - ' + (row.end_time || '-'))}</td>
                    <td>${escapeHtml(row.finger_id || '-')}</td>
                    <td>${sourceEmployeeParts.join('') || '<span class="text-muted">-</span>'}</td>
                    <td>${ahspParts.join('') || '<span class="text-muted">Belum match</span>'}</td>
                    <td>${previewStatusBadge(row.preview_status, row.preview_status || '-')}</td>
                    <td>
                        <div>${escapeHtml(row.import_batch_id || '-')}</div>
                        ${row.source_synced_at ? `<div class="small text-muted">${escapeHtml(row.source_synced_at)}</div>` : ''}
                    </td>
                    <td>
                        <div>${escapeHtml(row.preview_notes || '-')}</div>
                        ${row.reason ? `<div class="small text-muted mt-1">Reason: ${escapeHtml(row.reason)}</div>` : ''}
                    </td>
                </tr>
            `);
        });
    }

    function renderThirdPartyDiagnostic(resp){
        const summary = $('#splSyncDiagnosticSummary');
        const meta = $('#splSyncDiagnosticMeta');
        const rows = Array.isArray(resp?.rows) ? resp.rows : [];
        const detailRows = Array.isArray(resp?.detail_rows) ? resp.detail_rows : [];
        splDiagnosticRows = rows;
        splDiagnosticDetailRows = detailRows;
        const diagnostics = resp?.diagnostics || {};
        const range = Array.isArray(resp?.meta?.date_range) ? resp.meta.date_range.join(' s/d ') : '-';
        const sourceInfo = resp?.meta?.source || '-';
        const employeeInfo = resp?.meta?.employee_source || '-';

        summary.html(`
            <span class="badge text-bg-success">Match: ${Number(diagnostics.matched_rows || 0)}</span>
            <span class="badge text-bg-danger">Finger Kosong: ${Number(diagnostics.missing_finger_rows || 0)}</span>
            <span class="badge text-bg-warning text-dark">Belum Match Aplikasi: ${Number(diagnostics.missing_match_rows || 0)}</span>
            <span class="badge text-bg-secondary">Invalid Jam/Tgl: ${Number(diagnostics.invalid_datetime_rows || 0)}</span>
            <span class="badge text-bg-info">Grouped: ${Number(diagnostics.grouped_rows || rows.length || 0)}</span>
            <span class="badge text-bg-primary">Detail Row: ${Number(detailRows.length || 0)}</span>
        `);
        meta
            .removeClass('d-none')
            .html(`
                <div class="small mb-1"><strong>Rule:</strong> <code>pegawai_all.kd_finger -> master_karyawans.finger_id</code></div>
                <div class="small mb-1"><strong>Range:</strong> ${escapeHtml(range)}</div>
                <div class="small mb-1"><strong>Sumber SPL:</strong> <code>${escapeHtml(sourceInfo)}</code></div>
                <div class="small mb-1"><strong>Sumber Pegawai:</strong> <code>${escapeHtml(employeeInfo)}</code></div>
                <div class="small mb-1"><strong>Join Utama:</strong> <code>${escapeHtml(resp?.meta?.join || '-')}</code></div>
                <div class="small mb-1"><strong>Join Fallback:</strong> <code>${escapeHtml(resp?.meta?.join_fallback || '-')}</code></div>
                <div class="small mb-0"><strong>Urutan Detail:</strong> Filter tanggal dulu, lalu tabel menampilkan grup <code>per nomor job</code>. Jika tidak ada assignment job, masuk grup <code>Unjob</code>.</div>
            `);

        const dateFilter = $('#splSyncDiagnosticDateFilter');
        const uniqueDates = [...new Set(detailRows.map((row) => String(row.work_date || '')).filter(Boolean))].sort();
        dateFilter.empty().append('<option value="">Semua tanggal</option>');
        uniqueDates.forEach((workDate) => {
            dateFilter.append(`<option value="${escapeHtml(workDate)}">${escapeHtml(workDate)}</option>`);
        });
        if (uniqueDates.length && !dateFilter.val()) {
            dateFilter.val(uniqueDates[uniqueDates.length - 1]);
        }

        renderThirdPartyDiagnosticRows(detailRows);
        loadThirdPartyCandidateData();
    }

    function loadThirdPartyCandidateData(){
        return $.ajax({
            url: syncThirdPartyCandidateDataUrl,
            type: 'GET',
            cache: false
        }).done((resp) => {
            renderThirdPartyCandidateData(resp);
        });
    }

    function candidateStatusBadge(status, label){
        const map = {
            baru_terdeteksi: 'danger',
            menunggu_master_karyawan: 'warning text-dark',
            sudah_dimapping: 'success',
            diabaikan: 'secondary'
        };
        const cls = map[status] || 'secondary';
        return `<span class="badge text-bg-${cls}">${escapeHtml(label || status || '-')}</span>`;
    }

    function renderThirdPartyCandidateData(resp){
        const tbody = $('#splSyncCandidateTable tbody');
        const summary = $('#splSyncCandidateSummary');
        const rows = Array.isArray(resp?.data) ? resp.data : [];
        const stats = resp?.summary || {};

        summary.html(`
            <span class="badge text-bg-danger">Baru: ${Number(stats.baru || 0)}</span>
            <span class="badge text-bg-warning text-dark">Menunggu Master: ${Number(stats.menunggu || 0)}</span>
            <span class="badge text-bg-success">Sudah Dimapping: ${Number(stats.mapped || 0)}</span>
            <span class="badge text-bg-secondary">Diabaikan: ${Number(stats.diabaikan || 0)}</span>
        `);

        tbody.empty();
        if (!rows.length) {
            tbody.append('<tr><td colspan="9" class="text-center text-muted py-4">Belum ada kandidat pegawai yang dicatat.</td></tr>');
            return;
        }

        rows.forEach((row, idx) => {
            const employeeParts = [];
            if (row.source_employee_code) employeeParts.push(`<div class="fw-semibold">${escapeHtml(row.source_employee_code)}</div>`);
            if (row.source_employee_name) employeeParts.push(`<div>${escapeHtml(row.source_employee_name)}</div>`);
            if (row.source_employee_idx) employeeParts.push(`<div class="small text-muted">IDX: ${escapeHtml(row.source_employee_idx)}</div>`);
            const periodText = [row.first_seen_work_date, row.last_seen_work_date].filter(Boolean).join(' s/d ') || '-';
            const notes = [row.sample_notes, row.review_notes].filter(Boolean).join(' | ');

            tbody.append(`
                <tr>
                    <td>${idx + 1}</td>
                    <td>${candidateStatusBadge(row.status, row.status_label)}</td>
                    <td>${escapeHtml(row.candidate_type_label || '-')}</td>
                    <td>${escapeHtml(row.source_finger_id || '-')}</td>
                    <td>${employeeParts.join('') || '<span class="text-muted">-</span>'}</td>
                    <td>${escapeHtml(periodText)}</td>
                    <td>${Number(row.seen_count || 0)}</td>
                    <td>
                        <div>${escapeHtml(notes || '-')}</div>
                        ${row.sample_source_reference ? `<div class="small text-muted mt-1">${escapeHtml(row.sample_source_reference)}</div>` : ''}
                    </td>
                    <td>
                        <div class="d-flex flex-wrap gap-1">
                            <button type="button" class="btn btn-sm btn-outline-warning btn-spl-candidate-status" data-id="${row.id}" data-status="menunggu_master_karyawan">Tinjau</button>
                            <button type="button" class="btn btn-sm btn-outline-success btn-spl-candidate-status" data-id="${row.id}" data-status="sudah_dimapping">Mapped</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary btn-spl-candidate-status" data-id="${row.id}" data-status="diabaikan">Abaikan</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-spl-candidate-master" data-id="${row.id}">Review Master</button>
                        </div>
                    </td>
                </tr>
            `);
        });
    }

    function captureThirdPartyCandidates(){
        const payload = collectThirdPartySyncPayload();
        payload.preview_limit = 500;
        return $.ajax({
            url: syncThirdPartyCandidateCaptureUrl,
            type: 'POST',
            data: payload
        });
    }

    function updateThirdPartyCandidateStatus(id, status){
        return $.ajax({
            url: syncThirdPartyCandidateStatusUrl.replace('__ID__', encodeURIComponent(id)),
            type: 'POST',
            data: {
                status
            }
        });
    }

    function reviewThirdPartyCandidateMaster(id){
        return $.ajax({
            url: syncThirdPartyCandidateMasterReviewUrl.replace('__ID__', encodeURIComponent(id)),
            type: 'GET',
            cache: false
        });
    }

    function commitThirdPartyCandidateMaster(id, payload){
        return $.ajax({
            url: syncThirdPartyCandidateMasterCommitUrl.replace('__ID__', encodeURIComponent(id)),
            type: 'POST',
            data: payload
        });
    }

    function renderCandidateMasterExisting(row){
        if (!row) return '<span class="text-muted">Tidak ada</span>';
        return `
            <div class="border rounded p-2 bg-light">
                <div class="fw-semibold">${escapeHtml(row.employee_code || '-')} - ${escapeHtml(row.full_name || '-')}</div>
                <div class="small text-muted">Finger: ${escapeHtml(row.finger_id || '-')} | Status: ${escapeHtml(row.employment_status || '-')} | ${row.is_active ? 'Aktif' : 'Nonaktif'}</div>
            </div>
        `;
    }

    function renderCandidateMasterReviewHtml(review){
        const candidate = review?.candidate || {};
        const suggested = review?.suggested || {};
        const existing = review?.existing || {};
        const warning = review?.warning
            ? `<div class="alert alert-warning py-2 mb-3">${escapeHtml(review.warning)}</div>`
            : '';

        return `
            <div class="text-start">
                ${warning}
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <div class="small text-muted">Source Pegawai</div>
                        <div class="fw-semibold">${escapeHtml(candidate.source_employee_name || '-')}</div>
                        <div class="small text-muted">IDX: ${escapeHtml(candidate.source_employee_idx || '-')} | Kode: ${escapeHtml(candidate.source_employee_code || '-')} | Finger: ${escapeHtml(candidate.source_finger_id || '-')}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="small text-muted">Kandidat</div>
                        <div>${escapeHtml(candidate.candidate_type_label || '-')} | Muncul ${Number(candidate.seen_count || 0)}x</div>
                        <div class="small text-muted">${escapeHtml(candidate.period || '-')}</div>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Employee Code</label>
                        <input type="text" class="form-control form-control-sm" id="splCandidateMasterEmployeeCode" value="${escapeHtml(suggested.employee_code || '')}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Finger ID</label>
                        <input type="text" class="form-control form-control-sm" id="splCandidateMasterFingerId" value="${escapeHtml(suggested.finger_id || '')}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Hire Date</label>
                        <input type="date" class="form-control form-control-sm" id="splCandidateMasterHireDate" value="${escapeHtml(suggested.hire_date || '')}">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label small mb-1">Nama Karyawan</label>
                        <input type="text" class="form-control form-control-sm" id="splCandidateMasterFullName" value="${escapeHtml(suggested.full_name || '')}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Status Kerja</label>
                        <select class="form-select form-select-sm" id="splCandidateMasterEmploymentStatus">
                            ${['kontrak','tetap','harian','magang'].map((item) => `<option value="${item}" ${String(suggested.employment_status || 'kontrak') === item ? 'selected' : ''}>${item}</option>`).join('')}
                        </select>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <div class="small fw-semibold mb-1">Cek Employee Code</div>
                        ${renderCandidateMasterExisting(existing.by_employee_code)}
                    </div>
                    <div class="col-md-6">
                        <div class="small fw-semibold mb-1">Cek Finger ID</div>
                        ${renderCandidateMasterExisting(existing.by_finger)}
                    </div>
                </div>
            </div>
        `;
    }

    function openThirdPartyCandidateMasterReview(id){
        Swal.fire({
            title: 'Memuat review master...',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading()
        });

        reviewThirdPartyCandidateMaster(id)
            .done((resp) => {
                const review = resp?.review || {};
                Swal.fire({
                    title: 'Review ke Master Karyawan',
                    icon: (review.can_commit === false) ? 'warning' : 'question',
                    width: 860,
                    html: renderCandidateMasterReviewHtml(review),
                    showCancelButton: true,
                    confirmButtonText: review.can_commit === false ? 'Tetap Coba Simpan' : 'Simpan ke Master',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const payload = {
                            employee_code: String($('#splCandidateMasterEmployeeCode').val() || '').trim(),
                            finger_id: String($('#splCandidateMasterFingerId').val() || '').trim(),
                            full_name: String($('#splCandidateMasterFullName').val() || '').trim(),
                            hire_date: String($('#splCandidateMasterHireDate').val() || '').trim(),
                            employment_status: String($('#splCandidateMasterEmploymentStatus').val() || 'kontrak').trim()
                        };
                        if (!payload.employee_code) {
                            Swal.showValidationMessage('Employee Code wajib diisi.');
                            return false;
                        }
                        if (!payload.full_name) {
                            Swal.showValidationMessage('Nama Karyawan wajib diisi.');
                            return false;
                        }
                        return new Promise((resolve, reject) => {
                            commitThirdPartyCandidateMaster(id, payload)
                                .done((commitResp) => resolve(commitResp))
                                .fail((xhr) => {
                                    Swal.showValidationMessage(xhr.responseJSON?.message || 'Simpan Master Karyawan gagal.');
                                    reject(new Error(xhr.responseJSON?.message || 'Simpan Master Karyawan gagal.'));
                                });
                            });
                    }
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    loadThirdPartyCandidateData();
                    if (typeof loadRefs === 'function') {
                        loadRefs();
                    }
                    Swal.fire('Berhasil', result.value?.message || 'Master Karyawan tersimpan.', 'success');
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Review Master Karyawan gagal.', 'error');
            });
    }

    function groupThirdPartyDiagnosticRows(rows){
        const groups = new Map();

        rows.forEach((row) => {
            const workDate = String(row.work_date || '');
            const jobNumber = String(row.job_number || '').trim() || 'Unjob';
            const jobDisplay = String(row.job_display || '').trim() || 'Unjob';
            const groupKey = `${workDate}|${jobNumber}`;
            if (!groups.has(groupKey)) {
                groups.set(groupKey, {
                    work_date: workDate,
                    job_number: jobNumber,
                    job_display: jobDisplay,
                    job_code: String(row.job_code || ''),
                    job_name: String(row.job_name || ''),
                    job_status_label: String(row.job_status_label || (jobDisplay === 'Unjob' ? 'Unjob' : '')),
                    rows: [],
                });
            }
            groups.get(groupKey).rows.push(row);
        });

        return Array.from(groups.values()).sort((a, b) => {
            const cmpDate = String(a.work_date || '').localeCompare(String(b.work_date || ''));
            if (cmpDate !== 0) return cmpDate;
            if (a.job_number === 'Unjob' && b.job_number !== 'Unjob') return 1;
            if (a.job_number !== 'Unjob' && b.job_number === 'Unjob') return -1;
            return String(a.job_number || '').localeCompare(String(b.job_number || ''));
        });
    }

    function renderDiagnosticPeopleList(rows){
        return rows.map((row) => {
            const titleParts = [];
            if (row.source_employee_name) titleParts.push(`<div class="fw-semibold">${escapeHtml(row.source_employee_name)}</div>`);
            titleParts.push(`<div class="small text-muted">${escapeHtml((row.start_time || '-') + ' - ' + (row.end_time || '-'))}</div>`);
            if (row.finger_raw) titleParts.push(`<div class="small text-muted">Finger: ${escapeHtml(row.finger_raw)}</div>`);
            return `<div class="border-bottom pb-1 mb-1">${titleParts.join('')}</div>`;
        }).join('') || '<span class="text-muted">-</span>';
    }

    function summarizeDistinct(values){
        const filtered = [...new Set(values.map((value) => String(value || '').trim()).filter(Boolean))];
        return filtered;
    }

    function renderThirdPartyDiagnosticRows(rows){
        const sourceTbody = $('#splSyncDiagnosticSourceTable tbody');
        const matchTbody = $('#splSyncDiagnosticMatchTable tbody');
        const info = $('#splSyncDiagnosticSearchInfo');
        sourceTbody.empty();
        matchTbody.empty();
        if (!rows.length) {
            sourceTbody.append('<tr><td colspan="6" class="text-center text-muted py-4">Tidak ada data diagnosa pada range ini.</td></tr>');
            matchTbody.append('<tr><td colspan="5" class="text-center text-muted py-4">Tidak ada data diagnosa pada range ini.</td></tr>');
            info.text('Tidak ada data diagnosa pada range ini.');
            return;
        }
        const selectedDate = String($('#splSyncDiagnosticDateFilter').val() || '').trim();
        const filteredRows = selectedDate ? rows.filter((row) => String(row.work_date || '') === selectedDate) : rows;
        const groupedRows = groupThirdPartyDiagnosticRows(filteredRows);
        info.text(`Menampilkan ${filteredRows.length} detail row dalam ${groupedRows.length} grup nomor job.`);

        groupedRows.forEach((group, idx) => {
            const sourceStatuses = summarizeDistinct(group.rows.map((row) => row.status_label || row.status || ''));
            const sourceNotes = summarizeDistinct(group.rows.map((row) => row.notes || ''));
            const ahspMatches = summarizeDistinct(group.rows.map((row) => {
                const code = String(row.ahsp_employee_code || '').trim();
                const name = String(row.ahsp_employee_name || '').trim();
                if (!code && !name) return 'Belum match';
                return [code, name].filter(Boolean).join(' - ');
            }));
            const profilParts = summarizeDistinct(group.rows.map((row) => {
                const pieces = [row.profil_bulan_code, row.profil_bulan_name].filter(Boolean);
                return pieces.length ? pieces.join(' - ') : '';
            }));
            const profilStatuses = summarizeDistinct(group.rows.map((row) => row.profil_status_label || row.profil_status || ''));
            const profilNotes = summarizeDistinct(group.rows.map((row) => row.profil_notes || ''));

            sourceTbody.append(`
                <tr>
                    <td>${idx + 1}</td>
                    <td>${escapeHtml(group.work_date || '-')}</td>
                    <td>
                        ${
                            group.job_number === 'Unjob'
                                ? `<div class="fw-semibold text-danger">Unjob / No Job</div>`
                                : `<div class="fw-semibold">${escapeHtml(group.job_number || 'Unjob')}</div>`
                        }
                        ${group.job_number !== 'Unjob' && group.job_name ? `<div class="small text-muted">${escapeHtml(group.job_name)}</div>` : ''}
                        <div class="small text-muted">${escapeHtml(group.job_status_label || (group.job_number === 'Unjob' ? 'Tanpa assignment job' : '-'))}</div>
                    </td>
                    <td>
                        <div class="small text-muted mb-1">Total orang: ${group.rows.length}</div>
                        ${renderDiagnosticPeopleList(group.rows)}
                    </td>
                    <td>${sourceStatuses.map((label) => previewStatusBadge(label.toLowerCase().replace(/\s+/g, '_'), label)).join(' ') || '<span class="text-muted">-</span>'}</td>
                    <td>${sourceNotes.map((note) => `<div class="small mb-1">${escapeHtml(note)}</div>`).join('') || '<span class="text-muted">-</span>'}</td>
                </tr>
            `);

            matchTbody.append(`
                <tr>
                    <td>${idx + 1}</td>
                    <td>${ahspMatches.map((item) => `<div class="small mb-1">${escapeHtml(item)}</div>`).join('') || '<span class="text-muted">Belum match</span>'}</td>
                    <td>${profilParts.map((item) => `<div class="small mb-1">${escapeHtml(item)}</div>`).join('') || '<span class="text-muted">Tidak ada profil</span>'}</td>
                    <td>${profilStatuses.map((label) => previewStatusBadge(label.toLowerCase().replace(/\s+/g, '_'), label)).join(' ') || '<span class="text-muted">-</span>'}</td>
                    <td>${profilNotes.map((note) => `<div class="small mb-1">${escapeHtml(note)}</div>`).join('') || '<span class="text-muted">-</span>'}</td>
                </tr>
            `);
        });
    }

    function renderThirdPartyApplySummary(status){
        const stats = status?.stats || {};
        const created = Number(stats.created || 0);
        const updated = Number(stats.updated || 0);
        const failed = Number(stats.failed || 0);
        const skippedMissingFinger = Number(stats.skipped_missing_finger || 0);
        const skippedMissingKaryawan = Number(stats.skipped_missing_karyawan || 0);
        const skippedInvalidDatetime = Number(stats.skipped_invalid_datetime || 0);
        const skippedExisting = Number(stats.skipped_existing || 0);
        const skippedLocked = Number(stats.skipped_locked || 0);
        const submitted = Number(stats.submitted || 0);
        const skippedAutoSubmit = Number(stats.skipped_auto_submit || 0);
        const failedAutoSubmit = Number(stats.failed_auto_submit || 0);
        const processed = Number(status?.processed || 0);
        const total = Number(status?.total || 0);
        const errors = Array.isArray(status?.errors) ? status.errors : [];

        const hasWrite = created > 0 || updated > 0;
        const headline = hasWrite
            ? 'Data 3rd party sudah berhasil diproses ke tabel request SPL.'
            : 'Tidak ada row yang masuk ke tabel request SPL pada proses ini.';
        const guidance = hasWrite
            ? 'Grid SPL utama sudah di-refresh. Row baru/terupdate seharusnya langsung muncul di tabel halaman ini.'
            : 'Biasanya ini karena semua row di-skip: finger belum match, jam/tanggal invalid, record sudah ada, atau record lama sudah locked.';

        const errorHtml = errors.length
            ? `<div class="mt-3">
                    <div class="fw-semibold small mb-1">Sample Error</div>
                    <div class="small border rounded bg-light p-2" style="max-height:160px;overflow:auto;white-space:pre-wrap;">${escapeHtml(errors.join('\n'))}</div>
               </div>`
            : '';

        return `
            <div class="text-start">
                <div class="alert ${hasWrite ? 'alert-success' : 'alert-warning'} py-2 px-3 mb-3">
                    <div class="fw-semibold">${headline}</div>
                    <div class="small mb-0">${guidance}</div>
                </div>
                <div class="row g-2 small">
                    <div class="col-md-3"><div class="border rounded p-2">Processed<br><strong>${processed} / ${total}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Created<br><strong>${created}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Updated<br><strong>${updated}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Failed<br><strong>${failed}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Skip Finger<br><strong>${skippedMissingFinger}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Skip Match Aplikasi<br><strong>${skippedMissingKaryawan}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Skip Jam/Tgl<br><strong>${skippedInvalidDatetime}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Skip Existing/Locked<br><strong>${skippedExisting + skippedLocked}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Submitted<br><strong>${submitted}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Skip Auto Submit<br><strong>${skippedAutoSubmit}</strong></div></div>
                    <div class="col-md-3"><div class="border rounded p-2">Failed Auto Submit<br><strong>${failedAutoSubmit}</strong></div></div>
                </div>
                ${errorHtml}
                <div class="mt-3">
                    <div class="fw-semibold small mb-1">Ringkasan Worker</div>
                    <pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:220px;overflow:auto;">${escapeHtml(status?.output || '-')}</pre>
                </div>
            </div>
        `;
    }

    function resetThirdPartySyncPreview(){
        $('#splSyncSuggestSummary').text('Klik refresh saran untuk membaca tanggal yang belum penuh dari source SPL 3rd party.');
        $('#splSyncSuggestRanges').html('<span class="badge text-bg-secondary">Belum ada saran</span>');
        $('#splSyncSuggestHint').text('Klik salah satu saran untuk mengisi Tanggal A dan Tanggal B otomatis.');
        $('#splSyncPreviewSummary').html('<span class="badge text-bg-secondary">Belum ada preview</span>');
        $('#splSyncPreviewMeta').addClass('d-none').empty();
        $('#splSyncPreviewTable tbody').html('<tr><td colspan="9" class="text-center text-muted py-4">Belum ada preview source SPL 3rd party.</td></tr>');
        $('#splSyncDiagnosticSummary').html('<span class="badge text-bg-secondary">Belum ada diagnosa</span>');
        $('#splSyncDiagnosticMeta').addClass('d-none').empty();
        $('#splSyncDiagnosticSearch').val('');
        $('#splSyncDiagnosticDateFilter').html('<option value=\"\">Semua tanggal</option>');
        $('#splSyncDiagnosticSearchInfo').text('Belum ada data diagnosa.');
        $('#splSyncCandidateSummary').html('<span class="badge text-bg-secondary">Belum ada kandidat</span>');
        splDiagnosticRows = [];
        splDiagnosticDetailRows = [];
        $('#splSyncDiagnosticSourceTable tbody').html('<tr><td colspan="6" class="text-center text-muted py-4">Belum ada diagnosa source SPL.</td></tr>');
        $('#splSyncDiagnosticMatchTable tbody').html('<tr><td colspan="5" class="text-center text-muted py-4">Belum ada diagnosa match finger.</td></tr>');
        $('#splSyncCandidateTable tbody').html('<tr><td colspan="9" class="text-center text-muted py-4">Belum ada kandidat pegawai yang dicatat.</td></tr>');
        $('#splDummyDataCaption').text('Memuat data staging...');
        $('#splDummyDataTable tbody').html('<tr><td colspan="9" class="text-center text-muted py-4">Belum ada data dummy staging.</td></tr>');
    }

    function syncThirdPartyStatus(jobId){
        return $.ajax({
            url: syncThirdPartyStatusUrl.replace('__JOB_ID__', encodeURIComponent(jobId)),
            type: 'GET',
            cache: false
        });
    }

    function pollThirdPartySpl(jobId, title, detail, onDone){
        if (window.AhspBackgroundSync?.trackAndOpen) {
            window.AhspBackgroundSync.trackAndOpen({
                job_id: jobId,
                title,
                detail,
                status: 'queued',
                status_url: syncThirdPartyStatusUrl,
                onDone
            }, { title, detail });
            return;
        }

        const startedAt = Date.now();
        let timer = null;
        let poller = null;

        Swal.fire({
            title,
            width: 760,
            html: `
                <div class="text-start">
                    <div class="mb-2">${detail}</div>
                    <div class="progress mb-2" style="height:10px;">
                        <div id="splSyncProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width:3%;"></div>
                    </div>
                    <div class="d-flex justify-content-between small mb-2">
                        <span id="splSyncMessage">Menyiapkan worker...</span>
                        <strong id="splSyncPercent">0%</strong>
                    </div>
                    <div class="row g-2 small">
                        <div class="col-4"><div class="border rounded p-2">Processed<br><strong id="splSyncProcessed">0 / 0</strong></div></div>
                        <div class="col-4"><div class="border rounded p-2">Create/Update<br><strong id="splSyncWrite">0 / 0</strong></div></div>
                        <div class="col-4"><div class="border rounded p-2">Gagal<br><strong id="splSyncFailed">0</strong></div></div>
                    </div>
                    <div class="small text-muted mt-2">Berjalan <span id="splSyncElapsed">0</span> detik. Proses jalan di server, halaman ini hanya membaca status realtime.</div>
                </div>
            `,
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
                timer = setInterval(() => {
                    $('#splSyncElapsed').text(Math.floor((Date.now() - startedAt) / 1000));
                }, 1000);
                poller = setInterval(() => {
                    syncThirdPartyStatus(jobId)
                        .done((status) => {
                            const percent = Math.max(0, Math.min(100, Number(status.percent || 0)));
                            const stats = status.stats || {};
                            $('#splSyncProgressBar').css('width', `${Math.max(percent, 3)}%`);
                            $('#splSyncPercent').text(`${percent.toFixed(percent % 1 ? 1 : 0)}%`);
                            $('#splSyncMessage').text(status.message || 'Memproses...');
                            $('#splSyncProcessed').text(`${Number(status.processed || 0)} / ${Number(status.total || 0)}`);
                            $('#splSyncWrite').text(`${Number(stats.created || 0)} / ${Number(stats.updated || 0)}`);
                            $('#splSyncFailed').text(Number(stats.failed || 0));

                            if (['done', 'failed'].includes(String(status.status || ''))) {
                                clearInterval(poller);
                                clearInterval(timer);
                                Swal.close();
                                onDone(status);
                            }
                        })
                        .fail(() => {
                            $('#splSyncMessage').text('Menunggu status worker...');
                        });
                }, 1000);
            },
            willClose: () => {
                if (timer) clearInterval(timer);
                if (poller) clearInterval(poller);
            }
        });
    }

    $('.btn-special-filter').on('click', function(){
        splSpecialFilterMode = String($(this).data('filter') || 'all');
        applySplSpecialFilterUi();
        loadData(false);
    });

    $('#btnAdd').on('click', function(){
        resetForm();
        if (!selfMode) setKaryawanMulti(true);
        modal.show();
    });
    $('#btnSyncSplThirdParty').on('click', function(){
        resetThirdPartySyncPreview();
        if (thirdPartySyncModal) thirdPartySyncModal.show();
        setSplSyncSuggestionHidden(isSplSyncSuggestionHidden());
        if (!isSplSyncSuggestionHidden()) {
            loadThirdPartySyncSuggestions();
        }
        loadThirdPartyCandidateData();
    });

    $('#btnApplySplFilter').on('click', function(){
        normalizeSplDateRange();
        initSplJobFilter();
        loadData(false);
    });

    $('#btnResetSplFilter').on('click', function(){
        $('#splFilterDateFrom').val('');
        $('#splFilterDateTo').val('');
        $('#splFilterEmployee').val('');
        $('#splFilterApproval').val('all');
        table.search('');
        $('#splTable_filter input').val('');
        if ($('#splFilterJob').data('select2')) {
            $('#splFilterJob').val('').trigger('change');
        } else {
            $('#splFilterJob').val('');
        }
        splSpecialFilterMode = 'all';
        applySplSpecialFilterUi();
        loadData(false);
    });

    $('#splFilterDateFrom, #splFilterDateTo, #splFilterEmployee').on('keydown', function(e){
        if (e.key === 'Enter') {
            e.preventDefault();
            normalizeSplDateRange();
            loadData(false);
        }
    });
    $('#splFilterDateFrom, #splFilterDateTo').on('change', function(){
        normalizeSplDateRange();
        const selectedValue = $('#splFilterJob').val();
        initSplJobFilter();
        if (selectedValue === '__UNJOB__') {
            const option = new Option('Unjob / No Job', '__UNJOB__', true, true);
            $('#splFilterJob').append(option).trigger('change');
        }
    });
    $(document).on('click', '.btn-spl-suggest-range', function(){
        $('#splSyncDateFrom').val($(this).data('from') || '');
        $('#splSyncDateTo').val($(this).data('to') || '');
        $('#splSyncSuggestHint').text(`Tanggal A/B diisi dari saran ${$(this).data('from')} s/d ${$(this).data('to')}. Kalau perlu, kita masih bisa edit manual sebelum apply.`);
    });
    $('#btnReloadSplSyncSuggestion').on('click', function(){
        loadThirdPartySyncSuggestions();
    });
    $('#btnHideSplSyncSuggestion').on('click', function(){
        setSplSyncSuggestionHidden(true);
    });
    $('#btnShowSplSyncSuggestion').on('click', function(){
        loadThirdPartySyncSuggestions();
    });
    $('#btnDiagnoseSplThirdParty').on('click', function(){
        resetThirdPartySyncPreview();
        if (thirdPartySyncModal) thirdPartySyncModal.show();
        loadThirdPartyCandidateData();
        const btn = $('#btnDiagnoseSplThirdPartyModal');
        const originalText = btn.text();
        btn.prop('disabled', true).text('Mendiagnosa...');
        diagnoseThirdPartyFinger()
            .done((resp) => {
                renderThirdPartyDiagnostic(resp);
                Swal.fire({
                    title: 'Diagnosa Finger Siap',
                    icon: 'success',
                    timer: 1400,
                    showConfirmButton: false,
                    text: 'Hasil cek match finger sudah dimuat di modal.'
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.output || xhr.responseJSON?.message || 'Diagnosa finger gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false).text(originalText);
            });
    });
    $('#btnViewSplThirdPartyDummy').on('click', function(){
        resetThirdPartySyncPreview();
        loadThirdPartyDummyData();
        loadThirdPartyCandidateData();
        if (thirdPartySyncModal) thirdPartySyncModal.show();
    });
    $('#btnDiagnoseSplThirdPartyModal').on('click', function(){
        const btn = $(this);
        const originalText = btn.text();
        btn.prop('disabled', true).text('Mendiagnosa...');
        diagnoseThirdPartyFinger()
            .done((resp) => {
                renderThirdPartyDiagnostic(resp);
                Swal.fire({
                    title: 'Diagnosa Finger Siap',
                    icon: 'success',
                    timer: 1400,
                    showConfirmButton: false,
                    text: 'Hasil cek match finger sudah diperbarui.'
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.output || xhr.responseJSON?.message || 'Diagnosa finger gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false).text(originalText);
            });
    });
    $('#splSyncDiagnosticSearch').on('input', function(){
        const keyword = String($(this).val() || '').trim().toLowerCase();
        if (!keyword) {
            renderThirdPartyDiagnosticRows(splDiagnosticDetailRows);
            return;
        }
        const filtered = splDiagnosticDetailRows.filter((row) => {
            return [
                row.work_date,
                row.start_time,
                row.end_time,
                row.job_display,
                row.job_code,
                row.job_name,
                row.finger_raw,
                row.source_employee_code,
                row.source_employee_name,
                row.ahsp_employee_code,
                row.ahsp_employee_name,
                row.profil_bulan_code,
                row.profil_bulan_name,
                row.profil_notes,
                row.notes
            ].some((value) => String(value || '').toLowerCase().includes(keyword));
        });
        renderThirdPartyDiagnosticRows(filtered);
    });
    $('#splSyncDiagnosticDateFilter').on('change', function(){
        const keyword = String($('#splSyncDiagnosticSearch').val() || '').trim().toLowerCase();
        if (!keyword) {
            renderThirdPartyDiagnosticRows(splDiagnosticDetailRows);
            return;
        }
        $('#splSyncDiagnosticSearch').trigger('input');
    });
    $('#btnPreviewSplThirdPartySync').on('click', function(){
        const btn = $(this);
        btn.prop('disabled', true);
        const originalText = btn.text();
        btn.text('Previewing...');
        syncThirdPartyPreview()
            .done((resp) => {
                renderThirdPartySyncPreview(resp);
                Swal.fire({
                    title: 'Preview SPL Siap',
                    icon: 'success',
                    timer: 1400,
                    showConfirmButton: false,
                    text: 'Preview source 3rd party sudah dimuat di modal.'
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.output || xhr.responseJSON?.message || 'Preview sync gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false).text(originalText);
            });
    });
    $('#btnCaptureSplCandidates').on('click', function(){
        const btn = $(this);
        const originalText = btn.text();
        btn.prop('disabled', true).text('Mencatat...');
        captureThirdPartyCandidates()
            .done((resp) => {
                loadThirdPartyCandidateData();
                Swal.fire({
                    title: 'Kandidat Tercatat',
                    icon: 'success',
                    text: `${Number(resp?.stats?.captured || 0)} kandidat dibaca. Insert ${Number(resp?.stats?.inserted || 0)}, update ${Number(resp?.stats?.updated || 0)}.`
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Pencatatan kandidat gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false).text(originalText);
            });
    });
    $(document).on('click', '.btn-spl-candidate-status', function(){
        const btn = $(this);
        const id = btn.data('id');
        const status = String(btn.data('status') || '');
        if (!id || !status) return;
        btn.prop('disabled', true);
        updateThirdPartyCandidateStatus(id, status)
            .done(() => {
                loadThirdPartyCandidateData();
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Update status kandidat gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false);
            });
    });
    $(document).on('click', '.btn-spl-candidate-master', function(){
        const id = $(this).data('id');
        if (!id) return;
        openThirdPartyCandidateMasterReview(id);
    });
    $('#btnImportSplThirdPartyDummy').on('click', function(){
        const btn = $(this);
        const originalText = btn.text();
        btn.prop('disabled', true).text('Importing...');
        importThirdPartyDummy()
            .done((resp) => {
                renderThirdPartySyncPreview(resp);
                loadThirdPartyDummyData();
                Swal.fire({
                    title: 'Import Dummy Selesai',
                    icon: Number(resp?.stats?.dummy_failed || 0) > 0 ? 'warning' : 'success',
                    width: 820,
                    html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(resp.output || '-')}</pre>`
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.output || xhr.responseJSON?.message || 'Import dummy gagal', 'error');
            })
            .always(() => {
                btn.prop('disabled', false).text(originalText);
            });
    });
    $('#btnApplySplThirdPartySync').on('click', function(){
        const btn = $(this);
        btn.prop('disabled', true);
        syncThirdPartyStart(true)
            .done((resp) => {
                if (thirdPartySyncModal) thirdPartySyncModal.hide();
                pollThirdPartySpl(resp.job_id, 'Apply Sync SPL 3rd Party', 'Sedang menyimpan/update data SPL ke Aplikasi.', (status) => {
                    btn.prop('disabled', false);
                    if (String(status.status || '') === 'failed') {
                        Swal.fire({
                            title: 'Apply Sync SPL Gagal',
                            icon: 'error',
                            width: 820,
                            html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(status.output || status.message || 'Sync gagal')}</pre>`
                        });
                        return;
                    }

                    loadData();
                    Swal.fire({
                        title: 'Sync SPL Selesai',
                        icon: Number(status?.stats?.failed || 0) > 0 ? 'warning' : 'success',
                        width: 820,
                        html: renderThirdPartyApplySummary(status)
                    });
                });
            })
            .fail((xhr) => {
                btn.prop('disabled', false);
                Swal.fire('Error', xhr.responseJSON?.output || xhr.responseJSON?.message || 'Apply sync gagal', 'error');
            });
    });
    $('#btnRefreshSeparatePayout').on('click', function(){
        refreshSeparatePayoutExportHref();
        loadSeparatePayoutData();
    });
    $('#btnUseCurrentSeparateRelease').on('click', function(){
        if (refs.currentProfilBulanId) {
            $('#separateReleaseProfilFilter').val(String(refs.currentProfilBulanId)).trigger('change');
        } else {
            Swal.fire('Info', 'Profil bulan aktif saat ini belum ditemukan.', 'info');
        }
    });
    $('#separateReleaseProfilFilter, #separatePayoutStatusFilter').on('change', function(){
        refreshSeparatePayoutExportHref();
        loadSeparatePayoutData();
    });
    $('.btn-karyawan-sort').on('click', function(){
        karyawanSearchMode = ($(this).data('sort-type') || 'all').toString();
        applyKaryawanSearchModeUi();
        renderKaryawanOptions($('#karyawanSearch').val());
    });
    $('#btnResetKaryawanSort').on('click', function(){
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
    });
    $('#karyawanSearch').on('input', function(){
        renderKaryawanOptions($(this).val());
    });
    $('#bonusPaymentMode, #workTargetPaymentMode, #continuesPaymentMode').on('change', syncOvertimeTypeUI);
    $('#btnApplyEmergencyNominalDefault').on('click', function(){
        applyEmergencyDefaultNominal(true);
    });
    $('#karyawanTableBody').on('click', '.karyawan-table-row', function(e){
        if ($(e.target).is('input, label')) return;
        if ($('#karyawanId').prop('disabled')) return;
        const id = String($(this).data('karyawan-id') || '').trim();
        if (!id) return;
        const selected = getSelectedKaryawanValues().filter(Boolean);
        if (isKaryawanMultiMode) {
            const next = selected.includes(id)
                ? selected.filter(v => v !== id)
                : [...selected, id];
            setSelectedKaryawanValues(next);
        } else {
            setSelectedKaryawanValues([id]);
        }
        renderKaryawanOptions($('#karyawanSearch').val());
        tryAutoPickJob();
    });
    $('#karyawanTableBody').on('change', '.karyawan-row-select', function(){
        if ($('#karyawanId').prop('disabled')) return;
        const id = String($(this).val() || '').trim();
        if (!id) return;
        const selected = getSelectedKaryawanValues().filter(Boolean);
        let next = selected;
        if (isKaryawanMultiMode) {
            next = $(this).is(':checked')
                ? Array.from(new Set([...selected, id]))
                : selected.filter(v => v !== id);
        } else {
            next = $(this).is(':checked') ? [id] : [];
        }
        setSelectedKaryawanValues(next);
        renderKaryawanOptions($('#karyawanSearch').val());
        tryAutoPickJob();
    });
    $('#checkAllKaryawanRows').on('change', function(){
        if (!isKaryawanMultiMode || $('#karyawanId').prop('disabled')) return;
        const next = $(this).is(':checked')
            ? $('#karyawanTableBody .karyawan-row-select').map(function(){ return String($(this).val() || '').trim(); }).get().filter(Boolean)
            : [];
        setSelectedKaryawanValues(next);
        renderKaryawanOptions($('#karyawanSearch').val());
        tryAutoPickJob();
    });
    $('#overtimeTypePreset').on('change', function(){
        applyOvertimePresetSelection();
    });
    $('#btnAddSplSegment').on('click', function(){
        addCurrentSplSegment();
    });
    $('#overtimeType').on('change', function(){
        renderOvertimeTypeQuickChoices();
        syncOvertimeTypeUI();
    });
    $(document).on('click', '.btn-overtime-type-quick', function(){
        const value = String($(this).data('value') || '').trim();
        if (!value) return;
        $('#overtimeType').val(value).trigger('change');
    });
    $(document).on('click', '.btn-remove-spl-segment', function(){
        const index = Number($(this).data('index'));
        if (Number.isNaN(index) || index < 0) return;
        splSegments = splSegments.filter((_, idx) => idx !== index);
        renderSplSegments();
    });
    $('#emergencyMultiplierProfile').on('change', syncEmergencyMultiplierProfileHint);
    $('#workDate').on('change', tryAutoPickJob);
    $('#karyawanId').on('change', tryAutoPickJob);

    $('#splForm').on('submit', function(e){
        e.preventDefault();
        const selectedJobValue = String($('#jobId').val() || '').trim();
        const selectedJobLabel = ($('#jobId option:selected').text() || '').trim();
        const payload = {
            karyawan_id: Array.isArray($('#karyawanId').val()) ? ($('#karyawanId').val()[0] || null) : $('#karyawanId').val(),
            karyawan_ids: Array.isArray($('#karyawanId').val()) ? $('#karyawanId').val() : null,
            job_id: (selectedJobValue && selectedJobValue !== '__UNJOB__') ? selectedJobValue : null,
            job_unjob: selectedJobValue === '__UNJOB__' ? 1 : 0,
            approval_flow_id: $('#flowId').val(),
            request_date: $('#requestDate').val(),
            work_date: $('#workDate').val(),
            start_time: $('#startTime').val(),
            end_time: $('#endTime').val(),
            overtime_type: $('#overtimeType').val(),
            reason: $('#reason').val(),
            extend_from_id: $('#extendFromId').val() || null,
        };
        if (!editId && isSplSegmentBuilderEnabled() && splSegments.length > 0) {
            const firstSegment = splSegments[0];
            payload.start_time = firstSegment.start_time || payload.start_time;
            payload.end_time = firstSegment.end_time || payload.end_time;
            payload.overtime_type = firstSegment.overtime_type || payload.overtime_type;
            payload.segments_json = JSON.stringify(splSegments);
        } else {
            buildSpecialRulePayloadForSubmit(payload);
        }
        if (editId) {
            // edit is single-employee only
            payload.karyawan_ids = null;
            $.ajax({url:`{{ url('/surat-perintah-lembur') }}/${editId}`, method:'PUT', data: payload})
                .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Updated', 'success'); })
                .fail(xhr=>{
                    const message = xhr.responseJSON?.message || 'Update failed';
                    const extra = selectedJobValue
                        ? `<div class="small text-muted mt-2">Job manual terpilih: ${escapeHtml(selectedJobLabel || selectedJobValue)} (ID ${escapeHtml(selectedJobValue)})</div>`
                        : '<div class="small text-muted mt-2">Job manual belum terpilih pada payload.</div>';
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: `<div>${escapeHtml(message)}</div>${extra}`
                    });
                });
        } else {
            $.post('{{ route('surat_perintah_lembur.store') }}', payload)
                .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
                .fail(xhr=>{
                    const message = xhr.responseJSON?.message || 'Save failed';
                    const extra = selectedJobValue
                        ? `<div class="small text-muted mt-2">Job manual terpilih: ${escapeHtml(selectedJobLabel || selectedJobValue)} (ID ${escapeHtml(selectedJobValue)})</div>`
                        : '<div class="small text-muted mt-2">Job manual belum terpilih pada payload.</div>';
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: `<div>${escapeHtml(message)}</div>${extra}`
                    });
                });
        }
    });

    $('#splTable').on('click', '.btn-extend', function(){
        const id = Number($(this).data('id'));
        const row = byId(id);
        if (!row) return;
        fetchSplDetail(id).done(openExtend).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
    });

    $('#splTable').on('click', '.btn-submit', function(){
        const id = Number($(this).data('id'));
        $.post(`{{ url('/surat-perintah-lembur') }}/${id}/submit`)
            .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Submitted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Submit failed', 'error'));
    });

    $('#splTable').on('click', '.btn-approve', function(){
        const id = Number($(this).data('id'));
        fetchSplDetail(id).done((row) => {
            Swal.fire({
                title:'Approve step ini?',
                html: buildApprovalDetailHtml(row || {}),
                input:'text',
                inputPlaceholder:'Catatan approve (opsional)',
                showCancelButton:true
            }).then(res=>{
                if(!res.isConfirmed) return;
                $.post(`{{ url('/surat-perintah-lembur') }}/${id}/approve`, {notes: res.value || ''})
                    .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Approved', 'success'); })
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Approve failed', 'error'));
            });
        }).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
    });

    $('#splTable').on('click', '.btn-unapprove', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Batalkan approve?', text:'Dokumen akan kembali ke draft.', icon:'warning', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/surat-perintah-lembur') }}/${id}/unapprove`, {notes: ''})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Approve dibatalkan', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Batal approve failed', 'error'));
        });
    });

    $('#splTable').on('click', '.btn-reject', function(){
        const id = Number($(this).data('id'));
        fetchSplDetail(id).done((row) => {
            Swal.fire({
                title:'Reject step ini?',
                html: buildApprovalDetailHtml(row || {}),
                input:'text',
                inputLabel:'Alasan reject',
                inputValidator:(v)=>!v?'Alasan wajib diisi':null,
                showCancelButton:true
            }).then(res=>{
                if(!res.isConfirmed) return;
                $.post(`{{ url('/surat-perintah-lembur') }}/${id}/reject`, {notes: res.value})
                    .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Rejected', 'success'); })
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Reject failed', 'error'));
            });
        }).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
    });

    $('#splTable').on('click', '.btn-edit', function(){
        const id = Number($(this).data('id'));
        if (!id) return;
        fetchSplDetail(id).done(openEdit).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat detail SPL.', 'error'));
    });
    $('#splTable').on('click', '.btn-delete', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Hapus SPL ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            $.ajax({url:`{{ url('/surat-perintah-lembur') }}/${id}`, method:'DELETE'})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
        });
    });
    $('#splSeparatePayoutTable').on('click', '.btn-mark-paid-separate', function(){
        const id = Number($(this).data('id'));
        Swal.fire({
            title: 'Tandai sudah dibayar?',
            input: 'text',
            inputPlaceholder: 'Catatan pembayaran (opsional)',
            showCancelButton: true,
            confirmButtonText: 'Mark Paid'
        }).then(res => {
            if (!res.isConfirmed) return;
            $.post(`{{ url('/surat-perintah-lembur') }}/${id}/mark-paid-separate`, {notes: res.value || ''})
                .done(resp => {
                    loadData();
                    loadSeparatePayoutData();
                    Swal.fire('Success', resp.message || 'Updated', 'success');
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        });
    });
    $('#splSeparatePayoutTable').on('click', '.btn-undo-paid-separate', function(){
        const id = Number($(this).data('id'));
        Swal.fire({
            title: 'Kembalikan ke pending?',
            text: 'Gunakan ini jika pembayaran separate perlu dikoreksi.',
            input: 'text',
            inputPlaceholder: 'Catatan undo (opsional)',
            showCancelButton: true,
            confirmButtonText: 'Undo Paid'
        }).then(res => {
            if (!res.isConfirmed) return;
            $.post(`{{ url('/surat-perintah-lembur') }}/${id}/undo-paid-separate`, {notes: res.value || ''})
                .done(resp => {
                    loadData();
                    loadSeparatePayoutData();
                    Swal.fire('Success', resp.message || 'Updated', 'success');
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        });
    });
    $('#checkAllRows').on('change', function(){
        const shouldCheck = $(this).is(':checked');
        $('.row-check').each(function(){
            const id = Number($(this).val());
            if (!(id > 0)) return;
            setSplRowSelection(id, shouldCheck);
            $(this).prop('checked', shouldCheck);
        });
        const lastVisible = $('.row-check').last().val();
        splLastSelectedRowId = lastVisible ? Number(lastVisible) : splLastSelectedRowId;
        refreshHeaderCheck();
    });
    $('#splTable').on('click', '.row-check', function(e){
        const id = Number($(this).val());
        const isChecked = $(this).is(':checked');

        if (e.shiftKey && splLastSelectedRowId && id > 0) {
            if (applySplVisibleRangeSelection(id, isChecked)) {
                return;
            }
        }

        setSplRowSelection(id, isChecked);
        splLastSelectedRowId = id > 0 ? id : splLastSelectedRowId;
        refreshHeaderCheck();
    });
    $('#splTable').on('click', 'tbody tr', function(e){
        if (!e.shiftKey && !e.ctrlKey && !e.metaKey) return;
        if ($(e.target).closest('a, button, input, select, textarea, label, .btn').length) return;
        const checkbox = $(this).find('.row-check').first();
        if (!checkbox.length) return;
        const id = Number(checkbox.val());
        if (!(id > 0)) return;

        const selected = e.shiftKey ? true : !checkbox.is(':checked');
        if (e.shiftKey && applySplVisibleRangeSelection(id, selected)) {
            return;
        }

        checkbox.prop('checked', selected);
        setSplRowSelection(id, selected);
        splLastSelectedRowId = id;
        refreshHeaderCheck();
    });
    $('#btnViewTable').on('click', function(){ setView('table'); });
    $('#btnViewCalendar').on('click', function(){ setView('calendar'); });
    $(document).on('hidden.bs.modal', '#splModal, #splImportModal', function(){
        $('body').removeClass('modal-open').css({overflow:'', paddingRight:''});
        $('.modal-backdrop').remove();
    });

    $('#btnBulkDelete').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');
        Swal.fire({title:'Hapus SPL terpilih?', text:`Total: ${ids.length} data`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            runBulkActionInChunks({
                ids,
                url: '{{ route('surat_perintah_lembur.bulk_delete') }}',
                title: 'Bulk Hapus Berjalan',
                actionLabel: 'bulk hapus',
                successTitle: 'Bulk hapus selesai',
                chunkSize: 50,
                concurrency: 4,
                removeSelection: true
            }).catch(() => null);
        });
    });

    $('#btnBulkSubmit').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');
        runBulkActionInChunks({
            ids,
            url: '{{ route('surat_perintah_lembur.bulk_submit') }}',
            title: 'Bulk Submit Berjalan',
            actionLabel: 'bulk submit',
            successTitle: 'Bulk submit selesai',
            chunkSize: 50,
            concurrency: 4
        }).catch(() => null);
    });

    $('#btnBulkApprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');
        Swal.fire({title:'Catatan Approve (opsional)', input:'text', showCancelButton:true, confirmButtonText:'Approve Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            runBulkApproveInChunks(ids, res.value || '').catch(() => null);
        });
    });

    $('#btnBulkUnapprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');
        Swal.fire({title:'Bulk batal approve?', text:'Dokumen approved terpilih akan kembali ke draft.', icon:'warning', showCancelButton:true, confirmButtonText:'Batal Approve Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            runBulkActionInChunks({
                ids,
                url: '{{ route('surat_perintah_lembur.bulk_unapprove') }}',
                title: 'Bulk Batal Approve Berjalan',
                actionLabel: 'bulk batal approve',
                successTitle: 'Bulk batal approve selesai',
                chunkSize: 50,
                concurrency: 4
            }).catch(() => null);
        });
    });

    $('#btnBulkReject').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');
        Swal.fire({title:'Alasan Reject', input:'text', inputValidator:(v)=>!v?'Alasan wajib diisi':null, showCancelButton:true, confirmButtonText:'Reject Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            runBulkActionInChunks({
                ids,
                url: '{{ route('surat_perintah_lembur.bulk_reject') }}',
                payload: { notes: res.value },
                title: 'Bulk Reject Berjalan',
                actionLabel: 'bulk reject',
                successTitle: 'Bulk reject selesai',
                chunkSize: 50,
                concurrency: 4
            }).catch(() => null);
        });
    });

    $('#btnBulkUpdate').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data SPL terlebih dahulu.', 'warning');

        const flowOptions = (refs.flows || []).map(x => `<option value="${x.id}">${x.code} - ${x.name}</option>`).join('');
        Swal.fire({
            title: 'Bulk Edit SPL',
            html: `
                <div class="text-start">
                    <label class="form-label">Flow Approval (opsional)</label>
                    <select id="bulkFlow" class="form-select mb-2"><option value="">- tidak diubah -</option>${flowOptions}</select>
                    <label class="form-label">Tanggal Pengajuan (opsional)</label>
                    <input id="bulkRequestDate" type="date" class="form-control mb-2">
                    <label class="form-label">Tanggal Lembur (opsional)</label>
                    <input id="bulkWorkDate" type="date" class="form-control mb-2">
                    <div class="row g-2">
                        <div class="col"><label class="form-label">Jam Mulai</label><input id="bulkStartTime" type="time" class="form-control"></div>
                        <div class="col"><label class="form-label">Jam Selesai</label><input id="bulkEndTime" type="time" class="form-control"></div>
                    </div>
                    <label class="form-label mt-2">Jenis SPL (opsional)</label>
                    <select id="bulkOvertimeType" class="form-select mb-2">${renderOvertimeTypeOptions(refs.splTypes || [], true)}</select>
                    <label class="form-label mt-2">Alasan (opsional)</label>
                    <textarea id="bulkReason" class="form-control" rows="2"></textarea>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Simpan Bulk Edit',
            preConfirm: () => {
                const payload = { ids };
                const vFlow = $('#bulkFlow').val();
                const vReq = $('#bulkRequestDate').val();
                const vWork = $('#bulkWorkDate').val();
                const vStart = $('#bulkStartTime').val();
                const vEnd = $('#bulkEndTime').val();
                const vOvertimeType = $('#bulkOvertimeType').val();
                const vReason = $('#bulkReason').val();
                if (vFlow) payload.approval_flow_id = vFlow;
                if (vReq) payload.request_date = vReq;
                if (vWork) payload.work_date = vWork;
                if (vStart) payload.start_time = vStart;
                if (vEnd) payload.end_time = vEnd;
                if (vOvertimeType) payload.overtime_type = vOvertimeType;
                if ((vReason || '').trim() !== '') payload.reason = vReason.trim();
                return payload;
            }
        }).then(res => {
            if (!res.isConfirmed) return;
            const payload = res.value || { ids };
            if (Object.keys(payload).length <= 1) {
                return Swal.fire('Warning', 'Isi minimal 1 field yang mau diubah.', 'warning');
            }
            const updatePayload = {...payload};
            delete updatePayload.ids;
            runBulkActionInChunks({
                ids,
                url: '{{ route('surat_perintah_lembur.bulk_update') }}',
                payload: updatePayload,
                title: 'Bulk Update Berjalan',
                actionLabel: 'bulk update',
                successTitle: 'Bulk update selesai',
                chunkSize: 50,
                concurrency: 4
            }).catch(() => null);
        });
    });

    applySplSpecialFilterUi();
    setView(selfMode ? 'calendar' : 'table');
    initSplJobFilter();
    loadData();
    $.when(loadRefs()).always(function(){
        loadSeparatePayoutData();
    });
});
</script>
@endpush