@extends('layouts.adminlte')

@section('title', 'PENGAJUAN LEAVE')
@section('page_title', 'PENGAJUAN LEAVE')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/fullcalendar/index.global.min.css') }}" />
<style>
    #leaveTableLoading {
        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);
    }

    #leaveTableLoading .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;
    }

    #leaveTableLoading .loading-text {
        font-weight: 600;
        color: #495057;
    }

    #leaveModal .modal-dialog {
        max-width: min(960px, calc(100vw - 1.5rem));
    }

    #leaveModal .modal-content {
        max-height: calc(100vh - 2rem);
    }

    #leaveModal .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 11rem);
        padding-bottom: 1rem;
    }

    #leaveModal #karyawanTableWrap .table-responsive {
        max-height: 280px;
        overflow: auto;
    }
</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">Pengajuan Leave + 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))
            <button class="btn btn-outline-primary btn-sm" id="btnBulkAdd">Bulk Leave</button>
            <div class="btn-group btn-group-sm" role="group" aria-label="Import Leave">
                <a class="btn btn-outline-success" href="{{ route('leave_request.import.template') }}" target="_blank" rel="noopener">Template Import</a>
                <button class="btn btn-outline-success" id="btnImportLeave" type="button">Import XLSX</button>
            </div>
            <button class="btn btn-outline-info btn-sm" id="btnSyncLeaveThirdParty" type="button">Sync Leave 3rd Party</button>
            @endif
            <button class="btn btn-primary btn-sm" id="btnAdd">Tambah Leave</button>
        </div>
    </div>
    <div class="card-body">
        @if(!($selfMode ?? false))
        <div class="border rounded p-3 mb-3 bg-light-subtle">
            <div class="row g-3 align-items-end">
                <div class="col-lg-3">
                    <label class="form-label fw-semibold">Hak Annual Cuti Aktif Jika</label>
                    <select class="form-select" id="annualEligibilityMode"></select>
                    <div class="form-text">Atur apakah annual cuti aktif dari masa kerja 1 tahun, status tetap, atau gabungan keduanya.</div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label fw-semibold">Reset Kuota Annual</label>
                    <select class="form-select" id="annualResetMode"></select>
                    <div class="form-text">Pilih reset per tahun kalender atau per anniversary <code>hire_date</code> masing-masing karyawan.</div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label fw-semibold">Akumulasi Sisa Annual</label>
                    <select class="form-select" id="annualCarryMode"></select>
                    <div class="form-text">Pilih apakah sisa kuota annual hangus atau dibawa menjadi tambahan kuota window berikutnya.</div>
                </div>
                <div class="col-lg-3">
                    <button type="button" class="btn btn-outline-primary w-100" id="btnSaveAnnualLeaveSettings">Simpan Setting Annual Cuti</button>
                </div>
            </div>
        </div>
        @endif
        <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-dark" id="btnBulkCancelSubmit">Bulk Batal 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="border rounded p-3 mb-3 bg-light-subtle">
            <div class="row g-2 align-items-end">
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Tanggal Dari</label>
                    <input type="date" class="form-control form-control-sm" id="filterDateFrom">
                </div>
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Tanggal Sampai</label>
                    <input type="date" class="form-control form-control-sm" id="filterDateTo">
                </div>
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Jenis Leave</label>
                    <select class="form-select form-select-sm" id="filterLeaveType">
                        <option value="">Semua jenis</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Status</label>
                    <select class="form-select form-select-sm" id="filterStatus">
                        <option value="">Semua status</option>
                        <option value="draft">Draft</option>
                        <option value="submitted">Submitted</option>
                        <option value="in_review">In Review</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Flow Approval</label>
                    <select class="form-select form-select-sm" id="filterFlow">
                        <option value="">Semua flow</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-3">
                    <label class="form-label">Sumber</label>
                    <select class="form-select form-select-sm" id="filterSource">
                        <option value="">Semua sumber</option>
                        <option value="manual">Manual / Internal</option>
                        <option value="third_party">3rd Party</option>
                    </select>
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Cari Karyawan</label>
                    <input type="text" class="form-control form-control-sm" id="filterEmployee" placeholder="kode / nama karyawan">
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Cari Request / Alasan</label>
                    <input type="text" class="form-control form-control-sm" id="filterKeyword" placeholder="no request / alasan / lampiran">
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="form-label">Status Sinkron</label>
                    <select class="form-select form-select-sm" id="filterSyncStatus">
                        <option value="">Semua sync</option>
                        <option value="ok">Sync OK</option>
                        <option value="warning">Perlu Cek</option>
                        <option value="invalid">Invalid / Gagal Baca</option>
                    </select>
                    <div class="form-text">`Invalid` dipakai untuk data import/sinkron yang formatnya salah, mapping finger tidak ketemu, atau field wajib belum lengkap.</div>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="form-label">Butuh Action</label>
                    <select class="form-select form-select-sm" id="filterNeedsAction">
                        <option value="">Semua</option>
                        <option value="1">Butuh action</option>
                        <option value="0">Sudah aman</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="form-label">Mode Bayar</label>
                    <select class="form-select form-select-sm" id="filterPayable">
                        <option value="">Semua</option>
                        <option value="1">Payable</option>
                        <option value="0">Non Payable</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 d-grid">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetLeaveFilters">Reset Filter</button>
                </div>
                <div class="col-lg-4 col-md-8">
                    <div class="small text-muted pt-lg-4" id="leaveFilterSummary">Menampilkan semua data leave, urut periode terbaru.</div>
                </div>
            </div>
        </div>
        <div class="position-relative">
            <div id="leaveTableLoading">
                <div class="loading-panel">
                    <div class="spinner-border text-primary mb-2" role="status" aria-hidden="true"></div>
                    <div class="loading-text">Memuat data leave...</div>
                    <div class="small text-muted mt-1" id="leaveTableLoadingSubtext">Mohon tunggu sebentar.</div>
                </div>
            </div>
            <table id="leaveTable" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th style="width:32px"><input type="checkbox" id="checkAllRows"></th>
                        <th>No.</th>
                        <th>No Request</th>
                        <th>Karyawan</th>
                        <th>Jenis</th>
                        <th>Tanggal Leave</th>
                        <th>Alasan</th>
                        <th>Total</th>
                        <th>Lampiran</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="leaveCalendar"></div>
        </div>
    </div>
</div>

@if(!($selfMode ?? false))
<div class="modal fade" id="syncLeaveThirdPartyModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Sync Leave 3rd Party</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info py-2">
            Data leave diambil dari <code>erp2025.hrd_ijin_absensi</code>, join fixed ke <code>src.idx = pegawai_all.idx</code>, filter tanggal memakai <code>src.tanggal</code>, lalu dicocokkan ke AHSP lewat <code>pegawai_all.kd_finger -&gt; master_karyawans.finger_id</code>.
        </div>
        <div class="row g-2">
            <div class="col-md-6">
                <label class="form-label">Tanggal Dari</label>
                <input type="date" class="form-control" id="syncLeaveDateFrom" value="2025-12-26">
            </div>
            <div class="col-md-6">
                <label class="form-label">Tanggal Sampai</label>
                <input type="date" class="form-control" id="syncLeaveDateTo" value="{{ now()->toDateString() }}">
            </div>
        </div>
        <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" id="syncLeaveUpdateExisting" checked>
            <label class="form-check-label" for="syncLeaveUpdateExisting">Update data leave yang sudah pernah tersinkron</label>
        </div>
        <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" id="syncLeaveAutoSubmit">
            <label class="form-check-label" for="syncLeaveAutoSubmit">Langsung submit ke approval setelah draft dibuat / diupdate</label>
            <div class="small text-muted">Kalau OFF, sync hanya membuat draft. Kalau ON, item draft akan langsung masuk flow approval.</div>
        </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="button" id="btnStartSyncLeaveThirdParty">Mulai Sync</button>
      </div>
    </div>
  </div>
</div>
@endif

<div class="modal fade" id="leaveModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title" id="leaveModalTitle">Tambah Pengajuan Leave</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="leaveForm">
        <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 list karyawan akan disusun seperti tabel agar lebih mudah dipilih.</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>
                        <input type="text" id="karyawanSearch" class="form-control" placeholder="Cari kode / nama / group karyawan...">
                        <div class="form-text" id="karyawanSearchHint">Sedang mencari berdasarkan kode, nama, group, atau group cetak.</div>
                    </div>
                </div>
                <select id="karyawanId" class="d-none" required></select>
                <div class="border rounded-3 overflow-hidden" id="karyawanTableWrap">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <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="4" class="text-muted text-center py-3">Memuat data karyawan...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="small text-muted mt-1" id="karyawanSelectionCount">Belum ada karyawan dipilih.</div>
            </div>
            <div class="mb-2"><label class="form-label">Flow Approval</label><select id="flowId" class="form-select" required></select></div>
            <div class="mb-2"><label class="form-label">Jenis Leave</label>
                <select id="leaveType" class="form-select">
                    <option value="annual">Annual</option>
                    <option value="sick">Sick</option>
                    <option value="special">Special</option>
                    <option value="unpaid">Unpaid</option>
                </select>
                <small class="text-muted" id="leaveTypeHelp">Jenis leave mengikuti rule aktif di server.</small>
                <div class="alert alert-light border mt-2 mb-0 py-2 small" id="leaveQuotaInfo">Pilih karyawan dan jenis leave untuk melihat kuota.</div>
            </div>
            <div class="row g-2"><div class="col"><label class="form-label">Start Date</label><input type="date" id="startDate" class="form-control" required /></div><div class="col"><label class="form-label">End Date</label><input type="date" id="endDate" class="form-control" required /></div></div>
            <div class="mt-2"><label class="form-label">Alasan</label><textarea id="reason" class="form-control" rows="2"></textarea></div>
            <div class="mt-2 d-none" id="sickAttachmentGroup">
                <label class="form-label">Upload Bukti / Lampiran (Gambar)</label>
                <input type="file" id="attachmentFile" class="form-control" accept=".jpg,.jpeg,.png,.webp,image/*" />
                <small class="text-muted" id="attachmentRuleHelp">Wajib untuk jenis leave yang membutuhkan lampiran.</small>
            </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>

<div class="modal fade" id="bulkModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Bulk Pengajuan Leave</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2 d-flex justify-content-between align-items-center">
            <small class="text-muted">Tambah beberapa baris leave sekaligus, lalu simpan bulk.</small>
            <button class="btn btn-sm btn-outline-primary" type="button" id="btnBulkAddRow">+ Row</button>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-sm align-middle" id="bulkTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Karyawan</th>
                        <th>Flow</th>
                        <th>Type</th>
                        <th>Start</th>
                        <th>End</th>
                        <th>Reason</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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="button" id="btnSaveBulk">Save Bulk</button>
      </div>
    </div>
  </div>
</div>

