@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-name-button {
            display: inline;
            padding: 0;
            border: 0;
            background: transparent;
            color: #0f172a;
            font: inherit;
            font-weight: 800;
            text-align: left;
        }
        .payroll-name-button:hover {
            color: #0d6efd;
            text-decoration: underline;
        }
        .payroll-basis-badge {
            display: inline-flex;
            width: fit-content;
            margin-top: .2rem;
            padding: .12rem .42rem;
            border-radius: 999px;
            background: #e0f2fe;
            color: #075985;
            font-size: .68rem;
            font-weight: 800;
        }
        .payroll-basis-badge.is-daily {
            background: #fef3c7;
            color: #92400e;
        }
        .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(260px, 1.4fr) repeat(4, minmax(170px, .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;
        }

        .export-overlay-mask {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(255,255,255,.82);
            backdrop-filter: blur(4px);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
        }
        .export-overlay-mask.is-active { display: flex; }
        .export-overlay-spinner {
            width: 52px; height: 52px;
            border: 5px solid #e0e7ff;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: exportSpin .8s linear infinite;
        }
        @keyframes exportSpin { to { transform: rotate(360deg); } }
        .export-overlay-text {
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
        }
        .export-overlay-sub {
            font-size: .82rem;
            color: #64748b;
        }
        .payroll-grid-wrap {
            max-height: calc(100vh - 360px);
            overflow: auto;
            border: 1px solid #dee2e6;
            border-radius: .55rem;
            background: #fff;
        }
        #payrollTable {
            width: 3047px !important;
            min-width: 3047px;
            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.payroll-pph21-column,
        #payrollTable.is-pph21-disabled td.payroll-pph21-column,
        #payrollTable.is-pph21-disabled tbody tr:nth-of-type(odd) > td.payroll-pph21-column,
        #payrollTable.is-pph21-disabled tbody tr:hover > td.payroll-pph21-column {
            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: 135px; width: 135px; text-align: right; }
        #payrollTable th:nth-child(6),
        #payrollTable td:nth-child(6) { min-width: 220px; width: 220px; white-space: normal; }
        #payrollTable th:nth-child(7),
        #payrollTable td:nth-child(7) { min-width: 260px; width: 260px; white-space: normal; }
        #payrollTable th:nth-child(8),
        #payrollTable td:nth-child(8) { min-width: 105px; width: 105px; }
        #payrollTable th:nth-child(9),
        #payrollTable td:nth-child(9) { min-width: 135px; width: 135px; white-space: normal; }
        #payrollTable th:nth-child(10),
        #payrollTable td:nth-child(10) { min-width: 145px; width: 145px; white-space: normal; }
        #payrollTable th:nth-child(11),
        #payrollTable td:nth-child(11) { min-width: 150px; width: 150px; white-space: normal; }
        #payrollTable th:nth-child(12),
        #payrollTable td:nth-child(12) { min-width: 130px; width: 130px; text-align: right; }
        #payrollTable th:nth-child(13),
        #payrollTable td:nth-child(13) { min-width: 125px; width: 125px; text-align: right; }
        #payrollTable th:nth-child(14),
        #payrollTable td:nth-child(14) { min-width: 190px; width: 190px; white-space: normal; }
        #payrollTable th:nth-child(15),
        #payrollTable td:nth-child(15) { min-width: 120px; width: 120px; text-align: right; }
        #payrollTable th:nth-child(16),
        #payrollTable td:nth-child(16) { min-width: 120px; width: 120px; text-align: right; }
        #payrollTable th:nth-child(17),
        #payrollTable td:nth-child(17) { min-width: 135px; width: 135px; text-align: right; }
        #payrollTable th:nth-child(18),
        #payrollTable td:nth-child(18) { min-width: 150px; width: 150px; white-space: normal; }
        #payrollTable th:nth-child(19),
        #payrollTable td:nth-child(19) { min-width: 120px; width: 120px; white-space: normal; }
        #payrollTable th:nth-child(20),
        #payrollTable td:nth-child(20) { min-width: 130px; width: 130px; white-space: normal; }
        #payrollTable th:nth-child(21),
        #payrollTable td:nth-child(21) { 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-expense-summary {
            display: grid;
            grid-template-columns: repeat(6, minmax(150px, 1fr));
            gap: .75rem;
            margin-bottom: 1rem;
        }
        .payroll-expense-card {
            border: 1px solid #dbe3ef;
            border-radius: .75rem;
            background: #fff;
            padding: .85rem .95rem;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
        }
        .payroll-expense-card .label {
            display: flex;
            align-items: center;
            gap: .45rem;
            color: #64748b;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .payroll-expense-card .value {
            margin-top: .35rem;
            color: #0f172a;
            font-size: 1.05rem;
            font-weight: 900;
        }
        .payroll-expense-card.payable .label { color: #0f766e; }
        .payroll-expense-card.overtime .label { color: #9333ea; }
        .payroll-expense-card.tax .label { color: #b91c1c; }
        .payroll-expense-card.bpjs .label { color: #1d4ed8; }
        .payroll-expense-card.total .label { color: #7c2d12; }
        .payroll-profile-card {
            border: 1px solid #dbe3ef;
            border-radius: .85rem;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
        }
        .payroll-profile-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .75rem;
            padding: .8rem .95rem;
            background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
            border-bottom: 1px solid #dbe3ef;
        }
        .payroll-profile-title {
            font-weight: 900;
            color: #0f172a;
        }
        .payroll-profile-sub {
            color: #64748b;
            font-size: .8rem;
            font-weight: 600;
        }
        .payroll-profile-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            justify-content: flex-end;
            padding: .7rem .95rem;
            border-bottom: 1px solid #edf2f7;
            background: #fbfdff;
        }
        .payroll-profile-actions .btn {
            min-height: 30px;
            display: inline-flex;
            align-items: center;
            gap: .25rem;
        }
        .payroll-profile-summary {
            display: grid;
            grid-template-columns: repeat(7, minmax(110px, 1fr));
            gap: .55rem;
            padding: .75rem .95rem;
        }
        .payroll-profile-mini {
            border: 1px solid #e5edf6;
            border-radius: .65rem;
            padding: .6rem .7rem;
            background: #fff;
        }
        .payroll-profile-mini.is-muted,
        .payroll-profile-table.is-pph21-disabled th.payroll-pph21-column,
        .payroll-profile-table.is-pph21-disabled td.payroll-pph21-column {
            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-profile-mini span {
            display: block;
            color: #64748b;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .payroll-profile-mini strong {
            display: block;
            margin-top: .2rem;
            color: #0f172a;
            font-weight: 900;
        }
        .payroll-profile-table {
            width: 3207px;
            min-width: 3207px;
            margin: 0;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
        }
        .payroll-profile-scroll-top,
        .payroll-profile-table-wrap {
            overflow-x: auto;
        }
        .payroll-component-line {
            display: flex;
            justify-content: space-between;
            gap: .75rem;
            white-space: nowrap;
        }
        .payroll-profile-scroll-top {
            height: 16px;
            margin: 0 .95rem .25rem;
            overflow-y: hidden;
            border: 1px solid #e5edf6;
            border-radius: .45rem;
            background: #f8fafc;
        }
        .payroll-profile-scroll-spacer {
            height: 1px;
            min-width: 3207px;
        }
        .payroll-profile-table th {
            background: #f8fafc;
            color: #0f172a;
            font-size: .78rem;
            text-transform: uppercase;
        }
        .payroll-profile-table th,
        .payroll-profile-table td {
            border-top: 1px solid #e5edf6;
            vertical-align: top;
            padding: .65rem .7rem;
            background: #fff;
            box-sizing: border-box;
        }
        .payroll-profile-table th:nth-child(1),
        .payroll-profile-table td:nth-child(1) { position: sticky; left: 0; z-index: 26; min-width: 42px; width: 42px; box-shadow: 1px 0 0 #dee2e6; }
        .payroll-profile-table th:nth-child(2),
        .payroll-profile-table td:nth-child(2) { position: sticky; left: 42px; z-index: 26; min-width: 170px; width: 170px; box-shadow: 1px 0 0 #dee2e6; }
        .payroll-profile-table th:nth-child(3),
        .payroll-profile-table td:nth-child(3) { position: sticky; left: 212px; z-index: 26; min-width: 270px; width: 270px; white-space: normal; box-shadow: 1px 0 0 #dee2e6; }
        .payroll-profile-table thead th:nth-child(-n+3),
        .payroll-profile-table thead th:last-child { z-index: 30; }
        .payroll-profile-table th:last-child,
        .payroll-profile-table td:last-child { position: sticky; right: 0; z-index: 24; min-width: 240px; width: 240px; background: #fff; box-shadow: -1px 0 0 #dee2e6; }
        .payroll-profile-table th:nth-child(4), .payroll-profile-table td:nth-child(4) { min-width: 135px; width: 135px; text-align: right; }
        .payroll-profile-table th:nth-child(5), .payroll-profile-table td:nth-child(5) { min-width: 220px; width: 220px; white-space: normal; }
        .payroll-profile-table th:nth-child(6), .payroll-profile-table td:nth-child(6) { min-width: 300px; width: 300px; white-space: normal; }
        .payroll-profile-table th:nth-child(7), .payroll-profile-table td:nth-child(7) { min-width: 250px; width: 250px; }
        .payroll-profile-table th:nth-child(8), .payroll-profile-table td:nth-child(8) { min-width: 105px; width: 105px; }
        .payroll-profile-table th:nth-child(9), .payroll-profile-table td:nth-child(9) { min-width: 135px; width: 135px; white-space: normal; }
        .payroll-profile-table th:nth-child(10), .payroll-profile-table td:nth-child(10) { min-width: 145px; width: 145px; white-space: normal; }
        .payroll-profile-table th:nth-child(11), .payroll-profile-table td:nth-child(11) { min-width: 150px; width: 150px; white-space: normal; }
        .payroll-profile-table th:nth-child(12), .payroll-profile-table td:nth-child(12) { min-width: 130px; width: 130px; text-align: right; }
        .payroll-profile-table th:nth-child(13), .payroll-profile-table td:nth-child(13) { min-width: 125px; width: 125px; text-align: right; }
        .payroll-profile-table th:nth-child(14), .payroll-profile-table td:nth-child(14) { min-width: 190px; width: 190px; white-space: normal; }
        .payroll-profile-table th:nth-child(15), .payroll-profile-table td:nth-child(15) { min-width: 120px; width: 120px; text-align: right; }
        .payroll-profile-table th:nth-child(16), .payroll-profile-table td:nth-child(16) { min-width: 135px; width: 135px; text-align: right; }
        .payroll-profile-table th:nth-child(17), .payroll-profile-table td:nth-child(17) { min-width: 150px; width: 150px; white-space: normal; }
        .payroll-profile-table th:nth-child(18), .payroll-profile-table td:nth-child(18) { min-width: 120px; width: 120px; white-space: normal; }
        .payroll-profile-table th:nth-child(19), .payroll-profile-table td:nth-child(19) { min-width: 130px; width: 130px; white-space: normal; }
        .payroll-profile-table th:nth-child(20), .payroll-profile-table td:nth-child(20) { min-width: 240px; width: 240px; }
        .payroll-profile-search {
            max-width: 240px;
        }
        .payroll-profile-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            flex-wrap: wrap;
            padding: .65rem .95rem;
            border-top: 1px solid #e5edf6;
            background: #fbfdff;
        }
        .payroll-profile-pager {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
        }
        .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;
        }
        .payroll-detail-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .65rem;
        }
        .payroll-detail-item {
            border: 1px solid #e5edf6;
            border-radius: .55rem;
            padding: .65rem .75rem;
            background: #fbfdff;
        }
        .payroll-detail-item span {
            display: block;
            color: #64748b;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .payroll-employee-modal .modal-dialog {
            max-width: min(1320px, calc(100vw - 48px));
        }
        .payroll-employee-modal .modal-body {
            max-height: calc(100vh - 190px);
            overflow: auto;
            background: #f8fafc;
        }
        .payroll-setting-card,
        .payroll-override-card,
        .payroll-readonly-card {
            border: 1px solid #dbe3ef;
            border-radius: .8rem;
            background: #fff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
        }
        .payroll-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .75rem .9rem;
            border-bottom: 1px solid #edf2f7;
            background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
        }
        .payroll-card-head strong {
            color: #0f172a;
            font-size: .95rem;
        }
        .payroll-card-body {
            padding: .9rem;
        }
        .payroll-setting-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(220px, 1fr));
            gap: .75rem;
        }
        .payroll-check-row {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
        }
        .payroll-check-row .form-check {
            margin: 0;
            padding: .42rem .7rem .42rem 2rem;
            border: 1px solid #e5edf6;
            border-radius: .65rem;
            background: #fbfdff;
        }
        .payroll-override-grid {
            display: grid;
            grid-template-columns: 140px minmax(260px, 1.6fr) 130px 150px 110px 150px 150px minmax(260px, 1.4fr);
            gap: .65rem;
            align-items: end;
        }
        @media (max-width: 992px) {
            .payroll-setting-grid,
            .payroll-detail-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .payroll-override-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (max-width: 640px) {
            .payroll-setting-grid,
            .payroll-detail-grid,
            .payroll-override-grid {
                grid-template-columns: 1fr;
            }
        }
        .payroll-detail-item strong {
            display: block;
            margin-top: .18rem;
            color: #0f172a;
            overflow-wrap: anywhere;
        }
        @media (max-width: 767.98px) {
            .payroll-expense-summary {
                grid-template-columns: 1fr;
            }
            .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" multiple></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 d-none">
	                <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-warning btn-sm" id="btnExportZeroWorkDays"><i class="fas fa-file-export me-1"></i>Export 0 Hari</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-expense-summary" id="payrollExpenseSummary">
                <div class="payroll-expense-card payable">
                    <div class="label"><i class="fas fa-wallet"></i>Ke Karyawan + BPJS Karyawan</div>
                    <div class="value" id="payrollTotalNet">Rp 0,00</div>
                </div>
                <div class="payroll-expense-card">
                    <div class="label"><i class="fas fa-money-bill"></i>Gapok Kehadiran</div>
                    <div class="value" id="payrollTotalGapok">Rp 0,00</div>
                </div>
                <div class="payroll-expense-card overtime">
                    <div class="label"><i class="fas fa-clock"></i>Overtime</div>
                    <div class="value" id="payrollTotalOvertime">Rp 0,00</div>
                </div>
                <div class="payroll-expense-card tax">
                    <div class="label"><i class="fas fa-receipt"></i>Harus Dibayar ke Pajak (PPh21)</div>
                    <div class="value" id="payrollTotalPph21">Rp 0,00</div>
                </div>
                <div class="payroll-expense-card bpjs">
                    <div class="label"><i class="fas fa-shield-alt"></i>Harus Dibayar ke BPJS (Perusahaan)</div>
                    <div class="value" id="payrollTotalBpjs">Rp 0,00</div>
                </div>
                <div class="payroll-expense-card total">
                    <div class="label"><i class="fas fa-calculator"></i>Grand Total Estimasi</div>
                    <div class="value" id="payrollTotalExpense">Rp 0,00</div>
                </div>
            </div>
            <div id="payrollProfileGroups" class="d-grid gap-3 mb-3"></div>
            <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="export-overlay-mask" id="exportOverlayMask">
                <div class="export-overlay-spinner"></div>
                <div class="export-overlay-text" id="exportOverlayText">Mengunduh template payroll...</div>
                <div class="export-overlay-sub" id="exportOverlaySub">Mohon tunggu, proses ini mungkin memakan waktu.</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>Netto</th>
                            <th>Komponen</th>
                            <th>Profil Gaji</th>
                            
                            <th>Tgl Acuan Siklus</th>
                            <th>Jatuh Tempo Bayar</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>Overtime</th>
                            <th>Reimburse</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">Tanggal Acuan Siklus</label>
                            <input type="date" id="cycleAnchorDate" class="form-control" />
                            <small class="text-muted">Tanggal patokan siklus bayar karyawan. 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>

    <div class="modal fade payroll-employee-modal" id="payrollEmployeeDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title" id="payrollEmployeeDetailTitle">Detail Payroll Karyawan</h5>
                        <small class="text-muted" id="payrollEmployeeDetailSubtitle"></small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info py-2 small">Ubah setting payroll karyawan di profil bulan ini. Setelah simpan, data penggajian dihitung ulang otomatis.</div>
                    <form id="payrollEmployeeDetailForm" class="payroll-setting-card mb-3">
                        <input type="hidden" id="payrollDetailAssignmentId">
                        <div class="payroll-card-head">
                            <div>
                                <strong><i class="fas fa-sliders-h me-1 text-primary"></i>Setting Payroll Profil Bulan</strong>
                                <div class="small text-muted">Setting hanya untuk assignment karyawan pada profil ini.</div>
                            </div>
                        </div>
                        <div class="payroll-card-body">
                        <div class="payroll-setting-grid">
                            <div>
                                <label class="form-label">Profil Jadwal Kerja Bulanan</label>
                                <select id="payrollDetailProfilJamKerjaId" class="form-select form-select-sm" required></select>
                            </div>
                            <div>
                                <label class="form-label">Profil Jadwal Kerja Alternatif</label>
                                <select id="payrollDetailProfilJamKerjaAltId" class="form-select form-select-sm"></select>
                            </div>
                            <div>
                                <label class="form-label">Profil Gaji</label>
                                <select id="payrollDetailProfilGajiId" class="form-select form-select-sm" required></select>
                            </div>
                            <div>
                                <label class="form-label">Basis HK Payroll</label>
                                <select id="payrollDetailHkBasisMode" class="form-select form-select-sm">
                                    <option value="auto">Auto</option>
                                    <option value="monthly">Bulanan</option>
                                    <option value="daily">Harian</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Aturan Payable Khusus</label>
                                <select id="payrollDetailPayableRuleId" class="form-select form-select-sm"></select>
                            </div>
                            <div>
                                <label class="form-label">Mode Pembayaran Payroll</label>
                                <select id="payrollDetailPayMode" class="form-select form-select-sm">
                                    <option value="normal">Normal</option>
                                    <option value="report_only">Report Jam Only</option>
                                    <option value="reimburse_only">Reimburse Only</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Profil Perkalian Jam</label>
                                <select id="payrollDetailProfilPerkalianJamId" class="form-select form-select-sm"></select>
                            </div>
                            <div>
                                <label class="form-label">Profil Pembulatan Jam</label>
                                <select id="payrollDetailRoundingRuleId" class="form-select form-select-sm"></select>
                            </div>
                            <div>
                                <label class="form-label">Otomatisasi</label>
                                <div class="payroll-check-row small">
                                    <label class="form-check">
                                        <input class="form-check-input" type="checkbox" id="payrollDetailAutoOt">
                                        <span class="form-check-label">OT otomatis tanpa SPL</span>
                                    </label>
                                    <label class="form-check">
                                        <input class="form-check-input" type="checkbox" id="payrollDetailNoRestNormal">
                                        <span class="form-check-label">AUTO NoRest-1</span>
                                    </label>
                                    <label class="form-check">
                                        <input class="form-check-input" type="checkbox" id="payrollDetailNoRestSkip">
                                        <span class="form-check-label">AUTO NoRest-2</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        </div>
                    </form>
                    <div class="payroll-override-card mb-3">
                        <div class="payroll-card-head">
                            <div>
                                <strong><i class="fas fa-receipt me-1 text-success"></i>Override Gaji</strong>
                                <div class="small text-muted">Koreksi komponen pendapatan/potongan khusus karyawan ini.</div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnPayrollOverrideReload"><i class="fas fa-rotate"></i></button>
                        </div>
                        <div class="payroll-card-body">
                        <div class="payroll-override-grid mb-3">
                            <div>
                                <label class="form-label">Group</label>
                                <select id="payrollOverrideGroup" class="form-select form-select-sm">
                                    <option value="pendapatan">Pendapatan</option>
                                    <option value="potongan">Potongan</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Komponen</label>
                                <select id="payrollOverrideComponentId" class="form-select form-select-sm"></select>
                            </div>
                            <div>
                                <label class="form-label">Tipe</label>
                                <select id="payrollOverrideCalcType" class="form-select form-select-sm">
                                    <option value="fixed">Nominal</option>
                                    <option value="percent">Persen</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Nilai</label>
                                <input type="number" min="0" step="0.01" id="payrollOverrideAmount" class="form-control form-control-sm">
                            </div>
                            <div>
                                <label class="form-label">Mulai</label>
                                <input type="date" id="payrollOverrideStart" class="form-control form-control-sm">
                            </div>
                            <div>
                                <label class="form-label">Sampai</label>
                                <input type="date" id="payrollOverrideEnd" class="form-control form-control-sm">
                            </div>
                            <div>
                                <label class="form-label">Catatan</label>
                                <input type="text" id="payrollOverrideNotes" class="form-control form-control-sm" maxlength="255">
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-success w-100" id="btnPayrollOverrideAdd"><i class="fas fa-plus"></i> Add</button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Komponen</th>
                                        <th>Tipe</th>
                                        <th class="text-end">Nilai</th>
                                        <th>Periode</th>
                                        <th class="text-end">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="payrollOverrideRows">
                                    <tr><td colspan="5" class="text-muted text-center">Belum ada data.</td></tr>
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </div>
                    <div class="payroll-readonly-card">
                        <div class="payroll-card-head">
                            <strong><i class="fas fa-info-circle me-1 text-secondary"></i>Ringkasan Assignment</strong>
                        </div>
                        <div class="payroll-card-body">
                            <div class="payroll-detail-grid" id="payrollEmployeeDetailGrid"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="payrollEmployeeDetailSave"><i class="fas fa-save"></i> Simpan</button>
                </div>
            </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: [],
                profil_jam_kerjas: [],
                profil_gajis: [],
                profil_perkalian_jams: [],
                rounding_rules: [],
                payable_rules: [],
                komponen_pendapatan: [],
                komponen_potongan: []
            };
            let payrollDetailRefsLoaded = false;
            let rows = [];
            let rawRows = [];
            let currentPayrollDetailRow = null;
            let selectedAssignmentIds = new Set();
            let loadingProgressInterval = null;
            let payrollStatusTimer = null;
            let loadingProgressValue = 0;
            let payrollLoadToken = 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 optionLabel = (row) => [row?.code || '', row?.name || ''].filter(Boolean).join(' - ') || '-';
            const fillSelectOptions = ($select, items, selectedId, emptyLabel = '- Kosong -') => {
                const html = [`<option value="">${escapeHtml(emptyLabel)}</option>`]
                    .concat((items || []).map((row) => `<option value="${row.id}">${escapeHtml(optionLabel(row))}</option>`));
                $select.html(html.join('')).val(selectedId ? String(selectedId) : '');
            };
            const currentPayrollAssignmentId = () => Number($('#payrollDetailAssignmentId').val() || 0);
            const loadPayrollDetailRefs = () => {
                if (payrollDetailRefsLoaded) return $.Deferred().resolve().promise();
                return $.getJSON('{{ route('master_profil_bulan.refs') }}')
                    .done((resp) => {
                        Object.assign(refs, resp?.data || {});
                        payrollDetailRefsLoaded = true;
                    });
            };
            const fillPayrollOverrideComponents = () => {
                const group = $('#payrollOverrideGroup').val() || 'pendapatan';
                const items = group === 'potongan' ? refs.komponen_potongan : refs.komponen_pendapatan;
                fillSelectOptions($('#payrollOverrideComponentId'), items || [], '', '- Pilih Komponen -');
            };
            const renderPayrollOverrideRows = (items = []) => {
                if (!items.length) {
                    $('#payrollOverrideRows').html('<tr><td colspan="5" class="text-muted text-center">Belum ada data.</td></tr>');
                    return;
                }
                $('#payrollOverrideRows').html(items.map((row) => {
                    const value = row.calc_type === 'percent'
                        ? `${Number(row.percent_value || 0).toLocaleString('id-ID')}%`
                        : formatCurrencyId(row.amount || 0);
                    const badge = row.component_group === 'potongan'
                        ? '<span class="badge text-bg-danger">Potongan</span>'
                        : '<span class="badge text-bg-success">Pendapatan</span>';
                    return `
                        <tr>
                            <td>${badge}<br><strong>${escapeHtml(row.component_code || '-')}</strong><br><small>${escapeHtml(row.component_name || '-')}</small></td>
                            <td>${escapeHtml(row.calc_type || '-')}</td>
                            <td class="text-end">${value}</td>
                            <td><small>${escapeHtml(row.effective_start || '-')} s/d ${escapeHtml(row.effective_end || '-')}</small></td>
                            <td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger btn-payroll-override-delete" data-id="${row.id}"><i class="fas fa-trash"></i></button></td>
                        </tr>
                    `;
                }).join(''));
            };
            const loadPayrollOverrides = () => {
                const assignmentId = currentPayrollAssignmentId();
                if (!assignmentId) return;
                $('#payrollOverrideRows').html('<tr><td colspan="5" class="text-muted text-center">Loading...</td></tr>');
                $.getJSON(`{{ url('/master-profil-bulan/assignments') }}/${assignmentId}/overrides`)
                    .done((resp) => renderPayrollOverrideRows(resp?.data || []))
                    .fail((xhr) => $('#payrollOverrideRows').html(`<tr><td colspan="5" class="text-danger text-center">${escapeHtml(xhr.responseJSON?.message || 'Gagal load override')}</td></tr>`));
            };
            const renderExpenseSummary = (items = []) => {
                const gapokOf = (row) => {
                    const allowanceTotal = Number(row.allowance_total || 0)
                        || (Number(row.allowance_fixed || 0) + Number(row.allowance_position || 0) + Number(row.allowance_skill || 0) + Number(row.allowance_medical_housing || 0) + Number(row.allowance_other || 0));
                    return Math.max(0, Number(row.billed_nominal || 0) - allowanceTotal - Number(row.incentive_amount || 0) - Number(row.overtime_nominal || 0));
                };
                const totals = (items || []).reduce((carry, row) => {
                    const bpjsEmployee = Number(row.bpjs_employee_nominal ?? row.bpjs_nominal ?? 0);
                    const bpjsCompany = Number(row.bpjs_company_nominal || 0);
                    carry.employee += Number(row.net_nominal || 0) + bpjsEmployee;
                    carry.gapok += gapokOf(row);
                    carry.overtime += Number(row.overtime_nominal || 0);
                    carry.pph21 += Number(row.pph21_nominal || 0);
                    carry.bpjsCompany += bpjsCompany;
                    return carry;
                }, { employee: 0, gapok: 0, overtime: 0, pph21: 0, bpjsCompany: 0 });
                $('#payrollTotalNet').text(formatCurrencyId(totals.employee));
                $('#payrollTotalGapok').text(formatCurrencyId(totals.gapok));
                $('#payrollTotalOvertime').text(formatCurrencyId(totals.overtime));
                $('#payrollTotalPph21').text(formatCurrencyId(totals.pph21));
                $('#payrollTotalBpjs').text(formatCurrencyId(totals.bpjsCompany));
                $('#payrollTotalExpense').text(formatCurrencyId(totals.employee + totals.pph21 + totals.bpjsCompany));
            };
            const selectedProfilIds = () => {
                const value = $('#profilBulanId').val();
                const ids = Array.isArray(value) ? value : (value ? [value] : []);
                return ids.map((id) => String(id || '')).filter(Boolean);
            };
            const profileById = (profilId) => (refs.profil_bulans || []).find((p) => Number(p.id) === Number(profilId)) || null;
            const rowsSummary = (items = []) => (items || []).reduce((carry, row) => {
                const bpjsEmployee = Number(row.bpjs_employee_nominal ?? row.bpjs_nominal ?? 0);
                const bpjsCompany = Number(row.bpjs_company_nominal || 0);
                carry.net += Number(row.net_nominal || 0);
                carry.employee += Number(row.net_nominal || 0) + bpjsEmployee;
                carry.gapok += (() => {
                    const allowanceTotal = Number(row.allowance_total || 0)
                        || (Number(row.allowance_fixed || 0) + Number(row.allowance_position || 0) + Number(row.allowance_skill || 0) + Number(row.allowance_medical_housing || 0) + Number(row.allowance_other || 0));
                    return Math.max(0, Number(row.billed_nominal || 0) - allowanceTotal - Number(row.incentive_amount || 0) - Number(row.overtime_nominal || 0));
                })();
                carry.overtime += Number(row.overtime_nominal || 0);
                carry.pph21 += Number(row.pph21_nominal || 0);
                carry.bpjsCompany += bpjsCompany;
                carry.gross += Number(row.billed_nominal || row.gross_nominal || 0);
                carry.paid += row.is_paid ? 1 : 0;
                carry.unpaid += row.is_paid ? 0 : 1;
                return carry;
            }, { net: 0, employee: 0, gapok: 0, overtime: 0, pph21: 0, bpjsCompany: 0, gross: 0, paid: 0, unpaid: 0 });
            const buildExportParamsForProfile = (profilId) => new URLSearchParams({
                profil_bulan_id: String(profilId),
                pay_date: String($('#payDate').val() || ''),
                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'),
            });
            const profilPph21Enabled = (profilId) => {
                const profil = (refs.profil_bulans || []).find((p) => Number(p.id) === Number(profilId));
                return profil ? profil.pph21_enabled !== false : true;
            };
            const profilBulanLabel = (profil) => `${profil?.is_sub ? '|__ ' : ''}${profil?.code || '-'} - ${profil?.name || '-'}`;
            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 cancelActivePayrollLoad = (message = 'Filter berubah. Klik "Tampilkan" untuk memuat data.') => {
                payrollLoadToken++;
                if (window.__penggajianLoadXhr && window.__penggajianLoadXhr.readyState !== 4) {
                    try { window.__penggajianLoadXhr.abort(); } catch (e) {}
                }
                if (payrollStatusTimer) {
                    clearInterval(payrollStatusTimer);
                    payrollStatusTimer = null;
                }
                if (loadingProgressInterval) {
                    clearInterval(loadingProgressInterval);
                    loadingProgressInterval = null;
                }
                $('#payrollLoadingCard').removeClass('is-active');
                setLoadingProgress(0, 'Sistem sedang memuat dan menghitung dataset penggajian sesuai filter aktif.', { force: true });
                $('#btnLoad').prop('disabled', false).html('<i class="fas fa-filter"></i>Tampilkan');
                $('#summaryText').text(message);
            };
            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 payrollBasisBadge = (row) => {
                if (row.is_daily_payroll || String(row.payroll_hk_basis_mode || '').toLowerCase() === 'daily') {
                    return '<span class="payroll-basis-badge is-daily">Basis Harian</span>';
                }
                const hourBase = Number(row.monthly_hour_base || 0);
                return `<span class="payroll-basis-badge">Basis ${hourBase > 0 ? hourBase : 173} jam</span>`;
            };
            const renderNameCell = (row) => `
                <div class="payroll-identity-cell">
                    <button type="button" class="payroll-name-button payroll-clamp-2 btn-payroll-employee-detail" data-id="${row.assignment_id || ''}">${escapeHtml(row.employee_name || '-')}</button>
                    ${payrollBasisBadge(row)}
                    <div class="payroll-identity-role">${escapeHtml(row.jabatan_label || '-')}</div>
                </div>
            `;
            const boolLabel = (value) => value ? 'Aktif' : 'Tidak aktif';
            const payrollPayModeLabel = (mode, row = {}) => {
                if (row.payroll_report_only) return 'Report Jam Only';
                if (row.payroll_reimburse_only) return 'Reimburse Only';
                if (mode === 'report_only') return 'Report Jam Only';
                if (mode === 'reimburse_only') return 'Reimburse Only';
                return 'Normal';
            };
            const showPayrollEmployeeDetail = (row) => {
                if (!row) return;
                currentPayrollDetailRow = row;
                loadPayrollDetailRefs().done(() => {
                    $('#payrollDetailAssignmentId').val(row.assignment_id || '');
                    fillSelectOptions($('#payrollDetailProfilJamKerjaId'), refs.profil_jam_kerjas, row.profil_jam_kerja_id, '- Pilih Profil Jadwal -');
                    fillSelectOptions($('#payrollDetailProfilJamKerjaAltId'), refs.profil_jam_kerjas, row.profil_jam_kerja_id_alt, '- Tanpa Alternatif -');
                    fillSelectOptions($('#payrollDetailProfilGajiId'), refs.profil_gajis, row.profil_gaji_id, '- Pilih Profil Gaji -');
                    fillSelectOptions($('#payrollDetailPayableRuleId'), refs.payable_rules, row.payable_rule_id, '- Tanpa Aturan -');
                    fillSelectOptions($('#payrollDetailProfilPerkalianJamId'), refs.profil_perkalian_jams, row.profil_perkalian_jam_id, '- Tanpa Profil -');
                    fillSelectOptions($('#payrollDetailRoundingRuleId'), refs.rounding_rules, row.rounding_rule_id, '- Tanpa Pembulatan -');
                    $('#payrollDetailHkBasisMode').val(row.payroll_hk_basis_mode || 'auto');
                    $('#payrollDetailPayMode').val(row.payroll_pay_mode || 'normal');
                    $('#payrollDetailAutoOt').prop('checked', !!row.overtime_auto_without_spl);
                    $('#payrollDetailNoRestNormal').prop('checked', !!row.auto_no_rest_normal_included);
                    $('#payrollDetailNoRestSkip').prop('checked', !!row.auto_no_rest_skip_break);
                    fillPayrollOverrideComponents();
                    $('#payrollOverrideStart').val(row.period_start || '');
                    $('#payrollOverrideEnd').val(row.period_end || '');
                    $('#payrollOverrideAmount').val('');
                    $('#payrollOverrideNotes').val('');
                    loadPayrollOverrides();
                });
                const detailRows = [
                    ['Profil Jadwal Kerja Bulanan (Default/Fallback)', row.profil_jam_kerja_label || '-'],
                    ['Profil Jadwal Kerja Alternatif', row.profil_jam_kerja_alt_label || '-'],
                    ['Profil Gaji', row.profil_gaji || '-'],
                    ['Basis HK Payroll (Override)', row.payroll_hk_basis_mode || 'auto'],
                    ['Basis Profil Gaji', row.is_daily_payroll ? 'Harian' : `${Number(row.monthly_hour_base || 173)} jam`],
                    ['Aturan Payable Khusus', row.payable_rule_label || '-'],
                    ['Mode Pembayaran Payroll', payrollPayModeLabel(row.payroll_pay_mode, row)],
                    ['Profil Perkalian Jam', row.profil_perkalian_jam_label || '-'],
                    ['Profil Pembulatan Jam', row.rounding_rule_label || '-'],
                    ['OT otomatis tanpa SPL', boolLabel(!!row.overtime_auto_without_spl)],
                    ['AUTO NoRest-1 (Normal Included)', boolLabel(!!row.auto_no_rest_normal_included)],
                    ['AUTO NoRest-2 (Skip Break x0)', boolLabel(!!row.auto_no_rest_skip_break)],
                ];
                $('#payrollEmployeeDetailTitle').text(row.employee_name || 'Detail Payroll Karyawan');
                $('#payrollEmployeeDetailSubtitle').text(`${row.finger_id || row.employee_code || '-'} | ${row.jabatan_label || '-'}`);
                $('#payrollEmployeeDetailGrid').html(detailRows.map(([label, value]) => `
                    <div class="payroll-detail-item">
                        <span>${escapeHtml(label)}</span>
                        <strong>${escapeHtml(value || '-')}</strong>
                    </div>
                `).join(''));
                bootstrap.Modal.getOrCreateInstance(document.getElementById('payrollEmployeeDetailModal')).show();
            };
            const renderStatusCell = (row) => {
                const jenisKaryawan = escapeHtml(row.employment_status || '-');
                const siklus = escapeHtml(row.cycle_label || '-');
                const isDailyPayroll = !!row.is_daily_payroll;
                const dailyRate = Number(row.daily_base_rate || 0);
                const payBasisLabel = isDailyPayroll ? `Rate harian, dibayar ${row.cycle_label || '-'}` : `Dibayar ${row.cycle_label || '-'}`;
                const tooltip = escapeHtml(`${row.employment_status || '-'} | ${payBasisLabel}${isDailyPayroll ? ` | Rate ${formatCurrencyId(dailyRate)}` : ''}`);

                return `
                    <div class="payroll-identity-cell" title="${tooltip}">
                        <div class="payroll-identity-main">${jenisKaryawan}</div>
                        <div>
                            ${isDailyPayroll
                                ? `<span class="badge text-bg-warning text-dark">Rate Harian</span><span class="badge text-bg-secondary ms-1">Bayar ${siklus}</span>`
                                : `<span class="badge text-bg-secondary">Bayar ${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'} bayar. Ini bukan periode kerja, hanya tanggal jadwal bayar menurut siklus karyawan.`);
                const badgeClass = row.is_due ? 'text-bg-success' : 'text-bg-warning text-dark';

                return `<div class="payroll-wrap-cell"><span class="badge ${badgeClass}" title="${tooltip}">${value}</span><br><small class="text-muted">jadwal bayar</small></div>`;
            };
            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);
                const periodStart = String(row.period_start || '');
                const periodEnd = String(row.period_end || '');
                const contractEnd = String(row.contract_end_date || '');
                const employmentStatus = String(row.employment_status || '').toLowerCase();
                let stateClass = 'is-partial';
                let stateLabel = 'Kurang';
                let note = '';

                if (approvedDays <= 0 && billedHours <= 0) {
                    stateClass = 'is-empty';
                    stateLabel = '0';
                    if (row.employee_is_active === false || employmentStatus === 'nonaktif') {
                        note = 'Nonaktif/resign di master karyawan';
                    } else if (contractEnd && periodStart && contractEnd < periodStart) {
                        note = `Kontrak habis ${contractEnd}, belum di-nonaktifkan`;
                    } else if (contractEnd && periodEnd && contractEnd <= periodEnd) {
                        note = `Kontrak habis dalam periode (${contractEnd})`;
                    } else {
                        note = 'Masih aktif di master karyawan; cek jadwal/attendance';
                    }
                } 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${note ? ' | ' + note : ''}`);

                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>
                        ${note ? `<small class="d-block mt-1 text-danger">${escapeHtml(note)}</small>` : ''}
                    </div>
                `;
            };
            const isZeroAttendanceRow = (row) => Number(row.approved_days || 0) <= 0
                && Number(row.billed_hours ?? row.approved_hours ?? 0) <= 0;
            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 renderPayrollComponentCell = (row) => {
                const num = (key) => Number(row?.[key] || 0);
                const allowanceTotal = num('allowance_total')
                    || (num('allowance_fixed') + num('allowance_position') + num('allowance_skill') + num('allowance_medical_housing') + num('allowance_other'));
                const baseCalculated = Math.max(0, num('billed_nominal') - allowanceTotal - num('incentive_amount') - num('overtime_nominal'));
                const items = [
                    ['Gapok Kehadiran', baseCalculated, 'plus'],
                    ['Tunjangan tetap', num('allowance_fixed'), 'plus'],
                    ['Tunjangan jabatan', num('allowance_position'), 'plus'],
                    ['Tunjangan keahlian', num('allowance_skill'), 'plus'],
                    ['Medical/Housing', num('allowance_medical_housing'), 'plus'],
                    ['Tunjangan lain', num('allowance_other'), 'plus'],
                    ['Insentif', num('incentive_amount'), 'plus'],
                    ['Lembur', num('overtime_nominal'), 'plus'],
                    ['Reimburse', num('reimburse_nominal'), 'plus'],
                    ['BPJS', num('bpjs_nominal'), 'minus'],
                    ['PPh21', num('pph21_nominal'), 'minus'],
                    ['Potongan dinamis', num('dynamic_deduction_nominal'), 'minus'],
                ].filter((item) => Math.abs(Number(item[1] || 0)) > 0.0001);
                if (!items.length) {
                    return '<span class="text-muted">-</span>';
                }
                return `<div class="payroll-wrap-cell small">${items.map(([label, amount, type]) => `
                    <div class="payroll-component-line ${type === 'minus' ? 'text-danger' : 'text-success'}">
                        <span>${escapeHtml(label)}</span>
                        <strong>${formatCurrencyId(amount)}</strong>
                    </div>
                `).join('')}</div>`;
            };
            const renderProfileGroups = (groups = []) => {
                if (!groups.length) {
                    $('#payrollProfileGroups').empty();
                    $('.payroll-table-toolbar,.payroll-grid-wrap,.payroll-table-footer').show();
                    return;
                }
                $('.payroll-table-toolbar,.payroll-grid-wrap,.payroll-table-footer').hide();
                const html = groups.map((group, idx) => {
                    const profil = group.profil || profileById(group.profil_id) || {};
                    const items = group.rows || [];
                    const summary = rowsSummary(items);
                    const pph21Disabled = items.length > 0 && items.every((r) => r.pph21_enabled === false);
                    const label = profilBulanLabel(profil);
                    const kind = profil.is_sub ? 'SUB' : 'MAIN';
                    const period = group.meta?.profil
                        ? `${group.meta.profil.start_date || '-'} s/d ${group.meta.profil.end_date || '-'}`
                        : `${profil.start_date || '-'} s/d ${profil.end_date || '-'}`;
                    const rowsHtml = items.map((r) => {
                        const params = new URLSearchParams({
                            assignment_id: String(r.assignment_id || ''),
                            pay_date: String($('#payDate').val() || ''),
                            profil_bulan_id: String(r.profil_bulan_id || group.profil_id || ''),
                            monthly_view: $('#monthlyView').is(':checked') ? '1' : '0',
                            cycle_filter: String($('#cycleFilter').val() || 'all')
                        });
                        const zeroActions = isZeroAttendanceRow(r) ? `
                            <button class="btn btn-sm btn-outline-warning btn-zero-attendance-check" data-id="${r.assignment_id}"><i class="fas fa-search"></i>Cek Kehadiran</button>
                            <button class="btn btn-sm btn-outline-danger btn-zero-remove-profile" data-id="${r.assignment_id}"><i class="fas fa-user-minus"></i>Hapus Profil</button>
                            <button class="btn btn-sm btn-danger btn-zero-resign" data-id="${r.assignment_id}"><i class="fas fa-user-slash"></i>Resign</button>
                        ` : '';
                        return `
                            <tr data-profile-row="${group.profil_id}" data-search="${escapeHtml(`${r.employee_code || ''} ${r.finger_id || ''} ${r.employee_name || ''} ${r.employment_status || ''}`).toLowerCase()}">
                                <td><input type="checkbox" class="profile-row-check" data-id="${r.assignment_id}" data-profile-id="${group.profil_id}"></td>
                                <td>${renderFingerCell(r)}</td>
                                <td>${renderNameCell(r)}</td>
                                <td>${renderStatusCell(r)}</td>
                                <td class="text-end"><strong>${formatCurrencyId(r.net_nominal || 0)}</strong></td>
                                <td>${renderPayrollComponentCell(r)}</td>
                                <td><div class="payroll-wrap-cell">${escapeHtml(r.profil_gaji || '-')}</div></td>
                                
                                <td>${renderAnchorCell(r)}</td>
                                <td>${renderDueDateCell(r)}</td>
                                <td><div class="payroll-wrap-cell">${escapeHtml(r.period_start || '-')}<br>s/d ${escapeHtml(r.period_end || '-')}</div></td>
                                <td>${renderApprovedAttendanceCell(r)}</td>
                                <td><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></td>
                                <td class="text-end">${formatCurrencyId(r.billed_nominal || 0)}</td>
                                <td class="text-end payroll-pph21-column">${renderPph21Cell(r)}</td>
                                <td class="text-end">${renderBpjsCell(r)}</td>
                                <td class="text-end"><strong>${formatCurrencyId(r.overtime_nominal || 0)}</strong><br><small class="text-muted">${Number(r.weighted_overtime_hours ?? r.overtime_hours ?? 0).toFixed(2)} jam</small></td>
                                <td class="text-end">${formatCurrencyId(r.reimburse_nominal || 0)}</td>
                                <td><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></td>
                                <td>${r.is_paid ? `<div class="payroll-wrap-cell"><span class="badge text-bg-success">Sudah Terbayar</span><br><small class="text-muted">${escapeHtml(r.paid_pay_date || '-')}</small></div>` : '<span class="badge text-bg-warning text-dark">Belum Terbayar</span>'}</td>
                                <td>${r.last_paid_date ? `<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>` : '<span class="text-muted">Belum Pernah</span>'}</td>
                                <td>
                                    <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>Siklus</button>
                                        ${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>Batal</button>`
                                            : `<button class="btn btn-sm btn-outline-success btn-mark-paid" data-id="${r.assignment_id}"><i class="fas fa-check"></i>Bayar</button>`}
                                        ${zeroActions}
                                        <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</a>
                                    </div>
                                </td>
                            </tr>
                        `;
                    }).join('');
                    return `
                        <div class="payroll-profile-card" data-profile-card="${group.profil_id}">
                            <div class="payroll-profile-head">
                                <div>
                                    <div class="payroll-profile-title"><span class="badge ${profil.is_sub ? 'bg-warning text-dark' : 'bg-primary'} me-1">${kind}</span>${escapeHtml(label)}</div>
                                    <div class="payroll-profile-sub">Periode ${escapeHtml(period)} | Karyawan ${items.length} | Terbayar ${summary.paid} | Belum ${summary.unpaid}</div>
                                </div>
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#payrollProfileBody${idx}">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="payroll-profile-summary">
                                <div class="payroll-profile-mini"><span>Netto Payroll</span><strong>${formatCurrencyId(summary.net)}</strong></div>
                                <div class="payroll-profile-mini"><span>Ke Karyawan + BPJS Karyawan</span><strong>${formatCurrencyId(summary.employee)}</strong></div>
                                <div class="payroll-profile-mini"><span>Gapok Kehadiran</span><strong>${formatCurrencyId(summary.gapok)}</strong></div>
                                <div class="payroll-profile-mini"><span>Overtime</span><strong>${formatCurrencyId(summary.overtime)}</strong></div>
                                <div class="payroll-profile-mini ${pph21Disabled ? 'is-muted' : ''}"><span>PPh21</span><strong>${formatCurrencyId(summary.pph21)}</strong>${pph21Disabled ? '<small class="d-block mt-1"><i class="fas fa-ban"></i> Nonaktif</small>' : ''}</div>
                                <div class="payroll-profile-mini"><span>BPJS Perusahaan</span><strong>${formatCurrencyId(summary.bpjsCompany)}</strong></div>
                                <div class="payroll-profile-mini"><span>Grand Estimasi</span><strong>${formatCurrencyId(summary.employee + summary.pph21 + summary.bpjsCompany)}</strong></div>
                            </div>
                            <div class="collapse show" id="payrollProfileBody${idx}">
                                <div class="payroll-profile-actions">
                                    <button class="btn btn-outline-primary btn-sm btnExportTemplatePayroll" data-profile-id="${group.profil_id}"><i class="fas fa-file-signature me-1"></i>Export Template Payroll (XLSX)</button>
                                   
                                    <button class="btn btn-outline-primary btn-sm profile-bulk-cycle" data-profile-id="${group.profil_id}"><i class="fas fa-layer-group"></i>Set Siklus</button>
                                    <button class="btn btn-outline-success btn-sm profile-bulk-paid" data-profile-id="${group.profil_id}"><i class="fas fa-check"></i>Tandai Bayar</button>
                                    <button class="btn btn-outline-danger btn-sm profile-bulk-unpaid" data-profile-id="${group.profil_id}"><i class="fas fa-undo"></i>Batalkan Bayar</button>
                                    <button class="btn btn-outline-success btn-sm profile-export" data-profile-id="${group.profil_id}" data-format="csv"><i class="fas fa-file-excel"></i>CSV</button>
                                    <button class="btn btn-outline-success btn-sm profile-export" data-profile-id="${group.profil_id}" data-format="xlsx"><i class="fas fa-file-excel"></i>XLSX</button>
                                    <button class="btn btn-warning btn-sm profile-export-zero" data-profile-id="${group.profil_id}"><i class="fas fa-file-export"></i>0 Hari</button>
                                    <button class="btn btn-outline-primary btn-sm profile-slip" data-profile-id="${group.profil_id}"><i class="fas fa-id-card"></i>Slip Massal</button>
                                    <button class="btn btn-outline-danger btn-sm profile-pdf" data-profile-id="${group.profil_id}"><i class="fas fa-file-pdf"></i>PDF</button>
                                    <input type="search" class="form-control form-control-sm payroll-profile-search ms-auto" data-profile-id="${group.profil_id}" placeholder="Cari di profil ini">
                                </div>
                                <div class="payroll-profile-footer border-top-0">
                                    <div class="payroll-table-info" data-profile-page-info-top="${group.profil_id}">Halaman 0 / 0</div>
                                    <div class="payroll-profile-pager">
                                        <button type="button" class="btn btn-outline-secondary btn-sm profile-page-prev" data-profile-id="${group.profil_id}">Previous</button>
                                        <input type="number" min="1" class="form-control form-control-sm profile-page-input" data-profile-id="${group.profil_id}" style="width:76px" value="1">
                                        <button type="button" class="btn btn-outline-secondary btn-sm profile-page-next" data-profile-id="${group.profil_id}">Next</button>
                                    </div>
                                </div>
                                <div class="payroll-profile-scroll-top" data-profile-scroll-top="${group.profil_id}">
                                    <div class="payroll-profile-scroll-spacer"></div>
                                </div>
                                <div class="table-responsive payroll-profile-table-wrap" data-profile-scroll-body="${group.profil_id}">
                                    <table class="table table-hover align-middle payroll-profile-table ${pph21Disabled ? 'is-pph21-disabled' : ''}">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" class="profile-check-all" data-profile-id="${group.profil_id}"></th>
                                                <th>No Finger</th>
                                                <th>Nama</th>
                                                <th>Status</th>
                                                <th class="text-end">Netto</th>
                                                <th>Profil Gaji</th>
                                                <th>Komponen</th>
                                                <th>Tgl Acuan Siklus</th>
                                                <th>Jatuh Tempo Bayar</th>
                                                <th>Periode Bayar</th>
                                                <th>Approved Attendance</th>
                                                <th>Rincian HK/Alpha/Cuti/OT</th>
                                                <th class="text-end">Bruto</th>
                                                <th class="text-end payroll-pph21-column">PPh21</th>
                                                <th class="text-end">BPJS</th>
                                                <th class="text-end">Overtime</th>
                                                <th class="text-end">Reimburse</th>
                                                <th>Penanda Bulan</th>
                                                <th>Status Bayar</th>
                                                <th>Terakhir Dibayar</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>${rowsHtml || '<tr><td colspan="21" class="text-center text-muted py-3">Tidak ada data.</td></tr>'}</tbody>
                                    </table>
                                </div>
                                <div class="payroll-profile-footer">
                                    <div class="payroll-table-info" data-profile-page-info="${group.profil_id}">Halaman 0 / 0</div>
                                    <div class="payroll-profile-pager">
                                        <button type="button" class="btn btn-outline-secondary btn-sm profile-page-prev" data-profile-id="${group.profil_id}">Previous</button>
                                        <input type="number" min="1" class="form-control form-control-sm profile-page-input" data-profile-id="${group.profil_id}" style="width:76px" value="1">
                                        <button type="button" class="btn btn-outline-secondary btn-sm profile-page-next" data-profile-id="${group.profil_id}">Next</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');
                $('#payrollProfileGroups').html(html);
                syncProfileScrollbars();
                groups.forEach((group) => updateProfilePagination(group.profil_id, 1));
            };
            const syncProfileScrollbars = () => {
                $('.payroll-profile-card').each(function () {
                    const $card = $(this);
                    const $top = $card.find('.payroll-profile-scroll-top');
                    const $body = $card.find('.payroll-profile-table-wrap');
                    const tableWidth = $card.find('.payroll-profile-table').outerWidth() || 1120;
                    $top.find('.payroll-profile-scroll-spacer').width(tableWidth);
                    let syncing = false;
                    $top.off('scroll.profileSync').on('scroll.profileSync', function () {
                        if (syncing) return;
                        syncing = true;
                        $body.scrollLeft(this.scrollLeft);
                        syncing = false;
                    });
                    $body.off('scroll.profileSync').on('scroll.profileSync', function () {
                        if (syncing) return;
                        syncing = true;
                        $top.scrollLeft(this.scrollLeft);
                        syncing = false;
                    });
                });
            };
            const updateProfilePagination = (profilId, page = 1) => {
                const pageSize = 25;
                const $rows = $(`[data-profile-row="${profilId}"]`).filter(function () {
                    return $(this).data('filtered-out') !== 1;
                });
                const total = $rows.length;
                const pages = Math.max(1, Math.ceil(total / pageSize));
                const safePage = Math.max(1, Math.min(Number(page || 1), pages));
                $(`[data-profile-card="${profilId}"]`).data('page', safePage);
                $(`[data-profile-row="${profilId}"]`).hide();
                $rows.slice((safePage - 1) * pageSize, safePage * pageSize).show();
                $(`[data-profile-page-info="${profilId}"]`).text(`Halaman ${total ? safePage : 0} / ${total ? pages : 0} | ${total} data`);
                $(`[data-profile-page-info-top="${profilId}"]`).text(`Halaman ${total ? safePage : 0} / ${total ? pages : 0} | ${total} data`);
                $(`.profile-page-input[data-profile-id="${profilId}"]`).val(total ? safePage : 0).attr('max', total ? pages : 0);
                $(`.profile-page-prev[data-profile-id="${profilId}"]`).prop('disabled', safePage <= 1 || !total);
                $(`.profile-page-next[data-profile-id="${profilId}"]`).prop('disabled', safePage >= pages || !total);
            };

            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: '135px' },
                    { targets: 5, width: '220px' },
                    { targets: 6, width: '300px' },
                    { targets: 7, width: '105px' },
                    { targets: 8, width: '135px' },
                    { targets: 9, width: '145px' },
                    { targets: 10, width: '150px' },
                    { targets: 11, width: '130px' },
                    { targets: 12, width: '125px', className: 'payroll-pph21-column' },
                    { targets: 13, width: '190px' },
                    { targets: 14, width: '120px' },
                    { targets: 15, width: '120px' },
                    { targets: 16, width: '135px' },
                    { targets: 17, width: '150px' },
                    { targets: 18, width: '120px' },
                    { targets: 19, width: '130px' },
                    { targets: 20, width: '320px' },
                ],
                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: null, render: (r) => `<strong>Rp ${Number(r.net_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>` },
                    { data: 'profil_gaji', render: (v) => `<div class="payroll-wrap-cell">${escapeHtml(v || '-')}</div>` },
                    { data: null, render: (r) => renderPayrollComponentCell(r) },
                    { 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) => `<strong>Rp ${Number(r.overtime_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong><br><small class="text-muted">${Number(r.weighted_overtime_hours ?? r.overtime_hours ?? 0).toFixed(2)} jam</small>` },
                    { data: null, render: (r) => `Rp ${Number(r.reimburse_nominal || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` },
                    { 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(r.profil_bulan_id || $('#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>`);
                            const zeroActions = isZeroAttendanceRow(r) ? `
                                <button class="btn btn-sm btn-outline-warning btn-zero-attendance-check" data-id="${r.assignment_id}"><i class="fas fa-search"></i>Cek Kehadiran</button>
                                <button class="btn btn-sm btn-outline-danger btn-zero-remove-profile" data-id="${r.assignment_id}"><i class="fas fa-user-minus"></i>Hapus Profil</button>
                                <button class="btn btn-sm btn-danger btn-zero-resign" data-id="${r.assignment_id}"><i class="fas fa-user-slash"></i>Resign</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}
                                ${zeroActions}
                                ${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);
            });
            $(document).on('click', '.btn-payroll-employee-detail', function () {
                const id = Number($(this).data('id') || 0);
                const row = (rawRows || []).find((item) => Number(item.assignment_id) === id)
                    || (rows || []).find((item) => Number(item.assignment_id) === id);
                showPayrollEmployeeDetail(row);
            });
            $('#payrollEmployeeDetailSave').on('click', function () {
                const row = currentPayrollDetailRow;
                const assignmentId = Number($('#payrollDetailAssignmentId').val() || 0);
                if (!row || !assignmentId) {
                    Swal.fire('Warning', 'Data karyawan belum valid.', 'warning');
                    return;
                }
                const payload = {
                    karyawan_id: row.karyawan_id,
                    profil_jam_kerja_id: $('#payrollDetailProfilJamKerjaId').val() || '',
                    shift_mode: row.shift_mode || 'fixed',
                    profil_jam_kerja_id_alt: $('#payrollDetailProfilJamKerjaAltId').val() || '',
                    rotation_anchor_date: row.rotation_anchor_date || '',
                    rotation_days: row.rotation_days || 7,
                    profil_gaji_id: $('#payrollDetailProfilGajiId').val() || '',
                    payroll_hk_basis_mode: $('#payrollDetailHkBasisMode').val() || 'auto',
                    payable_rule_id: $('#payrollDetailPayableRuleId').val() || '',
                    payroll_pay_mode: $('#payrollDetailPayMode').val() || 'normal',
                    payroll_report_only: $('#payrollDetailPayMode').val() === 'report_only' ? 1 : 0,
                    profil_perkalian_jam_id: $('#payrollDetailProfilPerkalianJamId').val() || '',
                    rounding_rule_id: $('#payrollDetailRoundingRuleId').val() || '',
                    overtime_auto_without_spl: $('#payrollDetailAutoOt').is(':checked') ? 1 : 0,
                    auto_no_rest_normal_included: $('#payrollDetailNoRestNormal').is(':checked') ? 1 : 0,
                    auto_no_rest_skip_break: $('#payrollDetailNoRestSkip').is(':checked') ? 1 : 0,
                    contract_no: row.contract_no || 1,
                    contract_start_date: row.contract_start_date || '',
                    contract_end_date: row.assignment_contract_end_date || '',
                    contract_completed: row.contract_completed ? 1 : 0,
                    is_active: 1
                };
                const $btn = $(this);
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
                $.ajax({
                    url: `{{ url('/master-profil-bulan/assignments') }}/${assignmentId}`,
                    method: 'PUT',
                    data: payload
                })
                    .done(() => {
                        bootstrap.Modal.getOrCreateInstance(document.getElementById('payrollEmployeeDetailModal')).hide();
                        Swal.fire('Success', 'Setting payroll karyawan tersimpan.', 'success');
                        loadData({ force: true });
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan setting payroll.', 'error');
                    })
                    .always(() => {
                        $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan');
                    });
            });
            $('#payrollOverrideGroup').on('change', fillPayrollOverrideComponents);
            $('#btnPayrollOverrideReload').on('click', loadPayrollOverrides);
            $('#btnPayrollOverrideAdd').on('click', function () {
                const assignmentId = currentPayrollAssignmentId();
                const group = $('#payrollOverrideGroup').val() || 'pendapatan';
                const componentId = $('#payrollOverrideComponentId').val() || '';
                const calcType = $('#payrollOverrideCalcType').val() || 'fixed';
                const value = $('#payrollOverrideAmount').val() || '';
                if (!assignmentId || !componentId || value === '') {
                    Swal.fire('Warning', 'Komponen dan nilai wajib diisi.', 'warning');
                    return;
                }
                const payload = {
                    component_group: group,
                    komponen_pendapatan_id: group === 'pendapatan' ? componentId : '',
                    komponen_potongan_id: group === 'potongan' ? componentId : '',
                    calc_type: calcType,
                    amount: calcType === 'fixed' ? value : '',
                    percent_value: calcType === 'percent' ? value : '',
                    percent_base: 'gaji_pokok',
                    effective_start: $('#payrollOverrideStart').val() || '',
                    effective_end: $('#payrollOverrideEnd').val() || '',
                    notes: $('#payrollOverrideNotes').val() || '',
                    is_active: 1
                };
                const $btn = $(this);
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
                $.post(`{{ url('/master-profil-bulan/assignments') }}/${assignmentId}/overrides`, payload)
                    .done(() => {
                        $('#payrollOverrideAmount').val('');
                        $('#payrollOverrideNotes').val('');
                        loadPayrollOverrides();
                        loadData({ force: true });
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal tambah override.', 'error'))
                    .always(() => $btn.prop('disabled', false).html('<i class="fas fa-plus"></i> Add'));
            });
            $(document).on('click', '.btn-payroll-override-delete', function () {
                const id = Number($(this).data('id') || 0);
                if (!id) return;
                Swal.fire({
                    title: 'Hapus override?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({ url: `{{ url('/master-profil-bulan/overrides') }}/${id}`, type: 'DELETE' })
                        .done(() => {
                            loadPayrollOverrides();
                            loadData({ force: true });
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus override.', 'error'));
                });
            });
            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...',
                    closeOnSelect: false,
                    dropdownAutoWidth: false,
                    templateResult: (state) => {
                        if (!state.id || !state.element) return state.text;
                        const $el = $(state.element);
                        const isSub = Number($el.data('is-sub') || 0) === 1;
                        const label = String(state.text || '').replace(/^\|__\s*/, '');
                        return $(`
                            <div class="d-flex align-items-center gap-2 ${isSub ? 'ps-3' : ''}">
                                <span class="font-monospace ${isSub ? 'text-warning' : 'text-primary'}">${isSub ? '|__' : 'MAIN'}</span>
                                <span class="flex-grow-1">${escapeHtml(label)}</span>
                                <span class="badge ${isSub ? 'bg-warning text-dark' : 'bg-primary'}">${isSub ? 'SUB' : 'MAIN'}</span>
                            </div>
                        `);
                    },
                    templateSelection: (state) => state.text,
                });
            };

            const loadRefs = () => $.getJSON('{{ route('penggajian.refs') }}')
                .done((resp) => {
                    refs = resp.data || refs;
                    $('#profilBulanId').html((refs.profil_bulans || []).map((p) => `
                        <option value="${p.id}" data-is-sub="${p.is_sub ? 1 : 0}" data-profile-kind="${escapeHtml(p.profile_kind || 'main')}">${escapeHtml(profilBulanLabel(p))}</option>
                    `).join(''));
                    if ((refs.profil_bulans || []).length) {
                        $('#profilBulanId').val([String(refs.profil_bulans[0].id)]);
                    }
                    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 startProfileProcess = (profilId, options = {}) => {
                const dfd = $.Deferred();
                $.post('{{ route('penggajian.process.start') }}', {
                    profil_bulan_id: profilId,
                    pay_date: $('#payDate').val(),
                    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) {
                        dfd.reject({ message: 'Job payroll tidak valid.' });
                        return;
                    }
                    const timer = setInterval(() => {
                        $.getJSON(`{{ url('/penggajian/process') }}/${job.id}/status`)
                            .done((statusResp) => {
                                const statusJob = statusResp.data || {};
                                if (statusJob.status === 'done') {
                                    clearInterval(timer);
                                    $.getJSON(`{{ url('/penggajian/process') }}/${job.id}/result`)
                                        .done((resultResp) => dfd.resolve(resultResp))
                                        .fail((xhr) => {
                                            if (xhr.status === 409 && xhr.responseJSON?.stale_snapshot && !options.__staleRetry) {
                                                setLoadingProgress(4, 'Snapshot lama terdeteksi. Rebuild ulang profil ini...', { force: true });
                                                startProfileProcess(profilId, { ...options, force: true, __staleRetry: true })
                                                    .done((retryResp) => dfd.resolve(retryResp))
                                                    .fail((retryErr) => dfd.reject(retryErr));
                                                return;
                                            }
                                            dfd.reject(xhr.responseJSON || { message: 'Gagal ambil hasil payroll.' });
                                        });
                                    return;
                                }
                                if (['failed', 'cancelled'].includes(statusJob.status)) {
                                    clearInterval(timer);
                                    dfd.reject({ message: statusJob.error_message || 'Proses payroll gagal.' });
                                }
                            })
                            .fail((xhr) => {
                                clearInterval(timer);
                                dfd.reject(xhr.responseJSON || { message: 'Gagal membaca status payroll.' });
                            });
                    }, 1500);
                }).fail((xhr) => dfd.reject(xhr.responseJSON || { message: 'Gagal membuat proses payroll.' }));
                return dfd.promise();
            };

            const loadGroupedData = async (profilIds, options = {}) => {
                const token = ++payrollLoadToken;
                const payDate = $('#payDate').val();
                if (!profilIds.length || !payDate) {
                    Swal.fire('Warning', 'Profil bulan dan tanggal proses wajib diisi.', 'warning');
                    return;
                }
                const $btn = $('#btnLoad');
                const oldBtnHtml = $btn.html();
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Loading group...');
                selectedAssignmentIds.clear();
                rawRows = [];
                rows = [];
                table.clear().draw();
                $('#checkAllRows').prop('checked', false);
                renderProfileGroups([]);
                renderExpenseSummary([]);
                startPayrollLoading();
                const groups = new Array(profilIds.length);
                let completedGroups = 0;
                try {
                    const queue = profilIds.map((profilId, index) => ({ profilId, index }));
                    const runGroup = async ({ profilId, index }) => {
                        const profil = profileById(profilId);
                        const basePct = Math.round((completedGroups / profilIds.length) * 85);
                        setLoadingProgress(basePct, `Memproses group ${index + 1}/${profilIds.length}: ${profilBulanLabel(profil || {})}`, { force: true });
                        const resp = await startProfileProcess(profilId, options);
                        if (token !== payrollLoadToken) return;
                        const pph21Enabled = (resp.meta?.profil?.pph21_enabled !== undefined)
                            ? ![false, 0, '0'].includes(resp.meta.profil.pph21_enabled)
                            : profilPph21Enabled(profilId);
                        const groupRows = (resp.data || []).map((row) => ({
                            ...row,
                            pph21_enabled: row.pph21_enabled === undefined
                                ? pph21Enabled
                                : ![false, 0, '0'].includes(row.pph21_enabled),
                        }));
                        groups[index] = { profil_id: profilId, profil, rows: groupRows, meta: resp.meta || {} };
                        completedGroups++;
                        setLoadingProgress(Math.round((completedGroups / profilIds.length) * 92), `Selesai ${completedGroups}/${profilIds.length} group payroll.`, { force: true });
                    };
                    const workerCount = Math.min(2, queue.length);
                    await Promise.all(Array.from({ length: workerCount }, async () => {
                        while (queue.length) {
                            const item = queue.shift();
                            if (!item || token !== payrollLoadToken) return;
                            await runGroup(item);
                        }
                    }));
                    if (token !== payrollLoadToken) return;
                    const readyGroups = groups.filter(Boolean);
                    rawRows = readyGroups.flatMap((group) => group.rows);
                    const paidFilter = $('#paidFilter').val() || 'all';
                    readyGroups.forEach((group) => {
                        group.rows = group.rows.filter((r) => {
                            if (paidFilter === 'paid') return !!r.is_paid;
                            if (paidFilter === 'unpaid') return !r.is_paid;
                            return true;
                        });
                    });
                    rows = readyGroups.flatMap((group) => group.rows);
                    table.clear().rows.add(rows).draw();
                    window.setTimeout(() => table.columns.adjust(), 0);
                    renderProfileGroups(readyGroups);
                    renderExpenseSummary(rows);
                    const totals = rowsSummary(rows);
                    $('#summaryText').text(`Mode group per profil | Profil dipilih: ${profilIds.length} | Karyawan: ${rows.length} | Terbayar: ${totals.paid} | Belum: ${totals.unpaid}`);
                    finishPayrollLoading(rows.length);
                } catch (err) {
                    if (token !== payrollLoadToken) return;
                    failPayrollLoading(err?.message || 'Load group payroll gagal.');
                    Swal.fire('Error', err?.message || 'Load group payroll gagal.', 'error');
                } finally {
                    if (token === payrollLoadToken) {
                        $btn.prop('disabled', false).html(oldBtnHtml);
                    }
                }
            };

            const loadData = (options = {}) => {
                const token = ++payrollLoadToken;
                const profilIds = selectedProfilIds();
                if (profilIds.length > 1) {
                    loadGroupedData(profilIds, options);
                    return;
                }
                const profilId = profilIds[0] || '';
                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) => {
                    if (token !== payrollLoadToken) return;
                    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(rawRows.some((row) => row.pph21_enabled));

                    // 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))));
                        renderExpenseSummary(rows);

                        const summary = resp.meta?.summary || {};
                        const profil = resp.meta?.profil || {};
                        renderProfileGroups([{
                            profil_id: profil.id || profilId,
                            profil: profileById(profil.id || profilId) || profil,
                            rows,
                            meta: resp.meta || {},
                        }]);
                        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 profileList = Array.isArray(resp.meta?.profiles) && resp.meta.profiles.length > 0
                            ? resp.meta.profiles.map((p) => p.code || p.name || '-').join(', ')
                            : `${profil.code || '-'} (${profil.start_date || '-'} s/d ${profil.end_date || '-'})`;
                        const shownCount = rows.length;
                        $('#summaryText').text(`${modeText} | Filter Siklus: ${cycleFilter} | ${pphText}${versionText} | Profil: ${profileList} | 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 (token !== payrollLoadToken) return;
                            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) => {
                            if (token !== payrollLoadToken) return;
                            const job = resp.data || {};
                            const status = (job.status || '').toString();
                            const pct = Number(job.progress_percent || 0);
                            const processedRaw = Number(job.processed_users || 0);
                            const totalRaw = Number(job.total_users || 0);
                            const isEstimatedProgress = !!job.progress_is_estimated;
                            const total = totalRaw.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 estimatedProcessed = status === 'processing' && processedRaw <= 0 && totalRaw > 0
                                ? Math.max(1, Math.min(totalRaw - 1, Math.floor(totalRaw * visualPct / 100)))
                                : processedRaw;
                            const processed = `${(isEstimatedProgress || (processedRaw <= 0 && status === 'processing')) ? '~' : ''}${estimatedProcessed.toLocaleString('id-ID')}`;
                            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) => {
                            if (token !== payrollLoadToken) return;
                            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') {
                        unlockButton();
                        return;
                    }
                    failPayrollLoading('Load payroll gagal. Silakan cek filter atau ulangi proses.');
                    unlockButton();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Failed load payroll data', 'error');
                });
            };

	            // Tampilkan pakai snapshot aktif; perubahan data penting sudah expire snapshot sendiri.
	            $('#btnLoad').on('click', function () {
                    loadData();
                });
	            $('#profilBulanId, #payDate, #onlyDue, #monthlyView, #cycleFilter').on('change change.__scope', function () {
                    cancelActivePayrollLoad();
                    if (this.id === 'profilBulanId') {
                        setPph21ColumnState(profilPph21Enabled($(this).val()));
                    }
                    rawRows = [];
                    rows = [];
                    selectedAssignmentIds.clear();
                    table.clear().draw();
                    renderProfileGroups([]);
                    $('#checkAllRows').prop('checked', false);
                    renderExpenseSummary([]);
	            });

	            const buildExportParams = () => {
	                const profilId = selectedProfilIds()[0] || '';
	                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()}`;
	            });

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

	            $('#btnExportTemplatePayroll').on('click', async function () {
	                const params = buildExportParams();
	                if (!params) return;
	                params.set('format', 'xlsx');
	                params.set('template_layout', '1');
	                $('#exportOverlayMask').addClass('is-active');
	                try {
	                    const resp = await fetch(`{{ route('penggajian.export_excel') }}?${params.toString()}`);
	                    if (!resp.ok) throw new Error('Export gagal (HTTP ' + resp.status + ')');
	                    const disposition = resp.headers.get('Content-Disposition') || '';
	                    const match = disposition.match(/filename="?([^";\n]+)"?/i);
	                    const filename = match ? match[1] : 'template-payroll.xlsx';
	                    const blob = await resp.blob();
	                    const url = URL.createObjectURL(blob);
	                    const a = document.createElement('a');
	                    a.href = url; a.download = filename; a.click();
	                    URL.revokeObjectURL(url);
	                } catch (err) {
	                    Swal.fire('Gagal', 'Gagal mengunduh template: ' + (err.message || err), 'error');
	                } finally {
	                    $('#exportOverlayMask').removeClass('is-active');
	                }
	            });

                $('#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 = selectedProfilIds()[0] || '';
	                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 = selectedProfilIds()[0] || '';
                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');
            });

            $(document).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);
            });

            $(document).on('input', '.payroll-profile-search', function () {
                const profilId = String($(this).data('profile-id') || '');
                const q = String($(this).val() || '').toLowerCase().trim();
                $(`[data-profile-row="${profilId}"]`).each(function () {
                    const haystack = String($(this).data('search') || '');
                    $(this).data('filtered-out', (!q || haystack.includes(q)) ? 0 : 1);
                });
                updateProfilePagination(profilId, 1);
            });

            $(document).on('click', '.profile-page-prev,.profile-page-next', function () {
                const profilId = String($(this).data('profile-id') || '');
                const current = Number($(`[data-profile-card="${profilId}"]`).data('page') || 1);
                const next = $(this).hasClass('profile-page-next') ? current + 1 : current - 1;
                updateProfilePagination(profilId, next);
            });

            $(document).on('change keydown', '.profile-page-input', function (e) {
                if (e.type === 'keydown' && e.key !== 'Enter') return;
                const profilId = String($(this).data('profile-id') || '');
                updateProfilePagination(profilId, Number($(this).val() || 1));
            });

            $(document).on('change', '.profile-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 profilId = String($(this).data('profile-id') || '');
                const $checks = $(`.profile-row-check[data-profile-id="${profilId}"]`);
                const allChecked = $checks.length > 0 && $checks.toArray().every((el) => $(el).is(':checked'));
                $(`.profile-check-all[data-profile-id="${profilId}"]`).prop('checked', allChecked);
            });

            $(document).on('change', '.profile-check-all', function () {
                const profilId = String($(this).data('profile-id') || '');
                const checked = $(this).is(':checked');
                $(`.profile-row-check[data-profile-id="${profilId}"]`).each(function () {
                    const id = Number($(this).data('id'));
                    $(this).prop('checked', checked);
                    if (id > 0) {
                        if (checked) selectedAssignmentIds.add(id);
                        else selectedAssignmentIds.delete(id);
                    }
                });
            });

            const selectedIdsForProfile = (profilId) => $(`.profile-row-check[data-profile-id="${profilId}"]:checked`)
                .toArray()
                .map((el) => Number($(el).data('id')))
                .filter((id) => id > 0);

            $(document).on('click', '.profile-bulk-cycle', function () {
                const ids = selectedIdsForProfile($(this).data('profile-id'));
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan di profil ini.', 'info');
                    return;
                }
                selectedAssignmentIds = new Set(ids);
                $('#cycleAssignmentId').val('');
                $('#cycleEmployee').val(`${ids.length} karyawan terpilih`);
                $('#cycleType').val('monthly');
                $('#cycleAnchorDate').val($('#payDate').val() || '');
                cycleModal.show();
            });

            $(document).on('click', '.profile-bulk-paid,.profile-bulk-unpaid', function () {
                const ids = selectedIdsForProfile($(this).data('profile-id'));
                const mark = $(this).hasClass('profile-bulk-paid');
                if (!ids.length) {
                    Swal.fire('Info', 'Pilih minimal 1 karyawan di profil ini.', 'info');
                    return;
                }
                Swal.fire({
                    title: mark ? 'Bulk Tandai Bayar?' : 'Bulk Batalkan Bayar?',
                    text: `${ids.length} karyawan pada profil ini akan diproses.`,
                    icon: mark ? 'question' : 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Proses',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    const actionLabel = mark ? 'Menandai bayar' : 'Membatalkan bayar';
                    $('#payrollLoadingCard').addClass('is-active');
                    setLoadingProgress(2, `${actionLabel} ${ids.length} karyawan...`);
                    startLoadingHeartbeat();
                    $.post(mark ? `{{ route('penggajian.mark_paid.bulk') }}` : `{{ route('penggajian.unmark_paid.bulk') }}`, {
                        assignment_ids: ids,
                        pay_date: $('#payDate').val(),
                        monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                    }).done((resp) => {
                        finishPayrollLoading();
                        loadData({ force: true });
                        setTimeout(() => {
                            Swal.fire('Success', resp?.message || 'Bulk berhasil', 'success');
                        }, 400);
                    }).fail((xhr) => {
                        finishPayrollLoading();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Bulk gagal', 'error');
                    });
                });
            });

            $(document).on('click', '.profile-export', function () {
                const params = buildExportParamsForProfile($(this).data('profile-id'));
                params.set('format', String($(this).data('format') || 'csv'));
                window.location.href = `{{ route('penggajian.export_excel') }}?${params.toString()}`;
            });
            $(document).on('click', '.profile-export-zero', function () {
                const params = buildExportParamsForProfile($(this).data('profile-id'));
                params.set('format', 'xlsx');
                params.set('zero_work_days', '1');
                window.location.href = `{{ route('penggajian.export_excel') }}?${params.toString()}`;
            });
            $(document).on('click', '.profile-slip', function () {
                const params = buildExportParamsForProfile($(this).data('profile-id'));
                params.set('format', 'xlsx');
                window.location.href = `{{ route('penggajian.export_slip_excel') }}?${params.toString()}`;
            });
            $(document).on('click', '.profile-pdf', function () {
                const params = buildExportParamsForProfile($(this).data('profile-id'));
                window.open(`{{ route('penggajian.export_pdf') }}?${params.toString()}`, '_blank');
            });

	            $(document).on('click', '.btnExportTemplatePayroll', async function () {
	                const params = buildExportParamsForProfile($(this).data('profile-id'));
	                if (!params) return;
	                params.set('format', 'xlsx');
	                params.set('template_layout', '1');
	                $('#exportOverlayMask').addClass('is-active');
	                try {
	                    const resp = await fetch(`{{ route('penggajian.export_excel') }}?${params.toString()}`);
	                    if (!resp.ok) throw new Error('Export gagal (HTTP ' + resp.status + ')');
	                    const disposition = resp.headers.get('Content-Disposition') || '';
	                    const match = disposition.match(/filename="?([^";\n]+)"?/i);
	                    const filename = match ? match[1] : 'template-payroll.xlsx';
	                    const blob = await resp.blob();
	                    const url = URL.createObjectURL(blob);
	                    const a = document.createElement('a');
	                    a.href = url; a.download = filename; a.click();
	                    URL.revokeObjectURL(url);
	                } catch (err) {
	                    Swal.fire('Gagal', 'Gagal mengunduh template: ' + (err.message || err), 'error');
	                } finally {
	                    $('#exportOverlayMask').removeClass('is-active');
	                }
	            });
            

            $('#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;
                    /* Tampilkan loading card seperti saat muat data */
                    $('#payrollLoadingCard').addClass('is-active');
                    setLoadingProgress(2, `Menandai ${ids.length} karyawan sebagai terbayar...`);
                    startLoadingHeartbeat();
                    $.post(`{{ route('penggajian.mark_paid.bulk') }}`, {
                        assignment_ids: ids,
                        pay_date: $('#payDate').val(),
                        monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                    }).done((resp) => {
                        finishPayrollLoading();
                        loadData({ force: true });
                        setTimeout(() => {
                            Swal.fire('Success', resp?.message || 'Bulk tandai bayar berhasil', 'success');
                        }, 400);
                    }).fail((xhr) => {
                        finishPayrollLoading();
                        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;
                    $('#payrollLoadingCard').addClass('is-active');
                    setLoadingProgress(2, `Membatalkan pembayaran ${ids.length} karyawan...`);
                    startLoadingHeartbeat();
                    $.post(`{{ route('penggajian.unmark_paid.bulk') }}`, {
                        assignment_ids: ids,
                        pay_date: $('#payDate').val(),
                        monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                    }).done((resp) => {
                        finishPayrollLoading();
                        loadData({ force: true });
                        setTimeout(() => {
                            Swal.fire('Success', resp?.message || 'Bulk batal bayar berhasil', 'success');
                        }, 400);
                    }).fail((xhr) => {
                        finishPayrollLoading();
                        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;
                }
                cycleModal.hide();
                $('#payrollLoadingCard').addClass('is-active');
                setLoadingProgress(2, `Menyimpan siklus ${ids.length} karyawan...`);
                startLoadingHeartbeat();
                $.ajax({
                    url: `{{ route('penggajian.cycle.bulk') }}`,
                    type: 'PUT',
                    data: { ...payload, assignment_ids: ids }
                }).done((resp) => {
                    finishPayrollLoading();
                    loadData({ force: true });
                    setTimeout(() => {
                        Swal.fire('Success', resp?.message || 'Bulk update berhasil', 'success');
                    }, 400);
                }).fail((xhr) => {
                    finishPayrollLoading();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Bulk save failed', 'error');
                });
            });

            $(document).on('click', '.btn-mark-paid', function () {
                const assignmentId = Number($(this).data('id'));
                if (!assignmentId) return;
                $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Proses...');
                $('#payrollLoadingCard').addClass('is-active');
                setLoadingProgress(5, 'Menandai bayar 1 karyawan...');
                startLoadingHeartbeat();
                $.post(`{{ route('penggajian.mark_paid') }}`, {
                    assignment_id: assignmentId,
                    pay_date: $('#payDate').val(),
                    monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                }).done((resp) => {
                    finishPayrollLoading();
                    loadData({ force: true });
                    setTimeout(() => {
                        Swal.fire('Success', resp?.message || 'Status terbayar disimpan', 'success');
                    }, 400);
                }).fail((xhr) => {
                    finishPayrollLoading();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal tandai bayar', 'error');
                });
            });

            $(document).on('click', '.btn-unmark-paid', function () {
                const assignmentId = Number($(this).data('id'));
                if (!assignmentId) return;
                $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Proses...');
                $('#payrollLoadingCard').addClass('is-active');
                setLoadingProgress(5, 'Membatalkan bayar 1 karyawan...');
                startLoadingHeartbeat();
                $.post(`{{ route('penggajian.unmark_paid') }}`, {
                    assignment_id: assignmentId,
                    pay_date: $('#payDate').val(),
                    monthly_view: $('#monthlyView').is(':checked') ? 1 : 0
                }).done((resp) => {
                    finishPayrollLoading();
                    loadData({ force: true });
                    setTimeout(() => {
                        Swal.fire('Success', resp?.message || 'Status bayar dibatalkan', 'success');
                    }, 400);
                }).fail((xhr) => {
                    finishPayrollLoading();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal batalkan bayar', 'error');
                });
            });

            $(document).on('click', '.btn-zero-attendance-check', function () {
                const assignmentId = Number($(this).data('id'));
                const row = (rawRows || []).find((x) => Number(x.assignment_id) === assignmentId) || rows.find((x) => Number(x.assignment_id) === assignmentId);
                if (!row) return;
                const params = new URLSearchParams({
                    kd_finger: String(row.finger_id || row.employee_code || ''),
                    start_date: String(row.period_start || ''),
                    end_date: String(row.period_end || ''),
                });
                window.open(`{{ url('/public/attendance-check') }}?${params.toString()}`, '_blank');
            });

            $(document).on('click', '.btn-zero-remove-profile', function () {
                const assignmentId = Number($(this).data('id'));
                const row = (rawRows || []).find((x) => Number(x.assignment_id) === assignmentId) || rows.find((x) => Number(x.assignment_id) === assignmentId);
                if (!row) return;
                Swal.fire({
                    title: 'Hapus dari profil bulan?',
                    html: `<div class="text-start"><strong>${escapeHtml(row.employee_name || '-')}</strong><br><small>No Finger: ${escapeHtml(row.finger_id || row.employee_code || '-')}</small><br><br>Assignment akan dihapus dari profil bulan aktif. Data master karyawan tidak diubah.</div>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-profil-bulan/assignments') }}/${assignmentId}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        selectedAssignmentIds.delete(assignmentId);
                        loadData({ force: true });
                        Swal.fire('Success', resp?.message || 'Assignment profil bulan dihapus', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus assignment', 'error'));
                });
            });

            $(document).on('click', '.btn-zero-resign', function () {
                const assignmentId = Number($(this).data('id'));
                const row = (rawRows || []).find((x) => Number(x.assignment_id) === assignmentId) || rows.find((x) => Number(x.assignment_id) === assignmentId);
                if (!row || !row.karyawan_id) return;
                const defaultDate = row.contract_end_date || row.period_start || new Date().toISOString().slice(0, 10);
                Swal.fire({
                    title: 'Resignkan karyawan?',
                    html: `
                        <div class="text-start">
                            <strong>${escapeHtml(row.employee_name || '-')}</strong><br>
                            <small>No Finger: ${escapeHtml(row.finger_id || row.employee_code || '-')}</small>
                            <label class="form-label mt-3">Tanggal resign</label>
                            <input type="date" id="zeroResignDate" class="form-control" value="${escapeHtml(defaultDate)}">
                            <label class="form-label mt-2">Alasan</label>
                            <input type="text" id="zeroResignReason" class="form-control" value="0 hari kerja pada payroll; perlu resign/nonaktif" maxlength="255">
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Master karyawan saja',
                    cancelButtonText: 'Batal',
                    denyButtonText: 'Master + hapus profil',
                    showDenyButton: true,
                    preConfirm: () => {
                        const resignDate = ($('#zeroResignDate').val() || '').toString();
                        const reason = ($('#zeroResignReason').val() || '').toString();
                        if (!resignDate) {
                            Swal.showValidationMessage('Tanggal resign wajib diisi.');
                            return false;
                        }
                        return { resignDate, reason, mode: 'master_only' };
                    },
                    preDeny: () => {
                        const resignDate = ($('#zeroResignDate').val() || '').toString();
                        const reason = ($('#zeroResignReason').val() || '').toString();
                        if (!resignDate) {
                            Swal.showValidationMessage('Tanggal resign wajib diisi.');
                            return false;
                        }
                        return { resignDate, reason, mode: 'master_and_profile' };
                    }
                }).then((res) => {
                    const value = res.value || {};
                    if (!res.isConfirmed && !res.isDenied) return;
                    $.post(`{{ url('/master-karyawan') }}/${Number(row.karyawan_id)}/resign`, {
                        resign_date: value.resignDate,
                        reason: value.reason
                    }).done((resp) => {
                        const finish = () => {
                            selectedAssignmentIds.delete(assignmentId);
                            loadData({ force: true });
                            Swal.fire('Success', resp?.message || 'Karyawan berhasil diresign', 'success');
                        };
                        if (value.mode !== 'master_and_profile') {
                            finish();
                            return;
                        }
                        $.ajax({
                            url: `{{ url('/master-profil-bulan/assignments') }}/${assignmentId}`,
                            type: 'DELETE'
                        }).always(finish);
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal resign karyawan', '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.');
                renderExpenseSummary([]);
            });
        });
    </script>
@endpush