@extends('layouts.adminlte')

@section('title', 'MASTER KARYAWAN')
@section('page_title', 'MASTER KARYAWAN')

@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/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 38px;
        }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
        }
        .select2-container--bootstrap-5 .select2-selection__arrow {
            height: 36px;
        }
        .modal .select2-container {
            width: 100% !important;
        }
        .modal .select2-container--open,
        .modal .select2-dropdown {
            z-index: 2000 !important;
        }
        .modal .select2-selection,
        .modal .select2-selection__rendered,
        .modal .select2-selection__arrow {
            pointer-events: auto !important;
        }
        #karyawanModal .modal-dialog,
        #transferAreaModal .modal-dialog {
            max-width: min(1100px, calc(100vw - 2rem));
            margin: 1rem auto;
        }
        #karyawanModal .modal-content,
        #transferAreaModal .modal-content {
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 2rem);
        }
        #karyawanModal .modal-header,
        #transferAreaModal .modal-header {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #fff;
            border-bottom: 1px solid #dee2e6;
        }
        #karyawanModal #karyawanForm,
        #transferAreaModal #transferAreaForm {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
        }
        #karyawanModal .modal-body,
        #transferAreaModal .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        #karyawanModal .modal-footer,
        #transferAreaModal .modal-footer {
            position: sticky;
            bottom: 0;
            flex-shrink: 0;
            z-index: 5;
            background: #fff;
            border-top: 1px solid #dee2e6;
        }
        .management-shortcut-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            font-weight: 600;
            text-decoration: none;
        }
        .employee-form-section {
            border: 1px solid #e9ecef;
            border-radius: 1rem;
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
            padding: 1rem 1rem 1.1rem;
            box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
        }
        .employee-form-section + .employee-form-section {
            margin-top: 1rem;
        }
        .employee-form-section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            padding-bottom: .75rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #edf1f5;
        }
        .employee-form-section-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: #1f2937;
        }
        .employee-form-section-subtitle {
            display: block;
            margin-top: .2rem;
            color: #6b7280;
            font-size: .85rem;
            line-height: 1.4;
        }
        .employee-form-badge {
            display: inline-flex;
            align-items: center;
            padding: .35rem .65rem;
            border-radius: 999px;
            background: #eef6ff;
            color: #1d4ed8;
            font-size: .75rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .resign-reason-tag {
            --bs-btn-padding-y: .12rem;
            --bs-btn-padding-x: .42rem;
            --bs-btn-font-size: .68rem;
            --bs-btn-border-radius: 999px;
            line-height: 1.25;
            white-space: nowrap;
        }
        .resign-reason-tag.is-active {
            color: #fff;
            background: #dc3545;
            border-color: #dc3545;
        }
        .employee-switch-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            min-height: 100%;
            padding: .9rem 1rem;
            border-radius: .85rem;
            border: 1px dashed #cfd8e3;
            background: #f8fafc;
        }
        .employee-switch-copy {
            min-width: 0;
        }
        .employee-switch-copy strong {
            display: block;
            font-size: .95rem;
            color: #111827;
        }
        .employee-switch-copy small {
            display: block;
            color: #6b7280;
            line-height: 1.45;
        }
        .employee-note {
            margin-top: .35rem;
            color: #6b7280;
            font-size: .8rem;
            line-height: 1.45;
        }
        .employee-setting-panel {
            padding: .9rem 1rem;
            border: 1px dashed #cfe0ff;
            border-radius: .9rem;
            background: #f8fbff;
        }
        .employee-setting-panel .form-label {
            font-size: .82rem;
            font-weight: 700;
        }
        .employee-suggest-panel {
            padding: .9rem 1rem;
            border: 1px dashed #bfe7d4;
            border-radius: .9rem;
            background: #f8fffb;
        }
        .employee-suggest-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: .75rem;
        }
        .employee-suggest-warning {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .28rem .65rem;
            border-radius: 999px;
            background: #fff4e6;
            color: #c05621;
            border: 1px solid #ffd8a8;
            font-size: .74rem;
            font-weight: 700;
        }
        .employee-suggest-warning.is-muted {
            background: #edf2f7;
            color: #4a5568;
            border-color: #e2e8f0;
        }
        .employee-suggest-warning.is-alert {
            background: #fff5f5;
            color: #c53030;
            border-color: #feb2b2;
            box-shadow: 0 0 0 0.15rem rgba(197, 48, 48, 0.08);
        }
        .employee-suggest-toggle {
            min-width: 132px;
        }
        .employee-suggest-mini-summary {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            margin-top: .35rem;
        }
        .employee-suggest-mini-summary .mini-pill {
            display: inline-flex;
            align-items: center;
            gap: .28rem;
            padding: .18rem .5rem;
            border-radius: 999px;
            font-size: .7rem;
            font-weight: 700;
            border: 1px solid #dfe6ee;
            background: #ffffff;
            color: #475569;
        }
        .employee-suggest-mini-summary .mini-pill strong {
            font-size: .76rem;
        }
        .employee-suggest-body.d-none {
            display: none !important;
        }
        .employee-suggest-summary {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .25rem .6rem;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            border: 1px solid transparent;
        }
        .employee-suggest-summary strong {
            font-size: .8rem;
        }
        .employee-suggest-summary.is-baru {
            background: #fff1f1;
            color: #c92a2a;
            border-color: #ffc9c9;
        }
        .employee-suggest-summary.is-menunggu {
            background: #fff9db;
            color: #8f5b00;
            border-color: #ffe066;
        }
        .employee-suggest-summary.is-mapped {
            background: #ebfbee;
            color: #2b8a3e;
            border-color: #b2f2bb;
        }
        .employee-suggest-summary.is-diabaikan {
            background: #f1f3f5;
            color: #495057;
            border-color: #dee2e6;
        }
        .employee-suggest-table td,
        .employee-suggest-table th {
            font-size: .83rem;
            vertical-align: top;
        }
        .employee-suggest-empty {
            padding: 1.2rem .5rem;
            color: #6c757d;
            text-align: center;
        }
        .candidate-review-box {
            border: 1px solid #e9ecef;
            border-radius: .75rem;
            padding: .85rem;
            background: #fff;
        }
        .candidate-review-box h6 {
            font-size: .86rem;
            font-weight: 700;
            margin-bottom: .55rem;
        }
        .candidate-review-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: .55rem;
        }
        .candidate-review-chip {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            border-radius: 999px;
            padding: .18rem .5rem;
            font-size: .72rem;
            font-weight: 600;
            background: #eef2ff;
            color: #364fc7;
        }
        .employee-name-alerts {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            margin-top: .2rem;
        }
        .employee-name-email {
            margin-top: .28rem;
        }
        .employee-name-email .copyable-cell {
            gap: .35rem;
        }
        .employee-bpjs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: .85rem;
        }
        .employee-bpjs-card {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: .8rem;
            min-height: 100%;
            padding: .95rem 1rem;
            border-radius: .95rem;
            border: 1px solid #dbe4ee;
            background: #fff;
            transition: all .18s ease;
            cursor: pointer;
        }
        .employee-bpjs-card:hover {
            border-color: #93c5fd;
            box-shadow: 0 10px 24px rgba(29, 78, 216, 0.08);
        }
        .employee-bpjs-card.is-checked {
            border-color: #86efac;
            background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
            box-shadow: 0 10px 24px rgba(34, 197, 94, 0.08);
        }
        .employee-bpjs-card .form-check-input {
            margin-top: .2rem;
            flex-shrink: 0;
        }
        .employee-bpjs-copy {
            min-width: 0;
            flex: 1 1 auto;
        }
        .employee-bpjs-code {
            display: inline-flex;
            align-items: center;
            padding: .2rem .5rem;
            border-radius: 999px;
            background: #eef6ff;
            color: #1d4ed8;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .02em;
            text-transform: uppercase;
        }
        .employee-bpjs-title {
            display: block;
            margin-top: .5rem;
            font-size: .95rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.35;
        }
        .employee-bpjs-helper {
            margin-top: .35rem;
            color: #6b7280;
            font-size: .79rem;
            line-height: 1.45;
        }
        .employee-bpjs-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            margin-top: .55rem;
        }
        .employee-bpjs-tag {
            display: inline-flex;
            align-items: center;
            padding: .18rem .5rem;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: .7rem;
            font-weight: 700;
        }
        .employee-bpjs-empty {
            padding: 1rem;
            border-radius: .85rem;
            border: 1px dashed #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            font-size: .88rem;
        }
        .employee-photo-panel {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: .85rem;
            min-height: 100%;
            border-radius: .9rem;
            border: 1px solid #edf1f5;
            background: #f8fafc;
        }
        .employee-photo-copy {
            flex: 1 1 auto;
            min-width: 0;
        }
        .employee-photo-actions {
            display: flex;
            gap: .5rem;
            margin-top: .75rem;
            flex-wrap: wrap;
        }
        .master-karyawan-grid-wrap {
            max-height: calc(100vh - 280px);
            overflow: auto;
            border: 1px solid #dee2e6;
            border-radius: .5rem;
            background: #fff;
        }
        .master-karyawan-top-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            border: 1px solid #dee2e6;
            border-bottom: 0;
            border-radius: .5rem .5rem 0 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            height: 18px;
        }
        .master-karyawan-top-scroll.is-hidden {
            display: none;
        }
        .master-karyawan-top-scroll-spacer {
            height: 1px;
        }
        .master-karyawan-top-scroll + .master-karyawan-grid-wrap {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .master-karyawan-table-toolbar .dataTables_length,
        .master-karyawan-table-toolbar .dataTables_info,
        .master-karyawan-table-toolbar .dataTables_paginate {
            margin: 0;
        }
        .master-karyawan-table-toolbar .dataTables_info {
            padding-top: 0;
        }
        .master-karyawan-table-toolbar .dataTables_paginate {
            padding-top: 0;
        }
        .master-karyawan-grid-wrap > .master-karyawan-table-toolbar,
        .master-karyawan-grid-wrap > .dataTables_length,
        .master-karyawan-grid-wrap > .dataTables_info,
        .master-karyawan-grid-wrap > .dataTables_paginate {
            display: none !important;
        }
        #karyawanTable {
            min-width: 3200px;
            border-collapse: separate;
            border-spacing: 0;
        }
        #karyawanTable th,
        #karyawanTable td {
            white-space: nowrap;
            background: #fff;
            vertical-align: middle;
            padding: .72rem .65rem;
        }
        #karyawanTable tbody tr.is-selected td {
            background: #eaf3ff;
        }
        #karyawanTable thead th {
            position: sticky;
            top: 0;
            z-index: 25;
            background: #fff;
            box-shadow: inset 0 -1px 0 #dee2e6;
            cursor: pointer;
        }
        #karyawanTable thead th:first-child,
        #karyawanTable thead th:last-child {
            cursor: default;
        }
        #karyawanTable th:nth-child(1),
        #karyawanTable td:nth-child(1) {
            position: sticky;
            left: 0;
            min-width: 42px;
            width: 42px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
        }
        #karyawanTable th:nth-child(2),
        #karyawanTable td:nth-child(2) {
            position: sticky;
            left: 42px;
            min-width: 190px;
            width: 190px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
        }
        #karyawanTable th:nth-child(3),
        #karyawanTable td:nth-child(3) {
            position: sticky;
            left: 232px;
            min-width: 260px;
            width: 260px;
            z-index: 26;
            box-shadow: 1px 0 0 #dee2e6;
            white-space: normal;
        }
        #karyawanTable th:nth-child(4),
        #karyawanTable td:nth-child(4) {
            min-width: 170px;
            width: 170px;
        }
        #karyawanTable th:nth-child(5),
        #karyawanTable td:nth-child(5) {
            min-width: 170px;
            width: 170px;
        }
        #karyawanTable th:nth-child(6),
        #karyawanTable td:nth-child(6) {
            min-width: 78px;
            width: 78px;
            text-align: center;
        }
        #karyawanTable th:nth-child(7),
        #karyawanTable td:nth-child(7) {
            min-width: 62px;
            width: 62px;
            text-align: center;
        }
        #karyawanTable th:nth-child(8),
        #karyawanTable td:nth-child(8) {
            min-width: 96px;
            width: 96px;
            text-align: center;
        }
        #karyawanTable th:last-child,
        #karyawanTable td:last-child {
            position: sticky;
            right: 0;
            z-index: 24;
            background: #fff;
            box-shadow: -1px 0 0 #dee2e6;
        }
        #karyawanTable thead th:nth-child(-n+3),
        #karyawanTable thead th:last-child {
            z-index: 30;
        }
        #karyawanTable td:nth-child(9),
        #karyawanTable th:nth-child(9) {
            min-width: 240px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(10),
        #karyawanTable th:nth-child(10) {
            min-width: 200px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(11),
        #karyawanTable th:nth-child(11) {
            min-width: 145px;
            width: 145px;
        }
        #karyawanTable td:nth-child(12),
        #karyawanTable th:nth-child(12) {
            min-width: 200px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(13),
        #karyawanTable th:nth-child(13),
        #karyawanTable td:nth-child(14),
        #karyawanTable th:nth-child(14) {
            min-width: 250px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(15),
        #karyawanTable th:nth-child(15),
        #karyawanTable td:nth-child(16),
        #karyawanTable th:nth-child(16) {
            min-width: 220px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(17),
        #karyawanTable th:nth-child(17) {
            min-width: 118px;
            width: 118px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(18),
        #karyawanTable th:nth-child(18) {
            min-width: 170px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(19),
        #karyawanTable th:nth-child(19) {
            min-width: 165px;
            white-space: normal;
        }
        #karyawanTable td:nth-child(20),
        #karyawanTable th:nth-child(20) {
            min-width: 180px;
            white-space: normal;
        }
        #karyawanTable td:last-child,
        #karyawanTable th:last-child {
            min-width: 210px;
            width: 210px;
        }
        .employee-line-clamp-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            white-space: normal;
            line-height: 1.35;
            max-height: calc(1.35em * 2);
        }
        .employee-primary-cell {
            font-weight: 600;
            color: #0f172a;
        }
        .employee-name-block {
            min-width: 0;
        }
        .employee-contract-row {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            min-width: 0;
        }
        .employee-contract-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 999px;
            flex: 0 0 auto;
            margin-top: .1rem;
            font-size: .8rem;
        }
        .employee-contract-icon.is-danger {
            background: #fee2e2;
            color: #b91c1c;
        }
        .employee-contract-icon.is-warning {
            background: #fef3c7;
            color: #b45309;
        }
        .employee-contract-subline {
            margin-top: .22rem;
            color: #b45309;
            font-size: .74rem;
            font-weight: 700;
            line-height: 1.3;
        }
        .employee-contract-subline.is-danger {
            color: #b91c1c;
        }
        .employee-contract-subline.is-warning {
            color: #b45309;
        }
        .employee-filter-note {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            min-height: 31px;
            font-size: .76rem;
            font-weight: 800;
            color: #8a3b00;
            background: linear-gradient(180deg, #fff0bf 0%, #ffe08a 100%);
            border: 1px solid #f2b948;
            border-radius: .85rem;
            padding: .38rem .72rem;
            box-shadow: 0 8px 18px rgba(242, 185, 72, 0.18);
        }
        .master-karyawan-filter-panel {
            padding: .68rem .78rem .72rem;
            border: 1px solid #d4deea;
            border-radius: .9rem;
            background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
            margin-bottom: .9rem;
        }
        .master-karyawan-filter-panel .row {
            --bs-gutter-x: .6rem;
            --bs-gutter-y: .45rem;
        }
        .master-karyawan-filter-panel .form-label {
            margin-bottom: .25rem;
            font-size: .76rem;
            font-weight: 800;
            color: #334155;
        }
        .master-karyawan-filter-panel .form-select-sm {
            min-height: 31px;
            padding-top: .24rem;
            padding-bottom: .24rem;
        }
        .master-karyawan-filter-panel .form-select-sm,
        .master-karyawan-filter-panel .form-control-sm {
            border-color: #bcccdc;
            color: #0f172a;
            background-color: #fff;
        }
        .master-karyawan-filter-panel .form-select-sm:focus,
        .master-karyawan-filter-panel .form-control-sm:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 .18rem rgba(37, 99, 235, 0.14);
        }
        #btnReloadKaryawanTable {
            border-color: #2563eb;
            color: #1d4ed8;
            font-weight: 700;
        }
        #btnApplyMainKeyword {
            background: #0f62fe;
            border-color: #0f62fe;
            font-weight: 700;
        }
        #btnResetMainKeyword {
            border-color: #94a3b8;
            color: #475569;
            font-weight: 700;
        }
        .master-karyawan-card {
            border: 1px solid #dbe4ee;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
        }
        .master-karyawan-card .card-header {
            padding: 1rem 1rem .8rem;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border-bottom: 1px solid #dde6f0;
        }
        .master-karyawan-title {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .master-karyawan-title-copy h3 {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
        }
        .master-karyawan-title-copy p {
            margin: .22rem 0 0;
            color: #64748b;
            font-size: .82rem;
        }
        .master-karyawan-toolbar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: .75rem;
            margin-top: .85rem;
        }
        .master-karyawan-toolbar-group {
            padding: .72rem .78rem;
            border: 1px solid #d8e3ef;
            border-radius: .95rem;
            background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        }
        .master-karyawan-toolbar-group-title {
            display: flex;
            align-items: center;
            gap: .42rem;
            margin-bottom: .55rem;
            color: #334155;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
        }
        .master-karyawan-toolbar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
        }
        .master-karyawan-toolbar-actions .btn {
            border-radius: .72rem;
            font-weight: 700;
            box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06);
        }
        .master-karyawan-primary-action {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .58rem .95rem;
            border-radius: .82rem;
            font-weight: 800;
            box-shadow: 0 10px 22px rgba(15, 98, 254, 0.18);
        }
        .master-karyawan-filter-search-note {
            display: flex;
            align-items: center;
            gap: .35rem;
            margin-top: .26rem;
            color: #64748b;
            font-size: .73rem;
            font-weight: 600;
        }
        .master-karyawan-filter-topline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .6rem;
            margin-bottom: .5rem;
            flex-wrap: wrap;
        }
        .master-karyawan-filter-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: .55rem .6rem;
            margin-bottom: .55rem;
        }
        .master-karyawan-filter-searchbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: .45rem;
            align-items: end;
        }
        .master-karyawan-filter-searchbar .search-field-wrap {
            min-width: 0;
        }
        .master-karyawan-filter-actions {
            display: inline-flex;
            align-items: end;
            gap: .45rem;
            flex-wrap: nowrap;
        }
        @media (max-width: 1399.98px) {
            .master-karyawan-filter-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        @media (max-width: 991.98px) {
            .master-karyawan-filter-searchbar {
                grid-template-columns: 1fr;
            }
            .master-karyawan-filter-actions {
                flex-wrap: wrap;
            }
        }
        @media (max-width: 767.98px) {
            .master-karyawan-filter-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (max-width: 575.98px) {
            .master-karyawan-filter-grid {
                grid-template-columns: 1fr;
            }
        }
        .employee-secondary-cell {
            color: #334155;
        }
        .employee-doc-summary {
            min-width: 138px;
        }
        .employee-doc-summary-badges {
            display: flex;
            flex-wrap: wrap;
            gap: .28rem;
        }
        .employee-doc-summary-note {
            display: block;
            margin-top: .22rem;
            color: #6b7280;
            font-size: .72rem;
            line-height: 1.2;
        }
        .employee-finger-stack {
            display: flex;
            flex-direction: column;
            gap: .34rem;
            min-width: 0;
        }
        .employee-finger-bpjs-note {
            color: #6b7280;
            font-size: .7rem;
            line-height: 1.3;
        }
        .employee-bpjs-summary {
            display: flex;
            flex-direction: column;
            gap: .32rem;
            min-width: 0;
        }
        .employee-bpjs-summary-badges {
            display: flex;
            flex-wrap: wrap;
            gap: .28rem;
        }
        .employee-bpjs-summary-note {
            color: #6b7280;
            font-size: .72rem;
            line-height: 1.35;
        }
        .employee-mini-badge {
            display: inline-flex;
            align-items: center;
            gap: .28rem;
            padding: .18rem .42rem;
            border-radius: 999px;
            font-size: .69rem;
            font-weight: 700;
            line-height: 1.1;
        }
        .employee-mini-badge.is-danger {
            background: #fee2e2;
            color: #b91c1c;
        }
        .employee-mini-badge.is-warning {
            background: #fef3c7;
            color: #b45309;
        }
        .employee-mini-badge.is-neutral {
            background: #e2e8f0;
            color: #475569;
        }
        .employee-mini-badge.is-success {
            background: #dcfce7;
            color: #166534;
        }
        .employee-login-compact {
            display: flex;
            flex-direction: column;
            gap: .24rem;
            align-items: flex-start;
            min-width: 0;
        }
        .employee-name-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .5rem;
            min-width: 0;
        }
        .employee-name-row .employee-primary-cell {
            flex: 1 1 auto;
            min-width: 0;
        }
        .employee-login-inline {
            flex: 0 0 auto;
            margin-top: .05rem;
        }
        .employee-login-inline .employee-login-chip {
            white-space: nowrap;
        }
        .employee-login-chip {
            display: inline-flex;
            align-items: center;
            gap: .32rem;
            padding: .22rem .48rem;
            border-radius: 999px;
            font-size: .7rem;
            font-weight: 700;
            line-height: 1.1;
        }
        .employee-login-chip.is-ready {
            background: #dcfce7;
            color: #166534;
        }
        .employee-login-chip.is-empty {
            background: #e2e8f0;
            color: #475569;
        }
        .employee-login-meta {
            color: #64748b;
            font-size: .71rem;
            line-height: 1.2;
            max-width: 100%;
        }
        .copyable-cell {
            display: inline-flex;
            align-items: flex-start;
            gap: .45rem;
            min-width: 0;
        }
        .copyable-cell-text {
            min-width: 0;
            word-break: break-word;
        }
        .copy-cell-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6rem;
            height: 1.6rem;
            padding: 0;
            border: 0;
            border-radius: .45rem;
            background: #eef2ff;
            color: #4f46e5;
            flex: 0 0 auto;
            transition: background .15s ease, color .15s ease;
        }
        .copy-cell-btn:hover {
            background: #dbeafe;
            color: #1d4ed8;
        }
        .employee-action-stack {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .35rem;
            min-width: 188px;
        }
        .employee-action-meta {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: .3rem;
            margin-top: .08rem;
        }
        .employee-action-btn {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .14rem;
            border: 0;
            border-radius: .65rem;
            min-height: 42px;
            padding: .35rem .24rem;
            font-size: .62rem;
            line-height: 1.05;
            font-weight: 600;
            text-align: center;
            white-space: normal;
            box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .12);
        }
        .employee-action-btn i {
            font-size: .82rem;
        }
        .employee-action-btn span {
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .employee-action-btn.btn-warning {
            color: #1f2937;
        }
        .employee-action-btn:disabled {
            opacity: .58;
            box-shadow: none;
        }
        #karyawanPhotoPreview {
            width: 84px;
            height: 84px;
            object-fit: cover;
            border-radius: 50%;
            border: 1px solid #dee2e6;
        }
        #karyawanCameraPreview {
            width: 100%;
            max-width: 280px;
            border-radius: .5rem;
            border: 1px solid #dee2e6;
            background: #111;
        }
    </style>
@endpush