@if(!($selfMode ?? false))
<div class="modal fade" id="importLeaveModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Import Leave (XLSX)</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><b>Alur:</b> Download Template → isi → Preview (validasi per baris) → Simpan Import.</div>
          <div class="small text-muted">Hasil import dibuat sebagai <b>Draft</b>. Setelah itu Anda bisa Bulk Submit/Approve.</div>
        </div>

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">File XLSX</label>
            <input type="file" class="form-control" id="leaveImportFile" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            <div class="form-text">Format wajib mengikuti template.</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Default Flow Approval (opsional)</label>
            <select class="form-select" id="leaveImportDefaultFlow">
              <option value="">- pilih flow default -</option>
            </select>
            <div class="form-text">Dipakai jika kolom <code>approval_flow_code</code> kosong di file.</div>
          </div>
        </div>

        <div class="d-flex flex-wrap gap-2 mt-3">
          <button class="btn btn-outline-primary btn-sm" type="button" id="btnLeaveImportPreview">Preview Import</button>
          <button class="btn btn-success btn-sm" type="button" id="btnLeaveImportConfirm" disabled>Simpan Import</button>
          <a class="btn btn-outline-danger btn-sm d-none" id="btnLeaveImportErrorReport" href="#" target="_blank" rel="noopener">Download Error Report</a>
        </div>

        <div class="mt-3" id="leaveImportSummary" style="display:none;">
          <div class="row g-2">
            <div class="col-md-3"><div class="border rounded p-2"><div class="text-muted small">Total</div><div class="fw-bold" id="sumTotal">0</div></div></div>
            <div class="col-md-3"><div class="border rounded p-2"><div class="text-muted small">Valid (new)</div><div class="fw-bold text-success" id="sumValid">0</div></div></div>
            <div class="col-md-3"><div class="border rounded p-2"><div class="text-muted small">Duplikat</div><div class="fw-bold text-secondary" id="sumDup">0</div></div></div>
            <div class="col-md-3"><div class="border rounded p-2"><div class="text-muted small">Invalid</div><div class="fw-bold text-danger" id="sumInvalid">0</div></div></div>
          </div>
        </div>

        <div class="table-responsive mt-3" id="leaveImportPreviewWrapper" style="display:none;">
          <table class="table table-sm table-bordered align-middle">
            <thead class="table-light">
              <tr>
                <th style="width:64px">Row</th>
                <th style="width:140px">Employee</th>
                <th style="width:90px">Type</th>
                <th style="width:120px">Start</th>
                <th style="width:120px">End</th>
                <th style="width:160px">Flow</th>
                <th style="width:110px">Status</th>
                <th>Message</th>
              </tr>
            </thead>
            <tbody id="leaveImportPreviewBody"></tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endif
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/index.global.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
<script>
$(function(){
    const selfMode = @json($selfMode ?? false);
    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('leaveModal'));
    const bulkModal = new bootstrap.Modal(document.getElementById('bulkModal'));
    const syncLeaveThirdPartyModalEl = document.getElementById('syncLeaveThirdPartyModal');
    const syncLeaveThirdPartyModal = syncLeaveThirdPartyModalEl ? new bootstrap.Modal(syncLeaveThirdPartyModalEl) : null;
    const syncLeaveThirdPartyStartUrl = '{{ route('leave_request.sync_third_party.start') }}';
    const syncLeaveThirdPartyStatusUrl = '{{ route('leave_request.sync_third_party.status', ['jobId' => '__JOB_ID__']) }}';
    let rows = []; let allRows = []; let refs = {karyawans:[], flows:[], leaveTypes:[], annualSettings:null}; let editId = null; let calendar = null;
    let refsLoaded = false; let refsPromise = null;
    let leaveTableLoadingTimer = null;
    let leaveTableLoadingStartedAt = 0;
    let karyawanSearchMode = 'all';

    function escapeHtml(str){
        return String(str ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    function formatIdDate(dateStr){
        const raw = String(dateStr || '').slice(0, 10);
        if (!raw) return '-';
        const dt = new Date(raw + 'T00:00:00');
        if (Number.isNaN(dt.getTime())) return raw;
        return dt.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
    }

    function renderLeaveDateRange(startDate, endDate){
        const startRaw = String(startDate || '').slice(0, 10);
        const endRaw = String(endDate || startDate || '').slice(0, 10);
        const startLabel = formatIdDate(startRaw);
        const endLabel = formatIdDate(endRaw);
        if (!startRaw && !endRaw) return '<span class="text-muted">-</span>';
        if (startRaw && endRaw && startRaw === endRaw) {
            return `<div class="fw-semibold">${escapeHtml(startLabel)}</div>`;
        }
        return `<div class="fw-semibold">${escapeHtml(startLabel)}</div><div class="small text-muted">s/d ${escapeHtml(endLabel)}</div>`;
    }

    function defaultLeaveTypes(){
        return [
            {code:'annual', name:'Cuti Tahunan', category:'annual', is_payable:true, requires_one_year:true, requires_attachment:false, max_days_per_request:null, max_days_per_year:12},
            {code:'sick', name:'Sakit', category:'sick', is_payable:true, requires_one_year:false, requires_attachment:true, max_days_per_request:null, max_days_per_year:null},
            {code:'marriage', name:'Cuti Menikah', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:3, max_days_per_year:null},
            {code:'bereavement_family', name:'Cuti Keluarga Inti Meninggal', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:2, max_days_per_year:null},
            {code:'bereavement_household', name:'Cuti Anggota Serumah Meninggal', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:1, max_days_per_year:null},
            {code:'child_marriage', name:'Cuti Menikahkan Anak', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:2, max_days_per_year:null},
            {code:'child_birth', name:'Cuti Istri Melahirkan / Keguguran', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:2, max_days_per_year:null},
            {code:'child_circumcision_baptism', name:'Cuti Khitan / Baptis Anak', category:'special', is_payable:true, requires_one_year:false, requires_attachment:false, max_days_per_request:2, max_days_per_year:null},
            {code:'unpaid', name:'Izin / Cuti Tidak Dibayar', category:'unpaid', is_payable:false, requires_one_year:false, requires_attachment:false, max_days_per_request:null, max_days_per_year:null},
        ];
    }
    function defaultAnnualSettings(){
        return {
            eligibility_mode: 'hire_one_year',
            reset_mode: 'calendar_year',
            carry_mode: 'reset_zero',
            eligibility_options: [
                { value: 'hire_one_year', label: 'Masa kerja 1 tahun' },
                { value: 'permanent_only', label: 'Status tetap' },
                { value: 'permanent_and_one_year', label: 'Status tetap + masa kerja 1 tahun' },
            ],
            reset_options: [
                { value: 'calendar_year', label: 'Tahun kalender (31 Des / 1 Jan)' },
                { value: 'hire_anniversary', label: 'Anniversary hire date' },
            ],
            carry_options: [
                { value: 'reset_zero', label: 'Reset 0 / Hangus' },
                { value: 'carry_forward', label: 'Sisa jadi quota tambah' },
            ],
        };
    }
    function annualSettings(){
        return refs.annualSettings || defaultAnnualSettings();
    }
    function annualEligibleForKaryawan(karyawan, targetDate = null){
        const settings = annualSettings();
        const mode = String(settings.eligibility_mode || 'hire_one_year').trim().toLowerCase();
        const employmentStatus = String(karyawan?.employment_status || '').trim().toLowerCase();
        const isPermanent = employmentStatus === 'tetap';
        const start = targetDate ? new Date(targetDate + 'T00:00:00') : new Date();
        if (mode === 'permanent_only') {
            return isPermanent;
        }
        const hireRaw = String(karyawan?.hire_date || '').trim();
        if (!hireRaw) {
            return false;
        }
        const hireDate = new Date(hireRaw + 'T00:00:00');
        const eligibleDate = new Date(hireDate.getFullYear() + 1, hireDate.getMonth(), hireDate.getDate());
        const passedOneYear = start >= eligibleDate;
        if (mode === 'permanent_and_one_year') {
            return isPermanent && passedOneYear;
        }
        return passedOneYear;
    }
    function renderAnnualSettings(){
        const settings = annualSettings();
        const $eligibility = $('#annualEligibilityMode');
        const $reset = $('#annualResetMode');
        const $carry = $('#annualCarryMode');
        if (!$eligibility.length || !$reset.length || !$carry.length) return;
        $eligibility.html((settings.eligibility_options || []).map(opt => `<option value="${escapeHtml(opt.value)}">${escapeHtml(opt.label)}</option>`).join(''));
        $reset.html((settings.reset_options || []).map(opt => `<option value="${escapeHtml(opt.value)}">${escapeHtml(opt.label)}</option>`).join(''));
        $carry.html((settings.carry_options || []).map(opt => `<option value="${escapeHtml(opt.value)}">${escapeHtml(opt.label)}</option>`).join(''));
        $eligibility.val(settings.eligibility_mode || 'hire_one_year');
        $reset.val(settings.reset_mode || 'calendar_year');
        $carry.val(settings.carry_mode || 'reset_zero');
    }
    function renderRefsFallback(){
        renderAnnualSettings();
        $('#filterLeaveType').html(
            '<option value="">Semua jenis</option>' +
            activeLeaveTypes().map(rule => `<option value="${escapeHtml(rule.code)}">${escapeHtml(rule.name || rule.code)}</option>`).join('')
        );
        if (!$('#filterFlow option').length) {
            $('#filterFlow').html('<option value="">Semua flow</option>');
        }
        const $importFlow = $('#leaveImportDefaultFlow');
        if ($importFlow.length && !$importFlow.find('option').length) {
            $importFlow.html('<option value="">- pilih flow default -</option>');
        }
    }
    function activeLeaveTypes(){
        const list = Array.isArray(refs.leaveTypes) && refs.leaveTypes.length ? refs.leaveTypes : defaultLeaveTypes();
        return list.filter(x => String(x.code || '').trim() !== '');
    }
    function leaveTypeRule(code){
        const key = String(code || '').toLowerCase().trim();
        return activeLeaveTypes().find(x => String(x.code || '').toLowerCase().trim() === key) || null;
    }
    function leaveTypeOptionLabel(rule){
        const badges = [];
        badges.push(rule.is_payable ? 'Payable' : 'Non Payable');
        if (rule.requires_one_year) badges.push('1 tahun');
        if (rule.requires_attachment) badges.push('Lampiran');
        if (rule.max_days_per_request) badges.push(`max ${rule.max_days_per_request} hari`);
        return `${rule.name || rule.code} (${badges.join(', ')})`;
    }
    function optionsLeaveTypes(selectedCode = ''){
        const selected = String(selectedCode || '').trim();
        const selectedKaryawan = selectedKaryawanRow();
        const list = activeLeaveTypes().filter(rule => {
            if (String(rule.code || '').trim().toLowerCase() !== 'annual') return true;
            return annualEligibleForKaryawan(selectedKaryawan, $('#startDate').val() || null);
        });
        if (selected && normalizeLeaveTypeCode(selected) !== 'annual' && !list.some(x => String(x.code) === selected)) {
            list.push({code:selected, name:`${selected} (legacy)`, category:'legacy', is_payable:true, requires_one_year:false, requires_attachment:false});
        }
        return list.map(rule => `<option value="${escapeHtml(rule.code)}">${escapeHtml(leaveTypeOptionLabel(rule))}</option>`).join('');
    }
    function renderLeaveTypeSelect(selectedCode = ''){
        $('#leaveType').html(optionsLeaveTypes(selectedCode));
        setLeaveTypeValue(selectedCode || ($('#leaveType option:first').val() || 'annual'));
    }
    function setLeaveTypeValue(code){
        const value = String(code || '').trim();
        if (normalizeLeaveTypeCode(value) === 'annual' && !$('#leaveType option[value="annual"]').length) {
            $('#leaveType').val($('#leaveType option:first').val() || '').trigger('change');
            return;
        }
        if (value && !$('#leaveType option[value="' + value.replaceAll('"', '\\"') + '"]').length) {
            $('#leaveType').append(`<option value="${escapeHtml(value)}">${escapeHtml(value)} (legacy)</option>`);
        }
        $('#leaveType').val(value || ($('#leaveType option:first').val() || 'annual')).trigger('change');
    }
    function refreshLeaveTypeHelp(){
        const rule = leaveTypeRule($('#leaveType').val());
        const requiresAttachment = !!rule?.requires_attachment;
        $('#sickAttachmentGroup').toggleClass('d-none', !requiresAttachment);
        if (!requiresAttachment) {
            $('#attachmentFile').val('');
        }
        const meta = [];
        if (rule) {
            meta.push(rule.is_payable ? 'Payable / tetap dihitung HK' : 'Non payable / tidak dihitung HK');
            if (rule.requires_one_year) meta.push('wajib masa kerja minimal 1 tahun dari hire_date');
            if (rule.requires_attachment) meta.push('wajib lampiran sebelum approve');
            if (rule.max_days_per_request) meta.push(`maksimal ${rule.max_days_per_request} hari per pengajuan`);
            if (rule.max_days_per_year) meta.push(`kuota ${rule.max_days_per_year} hari per tahun`);
        }
        $('#leaveTypeHelp').text(rule ? meta.join(' | ') : 'Jenis leave mengikuti rule aktif di server.');
        $('#attachmentRuleHelp').text(rule ? `Wajib untuk ${rule.name || rule.code}.` : 'Wajib untuk jenis leave yang membutuhkan lampiran.');
        refreshLeaveQuotaInfo();
    }
    function normalizeLeaveTypeCode(code){
        return String(code || '').toLowerCase().trim().replace(/[\s-]+/g, '_');
    }
    function dateOnly(value){
        return String(value || '').slice(0, 10);
    }
    function inclusiveDays(start, end){
        if (!start || !end) return 0;
        const a = new Date(start + 'T00:00:00');
        const b = new Date(end + 'T00:00:00');
        if (Number.isNaN(a.getTime()) || Number.isNaN(b.getTime()) || b < a) return 0;
        return Math.floor((b - a) / 86400000) + 1;
    }
    function selectedKaryawanRow(){
        const selectedId = getSelectedKaryawanValue();
        return (refs.karyawans || []).find(x => String(x.id) === selectedId) || null;
    }
    function annualWindowForKaryawan(karyawan, start){
        const startDate = start ? new Date(start + 'T00:00:00') : new Date();
        const settings = annualSettings();
        if ((settings.reset_mode || 'calendar_year') !== 'hire_anniversary' || !karyawan?.hire_date) {
            const year = startDate.getFullYear();
            return {
                mode: 'calendar_year',
                label: `Kalender ${year}`,
                start: `${year}-01-01`,
                end: `${year}-12-31`,
            };
        }

        const hireDate = new Date(String(karyawan.hire_date) + 'T00:00:00');
        const anchorDay = Math.min(hireDate.getDate(), new Date(startDate.getFullYear(), hireDate.getMonth() + 1, 0).getDate());
        let anchor = new Date(startDate.getFullYear(), hireDate.getMonth(), anchorDay);
        if (startDate < anchor) {
            const prevYear = startDate.getFullYear() - 1;
            const prevDay = Math.min(hireDate.getDate(), new Date(prevYear, hireDate.getMonth() + 1, 0).getDate());
            anchor = new Date(prevYear, hireDate.getMonth(), prevDay);
        }
        const windowEndDate = new Date(anchor.getFullYear() + 1, anchor.getMonth(), anchor.getDate() - 1);
        return {
            mode: 'hire_anniversary',
            label: `Anniversary ${dateToYmd(anchor)} s/d ${dateToYmd(windowEndDate)}`,
            start: dateToYmd(anchor),
            end: dateToYmd(windowEndDate),
        };
    }
    function previousAnnualWindow(window){
        if (!window || !window.start) return null;
        const startDate = new Date(String(window.start) + 'T00:00:00');
        if (Number.isNaN(startDate.getTime())) return null;
        if (String(window.mode || 'calendar_year') === 'hire_anniversary') {
            const prevStart = new Date(startDate.getFullYear() - 1, startDate.getMonth(), startDate.getDate());
            const prevEnd = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - 1);
            return {
                mode: 'hire_anniversary',
                label: `Anniversary ${dateToYmd(prevStart)} s/d ${dateToYmd(prevEnd)}`,
                start: dateToYmd(prevStart),
                end: dateToYmd(prevEnd),
            };
        }
        const prevYear = startDate.getFullYear() - 1;
        return {
            mode: 'calendar_year',
            label: `Kalender ${prevYear}`,
            start: `${prevYear}-01-01`,
            end: `${prevYear}-12-31`,
        };
    }
    function refreshLeaveQuotaInfo(){
        const karyawanId = Number($('#karyawanId').val() || 0);
        const type = normalizeLeaveTypeCode($('#leaveType').val());
        const rule = leaveTypeRule($('#leaveType').val());
        const karyawan = selectedKaryawanRow();
        if (!karyawanId || !rule) {
            $('#leaveQuotaInfo').removeClass('alert-success alert-warning alert-danger').addClass('alert-light')
                .text('Pilih karyawan dan jenis leave untuk melihat kuota.');
            return;
        }

        const annualQuota = rule.max_days_per_year !== null && rule.max_days_per_year !== undefined && rule.max_days_per_year !== ''
            ? Number(rule.max_days_per_year)
            : null;
        const requestLimit = rule.max_days_per_request !== null && rule.max_days_per_request !== undefined && rule.max_days_per_request !== ''
            ? Number(rule.max_days_per_request)
            : null;
        const start = $('#startDate').val() || new Date().toISOString().slice(0, 10);
        const end = $('#endDate').val() || start;
        const requestDays = inclusiveDays(start, end);
        const window = annualWindowForKaryawan(karyawan, start);
        const previousWindow = previousAnnualWindow(window);
        const carryMode = String(annualSettings().carry_mode || 'reset_zero').trim().toLowerCase();
        const countedStatuses = ['draft', 'submitted', 'in_review', 'approved'];
        let used = 0;
        let pending = 0;
        let previousUsed = 0;
        let previousPending = 0;
        (rows || []).forEach(r => {
            if (Number(r.karyawan_id || 0) !== karyawanId) return;
            if (Number(r.id || 0) === Number(editId || 0)) return;
            if (normalizeLeaveTypeCode(r.leave_type) !== type) return;
            if (!countedStatuses.includes(String(r.status || ''))) return;
            const rowStart = dateOnly(r.start_date);
            const days = Number(r.total_days || 0);
            if (!rowStart) return;
            if (rowStart >= window.start && rowStart <= window.end) {
                if (String(r.status || '') === 'approved') used += days;
                else pending += days;
                return;
            }
            if (previousWindow && type === 'annual' && rowStart >= previousWindow.start && rowStart <= previousWindow.end) {
                if (String(r.status || '') === 'approved') previousUsed += days;
                else previousPending += days;
            }
        });

        const pieces = [];
        pieces.push(`<b>${escapeHtml(rule.name || rule.code)}</b>`);
        pieces.push(rule.is_payable ? 'Payable' : 'Non payable');
        if (rule.requires_one_year) pieces.push('Syarat: masa kerja 1 tahun');
        if (requestLimit !== null) pieces.push(`Max/pengajuan: ${requestLimit} hari`);
        if (annualQuota !== null) {
            let carryForward = 0;
            if (type === 'annual' && carryMode === 'carry_forward' && annualEligibleForKaryawan(karyawan, previousWindow?.end || null)) {
                carryForward = Math.max(0, annualQuota - previousUsed - previousPending);
            }
            const totalQuota = annualQuota + carryForward;
            const remaining = totalQuota - used - pending;
            pieces.push(`Kuota window: ${window.label}`);
            pieces.push(`Quota dasar: ${annualQuota} hari`);
            if (type === 'annual') {
                pieces.push(`Mode sisa: ${carryMode === 'carry_forward' ? 'quota tambah' : 'hangus'}`);
                if (carryForward > 0) pieces.push(`Carry forward: ${carryForward} hari`);
            }
            pieces.push(`Approved terpakai: ${used} hari`);
            pieces.push(`Draft/In review: ${pending} hari`);
            pieces.push(`Sisa estimasi: ${remaining} hari`);
            pieces.push(`Pengajuan ini: ${requestDays} hari`);
            const danger = remaining < requestDays;
            $('#leaveQuotaInfo').removeClass('alert-light alert-success alert-warning alert-danger')
                .addClass(danger ? 'alert-danger' : (pending > 0 ? 'alert-warning' : 'alert-success'))
                .html(pieces.join(' | '));
        } else {
            if (requestDays > 0) pieces.push(`Pengajuan ini: ${requestDays} hari`);
            pieces.push('Tidak memakai kuota tahunan');
            $('#leaveQuotaInfo').removeClass('alert-light alert-success alert-warning alert-danger')
                .addClass(rule.is_payable ? 'alert-success' : 'alert-warning')
                .html(pieces.join(' | '));
        }
    }

    function getSelectedKaryawanValue(){
        return String($('#karyawanId').val() || '').trim();
    }

    function syncKaryawanSelectionCount(){
        const selectedId = getSelectedKaryawanValue();
        const selectedRow = (refs.karyawans || []).find(x => String(x.id) === selectedId);
        $('#karyawanSelectionCount').html(selectedRow
            ? `Karyawan dipilih: <span class="fw-semibold">${escapeHtml(selectedRow.employee_code || '-')} - ${escapeHtml(selectedRow.full_name || '-')}</span>`
            : 'Belum ada karyawan dipilih.'
        );
        refreshLeaveQuotaInfo();
    }

    function setSelectedKaryawanValue(value){
        $('#karyawanId').val(String(value || '').trim());
        renderLeaveTypeSelect($('#leaveType').val() || 'annual');
        syncKaryawanSelectionCount();
    }

    function initFlowSelect() {
        if ($('#flowId').data('select2')) $('#flowId').select2('destroy');
        $('#flowId').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#leaveModal'),
            width: '100%',
            placeholder: 'Pilih flow approval...'
        });
    }

    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 / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' },
            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 / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' };

        $('#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 selectedId = getSelectedKaryawanValue();
        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);
            });

        $('#karyawanId').html(filtered.map(x => `<option value="${x.id}">${x.employee_code} - ${x.full_name}</option>`).join(''));
        if (selectedId && $('#karyawanId option[value="' + selectedId + '"]').length) {
            $('#karyawanId').val(selectedId);
        }

        let previousDividerLabel = null;
        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="4">${escapeHtml(dividerLabel)}</td></tr>`
                : '';
            previousDividerLabel = dividerLabel || previousDividerLabel;
            const isSelected = String(x.id) === getSelectedKaryawanValue();
            return `${dividerHtml}
                <tr class="karyawan-table-row ${isSelected ? 'table-primary' : ''}" data-karyawan-id="${x.id}" style="cursor:pointer;">
                    <td class="fw-semibold">${escapeHtml(x.employee_code || '-')}</td>
                    <td>${escapeHtml(x.full_name || '-')}</td>
                    <td>${x.employee_group ? escapeHtml(x.employee_group) : '<span class="text-muted">-</span>'}</td>
                    <td>${x.export_employee_group ? escapeHtml(x.export_employee_group) : '<span class="text-muted">-</span>'}</td>
                </tr>`;
        }).join('') : '<tr><td colspan="4" class="text-muted text-center py-3">Tidak ada hasil karyawan.</td></tr>';
        $('#karyawanTableBody').html(rowsHtml);
        syncKaryawanSelectionCount();
    }

    function initBulkKaryawanSelect($ctx) {
        const $target = $ctx ? $ctx.find('.bulk-karyawan') : $('#bulkTable .bulk-karyawan');
        $target.each(function () {
            const $el = $(this);
            if ($el.data('select2')) $el.select2('destroy');
            $el.select2({
                theme: 'bootstrap-5',
                dropdownParent: $('#bulkModal'),
                width: '100%',
                placeholder: 'Cari karyawan...'
            });
        });
    }

    function statusBadge(s){
        const key = String(s || '').trim().toLowerCase();
        const map = {
            draft: { cls: 'secondary', label: 'draft' },
            submitted: { cls: 'secondary', label: 'submitted' },
            in_review: { cls: 'secondary', label: 'in_review' },
            approved: { cls: 'success', label: 'approved' },
            rejected: { cls: 'secondary', label: 'rejected' },
            cancelled: { cls: 'dark', label: 'cancelled' },
            invalid: { cls: 'danger', label: 'invalid / perlu cek' },
        };
        const meta = map[key] || { cls: 'secondary', label: s || '-' };
        return `<span class="badge text-bg-${meta.cls}">${meta.label}</span>`;
    }
    function getLeaveSyncStatusMeta(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 renderLeaveSyncBadge(row){
        if (!row || String(row.source_system || '') !== 'third_party_leave') {
            return '';
        }
        const meta = getLeaveSyncStatusMeta(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="${String(titleParts.join(' | '))
            .replaceAll('&','&amp;')
            .replaceAll('<','&lt;')
            .replaceAll('>','&gt;')
            .replaceAll('\"','&quot;')}"` : '';
        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 statusColor(s){
        const map = { draft:'#9aa0a6', submitted:'#9aa0a6', in_review:'#9aa0a6', approved:'#198754', rejected:'#9aa0a6', cancelled:'#212529' };
        return map[s] || '#6c757d';
    }
    function dateToYmd(value){
        if (!value) return '';
        if (typeof value === 'string') return value.slice(0, 10);
        const date = value instanceof Date ? value : new Date(value);
        if (Number.isNaN(date.getTime())) return '';
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
    function rowMatchesDate(row, ymd){
        const start = String(row?.start_date || '').slice(0, 10);
        const end = String(row?.end_date || row?.start_date || '').slice(0, 10);
        if (!start || !ymd) return false;
        return ymd >= start && ymd <= end;
    }
    function rowsByDate(ymd){
        return (rows || [])
            .filter(row => rowMatchesDate(row, ymd))
            .sort((a,b) => {
                const dateCmp = String(b.end_date || b.start_date || '').localeCompare(String(a.end_date || a.start_date || ''), 'id');
                if (dateCmp !== 0) return dateCmp;
                return String(a.karyawan_name || a.employee_name || '').localeCompare(String(b.karyawan_name || b.employee_name || ''), 'id');
            });
    }
    function karyawanName(row){
        return row?.karyawan_name || row?.employee_name || row?.full_name || row?.karyawan?.full_name || '-';
    }
    function renderLeaveActionButtons(row, prefix = 'leave-action'){
        const id = Number(row?.id || 0);
        if (!id) return '<span class="text-muted">-</span>';
        let btn = '';
        if (row.can_edit) btn += `<button type="button" class="btn btn-xs btn-outline-warning ${prefix}" data-action="edit" data-id="${id}">Edit</button> `;
        if (row.can_delete) btn += `<button type="button" class="btn btn-xs btn-outline-danger ${prefix}" data-action="delete" data-id="${id}">Delete</button> `;
        if (['draft'].includes((row.status||''))) btn += `<button type="button" class="btn btn-xs btn-outline-primary ${prefix}" data-action="submit" data-id="${id}">Submit</button> `;
        if (!row.attachment_url && ['draft','submitted','in_review'].includes((row.status||''))) {
            btn += `<button type="button" class="btn btn-xs btn-outline-secondary ${prefix}" data-action="upload" data-id="${id}">Upload Lampiran</button> `;
        }
        if (row.can_approve) btn += `<button type="button" class="btn btn-xs btn-outline-success ${prefix}" data-action="approve" data-id="${id}">Approve</button> `;
        if (row.can_cancel_submit) btn += `<button type="button" class="btn btn-xs btn-outline-dark ${prefix}" data-action="cancel-submit" data-id="${id}">Batal Submit</button> `;
        if (row.can_cancel_reject) btn += `<button type="button" class="btn btn-xs btn-outline-secondary ${prefix}" data-action="cancel-reject" data-id="${id}">Batal Reject</button> `;
        if (row.can_unapprove) btn += `<button type="button" class="btn btn-xs btn-outline-secondary ${prefix}" data-action="unapprove" data-id="${id}">Batal Approve</button> `;
        if (row.can_reject) btn += `<button type="button" class="btn btn-xs btn-outline-danger ${prefix}" data-action="reject" data-id="${id}">Reject</button> `;
        return btn || '<span class="text-muted">-</span>';
    }
    let leaveDateDetailState = null;
    function leaveDateModalOptions(rows, field){
        return [...new Set((rows || []).map(r => String(r?.[field] || '').trim()).filter(Boolean))]
            .sort((a,b) => a.localeCompare(b, 'id'))
            .map(v => `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`)
            .join('');
    }
    function leaveDateSortValue(row, key){
        if (key === 'request_no') return row.request_no || '';
        if (key === 'karyawan') return `${row.employee_code || ''} ${karyawanName(row)}`;
        if (key === 'leave_type') return row.leave_type || '';
        if (key === 'period') return `${row.start_date || ''} ${row.end_date || ''}`;
        if (key === 'total_days') return Number(row.total_days || 0);
        if (key === 'status') return row.status || '';
        return '';
    }
    function renderDateDetailRows(pageRows, startNo, selected){
        if (!pageRows.length) {
            return '<tr><td colspan="9" class="text-center text-muted py-3">Tidak ada pengajuan leave pada filter ini.</td></tr>';
        }
        return pageRows.map((r, idx) => {
            const id = Number(r.id || 0);
            const checked = selected?.has(id) ? 'checked' : '';
            return `
            <tr>
                <td class="text-center"><input type="checkbox" class="leave-date-check" value="${id}" ${checked}></td>
                <td class="text-center">${startNo + idx}</td>
                <td>${escapeHtml(r.request_no || '-')}</td>
                <td>${escapeHtml(karyawanName(r))}</td>
                <td><span class="badge text-bg-light border">${escapeHtml(String(r.leave_type || '-').toUpperCase())}</span></td>
                <td>${renderLeaveDateRange(r.start_date, r.end_date)}</td>
                <td>${escapeHtml(String(r.total_days || 0))} hari</td>
                <td>${statusBadge(r.status)}</td>
                <td><div class="d-flex flex-wrap gap-1">${renderLeaveActionButtons(r, 'calendar-leave-action')}</div></td>
            </tr>
        `;
        }).join('');
    }
    function renderLeaveDateDetailModal(){
        if (!leaveDateDetailState) return;
        const st = leaveDateDetailState;
        const q = String(st.query || '').toLowerCase();
        let filtered = (st.rows || []).filter(r => {
            const haystack = [
                r.request_no,
                r.employee_code,
                r.employee_name,
                r.karyawan_name,
                karyawanName(r),
                r.leave_type,
                r.status,
                r.reason,
            ].join(' ').toLowerCase();
            if (q && !haystack.includes(q)) return false;
            if (st.type && String(r.leave_type || '') !== st.type) return false;
            if (st.status && String(r.status || '') !== st.status) return false;
            return true;
        });
        filtered.sort((a,b) => {
            const av = leaveDateSortValue(a, st.sortKey);
            const bv = leaveDateSortValue(b, st.sortKey);
            const cmp = typeof av === 'number' || typeof bv === 'number'
                ? Number(av || 0) - Number(bv || 0)
                : String(av || '').localeCompare(String(bv || ''), 'id', {numeric:true});
            return st.sortDir === 'desc' ? -cmp : cmp;
        });
        st.filtered = filtered;
        const totalPages = Math.max(1, Math.ceil(filtered.length / st.pageSize));
        st.page = Math.min(Math.max(1, st.page), totalPages);
        const start = (st.page - 1) * st.pageSize;
        const pageRows = filtered.slice(start, start + st.pageSize);
        const visibleIds = pageRows.map(r => Number(r.id || 0)).filter(Boolean);
        const allVisibleChecked = visibleIds.length > 0 && visibleIds.every(id => st.selected.has(id));
        $('#leaveDateDetailTbody').html(renderDateDetailRows(pageRows, start + 1, st.selected));
        $('#leaveDateTotalInfo').text(`${filtered.length} data tampil dari ${st.rows.length} total`);
        $('#leaveDateSelectedInfo').text(`${st.selected.size} dipilih`);
        $('#leaveDatePageInfo').text(`Hal. ${st.page} / ${totalPages}`);
        $('#leaveDatePrev').prop('disabled', st.page <= 1);
        $('#leaveDateNext').prop('disabled', st.page >= totalPages);
        $('#leaveDateCheckAll').prop('checked', allVisibleChecked);
        $('.leave-date-sort').each(function(){
            const key = $(this).data('sort');
            const suffix = key === st.sortKey ? (st.sortDir === 'asc' ? ' ▲' : ' ▼') : '';
            $(this).find('.sort-mark').text(suffix);
        });
    }
    function bulkDateLeaveAction(action){
        const ids = [...(leaveDateDetailState?.selected || new Set())];
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        const afterDone = (resp, title) => {
            leaveDateDetailState = null;
            loadData();
            renderBulkResult(resp, title);
        };
        if (action === 'submit') {
            return $.post('{{ route('leave_request.bulk_submit') }}', {ids})
                .done(resp=>afterDone(resp, 'Bulk submit selesai'))
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk submit failed', 'error'));
        }
        if (action === 'approve') {
            return Swal.fire({title:'Catatan Approve (opsional)', input:'text', showCancelButton:true, confirmButtonText:'Approve Terpilih'}).then(res=>{
                if(!res.isConfirmed) return;
                $.post('{{ route('leave_request.bulk_approve') }}', {ids, notes: res.value || ''})
                    .done(resp=>afterDone(resp, 'Bulk approve selesai'))
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk approve failed', 'error'));
            });
        }
        if (action === 'reject') {
            return Swal.fire({title:'Reject terpilih?', input:'text', inputLabel:'Alasan reject', inputValidator:(v)=>!v?'Alasan wajib diisi':null, showCancelButton:true, confirmButtonText:'Reject Terpilih'}).then(res=>{
                if(!res.isConfirmed) return;
                $.post('{{ route('leave_request.bulk_reject') }}', {ids, notes: res.value})
                    .done(resp=>afterDone(resp, 'Bulk reject selesai'))
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk reject failed', 'error'));
            });
        }
        if (action === 'delete') {
            return Swal.fire({title:'Hapus data leave terpilih?', text:`Total: ${ids.length} data`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(res=>{
                if(!res.isConfirmed) return;
                $.post('{{ route('leave_request.bulk_delete') }}', {ids})
                    .done(resp=>afterDone(resp, 'Bulk hapus selesai'))
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk delete failed', 'error'));
            });
        }
        if (action === 'cancel-submit') {
            return Swal.fire({title:'Bulk batalkan submit?', text:'Dokumen submitted/in_review terpilih akan kembali ke draft.', icon:'warning', showCancelButton:true, confirmButtonText:'Batalkan Submit Terpilih'}).then(res=>{
                if(!res.isConfirmed) return;
                $.post('{{ route('leave_request.bulk_cancel_submit') }}', {ids})
                    .done(resp=>afterDone(resp, 'Bulk batalkan submit selesai'))
                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk cancel submit failed', 'error'));
            });
        }
    }
    function showDateLeaveDetails(ymd){
        const detailRows = rowsByDate(ymd);
        leaveDateDetailState = {
            ymd,
            rows: detailRows,
            filtered: detailRows,
            selected: new Set(),
            query: '',
            type: '',
            status: '',
            sortKey: 'karyawan',
            sortDir: 'asc',
            page: 1,
            pageSize: 10,
        };
        Swal.fire({
            title: `Detail Leave ${ymd}`,
            width: 1200,
            html: `
                <div class="row g-2 text-start mb-2">
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Cari</label>
                        <input id="leaveDateSearch" type="text" class="form-control form-control-sm" placeholder="request / karyawan / alasan">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-1">Jenis</label>
                        <select id="leaveDateTypeFilter" class="form-select form-select-sm">
                            <option value="">Semua jenis</option>
                            ${leaveDateModalOptions(detailRows, 'leave_type')}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-1">Status</label>
                        <select id="leaveDateStatusFilter" class="form-select form-select-sm">
                            <option value="">Semua status</option>
                            ${leaveDateModalOptions(detailRows, 'status')}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-1">Per halaman</label>
                        <select id="leaveDatePageSize" class="form-select form-select-sm">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" id="leaveDateResetFilter" class="btn btn-sm btn-outline-secondary w-100">Reset</button>
                    </div>
                </div>
                <div class="d-flex flex-wrap gap-1 align-items-center justify-content-between mb-2">
                    <div class="small text-muted"><span id="leaveDateTotalInfo"></span> | <span id="leaveDateSelectedInfo"></span></div>
                    <div class="d-flex flex-wrap gap-1">
                        <button type="button" class="btn btn-xs btn-outline-primary leave-date-bulk" data-action="submit">Bulk Submit</button>
                        <button type="button" class="btn btn-xs btn-outline-success leave-date-bulk" data-action="approve">Bulk Approve</button>
                        <button type="button" class="btn btn-xs btn-outline-danger leave-date-bulk" data-action="reject">Bulk Reject</button>
                        <button type="button" class="btn btn-xs btn-outline-dark leave-date-bulk" data-action="cancel-submit">Batal Submit</button>
                        <button type="button" class="btn btn-xs btn-outline-danger leave-date-bulk" data-action="delete">Bulk Delete</button>
                    </div>
                </div>
                <div class="table-responsive" style="max-height:60vh;overflow:auto;">
                    <table class="table table-sm table-bordered table-striped align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:34px" class="text-center"><input type="checkbox" id="leaveDateCheckAll"></th>
                                <th style="width:50px" class="text-center">No</th>
                                <th class="leave-date-sort" data-sort="request_no" role="button">No Request<span class="sort-mark"></span></th>
                                <th class="leave-date-sort" data-sort="karyawan" role="button">Karyawan<span class="sort-mark"></span></th>
                                <th class="leave-date-sort" data-sort="leave_type" role="button">Jenis<span class="sort-mark"></span></th>
                                <th class="leave-date-sort" data-sort="period" role="button">Tanggal Leave<span class="sort-mark"></span></th>
                                <th class="leave-date-sort" data-sort="total_days" role="button">Total<span class="sort-mark"></span></th>
                                <th class="leave-date-sort" data-sort="status" role="button">Status<span class="sort-mark"></span></th>
                                <th style="min-width:170px">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="leaveDateDetailTbody"></tbody>
                    </table>
                </div>
                <div class="d-flex align-items-center justify-content-end gap-2 mt-2">
                    <button type="button" id="leaveDatePrev" class="btn btn-sm btn-outline-secondary">Prev</button>
                    <span id="leaveDatePageInfo" class="small text-muted"></span>
                    <button type="button" id="leaveDateNext" class="btn btn-sm btn-outline-secondary">Next</button>
                </div>
            `,
            confirmButtonText: 'Close',
            didOpen: () => renderLeaveDateDetailModal(),
            willClose: () => { leaveDateDetailState = null; }
        });
    }
    function getSelectedIds(){
        return $('.row-check:checked').map(function(){ return Number($(this).val()); }).get().filter(x => x > 0);
    }
    let leaveLastCheckedIndex = null;
    function refreshHeaderCheck(){
        const total = $('.row-check').length;
        const checked = $('.row-check:checked').length;
        $('#checkAllRows').prop('checked', total > 0 && total === checked);
    }
    function getLeaveVisibleChecks() {
        return $('#leaveTable tbody .row-check').toArray();
    }
    function syncLeaveCheckRange(currentCheckbox, targetState) {
        const checks = getLeaveVisibleChecks();
        const currentIndex = checks.indexOf(currentCheckbox);
        if (currentIndex < 0) {
            return;
        }
        if (leaveLastCheckedIndex === null || leaveLastCheckedIndex < 0 || leaveLastCheckedIndex >= checks.length) {
            leaveLastCheckedIndex = currentIndex;
            return;
        }
        const start = Math.min(leaveLastCheckedIndex, currentIndex);
        const end = Math.max(leaveLastCheckedIndex, currentIndex);
        for (let i = start; i <= end; i++) {
            $(checks[i]).prop('checked', targetState);
        }
        leaveLastCheckedIndex = currentIndex;
    }
    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 sortLeaveRows(list){
        return (list || []).slice().sort((a, b) => {
            const endCmp = String(b.end_date || b.start_date || '').localeCompare(String(a.end_date || a.start_date || ''), 'id');
            if (endCmp !== 0) return endCmp;
            const startCmp = String(b.start_date || '').localeCompare(String(a.start_date || ''), 'id');
            if (startCmp !== 0) return startCmp;
            return Number(b.id || 0) - Number(a.id || 0);
        });
    }
    function dateRangeOverlaps(row, fromDate, toDate){
        const rowStart = String(row?.start_date || '').slice(0, 10);
        const rowEnd = String(row?.end_date || row?.start_date || '').slice(0, 10);
        if (!rowStart) return false;
        if (fromDate && rowEnd < fromDate) return false;
        if (toDate && rowStart > toDate) return false;
        return true;
    }
    function updateLeaveFilterSummary(total, filtered){
        const parts = [];
        const fromDate = $('#filterDateFrom').val() || '';
        const toDate = $('#filterDateTo').val() || '';
        const leaveType = $('#filterLeaveType').val() || '';
        const status = $('#filterStatus').val() || '';
        const source = $('#filterSource').val() || '';
        const employee = ($('#filterEmployee').val() || '').trim();
        const keyword = ($('#filterKeyword').val() || '').trim();
        const flowText = $('#filterFlow').val() ? $('#filterFlow option:selected').text() : '';
        if (fromDate || toDate) parts.push(`periode ${fromDate || 'awal'} s/d ${toDate || 'akhir'}`);
        if (leaveType) parts.push(`jenis ${leaveType.toUpperCase()}`);
        if (status) parts.push(`status ${status}`);
        if (flowText) parts.push(`flow ${flowText}`);
        if (source) parts.push(`sumber ${source === 'third_party' ? '3rd Party' : 'Manual / Internal'}`);
        if (employee) parts.push(`karyawan "${employee}"`);
        if (keyword) parts.push(`keyword "${keyword}"`);
        $('#leaveFilterSummary').text(`Tampil ${filtered} dari ${total} data${parts.length ? ', ' + parts.join(' | ') : ''}, urut periode terbaru.`);
    }
    function applyListFilters(){
        const fromDate = $('#filterDateFrom').val() || '';
        const toDate = $('#filterDateTo').val() || '';
        const leaveType = $('#filterLeaveType').val() || '';
        const status = $('#filterStatus').val() || '';
        const flowId = String($('#filterFlow').val() || '');
        const source = $('#filterSource').val() || '';
        const employee = String($('#filterEmployee').val() || '').trim().toLowerCase();
        const keyword = String($('#filterKeyword').val() || '').trim().toLowerCase();
        const syncStatus = String($('#filterSyncStatus').val() || '');
        const needsAction = String($('#filterNeedsAction').val() || '');
        const payable = String($('#filterPayable').val() || '');

        rows = sortLeaveRows((allRows || []).filter((row) => {
            if (!dateRangeOverlaps(row, fromDate, toDate)) return false;
            if (leaveType && String(row.leave_type || '') !== leaveType) return false;
            if (status && String(row.status || '') !== status) return false;
            if (flowId && String(row.approval_flow_id || '') !== flowId) return false;
            if (source === 'manual' && String(row.source_system || '').trim() !== '') return false;
            if (source === 'third_party' && String(row.source_system || '').trim() === '') return false;
            if (syncStatus && String(row.sync_status || '') !== syncStatus) return false;
            if (needsAction && String(Number(row.needs_action || 0)) !== needsAction) return false;
            if (payable && String(Number(row.is_payable ? 1 : 0)) !== payable) return false;

            if (employee) {
                const employeeHaystack = [
                    row.employee_code,
                    row.employee_name,
                    row.karyawan_name,
                    karyawanName(row),
                ].join(' ').toLowerCase();
                if (!employeeHaystack.includes(employee)) return false;
            }
            if (keyword) {
                const keywordHaystack = [
                    row.request_no,
                    row.reason,
                    row.attachment_name,
                    row.pending_level,
                    row.flow_name,
                ].join(' ').toLowerCase();
                if (!keywordHaystack.includes(keyword)) return false;
            }
            return true;
        }));

        if (!selfMode) {
            table.clear().rows.add(rows).draw();
            $('#checkAllRows').prop('checked', false);
        }
        if (!$('#calendarViewWrapper').hasClass('d-none')) {
            safeRenderCalendar(false);
        }
        updateLeaveFilterSummary((allRows || []).length, rows.length);
    }
    function pollThirdPartyLeave(jobId, title, detail, onDone){
        if (window.AhspBackgroundSync?.trackAndOpen) {
            window.AhspBackgroundSync.trackAndOpen({
                job_id: jobId,
                title: title,
                detail: detail,
                module: 'leave_request',
                type: 'third_party_leave_sync',
                status_url: syncLeaveThirdPartyStatusUrl,
                started_at: new Date().toISOString(),
                onDone
            });
            return;
        }

        const startedAt = Date.now();
        const timer = Swal.fire({
            title: title,
            html: '<div class="mt-2">Memulai worker sync leave...</div>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => Swal.showLoading(),
        });
        const poll = () => {
            $.getJSON(syncLeaveThirdPartyStatusUrl.replace('__JOB_ID__', encodeURIComponent(jobId)))
                .done((status) => {
                    const processed = Number(status?.processed || 0);
                    const total = Number(status?.total || 0);
                    const percent = Number(status?.percent || 0);
                    Swal.update({
                        html: `
                            <div class="small text-muted mb-2">${escapeHtml(detail || '')}</div>
                            <div class="fw-semibold">${processed} / ${total || 0}</div>
                            <div class="small text-muted">${percent}% | ${Math.floor((Date.now() - startedAt) / 1000)} detik</div>
                        `
                    });
                    const state = String(status?.status || '').toLowerCase();
                    if (['done', 'failed', 'missing'].includes(state)) {
                        Swal.close();
                        onDone && onDone(status);
                        return;
                    }
                    setTimeout(poll, 1000);
                })
                .fail(() => setTimeout(poll, 1500));
        };
        poll();
    }
    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) {
            safeRenderCalendar(true);
        }
    }

    function setLeaveTableLoading(isLoading){
        $('#leaveTableLoading').css('display', isLoading ? 'flex' : 'none');
        $('#btnResetLeaveFilters, #btnViewTable, #btnViewCalendar').prop('disabled', isLoading);
        $('#filterDateFrom, #filterDateTo, #filterLeaveType, #filterStatus, #filterFlow, #filterSource, #filterEmployee, #filterKeyword, #filterSyncStatus, #filterNeedsAction, #filterPayable').prop('disabled', isLoading);
        $('#leaveTable_filter input').prop('disabled', isLoading);

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

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

    const table = selfMode ? null : $('#leaveTable').DataTable({
        data: [],
        order: [], // preserve incoming order (we pre-sort "butuh action" first)
        columns: [
            {data:null, orderable:false, searchable:false, render:(d,t,r)=>`<input type="checkbox" class="row-check" value="${r.id}">`},
            {data:null, render:(d,t,r,m)=>m.row+1, orderable:false, searchable:false},
            {data:'request_no', render:(v,t,r)=>`<div>${v || '-'}</div>${renderLeaveSyncBadge(r)}`},
            {data:null, render:r=>`${r.employee_code||'-'} - ${r.employee_name||'-'}`},
            {data:'leave_type'},
            {data:null, render:r=>renderLeaveDateRange(r.start_date, r.end_date)},
            {data:'reason', render:v=>{
                const raw = (v || '').toString().trim();
                if (!raw) return '<span class="text-muted">-</span>';
                const short = raw.length > 60 ? (raw.slice(0, 60) + '…') : raw;
                const esc = (s)=>String(s).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('\"','&quot;');
                return `<span title="${esc(raw)}">${esc(short)}</span>`;
            }},
            {data:'total_days'},
            {data:null, render:r=>r.attachment_url ? `<a href="${r.attachment_url}" target="_blank">${r.attachment_name || 'Lihat'}</a>` : '-'},
            {data:'flow_name', render:v=>v||'-'},
            {data:'pending_level', render:v=>v||'-'},
            {data:'status', render:v=>statusBadge(v)},
	            {data:null, orderable:false, render:(d,t,r)=>renderLeaveActionButtons(r)}
	        ]
	    });
    function byId(id){ return (rows||[]).find(x => Number(x.id) === Number(id)); }
    function resetForm(){
        editId = null;
        $('#leaveModalTitle').text('Tambah Pengajuan Leave');
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
        const today = new Date().toISOString().slice(0,10);
        $('#startDate').val(today);
        $('#endDate').val(today);
        $('#reason').val('');
        renderLeaveTypeSelect('annual');
        $('#attachmentFile').val('');
    }
    function openEdit(row){
        editId = Number(row.id);
        $('#leaveModalTitle').text('Edit Pengajuan Leave');
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
        setSelectedKaryawanValue(row.karyawan_id || '');
        $('#flowId').val(row.approval_flow_id || '');
        setLeaveTypeValue(row.leave_type || 'annual');
        $('#startDate').val(row.start_date || '');
        $('#endDate').val(row.end_date || '');
        $('#reason').val(row.reason || '');
        $('#attachmentFile').val('');
        modal.show();
    }
    function renderCalendar(){
        const calendarEl = document.getElementById('leaveCalendar');
        if (!calendarEl || typeof FullCalendar === 'undefined' || !FullCalendar?.Calendar) {
            throw new Error('FullCalendar belum siap.');
        }
        const events = (rows||[]).map(r => {
            const endExclusive = r.end_date ? new Date(r.end_date + 'T00:00:00') : null;
            if (endExclusive) endExclusive.setDate(endExclusive.getDate() + 1);
            return {
                id: String(r.id),
                title: `${(r.leave_type || '').toUpperCase()} (${r.total_days || 0} hari)`,
                start: r.start_date,
                end: endExclusive ? endExclusive.toISOString().slice(0,10) : r.start_date,
                allDay: true,
                backgroundColor: statusColor(r.status),
                borderColor: statusColor(r.status),
                extendedProps: { row: r }
            };
        });
        if (!calendar) {
            calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'id',
                initialView: 'dayGridMonth',
                height: 'auto',
                firstDay: 1,
                buttonText: {
                    today: 'Hari ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    day: 'Hari',
                    list: 'Daftar'
                },
                noEventsContent: 'Belum ada data cuti.',
                dayMaxEventRows: 5,
                moreLinkContent: function(arg){
                    return `+${arg.num} lebih`;
                },
                moreLinkClick: function(info){
                    showDateLeaveDetails(dateToYmd(info.date));
                    return false;
                },
                events,
                eventClick: function(info){
                    const r = info.event.extendedProps.row;
                    const html = `<div class="text-start">
                        <div><b>No:</b> ${escapeHtml(r.request_no||'-')}</div>
                        <div><b>Karyawan:</b> ${escapeHtml((r.employee_code || '-') + ' - ' + karyawanName(r))}</div>
                        <div><b>Status:</b> ${statusBadge(r.status)}</div>
                        <div><b>Jenis:</b> ${escapeHtml(r.leave_type||'-')}</div>
                        <div><b>Periode:</b> ${escapeHtml(r.start_date||'-')} s/d ${escapeHtml(r.end_date||'-')}</div>
                        <div><b>Total:</b> ${escapeHtml(String(r.total_days||0))} hari</div>
                        <div><b>Alasan:</b> ${escapeHtml(r.reason||'-')}</div>
                        <hr>
                        <div class="d-flex flex-wrap gap-1">${renderLeaveActionButtons(r, 'calendar-leave-action')}</div>
                    </div>`;
                    Swal.fire({
                        title: 'Detail Leave',
                        html,
                        confirmButtonText: 'Close'
                    });
                }
            });
            calendar.render();
        } else {
            calendar.removeAllEvents();
            events.forEach(e => calendar.addEvent(e));
        }
    }

    function applyRefsPayload(resp){
        refs = resp.data || refs;
        renderKaryawanOptions('');
        renderLeaveTypeSelect($('#leaveType').val() || 'annual');
        renderAnnualSettings();
        $('#flowId').html((refs.flows||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`).join(''));
        $('#filterLeaveType').html(
            `<option value="">Semua jenis</option>` +
            (refs.leaveTypes || []).map(x => `<option value="${x.code}">${String(x.name || x.code || '').toUpperCase()}</option>`).join('')
        );
        $('#filterFlow').html(
            `<option value="">Semua flow</option>` +
            (refs.flows || []).map(x => `<option value="${x.id}">${x.code} - ${x.name}</option>`).join('')
        );
        // Import: default flow options (modal Import XLSX).
        const $importFlow = $('#leaveImportDefaultFlow');
        if ($importFlow.length) {
            $importFlow.html(
                `<option value="">- pilih flow default -</option>` +
                (refs.flows||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`).join('')
            );
        }
        initFlowSelect();
        if (selfMode && (refs.karyawans||[]).length === 1) {
            setSelectedKaryawanValue(String(refs.karyawans[0].id));
            $('#karyawanId').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);
        }
        refsLoaded = true;
        if (allRows.length) {
            applyListFilters();
        }
    }
    function safeRenderCalendar(showWarning = false){
        try {
            renderCalendar();
            return true;
        } catch (error) {
            console.error('Leave calendar render failed:', error);
            $('#tableViewWrapper').removeClass('d-none');
            $('#calendarViewWrapper').addClass('d-none');
            $('#btnViewTable').addClass('active');
            $('#btnViewCalendar').removeClass('active');
            if (showWarning) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Kalender leave belum bisa ditampilkan',
                    text: 'Data tetap dibuka dalam mode tabel agar operasional tidak terhenti.'
                });
            }
            return false;
        }
    }

    function loadRefs(force = false){
        if (refsLoaded && !force) {
            return $.Deferred().resolve({ data: refs }).promise();
        }
        if (refsPromise && !force) {
            return refsPromise;
        }
        refsPromise = $.getJSON('{{ route('leave_request.refs') }}').done(resp=>{
            applyRefsPayload(resp);
        }).fail(()=>{
            renderRefsFallback();
        }).always(()=>{
            refsPromise = null;
        });
        return refsPromise;
    }

    function loadData(){
        setLeaveTableLoading(true);
        return $.getJSON('{{ route('leave_request.data') }}')
            .done(resp=>{
                allRows = sortLeaveRows(resp.data || []);
                applyListFilters();
            })
            .always(() => {
                setLeaveTableLoading(false);
            });
    }

    $('#btnAdd').on('click', function(){
        const $btn = $(this);
        const openModal = () => {
            resetForm();
            modal.show();
        };
        if (refsLoaded) {
            openModal();
            return;
        }
        $btn.prop('disabled', true);
        loadRefs().done(openModal).fail(() => {
            Swal.fire('Error', 'Referensi leave gagal dimuat. Coba refresh halaman.', 'error');
        }).always(() => {
            $btn.prop('disabled', false);
        });
    });
    $('#btnSaveAnnualLeaveSettings').on('click', function(){
        const payload = {
            annual_eligibility_mode: $('#annualEligibilityMode').val() || 'hire_one_year',
            annual_reset_mode: $('#annualResetMode').val() || 'calendar_year',
            annual_carry_mode: $('#annualCarryMode').val() || 'reset_zero',
        };
        const $btn = $(this).prop('disabled', true).text('Menyimpan...');
        $.post('{{ route('leave_request.settings.update') }}', payload)
            .done((resp) => {
                refs.annualSettings = resp?.data || refs.annualSettings;
                renderAnnualSettings();
                refreshLeaveQuotaInfo();
                Swal.fire('Berhasil', resp?.message || 'Setting annual cuti berhasil disimpan.', 'success');
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan setting annual cuti.', 'error');
            })
            .always(() => {
                $btn.prop('disabled', false).text('Simpan Setting Annual Cuti');
            });
    });
    $('#btnSyncLeaveThirdParty').on('click', function(){
        if (!syncLeaveThirdPartyModal) return;
        syncLeaveThirdPartyModal.show();
    });
    $('#btnStartSyncLeaveThirdParty').on('click', function(){
        const payload = {
            date_from: $('#syncLeaveDateFrom').val() || '2025-12-26',
            date_to: $('#syncLeaveDateTo').val() || '{{ now()->toDateString() }}',
            update_existing: $('#syncLeaveUpdateExisting').is(':checked') ? 1 : 0,
            auto_submit: $('#syncLeaveAutoSubmit').is(':checked') ? 1 : 0,
        };
        const $btn = $(this).prop('disabled', true).text('Memulai...');
        $.post(syncLeaveThirdPartyStartUrl, payload)
            .done((resp) => {
                syncLeaveThirdPartyModal && syncLeaveThirdPartyModal.hide();
                if (!resp?.job_id) {
                    Swal.fire('Error', resp?.message || 'Job sync leave gagal dibuat.', 'error');
                    return;
                }
                pollThirdPartyLeave(resp.job_id, 'Apply Sync Leave 3rd Party', 'Sedang menyimpan/update data leave ke AHSP.', (status) => {
                    loadData();
                    const ok = String(status?.status || '').toLowerCase() === 'done';
                    const stats = status?.stats || {};
                    Swal.fire({
                        icon: ok ? 'success' : 'warning',
                        title: ok ? 'Sync Leave Selesai' : 'Sync Leave Gagal',
                        html: `
                            <div class="text-start small">
                                <div>Processed: <b>${Number(stats.processed || status?.processed || 0)}</b></div>
                                <div>Created: <b>${Number(stats.created || 0)}</b></div>
                                <div>Updated: <b>${Number(stats.updated || 0)}</b></div>
                                <div>Skip Finger: <b>${Number(stats.skipped_missing_finger || 0)}</b></div>
                                <div>Skip Match AHSP: <b>${Number(stats.skipped_missing_karyawan || 0)}</b></div>
                                <div>Skip Invalid Date: <b>${Number(stats.skipped_invalid_date || 0)}</b></div>
                                <div>Skip Existing: <b>${Number(stats.skipped_existing || 0)}</b></div>
                                <div>Skip Locked: <b>${Number(stats.skipped_locked || 0)}</b></div>
                                <div>Submitted: <b>${Number(stats.submitted || 0)}</b></div>
                                <div>Skip Auto Submit: <b>${Number(stats.skipped_auto_submit || 0)}</b></div>
                                <div>Failed Auto Submit: <b>${Number(stats.failed_auto_submit || 0)}</b></div>
                                <div>Failed: <b>${Number(stats.failed || 0)}</b></div>
                            </div>
                            ${status?.output ? `<pre class="text-start small mt-3 p-2 bg-light border rounded" style="max-height:220px;overflow:auto;">${escapeHtml(status.output)}</pre>` : ''}
                        `
                    });
                });
            })
            .fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Start sync leave gagal.', 'error');
            })
            .always(() => $btn.prop('disabled', false).text('Mulai Sync'));
    });
    $('#filterDateFrom, #filterDateTo, #filterLeaveType, #filterStatus, #filterFlow, #filterSource, #filterSyncStatus, #filterNeedsAction, #filterPayable').on('change', applyListFilters);
    $('#filterEmployee, #filterKeyword').on('input', applyListFilters);
    $('#btnResetLeaveFilters').on('click', function(){
        $('#filterDateFrom').val('');
        $('#filterDateTo').val('');
        $('#filterLeaveType').val('');
        $('#filterStatus').val('');
        $('#filterFlow').val('');
        $('#filterSource').val('');
        $('#filterEmployee').val('');
        $('#filterKeyword').val('');
        $('#filterSyncStatus').val('');
        $('#filterNeedsAction').val('');
        $('#filterPayable').val('');
        applyListFilters();
    });
    $('.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());
    });
    $('#karyawanTableBody').on('click', '.karyawan-table-row', function(){
        if ($('#karyawanId').prop('disabled')) return;
        const id = String($(this).data('karyawan-id') || '').trim();
        if (!id) return;
        setSelectedKaryawanValue(id);
        renderKaryawanOptions($('#karyawanSearch').val());
    });
    $('#startDate').on('change', function(){
        renderLeaveTypeSelect($('#leaveType').val() || 'annual');
        refreshLeaveQuotaInfo();
    });
    $('#endDate').on('change', function(){
        refreshLeaveQuotaInfo();
    });

    // ===== Import XLSX Leave (admin/ops) =====
    let importModal = null;
    let leaveImportPreviewId = null;

    function resetLeaveImportUi(){
        leaveImportPreviewId = null;
        $('#leaveImportFile').val('');
        $('#btnLeaveImportConfirm').prop('disabled', true);
        $('#btnLeaveImportErrorReport').addClass('d-none').attr('href', '#');
        $('#leaveImportSummary').hide();
        $('#leaveImportPreviewWrapper').hide();
        $('#leaveImportPreviewBody').html('');
        $('#sumTotal').text('0');
        $('#sumValid').text('0');
        $('#sumDup').text('0');
        $('#sumInvalid').text('0');
    }

    function statusBadge(status){
        const s = (status || '').toString().toLowerCase();
        if (s === 'new') return '<span class="badge bg-success">new</span>';
        if (s === 'duplicate') return '<span class="badge bg-secondary">duplicate</span>';
        return '<span class="badge bg-danger">invalid</span>';
    }

    if (!selfMode && document.getElementById('importLeaveModal')) {
        importModal = new bootstrap.Modal(document.getElementById('importLeaveModal'));

        $('#btnImportLeave').on('click', function(){
            const $btn = $(this);
            const openImportModal = () => {
                resetLeaveImportUi();
                importModal.show();
            };
            if (refsLoaded) {
                openImportModal();
                return;
            }
            $btn.prop('disabled', true);
            loadRefs().done(openImportModal).fail(() => {
                Swal.fire('Error', 'Referensi leave gagal dimuat. Coba refresh halaman.', 'error');
            }).always(() => {
                $btn.prop('disabled', false);
            });
        });

        $('#btnLeaveImportPreview').on('click', function(){
            const file = $('#leaveImportFile')[0]?.files?.[0];
            if (!file) {
                Swal.fire('Warning', 'Pilih file XLSX terlebih dahulu.', 'warning');
                return;
            }

            const fd = new FormData();
            fd.append('file', file);
            const defaultFlowId = $('#leaveImportDefaultFlow').val();
            if (defaultFlowId) fd.append('default_approval_flow_id', defaultFlowId);

            $('#btnLeaveImportPreview').prop('disabled', true);
            $('#btnLeaveImportConfirm').prop('disabled', true);
            $('#btnLeaveImportErrorReport').addClass('d-none').attr('href', '#');

            $.ajax({
                url: '{{ route('leave_request.import.preview') }}',
                method: 'POST',
                data: fd,
                processData: false,
                contentType: false,
            }).done(resp => {
                const data = resp?.data || {};
                leaveImportPreviewId = resp?.preview_id || null;

                $('#sumTotal').text(String(data.total ?? 0));
                $('#sumValid').text(String(data.valid ?? 0));
                $('#sumDup').text(String(data.duplicates ?? 0));
                $('#sumInvalid').text(String(data.invalid ?? 0));
                $('#leaveImportSummary').show();

                const rowsPreview = data.rows || [];
                $('#leaveImportPreviewBody').html(rowsPreview.map(r => {
                    const flowLabel = (r.approval_flow_code || '') !== '' ? r.approval_flow_code : (r.approval_flow_id ? `#${r.approval_flow_id}` : '');
                    const msg = (r.message || '').toString().replace(/</g, '&lt;');
                    return `
                        <tr>
                            <td>${r.row ?? ''}</td>
                            <td>${(r.employee_code||'') !== '' ? r.employee_code : '-'}</td>
                            <td>${(r.leave_type||'') !== '' ? r.leave_type : '-'}</td>
                            <td>${r.start_date || '-'}</td>
                            <td>${r.end_date || '-'}</td>
                            <td>${flowLabel || '-'}</td>
                            <td>${statusBadge(r.status)}</td>
                            <td>${msg}</td>
                        </tr>
                    `;
                }).join(''));
                $('#leaveImportPreviewWrapper').show();

                const canConfirm = !!leaveImportPreviewId && Number(data.valid || 0) > 0;
                $('#btnLeaveImportConfirm').prop('disabled', !canConfirm);
            }).fail(xhr => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Preview import gagal.', 'error');
            }).always(() => {
                $('#btnLeaveImportPreview').prop('disabled', false);
            });
        });

        $('#btnLeaveImportConfirm').on('click', function(){
            if (!leaveImportPreviewId) {
                Swal.fire('Warning', 'Preview belum ada atau sudah kedaluwarsa. Silakan Preview ulang.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Simpan hasil import?',
                text: 'Baris status new akan dibuat sebagai Draft. Duplikat akan di-skip.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, simpan',
            }).then(res => {
                if (!res.isConfirmed) return;
                $('#btnLeaveImportConfirm').prop('disabled', true);
                $.post('{{ route('leave_request.import.confirm') }}', { preview_id: leaveImportPreviewId })
                    .done(resp => {
                        const d = resp?.data || {};
                        const errUrl = resp?.error_report_url || null;
                        if (errUrl) {
                            $('#btnLeaveImportErrorReport').removeClass('d-none').attr('href', errUrl);
                        }
                        loadData();
                        Swal.fire('Success', `Import tersimpan. Created: ${d.created||0}, Skipped: ${d.skipped||0}, Invalid: ${d.invalid||0}`, 'success');
                    })
                    .fail(xhr => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Import gagal.', 'error');
                    })
                    .always(() => {
                        $('#btnLeaveImportConfirm').prop('disabled', false);
                    });
            });
        });
    }

    $('#leaveType').on('change', refreshLeaveTypeHelp);

    $('#leaveForm').on('submit', function(e){
        e.preventDefault();
        const selectedRule = leaveTypeRule($('#leaveType').val());
        const fd = new FormData();
        fd.append('karyawan_id', $('#karyawanId').val() || '');
        fd.append('approval_flow_id', $('#flowId').val() || '');
        fd.append('leave_type', $('#leaveType').val() || '');
        fd.append('start_date', $('#startDate').val() || '');
        fd.append('end_date', $('#endDate').val() || '');
        fd.append('reason', $('#reason').val() || '');
        const file = $('#attachmentFile')[0]?.files?.[0];
        if (file) fd.append('attachment', file);

        const existingAttachment = editId ? (byId(editId)?.attachment_url || byId(editId)?.attachment_name || '') : '';
        if (selectedRule?.requires_attachment && !file && !existingAttachment) {
            Swal.fire('Warning', `${selectedRule.name || 'Jenis leave ini'} wajib upload lampiran.`, 'warning');
            return;
        }

        if (editId) {
            fd.append('_method', 'PUT');
            $.ajax({
                url: `{{ url('/leave-request') }}/${editId}`,
                type: 'POST',
                data: fd,
                processData: false,
                contentType: false,
            })
                .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Updated', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        } else {
            $.ajax({
                url: '{{ route('leave_request.store') }}',
                type: 'POST',
                data: fd,
                processData: false,
                contentType: false,
            })
                .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
        }
    });

    function optionsKaryawan() {
        return (refs.karyawans || []).map(x=>`<option value="${x.id}">${x.employee_code} - ${x.full_name}</option>`).join('');
    }
    function optionsFlow() {
        return (refs.flows || []).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`).join('');
    }
    function bulkRowHtml(idx) {
        const today = new Date().toISOString().slice(0,10);
        return `<tr>
            <td class="bulk-no">${idx}</td>
            <td><select class="form-select form-select-sm bulk-karyawan">${optionsKaryawan()}</select></td>
            <td><select class="form-select form-select-sm bulk-flow">${optionsFlow()}</select></td>
            <td>
                <select class="form-select form-select-sm bulk-type">${optionsLeaveTypes('annual')}</select>
            </td>
            <td><input type="date" class="form-control form-control-sm bulk-start" value="${today}" /></td>
            <td><input type="date" class="form-control form-control-sm bulk-end" value="${today}" /></td>
            <td><input type="text" class="form-control form-control-sm bulk-reason" /></td>
            <td><button type="button" class="btn btn-xs btn-outline-danger btn-bulk-del">Hapus</button></td>
        </tr>`;
    }
    function renumberBulkRows() {
        $('#bulkTable tbody tr').each(function(i){ $(this).find('.bulk-no').text(i+1); });
    }
    function addBulkRow() {
        const idx = $('#bulkTable tbody tr').length + 1;
        const $row = $(bulkRowHtml(idx));
        $('#bulkTable tbody').append($row);
        initBulkKaryawanSelect($row);
    }

    $('#btnBulkAdd').on('click', function () {
        const $btn = $(this);
        const openBulkModal = () => {
            $('#bulkTable tbody').html('');
            addBulkRow();
            addBulkRow();
            initBulkKaryawanSelect();
            bulkModal.show();
        };
        if (refsLoaded) {
            openBulkModal();
            return;
        }
        $btn.prop('disabled', true);
        loadRefs().done(openBulkModal).fail(() => {
            Swal.fire('Error', 'Referensi bulk leave gagal dimuat. Coba refresh halaman.', 'error');
        }).always(() => {
            $btn.prop('disabled', false);
        });
    });
    $('#btnBulkAddRow').on('click', addBulkRow);
    $('#bulkTable').on('click', '.btn-bulk-del', function () {
        $(this).closest('tr').remove();
        renumberBulkRows();
    });
    $('#btnSaveBulk').on('click', function () {
        const items = [];
        $('#bulkTable tbody tr').each(function () {
            items.push({
                karyawan_id: $(this).find('.bulk-karyawan').val(),
                approval_flow_id: $(this).find('.bulk-flow').val(),
                leave_type: $(this).find('.bulk-type').val(),
                start_date: $(this).find('.bulk-start').val(),
                end_date: $(this).find('.bulk-end').val(),
                reason: $(this).find('.bulk-reason').val(),
            });
        });
        if (!items.length) {
            Swal.fire('Warning', 'Baris bulk masih kosong.', 'warning');
            return;
        }
        $.ajax({
            url: '{{ route('leave_request.bulk_store') }}',
            type: 'POST',
            data: JSON.stringify({ items }),
            contentType: 'application/json',
        }).done(resp => {
            bulkModal.hide();
            loadData();
            Swal.fire('Success', resp.message || 'Bulk saved', 'success');
        }).fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk save failed', 'error'));
    });

    function submitLeaveAction(id){
        $.post(`{{ url('/leave-request') }}/${id}/submit`)
            .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Submitted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Submit failed', 'error'));
    }
    function uploadLeaveAttachmentAction(id){
        if(!id) return;
        Swal.fire({
            title: 'Upload Lampiran',
            text: 'Lampiran boleh menyusul. Untuk sick leave, lampiran wajib sebelum approve.',
            input: 'file',
            inputAttributes: { accept: 'image/*' },
            showCancelButton: true,
            confirmButtonText: 'Upload',
            preConfirm: (file) => {
                if (!file) {
                    Swal.showValidationMessage('Pilih file gambar terlebih dahulu.');
                    return false;
                }
                return file;
            }
        }).then((res) => {
            if (!res.isConfirmed) return;
            const file = res.value;
            const fd = new FormData();
            fd.append('attachment', file);
            $.ajax({
                url: `{{ url('/leave-request') }}/${id}/upload-attachment`,
                method: 'POST',
                data: fd,
                processData: false,
                contentType: false,
            }).done((resp) => {
                loadData();
                Swal.fire('Success', resp?.message || 'Lampiran diupload', 'success');
            }).fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Upload failed', 'error');
            });
        });
    }
    function editLeaveAction(id){
        const row = byId(id);
        if (row) openEdit(row);
    }
    function deleteLeaveAction(id){
        Swal.fire({title:'Hapus pengajuan ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            $.ajax({url:`{{ url('/leave-request') }}/${id}`, method:'DELETE'})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
        });
    }
    function approveLeaveAction(id){
        Swal.fire({title:'Approve step ini?', input:'text', inputPlaceholder:'Catatan approve (opsional)', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/leave-request') }}/${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'));
        });
    }
    function unapproveLeaveAction(id){
        Swal.fire({title:'Batalkan approve?', text:'Dokumen akan kembali ke draft.', icon:'warning', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/leave-request') }}/${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'));
        });
    }
    function rejectLeaveAction(id){
        Swal.fire({title:'Reject step ini?', input:'text', inputLabel:'Alasan reject', inputValidator:(v)=>!v?'Alasan wajib diisi':null, showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/leave-request') }}/${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'));
        });
    }
    function cancelSubmitLeaveAction(id){
        if(!id) return;
        Swal.fire({
            title:'Batalkan submit?',
            text:'Dokumen akan kembali ke draft dan approval chain akan dihapus. Setelah itu bisa Submit ulang.',
            icon:'warning',
            showCancelButton:true,
            confirmButtonText:'Ya, Batalkan'
        }).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/leave-request') }}/${id}/cancel-submit`, { notes: '' })
                .done(resp=>{ loadData(); Swal.fire('Success', resp?.message || 'Berhasil dibatalkan', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Cancel submit failed', 'error'));
        });
    }
    function cancelRejectLeaveAction(id){
        if(!id) return;
        Swal.fire({
            title:'Batalkan reject?',
            text:'Dokumen rejected akan kembali ke draft dan bisa diajukan ulang.',
            icon:'warning',
            showCancelButton:true,
            confirmButtonText:'Ya, Batalkan Reject'
        }).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/leave-request') }}/${id}/cancel-reject`, { notes: '' })
                .done(resp=>{ loadData(); Swal.fire('Success', resp?.message || 'Reject berhasil dibatalkan', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Cancel reject failed', 'error'));
        });
    }
    function handleLeaveAction(action, id){
        id = Number(id || 0);
        if (!id) return;
        if (action === 'edit') return editLeaveAction(id);
        if (action === 'delete') return deleteLeaveAction(id);
        if (action === 'submit') return submitLeaveAction(id);
        if (action === 'upload') return uploadLeaveAttachmentAction(id);
        if (action === 'approve') return approveLeaveAction(id);
        if (action === 'unapprove') return unapproveLeaveAction(id);
        if (action === 'reject') return rejectLeaveAction(id);
        if (action === 'cancel-submit') return cancelSubmitLeaveAction(id);
        if (action === 'cancel-reject') return cancelRejectLeaveAction(id);
    }

    $(document).on('click', '.leave-action, .calendar-leave-action', function(e){
        e.preventDefault();
        e.stopPropagation();
        if ($(this).hasClass('calendar-leave-action')) {
            Swal.close();
        }
        handleLeaveAction($(this).data('action'), $(this).data('id'));
    });
    $(document).on('input', '#leaveDateSearch', function(){
        if (!leaveDateDetailState) return;
        leaveDateDetailState.query = $(this).val() || '';
        leaveDateDetailState.page = 1;
        renderLeaveDateDetailModal();
    });
    $(document).on('change', '#leaveDateTypeFilter, #leaveDateStatusFilter, #leaveDatePageSize', function(){
        if (!leaveDateDetailState) return;
        leaveDateDetailState.type = $('#leaveDateTypeFilter').val() || '';
        leaveDateDetailState.status = $('#leaveDateStatusFilter').val() || '';
        leaveDateDetailState.pageSize = Number($('#leaveDatePageSize').val() || 10);
        leaveDateDetailState.page = 1;
        renderLeaveDateDetailModal();
    });
    $(document).on('click', '#leaveDateResetFilter', function(){
        if (!leaveDateDetailState) return;
        leaveDateDetailState.query = '';
        leaveDateDetailState.type = '';
        leaveDateDetailState.status = '';
        leaveDateDetailState.pageSize = 10;
        leaveDateDetailState.page = 1;
        $('#leaveDateSearch').val('');
        $('#leaveDateTypeFilter').val('');
        $('#leaveDateStatusFilter').val('');
        $('#leaveDatePageSize').val('10');
        renderLeaveDateDetailModal();
    });
    $(document).on('click', '.leave-date-sort', function(){
        if (!leaveDateDetailState) return;
        const key = String($(this).data('sort') || '');
        if (!key) return;
        if (leaveDateDetailState.sortKey === key) {
            leaveDateDetailState.sortDir = leaveDateDetailState.sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            leaveDateDetailState.sortKey = key;
            leaveDateDetailState.sortDir = 'asc';
        }
        leaveDateDetailState.page = 1;
        renderLeaveDateDetailModal();
    });
    $(document).on('change', '.leave-date-check', function(){
        if (!leaveDateDetailState) return;
        const id = Number($(this).val() || 0);
        if (!id) return;
        if ($(this).is(':checked')) {
            leaveDateDetailState.selected.add(id);
        } else {
            leaveDateDetailState.selected.delete(id);
        }
        renderLeaveDateDetailModal();
    });
    $(document).on('change', '#leaveDateCheckAll', function(){
        if (!leaveDateDetailState) return;
        const st = leaveDateDetailState;
        const start = (st.page - 1) * st.pageSize;
        const pageIds = (st.filtered || []).slice(start, start + st.pageSize).map(r => Number(r.id || 0)).filter(Boolean);
        pageIds.forEach(id => $(this).is(':checked') ? st.selected.add(id) : st.selected.delete(id));
        renderLeaveDateDetailModal();
    });
    $(document).on('click', '#leaveDatePrev, #leaveDateNext', function(){
        if (!leaveDateDetailState) return;
        leaveDateDetailState.page += this.id === 'leaveDateNext' ? 1 : -1;
        renderLeaveDateDetailModal();
    });
    $(document).on('click', '.leave-date-bulk', function(){
        bulkDateLeaveAction($(this).data('action'));
    });

    $('#checkAllRows').on('change', function(){
        $('.row-check').prop('checked', $(this).is(':checked'));
        leaveLastCheckedIndex = null;
    });
    $('#leaveTable').on('click', '.row-check', function(e){
        const checks = getLeaveVisibleChecks();
        const currentIndex = checks.indexOf(this);
        if ((e.shiftKey || (e.ctrlKey && e.shiftKey)) && leaveLastCheckedIndex !== null) {
            syncLeaveCheckRange(this, $(this).is(':checked'));
        } else {
            leaveLastCheckedIndex = currentIndex;
        }
    });
    $('#leaveTable').on('change', '.row-check', refreshHeaderCheck);
    $('#btnViewTable').on('click', function(){ setView('table'); });
    $('#btnViewCalendar').on('click', function(){ setView('calendar'); });

    $('#btnBulkDelete').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        Swal.fire({title:'Hapus data leave terpilih?', text:`Total: ${ids.length} data`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            $.post('{{ route('leave_request.bulk_delete') }}', {ids})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk hapus selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk delete failed', 'error'));
        });
    });
    $('#btnBulkSubmit').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        $.post('{{ route('leave_request.bulk_submit') }}', {ids})
            .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk submit selesai'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk submit failed', 'error'));
    });
    $('#btnBulkCancelSubmit').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        Swal.fire({title:'Bulk batalkan submit?', text:'Dokumen submitted/in_review terpilih akan kembali ke draft (approval chain dihapus).', icon:'warning', showCancelButton:true, confirmButtonText:'Batalkan Submit Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post('{{ route('leave_request.bulk_cancel_submit') }}', {ids})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk batalkan submit selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk cancel submit failed', 'error'));
        });
    });
    $('#btnBulkApprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        Swal.fire({title:'Catatan Approve (opsional)', input:'text', showCancelButton:true, confirmButtonText:'Approve Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post('{{ route('leave_request.bulk_approve') }}', {ids, notes: res.value || ''})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk approve selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk approve failed', 'error'));
        });
    });

    $('#btnBulkUnapprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave 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;
            $.post('{{ route('leave_request.bulk_unapprove') }}', {ids})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk batal approve selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk batal approve failed', 'error'));
        });
    });
    $('#btnBulkReject').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave 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;
            $.post('{{ route('leave_request.bulk_reject') }}', {ids, notes: res.value})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk reject selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk reject failed', 'error'));
        });
    });
    $('#btnBulkUpdate').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data leave terlebih dahulu.', 'warning');
        const flowOptions = (refs.flows || []).map(x => `<option value=\"${x.id}\">${x.code} - ${x.name}</option>`).join('');
        Swal.fire({
            title: 'Bulk Edit Leave',
            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">Jenis Leave (opsional)</label>
                    <select id="bulkType" class="form-select mb-2">
                        <option value="">- tidak diubah -</option>
                        ${optionsLeaveTypes()}
                    </select>
                    <div class="row g-2">
                        <div class="col"><label class="form-label">Start Date</label><input id="bulkStartDate" type="date" class="form-control"></div>
                        <div class="col"><label class="form-label">End Date</label><input id="bulkEndDate" type="date" class="form-control"></div>
                    </div>
                    <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 vType = $('#bulkType').val();
                const vStart = $('#bulkStartDate').val();
                const vEnd = $('#bulkEndDate').val();
                const vReason = $('#bulkReason').val();
                if (vFlow) payload.approval_flow_id = vFlow;
                if (vType) payload.leave_type = vType;
                if (vStart) payload.start_date = vStart;
                if (vEnd) payload.end_date = vEnd;
                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');
            }
            $.post('{{ route('leave_request.bulk_update') }}', payload)
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk update selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk update failed', 'error'));
        });
    });

    renderRefsFallback();
    setView('table');
    loadData().fail(() => {
        Swal.fire('Error', 'Data leave gagal dimuat. Coba refresh halaman.', 'error');
    });
    loadRefs();
});
</script>
@endpush