@extends('layouts.adminlte')

@section('title', 'PENGGAJIAN DINAMIS')
@section('page_title', 'PENGGAJIAN DINAMIS')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/buttons.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .payroll-identity-cell {
            display: flex;
            flex-direction: column;
            gap: .18rem;
            min-width: 0;
            line-height: 1.25;
        }
        .payroll-identity-main {
            font-weight: 700;
            color: #0f172a;
        }
        .payroll-identity-sub {
            font-size: .74rem;
            color: #6b7280;
        }
        .payroll-identity-role {
            font-size: .78rem;
            color: #374151;
            line-height: 1.3;
            white-space: normal;
            overflow-wrap: anywhere;
        }
        .payroll-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            line-height: 1.35;
        }
        .payroll-wrap-cell {
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.35;
        }
        .payroll-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            align-items: center;
            margin-top: .65rem;
        }
        .payroll-toolbar .btn {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            white-space: nowrap;
        }
        .payroll-action-cell {
            display: flex;
            flex-wrap: wrap;
            gap: .25rem;
            align-items: flex-start;
            min-width: 190px;
            max-width: 260px;
        }
        .payroll-action-cell .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .2rem;
            min-height: 28px;
            white-space: nowrap;
        }
        .payroll-guide .badge {
            font-weight: 700;
        }
        .payroll-filter-card .card-header {
            gap: .75rem;
        }
        .payroll-quick-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: .35rem;
        }
        .payroll-quick-actions .btn,
        .payroll-toolbar .btn {
            min-height: 30px;
        }
        .payroll-filter-grid {
            display: grid;
            grid-template-columns: minmax(280px, 1.5fr) minmax(190px, .7fr) minmax(190px, .75fr) minmax(190px, .75fr) auto;
            gap: .75rem;
            align-items: end;
        }
        .payroll-filter-flags {
            min-height: 38px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: .35rem;
        }
        .payroll-primary-action {
            min-width: 112px;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
        }
        .select2-container--bootstrap-5 .select2-dropdown {
            z-index: 2050;
        }
        .select2-results__options {
            max-height: 220px !important;
        }
        @media (max-width: 1199.98px) {
            .payroll-filter-grid {
                grid-template-columns: repeat(2, minmax(220px, 1fr));
            }
            .payroll-filter-action {
                grid-column: 1 / -1;
                text-align: right;
            }
        }
        @media (max-width: 767.98px) {
            .payroll-filter-grid {
                grid-template-columns: 1fr;
            }
            .payroll-filter-action,
            .payroll-primary-action {
                width: 100%;
            }
            .payroll-quick-actions {
                justify-content: flex-start;
            }
        }
        .payroll-bpjs-cell {
            display: flex;
            flex-direction: column;
            gap: .18rem;
            line-height: 1.25;
        }
        .payroll-bpjs-meta {
            font-size: .74rem;
            color: #6c757d;
        }
        .payroll-bpjs-badge {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            padding: .15rem .5rem;
            border-radius: 999px;
            font-size: .7rem;
            font-weight: 700;
            line-height: 1.1;
            width: fit-content;
        }
        .payroll-bpjs-badge.is-live {
            background: rgba(25, 135, 84, .12);
            color: #146c43;
        }
        .payroll-bpjs-badge.is-snapshot {
            background: rgba(13, 110, 253, .1);
            color: #0a58ca;
        }
        .payroll-loading-card {
            display: none;
            border: 1px solid #dbe7f3;
            border-radius: .85rem;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: .9rem 1rem;
            margin-bottom: 1rem;
        }
        .payroll-loading-card.is-active {
            display: block;
        }
        .payroll-loading-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .5rem;
        }
        .payroll-loading-title {
            font-weight: 700;
            color: #0f172a;
        }
        .payroll-loading-meta {
            font-size: .8rem;
            color: #64748b;
        }
        .payroll-loading-percent {
            font-size: .9rem;
            font-weight: 800;
            color: #0a58ca;
            min-width: 56px;
            text-align: right;
        }
        .payroll-loading-card .progress {
            height: .7rem;
            background: #e9f1fb;
        }
        .payroll-loading-card .progress-bar {
            transition: width .35s ease;
        }
        .payroll-grid-wrap {
            max-height: calc(100vh - 360px);
            overflow: auto;
            border: 1px solid #dee2e6;
            border-radius: .55rem;
            background: #fff;
        }
        #payrollTable {
            width: 2787px !important;
            min-width: 2787px;
            max-width: none !important;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
        }
        #payrollTable th,
        #payrollTable td {
            white-space: nowrap;
            background: #fff;
            vertical-align: top;
            border-right: 1px solid #d9dee6;
            border-bottom: 1px solid #d9dee6;
            box-sizing: border-box;
            padding: .72rem .65rem;
        }
        #payrollTable thead th {
            position: sticky;
            top: 0;
            z-index: 25;
            background: #f8fafc;
            vertical-align: middle;
            text-align: center;
            line-height: 1.25;
            box-shadow: inset 0 -1px 0 #d9dee6;
        }
        #payrollTable tbody tr:nth-of-type(odd) > td {
            background: #fafbfd;
        }
        #payrollTable tbody tr:hover > td {
            background: #f3f8ff;
        }
        #payrollTable.is-pph21-disabled th:nth-child(12),
        #payrollTable.is-pph21-disabled td:nth-child(12),
        #payrollTable.is-pph21-disabled tbody tr:nth-of-type(odd) > td:nth-child(12),
        #payrollTable.is-pph21-disabled tbody tr:hover > td:nth-child(12) {
            background-color: #e5e7eb !important;
            background-image: repeating-linear-gradient(
                135deg,
                rgba(107, 114, 128, .14) 0,
                rgba(107, 114, 128, .14) 6px,
                rgba(255, 255, 255, .28) 6px,
                rgba(255, 255, 255, .28) 12px
            ) !important;
            color: #6b7280;
        }
        .payroll-pph21-muted {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: .18rem;
            color: #6b7280;
        }
        .payroll-pph21-badge {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            width: fit-content;
            padding: .14rem .45rem;
            border-radius: 999px;
            background: #6b7280;
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            line-height: 1.1;
        }
        .payroll-attendance-state {
            display: inline-flex;
            flex-direction: column;
            gap: .1rem;
            min-width: 100%;
            padding: .36rem .48rem;
            border-radius: .35rem;
            border: 1px solid transparent;
            line-height: 1.28;
        }
        .payroll-attendance-state.is-full {
            background: #dcfce7;
            border-color: #86efac;
            color: #14532d;
        }
        .payroll-attendance-state.is-partial {
            background: #fef3c7;
            border-color: #facc15;
            color: #713f12;
        }
        .payroll-attendance-state.is-empty {
            background: #fee2e2;
            border-color: #fca5a5;
            color: #7f1d1d;
        }
        .payroll-attendance-state small {
            color: inherit !important;
            opacity: .82;
        }
        #payrollTable th:first-child,
        #payrollTable td:first-child {
            border-left: 1px solid #d9dee6;
        }
        #payrollTable th:nth-child(1),
        #payrollTable td:nth-child(1) {
            position: sticky;
            left: 0;
            min-width: 42px;
            width: 42px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
        }
        #payrollTable th:nth-child(2),
        #payrollTable td:nth-child(2) {
            position: sticky;
            left: 42px;
            min-width: 170px;
            width: 170px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
        }
        #payrollTable th:nth-child(3),
        #payrollTable td:nth-child(3) {
            position: sticky;
            left: 212px;
            min-width: 270px;
            width: 270px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
            white-space: normal;
        }
        #payrollTable thead th:nth-child(-n+3),
        #payrollTable thead th:last-child {
            z-index: 30;
        }
        #payrollTable th:last-child,
        #payrollTable td:last-child {
            position: sticky;
            right: 0;
            z-index: 24;
            min-width: 240px;
            width: 240px;
            background: #fff;
            box-shadow: -1px 0 0 #dee2e6;
        }
        #payrollTable th:nth-child(4),
        #payrollTable td:nth-child(4) { min-width: 105px; width: 105px; white-space: normal; }
        #payrollTable th:nth-child(5),
        #payrollTable td:nth-child(5) { min-width: 220px; width: 220px; white-space: normal; }
        #payrollTable th:nth-child(6),
        #payrollTable td:nth-child(6) { min-width: 105px; width: 105px; }
        #payrollTable th:nth-child(7),
        #payrollTable td:nth-child(7) { min-width: 105px; width: 105px; }
        #payrollTable th:nth-child(8),
        #payrollTable td:nth-child(8) { min-width: 135px; width: 135px; white-space: normal; }
        #payrollTable th:nth-child(9),
        #payrollTable td:nth-child(9) { min-width: 145px; width: 145px; white-space: normal; }
        #payrollTable th:nth-child(10),
        #payrollTable td:nth-child(10) { min-width: 150px; width: 150px; white-space: normal; }
        #payrollTable th:nth-child(11),
        #payrollTable td:nth-child(11) { min-width: 130px; width: 130px; text-align: right; }
        #payrollTable th:nth-child(12),
        #payrollTable td:nth-child(12) { min-width: 125px; width: 125px; text-align: right; }
        #payrollTable th:nth-child(13),
        #payrollTable td:nth-child(13) { min-width: 190px; width: 190px; white-space: normal; }
        #payrollTable th:nth-child(14),
        #payrollTable td:nth-child(14) { min-width: 120px; width: 120px; text-align: right; }
        #payrollTable th:nth-child(15),
        #payrollTable td:nth-child(15) { min-width: 135px; width: 135px; text-align: right; }
        #payrollTable th:nth-child(16),
        #payrollTable td:nth-child(16) { min-width: 150px; width: 150px; white-space: normal; }
        #payrollTable th:nth-child(17),
        #payrollTable td:nth-child(17) { min-width: 120px; width: 120px; white-space: normal; }
        #payrollTable th:nth-child(18),
        #payrollTable td:nth-child(18) { min-width: 130px; width: 130px; white-space: normal; }
        #payrollTable th:nth-child(19),
        #payrollTable td:nth-child(19) { min-width: 240px; width: 240px; }
        #payrollTableExternalButtons .dt-buttons,
        #payrollTableExternalButtons .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }
        #payrollTableExternalButtons .dt-buttons .btn,
        #payrollTableExternalButtons .dt-button {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            min-width: 72px;
            min-height: 30px;
            color: #fff !important;
            background-color: #6c757d !important;
            border-color: #6c757d !important;
        }
        .payroll-table-toolbar,
        .payroll-table-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            flex-wrap: wrap;
            padding: .75rem;
            border: 1px solid #dbe3ef;
            background: #f8fbff;
        }
        .payroll-table-toolbar {
            border-radius: .75rem .75rem 0 0;
            border-bottom: 0;
        }
        .payroll-table-footer {
            border-radius: 0 0 .75rem .75rem;
            border-top: 0;
        }
        .payroll-table-search {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-left: auto;
        }
        .payroll-table-search input {
            min-width: 220px;
        }
        .payroll-table-info {
            color: #475569;
            font-size: .82rem;
            font-weight: 600;
        }
        .payroll-table-pager {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
        }
        .payroll-table-page-badge {
            min-width: 42px;
            border-radius: .55rem;
            background: #0d6efd;
            color: #fff;
            text-align: center;
            padding: .42rem .65rem;
            font-weight: 800;
        }
        @media (max-width: 767.98px) {
            .payroll-table-search,
            .payroll-table-search input,
            #payrollTableExternalButtons {
                width: 100%;
            }
            .payroll-table-toolbar,
            .payroll-table-footer {
                align-items: stretch;
            }
        }
    </style>