@section('content')
    <div class="alert alert-info mb-3" id="guideMasterKaryawan">
        <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">Guide Master Karyawan</h6>
                <span class="badge rounded-pill text-bg-light" id="guideMasterKaryawanBadge">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="btnToggleGuideMasterKaryawan" title="Tutup/Buka guide">
                    <i class="fas fa-chevron-up" id="guideMasterKaryawanChevron"></i>
                </button>
                <button type="button" class="btn-close" aria-label="Close" id="btnCloseGuideMasterKaryawan"></button>
            </div>
        </div>
        <div class="collapse show mt-2" id="guideMasterKaryawanBody">
            <div class="small">
                <div><strong>Kolom utama:</strong> bagian kiri sekarang memfokuskan <code>ID Finger</code>, <code>Nama</code>, dan <code>KTP / NIK</code> agar tetap terlihat saat tabel discroll.</div>
                <div><strong>Copy cepat:</strong> klik icon <i class="fas fa-copy"></i> pada kolom <code>ID Finger</code>, <code>KTP / NIK</code>, <code>HP</code>, <code>Email</code>, atau <code>Kontak Darurat</code> untuk salin data tanpa buka form edit.</div>
                <div><strong>Area:</strong> klik tombol <code>Area</code> untuk pindah area kerja dan simpan tanggal efektif perpindahan.</div>
                <div><strong>Offering Letter:</strong> klik <code>Offering</code>, centang field yang ingin diubah seperti jabatan, status, gaji, atau tunjangan, lalu apply ke karyawan terkait.</div>
                <div><strong>Komponen Dinamis:</strong> di modal Offering Letter bisa tambah banyak komponen pendapatan + nominal, lalu sinkronkan ke profil bulan aktif / open berikutnya.</div>
                <div><strong>Ringkasan BPJS:</strong> badge BPJS sekarang tampil tepat di bawah <code>ID Finger</code> agar operator langsung tahu program aktif tanpa melihat jauh ke kanan.</div>
                <div><strong>Link TTD:</strong> badge <code>Sinkron</code> berarti snapshot link masih sama dengan master, <code>Snapshot Lama</code> berarti harus generate ulang, dan <code>Expired</code> berarti link lama sudah tidak berlaku.</div>
                <div><strong>File Pendukung:</strong> kolom <code>File Pendukung</code> menampilkan ringkasan <code>Expired</code>, <code>Akan Expired</code>, atau <code>Kurang</code>. Klik <code>Riwayat</code> untuk upload dan cek detail dokumen.</div>
                <div><strong>Reminder kontrak:</strong> karyawan kontrak yang habis, jatuh tempo hari ini, atau tinggal sedikit hari akan otomatis naik ke urutan atas dan diberi tanda seru merah/kuning.</div>
                <div><strong>TTD Digital:</strong> klik tombol <code>TTD</code> di kolom aksi untuk generate link tanda tangan digital yang bisa dikirim ke karyawan tanpa cetak kertas.</div>
                <div><strong>Resign / Aktifkan:</strong> tombol <code>Resign</code> dipakai untuk nonaktifkan karyawan dengan tanggal efektif, sedangkan <code>Aktifkan</code> dipakai untuk membuka akses lagi bila karyawan kembali aktif.</div>
            </div>
        </div>
    </div>

    <div class="card master-karyawan-card">
        <div class="card-header">
            <div class="master-karyawan-title">
                <div class="master-karyawan-title-copy">
                    <h3>Tabel Data Karyawan</h3>
                    <p>Kelola master, sinkron ERP, dan operasi massal dari satu toolbar yang lebih ringkas.</p>
                </div>
                <button class="btn btn-primary btn-sm master-karyawan-primary-action" id="btnAddKaryawan">
                    <i class="fas fa-plus"></i>Tambah Karyawan
                </button>
            </div>
            <div class="master-karyawan-toolbar">
                <div class="master-karyawan-toolbar-group">
                    <div class="master-karyawan-toolbar-group-title">
                        <i class="fas fa-folder-tree"></i>Data Master
                    </div>
                    <div class="master-karyawan-toolbar-actions">
                        <a href="{{ route('master_karyawan.template') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-file-arrow-down me-1"></i>Template
                        </a>
                        <a href="{{ route('master_karyawan.export') }}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-file-excel me-1"></i>Export
                        </a>
                        <a href="{{ route('master_karyawan.export', ['status' => 'inactive']) }}" class="btn btn-outline-secondary btn-sm" title="Export bank data pegawai nonaktif/resign">
                            <i class="fas fa-file-excel me-1"></i>Export Nonaktif
                        </a>
                        <a href="{{ route('master_karyawan.export_expired_contracts') }}" class="btn btn-outline-danger btn-sm" title="Export karyawan aktif kontrak yang sudah habis">
                            <i class="fas fa-file-contract me-1"></i>Export Kontrak Habis
                        </a>
                        <button class="btn btn-outline-primary btn-sm" id="btnImportKaryawan">
                            <i class="fas fa-file-import me-1"></i>Import
                        </button>
                    </div>
                </div>
                <div class="master-karyawan-toolbar-group">
                    <div class="master-karyawan-toolbar-group-title">
                        <i class="fas fa-users-gear"></i>Operasional
                    </div>
                    <div class="master-karyawan-toolbar-actions">
                        <button class="btn btn-outline-dark btn-sm" id="btnGenerateUsers">
                            <i class="fas fa-user-plus me-1"></i>Generate Login
                        </button>
                        <button class="btn btn-outline-info btn-sm" id="btnSelectMissingLogin">
                            <i class="fas fa-user-check me-1"></i>Centang Belum Login
                        </button>
                        <button class="btn btn-outline-warning btn-sm" id="btnBulkDeactivate">
                            <i class="fas fa-user-slash me-1"></i>Bulk Non Aktif
                        </button>
                        <button class="btn btn-outline-primary btn-sm" id="btnBulkProfile">
                            <i class="fas fa-users-cog me-1"></i>Bulk Profil
                        </button>
                    </div>
                </div>
                <div class="master-karyawan-toolbar-group">
                    <div class="master-karyawan-toolbar-group-title">
                        <i class="fas fa-arrows-rotate"></i>Sinkron ERP
                    </div>
                    <div class="master-karyawan-toolbar-actions">
                        <button class="btn btn-outline-danger btn-sm" id="btnSyncExpiredContracts">
                            <i class="fas fa-file-contract me-1"></i>Sync Kontrak
                        </button>
                        <button class="btn btn-outline-info btn-sm" id="btnBulkSyncContractErp">
                            <i class="fas fa-arrows-rotate me-1"></i>Sync Kontrak Masal
                        </button>
                        <button class="btn btn-outline-success btn-sm" id="btnSyncErpPtkp">
                            <i class="fas fa-scale-balanced me-1"></i>Sync PTKP
                        </button>
                        <button class="btn btn-outline-success btn-sm" id="btnSyncErpNpwp">
                            <i class="fas fa-id-card me-1"></i>Sync NPWP
                        </button>
                        <button class="btn btn-outline-success btn-sm" id="btnSyncErpKtp">
                            <i class="fas fa-address-card me-1"></i>Sync KTP
                        </button>
                    </div>
                </div>
                <div class="master-karyawan-toolbar-group">
                    <div class="master-karyawan-toolbar-group-title">
                        <i class="fas fa-sliders"></i>Utilitas
                    </div>
                    <div class="master-karyawan-toolbar-actions">
                        <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#masterKaryawanUtilityPanel" aria-expanded="false" aria-controls="masterKaryawanUtilityPanel">
                            <i class="fas fa-sliders me-1"></i>Panel Utilitas
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="collapse mb-3" id="masterKaryawanUtilityPanel">
                <div class="employee-setting-panel mb-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label mb-1">Usia Maksimal Pensiun (Tahun)</label>
                            <input type="number" min="40" max="80" step="1" class="form-control form-control-sm" id="retirementAgeYearsInput" value="{{ (int) ($retirementAgeYears ?? 55) }}">
                        </div>
                        <div class="col-md-5">
                            <div class="small text-muted">
                                Badge warning pensiun akan muncul otomatis untuk karyawan aktif yang tanggal pensiunnya tinggal
                                <strong>{{ (int) ($retirementWarningDays ?? 365) }} hari</strong> atau kurang, berdasarkan <code>birth_date + usia pensiun</code>.
                            </div>
                        </div>
                        <div class="col-md-3 d-flex justify-content-md-end">
                            <button class="btn btn-outline-secondary btn-sm" id="btnSaveRetirementSetting">
                                <i class="fas fa-hourglass-half me-1"></i>Simpan Setting Pensiun
                            </button>
                        </div>
                    </div>
                </div>
                <div class="employee-suggest-panel mb-3">
                    <div class="employee-suggest-header mb-2">
                        <div>
                            <div class="fw-bold">Suggest Kandidat 3rd Party SPL ke Master Karyawan</div>
                            <div class="small text-muted">
                                Tarik kandidat yang belum match dari sumber SPL 3rd party, lalu review/simpan langsung ke master karyawan tanpa pindah halaman.
                            </div>
                            <div class="employee-suggest-mini-summary" id="splCandidateMiniSummary">
                                <span class="mini-pill">Baru <strong id="splCandidateMiniBaru">0</strong></span>
                                <span class="mini-pill">Menunggu <strong id="splCandidateMiniMenunggu">0</strong></span>
                                <span class="mini-pill">Mapped <strong id="splCandidateMiniMapped">0</strong></span>
                                <span class="mini-pill">Diabaikan <strong id="splCandidateMiniDiabaikan">0</strong></span>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <span class="employee-suggest-warning" id="splCandidateReminder">
                                <i class="fas fa-bell"></i><span id="splCandidateReminderText">Belum ada kandidat perlu dicek.</span>
                            </span>
                            <button class="btn btn-outline-secondary btn-sm employee-suggest-toggle" id="btnToggleSplCandidates" type="button">
                                <i class="fas fa-chevron-down me-1" id="splCandidateToggleIcon"></i><span id="splCandidateToggleText">Buka Panel</span>
                            </button>
                        </div>
                    </div>
                    <div class="employee-suggest-body d-none" id="splCandidateBody">
                    <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                        <span class="employee-suggest-summary is-baru">Baru <strong id="splCandidateCountBaru">0</strong></span>
                        <span class="employee-suggest-summary is-menunggu">Menunggu Master <strong id="splCandidateCountMenunggu">0</strong></span>
                        <span class="employee-suggest-summary is-mapped">Sudah Dimapping <strong id="splCandidateCountMapped">0</strong></span>
                        <span class="employee-suggest-summary is-diabaikan">Diabaikan <strong id="splCandidateCountDiabaikan">0</strong></span>
                        <button class="btn btn-outline-primary btn-sm" id="btnSyncErpActiveCandidates">
                            <i class="fas fa-users-viewfinder me-1"></i>Get Pegawai ERP Aktif
                        </button>
                        <button class="btn btn-outline-success btn-sm" id="btnSyncSplCandidates">
                            <i class="fas fa-cloud-download-alt me-1"></i>Sync Suggest SPL
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" id="btnReloadSplCandidates">
                            <i class="fas fa-rotate me-1"></i>Refresh Suggest
                        </button>
                    </div>
                    <div class="row g-2 align-items-end mb-2">
                        <div class="col-md-3">
                            <label class="form-label mb-1">Filter Status Suggest</label>
                            <select class="form-select form-select-sm" id="splCandidateStatusFilter">
                                <option value="">Pending saja (baru + menunggu)</option>
                                <option value="__all__">Semua status audit</option>
                                <option value="baru_terdeteksi">Baru Terdeteksi</option>
                                <option value="menunggu_master_karyawan">Menunggu Master Karyawan</option>
                                <option value="sudah_dimapping">Sudah Dimapping</option>
                                <option value="diabaikan">Diabaikan</option>
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label mb-1">Cari Finger / Nama / Kode</label>
                            <input type="text" class="form-control form-control-sm" id="splCandidateKeyword" placeholder="Contoh: 44001 / Ahmad / kode pegawai..." />
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1">Periode Dari</label>
                            <input type="date" class="form-control form-control-sm" id="splCandidateDateFrom" />
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1">Periode Sampai</label>
                            <input type="date" class="form-control form-control-sm" id="splCandidateDateTo" />
                        </div>
                        <div class="col-md-4">
                            <div class="small text-muted pt-md-4" id="splCandidateHint">
                                Default menampilkan kandidat pending. Pilih Semua status audit jika ingin melihat yang sudah dimapping / diabaikan.
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                        <div>
                            <div class="small text-muted">
                                Selected: <strong id="splCandidateSelectedCount">0</strong> kandidat
                            </div>
                            <div class="small text-muted">
                                <strong>Mapped</strong> berarti kandidat sudah diarahkan ke data existing di <code>master_karyawans</code> melalui <code>mapped_karyawan_id</code>, bukan membuat master baru.
                            </div>
                            <div class="small text-muted">
                                Tip: pakai <strong>Shift + Click</strong> atau <strong>Ctrl + Shift + Click</strong> pada checkbox row untuk memilih range kandidat di halaman yang sedang tampil.
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-outline-warning btn-sm" id="btnSplCandidateBulkReview">
                                <i class="fas fa-pen-to-square me-1"></i>Bulk Review Master
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm" id="btnSplCandidateBulkMapped">
                                <i class="fas fa-link me-1"></i>Mapped Terpilih
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnSplCandidateBulkIgnore">
                                <i class="fas fa-ban me-1"></i>Abaikan Terpilih
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0 employee-suggest-table" id="splCandidateSuggestTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 42px;"><input type="checkbox" id="checkAllSplCandidates" /></th>
                                    <th style="min-width: 110px;">Status</th>
                                    <th style="min-width: 80px;">Finger</th>
                                    <th style="min-width: 190px;">Pegawai Sumber</th>
                                    <th style="min-width: 120px;">Periode</th>
                                    <th style="min-width: 60px;">Muncul</th>
                                    <th>Catatan</th>
                                    <th style="min-width: 210px;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td colspan="8" class="employee-suggest-empty">Memuat suggest kandidat SPL...</td></tr>
                            </tbody>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
            <div class="master-karyawan-filter-panel">
            <div class="master-karyawan-filter-topline">
                <div class="employee-filter-note">
                    <i class="fas fa-bell"></i>
                    Reminder kontrak prioritas selalu di atas
                </div>
                <button class="btn btn-sm btn-outline-primary" id="btnReloadKaryawanTable">Refresh Data</button>
            </div>
            <div class="master-karyawan-filter-grid">
                <div>
                    <label class="form-label mb-1">Filter Status Data</label>
                    <select class="form-select form-select-sm" id="statusViewFilter">
                        <option value="active" selected>Aktif</option>
                        <option value="inactive">Nonaktif/Resign</option>
                        <option value="all">Semua</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter Reminder Kontrak</label>
                    <select class="form-select form-select-sm" id="contractAlertFilter">
                        <option value="all" selected>Semua Data</option>
                        <option value="action_required">Perlu Tindakan</option>
                        <option value="expired">Sudah Habis</option>
                        <option value="due_today">Berakhir Hari Ini</option>
                        <option value="expiring_30">Sisa 30 Hari</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter BPJS</label>
                    <select class="form-select form-select-sm" id="bpjsFilter">
                        <option value="all" selected>Semua BPJS</option>
                        <option value="assigned">Sudah Assign BPJS</option>
                        <option value="custom_basis">Ada Override Basis</option>
                        <option value="jpk_on">JPK Aktif</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter User Login</label>
                    <select class="form-select form-select-sm" id="loginStatusFilter">
                        <option value="all" selected>Semua Login</option>
                        <option value="ready">Sudah Punya Login</option>
                        <option value="missing">Belum Punya Login</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter Jabatan</label>
                    <select class="form-select form-select-sm" id="jabatanFilter">
                        <option value="">Semua Jabatan</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter Area</label>
                    <select class="form-select form-select-sm" id="areaFilter">
                        <option value="">Semua Area</option>
                    </select>
                </div>
                <div>
                    <label class="form-label mb-1">Filter Jenis Pekerja</label>
                    <select class="form-select form-select-sm" id="jenisPekerjaFilter">
                        <option value="">Semua Jenis</option>
                    </select>
                </div>
            </div>
            <div class="master-karyawan-filter-searchbar">
                <div class="search-field-wrap">
                    <label class="form-label mb-1">Cari Cepat</label>
                    <input type="text" class="form-control form-control-sm" id="mainKeywordFilter" placeholder="Cari finger, nama, NIK, email, HP, area, jabatan... atau paste banyak kode per baris" />
                    <div class="d-flex flex-wrap align-items-center gap-2 mt-2" id="mainKeywordBulkMeta" style="display:none;">
                        <span class="badge rounded-pill text-bg-primary" id="mainKeywordBulkBadge">
                            <i class="fas fa-paste me-1"></i>Bulk paste aktif
                        </span>
                        <span class="small text-muted" id="mainKeywordBulkCounter">0 data cocok / 0 tidak cocok</span>
                    </div>
                    <div class="master-karyawan-filter-search-note">
                        <i class="fas fa-magnifying-glass"></i>
                        Search mengikuti filter aktif. Tekan Enter atau tombol Cari untuk menjalankan.
                    </div>
                </div>
                <div class="master-karyawan-filter-actions">
                    <button class="btn btn-sm btn-primary" id="btnApplyMainKeyword">
                        <i class="fas fa-search me-1"></i>Cari
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="btnResetMainKeyword">
                        <i class="fas fa-eraser me-1"></i>Reset Pencarian
                    </button>
                </div>
            </div>
            </div>
            <div class="row g-2 align-items-center mb-2 master-karyawan-table-toolbar">
                <div class="col-12 col-lg-3" id="karyawanTableLengthSlot"></div>
                <div class="col-12 col-lg-4" id="karyawanTableInfoSlot"></div>
                <div class="col-12 col-lg-5 text-lg-end" id="karyawanTablePaginateSlot"></div>
            </div>
            <div class="master-karyawan-top-scroll" id="karyawanTopScrollWrap" aria-hidden="true">
                <div class="master-karyawan-top-scroll-spacer" id="karyawanTopScrollSpacer"></div>
            </div>
            <div class="table-responsive master-karyawan-grid-wrap">
                <table id="karyawanTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAllRows" /></th>
                            <th>ID Finger</th>
                            <th>Nama</th>
                            <th>KTP / NIK</th>
                            <th>NPWP</th>
                            <th>Foto</th>
                            <th>JK</th>
                            <th>Agama</th>
                            <th>Status</th>
                            <th>Jabatan</th>
                            <th>Area</th>
                            <th>HP</th>
                            <th>Kontak Darurat</th>
                            <th>Alamat Domisili</th>
                            <th>Alamat KTP</th>
                            <th>Pendidikan</th>
                            <th>Sertifikasi</th>
                            <th>User Login</th>
                            <th>File Pendukung</th>
                            <th>Jenis Pekerja</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="splCandidateReviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Review Suggest Kandidat SPL 3rd Party</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="splCandidateReviewForm">
                    <div class="modal-body">
                        <input type="hidden" id="splCandidateReviewId" />
                        <div class="candidate-review-box mb-3">
                            <h6>Data Kandidat Sumber</h6>
                            <div class="candidate-review-meta" id="splCandidateReviewCandidateMeta"></div>
                            <div class="small text-muted mt-2" id="splCandidateReviewCandidateNotes"></div>
                        </div>
                        <div class="alert alert-warning d-none" id="splCandidateReviewWarning"></div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Employee Code</label>
                                <input type="text" class="form-control" id="splCandidateReviewEmployeeCode" maxlength="40" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Finger ID</label>
                                <input type="text" class="form-control" id="splCandidateReviewFingerId" maxlength="60" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status Kerja</label>
                                <select class="form-select" id="splCandidateReviewEmploymentStatus">
                                    <option value="kontrak">kontrak</option>
                                    <option value="tetap">tetap</option>
                                    <option value="harian">harian</option>
                                    <option value="magang">magang</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Nama Lengkap</label>
                                <input type="text" class="form-control" id="splCandidateReviewFullName" maxlength="180" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Hire Date</label>
                                <input type="date" class="form-control" id="splCandidateReviewHireDate" />
                            </div>
                        </div>
                        <div class="row g-3 mt-1">
                            <div class="col-md-6">
                                <div class="candidate-review-box h-100">
                                    <h6>Match Aplikasi by Code</h6>
                                    <div class="small text-muted" id="splCandidateReviewExistingCode">Belum ada match by code.</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="candidate-review-box h-100">
                                    <h6>Match Aplikasi by Finger</h6>
                                    <div class="small text-muted" id="splCandidateReviewExistingFinger">Belum ada match by finger.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary" id="btnSaveSplCandidateReview">Simpan ke Master Karyawan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="splCandidateBulkReviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Review Master Kandidat SPL</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="splCandidateBulkReviewForm">
                    <div class="modal-body">
                        <div class="row g-3 align-items-end mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Jumlah Kandidat</label>
                                <input type="text" class="form-control" id="splCandidateBulkCount" readonly />
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Copy Profil dari Karyawan Existing</label>
                                <select class="form-select" id="splCandidateBulkCopyProfile">
                                    <option value="">Tanpa copy profil</option>
                                </select>
                                <div class="small text-muted mt-1">Opsional. Jika dipilih, setting profil dasar karyawan tersebut akan disalin ke master baru yang dibuat dari kandidat terpilih.</div>
                            </div>
                        </div>
                        <div class="alert alert-info py-2 mb-3">
                            Bulk review akan membuat / melengkapi master karyawan dari hasil suggest, lalu menandai kandidat ke status mapped bila finger atau kode sudah berhasil terhubung.
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 42px;">#</th>
                                        <th style="min-width: 90px;">Finger</th>
                                        <th style="min-width: 180px;">Pegawai Sumber</th>
                                        <th style="min-width: 120px;">Periode</th>
                                        <th style="min-width: 220px;">Suggested Master</th>
                                        <th>Review</th>
                                    </tr>
                                </thead>
                                <tbody id="splCandidateBulkTableBody">
                                    <tr><td colspan="6" class="text-center text-muted py-3">Pilih kandidat dulu.</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary" id="btnSaveSplCandidateBulkReview">Simpan Bulk ke Master</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="karyawanModalTitle">Tambah Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="karyawanForm">
                    <div class="modal-body">
                        <input type="hidden" id="karyawanId" />
                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Identitas Sistem</h6>
                                    <span class="employee-form-section-subtitle">Data utama karyawan yang dipakai untuk sinkronisasi, export, dan mapping user.</span>
                                </div>
                                <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-success" id="btnKaryawanPullErp" data-mode="all">
                                            <i class="fas fa-database me-1"></i>Get Sync ERP
                                        </button>
                                        <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span class="visually-hidden">Opsi ERP</span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><button type="button" class="dropdown-item btn-karyawan-pull-erp-mode" data-mode="all"><i class="fas fa-bolt me-2 text-success"></i>Isi semua field referensi ERP</button></li>
                                            <li><button type="button" class="dropdown-item btn-karyawan-pull-erp-mode" data-mode="empty"><i class="fas fa-wand-magic-sparkles me-2 text-primary"></i>Isi hanya field yang masih kosong</button></li>
                                            <li><button type="button" class="dropdown-item btn-karyawan-pull-erp-mode" data-mode="contract"><i class="fas fa-file-contract me-2 text-warning"></i>Sync status, tgl masuk, kontrak, dan mapping</button></li>
                                        </ul>
                                    </div>
                                    <span class="employee-form-badge">Profil Inti</span>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">NIK</label>
                                    <input type="text" class="form-control" id="karyawanCode" maxlength="40" required />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">ID Finger</label>
                                    <input type="text" class="form-control" id="karyawanFingerId" maxlength="60" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Efektif ID Finger</label>
                                    <input type="date" class="form-control" id="karyawanFingerEffectiveDate" />
                                    <div class="employee-note">Dipakai saat ganti nomor finger di tengah kontrak.</div>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label">Nama Lengkap</label>
                                    <input type="text" class="form-control" id="karyawanName" maxlength="180" required />
                                </div>
                                <div class="col-md-4">
                                    <div class="employee-switch-card">
                                        <div class="employee-switch-copy">
                                            <strong>Status Aktivasi</strong>
                                            <small>Matikan hanya jika karyawan sudah tidak aktif dan tidak boleh dipakai di proses operasional.</small>
                                        </div>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input" type="checkbox" role="switch" id="karyawanActive" checked />
                                            <label class="form-check-label ms-2" for="karyawanActive">Active</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="employee-note mb-2">Gunakan <strong>Get Sync ERP</strong> untuk isi form dari referensi ERP. Opsi dropdown bisa dipakai jika hanya mau isi field kosong atau sync kontrak/status saja.</div>
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-light border small d-none mb-0" id="karyawanErpSummary"></div>
                                </div>
                            </div>
                        </div>

                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Profil Personal</h6>
                                    <span class="employee-form-section-subtitle">Identitas dasar dan foto karyawan agar data personel lebih rapi.</span>
                                </div>
                                <span class="employee-form-badge">Personal</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Gender</label>
                                            <select class="form-select" id="karyawanGender">
                                                <option value="">-</option>
                                                <option value="L">L</option>
                                                <option value="P">P</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Status Kerja</label>
                                            <select class="form-select" id="karyawanStatus" required>
                                                <option value="tetap">Tetap</option>
                                                <option value="kontrak">Kontrak</option>
                                                <option value="harian">Harian</option>
                                                <option value="magang">Magang</option>
                                                <option value="nonaktif">Nonaktif</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex justify-content-between align-items-center gap-2 mb-1 flex-wrap">
                                                <label class="form-label mb-0">Jenis Pekerja</label>
                                                <a href="{{ route('master_jenis_pekerja.index') }}" target="_blank" class="management-shortcut-link small">
                                                    <i class="fas fa-up-right-from-square"></i>Kelola Jenis Pekerja
                                                </a>
                                            </div>
                                            <select class="form-select" id="karyawanJenisPekerjaId">
                                                <option value="">- Pilih Jenis Pekerja -</option>
                                            </select>
                                            <div class="d-flex justify-content-between align-items-center mt-1 gap-2 flex-wrap">
                                                <small class="text-muted mb-0">Pilih kategori kerja aktif yang dipakai untuk grouping dan payroll.</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Tempat Lahir</label>
                                            <input type="text" class="form-control" id="karyawanBirthPlace" maxlength="120" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Tgl Lahir</label>
                                            <input type="date" class="form-control" id="karyawanBirthDate" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Agama</label>
                                            <input type="text" class="form-control" id="karyawanReligion" maxlength="80" placeholder="Contoh: Islam" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Tgl Masuk</label>
                                            <input type="date" class="form-control" id="karyawanHireDate" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Tgl Mulai Kontrak</label>
                                            <input type="date" class="form-control" id="karyawanContractStartDate" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Tgl Akhir Kontrak</label>
                                            <input type="date" class="form-control" id="karyawanContractEndDate" />
                                        </div>
                                        <input type="hidden" id="karyawanContractNo" value="1" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Foto Karyawan</label>
                                    <div class="employee-photo-panel">
                                        <img id="karyawanPhotoPreview" class="d-none" alt="Photo preview" />
                                        <div class="employee-photo-copy">
                                            <input type="file" class="form-control" id="karyawanPhotoFile" accept="image/png,image/jpeg" />
                                            <div class="employee-photo-actions">
                                                <button type="button" class="btn btn-outline-primary btn-sm" id="karyawanPhotoOpenCamera">Buka Kamera</button>
                                                <button type="button" class="btn btn-primary btn-sm" id="karyawanPhotoCapture" disabled>Ambil Foto</button>
                                                <button type="button" class="btn btn-outline-secondary btn-sm" id="karyawanPhotoCloseCamera" disabled>Tutup Kamera</button>
                                                <button type="button" class="btn btn-outline-danger btn-sm" id="karyawanPhotoRemove">Remove Photo</button>
                                            </div>
                                            <video id="karyawanCameraPreview" class="d-none mt-2" autoplay playsinline muted></video>
                                            <canvas id="karyawanCameraCanvas" class="d-none"></canvas>
                                            <div class="employee-note">JPG/PNG maksimal 2MB. Bisa upload file atau ambil langsung dari kamera.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Penempatan Kerja</h6>
                                    <span class="employee-form-section-subtitle">Struktur jabatan dan area kerja aktif karyawan.</span>
                                </div>
                                <span class="employee-form-badge">Assignment</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Jabatan</label>
                                    <select class="form-select" id="karyawanJabatanId">
                                        <option value="">- Pilih Jabatan -</option>
                                    </select>
                                    <div class="d-flex justify-content-between align-items-center mt-1 gap-2 flex-wrap">
                                        <small class="text-muted mb-0">Pilih jabatan aktif dari master jabatan perusahaan.</small>
                                        <a href="{{ route('master_jabatan.index') }}" target="_blank" class="management-shortcut-link small">
                                            <i class="fas fa-up-right-from-square"></i>Kelola Master Jabatan
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Area Kerja</label>
                                    <select class="form-select" id="karyawanArea">
                                        <option value="">- Pilih Area Kerja -</option>
                                    </select>
                                    <div class="d-flex justify-content-between align-items-center mt-1 gap-2 flex-wrap">
                                        <small class="text-muted mb-0">Pilih area kerja dari struktur client / area / sub area.</small>
                                        <a href="{{ route('master_area.index') }}" target="_blank" class="management-shortcut-link small">
                                            <i class="fas fa-up-right-from-square"></i>Kelola Area Kerja
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Efektif Area</label>
                                    <input type="date" class="form-control" id="karyawanAreaEffectiveDate" />
                                </div>
                            </div>
                        </div>

                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Kontak & Administrasi</h6>
                                    <span class="employee-form-section-subtitle">Informasi komunikasi dan dokumen perpajakan karyawan.</span>
                                </div>
                                <span class="employee-form-badge">Kontak</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Phone</label>
                                    <input type="text" class="form-control" id="karyawanPhone" maxlength="40" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" id="karyawanEmail" maxlength="120" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">NPWP</label>
                                    <input type="text" class="form-control" id="karyawanNpwpNo" maxlength="40" />
                                    <div class="employee-note">Kosongkan jika memang tidak ada.</div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Status PTKP</label>
                                    <select class="form-select" id="karyawanTaxFamilyStatus">
                                        <option value="">- Belum diisi -</option>
                                        <option value="TK/0">TK/0</option>
                                        <option value="TK/1">TK/1</option>
                                        <option value="TK/2">TK/2</option>
                                        <option value="TK/3">TK/3</option>
                                        <option value="K/0">K/0</option>
                                        <option value="K/1">K/1</option>
                                        <option value="K/2">K/2</option>
                                        <option value="K/3">K/3</option>
                                    </select>
                                    <div class="employee-note">Dipakai untuk hitung PPh21 TER.</div>
                                </div>
                                <div class="col-12">
                                    <div class="employee-switch-card">
                                        <div class="employee-switch-copy">
                                            <strong>Alamat Domisili Sama dengan KTP</strong>
                                            <small>Aktifkan jika alamat tempat tinggal sekarang sama dengan alamat pada KTP agar operator tidak perlu input dua kali.</small>
                                        </div>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input" type="checkbox" role="switch" id="karyawanAddressSameAsKtp" />
                                            <label class="form-check-label ms-2" for="karyawanAddressSameAsKtp">Sama</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Alamat KTP</label>
                                    <textarea class="form-control" id="karyawanAddressKtp" rows="3" maxlength="255" placeholder="Isi alamat sesuai identitas / KTP"></textarea>
                                    <div class="employee-note">Alamat resmi pada KTP atau identitas utama karyawan.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Alamat Domisili</label>
                                    <textarea class="form-control" id="karyawanAddress" rows="3" maxlength="255" placeholder="Isi alamat tempat tinggal saat ini / domisili"></textarea>
                                    <div class="employee-note">Alamat ini dipakai sebagai alamat domisili karyawan, bukan wajib sama dengan alamat KTP.</div>
                                </div>
                            </div>
                        </div>

                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Pendidikan, Darurat & Sertifikasi</h6>
                                    <span class="employee-form-section-subtitle">Catatan penting untuk onboarding, safety, dan dokumentasi personel.</span>
                                </div>
                                <span class="employee-form-badge">Pendukung</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Pendidikan Terakhir</label>
                                    <input type="text" class="form-control" id="karyawanEducationLevel" maxlength="120" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Tahun Lulus</label>
                                    <input type="number" class="form-control" id="karyawanGraduationYear" min="1900" max="9999" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Sekolah / Perguruan Tinggi</label>
                                    <input type="text" class="form-control" id="karyawanSchoolName" maxlength="180" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Nama Kontak Darurat</label>
                                    <input type="text" class="form-control" id="karyawanEmergencyContactName" maxlength="180" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">No Telp Kontak Darurat</label>
                                    <input type="text" class="form-control" id="karyawanEmergencyContactPhone" maxlength="40" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Hubungan</label>
                                    <input type="text" class="form-control" id="karyawanEmergencyContactRelation" maxlength="80" />
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Sertifikasi / Pelatihan</label>
                                    <textarea class="form-control" id="karyawanCertifications" rows="2"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="employee-form-section">
                            <div class="employee-form-section-header">
                                <div>
                                    <h6 class="employee-form-section-title">Assignment BPJS</h6>
                                    <span class="employee-form-section-subtitle">Program BPJS bisa dioverride per karyawan. Jika basis nominal dikosongkan, engine akan memakai suggestion dari gaji pokok / payroll saat proses hitung.</span>
                                </div>
                                <span class="employee-form-badge">BPJS</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Efektif Mulai BPJS</label>
                                    <input type="date" class="form-control" id="karyawanBpjsEffectiveStart" />
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Efektif Selesai BPJS</label>
                                    <input type="date" class="form-control" id="karyawanBpjsEffectiveEnd" />
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Basis Umum</label>
                                    <input type="number" class="form-control" id="karyawanBpjsBasisGeneral" min="0" step="0.01" placeholder="Auto" />
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Basis JP</label>
                                    <input type="number" class="form-control" id="karyawanBpjsBasisJp" min="0" step="0.01" placeholder="Auto" />
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Basis JPK</label>
                                    <input type="number" class="form-control" id="karyawanBpjsBasisHealth" min="0" step="0.01" placeholder="Auto" />
                                </div>
                                <div class="col-12 d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                    <small class="text-muted mb-0">Default program mengikuti status kerja. JKK dan JKM umumnya wajib, JHT/JP default untuk karyawan tetap, dan JPK bisa diaktifkan sesuai kebijakan.</small>
                                    <a href="{{ route('master_bpjs.index') }}" target="_blank" class="management-shortcut-link small">
                                        <i class="fas fa-up-right-from-square"></i>Kelola Master BPJS
                                    </a>
                                </div>
                                <div class="col-12">
                                    <div id="karyawanBpjsComponentContainer" class="employee-bpjs-grid"></div>
                                </div>
                            </div>
                        </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">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulkProfileModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title">Bulk Update Profil Karyawan</h5>
                        <small class="text-muted">Centang field yang ingin diubah. Field lain aman tidak tersentuh.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkProfileForm">
                    <div class="modal-body">
                        <div class="alert alert-info py-2 mb-3">
                            Gunakan untuk update cepat data dasar karyawan terpilih: gender, status kerja, jenis pekerja, dan agama.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Jumlah Karyawan Dipilih</label>
                            <input type="text" class="form-control" id="bulkProfileSelectedCount" readonly>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input bulk-profile-apply" type="checkbox" id="bulkProfileApplyGender">
                                        <label class="form-check-label fw-semibold" for="bulkProfileApplyGender">Ubah Gender</label>
                                    </div>
                                    <select class="form-select" id="bulkProfileGender">
                                        <option value="">- Kosongkan -</option>
                                        <option value="L">L - Laki-laki</option>
                                        <option value="P">P - Perempuan</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input bulk-profile-apply" type="checkbox" id="bulkProfileApplyEmploymentStatus">
                                        <label class="form-check-label fw-semibold" for="bulkProfileApplyEmploymentStatus">Ubah Status Kerja</label>
                                    </div>
                                    <select class="form-select" id="bulkProfileEmploymentStatus">
                                        <option value="">- Pilih Status -</option>
                                        <option value="tetap">Tetap</option>
                                        <option value="kontrak">Kontrak</option>
                                        <option value="harian">Harian</option>
                                        <option value="magang">Magang</option>
                                        <option value="nonaktif">Nonaktif</option>
                                    </select>
                                    <small class="text-muted d-block mt-1">Status kerja tidak otomatis mematikan akun. Untuk menonaktifkan operasional tetap gunakan Bulk Non Aktif.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input bulk-profile-apply" type="checkbox" id="bulkProfileApplyJenisPekerja">
                                        <label class="form-check-label fw-semibold" for="bulkProfileApplyJenisPekerja">Ubah Jenis Pekerja</label>
                                    </div>
                                    <select class="form-select" id="bulkProfileJenisPekerjaId">
                                        <option value="">- Kosongkan / tidak ada -</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input bulk-profile-apply" type="checkbox" id="bulkProfileApplyReligion">
                                        <label class="form-check-label fw-semibold" for="bulkProfileApplyReligion">Ubah Agama</label>
                                    </div>
                                    <input type="text" class="form-control" id="bulkProfileReligion" maxlength="80" placeholder="Contoh: Islam">
                                </div>
                            </div>
                        </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" id="btnSaveBulkProfile">
                            <i class="fas fa-save me-1"></i>Simpan Bulk Profil
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="transferAreaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Transfer Area Kerja</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="transferAreaForm">
                    <div class="modal-body">
                        <input type="hidden" id="transferAreaKaryawanId" />
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Karyawan</label>
                                <input type="text" class="form-control" id="transferAreaKaryawanInfo" readonly />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Area Saat Ini</label>
                                <input type="text" class="form-control" id="transferAreaCurrent" readonly />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Area Baru</label>
                                <select class="form-select" id="transferAreaNewId">
                                    <option value="">- Pilih Area Baru -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Efektif</label>
                                <input type="date" class="form-control" id="transferAreaEffectiveDate" required />
                            </div>
                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="transferAreaNotes" rows="2" placeholder="Contoh: mutasi ke sub area baru per tanggal efektif"></textarea>
                            </div>
                        </div>
                        <div class="border rounded p-3 bg-light-subtle">
                            <div class="fw-semibold mb-2">Riwayat Area</div>
                            <div class="table-responsive">
                                <table class="table table-sm table-striped mb-0" id="transferAreaHistoryTable">
                                    <thead>
                                        <tr>
                                            <th>Area</th>
                                            <th>Mulai</th>
                                            <th>Selesai</th>
                                            <th>Status</th>
                                            <th>Catatan</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </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 Transfer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="resignModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Resign Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="resignForm">
                    <div class="modal-body">
                        <input type="hidden" id="resignKaryawanId" />
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="resignKaryawanInfo" readonly />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Tanggal Resign (Efektif)</label>
                            <input type="date" class="form-control" id="resignDate" required />
                            <small class="text-muted">Akan mengisi `contract_end_date`, status kerja jadi `nonaktif`, dan nonaktifkan akses terkait.</small>
                        </div>
                        <div class="mb-1">
                            <div class="d-flex justify-content-between align-items-center gap-2 mb-1">
                                <label class="form-label mb-0">Alasan (opsional)</label>
                                <div class="d-flex flex-wrap gap-1 justify-content-end" id="resignReasonQuickTags">
                                    <button type="button" class="btn btn-xs btn-outline-secondary resign-reason-tag" data-value="Selesai kontrak">Selesai kontrak</button>
                                    <button type="button" class="btn btn-xs btn-outline-secondary resign-reason-tag" data-value="Resign pribadi">Resign pribadi</button>
                                    <button type="button" class="btn btn-xs btn-outline-secondary resign-reason-tag" data-value="Tidak diperpanjang">Tidak diperpanjang</button>
                                    <button type="button" class="btn btn-xs btn-outline-secondary resign-reason-tag" data-value="Mutasi / pindah perusahaan">Mutasi</button>
                                </div>
                            </div>
                            <textarea class="form-control" id="resignReason" rows="3" maxlength="255" placeholder="Contoh: selesai kontrak / resign pribadi"></textarea>
                        </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-danger">Proses Resign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reactivateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Aktifkan Kembali Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="reactivateForm">
                    <div class="modal-body">
                        <input type="hidden" id="reactivateKaryawanId" />
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="reactivateKaryawanInfo" readonly />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Status Kerja Baru</label>
                                <select class="form-select" id="reactivateStatus" required>
                                    <option value="kontrak">Kontrak</option>
                                    <option value="tetap">Tetap</option>
                                    <option value="harian">Harian</option>
                                    <option value="magang">Magang</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Efektif Aktif Kembali</label>
                                <input type="date" class="form-control" id="reactivateEffectiveDate" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Masa Berakhir Kontrak</label>
                                <input type="date" class="form-control" id="reactivateContractEndDate" />
                                <small class="text-muted">Wajib bila status `kontrak`.</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Alasan (opsional)</label>
                                <textarea class="form-control" id="reactivateReason" rows="3" maxlength="255"></textarea>
                            </div>
                        </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-success">Aktifkan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="offeringLetterModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Apply Offering Letter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="offeringLetterForm">
                    <div class="modal-body">
                        <input type="hidden" id="offeringKaryawanId" />
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="offeringKaryawanInfo" readonly />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label">Tanggal Efektif</label>
                                <input type="date" class="form-control" id="offeringEffectiveDate" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">No Surat</label>
                                <input type="text" class="form-control" id="offeringReferenceNo" maxlength="80" placeholder="Contoh: OL/HR/III/2026/001" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Judul</label>
                                <input type="text" class="form-control" id="offeringLetterTitle" maxlength="180" placeholder="Offering Letter / Perubahan Kompensasi" />
                            </div>

                            <div class="col-12"><hr class="my-2"></div>

                            <div class="col-12">
                                <details>
                                    <summary><strong>Field Legacy (opsional, untuk kompatibilitas import lama)</strong></summary>
                                    <div class="row g-2 mt-1">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingJabatan" /></span>
                                                <select class="form-select" id="offeringJabatanId">
                                                    <option value="">- Ubah Jabatan -</option>
                                                </select>
                                            </div>
                                            <small class="text-muted">Centang jika ingin update jabatan.</small>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingStatus" /></span>
                                                <select class="form-select" id="offeringStatus">
                                                    <option value="tetap">Tetap</option>
                                                    <option value="kontrak">Kontrak</option>
                                                    <option value="harian">Harian</option>
                                                    <option value="magang">Magang</option>
                                                </select>
                                            </div>
                                            <small class="text-muted">Centang jika ganti status.</small>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingTaxFamilyStatus" /></span>
                                                <input type="text" class="form-control" id="offeringTaxFamilyStatus" maxlength="10" placeholder="K/0, K/1, TK/0" />
                                            </div>
                                            <small class="text-muted">Centang jika update PTKP.</small>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingBaseSalary" /></span>
                                                <span class="input-group-text">Gaji Pokok</span>
                                                <input type="number" class="form-control" id="offeringBaseSalary" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingOvertimeRate" /></span>
                                                <span class="input-group-text">Rate Lembur</span>
                                                <input type="number" class="form-control" id="offeringOvertimeRate" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingAllowanceFixed" /></span>
                                                <span class="input-group-text">Tunj. Tetap</span>
                                                <input type="number" class="form-control" id="offeringAllowanceFixed" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingAllowancePosition" /></span>
                                                <span class="input-group-text">Tunj. Jabatan</span>
                                                <input type="number" class="form-control" id="offeringAllowancePosition" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingAllowanceSkill" /></span>
                                                <span class="input-group-text">Tunj. Keahlian</span>
                                                <input type="number" class="form-control" id="offeringAllowanceSkill" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingAllowanceMedicalHousing" /></span>
                                                <span class="input-group-text">Medical/Housing</span>
                                                <input type="number" class="form-control" id="offeringAllowanceMedicalHousing" min="0" step="0.01" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <span class="input-group-text"><input type="checkbox" id="applyOfferingIncentiveAmount" /></span>
                                                <span class="input-group-text">Insentif</span>
                                                <input type="number" class="form-control" id="offeringIncentiveAmount" min="0" step="0.01" />
                                            </div>
                                        </div>
                                    </div>
                                </details>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="offeringNotes" rows="3" maxlength="2000" placeholder="Catatan offering letter"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Sinkron ke Profil Bulan</label>
                                <select class="form-select" id="offeringSyncMode">
                                    <option value="none">Tidak sinkron</option>
                                    <option value="active">Profil bulan aktif saja</option>
                                    <option value="active_and_open_future">Profil aktif + open berikutnya</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label m-0">Komponen Pendapatan Dinamis (Override Profil Bulan)</label>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddOfferingComponentRow">Tambah Komponen</button>
                                </div>
                                <div id="offeringComponentsContainer" class="d-flex flex-column gap-2"></div>
                                <small class="text-muted">Isi komponen dan nominal yang perlu disinkronkan ke profil bulan.</small>
                            </div>
                        </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">Apply Offering Letter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="contractHistoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Riwayat Kontrak Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="contractHistoryHeader" class="mb-2 small text-muted">-</div>
                    <div class="card mb-3">
                        <div class="card-header py-2"><strong>Upload Dokumen Kontrak / Offering Letter</strong></div>
                        <div class="card-body py-2">
                            <form id="contractDocumentUploadForm">
                                <input type="hidden" id="contractHistoryKaryawanId" />
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label class="form-label">Tipe Dokumen</label>
                                        <select class="form-select form-select-sm" id="contractDocType" required>
                                            <option value="contract">Kontrak Kerja</option>
                                            <option value="offering_letter">Offering Letter</option>
                                        </select>
                                    </div>
                                    <div class="col-md-8">
                                        <label class="form-label">Referensi Offering Letter</label>
                                        <select class="form-select form-select-sm" id="contractDocOfferingLetterId" disabled>
                                            <option value="">- Pilih Offering Letter -</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tanggal Dokumen</label>
                                        <input type="date" class="form-control form-control-sm" id="contractDocDate" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">No Referensi</label>
                                        <input type="text" class="form-control form-control-sm" id="contractDocReferenceNo" maxlength="80" />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Judul</label>
                                        <input type="text" class="form-control form-control-sm" id="contractDocTitle" maxlength="180" required />
                                    </div>
                                    <div class="col-md-8">
                                        <label class="form-label">File</label>
                                        <input type="file" class="form-control form-control-sm" id="contractDocFile" accept=".pdf,.jpg,.jpeg,.png" required />
                                        <small class="text-muted">Format: PDF/JPG/PNG, maks 5MB.</small>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Catatan</label>
                                        <input type="text" class="form-control form-control-sm" id="contractDocNotes" maxlength="2000" />
                                    </div>
                                    <div class="col-12 text-end">
                                        <button type="submit" class="btn btn-sm btn-primary">Upload Dokumen</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="contractHistoryTable" class="table table-sm table-bordered align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width:120px;">Tanggal</th>
                                    <th style="width:180px;">Tipe</th>
                                    <th>Rincian</th>
                                </tr>
                            </thead>
                            <tbody id="contractHistoryBody">
                            </tbody>
                        </table>
                    </div>
                    <div class="table-responsive mt-3">
                        <table id="contractDocumentsTable" class="table table-sm table-bordered align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width:110px;">Tanggal</th>
                                    <th style="width:140px;">Tipe</th>
                                    <th>Judul</th>
                                    <th style="width:130px;">No Ref</th>
                                    <th style="width:110px;">File</th>
                                </tr>
                            </thead>
                            <tbody id="contractDocumentsBody">
                            </tbody>
                        </table>
                    </div>
                    <div class="card mt-3">
                        <div class="card-header py-2">
                            <strong>File Pendukung Karyawan</strong>
                            <div class="small text-muted">KTP, KK, BPJS, rekening, ijazah, sertifikat, MCU, dan dokumen pelengkap lain.</div>
                        </div>
                        <div class="card-body py-2">
                            <div id="supportingDocumentChecklistSummary" class="row g-2 mb-3"></div>
                            <div class="table-responsive mb-3">
                                <table id="supportingChecklistTable" class="table table-sm table-bordered align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width:220px;">Checklist</th>
                                            <th style="width:120px;">Status</th>
                                            <th style="width:100px;">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody id="supportingChecklistBody">
                                    </tbody>
                                </table>
                            </div>
                            <form id="supportingDocumentUploadForm">
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label class="form-label">Kategori</label>
                                        <select class="form-select form-select-sm" id="supportingDocCategory" required>
                                            <option value="">- Pilih Kategori -</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Jenis Dokumen</label>
                                        <select class="form-select form-select-sm" id="supportingDocCode" required>
                                            <option value="">- Pilih Jenis -</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Tanggal Dokumen</label>
                                        <input type="date" class="form-control form-control-sm" id="supportingDocDate" />
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Berlaku Sampai</label>
                                        <input type="date" class="form-control form-control-sm" id="supportingDocExpiredAt" />
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">No Referensi</label>
                                        <input type="text" class="form-control form-control-sm" id="supportingDocReferenceNo" maxlength="80" />
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label">Judul</label>
                                        <input type="text" class="form-control form-control-sm" id="supportingDocTitle" maxlength="180" required />
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">File</label>
                                        <input type="file" class="form-control form-control-sm" id="supportingDocFile" accept=".pdf,.jpg,.jpeg,.png" required />
                                        <small class="text-muted">Format: PDF/JPG/PNG, maks 5MB.</small>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Catatan</label>
                                        <input type="text" class="form-control form-control-sm" id="supportingDocNotes" maxlength="2000" />
                                    </div>
                                    <div class="col-12 text-end">
                                        <button type="submit" class="btn btn-sm btn-primary">Upload File Pendukung</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive mt-3">
                        <div class="row g-2 align-items-end mb-2">
                            <div class="col-md-4">
                                <label class="form-label form-label-sm">Filter Kategori</label>
                                <select class="form-select form-select-sm" id="supportingDocsFilterCategory">
                                    <option value="">- Semua Kategori -</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label form-label-sm">Filter Status Dokumen</label>
                                <select class="form-select form-select-sm" id="supportingDocsFilterStatus">
                                    <option value="">- Semua Status -</option>
                                    <option value="valid">Masih Berlaku</option>
                                    <option value="expiring_soon">Akan Expired</option>
                                    <option value="expired">Expired</option>
                                    <option value="no_expiry">Tanpa Expired</option>
                                </select>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetSupportingDocFilters">Reset Filter</button>
                            </div>
                        </div>
                        <table id="supportingDocumentsTable" class="table table-sm table-bordered align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width:120px;">Kategori</th>
                                    <th style="width:180px;">Jenis</th>
                                    <th>Judul</th>
                                    <th style="width:110px;">Tanggal</th>
                                    <th style="width:130px;">Status</th>
                                    <th style="width:110px;">Expired</th>
                                    <th style="width:140px;">No Ref</th>
                                    <th style="width:130px;">File</th>
                                    <th style="width:90px;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="supportingDocumentsBody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importKaryawanModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Data Karyawan (XLSX)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="importKaryawanForm">
                    <div class="modal-body">
                        <input type="file" class="form-control" id="karyawanImportFile" accept=".xlsx,.xls" required />
                        <small class="text-muted">Gunakan file template terbaru. `NIK` wajib, `NPWP` opsional, dan header Excel HR sekarang bisa langsung dipakai.</small>
                    </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">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="generateUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Generate User Login dari Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="generateUserForm">
                    <div class="modal-body">
                        <div class="mb-2">
                            <label class="form-label">Jumlah Karyawan Terpilih</label>
                            <input type="text" class="form-control" id="selectedKaryawanCount" readonly />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Role</label>
                            <select class="form-select" id="generateRoleId" required></select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Password Default</label>
                            <input type="text" class="form-control" id="generateDefaultPassword" required />
                            <small class="text-muted">Login page tetap sama: email + password di `/login`.</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">Generate</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="syncExpiredContractModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title">Preview Sync Kontrak Expired dari ERP</h5>
                        <div class="small text-muted">Aplikasi mengambil karyawan yang kontraknya sudah habis, lalu mencocokkan ke <code>erp2025.hrd_master_pegawai.kd_finger</code>.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <strong>Mode aman:</strong> tombol Apply hanya mengubah <code>contract_end_date</code> untuk status <strong>PERPANJANGAN_DITEMUKAN</strong>.
                        Sumber ERP memakai <code>tgl_masuk</code> dan <code>tgl_keluar</code>. Data yang tidak match, tanggal sama, atau ERP lebih lama tidak disentuh.
                    </div>
                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-2">
                        <div id="syncExpiredContractSummary" class="small text-muted">Belum dimuat.</div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnReloadExpiredContractPreview">
                                <i class="fas fa-sync-alt me-1"></i>Reload Preview
                            </button>
                            <button type="button" class="btn btn-sm btn-success" id="btnApplyExpiredContractSync">
                                <i class="fas fa-check me-1"></i>Apply Terpilih
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive border rounded" style="max-height: 520px;">
                        <table class="table table-sm table-striped align-middle mb-0" id="syncExpiredContractTable">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:36px;"><input type="checkbox" id="checkAllExpiredContractSync"></th>
                                    <th>Finger</th>
                                    <th>Karyawan Aplikasi</th>
                                    <th>Mulai Kontrak Aplikasi</th>
                                    <th>Akhir Kontrak Aplikasi</th>
                                    <th>Nama ERP</th>
                                    <th>Tgl Masuk ERP</th>
                                    <th>Akhir Kontrak ERP</th>
                                    <th>Kontrak Ke</th>
                                    <th>Status ERP</th>
                                    <th>Sync Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-4">Klik Reload Preview untuk memuat data.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@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/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 } });

            // Guide Master Karyawan: auto-close after 120s and remember state per user in localStorage.
            (function () {
                const bodyEl = document.getElementById('guideMasterKaryawanBody');
                const toggleBtn = document.getElementById('btnToggleGuideMasterKaryawan');
                const closeBtn = document.getElementById('btnCloseGuideMasterKaryawan');
                const chevron = document.getElementById('guideMasterKaryawanChevron');
                if (!bodyEl || !toggleBtn || !closeBtn || !window.bootstrap) return;

                const userId = Number('{{ (int) (auth()->id() ?? 0) }}') || 0;
                const storageKey = `ahsp:master_karyawan: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 = () => {
                    if (!chevron) return;
                    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', () => {
                    if (isShown()) {
                        collapse.hide();
                    } else {
                        collapse.show();
                    }
                });
                closeBtn.addEventListener('click', () => collapse.hide());
            })();

            const modal = new bootstrap.Modal(document.getElementById('karyawanModal'));
            const splCandidateReviewModal = document.getElementById('splCandidateReviewModal')
                ? new bootstrap.Modal(document.getElementById('splCandidateReviewModal'))
                : null;
            const splCandidateBulkReviewModal = document.getElementById('splCandidateBulkReviewModal')
                ? new bootstrap.Modal(document.getElementById('splCandidateBulkReviewModal'))
                : null;
            const bulkProfileModal = document.getElementById('bulkProfileModal')
                ? new bootstrap.Modal(document.getElementById('bulkProfileModal'))
                : null;
            const transferAreaModal = document.getElementById('transferAreaModal')
                ? new bootstrap.Modal(document.getElementById('transferAreaModal'))
                : null;
            const resignModal = new bootstrap.Modal(document.getElementById('resignModal'));
            const reactivateModal = new bootstrap.Modal(document.getElementById('reactivateModal'));
            const offeringLetterModal = new bootstrap.Modal(document.getElementById('offeringLetterModal'));
            const contractHistoryModal = new bootstrap.Modal(document.getElementById('contractHistoryModal'));
            const importModal = new bootstrap.Modal(document.getElementById('importKaryawanModal'));
            const generateUserModal = new bootstrap.Modal(document.getElementById('generateUserModal'));
            const syncExpiredContractModal = new bootstrap.Modal(document.getElementById('syncExpiredContractModal'));
            const selectedIds = new Set();
            const expiredContractSyncIds = new Set();
            let splCandidateRows = [];
            let splCandidateSelectedIds = new Set();
            let splCandidateReviewPayload = null;
            let splCandidateBulkPayload = [];
            let splCandidateTable = null;
            let splCandidateScrollTop = null;
            let lastKaryawanCheckedId = null;
            let lastSplCandidateCheckedId = null;
            let expiredContractSyncRows = [];
            let roleRows = [];
            let photoRemoved = false;
            let bpjsSelectionDirty = false;
            let cameraStream = null;
            let karyawanErpHiddenCompensation = {};
            let pendingMainKeywordBulkTokens = [];
            let appliedMainKeywordText = '';
            let mainKeywordBulkTokens = [];
            const updateMainKeywordBulkMeta = (meta = null, bulkTokens = pendingMainKeywordBulkTokens) => {
                const $wrap = $('#mainKeywordBulkMeta');
                const $counter = $('#mainKeywordBulkCounter');
                const hasBulk = (bulkTokens || []).length > 0;

                if (!hasBulk) {
                    $wrap.hide();
                    $counter.text('0 data cocok / 0 tidak cocok');
                    return;
                }

                const matched = Number(meta?.matched_tokens || 0);
                const unmatched = Number(meta?.unmatched_tokens || 0);
                $counter.text(`${matched} data cocok / ${unmatched} tidak cocok`);
                $wrap.css('display', 'flex');
            };
            const resetMainSelectionState = () => {
                selectedIds.clear();
                lastKaryawanCheckedId = null;
                $('#checkAllRows').prop('checked', false).prop('indeterminate', false);
            };
            const parseMainKeywordBulkTokens = (rawValue) => {
                const raw = (rawValue || '').toString();
                const seen = new Set();
                const finalizeTokens = (items = []) => items
                    .map((item) => item.toString().trim())
                    .filter((item) => item !== '')
                    .filter((item) => {
                        const key = item.toLowerCase();
                        if (seen.has(key)) {
                            return false;
                        }
                        seen.add(key);
                        return true;
                    });

                if (/[\r\n\t,;]+/.test(raw)) {
                    return finalizeTokens(raw.split(/[\r\n\t,;]+/));
                }

                const spacedParts = raw.split(/\s+/).map((item) => item.trim()).filter((item) => item !== '');
                const looksLikeExcelCodeColumn = spacedParts.length >= 2
                    && spacedParts.every((item) => /^\d+$/.test(item));

                if (looksLikeExcelCodeColumn) {
                    return finalizeTokens(spacedParts);
                }

                return [];
            };
            const buildFilterOptions = (rows = [], { includeAllLabel = '', valueKey = 'id', labelBuilder = null } = {}) => {
                const options = [];
                if (includeAllLabel !== '') {
                    options.push(`<option value="">${escapeHtml(includeAllLabel)}</option>`);
                }
                (rows || []).forEach((row) => {
                    const value = (row?.[valueKey] ?? '').toString().trim();
                    if (value === '') return;
                    const label = typeof labelBuilder === 'function'
                        ? labelBuilder(row)
                        : ((row?.label || row?.name || value).toString());
                    options.push(`<option value="${escapeHtml(value)}">${escapeHtml(label)}</option>`);
                });
                return options.join('');
            };
            const hydrateMainFilterOptions = () => {
                $('#jabatanFilter').html(buildFilterOptions(jabatanRows, {
                    includeAllLabel: 'Semua Jabatan',
                    valueKey: 'id',
                    labelBuilder: (row) => {
                        const code = (row?.code || '').toString().trim();
                        const name = (row?.name || '').toString().trim();
                        return code && name ? `${code} - ${name}` : (name || code || '-');
                    }
                }));
                $('#areaFilter').html(buildFilterOptions(areaRows, {
                    includeAllLabel: 'Semua Area',
                    valueKey: 'id',
                    labelBuilder: (row) => (row?.label || row?.name || '-').toString()
                }));
                $('#jenisPekerjaFilter').html(buildFilterOptions(jenisPekerjaRows, {
                    includeAllLabel: 'Semua Jenis',
                    valueKey: 'id',
                    labelBuilder: (row) => {
                        const code = (row?.code || '').toString().trim();
                        const name = (row?.name || '').toString().trim();
                        return code && name ? `${code} - ${name}` : (name || code || '-');
                    }
                }));
            };
            const table = $('#karyawanTable').DataTable({
                responsive: false,
                autoWidth: false,
                processing: true,
                serverSide: true,
                dom: "<'row g-2 align-items-center mb-2 master-karyawan-table-toolbar'<'col-12 col-lg-3'l><'col-12 col-lg-4'i><'col-12 col-lg-5 text-lg-end'p>>t",
                ajax: {
                    url: '{{ route('master_karyawan.data') }}',
                    data: function (d) {
                        d.status_view = ($('#statusViewFilter').val() || 'active').toString();
                        d.contract_alert_filter = ($('#contractAlertFilter').val() || 'all').toString();
                        d.bpjs_filter = ($('#bpjsFilter').val() || 'all').toString();
                        d.login_status_filter = ($('#loginStatusFilter').val() || 'all').toString();
                        d.jabatan_filter = ($('#jabatanFilter').val() || '').toString();
                        d.area_filter = ($('#areaFilter').val() || '').toString();
                        d.jenis_pekerja_filter = ($('#jenisPekerjaFilter').val() || '').toString();
                        d.bulk_quick_tokens = mainKeywordBulkTokens;
                    }
                },
                language: {
                    lengthMenu: 'Show _MENU_ entries',
                },
                initComplete: function () {
                    mountExternalTableControls(this.api(), {
                        length: '#karyawanTableLengthSlot',
                        info: '#karyawanTableInfoSlot',
                        paginate: '#karyawanTablePaginateSlot',
                    });
                    bindKaryawanTopScrollbar();
                    window.requestAnimationFrame(syncKaryawanTopScrollbar);
                },
                columns: [
                    { data: null, orderable: false, searchable: false, render: (r) => `<input type="checkbox" class="row-check" value="${r.id}" ${selectedIds.has(String(r.id)) ? 'checked' : ''} />` },
                    {
                        data: 'finger_id',
                        render: (v, t, r) => {
                            const text = (v || '').toString().trim();
                            const fingerHtml = text
                                ? renderCopyCell(text, $('<div>').text(text).html(), 'Copy ID Finger')
                                : '-';

                            return `
                                <div class="employee-finger-stack">
                                    <div>${fingerHtml}</div>
                                    ${renderInlineBpjsSummary(r.bpjs_summary || {})}
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'full_name',
                        render: (v, t, r) => {
                            const nameHtml = renderClampedCell(r.full_name, 'employee-primary-cell');
                            const emailText = (r.email || '').toString().trim();
                            const emailEscaped = emailText ? $('<div>').text(emailText).html() : '';
                            const emailHtml = emailText
                                ? `
                                    <div class="employee-name-email">
                                        ${renderCopyCell(
                                            emailText,
                                            `<small class="employee-login-meta" title="${emailEscaped}">${emailEscaped}</small>`,
                                            'Copy Email'
                                        )}
                                    </div>
                                `
                                : '';
                            const loginChipHtml = r.has_user_login
                                ? `<span class="employee-login-chip is-ready" title="${$('<div>').text(`${r.user_login_name || '-'} (${r.user_login_email || '-'})`).html()}"><i class="fas fa-user-check"></i>Login</span>`
                                : `<span class="employee-login-chip is-empty" title="Belum dibuat"><i class="fas fa-user-slash"></i>Belum</span>`;
                            const nameRowHtml = `
                                <div class="employee-name-row">
                                    ${nameHtml}
                                    <div class="employee-login-inline">${loginChipHtml}</div>
                                </div>
                            `;
                            const alerts = [];

                            const contractLabel = (r.contract_alert_label || '').toString().trim();
                            const contractTone = (r.contract_alert_icon || '').toString().trim();
                            if (contractLabel && contractTone) {
                                alerts.push({
                                    label: contractLabel,
                                    tone: contractTone === 'danger' ? 'danger' : 'warning',
                                });
                            }

                            const retirementLabel = (r.retirement_alert_label || '').toString().trim();
                            const retirementTone = (r.retirement_alert_icon || '').toString().trim();
                            if (retirementLabel && retirementTone) {
                                alerts.push({
                                    label: retirementLabel,
                                    tone: retirementTone === 'danger' ? 'danger' : 'warning',
                                });
                            }

                            if (!alerts.length) {
                                return `<div class="employee-name-block">${nameRowHtml}${emailHtml}</div>`;
                            }

                            const firstToneClass = alerts[0].tone === 'danger' ? 'is-danger' : 'is-warning';
                            const sublinesHtml = alerts.map((alert) => {
                                const toneClass = alert.tone === 'danger' ? 'is-danger' : 'is-warning';
                                const alertTitle = $('<div>').text(alert.label).html();
                                return `<div class="employee-contract-subline ${toneClass}" title="${alertTitle}">${alertTitle}</div>`;
                            }).join('');

                            const mergedTitle = $('<div>').text(alerts.map((alert) => alert.label).join(' | ')).html();

                            return `
                                <div class="employee-contract-row">
                                    <span class="employee-contract-icon ${firstToneClass}" title="${mergedTitle}">
                                        <i class="fas fa-exclamation"></i>
                                    </span>
                                    <div class="employee-name-block">
                                        ${nameRowHtml}
                                        <div class="employee-name-alerts">${sublinesHtml}</div>
                                        ${emailHtml}
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'display_nik',
                        render: (v) => {
                            const text = (v || '').toString().trim();
                            if (!text) return '-';
                            return renderCopyCell(text, $('<div>').text(text).html(), 'Copy KTP / NIK');
                        }
                    },
                    { data: 'display_npwp_no', render: (v) => v || '-' },
                    {
                        data: 'photo_url',
                        orderable: false,
                        searchable: false,
                        render: (v, t, r) => {
                            if (v) {
                                return `<img src="${v}" alt="Foto" style="height:32px;width:32px;border-radius:50%;object-fit:cover;border:1px solid #dee2e6;" onerror="this.outerHTML='-'" />`;
                            }
                            if (r.photo_file_missing) {
                                const title = (r.photo_path || 'File foto referensi tidak ditemukan').toString();
                                return `<span class="badge bg-warning text-dark" title="${$('<div>').text(title).html()}">File hilang</span>`;
                            }
                            return '-';
                        }
                    },
                    { data: 'gender', render: (v) => v || '-' },
                    { data: 'religion', render: (v) => v || '-' },
                    {
                        data: 'employment_status',
                        render: (v, t, r) => {
                            const val = (v || '-').toString();
                            const isInactive = val === 'nonaktif' || !r.is_active;
                            return isInactive
                                ? `<span class="badge bg-danger">${val}</span>`
                                : `<span class="badge bg-success">${val}</span>`;
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            const text = r.jabatan_name ? `${r.jabatan_code || '-'} - ${r.jabatan_name}` : '-';
                            return renderClampedCell(text, 'employee-secondary-cell');
                        }
                    },
                    {
                        data: 'area',
                        render: (v) => renderClampedCell(v, 'employee-secondary-cell')
                    },
                    {
                        data: 'phone',
                        render: (v) => {
                            const text = (v || '').toString().trim();
                            if (!text) return '-';
                            return renderCopyCell(text, $('<div>').text(text).html(), 'Copy HP');
                        }
                    },
                    {
                        data: null,
                        orderable: true,
                        render: (r) => {
                            const name = (r.emergency_contact_name || '').toString().trim();
                            const relation = (r.emergency_contact_relation || '').toString().trim();
                            const phone = (r.emergency_contact_phone || '').toString().trim();
                            const copyParts = [name];
                            if (relation) copyParts.push(`(${relation})`);
                            if (phone) copyParts.push(`- ${phone}`);

                            const nameHtml = name ? $('<div>').text(name).html() : '';
                            const relationHtml = relation ? $('<div>').text(relation).html() : '';
                            const phoneHtml = phone ? $('<div>').text(phone).html() : '';

                            const parts = [];
                            if (nameHtml) parts.push(nameHtml);
                            if (relationHtml) parts.push(`(${relationHtml})`);
                            if (phoneHtml) parts.push(`<br><small class="text-muted">${phoneHtml}</small>`);

                            if (!parts.length) return '-';
                            return renderCopyCell(copyParts.join(' ').trim(), parts.join(' '), 'Copy Kontak Darurat');
                        }
                    },
                    {
                        data: 'address_domicile',
                        render: (v) => {
                            const text = (v || '').toString().trim();
                            if (!text) return '-';
                            const escaped = $('<div>').text(text).html();
                            return `<span title="${escaped}">${escaped}</span>`;
                        }
                    },
                    {
                        data: 'address_ktp',
                        render: (v) => {
                            const text = (v || '').toString().trim();
                            if (!text) return '-';
                            const escaped = $('<div>').text(text).html();
                            return `<span title="${escaped}">${escaped}</span>`;
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            const items = [];
                            if (r.education_level) items.push(r.education_level);
                            if (r.school_name) items.push(r.school_name);
                            if (r.graduation_year) items.push(String(r.graduation_year));
                            return items.length ? items.join(' / ') : '-';
                        }
                    },
                    {
                        data: 'certifications',
                        orderable: true,
                        render: (v) => {
                            const text = (v || '').toString().trim();
                            if (!text) return '-';
                            return text.length > 80 ? `${text.slice(0, 80)}...` : text;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        visible: false,
                        render: (r) => {
                            if (r.has_user_login) {
                                const title = `${r.user_login_name || '-'} (${r.user_login_email || '-'})`;
                                const metaText = (r.user_login_name || r.user_login_email || '').toString().trim();
                                const metaHtml = metaText
                                    ? `<span class="employee-login-meta employee-line-clamp-2" title="${$('<div>').text(title).html()}">${$('<div>').text(metaText).html()}</span>`
                                    : '';
                                return `
                                    <div class="employee-login-compact" title="${$('<div>').text(title).html()}">
                                        ${metaHtml}
                                    </div>
                                `;
                            }
                            return `
                                <div class="employee-login-compact">
                                    <span class="employee-login-meta">Belum dibuat</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'supporting_document_summary',
                        orderable: false,
                        searchable: false,
                        render: (summary) => {
                            const meta = summary || {};
                            const total = Number(meta.total_count || 0);
                            const expired = Number(meta.expired_count || 0);
                            const expiringSoon = Number(meta.expiring_soon_count || 0);
                            const missing = Number(meta.missing_count || 0);
                            const badges = [];

                            if (expired > 0) {
                                badges.push(`<span class="employee-mini-badge is-danger"><i class="fas fa-exclamation-circle"></i>Exp ${expired}</span>`);
                            }
                            if (expiringSoon > 0) {
                                badges.push(`<span class="employee-mini-badge is-warning"><i class="fas fa-clock"></i>Soon ${expiringSoon}</span>`);
                            }
                            if (missing > 0) {
                                badges.push(`<span class="employee-mini-badge is-neutral"><i class="fas fa-layer-group"></i>Miss ${missing}</span>`);
                            }
                            if (!badges.length) {
                                badges.push('<span class="employee-mini-badge is-success"><i class="fas fa-check-circle"></i>Aman</span>');
                            }

                            const note = total > 0
                                ? `${total} file`
                                : '0 file';

                            return `
                                <div class="employee-doc-summary">
                                    <div class="employee-doc-summary-badges">${badges.join('')}</div>
                                    <small class="employee-doc-summary-note">${note}</small>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        orderable: true,
                        render: (r) => {
                            const code = (r.jenis_pekerja_code || '').toString().trim();
                            const name = (r.jenis_pekerja_name || '').toString().trim();
                            if (!code && !name) return '-';
                            return renderClampedCell(code ? `${code} - ${name || '-'}` : name, 'employee-secondary-cell');
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => {
                            const signature = r.signature_request || {};
                            const signatureCompare = r.signature_compare || {};
                            const employmentStatus = (r.employment_status || '').toString();
                            const canSignLink = r.is_active && ['kontrak', 'tetap', 'harian'].includes(employmentStatus);
                            let signClass = 'btn-light';
                            let signLabel = employmentStatus === 'tetap' ? 'Offer' : (employmentStatus === 'harian' ? 'Harian' : 'TTD');
                            let signTitle = employmentStatus === 'tetap'
                                ? 'Generate Link Offering Letter'
                                : (employmentStatus === 'harian' ? 'Generate Link Form Kontrak Harian' : 'Generate Link TTD');

                            if (signature.is_signed) {
                                signClass = 'btn-success';
                                signLabel = 'Signed';
                                signTitle = 'Link sudah signed';
                            } else if (signature.is_expired) {
                                signClass = 'btn-danger';
                                signLabel = 'Expired';
                                signTitle = 'Link expired, generate ulang';
                            } else if (signature.exists && signatureCompare.needs_regenerate) {
                                signClass = 'btn-warning';
                                signLabel = 'Review';
                                signTitle = 'Snapshot lama terdeteksi, review dan generate ulang bila perlu';
                            } else if (signature.exists) {
                                signClass = 'btn-primary';
                                signLabel = 'Link';
                                signTitle = 'Link tanda tangan aktif';
                            }

                            const signMetaBadges = [];
                            if (signatureCompare.exists && signatureCompare.needs_regenerate) {
                                signMetaBadges.push('<span class="employee-mini-badge is-warning"><i class="fas fa-sync-alt"></i>Snapshot lama</span>');
                            } else if (signature.exists && !signature.is_signed && !signature.is_expired) {
                                signMetaBadges.push('<span class="employee-mini-badge is-success"><i class="fas fa-check-circle"></i>Sinkron</span>');
                            }
                            if (signature.is_expired) {
                                signMetaBadges.push('<span class="employee-mini-badge is-danger"><i class="fas fa-hourglass-end"></i>Expired</span>');
                            }

                            return `
                            <div class="employee-action-stack">
                                <button class="btn btn-primary employee-action-btn btn-edit" data-id="${r.id}" title="Edit">
                                    <i class="fas fa-pen"></i><span>Edit</span>
                                </button>
                                <button class="btn btn-dark employee-action-btn btn-transfer-area" data-id="${r.id}" title="Area">
                                    <i class="fas fa-map-marker-alt"></i><span>Area</span>
                                </button>
                                <button class="btn ${signClass} employee-action-btn btn-sign-link" data-id="${r.id}" title="${signTitle}" ${canSignLink ? '' : 'disabled'}>
                                    <i class="fas fa-signature"></i><span>${signLabel}</span>
                                </button>
                                <button class="btn btn-info employee-action-btn btn-offering-letter" data-id="${r.id}" title="Offering" ${r.employment_status === 'nonaktif' ? 'disabled' : ''}>
                                    <i class="fas fa-file-signature"></i><span>Offer</span>
                                </button>
                                <button class="btn btn-secondary employee-action-btn btn-contract-history" data-id="${r.id}" title="Riwayat">
                                    <i class="fas fa-history"></i><span>Riwayat</span>
                                </button>
                                <button class="btn btn-warning employee-action-btn btn-resign" data-id="${r.id}" title="Resign" ${r.employment_status === 'nonaktif' ? 'disabled' : ''}>
                                    <i class="fas fa-user-minus"></i><span>Resign</span>
                                </button>
                                <button class="btn btn-success employee-action-btn btn-reactivate" data-id="${r.id}" title="Aktifkan" ${r.employment_status === 'nonaktif' ? '' : 'disabled'}>
                                    <i class="fas fa-user-check"></i><span>Aktif</span>
                                </button>
                                <button class="btn btn-danger employee-action-btn btn-delete" data-id="${r.id}" title="Delete">
                                    <i class="fas fa-trash"></i><span>Delete</span>
                                </button>
                                ${signMetaBadges.length ? `<div class="employee-action-meta">${signMetaBadges.join('')}</div>` : ''}
                            </div>
                        `;
                        }
                    }
                ]
            });

            let jabatanRows = [];
            let areaRows = [];
            let jenisPekerjaRows = [];
            let komponenPendapatanRows = [];
            let bpjsMasterRows = [];
            let supportingDocumentOptions = { categories: [], codes: [] };
            const cameraPreview = document.getElementById('karyawanCameraPreview');
            const cameraCanvas = document.getElementById('karyawanCameraCanvas');
            const renderCopyCell = (text, displayHtml, title = 'Copy') => {
                const value = (text || '').toString().trim();
                if (!value) {
                    return displayHtml || '-';
                }
                const encodedValue = $('<div>').text(value).html();
                return `
                    <div class="copyable-cell">
                        <span class="copyable-cell-text">${displayHtml}</span>
                        <button type="button" class="copy-cell-btn btn-copy-cell" data-copy="${encodedValue}" title="${title}">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                `;
            };
            const renderInlineBpjsSummary = (summary = {}) => {
                const meta = summary || {};
                const codes = Array.isArray(meta.active_codes) ? meta.active_codes : [];
                const codeBadges = codes.length
                    ? codes.slice(0, 4).map((code) => `<span class="employee-mini-badge is-neutral">${$('<div>').text((code || '').toString()).html()}</span>`)
                    : ['<span class="employee-mini-badge is-danger"><i class="fas fa-ban"></i>Belum</span>'];

                codeBadges.unshift(`<span class="employee-mini-badge is-success"><i class="fas fa-shield-alt"></i>${Number(meta.active_count || 0)} program</span>`);

                if (meta.has_custom_basis) {
                    codeBadges.push(`<span class="employee-mini-badge is-warning"><i class="fas fa-sliders-h"></i>Basis ${Number(meta.custom_basis_count || 0)}</span>`);
                } else {
                    codeBadges.push('<span class="employee-mini-badge is-success"><i class="fas fa-calculator"></i>Auto</span>');
                }

                const dateParts = [];
                if ((meta.effective_start || '').toString().trim()) {
                    dateParts.push(`mulai ${(meta.effective_start || '').toString().trim()}`);
                }
                if ((meta.effective_end || '').toString().trim()) {
                    dateParts.push(`sampai ${(meta.effective_end || '').toString().trim()}`);
                }

                return `
                    <div class="employee-bpjs-summary">
                        <div class="employee-bpjs-summary-badges">${codeBadges.join('')}</div>
                        <small class="employee-finger-bpjs-note">${dateParts.length ? dateParts.join(' | ') : 'Profile BPJS aktif.'}</small>
                    </div>
                `;
            };
            const renderClampedCell = (text, extraClass = '') => {
                const value = (text || '').toString().trim();
                if (!value) return '-';
                const escaped = $('<div>').text(value).html();
                const classes = ['employee-line-clamp-2'];
                if (extraClass) classes.push(extraClass);
                return `<div class="${classes.join(' ')}" title="${escaped}">${escaped}</div>`;
            };

            const getRowDataFromButton = (btn) => {
                let tr = $(btn).closest('tr');
                let row = table.row(tr).data();
                if (!row && tr.hasClass('child')) {
                    tr = tr.prev();
                    row = table.row(tr).data();
                }
                return row || null;
            };

            const stopCamera = () => {
                if (cameraStream) {
                    cameraStream.getTracks().forEach((track) => track.stop());
                }
                cameraStream = null;
                if (cameraPreview) {
                    cameraPreview.srcObject = null;
                    cameraPreview.classList.add('d-none');
                }
                $('#karyawanPhotoCapture').prop('disabled', true);
                $('#karyawanPhotoCloseCamera').prop('disabled', true);
            };

            const resetPhotoInput = (previewUrl = '') => {
                $('#karyawanPhotoFile').val('');
                photoRemoved = false;
                setPreviewImage(previewUrl);
                stopCamera();
            };

            const captureFromCamera = () => {
                if (!cameraPreview || !cameraCanvas || !cameraStream) return;
                const width = cameraPreview.videoWidth || 640;
                const height = cameraPreview.videoHeight || 480;
                cameraCanvas.width = width;
                cameraCanvas.height = height;
                const ctx = cameraCanvas.getContext('2d');
                if (!ctx) return;
                ctx.drawImage(cameraPreview, 0, 0, width, height);
                cameraCanvas.toBlob((blob) => {
                    if (!blob) return;
                    const file = new File([blob], `karyawan-${Date.now()}.jpg`, { type: 'image/jpeg' });
                    const dt = new DataTransfer();
                    dt.items.add(file);
                    const input = $('#karyawanPhotoFile')[0];
                    if (input) {
                        input.files = dt.files;
                    }
                    photoRemoved = false;
                    setPreviewImage(URL.createObjectURL(file));
                    stopCamera();
                }, 'image/jpeg', 0.92);
            };

            const setPreviewImage = (url) => {
                const photoPreview = $('#karyawanPhotoPreview');
                if (!url) {
                    photoPreview.addClass('d-none').attr('src', '');
                    return;
                }
                photoPreview.removeClass('d-none').attr('src', url);
            };

            const copyTextToClipboard = async (text) => {
                const value = (text || '').toString();
                if (!value.trim()) return false;

                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(value);
                    return true;
                }

                const temp = document.createElement('textarea');
                temp.value = value;
                temp.setAttribute('readonly', '');
                temp.style.position = 'fixed';
                temp.style.opacity = '0';
                temp.style.pointerEvents = 'none';
                document.body.appendChild(temp);
                temp.focus();
                temp.select();
                const success = document.execCommand('copy');
                document.body.removeChild(temp);
                return success;
            };

            const showCopyToast = (label) => {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: `${label} berhasil dicopy`,
                    showConfirmButton: false,
                    timer: 1400,
                    timerProgressBar: true,
                });
            };

            const bindSelect2ClickBridge = (selector) => {
                const select = $(selector);
                if (!select.length || !select.data('select2')) return;

                const container = select.next('.select2-container');
                container.off('mousedown.select2Bridge').on('mousedown.select2Bridge', function (e) {
                    const target = $(e.target);
                    if (target.closest('.select2-selection__clear').length) {
                        return;
                    }
                    e.preventDefault();
                    select.select2('open');
                });
            };

            const getVisibleRowIds = () => {
                return table
                    .rows({ page: 'current' })
                    .data()
                    .toArray()
                    .map((r) => String(r.id))
                    .filter(Boolean);
            };

            const getVisibleRowsWithoutLogin = () => {
                return table
                    .rows({ page: 'current' })
                    .data()
                    .toArray()
                    .filter((r) => r && !r.has_user_login && r.id)
                    .map((r) => String(r.id));
            };

            const syncRenderedChecks = () => {
                $('#karyawanTable .row-check').each(function () {
                    const id = String($(this).val() || '');
                    const checked = selectedIds.has(id);
                    $(this).prop('checked', checked);
                    $(this).closest('tr').toggleClass('is-selected', checked);
                });
            };

            const refreshCheckAll = () => {
                const visibleIds = getVisibleRowIds();
                const total = visibleIds.length;
                const checked = visibleIds.filter((id) => selectedIds.has(id)).length;
                const allChecked = total > 0 && checked === total;
                const noneChecked = checked === 0;
                $('#checkAllRows')
                    .prop('checked', allChecked)
                    .prop('indeterminate', !allChecked && !noneChecked);
            };

            const mountExternalTableControls = (tableApi, slots = {}) => {
                const wrapper = $(tableApi.table().container());
                const moveIfExists = (selector, target) => {
                    if (!target) return;
                    const node = wrapper.find(selector).first();
                    if (!node.length) return;
                    $(target).empty().append(node.detach());
                };

                moveIfExists('.dataTables_length', slots.length);
                moveIfExists('.dataTables_info', slots.info);
                moveIfExists('.dataTables_paginate', slots.paginate);

                wrapper.children('.row').each(function () {
                    const row = $(this);
                    const hasLiveControl = row.find('.dataTables_length, .dataTables_info, .dataTables_paginate').length > 0;
                    if (!hasLiveControl) {
                        row.remove();
                    }
                });
            };

            const syncKaryawanTopScrollbar = () => {
                const topWrap = document.getElementById('karyawanTopScrollWrap');
                const topSpacer = document.getElementById('karyawanTopScrollSpacer');
                const gridWrap = document.querySelector('.master-karyawan-grid-wrap');
                const tableEl = document.getElementById('karyawanTable');
                if (!(topWrap && topSpacer && gridWrap && tableEl)) return;

                const tableWidth = Math.ceil(tableEl.scrollWidth || 0);
                const viewportWidth = Math.ceil(gridWrap.clientWidth || 0);
                topSpacer.style.width = `${tableWidth}px`;
                topWrap.classList.toggle('is-hidden', tableWidth <= viewportWidth + 4);

                const maxScroll = Math.max(0, topWrap.scrollWidth - topWrap.clientWidth);
                if (gridWrap.scrollLeft > maxScroll) {
                    gridWrap.scrollLeft = maxScroll;
                }
                if (topWrap.scrollLeft > maxScroll) {
                    topWrap.scrollLeft = maxScroll;
                }
            };

            const bindKaryawanTopScrollbar = () => {
                const topWrap = document.getElementById('karyawanTopScrollWrap');
                const gridWrap = document.querySelector('.master-karyawan-grid-wrap');
                if (!(topWrap && gridWrap) || topWrap.dataset.bound === '1') return;

                let syncingFromTop = false;
                let syncingFromGrid = false;

                topWrap.addEventListener('scroll', function () {
                    if (syncingFromGrid) return;
                    syncingFromTop = true;
                    gridWrap.scrollLeft = topWrap.scrollLeft;
                    syncingFromTop = false;
                });

                gridWrap.addEventListener('scroll', function () {
                    if (syncingFromTop) return;
                    syncingFromGrid = true;
                    topWrap.scrollLeft = gridWrap.scrollLeft;
                    syncingFromGrid = false;
                }, { passive: true });

                window.addEventListener('resize', syncKaryawanTopScrollbar);
                topWrap.dataset.bound = '1';
                syncKaryawanTopScrollbar();
            };

            const applyMainKeywordSearch = () => {
                const keyword = ($('#mainKeywordFilter').val() || '').toString();
                pendingMainKeywordBulkTokens = parseMainKeywordBulkTokens(keyword);
                mainKeywordBulkTokens = [...pendingMainKeywordBulkTokens];
                appliedMainKeywordText = keyword;
                updateMainKeywordBulkMeta(null, pendingMainKeywordBulkTokens);
                resetMainSelectionState();
                table.search(mainKeywordBulkTokens.length ? '' : appliedMainKeywordText).draw();
            };

            const applyKaryawanSelection = (id, {
                checked = null,
                shiftKey = false,
                ctrlKey = false,
                metaKey = false,
                exclusiveSingle = false,
            } = {}) => {
                const rowId = String(id || '');
                if (!rowId) return;

                const useToggle = checked === null;
                const targetChecked = useToggle ? !selectedIds.has(rowId) : !!checked;
                const useModifier = ctrlKey || metaKey;
                const visibleIds = $('#karyawanTable tbody .row-check')
                    .map(function () { return String($(this).val() || ''); })
                    .get();

                if (shiftKey && lastKaryawanCheckedId) {
                    const startIndex = visibleIds.indexOf(String(lastKaryawanCheckedId));
                    const endIndex = visibleIds.indexOf(rowId);
                    if (startIndex >= 0 && endIndex >= 0) {
                        if (exclusiveSingle && !useModifier) {
                            selectedIds.clear();
                        }
                        const [from, to] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex];
                        visibleIds.slice(from, to + 1).forEach((rangeId) => {
                            if (!rangeId) return;
                            if (targetChecked) {
                                selectedIds.add(rangeId);
                            } else {
                                selectedIds.delete(rangeId);
                            }
                        });
                        lastKaryawanCheckedId = rowId;
                        syncRenderedChecks();
                        refreshCheckAll();
                        return;
                    }
                }

                if (exclusiveSingle && !useModifier && !shiftKey) {
                    selectedIds.clear();
                }

                if (targetChecked) {
                    selectedIds.add(rowId);
                } else {
                    selectedIds.delete(rowId);
                }

                lastKaryawanCheckedId = rowId;
                syncRenderedChecks();
                refreshCheckAll();
            };

            const fillJabatanOptions = (selectedId = '') => {
                const options = ['<option value="">- Pilih Jabatan -</option>'];
                jabatanRows.forEach((r) => options.push(`<option value="${r.id}">${r.code || '-'} - ${r.name}</option>`));
                $('#karyawanJabatanId').html(options.join(''));
                $('#karyawanJabatanId').val(selectedId || '');
                $('#offeringJabatanId').html(options.join(''));
                $('#offeringJabatanId').val(selectedId || '');
                initJabatanSelects();
            };

            const fillJenisPekerjaOptions = (selectedId = '') => {
                const options = ['<option value="">- Pilih Jenis Pekerja -</option>'];
                (jenisPekerjaRows || []).forEach((r) => {
                    const code = (r.code || '').toString().trim();
                    const name = (r.name || '-').toString();
                    const label = code ? `${code} - ${name}` : name;
                    options.push(`<option value="${r.id}">${label}</option>`);
                });
                $('#karyawanJenisPekerjaId').html(options.join(''));
                $('#karyawanJenisPekerjaId').val(selectedId || '');
                initJenisPekerjaSelect();
            };

            const fillBulkProfileJenisPekerjaOptions = (selectedId = '') => {
                const escapeOpt = (value) => $('<div>').text((value ?? '').toString()).html();
                const options = ['<option value="">- Kosongkan / tidak ada -</option>'];
                (jenisPekerjaRows || []).forEach((r) => {
                    const code = (r.code || '').toString().trim();
                    const name = (r.name || '-').toString();
                    const label = code ? `${code} - ${name}` : name;
                    options.push(`<option value="${escapeOpt(r.id)}">${escapeOpt(label)}</option>`);
                });
                $('#bulkProfileJenisPekerjaId').html(options.join(''));
                $('#bulkProfileJenisPekerjaId').val(selectedId || '');
            };

            const fillAreaOptions = (selectedValue = '') => {
                const selected = (selectedValue || '').toString().trim();
                const escapeOpt = (value) => $('<div>').text((value ?? '').toString()).html();
                const options = ['<option value="">- Pilih Area Kerja -</option>']
                    .concat(
                        (areaRows || []).map((row) => {
                            const value = String(row.id || '');
                            const label = (row.label || row.name || '-').toString();
                            const code = (row.code || '').toString().trim();
                            const display = code ? `${code} - ${label}` : label;
                            return `<option value="${escapeOpt(value)}">${escapeOpt(display)}</option>`;
                        })
                    );
                $('#karyawanArea').html(options.join(''));
                $('#karyawanArea').val(selected);
                initAreaSelect();
            };

            const fillTransferAreaOptions = (selectedValue = '') => {
                const selected = (selectedValue || '').toString().trim();
                const escapeOpt = (value) => $('<div>').text((value ?? '').toString()).html();
                const options = ['<option value="">- Pilih Area Baru -</option>']
                    .concat(
                        (areaRows || []).map((row) => {
                            const value = String(row.id || '');
                            const label = (row.label || row.name || '-').toString();
                            const code = (row.code || '').toString().trim();
                            const display = code ? `${code} - ${label}` : label;
                            return `<option value="${escapeOpt(value)}">${escapeOpt(display)}</option>`;
                        })
                    );
                $('#transferAreaNewId').html(options.join(''));
                $('#transferAreaNewId').val(selected);
                initTransferAreaSelect();
            };

            const resetKaryawanErpSummary = () => {
                $('#karyawanErpSummary').addClass('d-none').removeClass('alert-success alert-warning alert-light').html('');
            };

            const resetKaryawanErpHiddenCompensation = () => {
                karyawanErpHiddenCompensation = {};
            };

            const setKaryawanErpSummary = (html, tone = 'light') => {
                $('#karyawanErpSummary')
                    .removeClass('d-none alert-success alert-warning alert-light')
                    .addClass(`alert-${tone}`)
                    .html(html || '');
            };

            const resolveAreaIdFromValue = (rawValue = '') => {
                const needle = (rawValue || '').toString().trim().toLowerCase();
                if (!needle) return '';

                const direct = (areaRows || []).find((row) => String(row.id || '') === needle);
                if (direct) {
                    return String(direct.id || '');
                }

                const matched = (areaRows || []).find((row) => {
                    const label = (row.label || '').toString().trim().toLowerCase();
                    const name = (row.name || '').toString().trim().toLowerCase();
                    const code = (row.code || '').toString().trim().toLowerCase();
                    return needle === label || needle === name || needle === code;
                });

                return matched ? String(matched.id || '') : '';
            };

            const initJabatanSelects = () => {
                const karyawanSelect = $('#karyawanJabatanId');
                if (karyawanSelect.data('select2')) {
                    karyawanSelect.select2('destroy');
                }
                karyawanSelect.select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#karyawanModal .modal-content'),
                    width: '100%',
                    placeholder: 'Cari jabatan...',
                    allowClear: true,
                    minimumResultsForSearch: 0,
                });
                bindSelect2ClickBridge('#karyawanJabatanId');

                const offeringSelect = $('#offeringJabatanId');
                if (offeringSelect.length) {
                    if (offeringSelect.data('select2')) {
                        offeringSelect.select2('destroy');
                    }
                    offeringSelect.select2({
                        theme: 'bootstrap-5',
                        dropdownParent: $('#offeringLetterModal .modal-content'),
                        width: '100%',
                        placeholder: 'Cari jabatan...',
                        allowClear: true,
                        minimumResultsForSearch: 0,
                    });
                    bindSelect2ClickBridge('#offeringJabatanId');
                }
            };

            const initAreaSelect = () => {
                const areaSelect = $('#karyawanArea');
                if (!areaSelect.length) return;
                if (areaSelect.data('select2')) {
                    areaSelect.select2('destroy');
                }
                areaSelect.select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#karyawanModal .modal-content'),
                    width: '100%',
                    placeholder: 'Cari area kerja...',
                    allowClear: true,
                    minimumResultsForSearch: 0,
                });
                bindSelect2ClickBridge('#karyawanArea');
            };

            const initJenisPekerjaSelect = () => {
                const jenisSelect = $('#karyawanJenisPekerjaId');
                if (!jenisSelect.length) return;
                if (jenisSelect.data('select2')) {
                    jenisSelect.select2('destroy');
                }
                jenisSelect.select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#karyawanModal .modal-content'),
                    width: '100%',
                    placeholder: 'Cari jenis pekerja...',
                    allowClear: true,
                    minimumResultsForSearch: 0,
                });
                bindSelect2ClickBridge('#karyawanJenisPekerjaId');
            };

            const initTransferAreaSelect = () => {
                const areaSelect = $('#transferAreaNewId');
                if (!areaSelect.length) return;
                if (areaSelect.data('select2')) {
                    areaSelect.select2('destroy');
                }
                areaSelect.select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#transferAreaModal .modal-content'),
                    width: '100%',
                    placeholder: 'Cari area tujuan...',
                    allowClear: true,
                    minimumResultsForSearch: 0,
                });
                bindSelect2ClickBridge('#transferAreaNewId');
            };

            const formatBpjsDefaultModeLabel = (mode = 'manual') => {
                const key = (mode || '').toString().trim().toLowerCase();
                if (key === 'always') return 'Wajib';
                if (key === 'permanent') return 'Tetap';
                return 'Manual';
            };

            const defaultBpjsSelectionByStatus = (employmentStatus = 'tetap') => {
                const status = (employmentStatus || '').toString().trim().toLowerCase();
                const selected = {};

                (bpjsMasterRows || []).forEach((row) => {
                    const mode = (row.default_enrollment_mode || 'manual').toString().trim().toLowerCase();
                    let isEnrolled = false;
                    if (mode === 'always') {
                        isEnrolled = true;
                    } else if (mode === 'permanent') {
                        isEnrolled = status === 'tetap';
                    }
                    selected[String(row.id)] = isEnrolled;
                });

                return selected;
            };

            const renderBpjsComponentOptions = (selectedMap = {}) => {
                const container = $('#karyawanBpjsComponentContainer');
                if (!container.length) return;

                if (!bpjsMasterRows.length) {
                    container.html('<div class="employee-bpjs-empty">Master BPJS belum tersedia. Lengkapi dulu di menu Master BPJS agar assignment per karyawan bisa dipakai.</div>');
                    return;
                }

                const htmlEscape = (value) => $('<div>').text((value || '').toString()).html();
                const html = bpjsMasterRows.map((row) => {
                    const id = String(row.id || '');
                    const checked = !!selectedMap[id];
                    const modeLabel = formatBpjsDefaultModeLabel(row.default_enrollment_mode || 'manual');
                    const tags = [
                        row.bpjs_type ? `<span class="employee-bpjs-tag">${htmlEscape(row.bpjs_type)}</span>` : '',
                        row.basis_type ? `<span class="employee-bpjs-tag">Basis ${htmlEscape(row.basis_type)}</span>` : '',
                        `<span class="employee-bpjs-tag">${htmlEscape(modeLabel)}</span>`,
                        row.uses_ceiling ? '<span class="employee-bpjs-tag">Ada plafon</span>' : '',
                    ].filter(Boolean).join('');

                    return `
                        <label class="employee-bpjs-card ${checked ? 'is-checked' : ''}">
                            <input type="checkbox" class="form-check-input karyawan-bpjs-check" value="${id}" ${checked ? 'checked' : ''} />
                            <div class="employee-bpjs-copy">
                                <span class="employee-bpjs-code">${htmlEscape(row.component_code || row.code || 'BPJS')}</span>
                                <span class="employee-bpjs-title">${htmlEscape(row.name || '-')}</span>
                                <div class="employee-bpjs-helper">
                                    Default enrollment: ${htmlEscape(modeLabel)}. Operator bisa ubah centang ini bila perlu.
                                </div>
                                <div class="employee-bpjs-tags">${tags}</div>
                            </div>
                        </label>
                    `;
                }).join('');

                container.html(html);
            };

            const syncBpjsCardState = () => {
                $('#karyawanBpjsComponentContainer .employee-bpjs-card').each(function () {
                    const checked = $(this).find('.karyawan-bpjs-check').is(':checked');
                    $(this).toggleClass('is-checked', checked);
                });
            };

            const resetBpjsProfileForm = (employmentStatus = 'tetap', hireDate = '') => {
                bpjsSelectionDirty = false;
                const defaultStart = (hireDate || '').toString().trim() || new Date().toISOString().slice(0, 10);
                $('#karyawanBpjsEffectiveStart').val(defaultStart);
                $('#karyawanBpjsEffectiveEnd').val('');
                $('#karyawanBpjsBasisGeneral').val('');
                $('#karyawanBpjsBasisJp').val('');
                $('#karyawanBpjsBasisHealth').val('');
                renderBpjsComponentOptions(defaultBpjsSelectionByStatus(employmentStatus));
                syncBpjsCardState();
            };

            const fillBpjsProfileForm = (profile = null, employmentStatus = 'tetap', hireDate = '') => {
                const effectiveStart = profile?.effective_start || (hireDate || '').toString().trim() || new Date().toISOString().slice(0, 10);
                const selectedMap = {};

                (profile?.components || []).forEach((item) => {
                    selectedMap[String(item.id)] = !!item.is_enrolled;
                });

                bpjsSelectionDirty = false;
                $('#karyawanBpjsEffectiveStart').val(effectiveStart);
                $('#karyawanBpjsEffectiveEnd').val(profile?.effective_end || '');
                $('#karyawanBpjsBasisGeneral').val(profile?.basis_general_nominal ?? '');
                $('#karyawanBpjsBasisJp').val(profile?.basis_jp_nominal ?? '');
                $('#karyawanBpjsBasisHealth').val(profile?.basis_health_nominal ?? '');
                renderBpjsComponentOptions(
                    Object.keys(selectedMap).length ? selectedMap : defaultBpjsSelectionByStatus(employmentStatus)
                );
                syncBpjsCardState();
            };

            const readSelectedBpjsIds = () => {
                return $('#karyawanBpjsComponentContainer .karyawan-bpjs-check:checked')
                    .map(function () {
                        return Number($(this).val() || 0);
                    })
                    .get()
                    .filter((id) => id > 0);
            };

            const syncAddressFields = () => {
                const sameAsKtp = $('#karyawanAddressSameAsKtp').is(':checked');
                const ktpAddress = ($('#karyawanAddressKtp').val() || '').toString();
                const domicileField = $('#karyawanAddress');

                if (!domicileField.length) return;

                if (sameAsKtp) {
                    domicileField.val(ktpAddress);
                    domicileField.prop('readonly', true).addClass('bg-light');
                } else {
                    domicileField.prop('readonly', false).removeClass('bg-light');
                }
            };

            const renderAreaHistoryRows = (rows = []) => {
                const tbody = $('#transferAreaHistoryTable tbody');
                if (!tbody.length) return;

                if (!rows.length) {
                    tbody.html('<tr><td colspan="5" class="text-muted text-center">Belum ada riwayat area.</td></tr>');
                    return;
                }

                const html = rows.map((row) => `
                    <tr>
                        <td>${row.area_label || '-'}</td>
                        <td>${row.effective_start_date || '-'}</td>
                        <td>${row.effective_end_date || '-'}</td>
                        <td>${row.is_current ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-secondary">Riwayat</span>'}</td>
                        <td>${row.notes || '-'}</td>
                    </tr>
                `);
                tbody.html(html.join(''));
            };

            const appendOfferingComponentRow = (item = null) => {
                const options = ['<option value="">- Pilih Komponen -</option>']
                    .concat(komponenPendapatanRows.map((r) => `<option value="${r.id}">${r.code || '-'} - ${r.name}</option>`));
                const html = `
                    <div class="border rounded p-2 offering-component-row">
                        <div class="row g-2">
                            <div class="col-md-5">
                                <select class="form-select form-select-sm offering-component-id">
                                    ${options.join('')}
                                </select>
                            </div>
                            <div class="col-md-3">
                                <input type="number" class="form-control form-control-sm offering-component-amount" min="0" step="0.01" placeholder="Nominal" />
                            </div>
                            <div class="col-md-2">
                                <input type="date" class="form-control form-control-sm offering-component-start" />
                            </div>
                            <div class="col-md-2 d-flex gap-1">
                                <input type="date" class="form-control form-control-sm offering-component-end" />
                                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-offering-component">X</button>
                            </div>
                        </div>
                    </div>
                `;
                $('#offeringComponentsContainer').append(html);
                const row = $('#offeringComponentsContainer .offering-component-row').last();
                if (item) {
                    row.find('.offering-component-id').val(item.komponen_pendapatan_id || '');
                    row.find('.offering-component-amount').val(item.amount ?? '');
                    row.find('.offering-component-start').val(item.effective_start || '');
                    row.find('.offering-component-end').val(item.effective_end || '');
                }
            };

            const readOfferingComponentRows = () => {
                const rows = [];
                $('#offeringComponentsContainer .offering-component-row').each(function () {
                    const componentId = Number($(this).find('.offering-component-id').val() || 0);
                    const amountRaw = ($(this).find('.offering-component-amount').val() || '').toString();
                    const amount = amountRaw === '' ? null : Number(amountRaw);
                    const start = ($(this).find('.offering-component-start').val() || '').toString();
                    const end = ($(this).find('.offering-component-end').val() || '').toString();
                    if (componentId > 0 && amount !== null && !Number.isNaN(amount)) {
                        rows.push({
                            komponen_pendapatan_id: componentId,
                            amount: amount,
                            effective_start: start || null,
                            effective_end: end || null,
                        });
                    }
                });
                return rows;
            };

            const loadRefs = () => $.getJSON('{{ route('master_karyawan.jabatan_options') }}')
                .done((resp) => {
                    jabatanRows = resp?.data?.jabatans || [];
                    areaRows = resp?.data?.areas || [];
                    jenisPekerjaRows = resp?.data?.jenis_pekerjas || [];
                    komponenPendapatanRows = resp?.data?.komponen_pendapatan || [];
                    bpjsMasterRows = resp?.data?.bpjs_components || [];
                    hydrateMainFilterOptions();
                })
                .fail(() => {
                    jabatanRows = [];
                    areaRows = [];
                    jenisPekerjaRows = [];
                    komponenPendapatanRows = [];
                    bpjsMasterRows = [];
                    hydrateMainFilterOptions();
                });

            const loadData = () => {
                table.ajax.reload(null, false);
                return $.Deferred().resolve().promise();
            };

            const loadRoleOptions = () => {
                return $.getJSON('{{ route('master_karyawan.user_options') }}')
                    .done((resp) => {
                        roleRows = resp?.data?.roles || [];
                        const opts = roleRows.map((r) => `<option value="${r.id}">${r.name} (${r.slug || '-'})</option>`);
                        $('#generateRoleId').html(opts.join(''));
                        applyDefaultGenerateRole();
                    })
                    .fail(() => {
                        roleRows = [];
                        $('#generateRoleId').html('');
                    });
            };

            const escapeHtml = (value) => $('<div>').text(value ?? '').html();
            const formatDateId = (value) => {
                if (!value) return '-';
                const parts = String(value).slice(0, 10).split('-');
                return parts.length === 3 ? `${parts[2]}/${parts[1]}/${parts[0]}` : escapeHtml(value);
            };
            const syncStatusBadge = (status) => {
                const s = String(status || '').toUpperCase();
                const map = {
                    PERPANJANGAN_DITEMUKAN: 'success',
                    MASIH_SAMA_EXPIRED: 'warning text-dark',
                    ERP_LEBIH_LAMA: 'secondary',
                    TIDAK_ADA_DI_ERP: 'danger',
                    ERP_TGL_KELUAR_KOSONG: 'danger'
                };
                return `<span class="badge text-bg-${map[s] || 'secondary'}">${escapeHtml(s || '-')}</span>`;
            };
            const ajaxErrorMessage = (xhr, fallback = 'Server Error') => {
                const jsonMessage = xhr?.responseJSON?.message;
                if (jsonMessage) return jsonMessage;
                const text = (xhr?.responseText || '').toString().replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
                return text ? text.slice(0, 500) : fallback;
            };
            const applyDefaultGenerateRole = () => {
                if (!Array.isArray(roleRows) || !roleRows.length) return;
                const pekerjaRole = roleRows.find((r) => {
                    const name = String(r?.name || '').toLowerCase();
                    const slug = String(r?.slug || '').toLowerCase();
                    return name.includes('profil menu pekerja')
                        || name.includes('profil pekerja')
                        || slug.includes('profil-menu-pekerja')
                        || slug.includes('profil-pekerja')
                        || name === 'pekerja'
                        || slug === 'pekerja';
                });
                if (pekerjaRole?.id) {
                    $('#generateRoleId').val(String(pekerjaRole.id)).trigger('change');
                } else if (roleRows.length > 0) {
                    $('#generateRoleId').val(String(roleRows[0].id)).trigger('change');
                }
            };
            const splCandidateRoutes = {
                erpActiveCapture: @json(route('master_karyawan.erp_active_missing_candidates')),
                capture: @json(route('surat_perintah_lembur.sync_third_party.candidates.capture')),
                data: @json(route('surat_perintah_lembur.sync_third_party.candidates.data')),
                review: @json(route('surat_perintah_lembur.sync_third_party.candidates.master_review', ['id' => '__ID__'])),
                commit: @json(route('surat_perintah_lembur.sync_third_party.candidates.master_commit', ['id' => '__ID__'])),
                reviewBulk: @json(route('surat_perintah_lembur.sync_third_party.candidates.master_review_bulk')),
                commitBulk: @json(route('surat_perintah_lembur.sync_third_party.candidates.master_commit_bulk')),
                status: @json(route('surat_perintah_lembur.sync_third_party.candidates.status', ['id' => '__ID__'])),
                employeeOptions: @json(route('master_karyawan.employee_options')),
            };
            const candidateStatusBadgeClass = (status) => {
                switch (String(status || '')) {
                    case 'baru_terdeteksi':
                        return 'danger';
                    case 'menunggu_master_karyawan':
                        return 'warning text-dark';
                    case 'sudah_dimapping':
                        return 'success';
                    case 'diabaikan':
                        return 'secondary';
                    default:
                        return 'light text-dark';
                }
            };
            const candidateCompactKaryawanText = (item) => {
                if (!item) return '<span class="text-muted">Belum ada match.</span>';
                return `
                    <div><strong>${escapeHtml(item.employee_code || '-')} - ${escapeHtml(item.full_name || '-')}</strong></div>
                    <div class="small text-muted">Finger: ${escapeHtml(item.finger_id || '-')} | Status: ${escapeHtml(item.employment_status || '-')} | ${item.is_active ? 'Aktif' : 'Nonaktif'}</div>
                `;
            };
            const renderSplCandidateSummary = (summary) => {
                const baru = Number(summary?.baru || 0);
                const menunggu = Number(summary?.menunggu || 0);
                const mapped = Number(summary?.mapped || 0);
                const diabaikan = Number(summary?.diabaikan || 0);
                const pending = baru + menunggu;

                $('#splCandidateCountBaru, #splCandidateMiniBaru').text(baru.toLocaleString('id-ID'));
                $('#splCandidateCountMenunggu, #splCandidateMiniMenunggu').text(menunggu.toLocaleString('id-ID'));
                $('#splCandidateCountMapped, #splCandidateMiniMapped').text(mapped.toLocaleString('id-ID'));
                $('#splCandidateCountDiabaikan, #splCandidateMiniDiabaikan').text(diabaikan.toLocaleString('id-ID'));

                const $reminder = $('#splCandidateReminder');
                const $reminderText = $('#splCandidateReminderText');
                if (pending > 0) {
                    $reminder.removeClass('is-muted').addClass('is-alert');
                    $reminderText.text(`${pending.toLocaleString('id-ID')} kandidat SPL perlu dicek.`);
                } else {
                    $reminder.removeClass('is-alert').addClass('is-muted');
                    $reminderText.text('Belum ada kandidat perlu dicek.');
                }
            };
            const captureSplCandidateScroll = () => {
                splCandidateScrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
            };
            const restoreSplCandidateScroll = () => {
                if (splCandidateScrollTop === null) return;
                window.setTimeout(() => {
                    window.scrollTo(0, splCandidateScrollTop);
                }, 10);
            };
            const syncSplCandidateSelectedCount = () => {
                $('#splCandidateSelectedCount').text(splCandidateSelectedIds.size.toLocaleString('id-ID'));
                const tableApi = splCandidateTable || ($.fn.DataTable.isDataTable('#splCandidateSuggestTable')
                    ? $('#splCandidateSuggestTable').DataTable()
                    : null);
                const visibleIds = tableApi
                    ? tableApi.rows({ page: 'current', search: 'applied' }).data().toArray().map((row) => String(row.id || ''))
                    : [];
                const enabledVisibleIds = visibleIds.filter((id) => id !== '');
                const selectedVisibleCount = enabledVisibleIds.filter((id) => splCandidateSelectedIds.has(id)).length;
                $('#checkAllSplCandidates')
                    .prop('checked', enabledVisibleIds.length > 0 && selectedVisibleCount === enabledVisibleIds.length)
                    .prop('indeterminate', selectedVisibleCount > 0 && selectedVisibleCount < enabledVisibleIds.length);
            };
            const periodOverlapsFilter = (row, dateFrom, dateTo) => {
                const first = String(row?.first_seen_work_date || '').slice(0, 10);
                const last = String(row?.last_seen_work_date || row?.first_seen_work_date || '').slice(0, 10);
                if (!dateFrom && !dateTo) return true;
                if (!first && !last) return false;
                if (dateFrom && last && last < dateFrom) return false;
                if (dateTo && first && first > dateTo) return false;
                return true;
            };
            const initSplCandidateDataTable = () => {
                if ($.fn.DataTable.isDataTable('#splCandidateSuggestTable')) {
                    splCandidateTable = $('#splCandidateSuggestTable').DataTable();
                    return splCandidateTable;
                }
                splCandidateTable = $('#splCandidateSuggestTable').DataTable({
                    data: [],
                    responsive: false,
                    autoWidth: false,
                    deferRender: true,
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    order: [[4, 'desc']],
                    language: {
                        emptyTable: 'Belum ada suggest kandidat SPL 3rd party.',
                        zeroRecords: 'Tidak ada kandidat yang cocok dengan filter.',
                    },
                    columns: [
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: (data, type, row) => {
                                if (type !== 'display') return '';
                                const id = String(row.id || '');
                                const checked = splCandidateSelectedIds.has(id) ? 'checked' : '';
                                return `<input type="checkbox" class="spl-candidate-row-check" value="${id}" ${checked}>`;
                            }
                        },
                        {
                            data: 'status',
                            render: (value, type, row) => {
                                if (type === 'sort' || type === 'type') return String(value || '');
                                return `<span class="badge text-bg-${candidateStatusBadgeClass(value)}">${escapeHtml(row.status_label || value || '-')}</span>`;
                            }
                        },
                        {
                            data: 'source_finger_id',
                            render: (value, type) => type === 'display'
                                ? `<strong>${escapeHtml(value || '-')}</strong>`
                                : String(value || '')
                        },
                        {
                            data: null,
                            render: (data, type, row) => {
                                if (type !== 'display') {
                                    return [row.source_employee_name, row.source_employee_code].filter(Boolean).join(' ');
                                }
                                return `
                                    <div>${escapeHtml(row.source_employee_name || '-')}</div>
                                    <div class="small text-muted">${escapeHtml(row.source_employee_code || '')}</div>
                                `;
                            }
                        },
                        {
                            data: null,
                            render: (data, type, row) => {
                                const first = String(row.first_seen_work_date || '').slice(0, 10);
                                const last = String(row.last_seen_work_date || row.first_seen_work_date || '').slice(0, 10);
                                const sortKey = last || first || '';
                                if (type === 'sort' || type === 'type') return sortKey;
                                return escapeHtml([first, last].filter(Boolean).join(' s/d ') || '-');
                            }
                        },
                        {
                            data: 'seen_count',
                            render: (value, type) => {
                                const number = Number(value || 0);
                                return type === 'display' ? number.toLocaleString('id-ID') : number;
                            }
                        },
                        {
                            data: null,
                            render: (data, type, row) => {
                                if (type !== 'display') {
                                    return [row.candidate_type_label, row.sample_notes, row.review_notes, row.sample_source_reference].filter(Boolean).join(' ');
                                }
                                const notes = [row.sample_notes, row.review_notes].filter(Boolean).join('<br>');
                                return `
                                    <div class="small">
                                        <div><span class="candidate-review-chip">${escapeHtml(row.candidate_type_label || '-')}</span></div>
                                        <div class="mt-1">${notes ? notes : '<span class="text-muted">Tanpa catatan tambahan.</span>'}</div>
                                    </div>
                                `;
                            }
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: (data, type, row) => {
                                if (type !== 'display') return '';
                                return `
                                    <div class="d-flex flex-wrap gap-1">
                                        <button type="button" class="btn btn-outline-warning btn-sm btn-spl-candidate-review" data-id="${row.id}">Review Master</button>
                                        <button type="button" class="btn btn-outline-success btn-sm btn-spl-candidate-mark" data-id="${row.id}" data-status="sudah_dimapping">Mapped</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm btn-spl-candidate-mark" data-id="${row.id}" data-status="diabaikan">Abaikan</button>
                                    </div>
                                `;
                            }
                        },
                    ],
                    drawCallback: function () {
                        syncSplCandidateSelectedCount();
                        restoreSplCandidateScroll();
                    },
                });
                return splCandidateTable;
            };
            const renderSplCandidateRows = (rows) => {
                const tableApi = initSplCandidateDataTable();
                tableApi.clear();
                tableApi.rows.add(Array.isArray(rows) ? rows : []);
                tableApi.draw(false);
                $('#splCandidateHint').text(rows.length
                    ? `Ditemukan ${rows.length.toLocaleString('id-ID')} kandidat. Default menampilkan pending; status Mapped berarti kandidat diarahkan ke master_karyawans existing melalui field mapped_karyawan_id.`
                    : 'Belum ada kandidat yang perlu direview.');
                syncSplCandidateSelectedCount();
            };
            const loadSplCandidateSuggestions = (options = {}) => {
                const doSync = !!options.sync;
                const status = ($('#splCandidateStatusFilter').val() || '').toString();
                const keyword = ($('#splCandidateKeyword').val() || '').toString().trim().toLowerCase();
                const dateFrom = ($('#splCandidateDateFrom').val() || '').toString();
                const dateTo = ($('#splCandidateDateTo').val() || '').toString();
                const tbody = $('#splCandidateSuggestTable tbody');
                const requestData = status ? { status } : {};

                const finishRender = (resp) => {
                    renderSplCandidateSummary(resp?.summary || {});
                    splCandidateRows = Array.isArray(resp?.data) ? resp.data : [];
                    const filtered = splCandidateRows.filter((row) => {
                        if (!periodOverlapsFilter(row, dateFrom, dateTo)) return false;
                        if (!keyword) return true;
                        const haystack = [
                            row?.source_finger_id,
                            row?.source_employee_name,
                            row?.source_employee_code,
                            row?.sample_source_reference,
                        ].join(' ').toLowerCase();
                        return haystack.includes(keyword);
                    });
                    renderSplCandidateRows(filtered);
                };

                tbody.html(`<tr><td colspan="8" class="employee-suggest-empty"><i class="fas fa-spinner fa-spin me-1"></i>${doSync ? 'Sync kandidat SPL 3rd party...' : 'Memuat suggest kandidat SPL...'}</td></tr>`);
                $('#btnSyncErpActiveCandidates, #btnSyncSplCandidates, #btnReloadSplCandidates, #btnSplCandidateBulkReview, #btnSplCandidateBulkMapped, #btnSplCandidateBulkIgnore').prop('disabled', true);

                const fetchData = () => $.getJSON(splCandidateRoutes.data, requestData)
                    .done((resp) => finishRender(resp))
                    .fail((xhr) => {
                        tbody.html('<tr><td colspan="8" class="employee-suggest-empty text-danger">Gagal memuat suggest kandidat SPL.</td></tr>');
                        $('#splCandidateHint').text('Suggest kandidat gagal dimuat.');
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal membaca suggest kandidat SPL'), 'error');
                    })
                    .always(() => {
                        $('#btnSyncErpActiveCandidates, #btnSyncSplCandidates, #btnReloadSplCandidates, #btnSplCandidateBulkReview, #btnSplCandidateBulkMapped, #btnSplCandidateBulkIgnore').prop('disabled', false);
                    });

                if (!doSync) {
                    return fetchData();
                }

                return $.post(splCandidateRoutes.capture, { preview_limit: 500 })
                    .done((resp) => {
                        const stats = resp?.stats || {};
                        const syncMessage = [
                            `Insert: ${Number(stats.inserted || 0).toLocaleString('id-ID')}`,
                            `Update: ${Number(stats.updated || 0).toLocaleString('id-ID')}`,
                            `Tetap: ${Number(stats.unchanged || 0).toLocaleString('id-ID')}`,
                        ].join(' | ');
                        $('#splCandidateHint').text(`Sync selesai. ${syncMessage}`);
                    })
                    .fail((xhr) => {
                        const json = xhr?.responseJSON || {};
                        const message = ajaxErrorMessage(xhr, 'Gagal sync kandidat SPL 3rd party');
                        $('#splCandidateHint').text(json?.can_continue_local
                            ? 'Sync source gagal. Daftar suggest lokal tetap bisa direview.'
                            : 'Sync suggest kandidat gagal.');
                        Swal.fire(
                            json?.can_continue_local ? 'Warning' : 'Error',
                            message,
                            json?.can_continue_local ? 'warning' : 'error'
                        );
                    })
                    .always(() => fetchData());
            };
            const openSplCandidateReview = (id) => {
                if (!splCandidateReviewModal) return;
                $('#splCandidateReviewId').val(String(id || ''));
                $('#splCandidateReviewCandidateMeta').html('');
                $('#splCandidateReviewCandidateNotes').text('Memuat review...');
                $('#splCandidateReviewExistingCode').html('<span class="text-muted">Memuat...</span>');
                $('#splCandidateReviewExistingFinger').html('<span class="text-muted">Memuat...</span>');
                $('#splCandidateReviewWarning').addClass('d-none').text('');
                $('#btnSaveSplCandidateReview').prop('disabled', true);
                splCandidateReviewPayload = null;
                splCandidateReviewModal.show();

                $.getJSON(splCandidateRoutes.review.replace('__ID__', String(id)))
                    .done((resp) => {
                        const review = resp?.review || null;
                        if (!review) {
                            throw new Error('review_empty');
                        }
                        splCandidateReviewPayload = review;
                        const candidate = review.candidate || {};
                        const suggested = review.suggested || {};
                        $('#splCandidateReviewCandidateMeta').html(`
                            <div><small class="text-muted d-block">Finger</small><strong>${escapeHtml(candidate.source_finger_id || '-')}</strong></div>
                            <div><small class="text-muted d-block">Pegawai Sumber</small><strong>${escapeHtml(candidate.source_employee_name || '-')}</strong></div>
                            <div><small class="text-muted d-block">Periode</small><strong>${escapeHtml(candidate.period || '-')}</strong></div>
                            <div><small class="text-muted d-block">Muncul</small><strong>${Number(candidate.seen_count || 0).toLocaleString('id-ID')}</strong></div>
                        `);
                        $('#splCandidateReviewCandidateNotes').html([
                            candidate.sample_source_reference ? `Ref: ${escapeHtml(candidate.sample_source_reference)}` : '',
                            candidate.sample_notes ? `Catatan: ${escapeHtml(candidate.sample_notes)}` : '',
                            review.action ? `Aksi: ${escapeHtml(review.action)}` : '',
                        ].filter(Boolean).join('<br>') || 'Tanpa catatan tambahan.');
                        $('#splCandidateReviewEmployeeCode').val(suggested.employee_code || '');
                        $('#splCandidateReviewFingerId').val(suggested.finger_id || '');
                        $('#splCandidateReviewFullName').val(suggested.full_name || '');
                        $('#splCandidateReviewEmploymentStatus').val(suggested.employment_status || 'kontrak');
                        $('#splCandidateReviewHireDate').val(suggested.hire_date || '');
                        $('#splCandidateReviewExistingCode').html(candidateCompactKaryawanText(review?.existing?.by_employee_code || null));
                        $('#splCandidateReviewExistingFinger').html(candidateCompactKaryawanText(review?.existing?.by_finger || null));
                        if (review.warning) {
                            $('#splCandidateReviewWarning').removeClass('d-none').text(review.warning);
                        }
                        $('#btnSaveSplCandidateReview').prop('disabled', !review.can_commit);
                    })
                    .fail((xhr) => {
                        splCandidateReviewModal.hide();
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal membaca review kandidat'), 'error');
                    });
            };
            const initSplCandidateBulkCopySelect = () => {
                const $select = $('#splCandidateBulkCopyProfile');
                if (!$select.length) return;
                if ($select.data('select2')) {
                    $select.select2('destroy');
                }
                $select.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    allowClear: true,
                    placeholder: 'Tanpa copy profil',
                    dropdownParent: $('#splCandidateBulkReviewModal'),
                    ajax: {
                        url: splCandidateRoutes.employeeOptions,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (resp) => ({
                            results: Array.isArray(resp?.results) ? resp.results : [],
                        }),
                    },
                });
            };
            const renderSplCandidateBulkRows = (items = []) => {
                const tbody = $('#splCandidateBulkTableBody');
                if (!items.length) {
                    tbody.html('<tr><td colspan="6" class="text-center text-muted py-3">Pilih kandidat dulu.</td></tr>');
                    return;
                }
                tbody.html(items.map((item, index) => {
                    const candidate = item?.candidate || {};
                    const suggested = item?.suggested || {};
                    const reviewText = [
                        item?.action ? `Aksi: ${escapeHtml(item.action)}` : '',
                        item?.warning ? `<span class="text-warning">${escapeHtml(item.warning)}</span>` : '',
                    ].filter(Boolean).join('<br>') || '<span class="text-muted">Siap diproses bulk.</span>';
                    return `
                        <tr>
                            <td>${index + 1}</td>
                            <td><strong>${escapeHtml(candidate.source_finger_id || '-')}</strong></td>
                            <td>
                                <div>${escapeHtml(candidate.source_employee_name || '-')}</div>
                                <div class="small text-muted">${escapeHtml(candidate.source_employee_code || '')}</div>
                            </td>
                            <td>${escapeHtml(candidate.period || '-')}</td>
                            <td>
                                <div><strong>${escapeHtml(suggested.employee_code || '-')} - ${escapeHtml(suggested.full_name || '-')}</strong></div>
                                <div class="small text-muted">Finger: ${escapeHtml(suggested.finger_id || '-')} | Status: ${escapeHtml(suggested.employment_status || '-')}</div>
                            </td>
                            <td class="small">${reviewText}</td>
                        </tr>
                    `;
                }).join(''));
            };
            const openSplCandidateBulkReview = () => {
                const ids = Array.from(splCandidateSelectedIds).map((id) => Number(id)).filter((id) => id > 0);
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih kandidat dulu untuk bulk review.', 'warning');
                    return;
                }
                if (!splCandidateBulkReviewModal) return;
                captureSplCandidateScroll();
                $('#splCandidateBulkCount').val(`${ids.length.toLocaleString('id-ID')} kandidat`);
                $('#btnSaveSplCandidateBulkReview').prop('disabled', true);
                renderSplCandidateBulkRows([]);
                splCandidateBulkPayload = [];
                $('#splCandidateBulkCopyProfile').val(null).trigger('change');
                splCandidateBulkReviewModal.show();
                $.getJSON(splCandidateRoutes.reviewBulk, { ids })
                    .done((resp) => {
                        const items = Array.isArray(resp?.data?.items) ? resp.data.items : [];
                        splCandidateBulkPayload = items;
                        $('#splCandidateBulkCount').val(`${Number(resp?.data?.count || items.length).toLocaleString('id-ID')} kandidat`);
                        renderSplCandidateBulkRows(items);
                        $('#btnSaveSplCandidateBulkReview').prop('disabled', !items.length);
                    })
                    .fail((xhr) => {
                        splCandidateBulkReviewModal.hide();
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal membaca bulk review kandidat'), 'error');
                    });
            };
            const updateSplCandidateStatusesBulk = (status) => {
                const ids = Array.from(splCandidateSelectedIds).map((id) => Number(id)).filter((id) => id > 0);
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih kandidat dulu.', 'warning');
                    return;
                }
                captureSplCandidateScroll();
                const requests = ids.map((id) => $.post(splCandidateRoutes.status.replace('__ID__', String(id)), {
                    status,
                    review_notes: status === 'diabaikan'
                        ? 'Diabaikan bulk dari panel suggest Master Karyawan.'
                        : 'Ditandai mapped bulk dari panel suggest Master Karyawan.',
                }));
                $.when.apply($, requests)
                    .done(() => {
                        splCandidateSelectedIds.clear();
                        loadSplCandidateSuggestions();
                        Swal.fire('Success', `Status ${ids.length.toLocaleString('id-ID')} kandidat berhasil diperbarui.`, 'success');
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal memproses bulk status kandidat'), 'error');
                    });
            };
            const renderExpiredContractPreview = (rows, summary) => {
                expiredContractSyncRows = Array.isArray(rows) ? rows : [];
                expiredContractSyncIds.clear();
                const applyRows = expiredContractSyncRows.filter((row) => row.can_apply);
                applyRows.forEach((row) => expiredContractSyncIds.add(String(row.app_karyawan_id)));

                const summaryParts = Object.entries(summary || {})
                    .map(([key, value]) => `${escapeHtml(key)}: <strong>${Number(value || 0).toLocaleString('id-ID')}</strong>`);
                $('#syncExpiredContractSummary').html(
                    `Total expired dicek: <strong>${expiredContractSyncRows.length.toLocaleString('id-ID')}</strong>`
                    + (summaryParts.length ? ` | ${summaryParts.join(' | ')}` : '')
                );

                const tbody = $('#syncExpiredContractTable tbody');
                if (!expiredContractSyncRows.length) {
                    tbody.html('<tr><td colspan="11" class="text-center text-muted py-4">Tidak ada kontrak expired aktif yang perlu dicek.</td></tr>');
                    $('#checkAllExpiredContractSync').prop('checked', false).prop('indeterminate', false);
                    return;
                }

                tbody.html(expiredContractSyncRows.map((row) => {
                    const id = String(row.app_karyawan_id || '');
                    const canApply = !!row.can_apply;
                    const checked = canApply && expiredContractSyncIds.has(id) ? 'checked' : '';
                    const disabled = canApply ? '' : 'disabled';
                    const appName = `${escapeHtml(row.app_nama || '-')}<div class="small text-muted">${escapeHtml(row.employment_status || '-')}</div>`;
                    const erpName = row.erp_nama
                        ? `${escapeHtml(row.erp_nama)}<div class="small text-muted">${escapeHtml(row.erp_jabatan || '-')}</div>`
                        : '<span class="text-muted">-</span>';
                    const erpStatus = [row.erp_status_karyawan, row.erp_status, row.erp_jenis].filter(Boolean).map(escapeHtml).join(' / ') || '-';
                    return `
                        <tr class="${canApply ? 'table-success' : ''}">
                            <td><input type="checkbox" class="expired-contract-sync-check" value="${id}" ${checked} ${disabled}></td>
                            <td><strong>${escapeHtml(row.finger_id || '-')}</strong></td>
                            <td>${appName}</td>
                            <td>${formatDateId(row.app_contract_start)}</td>
                            <td>${formatDateId(row.app_contract_end)}</td>
                            <td>${erpName}</td>
                            <td>${formatDateId(row.erp_contract_start)}</td>
                            <td>${formatDateId(row.erp_contract_end)}</td>
                            <td>${row.erp_kontrak_ke ?? '-'}</td>
                            <td>${erpStatus}</td>
                            <td>${syncStatusBadge(row.sync_status)}</td>
                        </tr>
                    `;
                }).join(''));
                syncExpiredContractCheckAllState();
            };
            const syncExpiredContractCheckAllState = () => {
                const enabledChecks = $('#syncExpiredContractTable .expired-contract-sync-check:not(:disabled)');
                const checkedCount = enabledChecks.filter(':checked').length;
                $('#checkAllExpiredContractSync')
                    .prop('checked', enabledChecks.length > 0 && checkedCount === enabledChecks.length)
                    .prop('indeterminate', checkedCount > 0 && checkedCount < enabledChecks.length);
            };
            const loadExpiredContractPreview = () => {
                $('#syncExpiredContractSummary').html('<span class="text-muted">Memuat data ERP...</span>');
                $('#syncExpiredContractTable tbody').html('<tr><td colspan="11" class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin me-1"></i>Memuat preview...</td></tr>');
                return $.getJSON('{{ route('master_karyawan.sync_expired_contracts.preview') }}')
                    .done((resp) => {
                        renderExpiredContractPreview(resp?.data?.rows || [], resp?.data?.summary || {});
                    })
                    .fail((xhr) => {
                        $('#syncExpiredContractSummary').text('Gagal memuat preview.');
                        $('#syncExpiredContractTable tbody').html('<tr><td colspan="11" class="text-center text-danger py-4">Gagal membaca data ERP.</td></tr>');
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal membaca data ERP'), 'error');
                    });
            };
            $('#btnSyncSplCandidates').on('click', function () {
                captureSplCandidateScroll();
                loadSplCandidateSuggestions({ sync: true });
            });

            $('#btnSyncErpActiveCandidates').on('click', function () {
                const $btn = $(this);
                captureSplCandidateScroll();
                $btn.prop('disabled', true);
                $('#splCandidateHint').text('Mengambil pegawai ERP aktif yang belum ada di Master Karyawan...');
                $.post(splCandidateRoutes.erpActiveCapture, { preview_limit: 500 })
                    .done((resp) => {
                        const stats = resp?.stats || {};
                        $('#splCandidateHint').text(
                            `ERP aktif diproses. Kandidat: ${Number(stats.candidates || 0).toLocaleString('id-ID')} | Insert: ${Number(stats.inserted || 0).toLocaleString('id-ID')} | Update: ${Number(stats.updated || 0).toLocaleString('id-ID')}`
                        );
                        loadSplCandidateSuggestions();
                        Swal.fire('Success', resp?.message || 'Suggest ERP aktif berhasil diperbarui.', 'success');
                    })
                    .fail((xhr) => {
                        $('#splCandidateHint').text('Pengambilan pegawai ERP aktif gagal.');
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal mengambil pegawai ERP aktif'), 'error');
                    })
                    .always(() => {
                        $btn.prop('disabled', false);
                    });
            });

            const splCandidateCollapseStorageKey = 'master-karyawan-spl-candidate-collapsed';
            const setSplCandidatePanelState = (collapsed) => {
                const $body = $('#splCandidateBody');
                const $icon = $('#splCandidateToggleIcon');
                const $text = $('#splCandidateToggleText');
                if (collapsed) {
                    $body.addClass('d-none');
                    $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    $text.text('Buka Panel');
                    try { localStorage.setItem(splCandidateCollapseStorageKey, '1'); } catch (e) {}
                } else {
                    $body.removeClass('d-none');
                    $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                    $text.text('Tutup Panel');
                    try { localStorage.setItem(splCandidateCollapseStorageKey, '0'); } catch (e) {}
                }
            };

            const loadSplCandidatePanelState = () => {
                let collapsed = true;
                try {
                    collapsed = localStorage.getItem(splCandidateCollapseStorageKey) !== '0';
                } catch (e) {
                    collapsed = true;
                }
                setSplCandidatePanelState(collapsed);
            };

            $('#btnToggleSplCandidates').on('click', function () {
                const collapsed = $('#splCandidateBody').hasClass('d-none');
                setSplCandidatePanelState(!collapsed);
            });

            $('#btnReloadSplCandidates').on('click', function () {
                captureSplCandidateScroll();
                loadSplCandidateSuggestions();
            });

            $('#splCandidateStatusFilter').on('change', function () {
                loadSplCandidatePanelState();
                splCandidateSelectedIds.clear();
                captureSplCandidateScroll();
                loadSplCandidateSuggestions();
            });

            let splCandidateKeywordTimer = null;
            $('#splCandidateKeyword').on('input', function () {
                clearTimeout(splCandidateKeywordTimer);
                splCandidateKeywordTimer = setTimeout(() => {
                    splCandidateSelectedIds.clear();
                    captureSplCandidateScroll();
                    loadSplCandidateSuggestions();
                }, 250);
            });
            $('#splCandidateDateFrom, #splCandidateDateTo').on('change', function () {
                splCandidateSelectedIds.clear();
                captureSplCandidateScroll();
                loadSplCandidateSuggestions();
            });

            $('#splCandidateSuggestTable').on('change', '.spl-candidate-row-check', function (e) {
                const id = String($(this).val() || '');
                if (!id) return;
                const checked = $(this).is(':checked');
                if (e.shiftKey && lastSplCandidateCheckedId) {
                    const $rows = $('#splCandidateSuggestTable tbody .spl-candidate-row-check');
                    const ids = $rows.map(function () { return String($(this).val() || ''); }).get();
                    const startIndex = ids.indexOf(String(lastSplCandidateCheckedId));
                    const endIndex = ids.indexOf(id);
                    if (startIndex >= 0 && endIndex >= 0) {
                        const [from, to] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex];
                        $rows.slice(from, to + 1).each(function () {
                            const rowId = String($(this).val() || '');
                            $(this).prop('checked', checked);
                            if (!rowId) return;
                            if (checked) {
                                splCandidateSelectedIds.add(rowId);
                            } else {
                                splCandidateSelectedIds.delete(rowId);
                            }
                        });
                    }
                } else if (checked) {
                    splCandidateSelectedIds.add(id);
                } else {
                    splCandidateSelectedIds.delete(id);
                }
                lastSplCandidateCheckedId = id;
                syncSplCandidateSelectedCount();
            });

            $('#checkAllSplCandidates').on('change', function () {
                const checked = $(this).is(':checked');
                const tableApi = initSplCandidateDataTable();
                const $visibleChecks = $('#splCandidateSuggestTable tbody .spl-candidate-row-check');

                $visibleChecks.each(function () {
                    const id = String($(this).val() || '');
                    if (!id) return;
                    $(this).prop('checked', checked);
                    if (checked) {
                        splCandidateSelectedIds.add(id);
                    } else {
                        splCandidateSelectedIds.delete(id);
                    }
                });

                lastSplCandidateCheckedId = null;
                tableApi.rows({ page: 'current', search: 'applied' }).invalidate().draw(false);
                syncSplCandidateSelectedCount();
            });

            $('#btnSplCandidateBulkReview').on('click', function () {
                openSplCandidateBulkReview();
            });
            $('#btnSplCandidateBulkMapped').on('click', function () {
                updateSplCandidateStatusesBulk('sudah_dimapping');
            });
            $('#btnSplCandidateBulkIgnore').on('click', function () {
                updateSplCandidateStatusesBulk('diabaikan');
            });

            $('#splCandidateSuggestTable').on('click', '.btn-spl-candidate-review', function () {
                const id = Number($(this).data('id'));
                if (!id) return;
                openSplCandidateReview(id);
            });

            $('#splCandidateSuggestTable').on('click', '.btn-spl-candidate-mark', function () {
                const id = Number($(this).data('id'));
                const status = ($(this).data('status') || '').toString();
                if (!id || !status) return;
                captureSplCandidateScroll();
                $.post(splCandidateRoutes.status.replace('__ID__', String(id)), {
                    status,
                    review_notes: status === 'diabaikan'
                        ? 'Diabaikan dari panel suggest Master Karyawan.'
                        : 'Ditandai mapped dari panel suggest Master Karyawan.',
                }).done((resp) => {
                    splCandidateSelectedIds.delete(String(id));
                    loadSplCandidateSuggestions();
                    Swal.fire('Success', resp?.message || 'Status kandidat diperbarui.', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal mengubah status kandidat'), 'error');
                });
            });

            $('#splCandidateReviewForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#splCandidateReviewId').val() || 0);
                if (!id) return;
                const payload = {
                    employee_code: ($('#splCandidateReviewEmployeeCode').val() || '').toString().trim(),
                    finger_id: ($('#splCandidateReviewFingerId').val() || '').toString().trim(),
                    full_name: ($('#splCandidateReviewFullName').val() || '').toString().trim(),
                    employment_status: ($('#splCandidateReviewEmploymentStatus').val() || 'kontrak').toString(),
                    hire_date: ($('#splCandidateReviewHireDate').val() || '').toString(),
                };
                const $btn = $('#btnSaveSplCandidateReview');
                $btn.prop('disabled', true);
                captureSplCandidateScroll();
                $.post(splCandidateRoutes.commit.replace('__ID__', String(id)), payload)
                    .done((resp) => {
                        if (splCandidateReviewModal) {
                            splCandidateReviewModal.hide();
                        }
                        splCandidateSelectedIds.delete(String(id));
                        loadSplCandidateSuggestions();
                        loadData();
                        Swal.fire('Success', resp?.message || 'Kandidat berhasil disimpan ke master karyawan.', 'success');
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal menyimpan kandidat ke master karyawan'), 'error');
                    })
                    .always(() => {
                        const canCommit = !!splCandidateReviewPayload?.can_commit;
                        $btn.prop('disabled', !canCommit);
                    });
            });
            $('#splCandidateBulkReviewForm').on('submit', function (e) {
                e.preventDefault();
                const ids = Array.from(splCandidateSelectedIds).map((id) => Number(id)).filter((id) => id > 0);
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih kandidat dulu untuk bulk review.', 'warning');
                    return;
                }
                const payload = {
                    ids,
                    copy_profile_karyawan_id: Number($('#splCandidateBulkCopyProfile').val() || 0) || '',
                };
                const $btn = $('#btnSaveSplCandidateBulkReview');
                $btn.prop('disabled', true);
                captureSplCandidateScroll();
                $.post(splCandidateRoutes.commitBulk, payload)
                    .done((resp) => {
                        if (splCandidateBulkReviewModal) {
                            splCandidateBulkReviewModal.hide();
                        }
                        splCandidateSelectedIds.clear();
                        loadSplCandidateSuggestions();
                        loadData();
                        const result = resp?.result || {};
                        Swal.fire(
                            'Success',
                            `${resp?.message || 'Bulk review selesai.'} Saved: ${Number(result.saved || 0).toLocaleString('id-ID')}, Skipped: ${Number(result.skipped || 0).toLocaleString('id-ID')}`,
                            'success'
                        );
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Gagal menyimpan bulk review kandidat'), 'error');
                    })
                    .always(() => {
                        $btn.prop('disabled', false);
                    });
            });

            $('#btnAddKaryawan').on('click', function () {
                $('#karyawanModalTitle').text('Tambah Karyawan');
                resetKaryawanErpHiddenCompensation();
                $('#karyawanId').val('');
                $('#karyawanCode').val('');
                $('#karyawanFingerId').val('');
                $('#karyawanFingerEffectiveDate').val('');
                $('#karyawanName').val('');
                resetPhotoInput('');
                $('#karyawanGender').val('');
                $('#karyawanReligion').val('');
                $('#karyawanBirthPlace').val('');
                $('#karyawanBirthDate').val('');
                $('#karyawanHireDate').val('');
                $('#karyawanContractStartDate').val('');
                $('#karyawanContractEndDate').val('');
                $('#karyawanContractNo').val('1');
                $('#karyawanStatus').val('tetap');
                fillJenisPekerjaOptions('');
                fillJabatanOptions('');
                fillAreaOptions('');
                $('#karyawanAreaEffectiveDate').val(new Date().toISOString().slice(0, 10));
                $('#karyawanPhone').val('');
                $('#karyawanEmail').val('');
                $('#karyawanNpwpNo').val('');
                $('#karyawanTaxFamilyStatus').val('');
                $('#karyawanAddressKtp').val('');
                $('#karyawanAddressSameAsKtp').prop('checked', false);
                $('#karyawanAddress').val('');
                $('#karyawanEducationLevel').val('');
                $('#karyawanGraduationYear').val('');
                $('#karyawanSchoolName').val('');
                $('#karyawanEmergencyContactName').val('');
                $('#karyawanEmergencyContactPhone').val('');
                $('#karyawanEmergencyContactRelation').val('');
                $('#karyawanCertifications').val('');
                $('#karyawanActive').prop('checked', true);
                resetBpjsProfileForm('tetap', '');
                syncAddressFields();
                modal.show();
            });

            $('#btnImportKaryawan').on('click', function () {
                $('#karyawanImportFile').val('');
                importModal.show();
            });

            $('#btnGenerateUsers').on('click', function () {
                if (selectedIds.size === 0) {
                    Swal.fire('Warning', 'Pilih minimal 1 karyawan dulu.', 'warning');
                    return;
                }
                $('#selectedKaryawanCount').val(`${selectedIds.size} karyawan`);
                $('#generateDefaultPassword').val('12345678');
                applyDefaultGenerateRole();
                generateUserModal.show();
            });

            $('#btnSelectMissingLogin').on('click', function () {
                const ids = getVisibleRowsWithoutLogin();
                if (!ids.length) {
                    Swal.fire('Info', 'Di halaman ini tidak ada karyawan yang belum punya user login.', 'info');
                    return;
                }
                ids.forEach((id) => selectedIds.add(id));
                syncRenderedChecks();
                refreshCheckAll();
                Swal.fire('Tercentang', `${ids.length} karyawan belum punya login di halaman ini sudah dicentang. Lanjut klik Generate User Login.`, 'success');
            });

            $('#btnBulkProfile').on('click', function () {
                if (selectedIds.size === 0) {
                    Swal.fire('Warning', 'Pilih minimal 1 karyawan untuk update profil bulk.', 'warning');
                    return;
                }

                const form = document.getElementById('bulkProfileForm');
                if (form) {
                    form.reset();
                }
                $('#bulkProfileSelectedCount').val(`${selectedIds.size} karyawan`);
                fillBulkProfileJenisPekerjaOptions('');
                bulkProfileModal?.show();
            });

            $('#bulkProfileForm').on('submit', function (event) {
                event.preventDefault();

                if (selectedIds.size === 0) {
                    Swal.fire('Warning', 'Tidak ada karyawan yang dipilih.', 'warning');
                    return;
                }

                if ($('.bulk-profile-apply:checked').length === 0) {
                    Swal.fire('Warning', 'Centang minimal satu field yang ingin diubah.', 'warning');
                    return;
                }

                const ids = Array.from(selectedIds).map((id) => Number(id)).filter((id) => id > 0);
                const $btn = $('#btnSaveBulkProfile');
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

                $.ajax({
                    url: '{{ route('master_karyawan.bulk_profile') }}',
                    type: 'POST',
                    data: {
                        karyawan_ids: ids,
                        apply_gender: $('#bulkProfileApplyGender').is(':checked') ? 1 : 0,
                        gender: $('#bulkProfileGender').val(),
                        apply_employment_status: $('#bulkProfileApplyEmploymentStatus').is(':checked') ? 1 : 0,
                        employment_status: $('#bulkProfileEmploymentStatus').val(),
                        apply_jenis_pekerja_id: $('#bulkProfileApplyJenisPekerja').is(':checked') ? 1 : 0,
                        jenis_pekerja_id: $('#bulkProfileJenisPekerjaId').val(),
                        apply_religion: $('#bulkProfileApplyReligion').is(':checked') ? 1 : 0,
                        religion: $('#bulkProfileReligion').val()
                    }
                }).done((resp) => {
                    bulkProfileModal?.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Bulk profil selesai.', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', ajaxErrorMessage(xhr, 'Bulk profil gagal'), 'error');
                }).always(() => {
                    $btn.prop('disabled', false).html('<i class="fas fa-save me-1"></i>Simpan Bulk Profil');
                });
            });

            $('#btnBulkDeactivate').on('click', function () {
                if (selectedIds.size === 0) {
                    Swal.fire('Warning', 'Pilih minimal 1 karyawan untuk dinonaktifkan.', 'warning');
                    return;
                }
                const ids = Array.from(selectedIds).map((id) => Number(id)).filter((id) => id > 0);
                Swal.fire({
                    title: `Nonaktifkan ${ids.length} karyawan?`,
                    html: `
                        <div class="text-start">
                            <label class="form-label">Tanggal Efektif</label>
                            <input type="date" id="bulkDeactivateDate" class="form-control" value="${new Date().toISOString().slice(0, 10)}" />
                            <label class="form-label mt-2">Alasan (opsional)</label>
                            <input type="text" id="bulkDeactivateReason" class="form-control" maxlength="255" placeholder="Contoh: Restrukturisasi / selesai kontrak" />
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Non Aktifkan',
                    preConfirm: () => {
                        const dt = (document.getElementById('bulkDeactivateDate')?.value || '').toString();
                        const rs = (document.getElementById('bulkDeactivateReason')?.value || '').toString().trim();
                        if (!dt) {
                            Swal.showValidationMessage('Tanggal efektif wajib diisi.');
                            return false;
                        }
                        return { dt, rs };
                    }
                }).then((res) => {
                    if (!res.isConfirmed || !res.value) return;
                    $.ajax({
                        url: '{{ route('master_karyawan.bulk_deactivate') }}',
                        type: 'POST',
                        data: {
                            karyawan_ids: ids,
                            effective_date: res.value.dt,
                            reason: res.value.rs
                        }
                    }).done((resp) => {
                        selectedIds.clear();
                        $('#checkAllRows').prop('checked', false).prop('indeterminate', false);
                        loadData();
                        Swal.fire('Success', resp?.message || 'Bulk nonaktif selesai', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Bulk nonaktif gagal', 'error');
                    });
                });
            });

            $('#btnSyncErpPtkp').on('click', function () {
                const selectedCount = selectedIds.size;
                Swal.fire({
                    title: 'Sync PTKP dari ERPA',
                    html: `
                        <div class="text-start">
                            <div class="alert alert-info py-2 mb-3">
                                Default aman: isi hanya karyawan yang Status PTKP-nya masih kosong.
                            </div>
                            <label class="form-label">Scope Data</label>
                            <select id="syncErpPtkpScope" class="form-select">
                                <option value="selected"${selectedCount > 0 ? ' selected' : ''}>Karyawan dicentang (${selectedCount})</option>
                                <option value="all_active"${selectedCount === 0 ? ' selected' : ''}>Semua karyawan aktif</option>
                            </select>
                            <label class="form-label mt-3">Mode Update</label>
                            <select id="syncErpPtkpMode" class="form-select">
                                <option value="empty" selected>Isi yang kosong saja</option>
                                <option value="overwrite">Overwrite semua dari ERPA</option>
                            </select>
                            <div class="small text-muted mt-2">
                                Nilai ERPA seperti TK0, TK/0, K2, atau K/2 akan dinormalisasi menjadi format TER: TK/0 s/d K/3.
                            </div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Mulai Sync',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const scope = (document.getElementById('syncErpPtkpScope')?.value || 'selected').toString();
                        const mode = (document.getElementById('syncErpPtkpMode')?.value || 'empty').toString();
                        if (scope === 'selected' && selectedCount === 0) {
                            Swal.showValidationMessage('Tidak ada karyawan yang dicentang. Pilih "Semua karyawan aktif" atau centang karyawan dulu.');
                            return false;
                        }
                        return { scope, mode };
                    }
                }).then((res) => {
                    if (!res.isConfirmed || !res.value) return;

                    const ids = Array.from(selectedIds).map((id) => Number(id)).filter((id) => id > 0);
                    Swal.fire({
                        title: 'Memproses sync PTKP...',
                        text: 'Sedang membaca ERPA dan mengisi Status PTKP.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '{{ route('master_karyawan.erp_ptkp_sync') }}',
                        type: 'POST',
                        data: {
                            scope: res.value.scope,
                            mode: res.value.mode,
                            karyawan_ids: ids
                        }
                    }).done((resp) => {
                        const stats = resp?.data?.stats || {};
                        loadData();
                        Swal.fire({
                            title: 'Sync PTKP selesai',
                            icon: 'success',
                            html: `
                                <div class="text-start">
                                    <div>Diperiksa: <strong>${stats.checked || 0}</strong></div>
                                    <div>Baris berubah: <strong>${stats.updated || 0}</strong></div>
                                    <div>PTKP diupdate: <strong>${stats.ptkp_updated || 0}</strong></div>
                                    <div>NPWP diupdate: <strong>${stats.npwp_updated || 0}</strong></div>
                                    <div>Sudah sama: <strong>${stats.unchanged || 0}</strong></div>
                                    <div>Dilewati karena sudah isi: <strong>${stats.skipped_existing || 0}</strong></div>
                                    <div>NPWP dilewati karena sudah isi: <strong>${stats.npwp_skipped_existing || 0}</strong></div>
                                    <div>Tidak ada di ERPA: <strong>${stats.missing_erp || 0}</strong></div>
                                    <div>PTKP tidak terbaca dari ERPA: <strong>${stats.missing_ptkp || 0}</strong></div>
                                    <div>Error koneksi/baris: <strong>${stats.errors || 0}</strong></div>
                                </div>
                            `
                        });
                    }).fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Sync PTKP ERPA gagal'), 'error');
                    });
                });
            });


            // Bulk sync contract dates from ERP
            $('#btnBulkSyncContractErp').on('click', function () {
                var selectedCount = selectedIds.size;
                Swal.fire({
                    title: 'Sync Kontrak dari ERP',
                    html: '<div class="text-start"><div class="alert alert-info py-2 mb-3">Ambil data <code>tgl_masuk</code>, <code>tgl_kontrak</code>, <code>tgl_keluar</code>, <code>kontrak_ke</code> dari ERP dan update ke master_karyawans + profil_bulan.</div><div class="form-check mb-2"><input class="form-check-input" type="checkbox" id="bulkSyncContractAll" checked /><label class="form-check-label" for="bulkSyncContractAll">Semua karyawan aktif</label></div>' + (selectedCount > 0 ? '<div class="form-check"><input class="form-check-input" type="checkbox" id="bulkSyncContractSelected" checked /><label class="form-check-label" for="bulkSyncContractSelected">Karyawan dicentang (' + selectedCount + ')</label></div>' : '') + '<div class="small text-muted mt-2">Mapping: tgl_masuk→hire_date, tgl_kontrak→contract_start_date, tgl_keluar→contract_end_date, kontrak_ke→contract_no profil bulan.</div></div>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Mulai Sync',
                    cancelButtonText: 'Batal',
                    preConfirm: function () {
                        var all = $('#bulkSyncContractAll').is(':checked');
                        return { scope: all ? 'all' : 'selected' };
                    }
                }).then(function (res) {
                    if (!res.isConfirmed || !res.value) return;
                    var ids = res.value.scope === 'selected' ? Array.from(selectedIds).map(function (id) { return Number(id); }).filter(function (id) { return id > 0; }) : [];
                    Swal.fire({ title: 'Memproses sync kontrak...', text: 'Mengambil data dari ERP...', allowOutsideClick: false, didOpen: function () { Swal.showLoading(); } });
                    $.ajax({
                        url: '{{ route("master_karyawan.bulk_sync_contract_erp") }}',
                        type: 'POST',
                        data: { karyawan_ids: ids, limit: 5000 }
                    }).done(function (resp) {
                        loadData();
                        var errorHtml = (resp.errors && resp.errors.length) ? '<div class="text-danger mt-2">Errors: ' + resp.errors.join('<br>') + '</div>' : '';
                        Swal.fire({ title: 'Sync Kontrak Selesai', icon: 'success', html: '<div class="text-start"><div>Diperbarui: <strong>' + (resp.updated || 0) + '</strong></div><div>Dilewati: <strong>' + (resp.skipped || 0) + '</strong></div>' + errorHtml + '</div>' });
                    }).fail(function (xhr) {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Sync kontrak ERP gagal'), 'error');
                    });
                });
            });


            $('#btnSyncErpNpwp').on('click', function () {
                const selectedCount = selectedIds.size;
                Swal.fire({
                    title: 'Sync NPWP dari ERPA',
                    html: `
                        <div class="text-start">
                            <div class="alert alert-info py-2 mb-3">
                                Aturan: pakai NPWP ERPA. Jika kosong, pakai KTP ERPA. Jika NPWP dan KTP kosong, isi <strong>TIDAK</strong>.
                            </div>
                            <label class="form-label">Scope Data</label>
                            <select id="syncErpNpwpScope" class="form-select">
                                <option value="selected"${selectedCount > 0 ? ' selected' : ''}>Karyawan dicentang (${selectedCount})</option>
                                <option value="all_active"${selectedCount === 0 ? ' selected' : ''}>Semua karyawan aktif</option>
                            </select>
                            <label class="form-label mt-3">Mode Update</label>
                            <select id="syncErpNpwpMode" class="form-select">
                                <option value="empty" selected>Isi NPWP yang kosong saja</option>
                                <option value="overwrite">Overwrite NPWP semua dari ERPA</option>
                            </select>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Mulai Sync',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const scope = (document.getElementById('syncErpNpwpScope')?.value || 'selected').toString();
                        const mode = (document.getElementById('syncErpNpwpMode')?.value || 'empty').toString();
                        if (scope === 'selected' && selectedCount === 0) {
                            Swal.showValidationMessage('Tidak ada karyawan yang dicentang. Pilih "Semua karyawan aktif" atau centang karyawan dulu.');
                            return false;
                        }
                        return { scope, mode };
                    }
                }).then((res) => {
                    if (!res.isConfirmed || !res.value) return;

                    const ids = Array.from(selectedIds).map((id) => Number(id)).filter((id) => id > 0);
                    Swal.fire({
                        title: 'Memproses sync NPWP...',
                        text: 'Sedang membaca ERPA dan mengisi NPWP karyawan.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '{{ route('master_karyawan.erp_npwp_sync') }}',
                        type: 'POST',
                        data: {
                            scope: res.value.scope,
                            mode: res.value.mode,
                            karyawan_ids: ids
                        }
                    }).done((resp) => {
                        const stats = resp?.data?.stats || {};
                        loadData();
                        Swal.fire({
                            title: 'Sync NPWP selesai',
                            icon: 'success',
                            html: `
                                <div class="text-start">
                                    <div>Diperiksa: <strong>${stats.checked || 0}</strong></div>
                                    <div>NPWP diupdate: <strong>${stats.updated || 0}</strong></div>
                                    <div>Sudah sama: <strong>${stats.unchanged || 0}</strong></div>
                                    <div>Dilewati karena sudah isi: <strong>${stats.skipped_existing || 0}</strong></div>
                                    <div>Fallback pakai KTP: <strong>${stats.fallback_ktp || 0}</strong></div>
                                    <div>Diisi TIDAK: <strong>${stats.filled_tidak || 0}</strong></div>
                                    <div>Tidak ada di ERPA: <strong>${stats.missing_erp || 0}</strong></div>
                                    <div>Error koneksi/baris: <strong>${stats.errors || 0}</strong></div>
                                </div>
                            `
                        });
                    }).fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Sync NPWP ERPA gagal'), 'error');
                    });
                });
            });

            $('#btnSyncErpKtp').on('click', function () {
                const selectedCount = selectedIds.size;
                Swal.fire({
                    title: 'Sync KTP dari ERPA',
                    html: `
                        <div class="text-start">
                            <div class="alert alert-info py-2 mb-3">
                                Aturan: pakai nilai <strong>KTP</strong> dari ERPA untuk mengisi kolom <strong>KTP / NIK</strong>.
                            </div>
                            <label class="form-label">Scope Data</label>
                            <select id="syncErpKtpScope" class="form-select">
                                <option value="selected"${selectedCount > 0 ? ' selected' : ''}>Karyawan dicentang (${selectedCount})</option>
                                <option value="all_active"${selectedCount === 0 ? ' selected' : ''}>Semua karyawan aktif</option>
                            </select>
                            <label class="form-label mt-3">Mode Update</label>
                            <select id="syncErpKtpMode" class="form-select">
                                <option value="empty" selected>Isi KTP yang kosong saja</option>
                                <option value="overwrite">Overwrite KTP semua dari ERPA</option>
                            </select>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Mulai Sync',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const scope = (document.getElementById('syncErpKtpScope')?.value || 'selected').toString();
                        const mode = (document.getElementById('syncErpKtpMode')?.value || 'empty').toString();
                        if (scope === 'selected' && selectedCount === 0) {
                            Swal.showValidationMessage('Tidak ada karyawan yang dicentang. Pilih "Semua karyawan aktif" atau centang karyawan dulu.');
                            return false;
                        }
                        return { scope, mode };
                    }
                }).then((res) => {
                    if (!res.isConfirmed || !res.value) return;

                    const ids = Array.from(selectedIds).map((id) => Number(id)).filter((id) => id > 0);
                    Swal.fire({
                        title: 'Memproses sync KTP...',
                        text: 'Sedang membaca ERPA dan mengisi KTP / NIK karyawan.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '{{ route('master_karyawan.erp_ktp_sync') }}',
                        type: 'POST',
                        data: {
                            scope: res.value.scope,
                            mode: res.value.mode,
                            karyawan_ids: ids
                        }
                    }).done((resp) => {
                        const stats = resp?.data?.stats || {};
                        loadData();
                        Swal.fire({
                            title: 'Sync KTP selesai',
                            icon: 'success',
                            html: `
                                <div class="text-start">
                                    <div>Diperiksa: <strong>${stats.checked || 0}</strong></div>
                                    <div>KTP diupdate: <strong>${stats.updated || 0}</strong></div>
                                    <div>Sudah sama: <strong>${stats.unchanged || 0}</strong></div>
                                    <div>Dilewati karena sudah isi: <strong>${stats.skipped_existing || 0}</strong></div>
                                    <div>Tidak ada di ERPA: <strong>${stats.missing_erp || 0}</strong></div>
                                    <div>KTP kosong di ERPA: <strong>${stats.missing_ktp || 0}</strong></div>
                                    <div>Error koneksi/baris: <strong>${stats.errors || 0}</strong></div>
                                </div>
                            `
                        });
                    }).fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Sync KTP ERPA gagal'), 'error');
                    });
                });
            });

            $('#btnSyncExpiredContracts').on('click', function () {
                syncExpiredContractModal.show();
                loadExpiredContractPreview();
            });

            $('#btnReloadExpiredContractPreview').on('click', function () {
                loadExpiredContractPreview();
            });

            $('#checkAllExpiredContractSync').on('change', function () {
                const checked = $(this).is(':checked');
                $('#syncExpiredContractTable .expired-contract-sync-check:not(:disabled)').each(function () {
                    $(this).prop('checked', checked);
                    const id = String($(this).val() || '');
                    if (!id) return;
                    if (checked) {
                        expiredContractSyncIds.add(id);
                    } else {
                        expiredContractSyncIds.delete(id);
                    }
                });
                syncExpiredContractCheckAllState();
            });

            $('#syncExpiredContractTable').on('change', '.expired-contract-sync-check', function () {
                const id = String($(this).val() || '');
                if (!id) return;
                if ($(this).is(':checked')) {
                    expiredContractSyncIds.add(id);
                } else {
                    expiredContractSyncIds.delete(id);
                }
                syncExpiredContractCheckAllState();
            });

            $('#btnApplyExpiredContractSync').on('click', function () {
                const ids = Array.from(expiredContractSyncIds).map((id) => Number(id)).filter((id) => id > 0);
                if (!ids.length) {
                    Swal.fire('Info', 'Tidak ada baris PERPANJANGAN_DITEMUKAN yang dipilih.', 'info');
                    return;
                }

                Swal.fire({
                    title: `Apply ${ids.length} kontrak?`,
                    text: 'contract_start_date dan contract_end_date akan diupdate dari tgl_masuk/tgl_keluar ERP terbaru.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Apply',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: '{{ route('master_karyawan.sync_expired_contracts.apply') }}',
                        type: 'POST',
                        data: { karyawan_ids: ids }
                    }).done((resp) => {
                        Swal.fire('Success', resp?.message || 'Sync kontrak selesai', 'success');
                        loadData();
                        loadExpiredContractPreview();
                    }).fail((xhr) => {
                        Swal.fire('Error', ajaxErrorMessage(xhr, 'Sync kontrak gagal'), 'error');
                    });
                });
            });

            $('#checkAllRows').on('change', function () {
                const visibleIds = getVisibleRowIds();
                if ($(this).is(':checked')) {
                    visibleIds.forEach((id) => selectedIds.add(id));
                } else {
                    visibleIds.forEach((id) => selectedIds.delete(id));
                }
                lastKaryawanCheckedId = null;
                syncRenderedChecks();
                refreshCheckAll();
            });

            $('#karyawanTable').on('click', '.row-check', function (e) {
                $(this)
                    .data('shiftKey', !!e.shiftKey)
                    .data('ctrlKey', !!e.ctrlKey)
                    .data('metaKey', !!e.metaKey);
            });

            $('#karyawanTable').on('change', '.row-check', function (e) {
                const id = String($(this).val() || '');
                if (!id) return;
                const checked = $(this).is(':checked');
                const shiftKey = $(this).data('shiftKey') === true || !!e.shiftKey;
                const ctrlKey = $(this).data('ctrlKey') === true || !!e.ctrlKey;
                const metaKey = $(this).data('metaKey') === true || !!e.metaKey;
                $(this).removeData('shiftKey').removeData('ctrlKey').removeData('metaKey');

                applyKaryawanSelection(id, {
                    checked,
                    shiftKey,
                    ctrlKey,
                    metaKey,
                    exclusiveSingle: false,
                });
            });

            $('#karyawanTable tbody').on('click', 'tr', function (e) {
                const $target = $(e.target);
                if ($target.closest('input, button, a, label, .btn-copy-cell').length) {
                    return;
                }

                const row = table.row(this).data();
                const id = String(row?.id || '');
                if (!id) return;

                applyKaryawanSelection(id, {
                    shiftKey: !!e.shiftKey,
                    ctrlKey: !!e.ctrlKey,
                    metaKey: !!e.metaKey,
                    exclusiveSingle: true,
                });
            });

            $('#karyawanTable').on('click', '.btn-copy-cell', async function () {
                const value = ($(this).attr('data-copy') || '').toString();
                const label = ($(this).attr('title') || 'Data').replace(/^Copy\s+/i, '');
                if (!value.trim()) return;

                try {
                    const copied = await copyTextToClipboard(value);
                    if (!copied) {
                        throw new Error('copy_failed');
                    }
                    showCopyToast(label);
                } catch (error) {
                    Swal.fire('Error', `Gagal copy ${label}.`, 'error');
                }
            });

            table.on('draw', function () {
                syncRenderedChecks();
                refreshCheckAll();
                window.requestAnimationFrame(syncKaryawanTopScrollbar);
            });

            table.on('xhr.dt', function (e, settings, json) {
                updateMainKeywordBulkMeta(json?.bulk_quick_meta || null, pendingMainKeywordBulkTokens);
            });

            $('#statusViewFilter, #contractAlertFilter, #bpjsFilter, #loginStatusFilter, #jabatanFilter, #areaFilter, #jenisPekerjaFilter').on('change', function () {
                resetMainSelectionState();
                loadData();
            });

            $('#btnReloadKaryawanTable').on('click', function () {
                loadData();
            });

            $('#mainKeywordFilter').on('input', function () {
                const keyword = ($(this).val() || '').toString();
                pendingMainKeywordBulkTokens = parseMainKeywordBulkTokens(keyword);
                updateMainKeywordBulkMeta(null, pendingMainKeywordBulkTokens);
            });

            $('#mainKeywordFilter').on('keydown', function (e) {
                if (e.key !== 'Enter') return;
                e.preventDefault();
                applyMainKeywordSearch();
            });

            $('#btnApplyMainKeyword').on('click', function () {
                applyMainKeywordSearch();
            });

            $('#btnResetMainKeyword').on('click', function () {
                $('#mainKeywordFilter').val('');
                pendingMainKeywordBulkTokens = [];
                mainKeywordBulkTokens = [];
                appliedMainKeywordText = '';
                updateMainKeywordBulkMeta(null, pendingMainKeywordBulkTokens);
                resetMainSelectionState();
                table.search('').draw();
            });

            $('#btnSaveRetirementSetting').on('click', function () {
                const $btn = $(this);
                const rawValue = ($('#retirementAgeYearsInput').val() || '').toString().trim();
                const retirementAgeYears = Number(rawValue);

                if (!Number.isInteger(retirementAgeYears) || retirementAgeYears < 40 || retirementAgeYears > 80) {
                    Swal.fire('Warning', 'Usia maksimal pensiun wajib angka bulat antara 40 sampai 80 tahun.', 'warning');
                    return;
                }

                $btn.prop('disabled', true);

                $.post('{{ route('master_karyawan.retirement_setting') }}', {
                    retirement_age_years: retirementAgeYears,
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'Setting masa pensiun berhasil disimpan.', 'success');
                    loadData();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan setting masa pensiun.', 'error');
                }).always(() => {
                    $btn.prop('disabled', false);
                });
            });

            $('#karyawanTable').on('click', '.btn-edit', function () {
                const row = getRowDataFromButton(this);
                if (!row) return;
                resetKaryawanErpSummary();
                resetKaryawanErpHiddenCompensation();
                $('#karyawanModalTitle').text('Edit Karyawan');
                $('#karyawanId').val(row.id);
                $('#karyawanCode').val(row.id_card_no || row.employee_code || '');
                $('#karyawanFingerId').val(row.finger_id || '');
                $('#karyawanFingerEffectiveDate').val('');
                $('#karyawanName').val(row.full_name || '');
                resetPhotoInput(row.photo_url || '');
                $('#karyawanGender').val(row.gender || '');
                $('#karyawanReligion').val(row.religion || '');
                $('#karyawanBirthPlace').val(row.birth_place || '');
                $('#karyawanBirthDate').val(row.birth_date || '');
                $('#karyawanHireDate').val(row.hire_date || '');
                $('#karyawanContractStartDate').val(row.contract_start_date || '');
                $('#karyawanContractEndDate').val(row.contract_end_date || '');
                $('#karyawanContractNo').val(row.contract_no || '1');
                $('#karyawanStatus').val(row.employment_status || 'tetap');
                fillJenisPekerjaOptions(row.jenis_pekerja_id || '');
                fillJabatanOptions(row.jabatan_id || '');
                fillAreaOptions(row.area_id || resolveAreaIdFromValue(row.area || row.area_name || ''));
                $('#karyawanAreaEffectiveDate').val(row.current_area_effective_date || row.hire_date || new Date().toISOString().slice(0, 10));
                $('#karyawanPhone').val(row.phone || '');
                $('#karyawanEmail').val(row.email || '');
                $('#karyawanNpwpNo').val(row.npwp_no || '');
                $('#karyawanTaxFamilyStatus').val(row.tax_family_status || '');
                $('#karyawanAddressKtp').val(row.address_ktp || '');
                $('#karyawanAddressSameAsKtp').prop('checked', !!row.address_same_as_ktp);
                $('#karyawanAddress').val(row.address_domicile || row.address || '');
                $('#karyawanEducationLevel').val(row.education_level || '');
                $('#karyawanGraduationYear').val(row.graduation_year || '');
                $('#karyawanSchoolName').val(row.school_name || '');
                $('#karyawanEmergencyContactName').val(row.emergency_contact_name || '');
                $('#karyawanEmergencyContactPhone').val(row.emergency_contact_phone || '');
                $('#karyawanEmergencyContactRelation').val(row.emergency_contact_relation || '');
                $('#karyawanCertifications').val(row.certifications || '');
                $('#karyawanActive').prop('checked', !!row.is_active);
                fillBpjsProfileForm(row.bpjs_profile || null, row.employment_status || 'tetap', row.hire_date || '');
                syncAddressFields();
                modal.show();
            });

            $('#btnTambahKaryawan').on('click', function () {
                resetKaryawanErpSummary();
                resetKaryawanErpHiddenCompensation();
            });

            function shouldApplyErpField(mode, currentValue, incomingValue) {
                if (!String(incomingValue ?? '').trim()) {
                    return false;
                }
                if (mode === 'all') {
                    return true;
                }
                return !String(currentValue ?? '').trim();
            }

            function applyKaryawanErpReference(data, mode) {
                const syncMode = String(mode || 'all').trim() || 'all';
                const isContractMode = syncMode === 'contract';
                const isNewRow = !String($('#karyawanId').val() || '').trim();
                const shouldCaptureHiddenCompensation = !isContractMode && (syncMode === 'all' || isNewRow);
                const summary = data.erp_summary || {};
                const erpNik = (data.id_card_no || '').toString().trim();

                if (shouldCaptureHiddenCompensation) {
                    karyawanErpHiddenCompensation = {
                        base_salary: data.base_salary,
                        overtime_rate: data.overtime_rate,
                        allowance_fixed: data.allowance_fixed,
                        allowance_position: data.allowance_position,
                        allowance_skill: data.allowance_skill,
                        allowance_medical_housing: data.allowance_medical_housing,
                        incentive_amount: data.incentive_amount,
                    };
                }

                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanCode').val(), erpNik)) {
                    $('#karyawanCode').val(erpNik);
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanFingerId').val(), data.finger_id)) {
                    $('#karyawanFingerId').val(data.finger_id || '');
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanName').val(), data.full_name)) {
                    $('#karyawanName').val(data.full_name || '');
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanGender').val(), data.gender)) {
                    $('#karyawanGender').val(data.gender || '');
                }
                if (shouldApplyErpField(isContractMode ? 'all' : syncMode, $('#karyawanStatus').val(), data.employment_status)) {
                    $('#karyawanStatus').val(data.employment_status || 'kontrak');
                }
                if (shouldApplyErpField(isContractMode ? 'all' : syncMode, $('#karyawanContractStartDate').val(), data.contract_start_date)) {
                    $('#karyawanContractStartDate').val(data.contract_start_date || '');
                }
                if (shouldApplyErpField(isContractMode ? 'all' : syncMode, $('#karyawanContractEndDate').val(), data.contract_end_date)) {
                    $('#karyawanContractEndDate').val(data.contract_end_date || '');
                }
                if (data.contract_no) { $('#karyawanContractNo').val(data.contract_no); }
                if (shouldApplyErpField(isContractMode ? 'all' : syncMode, $('#karyawanHireDate').val(), data.hire_date)) {
                    $('#karyawanHireDate').val(data.hire_date || '');
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanPhone').val(), data.phone)) {
                    $('#karyawanPhone').val(data.phone || '');
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanNpwpNo').val(), data.npwp_no)) {
                    $('#karyawanNpwpNo').val(data.npwp_no || '');
                }
                if (!isContractMode && shouldApplyErpField(syncMode, $('#karyawanTaxFamilyStatus').val(), data.tax_family_status)) {
                    $('#karyawanTaxFamilyStatus').val(data.tax_family_status || '');
                }
                if (data.matched_jabatan_id && (syncMode !== 'empty' || !String($('#karyawanJabatanId').val() || '').trim())) {
                    fillJabatanOptions(String(data.matched_jabatan_id));
                }
                if (data.matched_jenis_pekerja_id && (syncMode !== 'empty' || !String($('#karyawanJenisPekerjaId').val() || '').trim())) {
                    fillJenisPekerjaOptions(String(data.matched_jenis_pekerja_id));
                }

                const modeLabel = syncMode === 'empty'
                    ? 'Mode isi field kosong'
                    : (syncMode === 'contract' ? 'Mode sync kontrak/status' : 'Mode isi semua');
                const summaryLines = [
                    `<strong>ERP terambil.</strong> ${modeLabel}.`,
                    `Kode: ${summary.kode || '-'} | Finger: ${summary.kd_finger || '-'} | Status: ${summary.status_karyawan || data.employment_status || '-'} | Pembayaran: ${summary.pembayaran || '-'}`,
                    `NIK/KTP: ${data.id_card_no || '-'} | NPWP terisi: ${data.npwp_no || '-'} | PTKP: ${data.tax_family_status || '-'}${summary.ptkp_raw ? ' | Raw PTKP ERPA: ' + summary.ptkp_raw : ''}`,
                    `Jabatan ERP: ${summary.jabatan || '-'}${data.matched_jabatan_label ? ' | Match Jabatan: ' + data.matched_jabatan_label : ''}`,
                    `${data.matched_jenis_pekerja_label ? 'Match Jenis Pekerja: ' + data.matched_jenis_pekerja_label + ' | ' : ''}Tgl Masuk: ${summary.tgl_masuk || '-'} | Tgl Keluar: ${summary.tgl_keluar || '-'} | Kontrak Ke: ${summary.kontrak_ke ?? '-'}`,
                ];
                setKaryawanErpSummary(summaryLines.join('<br>'), 'success');
            }

            function fetchAndApplyKaryawanErp(mode) {
                const $btn = $('#btnKaryawanPullErp');
                const fingerId = ($('#karyawanFingerId').val() || '').toString().trim();
                const employeeCode = ($('#karyawanCode').val() || '').toString().trim();

                if (!fingerId && !employeeCode) {
                    Swal.fire('Warning', 'Isi ID Finger atau NIK / kode karyawan terlebih dahulu sebelum ambil data ERP.', 'warning');
                    return;
                }

                $btn.prop('disabled', true);
                resetKaryawanErpSummary();
                if ((mode || 'all').toString().trim() !== 'contract') {
                    resetKaryawanErpHiddenCompensation();
                }

                $.getJSON('{{ route('master_karyawan.erp_preview') }}', {
                    finger_id: fingerId,
                    employee_code: employeeCode,
                }).done((resp) => {
                    const data = resp?.data || {};
                    applyKaryawanErpReference(data, mode);
                }).fail((xhr) => {
                    if ((mode || 'all').toString().trim() !== 'contract') {
                        resetKaryawanErpHiddenCompensation();
                    }
                    setKaryawanErpSummary((xhr.responseJSON?.message || 'Gagal membaca referensi ERP.'), 'warning');
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membaca referensi ERP.', 'error');
                }).always(() => {
                    $btn.prop('disabled', false);
                });
            }

            $('#btnKaryawanPullErp').on('click', function () {
                fetchAndApplyKaryawanErp($(this).data('mode') || 'all');
            });

            $(document).on('click', '.btn-karyawan-pull-erp-mode', function () {
                const mode = ($(this).data('mode') || 'all').toString();
                fetchAndApplyKaryawanErp(mode);
            });

            $('#karyawanAddressSameAsKtp').on('change', function () {
                syncAddressFields();
            });

            $('#karyawanAddressKtp').on('input', function () {
                if ($('#karyawanAddressSameAsKtp').is(':checked')) {
                    syncAddressFields();
                }
            });

            $('#karyawanStatus').on('change', function () {
                const isEdit = ($('#karyawanId').val() || '').toString().trim() !== '';
                if (isEdit || bpjsSelectionDirty) {
                    return;
                }
                renderBpjsComponentOptions(defaultBpjsSelectionByStatus($(this).val() || 'tetap'));
                syncBpjsCardState();
            });

            $('#karyawanHireDate').on('change', function () {
                const isEdit = ($('#karyawanId').val() || '').toString().trim() !== '';
                const hireDate = ($(this).val() || '').toString().trim();
                const currentBpjsDate = ($('#karyawanBpjsEffectiveStart').val() || '').toString().trim();
                if (!isEdit && hireDate && (!currentBpjsDate || currentBpjsDate === new Date().toISOString().slice(0, 10))) {
                    $('#karyawanBpjsEffectiveStart').val(hireDate);
                }
            });

            $('#karyawanBpjsComponentContainer').on('change', '.karyawan-bpjs-check', function () {
                bpjsSelectionDirty = true;
                syncBpjsCardState();
            });

            $('#karyawanPhotoRemove').on('click', function () {
                photoRemoved = true;
                $('#karyawanPhotoFile').val('');
                setPreviewImage('');
                stopCamera();
            });

            $('#karyawanPhotoFile').on('change', function () {
                const file = this.files?.[0];
                photoRemoved = false;
                if (!file) {
                    setPreviewImage('');
                    return;
                }
                setPreviewImage(URL.createObjectURL(file));
            });

            $('#karyawanPhotoOpenCamera').on('click', async function () {
                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                    Swal.fire('Error', 'Browser tidak mendukung kamera.', 'error');
                    return;
                }
                try {
                    stopCamera();
                    cameraStream = await navigator.mediaDevices.getUserMedia({
                        video: { facingMode: 'user', width: { ideal: 720 }, height: { ideal: 720 } },
                        audio: false
                    });
                    if (cameraPreview) {
                        cameraPreview.srcObject = cameraStream;
                        cameraPreview.classList.remove('d-none');
                        await cameraPreview.play();
                    }
                    $('#karyawanPhotoCapture').prop('disabled', false);
                    $('#karyawanPhotoCloseCamera').prop('disabled', false);
                } catch (err) {
                    Swal.fire('Error', 'Tidak bisa akses kamera. Izinkan permission kamera di browser.', 'error');
                }
            });

            $('#karyawanPhotoCapture').on('click', function () {
                captureFromCamera();
            });

            $('#karyawanPhotoCloseCamera').on('click', function () {
                stopCamera();
            });

            $('#karyawanModal').on('hidden.bs.modal', function () {
                stopCamera();
                resetKaryawanErpHiddenCompensation();
            });

            $('#karyawanModal').on('shown.bs.modal', function () {
                initJabatanSelects();
                initAreaSelect();
            });

            $('#karyawanTable').on('click', '.btn-transfer-area', function () {
                const row = getRowDataFromButton(this);
                if (!row || !transferAreaModal) return;

                $('#transferAreaKaryawanId').val(String(row.id || ''));
                $('#transferAreaKaryawanInfo').val(`${row.employee_code || '-'} - ${row.full_name || '-'}`);
                $('#transferAreaCurrent').val(row.area || '-');
                $('#transferAreaEffectiveDate').val(new Date().toISOString().slice(0, 10));
                $('#transferAreaNotes').val('');
                fillTransferAreaOptions(row.area_id || resolveAreaIdFromValue(row.area || row.area_name || ''));
                renderAreaHistoryRows([]);

                $.getJSON(`{{ url('/master-karyawan') }}/${row.id}/area-history`)
                    .done((resp) => {
                        const histories = resp?.data?.histories || [];
                        renderAreaHistoryRows(histories);
                    })
                    .fail(() => {
                        renderAreaHistoryRows([]);
                    });

                transferAreaModal.show();
            });

            $('#transferAreaModal').on('shown.bs.modal', function () {
                initTransferAreaSelect();
            });

            $(document).on('select2:open', function () {
                window.setTimeout(() => {
                    const searchField = document.querySelector('.select2-container--open .select2-search__field');
                    if (searchField) {
                        searchField.focus();
                    }
                }, 0);
            });

            $('#transferAreaForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#transferAreaKaryawanId').val() || 0);
                const payload = {
                    area_id: $('#transferAreaNewId').val() || '',
                    effective_date: ($('#transferAreaEffectiveDate').val() || '').toString(),
                    notes: ($('#transferAreaNotes').val() || '').toString().trim(),
                };

                if (!id || !payload.area_id || !payload.effective_date) {
                    Swal.fire('Warning', 'Area baru dan tanggal efektif wajib diisi.', 'warning');
                    return;
                }

                $.ajax({
                    url: `{{ url('/master-karyawan') }}/${id}/transfer-area`,
                    type: 'POST',
                    data: payload,
                }).done((resp) => {
                    transferAreaModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Transfer area berhasil disimpan.', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Transfer area gagal disimpan.', 'error');
                });
            });

            $('#offeringLetterModal').on('shown.bs.modal', function () {
                initJabatanSelects();
            });

            $('#karyawanForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#karyawanId').val();
                const payload = {
                    employee_code: ($('#karyawanCode').val() || '').toString().trim(),
                    finger_id: ($('#karyawanFingerId').val() || '').toString().trim(),
                    finger_effective_date: $('#karyawanFingerEffectiveDate').val() || null,
                    full_name: ($('#karyawanName').val() || '').toString().trim(),
                    gender: $('#karyawanGender').val(),
                    religion: ($('#karyawanReligion').val() || '').toString().trim(),
                    birth_place: ($('#karyawanBirthPlace').val() || '').toString().trim(),
                    birth_date: $('#karyawanBirthDate').val(),
                    hire_date: $('#karyawanHireDate').val(),
                    contract_start_date: $('#karyawanContractStartDate').val() || '',
                    contract_end_date: $('#karyawanContractEndDate').val() || '',
                    contract_no: $('#karyawanContractNo').val() || '1',
                    employment_status: $('#karyawanStatus').val(),
                    jenis_pekerja_id: $('#karyawanJenisPekerjaId').val() || '',
                    jabatan_id: $('#karyawanJabatanId').val(),
                    area_id: $('#karyawanArea').val() || '',
                    area_effective_date: $('#karyawanAreaEffectiveDate').val() || '',
                    phone: ($('#karyawanPhone').val() || '').toString().trim(),
                    email: ($('#karyawanEmail').val() || '').toString().trim(),
                    npwp_no: ($('#karyawanNpwpNo').val() || '').toString().trim(),
                    tax_family_status: ($('#karyawanTaxFamilyStatus').val() || '').toString().trim(),
                    address_ktp: ($('#karyawanAddressKtp').val() || '').toString().trim(),
                    address_same_as_ktp: $('#karyawanAddressSameAsKtp').is(':checked') ? 1 : 0,
                    address: ($('#karyawanAddress').val() || '').toString().trim(),
                    education_level: ($('#karyawanEducationLevel').val() || '').toString().trim(),
                    graduation_year: ($('#karyawanGraduationYear').val() || '').toString().trim(),
                    school_name: ($('#karyawanSchoolName').val() || '').toString().trim(),
                    emergency_contact_name: ($('#karyawanEmergencyContactName').val() || '').toString().trim(),
                    emergency_contact_phone: ($('#karyawanEmergencyContactPhone').val() || '').toString().trim(),
                    emergency_contact_relation: ($('#karyawanEmergencyContactRelation').val() || '').toString().trim(),
                    certifications: ($('#karyawanCertifications').val() || '').toString().trim(),
                    bpjs_effective_start: $('#karyawanBpjsEffectiveStart').val() || '',
                    bpjs_effective_end: $('#karyawanBpjsEffectiveEnd').val() || '',
                    bpjs_basis_general_nominal: ($('#karyawanBpjsBasisGeneral').val() || '').toString().trim(),
                    bpjs_basis_jp_nominal: ($('#karyawanBpjsBasisJp').val() || '').toString().trim(),
                    bpjs_basis_health_nominal: ($('#karyawanBpjsBasisHealth').val() || '').toString().trim(),
                    is_active: $('#karyawanActive').is(':checked') ? 1 : 0
                };
                if (!payload.employee_code || !payload.full_name || !payload.employment_status) {
                    Swal.fire('Warning', 'NIK, Nama, dan Status kerja wajib diisi', 'warning');
                    return;
                }
                if (payload.address_same_as_ktp && !payload.address_ktp) {
                    Swal.fire('Warning', 'Alamat KTP wajib diisi jika alamat domisili disamakan dengan KTP.', 'warning');
                    return;
                }

                const formData = new FormData();
                Object.entries(payload).forEach(([key, value]) => {
                    formData.append(key, value ?? '');
                });
                Object.entries(karyawanErpHiddenCompensation || {}).forEach(([key, value]) => {
                    if (value === null || value === undefined || value === '') {
                        return;
                    }
                    formData.append(key, String(value));
                });
                readSelectedBpjsIds().forEach((id) => {
                    formData.append('bpjs_component_ids[]', String(id));
                });
                if (photoRemoved) {
                    formData.append('photo_remove', '1');
                } else {
                    const photoFile = $('#karyawanPhotoFile')[0]?.files?.[0];
                    if (photoFile) {
                        formData.append('photo_file', photoFile);
                    }
                }
                if (id) {
                    formData.append('_method', 'PUT');
                }

                $.ajax({
                    url: id ? `{{ url('/master-karyawan') }}/${id}` : '{{ route('master_karyawan.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#karyawanTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                const row = getRowDataFromButton(this);
                const label = row ? `${row.employee_code || '-'} - ${row.full_name || '-'}` : `ID ${id}`;

                Swal.fire({
                    title: 'Hapus data karyawan?',
                    html: `<div class="text-start small">
                        <div><strong>${label}</strong></div>
                        <div class="text-muted mt-1">Rekomendasi: nonaktifkan (bank data). Delete permanen hanya untuk data salah/duplikat.</div>
                    </div>`,
                    icon: 'warning',
                    showCancelButton: true,
                    showDenyButton: true,
                    confirmButtonText: 'Nonaktifkan (Bank Data)',
                    denyButtonText: 'Delete Permanen',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                }).then(async (res) => {
                    if (res.isDismissed) return;

                    if (res.isConfirmed) {
                        const today = new Date().toISOString().slice(0, 10);
                        const inputRes = await Swal.fire({
                            title: 'Nonaktifkan karyawan',
                            html: `<div class="text-start small text-muted mb-2">Karyawan akan diproses seperti <strong>Resign</strong> (employment_status=nonaktif, is_active=false) dan akses mobile akan di-kick.</div>`,
                            input: 'text',
                            inputLabel: 'Tanggal efektif (YYYY-MM-DD)',
                            inputValue: (row?.contract_end_date || today),
                            showCancelButton: true,
                            confirmButtonText: 'Proses Nonaktif',
                            cancelButtonText: 'Batal',
                            preConfirm: (val) => {
                                const v = (val || '').toString().trim();
                                if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(v)) {
                                    Swal.showValidationMessage('Format tanggal harus YYYY-MM-DD');
                                    return false;
                                }
                                return v;
                            }
                        });
                        if (!inputRes.isConfirmed) return;
                        const resignDate = (inputRes.value || '').toString();

                        const reasonRes = await Swal.fire({
                            title: 'Catatan (opsional)',
                            input: 'textarea',
                            inputPlaceholder: 'Alasan nonaktif / koreksi data / dll',
                            showCancelButton: true,
                            confirmButtonText: 'Simpan',
                            cancelButtonText: 'Lewati',
                        });
                        const reason = reasonRes.isConfirmed ? (reasonRes.value || '').toString().trim() : '';

                        $.ajax({
                            url: `{{ url('/master-karyawan') }}/${id}/resign`,
                            type: 'POST',
                            data: { resign_date: resignDate, reason: reason }
                        }).done((resp) => {
                            loadData();
                            Swal.fire('Success', resp?.message || 'Karyawan dinonaktifkan', 'success');
                        }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal nonaktifkan', 'error'));
                        return;
                    }

                    if (res.isDenied) {
                        Swal.fire({
                            title: 'Delete permanen?',
                            html: `<div class="text-start small text-danger">
                                <div><strong>${label}</strong></div>
                                <div class="mt-1">Aksi ini menghapus permanen dari database (tidak bisa dikembalikan).</div>
                            </div>`,
                            icon: 'error',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, delete permanen',
                            cancelButtonText: 'Batal',
                        }).then((r2) => {
                            if (!r2.isConfirmed) return;
                            $.ajax({
                                url: `{{ url('/master-karyawan') }}/${id}`,
                                type: 'DELETE'
                            }).done((resp) => {
                                loadData();
                                Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                            }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                        });
                    }
                });
            });

            $('#karyawanTable').on('click', '.btn-resign', function () {
                const id = Number($(this).data('id'));
                const row = getRowDataFromButton(this);
                if (!row) return;

                $('#resignKaryawanId').val(String(id));
                $('#resignKaryawanInfo').val(`${row.employee_code || '-'} - ${row.full_name || '-'}`);
                const defaultDate = row.contract_end_date || new Date().toISOString().slice(0, 10);
                $('#resignDate').val(defaultDate);
                $('#resignReason').val('');
                $('.resign-reason-tag').removeClass('is-active');
                resignModal.show();
            });

            $('#resignReasonQuickTags').on('click', '.resign-reason-tag', function () {
                const value = ($(this).data('value') || '').toString().trim();
                if (!value) return;

                $('.resign-reason-tag').removeClass('is-active');
                $(this).addClass('is-active');

                const textarea = $('#resignReason');
                const current = (textarea.val() || '').toString().trim();
                if (!current) {
                    textarea.val(value);
                } else if (!current.toLowerCase().includes(value.toLowerCase())) {
                    textarea.val(`${current}; ${value}`.slice(0, 255));
                }
                textarea.trigger('focus');
            });

            $('#resignForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#resignKaryawanId').val() || 0);
                const resignDate = ($('#resignDate').val() || '').toString();
                const reason = ($('#resignReason').val() || '').toString().trim();
                if (!id || !resignDate) {
                    Swal.fire('Warning', 'Data resign belum lengkap.', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Proses resign karyawan ini?',
                    text: `Tanggal efektif: ${resignDate}`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, resignkan'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-karyawan') }}/${id}/resign`,
                        type: 'POST',
                        data: {
                            resign_date: resignDate,
                            reason: reason
                        }
                    }).done((resp) => {
                        resignModal.hide();
                        loadData();
                        Swal.fire('Success', resp?.message || 'Resign processed', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Resign failed', 'error');
                    });
                });
            });

            $('#karyawanTable').on('click', '.btn-reactivate', function () {
                const row = getRowDataFromButton(this);
                if (!row) return;

                $('#reactivateKaryawanId').val(String(row.id));
                $('#reactivateKaryawanInfo').val(`${row.employee_code || '-'} - ${row.full_name || '-'}`);
                $('#reactivateStatus').val('kontrak');
                $('#reactivateEffectiveDate').val(new Date().toISOString().slice(0, 10));
                $('#reactivateContractEndDate').val('');
                $('#reactivateReason').val('');
                reactivateModal.show();
            });

            $('#karyawanTable').on('click', '.btn-offering-letter', function () {
                const row = getRowDataFromButton(this);
                if (!row) return;
                $('#offeringKaryawanId').val(String(row.id));
                $('#offeringKaryawanInfo').val(`${row.employee_code || '-'} - ${row.full_name || '-'}`);
                $('#offeringEffectiveDate').val(new Date().toISOString().slice(0, 10));
                $('#offeringReferenceNo').val('');
                $('#offeringLetterTitle').val('Offering Letter');
                $('#offeringStatus').val((row.employment_status || 'tetap') === 'nonaktif' ? 'tetap' : (row.employment_status || 'tetap'));
                $('#offeringTaxFamilyStatus').val(row.tax_family_status || '');
                $('#offeringBaseSalary').val(row.base_salary ?? '');
                $('#offeringOvertimeRate').val(row.overtime_rate ?? '');
                $('#offeringAllowanceFixed').val(row.allowance_fixed ?? '');
                $('#offeringAllowancePosition').val(row.allowance_position ?? '');
                $('#offeringAllowanceSkill').val(row.allowance_skill ?? '');
                $('#offeringAllowanceMedicalHousing').val(row.allowance_medical_housing ?? '');
                $('#offeringIncentiveAmount').val(row.incentive_amount ?? '');
                $('#offeringNotes').val('');
                $('#applyOfferingJabatan').prop('checked', false);
                $('#applyOfferingStatus').prop('checked', false);
                $('#applyOfferingTaxFamilyStatus').prop('checked', false);
                $('#applyOfferingBaseSalary').prop('checked', false);
                $('#applyOfferingOvertimeRate').prop('checked', false);
                $('#applyOfferingAllowanceFixed').prop('checked', false);
                $('#applyOfferingAllowancePosition').prop('checked', false);
                $('#applyOfferingAllowanceSkill').prop('checked', false);
                $('#applyOfferingAllowanceMedicalHousing').prop('checked', false);
                $('#applyOfferingIncentiveAmount').prop('checked', false);
                $('#offeringSyncMode').val('none');
                $('#offeringComponentsContainer').html('');
                fillJabatanOptions(row.jabatan_id || '');
                offeringLetterModal.show();
            });

            $('#btnAddOfferingComponentRow').on('click', function () {
                appendOfferingComponentRow();
            });

            $('#offeringComponentsContainer').on('click', '.btn-remove-offering-component', function () {
                $(this).closest('.offering-component-row').remove();
            });

            $('#offeringLetterForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#offeringKaryawanId').val() || 0);
                const payload = {
                    effective_date: ($('#offeringEffectiveDate').val() || '').toString(),
                    reference_no: ($('#offeringReferenceNo').val() || '').toString().trim(),
                    letter_title: ($('#offeringLetterTitle').val() || '').toString().trim(),
                    notes: ($('#offeringNotes').val() || '').toString().trim(),
                    apply_jabatan_id: $('#applyOfferingJabatan').is(':checked') ? 1 : 0,
                    jabatan_id: $('#offeringJabatanId').val() || '',
                    apply_employment_status: $('#applyOfferingStatus').is(':checked') ? 1 : 0,
                    employment_status: $('#offeringStatus').val() || '',
                    apply_tax_family_status: $('#applyOfferingTaxFamilyStatus').is(':checked') ? 1 : 0,
                    tax_family_status: ($('#offeringTaxFamilyStatus').val() || '').toString().trim(),
                    apply_base_salary: $('#applyOfferingBaseSalary').is(':checked') ? 1 : 0,
                    base_salary: $('#offeringBaseSalary').val(),
                    apply_overtime_rate: $('#applyOfferingOvertimeRate').is(':checked') ? 1 : 0,
                    overtime_rate: $('#offeringOvertimeRate').val(),
                    apply_allowance_fixed: $('#applyOfferingAllowanceFixed').is(':checked') ? 1 : 0,
                    allowance_fixed: $('#offeringAllowanceFixed').val(),
                    apply_allowance_position: $('#applyOfferingAllowancePosition').is(':checked') ? 1 : 0,
                    allowance_position: $('#offeringAllowancePosition').val(),
                    apply_allowance_skill: $('#applyOfferingAllowanceSkill').is(':checked') ? 1 : 0,
                    allowance_skill: $('#offeringAllowanceSkill').val(),
                    apply_allowance_medical_housing: $('#applyOfferingAllowanceMedicalHousing').is(':checked') ? 1 : 0,
                    allowance_medical_housing: $('#offeringAllowanceMedicalHousing').val(),
                    apply_incentive_amount: $('#applyOfferingIncentiveAmount').is(':checked') ? 1 : 0,
                    incentive_amount: $('#offeringIncentiveAmount').val(),
                    sync_to_profil_bulan_mode: ($('#offeringSyncMode').val() || 'none').toString(),
                    component_overrides: readOfferingComponentRows(),
                };
                if (!id || !payload.effective_date) {
                    Swal.fire('Warning', 'Tanggal efektif wajib diisi.', 'warning');
                    return;
                }
                const anyApply =
                    payload.apply_jabatan_id ||
                    payload.apply_employment_status ||
                    payload.apply_tax_family_status ||
                    payload.apply_base_salary ||
                    payload.apply_overtime_rate ||
                    payload.apply_allowance_fixed ||
                    payload.apply_allowance_position ||
                    payload.apply_allowance_skill ||
                    payload.apply_allowance_medical_housing ||
                    payload.apply_incentive_amount;
                if (!anyApply) {
                    Swal.fire('Warning', 'Pilih minimal 1 field yang ingin diubah.', 'warning');
                    return;
                }

                $.ajax({
                    url: `{{ url('/master-karyawan') }}/${id}/offering-letter`,
                    type: 'POST',
                    data: payload
                }).done((resp) => {
                    offeringLetterModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Offering letter applied', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Offering letter failed', 'error');
                });
            });

            // DataTables inside modal (contract history + documents).
            // We keep this separate from the main karyawanTable DataTable to avoid conflicts.
            let contractHistoryDT = null;
            let contractDocumentsDT = null;
            let supportingDocumentsDT = null;
            let supportingDocumentsCache = [];

            const ensureContractHistoryDT = () => {
                if (contractHistoryDT) return contractHistoryDT;
                if (!$.fn.DataTable || !document.getElementById('contractHistoryTable')) return null;
                // If this script block is evaluated twice (e.g., partial reload / duplicate include),
                // DataTables might already be initialized. In that case, just reuse the existing instance
                // to avoid "Cannot reinitialise DataTable" warning.
                if ($.fn.DataTable.isDataTable('#contractHistoryTable')) {
                    contractHistoryDT = $('#contractHistoryTable').DataTable();
                    return contractHistoryDT;
                }
                contractHistoryDT = $('#contractHistoryTable').DataTable({
                    retrieve: true,
                    paging: true,
                    pageLength: 5,
                    lengthChange: true,
                    lengthMenu: [5, 10, 25],
                    searching: true,
                    info: true,
                    ordering: true,
                    autoWidth: false,
                    responsive: false,
                    order: [[0, 'desc']],
                    // Keep UI consistent with other DataTables on this app (length + search on top).
                    dom: "<'row g-2 align-items-center mb-2'<'col-12 col-md-6'l><'col-12 col-md-6'f>>t<'row g-2 align-items-center mt-2'<'col-12 col-md-6'i><'col-12 col-md-6'p>>",
                    language: {
                        emptyTable: 'Belum ada riwayat',
                        search: 'Cari:',
                        lengthMenu: 'Tampilkan _MENU_',
                        info: 'Menampilkan _START_ s/d _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        paginate: { previous: 'Prev', next: 'Next' },
                    }
                });
                return contractHistoryDT;
            };

            const ensureContractDocumentsDT = () => {
                if (contractDocumentsDT) return contractDocumentsDT;
                if (!$.fn.DataTable || !document.getElementById('contractDocumentsTable')) return null;
                if ($.fn.DataTable.isDataTable('#contractDocumentsTable')) {
                    contractDocumentsDT = $('#contractDocumentsTable').DataTable();
                    return contractDocumentsDT;
                }
                contractDocumentsDT = $('#contractDocumentsTable').DataTable({
                    retrieve: true,
                    paging: true,
                    pageLength: 5,
                    lengthChange: true,
                    lengthMenu: [5, 10, 25],
                    searching: true,
                    info: true,
                    ordering: true,
                    autoWidth: false,
                    responsive: false,
                    order: [[0, 'desc']],
                    dom: "<'row g-2 align-items-center mb-2'<'col-12 col-md-6'l><'col-12 col-md-6'f>>t<'row g-2 align-items-center mt-2'<'col-12 col-md-6'i><'col-12 col-md-6'p>>",
                    language: {
                        emptyTable: 'Belum ada dokumen',
                        search: 'Cari:',
                        lengthMenu: 'Tampilkan _MENU_',
                        info: 'Menampilkan _START_ s/d _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        paginate: { previous: 'Prev', next: 'Next' },
                    }
                });
                return contractDocumentsDT;
            };

            const ensureSupportingDocumentsDT = () => {
                if (supportingDocumentsDT) return supportingDocumentsDT;
                if (!$.fn.DataTable || !document.getElementById('supportingDocumentsTable')) return null;
                if ($.fn.DataTable.isDataTable('#supportingDocumentsTable')) {
                    supportingDocumentsDT = $('#supportingDocumentsTable').DataTable();
                    return supportingDocumentsDT;
                }
                supportingDocumentsDT = $('#supportingDocumentsTable').DataTable({
                    retrieve: true,
                    paging: true,
                    pageLength: 5,
                    lengthChange: true,
                    lengthMenu: [5, 10, 25],
                    searching: true,
                    info: true,
                    ordering: true,
                    autoWidth: false,
                    responsive: false,
                    order: [[3, 'desc']],
                    dom: "<'row g-2 align-items-center mb-2'<'col-12 col-md-6'l><'col-12 col-md-6'f>>t<'row g-2 align-items-center mt-2'<'col-12 col-md-6'i><'col-12 col-md-6'p>>",
                    language: {
                        emptyTable: 'Belum ada file pendukung',
                        search: 'Cari:',
                        lengthMenu: 'Tampilkan _MENU_',
                        info: 'Menampilkan _START_ s/d _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        paginate: { previous: 'Prev', next: 'Next' },
                    }
                });
                return supportingDocumentsDT;
            };

            const fillSupportingDocCategoryOptions = (selectedValue = '') => {
                const rows = Array.isArray(supportingDocumentOptions?.categories) ? supportingDocumentOptions.categories : [];
                const html = ['<option value="">- Pilih Kategori -</option>']
                    .concat(rows.map((x) => `<option value="${x.key}">${x.label || x.key}</option>`));
                $('#supportingDocCategory').html(html.join('')).val(selectedValue || '');
            };

            const fillSupportingDocFilterCategoryOptions = (selectedValue = '') => {
                const rows = Array.isArray(supportingDocumentOptions?.categories) ? supportingDocumentOptions.categories : [];
                const html = ['<option value="">- Semua Kategori -</option>']
                    .concat(rows.map((x) => `<option value="${x.key}">${x.label || x.key}</option>`));
                $('#supportingDocsFilterCategory').html(html.join('')).val(selectedValue || '');
            };

            const fillSupportingDocCodeOptions = (selectedValue = '') => {
                const selectedCategory = ($('#supportingDocCategory').val() || '').toString();
                const rows = Array.isArray(supportingDocumentOptions?.codes) ? supportingDocumentOptions.codes : [];
                const filtered = selectedCategory
                    ? rows.filter((x) => (x.category || '').toString() === selectedCategory)
                    : rows;
                const html = ['<option value="">- Pilih Jenis -</option>']
                    .concat(filtered.map((x) => `<option value="${x.key}">${x.label || x.key}</option>`));
                $('#supportingDocCode').html(html.join('')).val(selectedValue || '');
            };

            const renderSupportingChecklist = (summary = null) => {
                const normalized = summary || {};
                const requiredCount = Number(normalized.required_count || 0);
                const uploadedCount = Number(normalized.uploaded_count || 0);
                const missingCount = Number(normalized.missing_count || 0);

                $('#supportingDocumentChecklistSummary').html(`
                    <div class="col-md-4">
                        <div class="border rounded p-2 bg-light">
                            <div class="small text-muted">Checklist Wajib</div>
                            <div class="fs-5 fw-bold">${requiredCount}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-2 bg-light">
                            <div class="small text-muted">Sudah Terpenuhi</div>
                            <div class="fs-5 fw-bold text-success">${uploadedCount}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-2 bg-light">
                            <div class="small text-muted">Masih Kurang</div>
                            <div class="fs-5 fw-bold text-danger">${missingCount}</div>
                        </div>
                    </div>
                `);

                const items = Array.isArray(normalized.items) ? normalized.items : [];
                if (!items.length) {
                    $('#supportingChecklistBody').html('<tr><td colspan="3" class="text-center text-muted">Checklist belum tersedia.</td></tr>');
                    return;
                }

                const html = items.map((item) => `
                    <tr>
                        <td>${item.label || item.code || '-'}</td>
                        <td>${item.uploaded ? '<span class="badge bg-success">Sudah ada</span>' : '<span class="badge bg-danger">Belum ada</span>'}</td>
                        <td>${Number(item.count || 0)}</td>
                    </tr>
                `).join('');
                $('#supportingChecklistBody').html(html);
            };

            const supportingStatusBadgeHtml = (row) => {
                const status = (row?.expiry_status || '').toString();
                const label = (row?.expiry_status_label || '').toString() || '-';

                if (status === 'expired') {
                    return '<span class="badge bg-danger">Expired</span>';
                }
                if (status === 'expiring_soon') {
                    return '<span class="badge bg-warning text-dark">Akan Expired</span>';
                }
                if (status === 'valid') {
                    return '<span class="badge bg-success">Masih Berlaku</span>';
                }
                return `<span class="badge bg-secondary">${label}</span>`;
            };

            const supportingExpiryText = (row) => {
                if (!row?.expired_at) return '-';
                if (row.expiry_status === 'expired') {
                    return `<span class="text-danger fw-semibold">${row.expired_at}</span>`;
                }
                if (row.expiry_status === 'expiring_soon') {
                    const suffix = Number.isInteger(Number(row.days_to_expire)) && Number(row.days_to_expire) >= 0
                        ? ` <small class="text-warning-emphasis">(${row.days_to_expire} hari lagi)</small>`
                        : '';
                    return `<span class="text-warning-emphasis fw-semibold">${row.expired_at}</span>${suffix}`;
                }
                return row.expired_at;
            };

            const getFilteredSupportingDocuments = () => {
                const categoryFilter = ($('#supportingDocsFilterCategory').val() || '').toString();
                const statusFilter = ($('#supportingDocsFilterStatus').val() || '').toString();

                return (supportingDocumentsCache || []).filter((row) => {
                    const matchCategory = !categoryFilter || (row.category || '').toString() === categoryFilter;
                    const matchStatus = !statusFilter || (row.expiry_status || '').toString() === statusFilter;
                    return matchCategory && matchStatus;
                });
            };

            // Use namespaced events + off() to avoid duplicate bindings if the page scripts are included twice.
            $('#contractHistoryModal')
                .off('shown.bs.modal.contractHistoryDT')
                .on('shown.bs.modal.contractHistoryDT', function () {
                // Adjust widths because DataTables initialized in a hidden modal can miscalculate columns.
                const dt1 = ensureContractHistoryDT();
                const dt2 = ensureContractDocumentsDT();
                const dt3 = ensureSupportingDocumentsDT();
                if (dt1) dt1.columns.adjust().draw(false);
                if (dt2) dt2.columns.adjust().draw(false);
                if (dt3) dt3.columns.adjust().draw(false);
            });

            const renderContractHistory = (rows = []) => {
                const list = Array.isArray(rows) ? rows : [];
                const dt = ensureContractHistoryDT();
                if (!dt) {
                    if (!list.length) {
                        $('#contractHistoryBody').html('<tr><td colspan="3" class="text-center text-muted">Belum ada riwayat</td></tr>');
                        return;
                    }
                    const html = list.map((r) => {
                        const type = (r.type || '-').toString();
                        const meta = r.meta || {};
                        let detail = '-';
                        if (type === 'profil_bulan_assignment') {
                            detail = `
                                Profil: ${meta.profil || '-'}<br>
                                Kontrak Ke: ${meta.contract_no ?? '-'}<br>
                                Periode Kontrak: ${(meta.contract_start_date || '-') + ' s/d ' + (meta.contract_end_date || '-')}<br>
                                Selesai: ${meta.contract_completed ? 'Ya' : 'Tidak'}
                            `;
                        } else if (type === 'offering_letter') {
                            const changed = meta.changed_fields && typeof meta.changed_fields === 'object'
                                ? Object.keys(meta.changed_fields).join(', ')
                                : '-';
                            detail = `
                                No Surat: ${meta.reference_no || '-'}<br>
                                Judul: ${meta.letter_title || '-'}<br>
                                Field Diubah: ${changed || '-'}<br>
                                Catatan: ${meta.notes || '-'}
                            `;
                        }
                        return `<tr>
                            <td>${r.event_at || '-'}</td>
                            <td>${r.title || '-'}</td>
                            <td>${detail}</td>
                        </tr>`;
                    }).join('');
                    $('#contractHistoryBody').html(html);
                    return;
                }

                const mapped = list.map((r) => {
                    const type = (r.type || '-').toString();
                    const meta = r.meta || {};
                    let detail = '-';
                    if (type === 'profil_bulan_assignment') {
                        detail = `
                            <div class="small">
                                <div>Profil: ${meta.profil || '-'}</div>
                                <div>Kontrak Ke: ${meta.contract_no ?? '-'}</div>
                                <div>Periode Kontrak: ${(meta.contract_start_date || '-') + ' s/d ' + (meta.contract_end_date || '-')}</div>
                                <div>Selesai: ${meta.contract_completed ? 'Ya' : 'Tidak'}</div>
                            </div>
                        `;
                    } else if (type === 'offering_letter') {
                        const changed = meta.changed_fields && typeof meta.changed_fields === 'object'
                            ? Object.keys(meta.changed_fields).join(', ')
                            : '-';
                        detail = `
                            <div class="small">
                                <div>No Surat: ${meta.reference_no || '-'}</div>
                                <div>Judul: ${meta.letter_title || '-'}</div>
                                <div>Field Diubah: ${changed || '-'}</div>
                                <div>Catatan: ${meta.notes || '-'}</div>
                            </div>
                        `;
                    }
                    return [r.event_at || '-', r.title || '-', detail];
                });
                dt.clear();
                dt.rows.add(mapped);
                dt.draw();
            };

            const renderContractDocuments = (rows = []) => {
                const list = Array.isArray(rows) ? rows : [];
                const dt = ensureContractDocumentsDT();
                if (!dt) {
                    if (!list.length) {
                        $('#contractDocumentsBody').html('<tr><td colspan="5" class="text-center text-muted">Belum ada dokumen</td></tr>');
                        return;
                    }
                    const html = list.map((r) => {
                        const typeLabel = (r.document_type || '-') === 'offering_letter' ? 'Offering Letter' : 'Kontrak';
                        const fileBtn = r.file_url
                            ? `<a href="${r.file_url}" target="_blank" class="btn btn-sm btn-outline-primary">Preview</a>`
                            : '<span class="text-muted">-</span>';
                        return `<tr>
                            <td>${r.document_date || '-'}</td>
                            <td>${typeLabel}</td>
                            <td>${r.title || '-'}${r.notes ? `<br><small class="text-muted">${r.notes}</small>` : ''}</td>
                            <td>${r.reference_no || '-'}</td>
                            <td>${fileBtn}</td>
                        </tr>`;
                    }).join('');
                    $('#contractDocumentsBody').html(html);
                    return;
                }

                const mapped = list.map((r) => {
                    const typeLabel = (r.document_type || '-') === 'offering_letter' ? 'Offering Letter' : 'Kontrak';
                    const fileBtn = r.file_url
                        ? `<a href="${r.file_url}" target="_blank" class="btn btn-sm btn-outline-primary btn-sm">Preview</a>`
                        : '<span class="text-muted">-</span>';
                    const title = `${r.title || '-'}${r.notes ? `<br><small class="text-muted">${r.notes}</small>` : ''}`;
                    return [r.document_date || '-', typeLabel, title, r.reference_no || '-', fileBtn];
                });
                dt.clear();
                dt.rows.add(mapped);
                dt.draw();
            };

            const renderSupportingDocuments = (rows = []) => {
                if (Array.isArray(rows)) {
                    supportingDocumentsCache = rows;
                }
                const list = getFilteredSupportingDocuments();
                const dt = ensureSupportingDocumentsDT();
                if (!dt) {
                    if (!list.length) {
                        $('#supportingDocumentsBody').html('<tr><td colspan="9" class="text-center text-muted">Belum ada file pendukung</td></tr>');
                        return;
                    }
                    const html = list.map((r) => {
                        const fileBtn = r.file_url
                            ? `<a href="${r.file_url}" target="_blank" class="btn btn-sm btn-outline-primary">Preview</a>`
                            : '<span class="text-muted">-</span>';
                        const removeBtn = `<button type="button" class="btn btn-sm btn-outline-danger btn-delete-support-doc" data-id="${r.id}">Arsipkan</button>`;
                        return `<tr>
                            <td>${r.category_label || '-'}</td>
                            <td>${r.document_code_label || '-'}</td>
                            <td>${r.title || '-'}${r.notes ? `<br><small class="text-muted">${r.notes}</small>` : ''}</td>
                            <td>${r.document_date || '-'}</td>
                            <td>${supportingStatusBadgeHtml(r)}</td>
                            <td>${supportingExpiryText(r)}</td>
                            <td>${r.reference_no || '-'}</td>
                            <td>${fileBtn}</td>
                            <td>${removeBtn}</td>
                        </tr>`;
                    }).join('');
                    $('#supportingDocumentsBody').html(html);
                    return;
                }

                const mapped = list.map((r) => {
                    const fileBtn = r.file_url
                        ? `<a href="${r.file_url}" target="_blank" class="btn btn-sm btn-outline-primary">Preview</a>`
                        : '<span class="text-muted">-</span>';
                    const removeBtn = `<button type="button" class="btn btn-sm btn-outline-danger btn-delete-support-doc" data-id="${r.id}">Arsipkan</button>`;
                    const title = `${r.title || '-'}${r.notes ? `<br><small class="text-muted">${r.notes}</small>` : ''}`;
                    return [
                        r.category_label || '-',
                        r.document_code_label || '-',
                        title,
                        r.document_date || '-',
                        supportingStatusBadgeHtml(r),
                        supportingExpiryText(r),
                        r.reference_no || '-',
                        fileBtn,
                        removeBtn,
                    ];
                });
                dt.clear();
                dt.rows.add(mapped);
                dt.draw();
            };

            const loadContractHistoryData = (karyawanId) => {
                return $.getJSON(`{{ url('/master-karyawan') }}/${karyawanId}/contract-history`)
                    .done((resp) => {
                        const data = resp?.data || {};
                        const k = data.karyawan || {};
                        $('#contractHistoryHeader').text(`${k.employee_code || '-'} - ${k.full_name || '-'} | Status: ${k.employment_status || '-'} | Kontrak: ${(k.contract_start_date || '-') + ' s/d ' + (k.contract_end_date || '-')}`);
                        renderContractHistory(Array.isArray(data.items) ? data.items : []);
                        fillOfferingLetterOptionsForDocs(data.offering_letter_options || []);
                        renderContractDocuments(data.documents || []);
                        supportingDocumentOptions = data.supporting_document_options || { categories: [], codes: [] };
                        fillSupportingDocCategoryOptions('');
                        fillSupportingDocFilterCategoryOptions('');
                        $('#supportingDocsFilterStatus').val('');
                        fillSupportingDocCodeOptions('');
                        renderSupportingChecklist(data.supporting_document_checklist || null);
                        renderSupportingDocuments(data.supporting_documents || []);
                    })
                    .fail((xhr) => {
                        $('#contractHistoryHeader').text('-');
                        renderContractHistory([]);
                        renderContractDocuments([]);
                        renderSupportingChecklist(null);
                        renderSupportingDocuments([]);
                        supportingDocumentOptions = { categories: [], codes: [] };
                        fillSupportingDocCategoryOptions('');
                        fillSupportingDocFilterCategoryOptions('');
                        $('#supportingDocsFilterStatus').val('');
                        fillSupportingDocCodeOptions('');
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load riwayat kontrak', 'error');
                    });
            };

            const fillOfferingLetterOptionsForDocs = (options = []) => {
                const rows = Array.isArray(options) ? options : [];
                const html = ['<option value="">- Pilih Offering Letter -</option>']
                    .concat(rows.map((x) => `<option value="${x.id}">${x.label || ('Offering #' + x.id)}</option>`));
                $('#contractDocOfferingLetterId').html(html.join(''));
            };

            $('#contractDocType').on('change', function () {
                const isOffering = ($(this).val() || '') === 'offering_letter';
                $('#contractDocOfferingLetterId').prop('disabled', !isOffering);
                if (!isOffering) {
                    $('#contractDocOfferingLetterId').val('');
                }
            });

            $('#supportingDocCategory').on('change', function () {
                fillSupportingDocCodeOptions('');
            });

            $('#supportingDocsFilterCategory, #supportingDocsFilterStatus').on('change', function () {
                renderSupportingDocuments();
            });

            $('#btnResetSupportingDocFilters').on('click', function () {
                $('#supportingDocsFilterCategory').val('');
                $('#supportingDocsFilterStatus').val('');
                renderSupportingDocuments();
            });

            $('#karyawanTable')
                .off('click.signatureLink', '.btn-sign-link')
                .on('click.signatureLink', '.btn-sign-link', async function () {
                const row = getRowDataFromButton(this);
                if (!row) return;

                const employmentStatus = (row.employment_status || '').toString();
                const isPermanent = employmentStatus === 'tetap';
                const isDaily = employmentStatus === 'harian';
                const isContract = employmentStatus === 'kontrak';
                const signatureCompare = row.signature_compare || {};
                if (!row.is_active || !['kontrak', 'tetap', 'harian'].includes(employmentStatus)) {
                    Swal.fire('Info', 'Link tanda tangan hanya tersedia untuk karyawan aktif dengan status harian, kontrak, atau tetap.', 'info');
                    return;
                }

                const escapeHtml = (value) => $('<div>').text((value || '').toString()).html();
                const currentStartDate = (row.contract_start_date || '').toString();
                const currentEndDate = (row.contract_end_date || '').toString();
                const getTemplateLabel = (templateType) => {
                    switch ((templateType || '').toString()) {
                        case 'offering_letter': return 'Offering Letter';
                        case 'kontrak_harian': return 'Form Kontrak Harian';
                        case 'perjanjian_bersama': return 'Perjanjian Bersama';
                        case 'pkwtt': return 'PKWTT';
                        case 'masa_persiapan': return 'Masa Persiapan';
                        case 'pkwt': return 'PKWT';
                        default: return 'Dokumen Karyawan';
                    }
                };
                const defaultTemplateType = isPermanent ? 'offering_letter' : (isDaily ? 'kontrak_harian' : 'pkwtt');
                const suggestedTitle = `${getTemplateLabel(defaultTemplateType)} - ${(row.full_name || 'Karyawan').toString()}`;
                const addDay = (dateString) => {
                    if (!dateString) return '';
                    const date = new Date(`${dateString}T00:00:00`);
                    if (Number.isNaN(date.getTime())) return '';
                    date.setDate(date.getDate() + 1);
                    return date.toISOString().slice(0, 10);
                };
                const formatRupiah = (value, suffix = '') => {
                    const num = Number(value || 0);
                    if (!Number.isFinite(num) || num <= 0) return '';
                    const text = `Rp ${num.toLocaleString('id-ID', { maximumFractionDigits: 0 })}`;
                    return suffix ? `${text} / ${suffix}` : text;
                };
                const compensationLines = [];
                if (Number(row.base_salary || 0) > 0) compensationLines.push(`Upah Pokok: ${formatRupiah(row.base_salary, 'bulan')}`);
                if (Number(row.allowance_fixed || 0) > 0) compensationLines.push(`Tunjangan Tetap: ${formatRupiah(row.allowance_fixed, 'bulan')}`);
                if (Number(row.allowance_position || 0) > 0) compensationLines.push(`Tunjangan Jabatan: ${formatRupiah(row.allowance_position, 'bulan')}`);
                if (Number(row.allowance_skill || 0) > 0) compensationLines.push(`Tunjangan Skill: ${formatRupiah(row.allowance_skill, 'bulan')}`);
                if (Number(row.allowance_medical_housing || 0) > 0) compensationLines.push(`Tunjangan Medis/Housing: ${formatRupiah(row.allowance_medical_housing, 'bulan')}`);
                if (Number(row.overtime_rate || 0) > 0) compensationLines.push(`Lembur: ${formatRupiah(row.overtime_rate, 'jam')}`);
                const defaultCompensation = compensationLines.length
                    ? compensationLines.join('\n')
                    : 'Rincian upah, tunjangan, dan lembur mengikuti dokumen HR/perusahaan yang berlaku untuk karyawan ini.';
                const defaultSchedule = row.planned_start_time && row.planned_end_time
                    ? `Senin - Jumat : ${String(row.planned_start_time).slice(0, 5)} - ${String(row.planned_end_time).slice(0, 5)}\nIstirahat : 12.00 - 13.00`
                    : 'Senin - Jumat : 08.00 - 17.00\nIstirahat : 12.00 - 13.00';
                const suggestedExtensionStart = addDay(currentEndDate);
                const defaultCompanyName = 'PT. HIKARI TEKNOLOGI INDONESIA';
                const defaultCompanyAddress = 'Jl. Raya Sukomulyo KM 23 Manyar Gresik';
                const defaultHrName = @json(auth()->user()->name ?? '');
                const defaultHrTitle = 'HRD';
                const defaultDomicileAddress = (row.address_domicile || row.address || '').toString();
                const defaultEffectiveDate = new Date().toISOString().slice(0, 10);
                const defaultReligion = (row.religion || '').toString();
                const compareAlertClass = (() => {
                    switch ((signatureCompare.level || '').toString()) {
                        case 'success': return 'alert-success';
                        case 'warning': return 'alert-warning';
                        case 'danger': return 'alert-danger';
                        case 'info': return 'alert-info';
                        default: return 'alert-secondary';
                    }
                })();
                const compareTitle = (signatureCompare.label || '').toString().trim();
                const compareSnapshotAt = (signatureCompare.snapshot_generated_at || '').toString().trim();
                const compareReasons = Array.isArray(signatureCompare.reasons) ? signatureCompare.reasons : [];
                const compareReasonsHtml = compareReasons.length
                    ? `<ul class="small mb-0 mt-2 ps-3">${compareReasons.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ul>`
                    : '';
                const compareSummaryHtml = signatureCompare.exists
                    ? `
                        <div class="alert ${compareAlertClass} border mb-3" id="swal-sign-compare-alert">
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                <div>
                                    <strong>${escapeHtml(compareTitle || 'Status Snapshot')}</strong>
                                    <div class="small mt-1">
                                        ${signatureCompare.needs_regenerate
                                            ? 'Link aktif lama terdeteksi tidak lagi sinkron dengan data master saat ini. Sebaiknya centang generate ulang agar snapshot baru dipakai.'
                                            : ((signatureCompare.can_reuse
                                                ? 'Link aktif masih sinkron dengan data master saat ini. Boleh reuse jika isi dokumen belum berubah.'
                                                : 'Riwayat link sebelumnya terdeteksi. Generate baru akan membuat snapshot terbaru.'))
                                        }
                                    </div>
                                </div>
                                ${compareSnapshotAt ? `<span class="badge text-bg-light">Snapshot: ${escapeHtml(compareSnapshotAt)}</span>` : ''}
                            </div>
                            ${compareReasonsHtml}
                        </div>
                    `
                    : '';
                const componentOptionsHtml = ['<option value="">- Pilih Komponen -</option>']
                    .concat(komponenPendapatanRows.map((r) => `<option value="${r.id}">${escapeHtml(r.code || '-')} - ${escapeHtml(r.name || '-')}</option>`))
                    .join('');

                const appendSignatureComponentRow = (item = null) => {
                    const html = `
                        <div class="border rounded p-2 signature-component-row mb-2">
                            <div class="row g-2 align-items-center">
                                <div class="col-md-5">
                                    <select class="form-select form-select-sm signature-component-id">
                                        ${componentOptionsHtml}
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="number" class="form-control form-control-sm signature-component-amount" min="0" step="0.01" placeholder="Nominal">
                                </div>
                                <div class="col-md-2">
                                    <input type="date" class="form-control form-control-sm signature-component-start">
                                </div>
                                <div class="col-md-2 d-flex gap-1">
                                    <input type="date" class="form-control form-control-sm signature-component-end">
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-signature-component">X</button>
                                </div>
                            </div>
                        </div>
                    `;
                    $('#swal-sign-component-container').append(html);
                    const rowEl = $('#swal-sign-component-container .signature-component-row').last();
                    if (item) {
                        rowEl.find('.signature-component-id').val(item.komponen_pendapatan_id || '');
                        rowEl.find('.signature-component-amount').val(item.amount ?? '');
                        rowEl.find('.signature-component-start').val(item.effective_start || '');
                        rowEl.find('.signature-component-end').val(item.effective_end || '');
                    }
                };

                const readSignatureComponentRows = () => {
                    const rows = [];
                    $('#swal-sign-component-container .signature-component-row').each(function () {
                        const componentId = Number($(this).find('.signature-component-id').val() || 0);
                        const amountRaw = ($(this).find('.signature-component-amount').val() || '').toString();
                        const amount = amountRaw === '' ? null : Number(amountRaw);
                        const start = ($(this).find('.signature-component-start').val() || '').toString();
                        const end = ($(this).find('.signature-component-end').val() || '').toString();
                        if (componentId > 0 && amount !== null && !Number.isNaN(amount)) {
                            rows.push({
                                komponen_pendapatan_id: componentId,
                                amount,
                                effective_start: start || null,
                                effective_end: end || null,
                            });
                        }
                    });
                    return rows;
                };

                const dialog = await Swal.fire({
                    title: getTemplateLabel(defaultTemplateType),
                    width: 980,
                    showCancelButton: true,
                    confirmButtonText: isPermanent ? 'Generate Offering Link' : 'Generate Link',
                    cancelButtonText: 'Batal',
                    focusConfirm: false,
                    heightAuto: false,
                    html: `
                        <div class="text-start">
                            ${compareSummaryHtml}
                            <div class="alert alert-light border mb-3">
                                <div><strong>Karyawan:</strong> ${escapeHtml(row.employee_code || '-')} - ${escapeHtml(row.full_name || '-')}</div>
                                <div><strong>${isPermanent ? 'Status aktif saat ini' : (isDaily ? 'Periode kerja saat ini' : 'Kontrak aktif saat ini')}:</strong> ${isPermanent ? escapeHtml((row.employment_status || '-').toString()) : `${escapeHtml(currentStartDate || '-')} s/d ${escapeHtml(currentEndDate || '-')}`}</div>
                                <div class="small text-muted mt-2">${isPermanent
                                    ? 'Flow ini dipakai untuk snapshot offering letter karyawan tetap. Komponen gaji dinamis bisa dimasukkan dari master komponen pendapatan.'
                                    : (isDaily
                                        ? 'Flow ini dipakai untuk Form Kontrak Harian. Periode kerja, agama, rincian upah, dan komponen dinamis dibekukan ke snapshot employee-sign.'
                                        : 'Flow ini dipakai untuk dokumen kontrak. Pilihan template kontrak mengikuti jenis dokumen perusahaan, lalu agama, periode kerja, rincian upah, dan komponen dinamis dibekukan ke snapshot employee-sign.')
                                }</div>
                            </div>
                            <div class="row g-2">
                                <div class="col-md-4">
                                    <label class="form-label">Template Dokumen</label>
                                    <select id="swal-sign-template-type" class="form-select" ${(isPermanent || isDaily) ? 'disabled' : ''}>
                                        ${isPermanent
                                            ? '<option value="offering_letter" selected>Offering Letter</option>'
                                            : (isDaily
                                                ? '<option value="kontrak_harian" selected>Form Kontrak Harian</option>'
                                                : '<option value="pkwtt" selected>PKWTT</option><option value="perjanjian_bersama">Perjanjian Bersama</option>')
                                        }
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Judul Dokumen</label>
                                    <input type="text" id="swal-sign-title" class="form-control" value="${escapeHtml(suggestedTitle)}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Nama Perusahaan</label>
                                    <input type="text" id="swal-sign-company-name" class="form-control" value="${escapeHtml(defaultCompanyName)}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Nama HR / Pihak Pertama</label>
                                    <input type="text" id="swal-sign-hr-name" class="form-control" value="${escapeHtml(defaultHrName)}" placeholder="Contoh: FAHMI ABDILLAH M">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Jabatan HR</label>
                                    <input type="text" id="swal-sign-hr-title" class="form-control" value="${escapeHtml(defaultHrTitle)}">
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Alamat Kantor / Pihak Pertama</label>
                                    <textarea id="swal-sign-company-address" class="form-control" rows="2">${escapeHtml(defaultCompanyAddress)}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Nomor Dokumen Baru</label>
                                    <input type="text" id="swal-sign-document-no" class="form-control" placeholder="Contoh: PKWT/HRD/2026/041">
                                </div>
                                <div class="col-md-6 swal-sign-contract-only">
                                    <label class="form-label">Nomor Kontrak Saat Ini</label>
                                    <input type="text" id="swal-sign-current-no" class="form-control" placeholder="Opsional, jika ada referensi lama">
                                </div>
                                <div class="col-md-6 swal-sign-contract-only">
                                    <label class="form-label">Tanggal Mulai Kontrak Baru</label>
                                    <input type="date" id="swal-sign-start-date" class="form-control" value="${escapeHtml(suggestedExtensionStart)}">
                                </div>
                                <div class="col-md-6 swal-sign-contract-only">
                                    <label class="form-label">Tanggal Selesai Kontrak Baru</label>
                                    <input type="date" id="swal-sign-end-date" class="form-control">
                                </div>
                                <div class="col-md-6 swal-sign-offering-only d-none">
                                    <label class="form-label">Tanggal Efektif Offering Letter</label>
                                    <input type="date" id="swal-sign-effective-date" class="form-control" value="${escapeHtml(defaultEffectiveDate)}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Agama Karyawan</label>
                                    <input type="text" id="swal-sign-religion" class="form-control" placeholder="Contoh: Islam" value="${escapeHtml(defaultReligion)}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Link Berlaku (hari)</label>
                                    <input type="number" id="swal-sign-valid-days" class="form-control" min="1" max="30" value="7">
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label">Catatan HR</label>
                                    <input type="text" id="swal-sign-note" class="form-control" placeholder="Opsional, contoh: Perpanjangan site PTS tahap 2">
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Alamat Tinggal / Domisili</label>
                                    <textarea id="swal-sign-domicile" class="form-control" rows="2">${escapeHtml(defaultDomicileAddress)}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Rincian Upah / Hak</label>
                                    <textarea id="swal-sign-compensation" class="form-control" rows="5">${escapeHtml(defaultCompensation)}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Jam Kerja / Ketentuan Waktu</label>
                                    <textarea id="swal-sign-work-schedule" class="form-control" rows="5">${escapeHtml(defaultSchedule)}</textarea>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Aturan Tambahan / Klausul Custom</label>
                                    <textarea id="swal-sign-additional" class="form-control" rows="4" placeholder="Opsional, isi jika ada klausul tambahan yang perlu muncul di dokumen digital."></textarea>
                                </div>
                                <div class="col-md-12">
                                    <div class="border rounded p-3 bg-light-subtle">
                                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                                            <div>
                                                <label class="form-label mb-0">Komponen Gaji Dinamis</label>
                                                <div class="small text-muted">Pakai master komponen pendapatan agar angka offering / kontrak tidak ditulis manual satu per satu.</div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="swal-sign-add-component">Tambah Komponen</button>
                                        </div>
                                        <div id="swal-sign-component-container"></div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="swal-sign-force">
                                        <label class="form-check-label" for="swal-sign-force">
                                            Generate ulang jika link aktif lama sudah ada
                                        </label>
                                    </div>
                                    <div class="small text-muted mt-1">Aktifkan opsi ini jika snapshot lama tidak boleh dipakai lagi karena range atau biodata dokumen sudah berubah.</div>
                                </div>
                            </div>
                        </div>
                    `,
                    didOpen: () => {
                        const syncTemplateFields = () => {
                            const templateType = ($('#swal-sign-template-type').val() || defaultTemplateType).toString();
                            const isOffering = templateType === 'offering_letter';
                            $('.swal-sign-contract-only').toggleClass('d-none', isOffering);
                            $('.swal-sign-offering-only').toggleClass('d-none', !isOffering);
                        };

                        syncTemplateFields();
                        if (signatureCompare.exists && signatureCompare.can_reuse && signatureCompare.needs_regenerate) {
                            $('#swal-sign-force').prop('checked', true);
                        }
                        $('#swal-sign-template-type').on('change', syncTemplateFields);
                        $('#swal-sign-template-type').on('change', function () {
                            const currentTitle = ($('#swal-sign-title').val() || '').toString().trim();
                            const nextTemplate = ($(this).val() || defaultTemplateType).toString();
                            const defaultTitleCandidate = `${getTemplateLabel(defaultTemplateType)} - ${(row.full_name || 'Karyawan').toString()}`;
                            if (!currentTitle || currentTitle === defaultTitleCandidate || currentTitle.startsWith('PKWTT - ') || currentTitle.startsWith('Perjanjian Bersama - ')) {
                                $('#swal-sign-title').val(`${getTemplateLabel(nextTemplate)} - ${(row.full_name || 'Karyawan').toString()}`);
                            }
                        });
                        $('#swal-sign-add-component').on('click', function () {
                            appendSignatureComponentRow();
                        });
                        $(document)
                            .off('click.signatureComponentRemove')
                            .on('click.signatureComponentRemove', '.btn-remove-signature-component', function () {
                                $(this).closest('.signature-component-row').remove();
                            });
                    },
                    preConfirm: () => {
                        const templateType = isPermanent
                            ? 'offering_letter'
                            : (isDaily ? 'kontrak_harian' : ($('#swal-sign-template-type').val() || defaultTemplateType).toString().trim());
                        const title = ($('#swal-sign-title').val() || '').toString().trim();
                        const companyName = ($('#swal-sign-company-name').val() || '').toString().trim();
                        const hrName = ($('#swal-sign-hr-name').val() || '').toString().trim();
                        const hrTitle = ($('#swal-sign-hr-title').val() || '').toString().trim();
                        const companyAddress = ($('#swal-sign-company-address').val() || '').toString().trim();
                        const documentNo = ($('#swal-sign-document-no').val() || '').toString().trim();
                        const currentContractNo = ($('#swal-sign-current-no').val() || '').toString().trim();
                        const effectiveDate = ($('#swal-sign-effective-date').val() || '').toString().trim();
                        const extensionStartDate = ($('#swal-sign-start-date').val() || '').toString().trim();
                        const extensionEndDate = ($('#swal-sign-end-date').val() || '').toString().trim();
                        const employeeReligion = ($('#swal-sign-religion').val() || '').toString().trim();
                        const validDays = Number(($('#swal-sign-valid-days').val() || '7').toString().trim());
                        const note = ($('#swal-sign-note').val() || '').toString().trim();
                        const employeeDomicileAddress = ($('#swal-sign-domicile').val() || '').toString().trim();
                        const compensationSummary = ($('#swal-sign-compensation').val() || '').toString().trim();
                        const workSchedule = ($('#swal-sign-work-schedule').val() || '').toString().trim();
                        const additionalClauses = ($('#swal-sign-additional').val() || '').toString().trim();
                        const componentOverrides = readSignatureComponentRows();
                        const forceRegenerate = $('#swal-sign-force').is(':checked');

                        if (signatureCompare.exists && signatureCompare.can_reuse && signatureCompare.needs_regenerate && !forceRegenerate) {
                            Swal.showValidationMessage('Snapshot lama terdeteksi. Aktifkan opsi generate ulang agar link baru dibuat dari data master terbaru.');
                            return false;
                        }

                        if (!title) {
                            Swal.showValidationMessage('Judul dokumen wajib diisi.');
                            return false;
                        }
                        if (!companyName) {
                            Swal.showValidationMessage('Nama perusahaan wajib diisi.');
                            return false;
                        }
                        if (!hrName) {
                            Swal.showValidationMessage('Nama HR / pihak pertama wajib diisi.');
                            return false;
                        }
                        if (!hrTitle) {
                            Swal.showValidationMessage('Jabatan HR wajib diisi.');
                            return false;
                        }
                        if (!companyAddress) {
                            Swal.showValidationMessage('Alamat kantor / pihak pertama wajib diisi.');
                            return false;
                        }
                        if (templateType === 'offering_letter') {
                            if (!effectiveDate) {
                                Swal.showValidationMessage('Tanggal efektif offering letter wajib diisi.');
                                return false;
                            }
                        } else {
                            if (!extensionStartDate || !extensionEndDate) {
                                Swal.showValidationMessage('Tanggal mulai dan selesai kontrak baru wajib diisi.');
                                return false;
                            }
                            if (extensionEndDate < extensionStartDate) {
                                Swal.showValidationMessage('Tanggal selesai kontrak baru tidak boleh lebih kecil dari tanggal mulai.');
                                return false;
                            }
                        }
                        if (!Number.isFinite(validDays) || validDays < 1 || validDays > 30) {
                            Swal.showValidationMessage('Masa berlaku link harus 1 sampai 30 hari.');
                            return false;
                        }

                        return {
                            template_type: templateType,
                            title,
                            company_name: companyName,
                            company_address: companyAddress,
                            hr_name: hrName,
                            hr_title: hrTitle,
                            document_no: documentNo,
                            current_contract_no: currentContractNo,
                            effective_date: effectiveDate,
                            extension_start_date: extensionStartDate,
                            extension_end_date: extensionEndDate,
                            employee_religion: employeeReligion,
                            employee_domicile_address: employeeDomicileAddress,
                            compensation_summary: compensationSummary,
                            work_schedule: workSchedule,
                            additional_clauses: additionalClauses,
                            component_overrides: componentOverrides,
                            valid_days: validDays,
                            note,
                            force_regenerate: forceRegenerate ? 1 : 0
                        };
                    }
                });

                if (!dialog.isConfirmed || !dialog.value) {
                    return;
                }

                $.ajax({
                    url: `{{ url('master-karyawan') }}/${row.id}/signature-link`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ...dialog.value
                    },
                    success: async function (res) {
                        const link = (res && res.link ? res.link : '').toString();
                        const statusText = (res && res.request && res.request.label ? res.request.label : '').toString();
                        const compare = (res && res.compare) ? res.compare : signatureCompare;
                        const safeLink = $('<div>').text(link).html();
                        const copied = await copyTextToClipboard(link);
                        const reusedWithOldSnapshot = !!(res && res.reused && compare && compare.needs_regenerate);
                        const compareReasonsHtml = compare && Array.isArray(compare.reasons) && compare.reasons.length
                            ? `<div class="alert alert-warning py-2 small mt-2 mb-2"><strong>Perhatian snapshot:</strong><ul class="mb-0 ps-3 mt-1">${compare.reasons.map((item) => `<li>${$('<div>').text(item).html()}</li>`).join('')}</ul></div>`
                            : '';

                        await Swal.fire({
                            icon: reusedWithOldSnapshot ? 'warning' : 'success',
                            title: res && res.reused ? 'Link Aktif Ditemukan' : `${getTemplateLabel((dialog.value && dialog.value.template_type) || defaultTemplateType)} Dibuat`,
                            html: `
                                <div class="text-start">
                                    <div class="small text-muted mb-2">${res && res.message ? $('<div>').text(res.message).html() : ''}</div>
                                    ${statusText ? `<div class="small mb-2"><strong>Status:</strong> ${$('<div>').text(statusText).html()}</div>` : ''}
                                    ${compareReasonsHtml}
                                    <input type="text" class="form-control" value="${safeLink}" readonly onclick="this.select()">
                                    <div class="small text-muted mt-2">${copied ? 'Link otomatis dicopy ke clipboard.' : 'Klik kolom link lalu copy manual bila perlu.'}</div>
                                </div>
                            `,
                            confirmButtonText: 'Buka Link',
                            showDenyButton: true,
                            denyButtonText: 'Tutup'
                        }).then((result) => {
                            if (result.isConfirmed && link) {
                                window.open(link, '_blank', 'noopener');
                            }
                        });

                        loadData();
                    },
                    error: function (xhr) {
                        const message = xhr?.responseJSON?.message || 'Gagal membuat link tanda tangan.';
                        const compare = xhr?.responseJSON?.compare || null;
                        const compareReasonsHtml = compare && Array.isArray(compare.reasons) && compare.reasons.length
                            ? `<ul class="mb-0 ps-3 mt-2">${compare.reasons.map((item) => `<li>${$('<div>').text(item).html()}</li>`).join('')}</ul>`
                            : '';
                        const icon = xhr?.status === 409 ? 'warning' : 'error';
                        Swal.fire({
                            icon,
                            title: xhr?.status === 409 ? 'Generate Ulang Diperlukan' : 'Error',
                            html: `
                                <div class="text-start">
                                    <div>${$('<div>').text(message).html()}</div>
                                    ${compareReasonsHtml}
                                </div>
                            `
                        });
                    }
                });
            });

            $('#karyawanTable')
                .off('click.contractHistory', '.btn-contract-history')
                .on('click.contractHistory', '.btn-contract-history', function () {
                const id = Number($(this).data('id'));
                if (!id) return;
                $('#contractHistoryKaryawanId').val(String(id));
                $('#contractHistoryHeader').text('Loading...');
                // Reset table contents (DataTables aware).
                renderContractHistory([]);
                renderContractDocuments([]);
                renderSupportingChecklist(null);
                renderSupportingDocuments([]);
                $('#contractDocType').val('contract').trigger('change');
                $('#contractDocDate').val('');
                $('#contractDocReferenceNo').val('');
                $('#contractDocTitle').val('');
                $('#contractDocFile').val('');
                $('#contractDocNotes').val('');
                $('#supportingDocCategory').val('');
                $('#supportingDocCode').html('<option value="">- Pilih Jenis -</option>');
                $('#supportingDocDate').val('');
                $('#supportingDocExpiredAt').val('');
                $('#supportingDocReferenceNo').val('');
                $('#supportingDocTitle').val('');
                $('#supportingDocFile').val('');
                $('#supportingDocNotes').val('');
                $('#supportingDocsFilterCategory').val('');
                $('#supportingDocsFilterStatus').val('');
                supportingDocumentOptions = { categories: [], codes: [] };
                fillSupportingDocCategoryOptions('');
                fillSupportingDocFilterCategoryOptions('');
                fillOfferingLetterOptionsForDocs([]);
                contractHistoryModal.show();
                loadContractHistoryData(id);
            });

            $('#contractDocumentUploadForm')
                .off('submit.contractDocs')
                .on('submit.contractDocs', function (e) {
                e.preventDefault();
                const karyawanId = Number($('#contractHistoryKaryawanId').val() || 0);
                const docType = ($('#contractDocType').val() || '').toString();
                if (!karyawanId || !docType) {
                    Swal.fire('Warning', 'Data upload belum lengkap.', 'warning');
                    return;
                }
                if (docType === 'offering_letter' && !$('#contractDocOfferingLetterId').val()) {
                    Swal.fire('Warning', 'Pilih referensi offering letter terlebih dahulu.', 'warning');
                    return;
                }
                const file = $('#contractDocFile')[0]?.files?.[0];
                if (!file) {
                    Swal.fire('Warning', 'Pilih file dokumen terlebih dahulu.', 'warning');
                    return;
                }
                const formData = new FormData();
                formData.append('document_type', docType);
                formData.append('offering_letter_id', ($('#contractDocOfferingLetterId').val() || '').toString());
                formData.append('title', ($('#contractDocTitle').val() || '').toString().trim());
                formData.append('reference_no', ($('#contractDocReferenceNo').val() || '').toString().trim());
                formData.append('document_date', ($('#contractDocDate').val() || '').toString());
                formData.append('notes', ($('#contractDocNotes').val() || '').toString().trim());
                formData.append('document_file', file);

                $.ajax({
                    url: `{{ url('/master-karyawan') }}/${karyawanId}/contract-documents`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    $('#contractDocFile').val('');
                    Swal.fire('Success', resp?.message || 'Dokumen berhasil diupload', 'success');
                    loadContractHistoryData(karyawanId);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Upload dokumen gagal', 'error');
                });
            });

            $('#supportingDocumentUploadForm')
                .off('submit.supportingDocs')
                .on('submit.supportingDocs', function (e) {
                e.preventDefault();
                const karyawanId = Number($('#contractHistoryKaryawanId').val() || 0);
                const category = ($('#supportingDocCategory').val() || '').toString();
                const documentCode = ($('#supportingDocCode').val() || '').toString();
                const title = ($('#supportingDocTitle').val() || '').toString().trim();
                const file = $('#supportingDocFile')[0]?.files?.[0];

                if (!karyawanId || !category || !documentCode || !title) {
                    Swal.fire('Warning', 'Kategori, jenis dokumen, dan judul wajib diisi.', 'warning');
                    return;
                }
                if (!file) {
                    Swal.fire('Warning', 'Pilih file pendukung terlebih dahulu.', 'warning');
                    return;
                }

                const formData = new FormData();
                formData.append('category', category);
                formData.append('document_code', documentCode);
                formData.append('title', title);
                formData.append('reference_no', ($('#supportingDocReferenceNo').val() || '').toString().trim());
                formData.append('document_date', ($('#supportingDocDate').val() || '').toString());
                formData.append('expired_at', ($('#supportingDocExpiredAt').val() || '').toString());
                formData.append('notes', ($('#supportingDocNotes').val() || '').toString().trim());
                formData.append('document_file', file);

                $.ajax({
                    url: `{{ url('/master-karyawan') }}/${karyawanId}/supporting-documents`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    $('#supportingDocDate').val('');
                    $('#supportingDocExpiredAt').val('');
                    $('#supportingDocReferenceNo').val('');
                    $('#supportingDocTitle').val('');
                    $('#supportingDocFile').val('');
                    $('#supportingDocNotes').val('');
                    Swal.fire('Success', resp?.message || 'File pendukung berhasil diupload', 'success');
                    loadContractHistoryData(karyawanId);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Upload file pendukung gagal', 'error');
                });
            });

            $('#supportingDocumentsTable')
                .off('click.supportingDocs', '.btn-delete-support-doc')
                .on('click.supportingDocs', '.btn-delete-support-doc', function () {
                const karyawanId = Number($('#contractHistoryKaryawanId').val() || 0);
                const documentId = Number($(this).data('id') || 0);
                if (!karyawanId || !documentId) return;

                Swal.fire({
                    title: 'Arsipkan file pendukung ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Arsipkan',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        url: `{{ url('/master-karyawan') }}/${karyawanId}/supporting-documents/${documentId}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        Swal.fire('Success', resp?.message || 'File pendukung diarsipkan', 'success');
                        loadContractHistoryData(karyawanId);
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal mengarsipkan file pendukung', 'error');
                    });
                });
            });

            $('#reactivateStatus').on('change', function () {
                const isKontrak = ($(this).val() || '') === 'kontrak';
                $('#reactivateContractEndDate').prop('required', isKontrak);
                if (!isKontrak) {
                    $('#reactivateContractEndDate').val('');
                }
            });

            $('#reactivateForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#reactivateKaryawanId').val() || 0);
                const employmentStatus = ($('#reactivateStatus').val() || '').toString();
                const effectiveDate = ($('#reactivateEffectiveDate').val() || '').toString();
                const contractEndDate = ($('#reactivateContractEndDate').val() || '').toString();
                const reason = ($('#reactivateReason').val() || '').toString().trim();
                if (!id || !employmentStatus || !effectiveDate) {
                    Swal.fire('Warning', 'Data aktivasi belum lengkap.', 'warning');
                    return;
                }
                if (employmentStatus === 'kontrak' && !contractEndDate) {
                    Swal.fire('Warning', 'Masa berakhir kontrak wajib diisi untuk status kontrak.', 'warning');
                    return;
                }

                $.ajax({
                    url: `{{ url('/master-karyawan') }}/${id}/reactivate`,
                    type: 'POST',
                    data: {
                        employment_status: employmentStatus,
                        effective_date: effectiveDate,
                        contract_end_date: contractEndDate || null,
                        reason: reason
                    }
                }).done((resp) => {
                    reactivateModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Reactivated', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Reactivation failed', 'error');
                });
            });

            $('#importKaryawanForm').on('submit', function (e) {
                e.preventDefault();
                const file = $('#karyawanImportFile')[0].files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: '{{ route('master_karyawan.import') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    importModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Import completed', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import failed', 'error');
                });
            });

            $('#generateUserForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    karyawan_ids: Array.from(selectedIds).map((id) => Number(id)),
                    role_id: Number($('#generateRoleId').val() || 0),
                    default_password: ($('#generateDefaultPassword').val() || '').toString(),
                };
                if (!payload.karyawan_ids.length || !payload.role_id || payload.default_password.length < 6) {
                    Swal.fire('Warning', 'Data generate user belum lengkap.', 'warning');
                    return;
                }

                $.ajax({
                    url: '{{ route('master_karyawan.generate_users') }}',
                    type: 'POST',
                    data: payload
                }).done((resp) => {
                    generateUserModal.hide();
                    selectedIds.clear();
                    $('#checkAllRows').prop('checked', false).prop('indeterminate', false);
                    loadData().always(() => {
                        Swal.fire('Success', `${resp?.message || 'Selesai'} Created: ${resp?.created || 0}, Updated: ${resp?.updated || 0}`, 'success');
                    });
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Generate user failed', 'error');
                });
            });

            initSplCandidateBulkCopySelect();
            syncSplCandidateSelectedCount();

            $.when(loadRefs(), loadRoleOptions()).always(function () {
                loadData();
                loadSplCandidateSuggestions();
            });
        });
    </script>
@endpush