@endpush

@section('content')
    <div class="card mb-3 payroll-filter-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Filter Jadwal Penggajian</h3>
            <div class="payroll-quick-actions">
                <a href="{{ route('penggajian.slip_profiles.index') }}" target="_blank" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-id-card me-1"></i>Profil Cetak Slip
                </a>
                <button class="btn btn-outline-success btn-sm" id="btnReportTemplate">
                    <i class="fas fa-file-alt me-1"></i>Template Report
                </button>
                <button class="btn btn-outline-warning btn-sm" id="btnReportThrProgresif">
                    <i class="fas fa-coins me-1"></i>Report THR Progresif
                </button>
                <a href="{{ route('penggajian.report_bulanan') }}" target="_blank" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-chart-pie me-1"></i>Report Bulanan
                </a>
                <a href="{{ route('penggajian.thr.index') }}" class="btn btn-outline-info btn-sm">
                    <i class="fas fa-hand-holding-usd me-1"></i>Transaksi THR
                </a>
                <a href="{{ route('insentif_dinas.index') }}" class="btn btn-outline-info btn-sm">
                    <i class="fas fa-briefcase me-1"></i>Insentif Dinas
                </a>
                <a href="{{ route('guides.index', ['section' => 'penggajian-dinamis']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>Guide
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="payroll-filter-grid">
                <div>
                    <label class="form-label">Profil Bulan</label>
                    <select id="profilBulanId" class="form-select"></select>
                </div>
                <div>
                    <label class="form-label">Tanggal Cek Jatuh Tempo</label>
                    <input type="date" id="payDate" class="form-control" />
                </div>
                <div>
                    <label class="form-label">Mode</label>
                    <div class="payroll-filter-flags">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="monthlyView" checked />
                            <label class="form-check-label" for="monthlyView">1 Bulan Profil</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="onlyDue" />
                            <label class="form-check-label" for="onlyDue">Hanya Jatuh Tempo</label>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="form-label">Filter Siklus</label>
                    <select id="cycleFilter" class="form-select">
                        <option value="all">Semua Siklus</option>
                        <option value="without_weekly">Tanpa Mingguan</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Status Bayar</label>
                    <select id="paidFilter" class="form-select">
                        <option value="all">Semua</option>
                        <option value="paid">Terbayar</option>
                        <option value="unpaid">Belum Terbayar</option>
                    </select>
                </div>
                <div class="payroll-filter-action text-end">
                    <button class="btn btn-primary payroll-primary-action" id="btnLoad"><i class="fas fa-filter"></i>Tampilkan</button>
                </div>
            </div>
            <div class="payroll-toolbar">
	                <button class="btn btn-outline-primary btn-sm" id="btnBulkCycle"><i class="fas fa-layer-group me-1"></i>Set Siklus Bulk</button>
	                <button class="btn btn-outline-success btn-sm" id="btnBulkMarkPaid"><i class="fas fa-check me-1"></i>Bulk Tandai Bayar</button>
	                <button class="btn btn-outline-danger btn-sm" id="btnBulkUnmarkPaid"><i class="fas fa-undo me-1"></i>Bulk Batalkan Bayar</button>
	                <button class="btn btn-outline-success btn-sm" id="btnExportExcel"><i class="fas fa-file-excel me-1"></i>Export Excel (CSV)</button>
	                <button class="btn btn-outline-success btn-sm" id="btnExportXlsx"><i class="fas fa-file-excel me-1"></i>Export XLSX</button>
                    <button class="btn btn-outline-primary btn-sm" id="btnExportSlipMassal"><i class="fas fa-id-card me-1"></i>Slip Massal XLSX</button>
	                <button class="btn btn-outline-primary btn-sm" id="btnExportTemplatePayroll"><i class="fas fa-file-signature me-1"></i>Export Template Payroll (XLSX)</button>
	                <button class="btn btn-outline-danger btn-sm" id="btnExportPdf"><i class="fas fa-file-pdf me-1"></i>Export PDF</button>
	                <small class="text-muted align-self-center">Pilih baris via checkbox, lalu gunakan bulk update.</small>
	            </div>
	            <div class="mt-2 alert alert-info py-2 px-3 mb-0 payroll-guide" id="guidePenggajian">
                    <div class="d-flex align-items-start justify-content-between gap-2">
                        <div class="d-flex align-items-center gap-2">
                            <i class="fas fa-info-circle"></i>
                            <h6 class="mb-0">Keterangan Penggajian</h6>
                            <span class="badge rounded-pill text-bg-light" id="guidePenggajianBadge">Auto close: 120s</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-sm btn-outline-dark" id="btnToggleGuidePenggajian" title="Tutup/Buka keterangan">
                                <i class="fas fa-chevron-up" id="guidePenggajianChevron"></i>
                            </button>
                            <button type="button" class="btn-close" aria-label="Close" id="btnCloseGuidePenggajian"></button>
                        </div>
                    </div>
                    <div class="collapse show mt-2" id="guidePenggajianBody">
                        <div class="small">
                            <div><strong>Status Bayar: Belum Terbayar</strong> dipakai untuk daftar yang akan <strong>diajukan ke Accounting</strong> (rekap transfer/pembayaran).</div>
                            <div><strong>Status Bayar: Terbayar</strong> dipakai untuk <strong>rekap/arsip</strong> setelah pembayaran dilakukan (audit dan histori pembayaran).</div>
                            <div><strong>Tandai Bayar</strong> akan menyimpan histori pembayaran periode tersebut ke database dan bisa dibatalkan via <strong>Batalkan Bayar</strong>.</div>
                            <div><strong>Mode 1 Bulan Profil</strong> membuat periode hitung selalu penuh 1 bulan sesuai Profil Bulan. Tanggal cek hanya untuk melihat karyawan yang jatuh tempo pada hari itu.</div>
                            <div><strong>Export Excel/PDF</strong> mengikuti filter aktif di atas, termasuk <strong>Status Bayar</strong>.</div>
                        </div>
                    </div>
	            </div>
            <div class="mt-2 text-muted small" id="summaryText">-</div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title m-0">Daftar Penggajian Karyawan (Dinamis)</h3>
        </div>
        <div class="card-body">
            <div class="payroll-loading-card" id="payrollLoadingCard">
                <div class="payroll-loading-topline">
                    <div>
                        <div class="payroll-loading-title">Sedang menghitung payroll...</div>
                        <div class="payroll-loading-meta" id="payrollLoadingMeta">Sistem sedang memuat dan menghitung dataset penggajian sesuai filter aktif.</div>
                    </div>
                    <div class="payroll-loading-percent" id="payrollLoadingPercent">0%</div>
                </div>
                <div class="progress" role="progressbar" aria-label="Loading payroll" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" id="payrollLoadingBar" style="width: 0%"></div>
                </div>
            </div>
            <div class="payroll-table-toolbar">
                <div id="payrollTableExternalButtons"></div>
                <div class="payroll-table-info" id="payrollTableExternalInfo">Belum ada data</div>
                <label class="payroll-table-search">
                    <span>Search:</span>
                    <input type="search" id="payrollTableExternalSearch" class="form-control form-control-sm" placeholder="Cari no finger / nama / status" autocomplete="off">
                </label>
            </div>
            <div class="table-responsive payroll-grid-wrap">
                <table id="payrollTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th style="width: 40px;"><input type="checkbox" id="checkAllRows" /></th>
                            <th>No Finger</th>
                            <th>Nama</th>
                            <th>Status</th>
                            <th>Profil Gaji</th>
                            <th>Anchor</th>
                            <th>Due Date</th>
                            <th>Periode Bayar</th>
                            <th>Approved Attendance</th>
                            <th>Rincian HK/Alpha/Cuti/OT</th>
                            <th>Bruto</th>
                            <th>PPh21</th>
                            <th>BPJS</th>
                            <th>Reimburse</th>
                            <th>Netto</th>
                            <th>Penanda Bulan</th>
                            <th>Status Bayar</th>
                            <th>Terakhir Dibayar</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="payroll-table-footer">
                <div class="payroll-table-info" id="payrollTableExternalPageInfo">Halaman 0 / 0</div>
                <div class="payroll-table-pager">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="payrollTablePrev">Previous</button>
                    <span class="payroll-table-page-badge" id="payrollTableCurrentPage">0</span>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="payrollTableNext">Next</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="cycleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Set Siklus Gaji</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="cycleForm">
                    <div class="modal-body">
                        <input type="hidden" id="cycleAssignmentId" />
                        <div class="mb-3">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="cycleEmployee" readonly />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Siklus Bayar</label>
                            <select id="cycleType" class="form-select" required></select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Anchor Date</label>
                            <input type="date" id="cycleAnchorDate" class="form-control" />
                            <small class="text-muted">Titik awal hitung jadwal. Kosongkan untuk default tanggal masuk kerja/periode.</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            (function () {
                const bodyEl = document.getElementById('guidePenggajianBody');
                const toggleBtn = document.getElementById('btnToggleGuidePenggajian');
                const closeBtn = document.getElementById('btnCloseGuidePenggajian');
                const chevron = document.getElementById('guidePenggajianChevron');
                if (!bodyEl || !toggleBtn || !closeBtn || !window.bootstrap) return;

                const userId = Number('{{ (int) (auth()->id() ?? 0) }}') || 0;
                const storageKey = `ahsp:penggajian:guide_collapsed:u:${userId}`;
                const AUTO_CLOSE_MS = 120000;
                const collapse = new bootstrap.Collapse(bodyEl, { toggle: false });
                let timerId = null;
                const isShown = () => bodyEl.classList.contains('show');
                const setChevron = () => {
                    chevron.classList.toggle('fa-chevron-up', isShown());
                    chevron.classList.toggle('fa-chevron-down', !isShown());
                };
                const clearTimer = () => {
                    if (timerId) {
                        clearTimeout(timerId);
                        timerId = null;
                    }
                };
                const scheduleAutoClose = () => {
                    clearTimer();
                    timerId = window.setTimeout(() => {
                        try { window.localStorage.setItem(storageKey, '1'); } catch (e) { /* ignore */ }
                        collapse.hide();
                    }, AUTO_CLOSE_MS);
                };
                const storedCollapsed = (() => {
                    try { return window.localStorage.getItem(storageKey) === '1'; } catch (e) { return false; }
                })();

                if (storedCollapsed) {
                    collapse.hide();
                } else {
                    collapse.show();
                    scheduleAutoClose();
                }
                setChevron();

                bodyEl.addEventListener('shown.bs.collapse', () => {
                    try { window.localStorage.setItem(storageKey, '0'); } catch (e) { /* ignore */ }
                    setChevron();
                    scheduleAutoClose();
                });
                bodyEl.addEventListener('hidden.bs.collapse', () => {
                    try { window.localStorage.setItem(storageKey, '1'); } catch (e) { /* ignore */ }
                    setChevron();
                    clearTimer();
                });
                toggleBtn.addEventListener('click', () => isShown() ? collapse.hide() : collapse.show());
                closeBtn.addEventListener('click', () => collapse.hide());
            })();

            const cycleModal = new bootstrap.Modal(document.getElementById('cycleModal'));
            let refs = { profil_bulans: [], cycle_types: [] };
            let rows = [];
            let rawRows = [];
            let selectedAssignmentIds = new Set();
            let loadingProgressInterval = null;
            let payrollStatusTimer = null;
            let loadingProgressValue = 0;
            const formatCurrencyId = (value) => `Rp ${Number(value || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            const formatPercentId = (value) => `${Number(value || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`;
            const escapeHtml = (value) => $('<div>').text((value ?? '').toString()).html();
            const profilPph21Enabled = (profilId) => {
                const profil = (refs.profil_bulans || []).find((p) => Number(p.id) === Number(profilId));
                return profil ? profil.pph21_enabled !== false : true;
            };
            const setPph21ColumnState = (enabled) => {
                $('#payrollTable').toggleClass('is-pph21-disabled', enabled === false);
            };
            const setLoadingProgress = (value, metaText = null, options = {}) => {
                const force = !!options.force;
                const safeValue = Math.max(0, Math.min(100, Number(value || 0)));
                const isActive = $('#payrollLoadingCard').hasClass('is-active');
                const nextValue = force || !isActive || safeValue === 0
                    ? safeValue
                    : Math.max(loadingProgressValue || 0, safeValue);
                loadingProgressValue = nextValue;
                $('#payrollLoadingPercent').text(`${Math.round(nextValue)}%`);
                $('#payrollLoadingBar').css('width', `${nextValue}%`).attr('aria-valuenow', `${Math.round(nextValue)}`);
                if (metaText !== null) {
                    $('#payrollLoadingMeta').text(metaText);
                }
            };
            const startLoadingHeartbeat = () => {
                if (loadingProgressInterval) {
                    clearInterval(loadingProgressInterval);
                }
                loadingProgressInterval = setInterval(() => {
                    if (!$('#payrollLoadingCard').hasClass('is-active')) return;
                    const current = Number(loadingProgressValue || 0);
                    const next = current < 10
                        ? current + 2
                        : (current < 30 ? current + 1.2 : (current < 70 ? current + 0.45 : current + 0.15));
                    const cap = payrollStatusTimer ? 92 : 18;
                    if (next > current && current < cap) {
                        setLoadingProgress(Math.min(cap, next));
                    }
                }, 1200);
            };
            const startPayrollLoading = () => {
                if (loadingProgressInterval) {
                    clearInterval(loadingProgressInterval);
                    loadingProgressInterval = null;
                }
                if (payrollStatusTimer) {
                    clearInterval(payrollStatusTimer);
                    payrollStatusTimer = null;
                }
                $('#payrollLoadingCard').addClass('is-active');
                setLoadingProgress(2, 'Mengirim proses payroll ke queue background.');
                startLoadingHeartbeat();
            };
            const finishPayrollLoading = (rowCount = null) => {
                if (loadingProgressInterval) {
                    clearInterval(loadingProgressInterval);
                    loadingProgressInterval = null;
                }
                if (payrollStatusTimer) {
                    clearInterval(payrollStatusTimer);
                    payrollStatusTimer = null;
                }
                const meta = rowCount === null
                    ? 'Proses selesai.'
                    : `Selesai memuat ${Number(rowCount || 0).toLocaleString('id-ID')} baris payroll.`;
                setLoadingProgress(100, meta, { force: true });
                setTimeout(() => {
                    $('#payrollLoadingCard').removeClass('is-active');
                    setLoadingProgress(0, 'Sistem sedang memuat dan menghitung dataset penggajian sesuai filter aktif.');
                }, 650);
            };
            const failPayrollLoading = (message = null) => {
                if (loadingProgressInterval) {
                    clearInterval(loadingProgressInterval);
                    loadingProgressInterval = null;
                }
                if (payrollStatusTimer) {
                    clearInterval(payrollStatusTimer);
                    payrollStatusTimer = null;
                }
                setLoadingProgress(100, message || 'Load payroll dihentikan.', { force: true });
                setTimeout(() => {
                    $('#payrollLoadingCard').removeClass('is-active');
                    setLoadingProgress(0, 'Sistem sedang memuat dan menghitung dataset penggajian sesuai filter aktif.');
                }, 450);
            };
            const renderFingerCell = (row) => {
                const finger = escapeHtml((row.finger_id || row.employee_code || '-').toString());
                const ktp = escapeHtml((row.id_card_no || '-').toString());
                return `
                    <div class="payroll-identity-cell">
                        <div class="payroll-identity-main">${finger}</div>
                        <div class="payroll-identity-sub">No KTP: ${ktp}</div>
                    </div>
                `;
            };
            const renderNameCell = (row) => `
                <div class="payroll-identity-cell">
                    <div class="payroll-identity-main payroll-clamp-2">${escapeHtml(row.employee_name || '-')}</div>
                    <div class="payroll-identity-role">${escapeHtml(row.jabatan_label || '-')}</div>
                </div>
            `;
            const renderStatusCell = (row) => {
                const jenisKaryawan = escapeHtml(row.employment_status || '-');
                const siklus = escapeHtml(row.cycle_label || '-');
                const tooltip = escapeHtml(`${row.employment_status || '-'} dibayar ${row.cycle_label || '-'}`);

                return `
                    <div class="payroll-identity-cell" title="${tooltip}">
                        <div class="payroll-identity-main">${jenisKaryawan}</div>
                        <div><span class="badge text-bg-secondary">${siklus}</span></div>
                    </div>
                `;
            };
            const renderAnchorCell = (row) => {
                const value = escapeHtml(row.anchor_date || '-');
                const siklus = escapeHtml(row.cycle_label || '-');
                const tooltip = escapeHtml(`Tanggal patokan awal siklus ${row.cycle_label || '-'} untuk karyawan ini`);

                return `<span title="${tooltip}">${value}<br><small class="text-muted">${siklus}</small></span>`;
            };
            const renderDueDateCell = (row) => {
                const value = escapeHtml(row.due_date || '-');
                const tooltip = escapeHtml(`${row.is_due ? 'Sudah jatuh tempo' : 'Belum jatuh tempo'} dibayar pada tanggal cek aktif`);
                const badgeClass = row.is_due ? 'text-bg-success' : 'text-bg-warning text-dark';

                return `<span class="badge ${badgeClass}" title="${tooltip}">${value}</span>`;
            };
            const renderApprovedAttendanceCell = (row) => {
                const approvedDays = Number(row.approved_days || 0);
                const expectedDays = Math.max(0, Number(row.expected_hk_days || 0));
                const billedHours = Number(row.billed_hours ?? row.approved_hours ?? 0);
                const actualHours = Number(row.approved_hours || 0);
                let stateClass = 'is-partial';
                let stateLabel = 'Kurang';

                if (approvedDays <= 0 && billedHours <= 0) {
                    stateClass = 'is-empty';
                    stateLabel = '0';
                } else if (expectedDays > 0 && approvedDays >= expectedDays) {
                    stateClass = 'is-full';
                    stateLabel = 'Full';
                }

                const tooltip = escapeHtml(`${stateLabel}: ${approvedDays}/${expectedDays || 0} hari approved, ${billedHours.toFixed(2)} jam tagih`);

                return `
                    <div class="payroll-attendance-state ${stateClass}" title="${tooltip}">
                        <strong>${approvedDays} hari / ${billedHours.toFixed(2)} jam</strong>
                        <small>${stateLabel} | Aktual: ${actualHours.toFixed(2)} jam</small>
                    </div>
                `;
            };
            const renderPph21Cell = (row) => {
                const amount = formatCurrencyId(row.pph21_nominal || 0);
                const rate = `${(Number(row.pph21_rate || 0) * 100).toFixed(2)}%`;
                const method = String(row.pph21_method || '').toLowerCase();
                const methodBadge = row.pph21_fallback_used || method === 'legacy_flat_rate'
                    ? '<br><span class="badge text-bg-warning text-dark mt-1">Fallback</span>'
                    : (method === 'ter_monthly'
                        ? `<br><span class="badge text-bg-info text-dark mt-1">TER ${escapeHtml(row.pph21_ter_category || '-')}</span>`
                        : '');
                if (row.pph21_enabled === false) {
                    return `
                        <div class="payroll-pph21-muted" title="PPh21 nonaktif pada setting profil bulan ini">
                            <strong>${amount}</strong>
                            <span class="payroll-pph21-badge"><i class="fas fa-ban"></i>Nonaktif</span>
                        </div>
                    `;
                }

                return `${amount}<br><small class="text-muted">${rate}</small>${methodBadge}`;
            };
            const renderBpjsCell = (row) => {
                const amount = formatCurrencyId(row.bpjs_nominal || 0);
                const totalRate = formatPercentId(Number(row.bpjs_rate_total || 0) * 100);
                const effectiveDate = escapeHtml(row.bpjs_effective_date || '-');
                const sourceMode = (row.bpjs_source_mode || 'live_period').toString();
                const sourceBadge = sourceMode === 'snapshot_paid'
                    ? '<span class="payroll-bpjs-badge is-snapshot"><i class="fas fa-camera-retro"></i>Snapshot bayar</span>'
                    : '<span class="payroll-bpjs-badge is-live"><i class="fas fa-wave-square"></i>Live periode</span>';
                const summaryShort = escapeHtml(row.bpjs_summary_short || 'Tidak ada program BPJS aktif.');
                const summaryFull = escapeHtml(row.bpjs_summary_full || 'Tidak ada program BPJS aktif.');
                const programCount = Number(row.bpjs_program_count || 0);
                const payrollProgramCount = Number(row.bpjs_payroll_program_count || 0);
                const ceilingInfo = row.bpjs_has_ceiling ? '<br><small class="text-warning"><i class="fas fa-arrows-alt-v"></i> Ada plafon aktif</small>' : '';

                return `
                    <div class="payroll-bpjs-cell" title="${summaryFull}">
                        <div><strong>${amount}</strong> <small class="text-muted">(${totalRate})</small></div>
                        <div>${sourceBadge}</div>
                        <div class="payroll-bpjs-meta">Rate acuan per ${effectiveDate}</div>
                        <div class="payroll-bpjs-meta">${summaryShort}</div>
                        <div class="payroll-bpjs-meta">${programCount} program aktif | ${payrollProgramCount} potong payroll${ceilingInfo}</div>
                    </div>
                `;
            };

            const table = $('#payrollTable').DataTable({
                responsive: false,
                autoWidth: false,
                dom: 't',
                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-columns me-1"></i>Kolom',
                        className: 'btn btn-outline-secondary btn-sm',
                        // hide/show only data columns (exclude checkbox & action column)
                        columns: ':not(:first-child):not(:last-child)'
                    }
                ],
                columnDefs: [
                    { targets: 0, width: '42px' },
                    { targets: 1, width: '170px' },
                    { targets: 2, width: '270px' },
                    { targets: 3, width: '105px' },
                    { targets: 4, width: '220px' },
                    { targets: 5, width: '105px' },
                    { targets: 6, width: '105px' },
                    { targets: 7, width: '135px' },
                    { targets: 8, width: '145px' },
                    { targets: 9, width: '150px' },
                    { targets: 10, width: '130px' },
                    { targets: 11, width: '125px' },
                    { targets: 12, width: '190px' },
                    { targets: 13, width: '120px' },
                    { targets: 14, width: '135px' },
                    { targets: 15, width: '150px' },
                    { targets: 16, width: '120px' },
                    { targets: 17, width: '130px' },
                    { targets: 18, width: '240px' },
                ],
                data: [],
                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: (r) => `<input type="checkbox" class="row-check" data-id="${r.assignment_id}" ${selectedAssignmentIds.has(Number(r.assignment_id)) ? 'checked' : ''} />`
                    },
                    { data: null, render: (r) => renderFingerCell(r) },
                    { data: null, render: (r) => renderNameCell(r) },
                    { data: null, render: (r) => renderStatusCell(r) },
                    { data: 'profil_gaji', render: (v) => `<div class="payroll-wrap-cell">${escapeHtml(v || '-')}</div>` },
                    { data: null, render: (r) => renderAnchorCell(r) },
                    { data: null, render: (r) => renderDueDateCell(r) },
                    { data: null, render: (r) => `<div class="payroll-wrap-cell">${escapeHtml(r.period_start || '-')}<br>s/d ${escapeHtml(r.period_end || '-')}</div>` },
                    { data: null, render: (r) => renderApprovedAttendanceCell(r) },
                    { data: null, render: (r) => `<div class="payroll-wrap-cell">HK ${Number(r.hk_days || 0)} / ${Number(r.expected_hk_days || 0)}<br><small class="text-muted">A:${Number(r.alpha_days || 0)} | C:${Number(r.cuti_days || 0)} | OT:${Number(r.overtime_hours || 0).toFixed(2)}j</small></div>` },
                    { data: null, render: (r) => `Rp ${Number(r.billed_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` },
                    { data: null, render: (r) => renderPph21Cell(r) },
                    { data: null, render: (r) => renderBpjsCell(r) },
                    { data: null, render: (r) => `Rp ${Number(r.reimburse_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` },
                    { data: null, render: (r) => `<strong>Rp ${Number(r.net_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>` },
                    { data: null, render: (r) => `<div class="payroll-wrap-cell"><small>${escapeHtml(r.month_marker || '-')}</small><br><small class="text-muted">${Number(r.approved_days_month || 0)} hari / ${Number(r.billed_hours_month ?? r.approved_hours_month ?? 0).toFixed(2)} jam</small></div>` },
                    {
                        data: null,
                        render: (r) => {
                            if (r.payroll_report_only) {
                                return `<div class="payroll-wrap-cell"><span class="badge text-bg-info">Report Jam Only</span><br><small class="text-muted">Tidak masuk proses bayar</small></div>`;
                            }
                            if (r.payroll_reimburse_only) {
                                if (r.is_paid) {
                                    return `<div class="payroll-wrap-cell"><span class="badge text-bg-success">Rembes Terbayar</span><br><small class="text-muted">${escapeHtml(r.paid_pay_date || '-')} ${r.paid_marked_at ? '(' + escapeHtml(r.paid_marked_at) + ')' : ''}</small></div>`;
                                }
                                return `<div class="payroll-wrap-cell"><span class="badge text-bg-warning text-dark">Rembes Only</span><br><small class="text-muted">Hanya reimburse/rembes</small></div>`;
                            }
                            if (r.is_paid) {
                                return `<div class="payroll-wrap-cell"><span class="badge text-bg-success">Sudah Terbayar</span><br><small class="text-muted">${escapeHtml(r.paid_pay_date || '-')} ${r.paid_marked_at ? '(' + escapeHtml(r.paid_marked_at) + ')' : ''}</small></div>`;
                            }
                            return '<span class="badge text-bg-warning text-dark">Belum Terbayar</span>';
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            if (!r.last_paid_date) {
                                return '<span class="text-muted">Belum Pernah</span>';
                            }
                            return `<div class="payroll-wrap-cell">${escapeHtml(r.last_paid_date)}<br><small class="text-muted">${escapeHtml(r.last_paid_period_start || '-')} s/d ${escapeHtml(r.last_paid_period_end || '-')}</small></div>`;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (r) => {
                            const params = new URLSearchParams({
                                assignment_id: String(r.assignment_id || ''),
                                pay_date: String($('#payDate').val() || ''),
                                profil_bulan_id: String($('#profilBulanId').val() || ''),
                                monthly_view: $('#monthlyView').is(':checked') ? '1' : '0',
                                cycle_filter: String($('#cycleFilter').val() || 'all')
                            });
                            const payAction = r.payroll_report_only
                                ? `<span class="badge text-bg-info align-self-start"><i class="fas fa-clock"></i>Report Only</span>`
                                : (r.is_paid
                                    ? `<button class="btn btn-sm btn-outline-danger btn-unmark-paid" data-id="${r.assignment_id}"><i class="fas fa-undo"></i>Batalkan Bayar</button>`
                                    : `<button class="btn btn-sm btn-outline-success btn-mark-paid" data-id="${r.assignment_id}"><i class="fas fa-check"></i>Tandai Bayar</button>`);
                            return `
                                <div class="payroll-action-cell">
                                <button class="btn btn-sm btn-outline-primary btn-cycle" data-id="${r.assignment_id}"><i class="fas fa-layer-group"></i>Set Siklus</button>
                                ${payAction}
                                ${r.is_paid && r.payment_id ? `<a class="btn btn-sm btn-outline-secondary" target="_blank" href="{{ route('penggajian.tax_proof') }}?payment_id=${r.payment_id}"><i class="fas fa-receipt"></i>Bukti Potong</a>` : ''}
                                <a class="btn btn-sm btn-outline-dark" target="_blank" href="{{ route('penggajian.slip_print') }}?${params.toString()}"><i class="fas fa-id-card"></i>Slip</a>
                                <a class="btn btn-sm btn-outline-info" target="_blank" href="{{ route('penggajian.detail') }}?${params.toString()}"><i class="fas fa-clock"></i>Detail Jam</a>
                                </div>
                            `;
                        }
                    },
                ]
            });
            table.buttons().container().appendTo('#payrollTableExternalButtons');

            const syncExternalTableControls = () => {
                const info = table.page.info();
                const total = Number(info.recordsTotal || 0);
                const display = Number(info.recordsDisplay || 0);
                const start = display > 0 ? Number(info.start || 0) + 1 : 0;
                const end = Number(info.end || 0);
                const page = Number(info.page || 0) + 1;
                const pages = Number(info.pages || 0);
                const filteredText = display !== total ? ` (filtered dari ${total.toLocaleString('id-ID')} total)` : '';

                $('#payrollTableExternalInfo').text(
                    display > 0
                        ? `Menampilkan ${start.toLocaleString('id-ID')}-${end.toLocaleString('id-ID')} dari ${display.toLocaleString('id-ID')} data${filteredText}`
                        : `Menampilkan 0 dari ${total.toLocaleString('id-ID')} data`
                );
                $('#payrollTableExternalPageInfo').text(`Halaman ${pages > 0 ? page : 0} / ${pages}`);
                $('#payrollTableCurrentPage').text(pages > 0 ? page : 0);
                $('#payrollTablePrev').prop('disabled', page <= 1 || pages <= 0);
                $('#payrollTableNext').prop('disabled', page >= pages || pages <= 0);
            };

            $('#payrollTableExternalSearch').on('input', function () {
                table.search(this.value || '').draw();
            });
            $('#payrollTablePrev').on('click', function () {
                table.page('previous').draw('page');
            });
            $('#payrollTableNext').on('click', function () {
                table.page('next').draw('page');
            });

            table.on('column-visibility.dt draw.dt', function () {
                syncExternalTableControls();
                window.setTimeout(() => table.columns.adjust(), 0);
            });
            syncExternalTableControls();
            $(window).on('resize.__payrollTable', function () {
                window.setTimeout(() => table.columns.adjust(), 80);
            });

            const fillCycleOptions = () => {
                const opts = (refs.cycle_types || []).map((c) => `<option value="${c.key}">${c.label}</option>`);
                $('#cycleType').html(opts.join(''));
            };

            const initProfilBulanSelect = () => {
                // Ubah dropdown Profil Bulan jadi live-search (lebih cepat jika list profil banyak).
                if ($('#profilBulanId').data('select2')) {
                    $('#profilBulanId').select2('destroy');
                }
                $('#profilBulanId').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: 'Cari profil bulan...',
                    dropdownAutoWidth: false,
                });
            };

            const loadRefs = () => $.getJSON('{{ route('penggajian.refs') }}')
                .done((resp) => {
                    refs = resp.data || refs;
                    $('#profilBulanId').html((refs.profil_bulans || []).map((p) => `<option value="${p.id}">${p.code} - ${p.name}</option>`).join(''));
                    initProfilBulanSelect();
                    setPph21ColumnState(profilPph21Enabled($('#profilBulanId').val()));
                    fillCycleOptions();
                    $('#payDate').val(new Date().toISOString().slice(0, 10));
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load refs', 'error'));

            const loadData = (options = {}) => {
                const profilId = $('#profilBulanId').val();
                const payDate = $('#payDate').val();
                if (!profilId || !payDate) {
                    Swal.fire('Warning', 'Profil bulan dan tanggal proses wajib diisi.', 'warning');
                    return;
                }

                // Abort previous request so we don't stack heavy payroll loads.
                if (window.__penggajianLoadXhr && window.__penggajianLoadXhr.readyState !== 4) {
                    try { window.__penggajianLoadXhr.abort(); } catch (e) {}
                }

                const $btn = $('#btnLoad');
                const oldBtnHtml = $btn.html();
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Loading...');
                startPayrollLoading();

                const unlockButton = () => {
                    $btn.prop('disabled', false).html(oldBtnHtml);
                };
                const applyPayload = (resp) => {
                    const pph21Enabled = (resp.meta?.profil?.pph21_enabled !== undefined)
                        ? ![false, 0, '0'].includes(resp.meta.profil.pph21_enabled)
                        : profilPph21Enabled($('#profilBulanId').val());
                    rawRows = (resp.data || []).map((row) => ({
                        ...row,
                        pph21_enabled: row.pph21_enabled === undefined
                            ? pph21Enabled
                            : ![false, 0, '0'].includes(row.pph21_enabled),
                    }));
                    setPph21ColumnState(pph21Enabled);

                    // Paid filter is client-side only (do not re-hit server).
                    const applyPaidFilter = () => {
                        const paidFilter = $('#paidFilter').val() || 'all';
                        rows = rawRows.filter((r) => {
                            if (paidFilter === 'paid') return !!r.is_paid;
                            if (paidFilter === 'unpaid') return !r.is_paid;
                            return true;
                        });
                        table.clear().rows.add(rows).draw();
                        window.setTimeout(() => table.columns.adjust(), 0);
                        const visibleIds = new Set(rows.map((r) => Number(r.assignment_id)));
                        selectedAssignmentIds = new Set([...selectedAssignmentIds].filter((id) => visibleIds.has(id)));
                        $('#checkAllRows').prop('checked', rows.length > 0 && rows.every((r) => selectedAssignmentIds.has(Number(r.assignment_id))));

                        const summary = resp.meta?.summary || {};
                        const profil = resp.meta?.profil || {};
                        const modeText = (resp.meta?.monthly_view ?? true) ? 'Mode: 1 Bulan Profil' : 'Mode: Per Siklus';
                        const cycleFilter = (resp.meta?.cycle_filter || 'all') === 'without_weekly' ? 'Tanpa Mingguan' : 'Semua Siklus';
                        const pphText = pph21Enabled ? 'PPh21: aktif' : 'PPh21: nonaktif';
                        const versionText = resp.meta?.calculation_version
                            ? ` | Versi Hitung: ${resp.meta.calculation_version}`
                            : '';
                        const shownCount = rows.length;
                        $('#summaryText').text(`${modeText} | Filter Siklus: ${cycleFilter} | ${pphText}${versionText} | Profil ${profil.code || '-'} (${profil.start_date || '-'} s/d ${profil.end_date || '-'}) | Karyawan: ${summary.employees || 0} | Terbayar: ${summary.paid_count || 0} | Belum: ${summary.unpaid_count || 0} | Ditampilkan: ${shownCount}`);
                    };

                    applyPaidFilter();
                    $('#paidFilter').off('change.__paid').on('change.__paid', applyPaidFilter);
                    finishPayrollLoading(rawRows.length);
                    unlockButton();
                };
                const fetchPayrollResult = (jobId) => {
                    $.getJSON(`{{ url('/penggajian/process') }}/${jobId}/result`)
                        .done((resp) => applyPayload(resp))
                        .fail((xhr) => {
                            if (xhr.status === 409 && xhr.responseJSON?.stale_snapshot) {
                                setLoadingProgress(4, 'Snapshot lama terdeteksi. Rebuild hitungan payroll dengan rumus terbaru...');
                                loadData({ force: true });
                                return;
                            }
                            failPayrollLoading('Snapshot payroll selesai, tapi hasil gagal diambil.');
                            unlockButton();
                            Swal.fire('Error', xhr.responseJSON?.message || 'Failed load payroll result', 'error');
                        });
                };
                const pollPayrollStatus = (jobId) => {
                    $.getJSON(`{{ url('/penggajian/process') }}/${jobId}/status`)
                        .done((resp) => {
                            const job = resp.data || {};
                            const status = (job.status || '').toString();
                            const pct = Number(job.progress_percent || 0);
                            const processed = Number(job.processed_users || 0).toLocaleString('id-ID');
                            const total = Number(job.total_users || 0).toLocaleString('id-ID');
                            const statusHint = (job.status_hint || '').toString().trim();
                            const updatedAt = (job.updated_at || '').toString().trim();
                            if (status === 'done') {
                                if (payrollStatusTimer) {
                                    clearInterval(payrollStatusTimer);
                                    payrollStatusTimer = null;
                                }
                                setLoadingProgress(100, `Payroll selesai diproses (${total} karyawan). Mengambil snapshot...`, { force: true });
                                fetchPayrollResult(jobId);
                                return;
                            }
                            if (status === 'failed' || status === 'cancelled') {
                                if (payrollStatusTimer) {
                                    clearInterval(payrollStatusTimer);
                                    payrollStatusTimer = null;
                                }
                                failPayrollLoading(job.error_message || (status === 'cancelled' ? 'Proses payroll dibatalkan karena data berubah.' : 'Proses payroll gagal.'));
                                unlockButton();
                                Swal.fire(status === 'cancelled' ? 'Info' : 'Error', job.error_message || 'Proses payroll gagal.', status === 'cancelled' ? 'info' : 'error');
                                return;
                            }
                            const visualPct = status === 'processing' ? Math.max(8, Math.min(95, pct || 8)) : Math.max(2, pct || 2);
                            const statusText = status === 'pending' ? 'menunggu queue worker' : 'diproses queue worker';
                            const suffix = statusHint !== ''
                                ? ` ${statusHint}`
                                : '';
                            const stamp = updatedAt !== ''
                                ? ` Update terakhir: ${updatedAt}.`
                                : '';
                            setLoadingProgress(visualPct, `Payroll ${statusText}. Progress: ${processed}/${total} karyawan.${suffix}${stamp}`);
                        })
                        .fail((xhr) => {
                            failPayrollLoading('Gagal membaca status queue payroll.');
                            unlockButton();
                            Swal.fire('Error', xhr.responseJSON?.message || 'Failed load payroll status', 'error');
                        });
                };

                window.__penggajianLoadXhr = $.post('{{ route('penggajian.process.start') }}', {
                    profil_bulan_id: profilId,
                    pay_date: payDate,
                    only_due: $('#onlyDue').is(':checked') ? 1 : 0,
                    monthly_view: $('#monthlyView').is(':checked') ? 1 : 0,
                    cycle_filter: $('#cycleFilter').val() || 'all',
                    force: options.force ? 1 : 0
                }).done((resp) => {
                    const job = resp.data || {};
                    if (!job.id) {
                        failPayrollLoading('Job payroll tidak valid.');
                        unlockButton();
                        return;
                    }
                    const rebuildText = options.force ? 'Rebuild hitungan payroll' : 'Job payroll';
                    setLoadingProgress(Number(job.progress_percent || 2), `${rebuildText} ${job.request_no || '-'} dibuat. Menunggu queue worker...`);
                    pollPayrollStatus(job.id);
                    payrollStatusTimer = setInterval(() => pollPayrollStatus(job.id), 1500);
                }).fail((xhr) => {
                    // Ignore abort errors.
                    if (xhr && xhr.statusText === 'abort') {
                        failPayrollLoading('Load payroll dibatalkan.');
                        unlockButton();
                        return;
                    }
                    failPayrollLoading('Load payroll gagal. Silakan cek filter atau ulangi proses.');
                    unlockButton();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Failed load payroll data', 'error');
                });
            };

	            // Klik Tampilkan harus rebuild snapshot agar angka list selalu mengikuti rumus payroll terbaru.
	            $('#btnLoad').on('click', function () {
                    loadData({ force: true });
                });
	            $('#profilBulanId, #payDate, #onlyDue, #monthlyView, #cycleFilter').on('change', function () {
                    if (this.id === 'profilBulanId') {
                        setPph21ColumnState(profilPph21Enabled($(this).val()));
                    }
	                $('#summaryText').text('Filter berubah. Klik \"Tampilkan\" untuk memuat data.');
	            });

	            const buildExportParams = () => {
	                const profilId = $('#profilBulanId').val();
	                const payDate = $('#payDate').val();
	                if (!profilId || !payDate) {
	                    Swal.fire('Warning', 'Profil bulan dan tanggal proses wajib diisi.', 'warning');
	                    return null;
	                }
	                return new URLSearchParams({
	                    profil_bulan_id: String(profilId),
	                    pay_date: String(payDate),
	                    only_due: $('#onlyDue').is(':checked') ? '1' : '0',
	                    monthly_view: $('#monthlyView').is(':checked') ? '1' : '0',
	                    cycle_filter: String($('#cycleFilter').val() || 'all'),
	                    paid_filter: String($('#paidFilter').val() || 'all'),
	                });
	            };

	            $('#btnExportExcel').on('click', function () {
	                const params = buildExportParams();
	                if (!params) return;
	                params.set('format', 'csv');
	                window.location.href = `{{ route('penggajian.export_excel') }}?${params.toString()}`;
	            });

	            $('#btnExportXlsx').on('click', function () {
	                const params = buildExportParams();
	                if (!params) return;
	                params.set('format', 'xlsx');
	                window.location.href = `{{ route('penggajian.export_excel') }}?${params.toString()}`;
	            });

	            $('#btnExportTemplatePayroll').on('click', function () {
	                const params = buildExportParams();
	                if (!params) return;
	                params.set('format', 'xlsx');
	                params.set('template_layout', '1');
	                window.location.href = `{{ route('penggajian.export_excel') }}?${params.toString()}`;
	            });

                $('#btnExportSlipMassal').on('click', function () {
                    const params = buildExportParams();
                    if (!params) return;
                    params.set('format', 'xlsx');
                    window.location.href = `{{ route('penggajian.export_slip_excel') }}?${params.toString()}`;
                });

	            $('#btnExportPdf').on('click', function () {
	                const params = buildExportParams();
	                if (!params) return;
	                window.open(`{{ route('penggajian.export_pdf') }}?${params.toString()}`, '_blank');
	            });

	            $('#btnReportTemplate').on('click', function () {
	                const profilId = $('#profilBulanId').val();
	                const payDate = $('#payDate').val();
	                if (!profilId || !payDate) {
                    Swal.fire('Warning', 'Profil bulan dan tanggal proses wajib diisi.', 'warning');
                    return;
                }
                const params = new URLSearchParams({
                    profil_bulan_id: String(profilId),
                    pay_date: String(payDate),
                    only_due: $('#onlyDue').is(':checked') ? '1' : '0',
                    monthly_view: $('#monthlyView').is(':checked') ? '1' : '0',
                    cycle_filter: String($('#cycleFilter').val() || 'all'),
                });
                window.open(`{{ route('penggajian.report_template') }}?${params.toString()}`, '_blank');
            });

            $('#btnReportThrProgresif').on('click', function () {
                const profilId = $('#profilBulanId').val();
                const payDate = $('#payDate').val();
                if (!profilId) {
                    Swal.fire('Warning', 'Profil bulan wajib dipilih.', 'warning');
                    return;
                }
                const params = new URLSearchParams({
                    profil_bulan_id: String(profilId),
                    pay_date: String(payDate || ''),
                    only_with_thr: '1',
                });
                window.open(`{{ route('penggajian.report_thr_progresif') }}?${params.toString()}`, '_blank');
            });

            $('#payrollTable').on('click', '.btn-cycle', function () {
                const assignmentId = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.assignment_id) === assignmentId);
                if (!row) return;
                $('#cycleAssignmentId').val(row.assignment_id);
                $('#cycleEmployee').val(`${row.employee_code || '-'} - ${row.employee_name || '-'}`);
                $('#cycleType').val(row.cycle_type || 'monthly');
                $('#cycleAnchorDate').val(row.anchor_date || '');
                cycleModal.show();
            });

            $('#payrollTable').on('change', '.row-check', function () {
                const id = Number($(this).data('id'));
                if (id <= 0) return;
                if ($(this).is(':checked')) {
                    selectedAssignmentIds.add(id);
                } else {
                    selectedAssignmentIds.delete(id);
                }
                const allChecked = rows.length > 0 && rows.every((r) => selectedAssignmentIds.has(Number(r.assignment_id)));
                $('#checkAllRows').prop('checked', allChecked);
            });

            $('#checkAllRows').on('change', function () {
                const checked = $(this).is(':checked');
                rows.forEach((r) => {
                    const id = Number(r.assignment_id);
                    if (id > 0) {
                        if (checked) selectedAssignmentIds.add(id);
                        else selectedAssignmentIds.delete(id);
                    }
                });
                $('.row-check').prop('checked', checked);
            });

            $('#btnBulkCycle').on('click', function () {
                const ids = [...selectedAssignmentIds];
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan.', 'info');
                    return;
                }
                $('#cycleAssignmentId').val('');
                $('#cycleEmployee').val(`${ids.length} karyawan terpilih`);
                $('#cycleType').val('monthly');
                $('#cycleAnchorDate').val($('#payDate').val() || '');
                cycleModal.show();
            });

            $('#btnBulkMarkPaid').on('click', function () {
                const ids = [...selectedAssignmentIds];
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan.', 'info');
                    return;
                }
                Swal.fire({
                    title: 'Bulk Tandai Bayar?',
                    text: `${ids.length} karyawan akan ditandai terbayar pada periode aktif.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Proses',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('penggajian.mark_paid.bulk') }}`, {
                        assignment_ids: ids,
                        pay_date: $('#payDate').val(),
                        monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                    }).done((resp) => {
                        loadData({ force: true });
                        Swal.fire('Success', resp?.message || 'Bulk tandai bayar berhasil', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal bulk tandai bayar', 'error'));
                });
            });

            $('#btnBulkUnmarkPaid').on('click', function () {
                const ids = [...selectedAssignmentIds];
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan.', 'info');
                    return;
                }
                Swal.fire({
                    title: 'Bulk Batalkan Bayar?',
                    text: `${ids.length} karyawan akan dikembalikan ke status belum terbayar pada periode aktif.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Batalkan',
                    cancelButtonText: 'Tutup'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('penggajian.unmark_paid.bulk') }}`, {
                        assignment_ids: ids,
                        pay_date: $('#payDate').val(),
                        monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                    }).done((resp) => {
                        loadData({ force: true });
                        Swal.fire('Success', resp?.message || 'Bulk batal bayar berhasil', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal bulk batalkan bayar', 'error'));
                });
            });

            $('#cycleForm').on('submit', function (e) {
                e.preventDefault();
                const assignmentId = $('#cycleAssignmentId').val();
                const payload = {
                    cycle_type: $('#cycleType').val(),
                    anchor_date: $('#cycleAnchorDate').val() || ''
                };
                if (assignmentId) {
                    $.ajax({
                        url: `{{ url('/penggajian/cycle') }}/${assignmentId}`,
                        type: 'PUT',
                        data: payload
                    }).done((resp) => {
                        cycleModal.hide();
                        loadData({ force: true });
                        Swal.fire('Success', resp?.message || 'Siklus tersimpan', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
                    return;
                }

                const ids = [...selectedAssignmentIds];
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan.', 'info');
                    return;
                }
                $.ajax({
                    url: `{{ route('penggajian.cycle.bulk') }}`,
                    type: 'PUT',
                    data: { ...payload, assignment_ids: ids }
                }).done((resp) => {
                    cycleModal.hide();
                    loadData({ force: true });
                    Swal.fire('Success', resp?.message || 'Bulk update berhasil', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk save failed', 'error'));
            });

            $('#payrollTable').on('click', '.btn-mark-paid', function () {
                const assignmentId = Number($(this).data('id'));
                if (!assignmentId) return;
                $.post(`{{ route('penggajian.mark_paid') }}`, {
                    assignment_id: assignmentId,
                    pay_date: $('#payDate').val(),
                    monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                }).done((resp) => {
                    loadData({ force: true });
                    Swal.fire('Success', resp?.message || 'Status terbayar disimpan', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal tandai bayar', 'error'));
            });

            $('#payrollTable').on('click', '.btn-unmark-paid', function () {
                const assignmentId = Number($(this).data('id'));
                if (!assignmentId) return;
                $.post(`{{ route('penggajian.unmark_paid') }}`, {
                    assignment_id: assignmentId,
                    pay_date: $('#payDate').val(),
                    monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                }).done((resp) => {
                    loadData({ force: true });
                    Swal.fire('Success', resp?.message || 'Status bayar dibatalkan', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal batalkan bayar', 'error'));
            });

            // Do not autoload on page open (heavy). User clicks "Tampilkan" when ready.
            $.when(loadRefs()).always(() => {
                $('#summaryText').text('Pilih filter lalu klik "Tampilkan" untuk memuat data.');
            });
        });
    </script>
@endpush