@extends('layouts.adminlte')

@section('title', 'ATTENDANCE REVIEW')
@section('page_title', 'ATTENDANCE REVIEW')

@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>
        /* Lightweight loading overlay for long JSON loads (reviews/calculations/matrix). */
        .section-loading {
            position: relative;
        }
        .loading-overlay {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 10;
            background: rgba(255, 255, 255, 0.72);
            align-items: center;
            justify-content: center;
            padding: 12px;
            text-align: center;
        }
        .section-loading.is-loading .loading-overlay {
            display: flex;
        }
        .loading-overlay .loading-box {
            background: transparent;
            border: 0;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
        }
        .loading-overlay .loading-anim {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .loading-overlay .loading-anim img {
            width: 28px;
            height: 28px;
            display: block;
            object-fit: contain;
        }
        .loading-overlay .loading-text {
            font-size: 13px;
            color: #475569;
            margin-left: 10px;
        }
        .loading-overlay.is-fixed-front {
            position: fixed;
            inset: 0;
            z-index: 2050;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 42%, rgba(59, 130, 246, .10), transparent 28%),
                rgba(248, 250, 252, .68);
            backdrop-filter: blur(2px);
        }
        .loading-overlay.is-fixed-front .loading-box {
            position: relative;
            min-width: 0;
            margin-top: 14vh;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
        }
        .loading-overlay.is-fixed-front .loading-box::after {
            content: none;
        }
        .loading-overlay.is-fixed-front .loading-anim {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }
        .loading-overlay.is-fixed-front .loading-anim img {
            width: 34px;
            height: 34px;
        }
        .loading-overlay.is-fixed-front .loading-text {
            font-weight: 800;
            color: #0f172a;
        }
        .matrix-table th,
        .matrix-table td {
            white-space: nowrap;
            vertical-align: top;
            font-size: 14px;
        }

        .matrix-table .sticky-col {
            position: sticky;
            left: 0;
            z-index: 2;
            background: #fff;
        }
        .matrix-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 16px;
            margin-bottom: 6px;
        }
        .matrix-scroll-top-inner {
            height: 1px;
        }
        #matrixContainer {
            max-height: 72vh;
            overflow-y: auto;
            overflow-x: auto;
        }
        #matrixTable thead th {
            position: sticky;
            top: 0;
            z-index: 6;
            background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
            color: #0f172a;
            border-color: #cbd5e1;
            padding: 6px 8px;
            vertical-align: middle;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        }
        #matrixTable thead th.sticky-col {
            z-index: 7;
            background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
            min-width: 250px;
            color: #0f172a;
        }
        #matrixTable thead th.matrix-no-head {
            min-width: 42px;
            width: 42px;
            text-align: center;
        }

        .matrix-cell {
            min-width: 160px;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            padding: 8px;
            line-height: 1.3;
            position: relative;
            cursor: pointer;
            transition: box-shadow .15s ease;
        }
        .matrix-cell:hover {
            box-shadow: 0 0 0 2px rgba(59,130,246,.45);
        }
        #cellDetailModal .detail-grid { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; }
        #cellDetailModal .detail-label { font-weight: 600; color: #64748b; font-size: .82rem; padding: 4px 0; }
        #cellDetailModal .detail-value { font-size: .88rem; color: #0f172a; padding: 4px 0; }
        #cellDetailModal .detail-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
        #cellDetailModal .detail-section-title { font-size: .78rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        #cellDetailModal .detail-section-title i { color: #3b82f6; }
        #cellDetailModal .spl-modify-card { background: linear-gradient(135deg,#eff6ff,#dbeafe); border: 1px solid #93c5fd; border-radius: 10px; padding: 16px; margin-top: 12px; }
        #cellDetailModal .spl-modify-card .spl-current-type { font-size: 1.1rem; font-weight: 700; color: #1e40af; }
        #cellDetailModal .spl-modify-card .spl-badge { display: inline-block; background: #3b82f6; color: #fff; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; margin-left: 6px; }
        .reason-wrap {
            max-width: 360px;
            white-space: pre-line;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.35;
        }

        .matrix-cell.status-normal { background: #ffffff; }
        .matrix-cell.status-missing_in,
        .matrix-cell.status-missing_out {
            background:
                repeating-linear-gradient(
                    135deg,
                    rgba(251, 146, 60, 0.24) 0,
                    rgba(251, 146, 60, 0.24) 8px,
                    rgba(255, 247, 237, 0.98) 8px,
                    rgba(255, 247, 237, 0.98) 16px
                );
            border-color: #fb923c;
            box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.22);
        }
        .matrix-cell.status-unpaired { background: #fff1f2; }
        .matrix-cell.status-shift_transition { background: #eff6ff; }
        .matrix-cell.status-no_log { background: #f8fafc; color: #64748b; }
        .matrix-cell.status-blank { background: #ffffff; min-height: 78px; }
        .matrix-cell.status-contract {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #334155;
        }
        .matrix-cell.status-contract.contract-with-time {
            background: #fff7ed;
            border-color: #fb923c;
            box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.18);
        }
        .matrix-cell.status-has-time { background: #ffffff; border-color: #e5e7eb; }
        .matrix-cell.off-shift {
            background: #374151;
            border-color: #1f2937;
            color: #e5e7eb;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        }
        .matrix-cell.off-shift .text-muted,
        .matrix-cell.off-shift small { color: #d1d5db !important; }
        .matrix-cell.off-shift:hover { box-shadow: 0 0 0 2px rgba(148, 163, 184, .65); }
        .matrix-cell.manual-pending {
            background:
                repeating-linear-gradient(
                    135deg,
                    rgba(34, 197, 94, 0.18) 0,
                    rgba(34, 197, 94, 0.18) 8px,
                    rgba(240, 253, 244, 0.98) 8px,
                    rgba(240, 253, 244, 0.98) 16px
                );
            border-color: #22c55e;
            box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .22);
        }
        .matrix-cell.night-shift {
            background: #eef2ff;
            border-color: #6366f1;
            box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.15);
        }
        .matrix-cell.night-shift.night-anchor {
            border-color: #2563eb;
            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
        }
        .matrix-cell.night-shift.night-carry {
            background: #ecfeff;
            border-color: #0f766e;
            box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
        }
        .matrix-cell.night-shift.night-pending-pair {
            background: #fffbeb;
            border-color: #d97706;
            box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.12);
        }
        .night-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            color: #3730a3;
            background: #e0e7ff;
            border: 1px solid #c7d2fe;
            margin-bottom: 4px;
        }
        .night-role-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .night-role-badge.anchor {
            color: #1d4ed8;
            background: #dbeafe;
            border: 1px solid #bfdbfe;
        }
        .night-role-badge.carry {
            color: #0f766e;
            background: #ccfbf1;
            border: 1px solid #99f6e4;
        }
        .night-role-badge.paired {
            color: #b45309;
            background: #fef3c7;
            border: 1px solid #fde68a;
        }

        .matrix-date-head {
            text-align: center;
            min-width: 150px;
            width: 150px;
        }
        .matrix-date-head.pending-approve {
            font-style: italic;
            color: #b45309;
            background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%) !important;
        }
        .matrix-date-head.matrix-date-future {
            background: #f1f5f9 !important;
        }
        .matrix-date-head.matrix-date-future .matrix-date-main,
        .matrix-date-head.matrix-date-future .matrix-date-day {
            color: #94a3b8;
        }
        .matrix-cell.matrix-cell-future {
            background: #f8fafc;
            border-color: #e2e8f0;
            color: #94a3b8;
        }
        .matrix-cell.matrix-cell-future .btn {
            opacity: .8;
        }
        .matrix-date-wrap {
            display: grid;
            justify-items: center;
            gap: 3px;
            line-height: 1.05;
        }
        .matrix-date-main {
            font-size: 16px;
            font-weight: 900;
            letter-spacing: -0.02em;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
        }
        .matrix-date-day {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #475569;
        }
        .matrix-date-badges {
            min-height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 3px;
        }
        .matrix-date-badges .badge {
            font-size: 9px;
            line-height: 1;
            padding: 3px 6px;
            border-radius: 999px;
        }
        .matrix-date-actions {
            display: flex;
            justify-content: center;
            gap: 3px;
            margin-top: 2px;
        }
        .matrix-row-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        .matrix-emp-toolbar {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            margin: 6px 0;
            width: 100%;
            max-width: 250px;
        }
        .matrix-emp-toolbar .btn,
        .matrix-emp-toolbar .btn-xs {
            min-width: 0;
            border: 0;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1.15;
            padding: 5px 6px;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .matrix-emp-toolbar .btn-detail-hours,
        .matrix-emp-toolbar .btn-view-employee-schedule {
            grid-column: 1 / -1;
        }
        .employee-schedule-table th,
        .employee-schedule-table td {
            vertical-align: middle;
            white-space: nowrap;
        }
        .employee-schedule-table .schedule-label {
            white-space: normal;
            min-width: 360px;
        }
        .employee-schedule-table .schedule-date {
            font-weight: 800;
            color: #0f172a;
        }
        .matrix-date-actions .btn {
            --bs-btn-padding-y: .08rem;
            --bs-btn-padding-x: .32rem;
            --bs-btn-font-size: .66rem;
            --bs-btn-border-radius: .25rem;
            font-weight: 800;
            line-height: 1.15;
        }
        .matrix-date-head.pending-approve .matrix-date-day {
            color: #92400e;
        }
        .holiday-mark {
            margin-top: 2px;
            display: inline-block;
        }
        .btn-xs {
            --bs-btn-padding-y: .14rem;
            --bs-btn-padding-x: .4rem;
            --bs-btn-font-size: .78rem;
            --bs-btn-border-radius: .2rem;
        }
        .matrix-date-head small {
            font-size: 12px;
        }
        .matrix-cell small {
            font-size: 12px;
        }
        /* Make time text very visible (similar to H1, but custom, not Bootstrap). */
        .matrix-io {
            /* ~H3 size, but responsive and not Bootstrap-based */
            font-size: clamp(18px, 1.7vw, 28px);
            font-weight: 800;
            line-height: 1.05;
            letter-spacing: -0.02em;
            font-variant-numeric: tabular-nums;
            color: #0f172a;
            margin-top: 2px;
        }
        .matrix-io-nextday {
            display: inline-grid;
            place-items: center;
            width: 28px;
            height: 28px;
            margin-left: 4px;
            border-radius: 999px;
            background: #0ea5e9;
            color: #fff;
            font-size: 13px;
            font-weight: 900;
            vertical-align: 3px;
            box-shadow: 0 2px 5px rgba(14, 165, 233, .32);
        }
        #bulkContinuesWorkdayModal .modal-body {
            max-height: calc(100vh - 190px);
            overflow-y: auto;
        }
        #bulkContinuesWorkdayModal .modal-footer {
            position: sticky;
            bottom: 0;
            z-index: 3;
            background: #fff;
            border-top: 1px solid #dee2e6;
        }
        .matrix-io-raw {
            margin-top: 2px;
            font-size: 12px;
            color: rgba(15, 23, 42, 0.65);
            font-variant-numeric: tabular-nums;
        }
        .matrix-io-raw b {
            color: rgba(15, 23, 42, 0.78);
            font-weight: 800;
        }
        .matrix-conf {
            position: absolute;
            top: 6px;
            right: 8px;
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(15, 23, 42, 0.08);
            padding: 2px 7px;
            border-radius: 999px;
            line-height: 1.2;
            font-variant-numeric: tabular-nums;
        }
        .matrix-conf.good {
            color: #166534;
            background: rgba(34, 197, 94, 0.14);
            border-color: rgba(34, 197, 94, 0.28);
        }
        .matrix-approval-icon {
            position: absolute;
            top: 6px;
            right: 64px;
            width: 23px;
            height: 23px;
            display: inline-grid;
            place-items: center;
            border-radius: 999px;
            font-size: 12px;
            border: 1px solid rgba(15, 23, 42, 0.12);
            background: #f8fafc;
            color: #475569;
            z-index: 1;
        }
        .matrix-approval-icon.is-approved {
            background: #dcfce7;
            color: #166534;
            border-color: #86efac;
        }
        .matrix-approval-icon.is-pending {
            background: #fef3c7;
            color: #92400e;
            border-color: #facc15;
        }
        .matrix-emp-code {
            font-size: clamp(18px, 1.6vw, 26px); /* ~H3 */
            font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
            color: #0f172a;
        }
        .matrix-emp-name {
            font-size: clamp(14px, 1.2vw, 18px);
            font-weight: 700;
            line-height: 1.15;
            color: #0f172a;
            margin-top: 2px;
        }
        .attendance-toolbar-sticky {
            position: static;
            top: auto;
            z-index: auto;
            background: #fff;
        }
        .attendance-filter-panel .form-label {
            font-size: 12px;
            font-weight: 600;
            color: #334155;
        }
        .attendance-filter-panel .select2-container {
            width: 100% !important;
        }
        .attendance-control-card {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            padding: 8px;
            min-height: 100%;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        }
        .attendance-filter-card {
            border-color: #1d4ed8;
            background: linear-gradient(180deg, #e0f2fe 0%, #bfdbfe 100%);
        }
        .attendance-action-card {
            border-color: #047857;
            background: linear-gradient(180deg, #dcfce7 0%, #a7f3d0 100%);
        }
        .attendance-tools-card {
            border-color: #b45309;
            background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 100%);
        }
        .attendance-control-title {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            font-size: 11px;
            font-weight: 800;
            color: #111827;
            text-transform: uppercase;
            letter-spacing: .02em;
        }
        .attendance-control-card .btn {
            font-weight: 800;
        }
        .attendance-filter-actions .btn,
        .attendance-quick-tools .btn,
        .attendance-main-actions .btn,
        .attendance-advanced-tools .btn {
            border-width: 1px;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container {
            width: 100% !important;
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container .select2-selection--multiple {
            min-height: 100px;
            max-height: 112px;
            overflow-y: auto;
            border-color: #2563eb;
            background: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container .select2-selection__choice {
            background: #1d4ed8;
            border-color: #1e40af;
            color: #fff;
            font-weight: 800;
            border-radius: 999px;
            padding: 2px 8px;
            margin-top: 5px;
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container .select2-selection__choice__remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin-right: 6px;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, .92);
            color: #1d4ed8;
            font-size: 14px;
            font-weight: 900;
            line-height: 1;
            opacity: 1;
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container .select2-selection__choice__remove:hover {
            background: #fee2e2;
            color: #b91c1c;
        }
        .attendance-filter-panel #filterKaryawanId + .select2-container .select2-search__field {
            min-width: 220px;
        }
        .select2-container--bootstrap-5 .select2-dropdown.profil-bulan-dropdown {
            z-index: 3000;
            border-color: #93c5fd;
            box-shadow: 0 12px 24px rgba(15,23,42,.16);
        }
        .select2-container--bootstrap-5 .select2-dropdown.profil-bulan-dropdown .select2-results__option {
            padding: 8px 10px;
        }
        .select2-container--bootstrap-5 .select2-dropdown.profil-bulan-dropdown .select2-results__option--highlighted {
            background: #2563eb;
            color: #fff;
        }
        .attendance-clear-user-filter {
            border: 0;
            background: #fee2e2;
            color: #991b1b;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            padding: 2px 8px;
            line-height: 1.2;
        }
        .attendance-clear-user-filter:hover {
            background: #fecaca;
        }
        .attendance-filter-panel .form-label {
            margin-bottom: 2px !important;
            font-size: 11px;
        }
        .attendance-filter-panel .form-select-sm,
        .attendance-filter-panel .form-control-sm {
            min-height: 31px;
            padding-top: 3px;
            padding-bottom: 3px;
            font-size: 12px;
        }
        .attendance-action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }
        .attendance-action-row .btn,
        .attendance-quick-tools .btn {
            font-weight: 700;
        }
        .attendance-quick-tools {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }
        .attendance-operator-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
            padding: 8px 10px;
            border: 1px solid #93c5fd;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            border-radius: 8px;
        }
        .attendance-operator-strip .operator-title {
            font-size: 11px;
            font-weight: 900;
            color: #1e3a8a;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-right: 2px;
        }
        .attendance-advanced-tools {
            border: 1px dashed #9a3412;
            border-radius: 7px;
            padding: 6px 8px;
            background: rgba(255, 247, 237, 0.92);
        }
        .attendance-advanced-tools > summary {
            cursor: pointer;
            font-weight: 800;
            color: #7c2d12;
            list-style: none;
            padding: 4px 6px;
            border-radius: 6px;
            background: #ffedd5;
        }
        .attendance-advanced-tools .d-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .attendance-advanced-tools .btn,
        .attendance-advanced-tools .btn-group {
            width: 100%;
        }
        .attendance-advanced-tools .btn-group .btn {
            width: 50%;
        }
        @media (min-width: 1600px) {
            .attendance-advanced-tools .d-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .attendance-advanced-tools .btn-group {
                grid-column: span 3;
            }
        }
        @media (max-width: 991.98px) {
            .attendance-advanced-tools .d-grid {
                grid-template-columns: 1fr;
            }
        }
        .attendance-advanced-tools > summary::-webkit-details-marker {
            display: none;
        }
        .attendance-compact-notice {
            border: 1px solid #0e7490;
            background: #cffafe;
            color: #164e63;
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1.35;
        }
        .attendance-help-strip {
            border: 1px solid #1d4ed8;
            background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 55%, #0f766e 100%);
            color: #ffffff;
            border-radius: 8px;
            padding: 7px 10px;
            font-size: 12px;
            line-height: 1.35;
        }
        .attendance-help-strip code {
            color: #fff7ed;
            background: rgba(15, 23, 42, 0.35);
            border-radius: 4px;
            padding: 1px 4px;
        }
        .attendance-main-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
        }
        .attendance-primary-download-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
            align-items: end;
            width: 100%;
        }
        .attendance-primary-download-row .btn {
            min-height: 31px;
            white-space: nowrap;
        }
        .attendance-action-separator {
            width: 100%;
            margin: 4px 0 3px;
            border: 0;
            border-top: 2px solid rgba(15, 23, 42, .2);
            opacity: 1;
            grid-column: 1 / -1;
        }
        .attendance-action-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
            grid-column: 1 / -1;
        }
        .attendance-action-block {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 4px;
            width: 100%;
            padding: 6px;
            border-radius: 6px;
            border: 1px solid rgba(15, 23, 42, .14);
        }
        .attendance-action-block.is-run {
            border-color: #1d4ed8;
            background: #dbeafe;
        }
        .attendance-action-block.is-rebuild {
            border-color: #d97706;
            background: #fef3c7;
        }
        .attendance-action-block.is-approval {
            border-color: #15803d;
            background: #dcfce7;
        }
        .attendance-main-actions .btn-group {
            width: 100%;
            grid-column: 1 / -1;
        }
        .attendance-main-actions .btn-group .btn {
            flex: 1 1 0;
        }
        .attendance-main-actions > .attendance-primary-download-row {
            grid-column: 1 / -1;
        }
        .attendance-secondary-actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 5px;
            align-content: stretch;
        }
        .attendance-main-actions .btn {
            width: 100%;
        }
        @media (min-width: 1400px) {
            .attendance-user-filter {
                min-width: 460px;
            }
        }
        #reviewTableWrap {
            max-height: 480px;
            overflow: auto;
        }
        #reviewTable thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #fff;
        }
        #reviewTable thead tr.filter-row th {
            top: 41px;
            z-index: 2;
            padding: 6px 6px;
            background: #fff;
        }
        .review-filter-input {
            min-width: 90px;
            font-size: 13px;
            height: 28px;
        }
        .badge-spl-purple {
            background-color: #7c3aed;
            color: #fff;
        }
        .badge-weekend-ot {
            background-color: #f97316;
            color: #fff;
        }
        .badge-holiday-ot {
            background-color: #ef4444;
            color: #fff;
        }
        .badge-holiday-special-ot {
            background-color: #d97706;
            color: #fff;
        }
        .badge-holiday-special {
            background-color: #f59e0b;
            color: #111827;
        }
        .badge-fc-orange {
            background-color: #fb923c;
            color: #fff;
        }
        .calc-stat {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px 12px;
            background: #fff;
        }
        .matrix-row-warning-icon {
            display: inline-grid;
            place-items: center;
            width: 18px;
            height: 18px;
            margin-left: 5px;
            border-radius: 999px;
            color: #92400e;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            font-size: 10px;
            vertical-align: middle;
            cursor: pointer;
        }
        .matrix-row-focus > td {
            box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .45);
        }
        .matrix-cell.needs-action-cell {
            outline: 2px solid rgba(245, 158, 11, .38);
            outline-offset: -2px;
        }
        .matrix-cell.action-focus {
            animation: actionFocusPulse 1s ease-in-out 0s 3;
            outline: 3px solid #f59e0b;
            outline-offset: -3px;
        }
        @keyframes actionFocusPulse {
            0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
            50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .28); }
        }
        #matrixTable .btn-outline-primary {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        #matrixTable .btn-outline-danger {
            color: #fff;
            background-color: #dc3545;
            border-color: #dc3545;
        }
        #matrixTable .btn-outline-warning {
            color: #111827;
            background-color: #ffc107;
            border-color: #ffc107;
        }
        #matrixTable .btn-outline-secondary {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
        }
        #matrixTable .btn-outline-success {
            color: #fff;
            background-color: #198754;
            border-color: #198754;
        }
        #matrixTable .btn-outline-dark {
            color: #fff;
            background-color: #212529;
            border-color: #212529;
        }
        .custom-shift-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .custom-shift-badge .btn-clear-custom-shift {
            width: 15px;
            height: 15px;
            display: inline-grid;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, .22);
            color: #fff;
            font-size: 10px;
            line-height: 1;
        }
        .custom-shift-badge .btn-clear-custom-shift:hover {
            background: #dc3545;
            color: #fff;
        }
        .calc-stat .label {
            font-size: 12px;
            color: #6b7280;
        }
        .calc-stat .value {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.1;
        }
        #historyTable td,
        #historyTable th {
            white-space: normal;
            vertical-align: top;
        }
        .history-mini-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
        }
        .history-mini-table th,
        .history-mini-table td {
            border: 1px solid #e5e7eb;
            padding: 4px 6px;
            vertical-align: top;
        }
        .history-mini-table th {
            background: #f8fafc;
            font-weight: 600;
        }
        .history-mini-table .changed {
            background: #fff7ed;
        }
        .history-mini-table .field-name {
            width: 140px;
            font-weight: 600;
            color: #334155;
        }
        .history-diff-compact {
            font-size: 12px;
            line-height: 1.3;
        }
        .history-diff-compact .diff-line {
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .history-diff-compact .diff-field {
            font-weight: 600;
            color: #334155;
        }
                                return `<div class="diff-line"><span class="diff-field">${escapeHtml(it.label)}</span>: ${escapeHtml(it.before)}<span class="diff-arrow">&rarr;</span>${escapeHtml(it.after)}</div>`;
            color: #64748b;
            padding: 0 4px;
        }
        .history-diff-tools {
            margin-top: 4px;
        }
        .history-diff-tools .btn {
            padding: 1px 6px;
            font-size: 11px;
        }
        #btnRunDetect.is-running {
            position: relative;
            animation: runPulse 1s ease-in-out infinite;
        }
        @keyframes runPulse {
            0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.45); }
            70% { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); }
            100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
        }

        .tooltip.attendance-action-tooltip .tooltip-inner {
            max-width: 300px;
            padding: .55rem .7rem;
            text-align: left;
            line-height: 1.4;
            font-size: .78rem;
            font-weight: 600;
            box-shadow: 0 .35rem .9rem rgba(15, 23, 42, .22);
        }
    </style>
@endpush

@section('content')
    <div class="attendance-help-strip mb-2">
        <strong>Review V2.</strong> AUTO OT hanya untuk <code>workday</code>; <code>holiday</code>/<code>weekend</code> tetap wajib SPL.
    </div>
    <div class="card mb-2" id="calcSection">
        <div class="card-header attendance-toolbar-sticky">
            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-1">
                <h3 class="card-title m-0">Crossing Attendance (Periode)</h3>
                <span class="badge text-bg-secondary" id="queueHealthBadge">Queue: -</span>
            </div>
            <div class="attendance-filter-panel">
                <div class="row g-2 align-items-stretch">
                    <div class="col-12 col-xl-7">
                        <div class="attendance-control-card attendance-filter-card">
                            <div class="attendance-control-title">
                                <i class="fas fa-filter"></i>
                                <span>Filter periode & user</span>
                            </div>
                            <div class="row g-1 align-items-end">
                                <div class="col-12">
                                    <label class="form-label mb-1">Profil Bulan</label>
                                    <select id="profilBulanId" class="form-select form-select-sm"></select>
                                </div>
                                <div class="col-6 col-lg-3">
                                    <label class="form-label mb-1">Dari Tanggal</label>
                                    <input type="date" id="filterDateFrom" class="form-control form-control-sm" />
                                </div>
                                <div class="col-6 col-lg-3">
                                    <label class="form-label mb-1">Sampai Tanggal</label>
                                    <input type="date" id="filterDateTo" class="form-control form-control-sm" />
                                </div>
                                <div class="col-6 col-lg-3">
                                    <label class="form-label mb-1">Per Halaman</label>
                                    <select id="perPage" class="form-select form-select-sm">
                                        <option value="20">20</option>
                                        <option value="50" selected>50</option>
                                        <option value="100">100</option>
                                        <option value="200">200</option>
                                    </select>
                                </div>
                                <div class="col-6 col-lg-3">
                                    <label class="form-label mb-1">Rule Pembulatan</label>
                                    <select id="roundingRuleId" class="form-select form-select-sm">
                                        <option value="">- Tanpa Pembulatan -</option>
                                    </select>
                                </div>
                                <div class="col-12 attendance-user-filter">
                                    <div class="d-flex justify-content-between align-items-center gap-2 mb-1">
                                        <label class="form-label mb-0">Search / Filter User <span class="text-muted fw-normal">(bisa paste dari Excel)</span></label>
                                        <div class="d-flex gap-1 flex-wrap justify-content-end">
                                            <button type="button" class="attendance-clear-user-filter" id="btnSelectAllKaryawanFilter">
                                                <i class="fas fa-check-double me-1"></i>Select all
                                            </button>
                                            <button type="button" class="attendance-clear-user-filter d-none" id="btnClearKaryawanFilter">
                                                <i class="fas fa-times me-1"></i>Unselect all
                                            </button>
                                        </div>
                                    </div>
                                    <select id="filterKaryawanId" class="form-select form-select-sm" multiple>
                                        <option value="">- Semua User -</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-7 col-xl-3">
                        <div class="attendance-control-card attendance-action-card">
                            <div class="attendance-control-title">
                                <i class="fas fa-bolt"></i>
                                <span>Button utama</span>
                            </div>
                            <div class="attendance-main-actions">
                                <div class="attendance-primary-download-row">
                                    <div>
                                        <label class="form-label mb-1 small">Scope Actual</label>
                                        <select id="attendanceProfileScope" class="form-select form-select-sm">
                                            <option value="all" selected>Main + Sub</option>
                                            <option value="main">Main saja</option>
                                            <option value="sub">Sub saja</option>
                                            <option value="selected">Profil dipilih saja</option>
                                        </select>
                                    </div>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Actual exports">
                                        <button type="button" class="btn btn-success" id="btnExportActualExcel">
                                            <i class="fas fa-download me-1"></i>Actual
                                        </button>

                                    </div>
                                </div>
                                                                <hr class="attendance-action-separator">

                                <div class="btn-group btn-group-sm" role="group" aria-label="Export actions">
                                    <button class="btn btn-success" id="btnExportExcel" title="Fungsi: export attendance ke Excel. Cara: pilih profil, periode, dan user, lalu klik Excel."><i class="fas fa-file-excel me-1"></i>Excel</button>
                                    
                                    <button class="btn btn-danger" id="btnExportPdf" title="Fungsi: export attendance ke PDF. Cara: pilih filter, lalu klik PDF."><i class="fas fa-file-pdf me-1"></i>PDF</button>
                                </div>
                                <hr class="attendance-action-separator">
                                <div class="attendance-action-grid">
                                    <div class="attendance-action-block is-run">
                                        <label class="form-label mb-0 small">Scope Run</label>
                                        <select id="detectProfileScope" class="form-select form-select-sm">
                                            <option value="selected" selected>Profil dipilih saja</option>
                                            <option value="all">Main + Sub</option>
                                            <option value="main">Main saja</option>
                                            <option value="sub">Sub saja</option>
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="btnRunDetect" title="Fungsi: menghitung ulang status attendance. Cara: pilih scope, lalu klik Run Deteksi."><i class="fas fa-magnifying-glass me-1"></i>Run Deteksi</button>
                                    </div>
                                    <div class="attendance-action-block is-rebuild">
                                        <label class="form-label mb-0 small">Scope Rebuild</label>
                                        <select id="rebuildProfileScope" class="form-select form-select-sm">
                                            <option value="selected" selected>Profil dipilih saja</option>
                                            <option value="all">Main + Sub</option>
                                            <option value="main">Main saja</option>
                                            <option value="sub">Sub saja</option>
                                        </select>
                                        <button class="btn btn-sm btn-primary" id="btnRebuildPlanning" title="Fungsi: membangun ulang planning jadwal. Cara: gunakan jika assignment/shift berubah, lalu jalankan Run Deteksi.">
                                            <i class="fas fa-arrows-rotate me-1"></i>Rebuild Planning
                                        </button>
                                    </div>
                                    <div class="attendance-action-block is-approval">
                                        <label class="form-label mb-0 small">Scope Approval</label>
                                        <select id="approveProfileScope" class="form-select form-select-sm">
                                            <option value="selected" selected>Profil dipilih saja</option>
                                            <option value="all">Main + Sub</option>
                                            <option value="main">Main saja</option>
                                            <option value="sub">Sub saja</option>
                                        </select>
                                        <button class="btn btn-sm btn-success" id="btnApproveAllCheck" title="Fungsi: approve data yang lolos pemeriksaan. Cara: pilih scope, klik tombol, lalu konfirmasi.">
                                            <i class="fas fa-check-double me-1"></i>Approve All (Cek)
                                        </button>
                                    </div>
                                    <div class="attendance-secondary-actions">
                                        <button class="btn btn-sm btn-warning text-dark" id="btnBulkContinuesWorkday" title="Fungsi: membuat SPL untuk jam kerja berlanjut. Cara: pilih user/periode, klik tombol, lalu periksa kandidat.">
                                            <i class="fas fa-clock-rotate-left me-1"></i>Bulk Continues
                                        </button>
                                        <button class="btn btn-sm btn-secondary" id="btnProcessQueueNow">
                                            <i class="fas fa-play me-1"></i>Process Queue
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-5 col-xl-2">
                        <div class="attendance-control-card attendance-tools-card">
                            <div class="attendance-control-title">
                                <i class="fas fa-screwdriver-wrench"></i>
                                <span>Tools lanjutan</span>
                            </div>
                            <details class="attendance-advanced-tools" open>
                                <summary><i class="fas fa-chevron-down me-1"></i>Buka tools import/repair/report</summary>
                                <div class="d-grid gap-2 mt-2">
                                    <button type="button" class="btn btn-sm btn-secondary" id="btnUrgencyPolicy" title="Fungsi: melihat atau mengubah status kebijakan URGENSI profil. Cara: klik, pilih ON/OFF, lalu konfirmasi.">
                                        <i class="fas fa-circle me-1"></i><span id="urgencyPolicyButtonText">URGENSI: OFF</span>
                                    </button>
                                    <button class="btn btn-sm btn-outline-success" id="btnExportSelectedSchedule" title="Fungsi: download jadwal user dalam Excel pivot. Cara: pilih user dan periode, lalu klik tombol ini."><i class="fas fa-calendar-days me-1"></i>Jadwal Selected</button>
                                    <button class="btn btn-sm btn-outline-primary" id="btnBulkQuestionSelectedSchedule" title="Fungsi: kirim pertanyaan jadwal ke Android. Cara: pilih user dan periode, klik tombol, isi pertanyaan, lalu kirim."><i class="fas fa-calendar-question me-1"></i>Question Jadwal Selected</button>
                                    <button class="btn btn-sm btn-outline-warning" id="btnBulkQuestionSelectedFc" title="Fungsi: kirim pertanyaan Forgetting Clock untuk missing attendance. Cara: pilih user dan periode, klik tombol, konfirmasi."><i class="fas fa-clock me-1"></i>Kirim Bulk Question FC</button>
                                    <button class="btn btn-sm btn-outline-secondary" id="btnScheduleTimeoutOff" title="Fungsi: memproses question jadwal yang melewati deadline menjadi OFF. Cara: klik, tinjau daftar, lalu konfirmasi."><i class="fas fa-calendar-xmark me-1"></i>Timeout OFF</button>
                                    <button class="btn btn-sm btn-dark" id="btnImportMachineLog" title="Fungsi: memasukkan log attendance dari file mesin. Cara: klik, pilih file .dat, lalu jalankan import.">
                                        <i class="fas fa-upload me-1"></i>Upload .dat
                                    </button>
                                    <button class="btn btn-sm btn-primary" id="btnSyncPublicApiLog" title="Fungsi: mengambil log dari Public API mesin. Cara: pastikan device/API siap, lalu klik tombol.">
                                        <i class="fas fa-cloud-arrow-down me-1"></i>Ambil API
                                    </button>
                                    <button class="btn btn-sm btn-warning text-dark" id="btnRepairMachineLog" title="Fungsi: memperbaiki referensi log mesin yang NULL. Cara: klik setelah import/sync, lalu konfirmasi.">
                                        <i class="fas fa-wrench me-1"></i>Repair NULL
                                    </button>
                                    <button class="btn btn-sm btn-secondary" id="btnReviewUnmappedLog" title="Fungsi: melihat log yang belum terhubung ke karyawan. Cara: klik, periksa hasil, lalu lakukan mapping bila diperlukan.">
                                        <i class="fas fa-list me-1"></i>Review NULL
                                    </button>
                                    <a href="{{ route('attendance_review_v2.summary') }}" class="btn btn-sm btn-info text-dark" title="Fungsi: membuka ringkasan hasil attendance review. Cara: klik untuk melihat rekap.">
                                        <i class="fas fa-table-list me-1"></i>Summary
                                    </a>
                                    <a href="{{ route('attendance_history_retention_settings.index') }}" class="btn btn-sm btn-dark" title="Fungsi: mengatur retensi histori attendance. Cara: klik, pilih aturan retensi, lalu simpan.">
                                        <i class="fas fa-database me-1"></i>Retensi Histori
                                    </a>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Disabled report tools">
                                        <button class="btn btn-outline-dark" id="btnPrintSheet" disabled aria-disabled="true" title="Belum tersedia. Tombol masih dinonaktifkan."><i class="fas fa-print me-1"></i>Sheet</button>
                                        <button class="btn btn-outline-primary" id="btnSendEmailPdf" disabled aria-disabled="true" title="Belum tersedia. Tombol masih dinonaktifkan."><i class="fas fa-envelope me-1"></i>Email</button>
                                    </div>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Disabled send tools">
                                        <button class="btn btn-outline-success" id="btnSendWaReport" disabled aria-disabled="true" title="Belum tersedia. Tombol masih dinonaktifkan."><i class="fab fa-whatsapp me-1"></i>WA</button>
                                        <button class="btn btn-outline-primary" id="btnExportZipUser" title="Fungsi: membuat ZIP laporan user. Cara: pilih user dan periode, klik ZIP, lalu tunggu proses selesai."><i class="fas fa-file-archive me-1"></i>ZIP</button>
                                    </div>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body pt-2">
            <div class="attendance-operator-strip mb-2">
                <div class="attendance-action-row attendance-filter-actions">
                    <span class="operator-title"><i class="fas fa-filter me-1"></i>Filter</span>
                    <button class="btn btn-sm btn-primary" id="btnApplyFilter" title="Fungsi: menerapkan profil, periode, dan user. Cara: isi filter, lalu klik Terapkan."><i class="fas fa-filter me-1"></i>Terapkan</button>
                    <button class="btn btn-sm btn-secondary" id="btnResetFilter" title="Fungsi: mengembalikan filter ke kondisi awal. Cara: klik Reset."><i class="fas fa-rotate-left me-1"></i>Reset</button>
                    <button class="btn btn-sm btn-dark" id="btnJumpPending" title="Fungsi: lompat ke data pending. Cara: klik untuk fokus ke item yang belum selesai."><i class="fas fa-arrow-down me-1"></i>Ke Pending</button><button class="btn btn-sm btn-outline-primary" id="btnScanEmergencyCases" title="Fungsi: mencari kasus attendance khusus. Cara: klik, pilih kandidat, lalu proses sesuai kebutuhan."><i class="fas fa-search me-1"></i>Scan Case</button>
                </div>
                <div class="attendance-quick-tools btn-group-sm" role="group" aria-label="Filter cepat operator">
                    <span class="operator-title"><i class="fas fa-bolt me-1"></i>Cepat</span>
                    <button class="btn btn-warning text-dark" id="btnShowPendingOnly" title="Fungsi: tampilkan hanya data pending. Cara: klik untuk mengaktifkan filter cepat."><i class="fas fa-triangle-exclamation me-1"></i>Pending</button>
                    <button class="btn btn-warning text-dark" id="btnShowMissingOnly" title="Fungsi: tampilkan hanya missing IN/OUT. Cara: klik untuk mengaktifkan filter cepat."><i class="fas fa-highlighter me-1"></i>Missing</button>
                    <button class="btn btn-danger" id="btnShowNeedsSplOnly" title="Fungsi: tampilkan overtime yang belum memiliki SPL. Cara: klik untuk memfilter."><i class="fas fa-file-signature me-1"></i>Belum Ada SPL</button>
                    <button class="btn btn-dark" id="btnToggleContractHours" title="Fungsi: tampilkan/sembunyikan jam kontrak. Cara: klik untuk mengubah tampilan."><i class="fas fa-clock me-1"></i>Jam KS: Off</button>
                </div>
            </div>
            <div class="mb-2 text-muted small" id="periodLabel">Periode: -</div>
            <div class="alert alert-dark py-2 px-3 d-none" id="closedProfileAlert">
                <i class="fas fa-lock me-1"></i> Profil bulan sudah <strong>CLOSED</strong>. Action approval, koreksi, rebuild, deteksi, import, dan sync dikunci. Buka revisi dari Master Profil Bulan dulu.
            </div>
            <div class="mb-2 d-none" id="detectJobStatus"></div>
            <div class="mb-2 d-none" id="zipJobStatus"></div>
            <div class="mb-2 d-none" id="logJobStatus"></div>
            <div class="mb-2 d-none" id="rebuildStatus"></div>
            <div class="attendance-compact-notice mb-2">
                <strong>Urutan aman:</strong> kalau hanya ubah SPL/FC/manual time, klik <strong>Run Deteksi</strong>.
                Pakai <strong>Rebuild Planning</strong> hanya kalau assignment/profil shift berubah, lalu lanjut <strong>Run Deteksi</strong>.
            </div>
            <div class="alert alert-warning py-2 px-3 d-none" id="emptyProfileAlert">
                Profil bulan ini belum memiliki assignment karyawan aktif.
            </div>
            <div class="alert alert-warning py-2 px-3 d-none" id="missingAssignmentAlert">
                Karyawan <span class="fw-semibold" id="missingAssignmentName">-</span> belum terdaftar di profil bulan ini.
                <a href="{{ url('/master-profil-bulan') }}" class="ms-2 text-decoration-underline" target="_blank">Buka Master Profil Bulan</a>
                <button class="btn btn-sm btn-outline-primary ms-2" id="btnGoProfilBulan"><i class="fas fa-plus me-1"></i>Tambahkan ke Profil Bulan</button>
            </div>
            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-2">
                <small class="text-muted" id="matrixPageInfoTop">Page 1 / 1 | Users 0</small>
                <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                    <div class="input-group input-group-sm" style="width: 190px;">
                        <span class="input-group-text">Hal.</span>
                        <input type="number" class="form-control" id="pageJumpInputTop" min="1" step="1" value="1" placeholder="Page">
                        <button class="btn btn-outline-primary" id="btnGoPageTop" type="button">To Page</button>
                    </div>
                    <div class="btn-group btn-group-sm" role="group" aria-label="Matrix paging (top)">
                        <button class="btn btn-outline-secondary" id="btnPrevPageTop">Prev</button>
                        <button class="btn btn-outline-secondary" id="btnNextPageTop">Next</button>
                    </div>
                </div>
            </div>
            <div class="matrix-scroll-top" id="matrixScrollTop"><div class="matrix-scroll-top-inner" id="matrixScrollTopInner"></div></div>
            <div class="table-responsive border rounded section-loading" id="matrixContainer">
                <div class="loading-overlay" id="matrixLoadingOverlay" aria-hidden="true">
                    <div class="loading-box d-inline-flex align-items-center">
                        <span class="loading-anim" aria-hidden="true">
                            <img src="{{ asset('assets/attendance-loading.svg') }}" alt="">
                        </span>
                        <span class="loading-text" id="matrixLoadingText">Memuat matrix...</span>
                    </div>
                </div>
                <table class="table table-bordered table-sm matrix-table align-middle mb-0" id="matrixTable">
                    <thead></thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mt-2">
                <small class="text-muted" id="matrixPageInfo">Page 1 / 1</small>
                <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                    <div class="input-group input-group-sm" style="width: 190px;">
                        <span class="input-group-text">Hal.</span>
                        <input type="number" class="form-control" id="pageJumpInput" min="1" step="1" value="1" placeholder="Page">
                        <button class="btn btn-outline-primary" id="btnGoPage" type="button">To Page</button>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-secondary" id="btnPrevPage">Prev</button>
                        <button class="btn btn-outline-secondary" id="btnNextPage">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3 d-none" id="calcAttendanceCard">
        <div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
            <h3 class="card-title m-0">Perhitungan Jam Attendance</h3>
            <button type="button" class="btn btn-sm btn-primary" id="btnLoadCalculations">
                <i class="fas fa-calculator me-1"></i>Muat Perhitungan
            </button>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3" id="calcSummary">
                <div class="col-md-2 col-6"><div class="calc-stat"><div class="label">Karyawan</div><div class="value" data-k="employees">0</div></div></div>
                <div class="col-md-2 col-6"><div class="calc-stat"><div class="label">Hari Hadir</div><div class="value" data-k="days_present">0</div></div></div>
                <div class="col-md-3 col-6"><div class="calc-stat"><div class="label">Jam Normal</div><div class="value" data-k="normal_hours">0</div></div></div>
                <div class="col-md-3 col-6"><div class="calc-stat"><div class="label">Jam Lembur</div><div class="value" data-k="overtime_hours">0</div></div></div>
                <div class="col-md-3 col-6"><div class="calc-stat"><div class="label">Jam Lembur xKali</div><div class="value" data-k="weighted_overtime_hours">0</div></div></div>
            </div>
            <div class="alert alert-light border py-2 px-3 mb-3" id="hkStatusBar">
                Status HK: <strong>0 HK</strong> | Range tanggal: <span class="text-muted">- s/d -</span>
            </div>
            <div class="table-responsive section-loading" id="calcTableWrap">
                <div class="loading-overlay" id="calcLoadingOverlay" aria-hidden="true">
                    <div class="loading-box d-inline-flex align-items-center">
                        <span class="loading-anim" aria-hidden="true">
                            <img src="{{ asset('assets/attendance-loading.svg') }}" alt="">
                        </span>
                        <span class="loading-text" id="calcLoadingText">Memuat perhitungan...</span>
                    </div>
                </div>
                <table id="calcTable" class="table table-bordered table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Karyawan</th>
                            <th>Hari Hadir</th>
                            <th>Jam Normal</th>
                            <th>Jam Lembur Bersih</th>
                            <th>Jam Lembur xKali</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Detail Review Harian</h3>
            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#reviewDetailCollapse" aria-expanded="false" aria-controls="reviewDetailCollapse">
                <i class="fas fa-table me-1"></i>Buka/Tutup Tabel
            </button>
        </div>
        <div class="card-body collapse" id="reviewDetailCollapse">
            <div class="table-responsive section-loading" id="reviewTableWrap">
                <div class="loading-overlay" id="reviewLoadingOverlay" aria-hidden="true">
                    <div class="loading-box d-inline-flex align-items-center">
                        <span class="loading-anim" aria-hidden="true">
                            <img src="{{ asset('assets/attendance-loading.svg') }}" alt="">
                        </span>
                        <span class="loading-text" id="reviewLoadingText">Memuat review...</span>
                    </div>
                </div>
                <table id="reviewTable" class="table table-bordered table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Tanggal</th>
                            <th>Kalender</th>
                            <th>Tag Pengajuan</th>
                            <th>Karyawan</th>
                            <th>Status</th>
                            <th>In / Out</th>
                            <th>Suggestion</th>
                            <th>Confidence</th>
                            <th>Reason</th>
                            <th>Aksi</th>
                        </tr>
                        <tr class="filter-row">
                            <th></th>
                            <th><input type="date" class="form-control form-control-sm review-filter-input" data-col="1" placeholder="Filter tanggal"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="2" placeholder="Filter kalender"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="3" placeholder="Filter tag"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="4" placeholder="Filter karyawan"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="5" placeholder="Filter status"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="6" placeholder="Filter in/out"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="7" placeholder="Filter suggestion"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="8" placeholder="Filter confidence"></th>
                            <th><input type="text" class="form-control form-control-sm review-filter-input" data-col="9" placeholder="Filter reason"></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="actualExportModal" tabindex="-1" aria-labelledby="actualExportModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content" id="actualExportForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="actualExportModalLabel"><i class="fas fa-file-export text-success me-2"></i>Download Data Actual</h5>
                    <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 small">Untuk scope Main/Sub, sistem mencari profil berdasarkan rentang tanggal. Profil bulan utama hanya menjadi acuan filter.</div>
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <label class="form-label">Dari Tanggal & Jam</label>
                            <input type="datetime-local" id="actualExportDateFrom" class="form-control" required>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label">Sampai Tanggal & Jam</label>
                            <input type="datetime-local" id="actualExportDateTo" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer flex-nowrap">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-warning" id="btnExportFcApprovedExcel"><i class="fas fa-clock me-1"></i>Download Actual inc Lupa Finger Approved</button>
                    <button type="submit" class="btn btn-success"><i class="fas fa-download me-1"></i>Download Actual</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="historyModal" 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="historyTitle">History Perubahan Review</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm align-middle" id="historyTable">
                            <thead>
                                <tr>
                                    <th style="width:40px">No.</th>
                                    <th style="width:170px">Waktu</th>
                                    <th style="width:120px">Action</th>
                                    <th style="width:160px">By</th>
                                    <th>Perubahan</th>
                                    <th style="width:240px">Catatan</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="manualTimeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header align-items-start">
                    <div>
                        <h5 class="modal-title"><i class="far fa-clock text-primary me-2"></i>Koreksi Jam Manual</h5>
                        <div class="text-muted small mt-1" id="manualTimeMeta">-</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-lg-6">
                            <div class="border border-success-subtle rounded-3 p-3 h-100">
                                <div class="d-flex gap-3 align-items-start">
                                    <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center flex-shrink-0" style="width:56px;height:56px;"><i class="fas fa-sign-in-alt fa-lg"></i></div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center gap-2">
                                            <div class="fw-semibold text-success">JAM MASUK (IN)</div>
                                            <span class="badge text-bg-success-subtle text-success-emphasis border border-success-subtle"><i class="fas fa-check-circle me-1"></i>Tersimpan</span>
                                        </div>
                                        <div class="small text-muted mb-2">Tentukan waktu masuk karyawan</div>
                                        <label class="form-label small fw-semibold" for="manualCheckinTime">Tanggal & Jam Masuk</label>
                                        <select class="form-select" id="manualCheckinTime"></select>
                                        <div class="small text-success-emphasis bg-success-subtle border border-success-subtle rounded p-2 mt-2"><i class="far fa-calendar-check me-1"></i><span id="manualCheckinSummary">-</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="border border-danger-subtle rounded-3 p-3 h-100">
                                <div class="d-flex gap-3 align-items-start">
                                    <div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center flex-shrink-0" style="width:56px;height:56px;"><i class="fas fa-sign-out-alt fa-lg"></i></div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center gap-2">
                                            <div class="fw-semibold text-danger">JAM PULANG (OUT)</div>
                                            <span class="badge text-bg-success-subtle text-success-emphasis border border-success-subtle"><i class="fas fa-check-circle me-1"></i>Tersimpan</span>
                                        </div>
                                        <div class="small text-muted mb-2">Tentukan waktu pulang karyawan</div>
                                        <label class="form-label small fw-semibold" for="manualCheckoutTime">Tanggal & Jam Pulang</label>
                                        <select class="form-select" id="manualCheckoutTime"></select>
                                        <div class="small text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded p-2 mt-2"><i class="far fa-calendar-check me-1"></i><span id="manualCheckoutSummary">-</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border border-primary-subtle rounded-3 p-3 mt-3 bg-primary-subtle bg-opacity-10">
                        <div class="row g-3 align-items-center">
                            <div class="col-md-6"><div class="small text-primary-emphasis"><i class="far fa-clock me-2"></i>DURASI KERJA</div><div class="fw-semibold" id="manualDurationSummary">-</div></div>
                            <div class="col-md-6 border-md-start border-primary-subtle"><div class="small text-primary-emphasis"><i class="fas fa-badge-check me-2"></i>STATUS ABSENSI</div><span class="badge text-bg-primary" id="manualStatusSummary">-</span></div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <div class="fw-semibold mb-2"><i class="fas fa-bolt text-warning me-2"></i>Shortcut Koreksi</div>
                        <div class="row g-2">
                            <div class="col-md-3"><button type="button" class="btn btn-outline-success w-100 btn-manual-fc-shortcut" data-mode="in"><i class="fas fa-sign-in-alt me-2"></i>FC IN</button></div>
                            <div class="col-md-3"><button type="button" class="btn btn-outline-danger w-100 btn-manual-fc-shortcut" data-mode="out"><i class="fas fa-sign-out-alt me-2"></i>FC OUT</button></div>
                            <div class="col-md-3"><button type="button" class="btn btn-outline-primary w-100 btn-manual-fc-shortcut" data-mode="both"><i class="fas fa-exchange-alt me-2"></i>FC IN + OUT</button></div>
                            <div class="col-md-3"><button type="button" class="btn btn-outline-secondary w-100 btn-manual-fc-shortcut" data-mode="continues"><i class="fas fa-arrows-alt-h me-2"></i>Continues</button></div>
                        </div>
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="form-check"><input class="form-check-input" type="checkbox" id="manualShowNextDayLogs"><label class="form-check-label small fw-semibold" for="manualShowNextDayLogs">Mode FC / Continues</label></div><div class="small text-muted ms-4">Izinkan log next-day yang sudah pairing</div></div></div>
                        <div class="col-md-8"><div class="border rounded p-3 h-100"><label class="form-label small fw-semibold" for="manualTimeNotes">Catatan (opsional)</label><input type="text" class="form-control" id="manualTimeNotes" maxlength="200" placeholder="Masukkan alasan koreksi jam manual..." /></div></div>
                    </div>

                    <div class="alert alert-warning mt-3 mb-0"><i class="fas fa-exclamation-triangle me-2"></i><strong>Perhatian</strong><div class="small mt-1">Log percobaan berulang dalam beberapa menit adalah kandidat <b>masuk</b>, bukan otomatis <b>pulang</b>. Pilih pulang hanya dari log OUT eksplisit atau gunakan FC bila pulang belum ada.</div></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning me-auto" id="btnManualTimeCreateFc"><i class="fas fa-bolt me-1"></i>Buat FC</button>
                    <button type="button" class="btn btn-outline-danger" id="btnResetPrediction"><i class="fas fa-undo me-1"></i>Reset Prediksi</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnSaveManualTime"><i class="far fa-save me-1"></i>Simpan Koreksi</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="scanEmergencyModal" 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">Scan Emergency / Forget Clock</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 align-items-end mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Tanggal X</label>
                            <input type="date" class="form-control" id="scanEmergencyDate">
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-primary w-100" id="btnRunScanEmergency"><i class="fas fa-play me-1"></i>Scan</button>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label">Search</label>
                            <input type="search" class="form-control" id="scanEmergencySearch" placeholder="Kode, nama, source, suggest, conflict...">
                        </div>
                    </div>
                    <div class="row g-2 align-items-end mb-3">
                        <div class="col-md-5"><label class="form-label">Shift untuk terpilih</label><select class="form-select" id="scanEmergencyShiftId"><option value="">- pilih shift -</option></select></div>
                        <div class="col-md-2"><button type="button" class="btn btn-outline-primary w-100" id="btnSelectAllEmergency">Pilih Semua</button></div>
                        <div class="col-md-3"><button type="button" class="btn btn-success w-100" id="btnBulkSetEmergencyShift"><i class="fas fa-moon me-1"></i>Set Shift Bulk</button></div>
                    </div>
                    <div class="table-responsive border rounded" style="max-height:60vh;overflow:auto;">
                        <table class="table table-sm table-striped mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:36px;"><input type="checkbox" id="checkAllEmergencyRows"></th>
                                    <th>Karyawan</th>
                                    <th>IN X</th>
                                    <th>OUT X+1</th>
                                    <th>Source</th>
                                    <th>Conflict</th>
                                    <th>Suggest</th>
                                    <th>Conf</th>
                                </tr>
                            </thead>
                            <tbody id="scanEmergencyRows"><tr><td colspan="8" class="text-center text-muted py-3">Pilih tanggal lalu scan.</td></tr></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="shiftShortcutModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ganti Shift Harian</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="shiftShortcutKaryawanId">
                    <input type="hidden" id="shiftShortcutWorkDate">
                    <div class="small text-muted mb-2" id="shiftShortcutMeta">-</div>
                    <div class="mb-2">
                        <label class="form-label">Shift Baru</label>
                        <select class="form-select" id="shiftShortcutShiftId"></select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Catatan</label>
                        <input type="text" class="form-control" id="shiftShortcutNotes" placeholder="Ganti shift dari Attendance Review">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="shiftShortcutClear">
                        <label class="form-check-label" for="shiftShortcutClear">Hapus override shift, kembali ke profil default</label>
                    </div>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="shiftShortcutRebuild" checked>
                        <label class="form-check-label" for="shiftShortcutRebuild">Rebuild planning tanggal ini</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="shiftShortcutDetect" checked>
                        <label class="form-check-label" for="shiftShortcutDetect">Run deteksi setelah simpan</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnSaveShiftShortcut">Simpan Shift</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importMachineLogModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Log Mesin (Flashdisk)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="importMachineLogForm">
                    <div class="modal-body">
                        <div class="mb-2">
                            <label class="form-label">File Log</label>
                            <input type="file" class="form-control" id="machineLogFile" accept=".dat,.txt,.csv,.log" required />
                            <small class="text-muted">Support format X100C/general. Contoh: `attlog.dat`.</small>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Delimiter</label>
                            <select class="form-select" id="machineDelimiter">
                                <option value="auto" selected>Auto Detect</option>
                                <option value="tab">Tab</option>
                                <option value="comma">Comma (,)</option>
                                <option value="semicolon">Semicolon (;)</option>
                                <option value="pipe">Pipe (|)</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Source</label>
                            <input type="text" class="form-control" id="machineSource" value="x100c-flashdisk" />
                        </div>
                        <div>
                            <label class="form-label">Device Code (opsional)</label>
                            <input type="text" class="form-control" id="machineDeviceCode" placeholder="X100C-01" />
                        </div>
                        <div class="mt-3 d-none" id="machineUploadProgressWrap">
                            <div class="d-flex justify-content-between mb-1">
                                <small class="text-muted" id="machineUploadProgressText">Uploading 0%</small>
                                <small class="text-muted" id="machineUploadProgressPercent">0%</small>
                            </div>
                            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                     id="machineUploadProgressBar"
                                     style="width: 0%">0%</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="btnSubmitImportMachineLog">Upload & Proses</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="syncPublicApiModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Sync Attendance dari API Publik</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="syncPublicApiForm">
                    <div class="modal-body">
                        <div class="alert alert-info py-2">
                            <div class="row g-2 align-items-center">
                                <div class="col-md-3"><strong>Host API:</strong></div>
                                <div class="col-md-9">
                                    <input type="text" class="form-control form-control-sm" id="publicApiBaseUrl"
                                        value="{{ $public_sync_base_url ?? 'http://192.168.11.201:8090' }}"
                                        placeholder="http://192.168.11.201:8090 atau https://domain.com" />
                                    <div class="small text-muted mt-1">Disimpan otomatis saat Anda klik Tes/Preview/Ambil.</div>
                                </div>
                                <div class="col-md-3"><strong>API Token:</strong></div>
                                <div class="col-md-9">
                                    <input type="password" class="form-control form-control-sm" id="publicApiKey"
                                        placeholder="{{ !empty($public_sync_has_api_key) ? 'Sudah tersimpan, kosongkan jika tidak ingin mengubah' : 'Isi token/API key dari server attendance' }}" />
                                    <div class="small text-muted mt-1">Jika diisi, token disimpan ke setting aplikasi dan dipakai oleh scheduler/job queue.</div>
                                </div>
                            </div>
                            <div><strong>Endpoint:</strong> <code>{{ $public_sync_transactions_path ?? '/api/public/transactions' }}</code></div>
                            <div><strong>API Key:</strong> {{ !empty($public_sync_has_api_key) ? 'Aktif' : 'Belum di-set' }}</div>
                            <div class="small mt-1"><strong>Fallback:</strong> <code>/api/public/transactions</code> lalu <code>/public/transactions</code></div>
                            <div class="small text-muted mt-1">Opsi ini tambahan. Upload <code>.dat</code> tetap bisa dipakai seperti biasa.</div>
                        </div>
                        <div class="alert alert-secondary py-2" id="publicApiStatusBox">
                            <div><strong>Status:</strong> <span id="publicApiStatusText">Belum dicek</span></div>
                            <div class="small text-muted" id="publicApiStatusDetail">Klik "Tes Koneksi" untuk cek endpoint aktif.</div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="publicApiStartDate" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Date</label>
                                <input type="date" class="form-control" id="publicApiEndDate" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">SN / Device (opsional)</label>
                                <input type="text" class="form-control" id="publicApiSn" placeholder="X100C-01 / SN mesin" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Employee Code (opsional)</label>
                                <input type="text" class="form-control" id="publicApiEmpCode" placeholder="10022 / EMP001" />
                            </div>
                            <div class="col-12">
                                <div class="form-check mt-1">
                                    <input class="form-check-input" type="checkbox" id="publicApiOverrideLock">
                                    <label class="form-check-label" for="publicApiOverrideLock">
                                        Override Lock (admin/HRD otomatis, user lain butuh key)
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 d-none" id="publicApiOverrideKeyWrap">
                                <label class="form-label">Override Key</label>
                                <input type="password" class="form-control" id="publicApiOverrideKey" placeholder="Masukkan override key jika bukan admin/HRD" />
                                <div class="small text-muted mt-1">Key diambil dari setting: <code>attendance.ingest.lock_override_key</code></div>
                            </div>
                        </div>
                        <div class="mt-3 small text-muted">
                            Dipakai untuk tarik data jam kehadiran dari aplikasi/server lain tanpa upload file <code>.dat</code>.
                            Sistem akan paging otomatis dan tetap memakai pipeline import log attendance yang sama.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-outline-success" id="btnTestSyncPublicApi">
                            <i class="fas fa-plug me-1"></i>Tes Koneksi
                        </button>
                        <button type="button" class="btn btn-outline-info" id="btnPreviewSyncPublicApi">
                            <i class="fas fa-eye me-1"></i>Preview
                        </button>
                        <button type="button" class="btn btn-primary" id="btnSubmitSyncPublicApi">
                            <i class="fas fa-cloud-arrow-down me-1"></i>Ambil & Proses
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulkSplShortcutModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pintasan Massal SPL Otomatis</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkSplShortcutForm">
                    <div class="modal-body">
                        <input type="hidden" id="bulkSplKaryawanId" />
                        <div class="alert alert-info py-2 mb-3">
                            Digunakan untuk kasus khusus: sistem akan membuat SPL otomatis untuk <strong>1 karyawan</strong> pada rentang tanggal yang dipilih berdasarkan penanda <strong>Butuh SPL</strong>, <strong>Butuh Extend SPL</strong>, atau <strong>Masuk Cepat</strong>.
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="bulkSplKaryawanLabel" readonly />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Mode Tanggal</label>
                            <select class="form-select" id="bulkSplDateMode">
                                <option value="suggested">Tanggal kurang saja (otomatis)</option>
                                <option value="range">Semua tanggal dalam rentang</option>
                            </select>
                            <div class="small text-muted mt-1">Mode otomatis akan menampilkan hanya tanggal yang terdeteksi <strong>Butuh SPL</strong>, <strong>Butuh Extend SPL</strong>, atau <strong>Masuk Cepat</strong>.</div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Dari</label>
                                <input type="date" class="form-control" id="bulkSplDateFrom" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Sampai</label>
                                <input type="date" class="form-control" id="bulkSplDateTo" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Target Otomatis</label>
                                <select class="form-select" id="bulkSplTargetMode">
                                    <option value="both">Butuh SPL + Extend SPL</option>
                                    <option value="missing">Hanya Butuh SPL</option>
                                    <option value="extend">Hanya Extend SPL</option>
                                    <option value="early_in">Masuk Cepat</option>
                                    <option value="selected_manual">Tanggal dipilih saja (manual)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Jenis SPL Khusus</label>
                                <select class="form-select" id="bulkSplType"></select>
                                <div class="small text-muted mt-1">
                                    Jika memilih <strong>ContinuesNextDay</strong> dan actual masuk lebih awal dari shift, sistem akan otomatis menambah <strong>SPL Normal</strong> untuk window masuk cepat sebelum shift.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Flow Approval</label>
                                <select class="form-select" id="bulkSplFlowId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode Proses</label>
                                <select class="form-select" id="bulkSplProcessMode">
                                    <option value="draft">Simpan Draft</option>
                                    <option value="submit">Simpan + Submit</option>
                                    <option value="approve">Simpan + Langsung Approved</option>
                                </select>
                                <div class="small text-muted mt-1">Mode <strong>Langsung Approved</strong> hanya untuk administrator / HRD.</div>
                            </div>
                        </div>
                        <div class="mt-3 border rounded p-2 bg-light-subtle" id="bulkSplSuggestedDatesSection">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Tanggal Kurang Terdeteksi</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="bulkSplCheckAllDates" checked />
                                    <label class="form-check-label small" for="bulkSplCheckAllDates">Pilih semua</label>
                                </div>
                            </div>
                            <div class="table-responsive border rounded bg-white" style="max-height:220px; overflow:auto;">
                                <table class="table table-sm table-bordered align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:40px;">#</th>
                                            <th>Tanggal</th>
                                            <th>Target</th>
                                            <th>Detail</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bulkSplCandidateDateBody">
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">Belum ada kandidat tanggal.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="small text-muted mt-1" id="bulkSplCandidateDateSummary">-</div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Alasan / Catatan</label>
                            <textarea class="form-control" id="bulkSplReason" rows="3" placeholder="SPL otomatis khusus dari Attendance Review V2."></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-primary" id="btnSubmitBulkSplShortcut">
                            <i class="fas fa-bolt me-1"></i>Proses SPL Otomatis
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulkContinuesWorkdayModal" 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 Continues Work Day</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkContinuesWorkdayForm">
                    <div class="modal-body">
                        <div class="alert alert-warning py-2 mb-3">
                            Membuat SPL <strong>ContinuesNextDay</strong> untuk user di <strong>Filter User</strong>. Jam pulang bisa berbeda per karyawan. Setelah approved, jalankan <strong>Run Deteksi</strong>.
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Tanggal Mulai Kerja</label>
                                <input type="date" class="form-control" id="bulkContinuesWorkDate" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Flow Approval</label>
                                <select class="form-select" id="bulkContinuesFlowId" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Mode Proses</label>
                                <select class="form-select" id="bulkContinuesProcessMode">
                                    <option value="approve">Simpan + Langsung Approved</option>
                                    <option value="submit">Simpan + Submit</option>
                                    <option value="draft">Simpan Draft</option>
                                </select>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="bulkContinuesUnapprovedOnly" checked>
                                <label class="form-check-label small fw-semibold" for="bulkContinuesUnapprovedOnly">Tampilkan yang belum approve saja</label>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" id="btnBulkContinuesSelectAll">Select all</button>
                                <button type="button" class="btn btn-outline-secondary" id="btnBulkContinuesUnselectAll">Unselect all</button>
                            </div>
                        </div>
                        <div class="table-responsive border rounded">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:44px;"><input type="checkbox" class="form-check-input" id="bulkContinuesCheckAll" checked></th>
                                        <th style="width:44px;">#</th>
                                        <th>Karyawan</th>
                                        <th style="width:205px;">Tanggal & Jam Masuk</th>
                                        <th style="width:220px;">Tanggal & Jam Pulang Next Day</th>
                                        <th>Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="bulkContinuesWorkdayBody">
                                    <tr><td colspan="5" class="text-center text-muted">Pilih user di Filter User dahulu.</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="small text-muted mt-2" id="bulkContinuesSummary">-</div>
                        <div class="mt-3">
                            <label class="form-label">Alasan / Catatan</label>
                            <textarea class="form-control" id="bulkContinuesReason" rows="2">SPL Continues Work Day bulk dari Attendance Review V2.</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-warning text-dark" id="btnSubmitBulkContinuesWorkday">
                            <i class="fas fa-clock-rotate-left me-1"></i>Proses Continues
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="autoOtHolidaySplModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">SPL Non-Workday Khusus AUTO OT</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="autoOtHolidaySplForm">
                    <div class="modal-body">
                        <input type="hidden" id="autoOtHolidaySplKaryawanId" />
                        <div class="alert alert-info py-2 mb-3">
                            Khusus karyawan <strong>AUTO OT</strong>: sistem akan membuat SPL untuk <strong>holiday special / holiday / weekend</strong> pada rentang tanggal yang dipilih, hanya untuk hari yang memiliki <strong>jam actual</strong>.
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" class="form-control" id="autoOtHolidaySplKaryawanLabel" readonly />
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Tanggal Non-Workday Terdeteksi</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="autoOtHolidaySplCheckAll" checked />
                                    <label class="form-check-label small" for="autoOtHolidaySplCheckAll">Pilih semua</label>
                                </div>
                            </div>
                            <div class="table-responsive border rounded" style="max-height: 260px; overflow: auto;">
                                <table class="table table-sm table-bordered align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:40px;">#</th>
                                            <th>Tanggal</th>
                                            <th>Jenis</th>
                                            <th>Jam Actual</th>
                                            <th>Jam SPL</th>
                                            <th>Catatan</th>
                                        </tr>
                                    </thead>
                                    <tbody id="autoOtHolidaySplCandidateBody">
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">Belum ada data.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="small text-muted mt-1" id="autoOtHolidaySplSummary">-</div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Jenis SPL Khusus</label>
                                <select class="form-select" id="autoOtHolidaySplType"></select>
                                <div class="small text-muted mt-1">
                                    <strong>Rekomendasi:</strong> gunakan <strong>Normal</strong> untuk holiday special/holiday/weekend.
                                    Jenis khusus seperti <code>No Rest</code> / <code>No Break</code> tidak diperlukan untuk mode ini.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Flow Approval</label>
                                <select class="form-select" id="autoOtHolidaySplFlowId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode Proses</label>
                                <select class="form-select" id="autoOtHolidaySplProcessMode">
                                    <option value="draft">Simpan Draft</option>
                                    <option value="approve" selected>Simpan + Langsung Approved</option>
                                </select>
                                <div class="small text-muted mt-1">Mode <strong>Langsung Approved</strong> hanya untuk administrator / HRD.</div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Alasan / Catatan</label>
                            <textarea class="form-control" id="autoOtHolidaySplReason" rows="3" placeholder="SPL non-workday khusus AUTO OT dari Attendance Review V2."></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-primary" id="btnSubmitAutoOtHolidaySpl">
                            <i class="fas fa-calendar-plus me-1"></i>Proses SPL Non-Workday
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reviewUnmappedModal" 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">Review Log Belum Match Karyawan (NULL)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted" id="unmappedInfo">-</small>
                        <button class="btn btn-sm btn-outline-primary" id="btnReloadUnmappedLog">
                            <i class="fas fa-rotate me-1"></i>Reload
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Tanggal Log</th>
                                    <th>Finger ID</th>
                                    <th>Employee Code</th>
                                    <th>Type</th>
                                    <th>Source</th>
                                    <th>Device</th>
                                    <th>Catatan</th>
                                </tr>
                            </thead>
                            <tbody id="tblUnmappedLogBody"></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="employeeActionModal" 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="employeeActionTitle">Action Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Hari</th>
                                    <th>Masalah</th>
                                    <th>Plan</th>
                                    <th>Actual</th>
                                    <th>Status</th>
                                    <th style="width:260px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="employeeActionBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="employeeScheduleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-light border-bottom">
                    <h5 class="modal-title fw-bold" id="employeeScheduleTitle">Jadwal Karyawan</h5><button type="button" class="btn btn-outline-warning btn-sm ms-auto me-2" id="btnScheduleBulkQuestion"><i class="fas fa-question-circle me-1"></i>Bulk Question Android</button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-hover align-middle mb-0 employee-schedule-table">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:64px" class="text-center">No</th><th style="width:48px" class="text-center"><input type="checkbox" id="scheduleQuestionSelectAll"></th>
                                    <th style="width:140px">Tanggal</th>
                                    <th>Jadwal</th>
                                    <th style="width:120px" class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="employeeScheduleBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="urgencyPolicyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable"><div class="modal-content">
            <div class="modal-header bg-danger text-white"><h5 class="modal-title">Kebijakan URGENSI Profil</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="alert alert-warning small">URGENSI tidak mengubah log fingerprint. Sistem membuat Forgetting Clock otomatis hanya setelah kebijakan disetujui.</div>
                <div id="urgencyPolicyStatus" class="mb-3"></div>
                <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" id="urgencyShadowToggle"><label class="form-check-label" for="urgencyShadowToggle">Tampilkan bayangan FC URGENSI</label></div>
                <div id="urgencyPolicyForm">
                    <label class="form-label">Approval Flow</label><select id="urgencyApprovalFlowId" class="form-select form-select-sm mb-2"><option value="">- Pilih flow URGENSI -</option></select>
                    <label class="form-label">PIC Penanggung Jawab</label><select id="urgencyResponsiblePicId" class="form-select form-select-sm mb-2 urgency-pic-select"></select>
                    <label class="form-label">Delay missing, menit</label><input id="urgencyDelayMinutes" type="number" min="0" max="1440" value="60" class="form-control form-control-sm mb-2">
                    <label class="form-label">Alasan aktivasi</label><textarea id="urgencyReason" class="form-control form-control-sm" maxlength="1000" required></textarea>
                </div>
            </div>
            <div class="modal-footer"><button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button><button class="btn btn-danger btn-sm" id="btnSubmitUrgencyPolicy">Ajukan URGENSI ON</button></div>
        </div></div>
    </div>
    <div class="modal fade" id="scheduleBulkQuestionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered"><div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Bulk Question Android</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="scheduleBulkQuestionForm"><div class="modal-body">
                <div class="alert alert-info small mb-3" id="scheduleBulkQuestionInfo"></div>
                <label class="form-label">Jenis</label><select id="scheduleBulkQuestionKind" class="form-select mb-2"><option value="verify">Perlu Verifikasi</option><option value="alpha">Alpha</option></select>
                <label class="form-label">Pertanyaan</label><input id="scheduleBulkQuestionText" class="form-control" maxlength="255" placeholder="Kosongkan untuk kalimat default">
            </div><div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button><button class="btn btn-warning btn-sm" type="submit">Kirim Question</button></div></form>
        </div></div>
    </div>
    <div class="modal fade" id="cellDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-gradient-primary text-white py-3 border-0" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8);">
                    <div>
                        <h6 class="modal-title fw-bold mb-0" id="cellDetailTitle">Detail Attendance Review</h6>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 py-3" id="cellDetailBody" style="font-size:.88rem;"></div>
                <div class="modal-footer py-2 px-4 border-top">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"><i class="fas fa-xmark me-1"></i>Tutup</button>
                    <button type="button" class="btn btn-warning btn-sm" id="btnCellDetailModify"><i class="fas fa-pen me-1"></i>Modify Jam</button>
                    <button type="button" class="btn btn-info btn-sm text-white d-none" id="btnCellDetailSpl"><i class="fas fa-file-signature me-1"></i>Modify SPL</button>
                    <button type="button" class="btn btn-danger btn-sm" id="btnCellDetailDelete"><i class="fas fa-trash me-1"></i>Delete</button>
                </div>
            </div>
        </div>
    </div>

@endsection

<div class="modal fade" id="zipBatchModal" 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">ZIP User Selected</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body"><div class="small text-muted mb-2">Maksimal 30 user per part. Status tersimpan saat halaman dimuat ulang.</div><div id="zipBatchModalBody"></div></div>
            <div class="modal-footer"><button type="button" class="btn btn-outline-danger" id="btnClearZipBatch">Hapus Batch Tersimpan</button><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button></div>
        </div>
    </div>
</div>
@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 () {
            document.querySelectorAll('.attendance-advanced-tools [title], .attendance-action-card [title], .attendance-filter-actions [title], .attendance-quick-tools [title]').forEach((element) => {
                bootstrap.Tooltip.getOrCreateInstance(element, {
                    placement: 'top',
                    boundary: document.body,
                    customClass: 'attendance-action-tooltip',
                    trigger: 'hover focus'
                });
            });
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            $.ajaxSetup({ cache: false });
            const canDirectApproveRequests = @json($can_direct_approve_requests ?? false);

            const historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
            const importMachineLogModal = new bootstrap.Modal(document.getElementById('importMachineLogModal'));
            const syncPublicApiModal = new bootstrap.Modal(document.getElementById('syncPublicApiModal'));
            const bulkSplShortcutModal = new bootstrap.Modal(document.getElementById('bulkSplShortcutModal'));
            const bulkContinuesWorkdayModal = new bootstrap.Modal(document.getElementById('bulkContinuesWorkdayModal'));
            const autoOtHolidaySplModal = new bootstrap.Modal(document.getElementById('autoOtHolidaySplModal'));
            const reviewUnmappedModal = new bootstrap.Modal(document.getElementById('reviewUnmappedModal'));
            const manualTimeModal = new bootstrap.Modal(document.getElementById('manualTimeModal'));
            const scanEmergencyModal = new bootstrap.Modal(document.getElementById('scanEmergencyModal'));
            const shiftShortcutModal = new bootstrap.Modal(document.getElementById('shiftShortcutModal'));
            const employeeActionModal = new bootstrap.Modal(document.getElementById('employeeActionModal'));
            const employeeScheduleModal = new bootstrap.Modal(document.getElementById('employeeScheduleModal'));
            const scheduleBulkQuestionModal = new bootstrap.Modal(document.getElementById('scheduleBulkQuestionModal'));
            let scheduleQuestionEmployee = null;
            let scheduleQuestionDates = [];
            let scheduleQuestionSelectedDates = [];
            let scheduleQuestionLastDate = null;
            const urgencyPolicyModal = new bootstrap.Modal(document.getElementById('urgencyPolicyModal'));
            const urgencyPolicyUrl = @json(route('attendance_review_v2.urgency_policy.show'));
            const urgencyPolicyStoreUrl = @json(route('attendance_review_v2.urgency_policy.store'));
            const urgencyShadowSettingKey = 'attendance_review_v2_urgency_shadow';
            let urgencyShadowEnabled = localStorage.getItem(urgencyShadowSettingKey) === '1';
            let urgencyRefsLoaded = false;
            $('#urgencyShadowToggle').prop('checked', urgencyShadowEnabled).on('change', function () { urgencyShadowEnabled = this.checked; localStorage.setItem(urgencyShadowSettingKey, urgencyShadowEnabled ? '1' : '0'); loadReviews(); });
            const splIndexUrl = @json(route('surat_perintah_lembur.index'));
            const buildSplEditUrl = (id) => id ? `${splIndexUrl}?open_id=${encodeURIComponent(id)}` : '';
            let refs = { profil_bulans: [], karyawans: [], roundings: [] };
            let shiftShortcutRefs = { shifts: [] };
            let shiftShortcutRefsPromise = null;
            let splShortcutRefs = { flows: [], splTypes: [] };
            let splShortcutRefsPromise = null;
            let reviewRows = [];
            let calcRows = [];
            let reviewMeta = { holiday_map: {}, holiday_special_map: {}, workday_map: {}, pagination: { page: 1, total_pages: 1 } };
            let calcMeta = { summary: {} };
            let calcAllowLoad = false;
            let calcRebuildPending = false;
            let autoOtHolidayCandidates = [];
            let bulkSplShortcutCandidates = [];
            let bulkContinuesWorkdayCandidates = [];
            let currentPage = 1;
            let matrixEmployeeKeyword = '';
            let lastMatrixEmployees = [];
            let lastVisibleDates = [];

            const pickPreferredApprovalFlowValue = ($select) => {
                if (!$select || !$select.length) return '';
                const options = $select.find('option');
                if (!options.length) return '';

                let preferredValue = '';
                options.each(function () {
                    const value = String($(this).val() || '').trim();
                    const text = String($(this).text() || '').toLowerCase();
                    if (!value) return;
                    if (text.includes('without pic')) {
                        preferredValue = value;
                        return false;
                    }
                    return undefined;
                });

                if (!preferredValue) {
                    preferredValue = String(options.first().val() || '').trim();
                }

                return preferredValue;
            };
            let showPendingOnly = false;
            let showMissingOnly = false;
            let showNeedsSplOnly = false;
            const contractHoursSettingKey = 'attendance_review_v2_jam_ks_enabled';
            let showContractHours = localStorage.getItem(contractHoursSettingKey) === '1';
            let forcedKaryawanId = '';
            let calcTable = null;
            let calcOtColumns = [];
            let reviewRequestSeq = 0;
            let calcRequestSeq = 0;
            const ENABLE_APPROVE_ALL_CHECK = true;
            const syncContractHoursButton = () => {
                $('#btnToggleContractHours')
                    .toggleClass('active btn-success', showContractHours)
                    .toggleClass('btn-dark', !showContractHours)
                    .html(`<i class="fas fa-clock me-1"></i>Jam KS: ${showContractHours ? 'On' : 'Off'}`);
            };

            const statusBadge = (status, row = null) => {
                const s = (status || 'no_log').toString();
                if (s === 'waiting_schedule') return '<span class="badge text-bg-secondary">Menunggu Jadwal</span>';
                if (s === 'contract_not_started' || s === 'contract_ended') {
                    const code = (row && row.contract_code)
                        ? String(row.contract_code)
                        : (s === 'contract_not_started' ? 'BK' : 'KS');
                    const label = (row && row.contract_label)
                        ? String(row.contract_label)
                        : (s === 'contract_not_started' ? 'Belum Mulai Kontrak' : 'Kontrak Selesai');
                    return `<span class="badge text-bg-light text-dark border" title="${escapeHtml(label)}">${escapeHtml(code)}</span>`;
                }
                const map = {
                    normal: 'success',
                    needs_spl: 'danger',
                    needs_extend_spl: 'warning',
                    needs_no_rest: 'warning',
                    missing_in: 'warning',
                    missing_out: 'warning',
                    continues_workday: 'primary',
                    continues_carry: 'info',
                    unpaired: 'danger',
                    shift_transition: 'info',
                    no_log: 'secondary',
                    waiting_schedule: 'secondary',
                    leave_approved: 'primary',
                    overtime_approved: 'warning',
                    overtime_in_review: 'info',
                    overtime_submitted: 'dark',
                    overtime_draft: 'secondary',
                    forgetting_clock_approved: 'warning',
                    forgetting_clock_in_review: 'info',
                    forgetting_clock_submitted: 'dark',
                    forgetting_clock_draft: 'secondary'
                };
                return `<span class="badge text-bg-${map[s] || 'secondary'}">${escapeHtml(s || 'no_log')}</span>`;
            };

            const fmtShortDate = (v) => {
                if (!v) return '-';
                const d = new Date(v + 'T00:00:00');
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: '2-digit' });
            };

            const fmtDateIdFull = (v) => {
                if (!v) return '-';
                const d = new Date(v + 'T00:00:00');
                if (Number.isNaN(d.getTime())) return String(v);
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: '2-digit', year: 'numeric' });
            };

            const fmtDay = (v) => {
                if (!v) return '-';
                const d = new Date(v + 'T00:00:00');
                return d.toLocaleDateString('id-ID', { weekday: 'short' });
            };

            const fmtDateTimeWithDay = (value, baseDate = '') => {
                const text = String(value || '').trim();
                const match = text.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2})/);
                if (!match) return text || '-';
                const dateKey = match[1];
                const timeKey = match[2];
                const dateObj = new Date(`${dateKey}T00:00:00`);
                const dateLabel = Number.isNaN(dateObj.getTime())
                    ? dateKey
                    : dateObj.toLocaleDateString('id-ID', { weekday: 'long', day: '2-digit', month: 'short', year: 'numeric' });
                const nextDay = baseDate && dateKey > String(baseDate).slice(0, 10) ? ' +1 hari' : '';
                return `${dateLabel} ${timeKey}${nextDay}`;
            };

            const escapeHtml = (value) => String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const reasonText = (value) => {
                const text = String(value ?? '');
                if (text.startsWith('ACTION_REQUIRED::')) {
                    return text.replace('ACTION_REQUIRED::', '').trim();
                }
                return text.trim();
            };

            const reasonHtml = (value) => {
                const text = reasonText(value);
                return text ? `<div class="reason-wrap">${escapeHtml(text)}</div>` : '-';
            };

            const looksLikeKtpNik = (value) => {
                const s = String(value ?? '').trim();
                // Heuristic: KTP/NIK biasanya angka panjang (>= 12 digit) tanpa separator.
                return s.length >= 12 && /^[0-9]+$/.test(s);
            };

            const getEmpCode = (r) => {
                const finger = String(r?.finger_id ?? '').trim();
                if (finger) return finger;
                const code = String(r?.employee_code ?? '').trim();
                return code || '-';
            };

            // Display-only: avoid showing KTP/NIK as the primary big code when finger_id is missing.
            const getEmpDisplayCode = (r) => {
                const finger = String(r?.finger_id ?? '').trim();
                if (finger) return finger;
                const code = String(r?.employee_code ?? '').trim();
                if (!code) return '-';
                return looksLikeKtpNik(code) ? 'NO FINGER' : code;
            };

            const formatTimeHm = (value) => value ? String(value).slice(11, 16) : '-';
            const formatHmDot = (value) => String(value || '-').replace(':', '.');
            const cleanNoLogReason = (reason) => {
                const text = String(reason || '')
                    .split(/\r?\n/)
                    .filter((line) => !String(line || '').startsWith('MANUAL_TIME_LOCK::'))
                    .join('\n')
                    .trim();
                if (!text) return '';
                if (text.includes('dipakai sebagai OUT lintas hari') || text.includes('Terdeteksi IN tanpa OUT')) {
                    return 'Tidak ada log dalam shift.';
                }
                return text;
            };
            const roundHmToHour = (value) => {
                const match = String(value || '').match(/^(\d{2}):(\d{2})$/);
                if (!match) return value || '-';
                let hour = Number(match[1] || 0);
                const minute = Number(match[2] || 0);
                if (minute >= 30) hour = (hour + 1) % 24;
                return `${String(hour).padStart(2, '0')}:00`;
            };

            // Non-blocking overlay helper for tables/sections.
            const setSectionLoading = (selector, isLoading, text = '') => {
                if (selector === '#matrixContainer') {
                    let $front = $('#matrixLoadingOverlayFront');
                    if (!$front.length) {
                        $front = $(`
                            <div class="loading-overlay is-fixed-front" id="matrixLoadingOverlayFront" aria-hidden="true">
                                <div class="loading-box">
                                    <span class="loading-anim" aria-hidden="true">
                                        <img src="{{ asset('assets/attendance-loading.svg') }}" alt="">
                                    </span>
                                    <span class="loading-text">Memuat matrix...</span>
                                </div>
                            </div>
                        `).appendTo(document.body);
                    }
                    if (text) $front.find('.loading-text').text(text);
                    $front.toggle(isLoading);
                    return;
                }
                const $wrap = $(selector);
                if (!$wrap.length) return;
                if (isLoading) {
                    $wrap.addClass('is-loading');
                    if (text) {
                        const $txt = $wrap.find('.loading-text').first();
                        if ($txt.length) $txt.text(text);
                    }
                    return;
                }
                $wrap.removeClass('is-loading');
            };

            // Blocking indicator for user-triggered long actions (sync/rebuild).
            let busySwalCount = 0;
            const showBusySwal = (title, detail = 'Mohon tunggu...') => {
                busySwalCount += 1;
                Swal.fire({
                    title: title || 'Memproses...',
                    html: `<div class="text-muted small">${escapeHtml(detail || '')}</div>`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => Swal.showLoading(),
                });
            };
            const hideBusySwal = () => {
                busySwalCount = Math.max(0, busySwalCount - 1);
                if (busySwalCount === 0) {
                    Swal.close();
                }
            };

            let currentManualReviewId = 0;
            const pickTime = (v) => {
                if (!v) return '';
                const text = String(v);
                if (text.length >= 16 && text.includes(' ')) return text.slice(11, 16);
                if (/^\d{2}:\d{2}/.test(text)) return text.slice(0, 5);
                return '';
            };

            const getSelectedProfil = () => {
                const id = Number($('#profilBulanId').val() || 0);
                return (refs.profil_bulans || []).find((x) => Number(x.id) === id) || null;
            };
            const isSelectedProfilClosed = () => String(getSelectedProfil()?.status || 'open').toLowerCase() === 'closed';
            const closedDisabledAttr = () => isSelectedProfilClosed() ? 'disabled title="Profil closed. Buka revisi di Master Profil Bulan dulu."' : '';
            document.addEventListener('click', function (event) {
                const target = event.target instanceof Element
                    ? event.target.closest('.btn-approve,.btn-reject-hours,.btn-restore-hours,.btn-offline-approve,.btn-offline-reject,.btn-fc-request,.btn-attendance-question,.btn-manual-time,.btn-shift-shortcut,.btn-suggest-shift,.btn-approve-date,.btn-approve-user,.btn-unapprove-user,.btn-unapprove-date,.btn-bulk-spl-shortcut,.btn-auto-ot-holiday-spl,.btn-clear-custom-shift')
                    : null;
                if (!target || !isSelectedProfilClosed()) return;
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
                Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum mengubah Attendance Review.', 'warning');
            }, true);
            const syncClosedProfileUi = () => {
                const locked = isSelectedProfilClosed();
                const mutatingSelectors = [
                    '#btnRunDetect',
                    '#btnRebuildPlanning',
                    '#btnApproveAllCheck',
                    '#btnImportMachineLog',
                    '#btnSyncPublicApiLog',
                    '#btnRepairMachineLog',
                    '#btnGoProfilBulan'
                ].join(',');
                $(mutatingSelectors).prop('disabled', locked);
                $('#closedProfileAlert').toggleClass('d-none', !locked);
            };

            const buildDateRange = (startDate, endDate) => {
                if (!startDate || !endDate) return [];
                const dates = [];
                let cursor = new Date(startDate + 'T00:00:00');
                const end = new Date(endDate + 'T00:00:00');
                while (cursor <= end) {
                    const y = cursor.getFullYear();
                    const m = String(cursor.getMonth() + 1).padStart(2, '0');
                    const d = String(cursor.getDate()).padStart(2, '0');
                    dates.push(`${y}-${m}-${d}`);
                    cursor.setDate(cursor.getDate() + 1);
                }
                return dates;
            };

            const resolveHolidayKind = (payload = {}) => {
                const explicitKind = String(payload?.holiday_kind || '').trim().toLowerCase();
                if (explicitKind) return explicitKind;
                if (Boolean(payload?.is_holiday_special)) return 'holiday_special';
                const holidayName = String(payload?.holiday_name || '').trim().toLowerCase();
                if (holidayName === 'weekend') return 'weekend';
                if (Boolean(payload?.is_holiday) || holidayName !== '') return 'holiday';
                return '';
            };

            const getHolidayVisual = (payload = {}, isSpl = false) => {
                const kind = resolveHolidayKind(payload);
                const holidayName = String(payload?.holiday_name || '').trim();
                if (!kind) {
                    return {
                        kind: '',
                        title: '',
                        dayLabel: '',
                        dayBadgeClass: 'text-bg-danger',
                        otLabel: '',
                        otBadgeClass: 'badge-holiday-ot',
                    };
                }
                if (kind === 'weekend') {
                    return {
                        kind,
                        title: holidayName || 'Weekend',
                        dayLabel: 'Weekend',
                        dayBadgeClass: 'badge-weekend-ot',
                        otLabel: isSpl ? 'Weekend Lembur' : 'Weekend',
                        otBadgeClass: 'badge-weekend-ot',
                    };
                }
                if (kind === 'holiday_special') {
                    return {
                        kind,
                        title: holidayName || 'Holiday Special',
                        dayLabel: 'Holiday Special',
                        dayBadgeClass: 'badge-holiday-special',
                        otLabel: isSpl ? 'Holiday Special Lembur' : 'Holiday Special',
                        otBadgeClass: 'badge-holiday-special-ot',
                    };
                }
                return {
                    kind,
                    title: holidayName || 'Holiday',
                    dayLabel: 'Libur',
                    dayBadgeClass: 'text-bg-danger',
                    otLabel: isSpl ? 'Holiday Lembur' : 'Libur',
                    otBadgeClass: 'badge-holiday-ot',
                };
            };

            const shiftShortcutButton = (row, emp = null) => {
                const karyawanId = Number(row?.karyawan_id || emp?.karyawan_id || 0);
                const workDate = String(row?.work_date || '').slice(0, 10);
                if (!karyawanId || !workDate) return '';
                const disabledAttr = closedDisabledAttr();
                const employee = emp
                    ? `${getEmpCode(emp)} - ${emp.employee_name || '-'}`
                    : `${getEmpCode(row)} - ${row.employee_name || '-'}`;
                const shiftId = Number(row?.planned_profil_jam_kerja_id || 0);
                return `<button type="button" class="btn btn-xs btn-outline-dark btn-shift-shortcut"
                    data-karyawan-id="${karyawanId}"
                    data-work-date="${escapeHtml(workDate)}"
                    data-employee="${escapeHtml(employee)}"
                    data-current-shift-id="${shiftId}"
                    data-current-shift="${escapeHtml(row?.applied_shift_code || row?.planned_shift_name || row?.planned_shift_label || '')}"
                    ${disabledAttr}>Shift</button>`;
            };

            const getCalendarMarkInfo = (dateKey) => {
                const specialMap = reviewMeta?.holiday_special_map || {};
                const holidayMap = reviewMeta?.holiday_map || {};
                const workdayMap = reviewMeta?.workday_map || {};
                if (specialMap[dateKey]) {
                    return {
                        kind: 'holiday_special',
                        title: String(specialMap[dateKey] || 'Holiday Special'),
                        label: 'Holiday Special',
                        badgeClass: 'badge-holiday-special holiday-mark',
                    };
                }
                if (holidayMap[dateKey]) {
                    const kind = String(holidayMap[dateKey]).trim().toLowerCase() === 'weekend' ? 'weekend' : 'holiday';
                    const visual = getHolidayVisual({
                        holiday_kind: kind,
                        holiday_name: holidayMap[dateKey],
                        is_holiday: true,
                    });
                    return {
                        kind,
                        title: visual.title,
                        label: visual.dayLabel,
                        badgeClass: `${visual.dayBadgeClass} holiday-mark`,
                    };
                }
                if (workdayMap[dateKey]) {
                    return {
                        kind: 'workday',
                        title: String(workdayMap[dateKey] || 'Workday'),
                        label: 'Workday',
                        badgeClass: 'text-bg-success holiday-mark',
                    };
                }
                return null;
            };

            const reviewTable = $('#reviewTable').DataTable({
                responsive: true,
                data: [],
                orderCellsTop: true,
                fixedHeader: false,
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'work_date' },
                    {
                        data: null,
                        render: (r) => {
                            if (!r.is_holiday) return '-';
                            const isSpl = r.attendance_tag === 'overtime_approved';
                            const visual = getHolidayVisual(r, isSpl);
                            return `<span class="badge ${isSpl ? visual.otBadgeClass : visual.dayBadgeClass}" title="${escapeHtml(visual.title)}">${escapeHtml(isSpl ? visual.otLabel : visual.dayLabel)}</span>`;
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            if (!r.attendance_tag) return '-';
                            const badgeClass = r.attendance_tag === 'leave_approved'
                                ? 'text-bg-primary'
                                : (r.attendance_tag === 'overtime_approved'
                                    ? 'badge-spl-purple'
                                    : ((r.attendance_tag || '').startsWith('forgetting_clock_') ? 'badge-fc-orange' : 'text-bg-secondary'));
                            return `<span class="badge ${badgeClass}" title="${r.attendance_tag_notes || ''}">${r.attendance_tag_label || r.attendance_tag}</span>`;
                        }
                    },
                    { data: null, render: (r) => `${getEmpCode(r)} - ${r.employee_name || '-'}` },
                    { data: 'effective_status', render: (v, t, r) => statusBadge(v, r) },
                    { data: null, render: (r) => `${r.checkin_at || '-'}<br>${r.checkout_at || '-'}` },
                    { data: null, render: (r) => `${r.suggested_checkin_at || '-'}<br>${r.suggested_checkout_at || '-'}` },
                    { data: 'confidence_score', render: (v) => `${Number(v || 0).toFixed(2)}%` },
                    {
                        data: 'reason',
                        render: (v, type) => type === 'display' ? reasonHtml(v) : (reasonText(v) || '-')
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => {
                            const actionBadge = r.needs_action
                                ? '<span class="badge text-bg-warning text-dark me-1">Butuh Action</span>'
                                : '';
                            const offlineBadge = r.offline_pending
                                ? `<span class="badge text-bg-warning text-dark me-1">Offline Pending (${Number(r.offline_pending_count || 0)})</span>`
                                : '';
                            if (r.effective_status === 'contract_not_started' || r.effective_status === 'contract_ended') {
                                const code = r.contract_code || (r.effective_status === 'contract_not_started' ? 'BK' : 'KS');
                                const label = r.contract_label || (r.effective_status === 'contract_not_started' ? 'Belum Mulai Kontrak' : 'Kontrak Selesai');
                                const contractNote = r.effective_status === 'contract_not_started'
                                    ? (r.contract_start_date ? `Mulai ${fmtDateIdFull(r.contract_start_date)}` : '')
                                    : (r.contract_end_date ? `s/d ${fmtDateIdFull(r.contract_end_date)}` : '');
                                const note = contractNote ? `<div class="small text-muted mt-1">${escapeHtml(contractNote)}</div>` : '';
                                return `${actionBadge}${offlineBadge}<span class="badge text-bg-light text-dark border" title="${escapeHtml(label)}">${escapeHtml(code)}</span>${note}`;
                            }
                            if (r.attendance_tag === 'leave_approved') {
                                return `${actionBadge}${offlineBadge}<span class="badge text-bg-primary">Auto Exempt</span>`;
                            }
                            if (!r.id) {
                                return '<span class="text-muted small">Belum ada hasil deteksi</span>';
                            }
                            const lockAttr = closedDisabledAttr();
                            const approveBtn = r.is_approved
                                ? '<span class="badge text-bg-success me-1">Approved</span>'
                                : `<button class="btn btn-xs btn-outline-primary btn-approve me-1" data-id="${r.id}" ${lockAttr}>Approve</button>`;
                            const rejectBtn = r.can_reject_hours
                                ? `<button class="btn btn-xs btn-outline-danger btn-reject-hours me-1" data-id="${r.id}" ${lockAttr}>Tolak Jam</button>`
                                : '';
                            const restoreBtn = r.can_restore_hours
                                ? `<button class="btn btn-xs btn-outline-success btn-restore-hours me-1" data-id="${r.id}" ${lockAttr}>Restore</button>`
                                : '';
                            const offlineApproveBtn = r.offline_pending
                                ? `<button class="btn btn-xs btn-outline-success btn-offline-approve me-1" data-id="${r.id}" ${lockAttr}>Apv Offline</button>`
                                : '';
                            const offlineRejectBtn = r.offline_pending
                                ? `<button class="btn btn-xs btn-outline-danger btn-offline-reject me-1" data-id="${r.id}" ${lockAttr}>Rjt Offline</button>`
                                : '';
                            const fcInTime = (r.checkin_at || r.suggested_checkin_at || r.planned_shift_start || '').slice(11, 16);
                            const fcOutTime = (r.checkout_at || r.suggested_checkout_at || r.planned_shift_end || '').slice(11, 16);
                            const fcBtn = r.id ? `<button type="button" class="btn btn-xs btn-warning btn-fc-request me-1"
                                data-review-id="${r.id}"
                                data-karyawan-id="${r.karyawan_id || ''}"
                                data-employee="${escapeHtml(`${getEmpCode(r)} - ${r.employee_name || '-'}`)}"
                                data-work-date="${r.work_date || ''}"
                                data-in-time="${fcInTime}"
                                data-out-time="${fcOutTime}"
                                data-reason="Forgetting clock dari Attendance Review V2"
                                ${lockAttr}>FC</button>` : '';
                            const questionStatus = String(r.effective_status || r.status || '').toLowerCase().trim();
                            const questionSource = [
                                r.effective_status, r.status, r.missing_type, r.attendance_status,
                                r.reason, r.status_label, r.badge_label,
                            ].filter(Boolean).join(' ').toLowerCase();
                            const canAskAttendanceQuestion = ['missing_in', 'missing_out', 'unpaired', 'shift_transition', 'no_log']
                                .some((status) => questionStatus === status || questionSource.includes(status.replace('_', ' ')) || questionSource.includes(status));
                            const questionBtn = r.id && canAskAttendanceQuestion
                                ? `<button type="button" class="btn btn-xs btn-outline-warning btn-attendance-question me-1" data-id="${r.id}" data-employee="${escapeHtml(`${getEmpCode(r)} - ${r.employee_name || '-'}`)}" data-work-date="${r.work_date || ''}" ${lockAttr}><i class="fas fa-question-circle"></i> Question</button>`
                                : '';
                            const manualBtn = r.id
                                ? `<button class="btn btn-xs btn-outline-secondary btn-manual-time me-1" data-id="${r.id}" ${lockAttr}>Koreksi Jam</button>`
                                : '';
                            const shiftBtn = shiftShortcutButton(r);
                            // History button intentionally hidden (can still be accessed via API if needed).
                            return `${actionBadge}${offlineBadge}${approveBtn}${rejectBtn}${restoreBtn}${offlineApproveBtn}${offlineRejectBtn}${fcBtn}${questionBtn}${manualBtn}${shiftBtn}`;
                        }
                    }
                ],
                initComplete: function () {
                    const api = this.api();
                    $('#reviewTable thead').on('keyup change', '.review-filter-input', function () {
                        const col = Number($(this).data('col'));
                        if (Number.isNaN(col)) return;
                        api.column(col).search(this.value || '').draw();
                        if (col === 4) {
                            matrixEmployeeKeyword = this.value || '';
                            renderMatrix();
                            refreshApproveAllButtonState();
                        }
                    });
                }
            });

            $('#reviewDetailCollapse').on('shown.bs.collapse', function () {
                reviewTable.columns.adjust();
                if (reviewTable.responsive && typeof reviewTable.responsive.recalc === 'function') {
                    reviewTable.responsive.recalc();
                }
            });

            const buildCalcTable = (otColumns) => {
                calcOtColumns = Array.isArray(otColumns) ? otColumns : [];
                const dynamicHeaders = calcOtColumns.map((c) => `<th>${c.label || 'OT'}</th>`).join('');
                $('#calcTable thead').html(`
                    <tr>
                        <th>No.</th>
                        <th>Karyawan</th>
                        <th>Hari Hadir</th>
                        <th>Jam Normal</th>
                        <th>Jam Lembur Bersih</th>
                        ${dynamicHeaders}
                        <th>Jam Lembur xKali</th>
                        <th>Aksi</th>
                    </tr>
                `);

                if (calcTable) {
                    calcTable.destroy();
                    $('#calcTable tbody').empty();
                }

                const dynamicColumns = calcOtColumns.map((c) => ({
                    data: null,
                    render: (r) => Number((r.ot_dynamic || {})[c.key] || 0).toFixed(2),
                }));

                calcTable = $('#calcTable').DataTable({
                    responsive: false,
                    scrollX: true,
                    processing: true,
                    serverSide: true,
                    searching: true,
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    ajax: function (d, callback) {
                        if (!calcAllowLoad || !$('#profilBulanId').val()) {
                            callback({ data: [], recordsTotal: 0, recordsFiltered: 0, draw: d.draw, meta: { summary: {} } });
                            return;
                        }
                        const params = withKaryawanFilterParams(Object.assign(d, {
                            profil_bulan_id: $('#profilBulanId').val() || '',
                            date_from: $('#filterDateFrom').val() || '',
                            date_to: $('#filterDateTo').val() || ''
                        }));
                        $.getJSON('{{ route('attendance_review_v2.calculations.data') }}', params)
                            .done((resp) => {
                                calcRows = resp.data || [];
                                calcMeta = resp.meta || { summary: {} };
                                const incomingOtCols = (resp.meta && Array.isArray(resp.meta.ot_columns)) ? resp.meta.ot_columns : [];
                                const prevKey = JSON.stringify(calcOtColumns.map((x) => x.key || ''));
                                const nextKey = JSON.stringify(incomingOtCols.map((x) => x.key || ''));
                                renderCalcSummary();
                                if (prevKey !== nextKey && !calcRebuildPending) {
                                    calcRebuildPending = true;
                                    callback({ data: [], recordsTotal: 0, recordsFiltered: 0, draw: d.draw, meta: resp.meta || {} });
                                    setTimeout(() => {
                                        buildCalcTable(incomingOtCols);
                                        calcRebuildPending = false;
                                    }, 0);
                                    return;
                                }
                                callback(resp);
                            })
                            .fail((xhr) => {
                                callback({ data: [], recordsTotal: 0, recordsFiltered: 0, draw: d.draw, meta: { summary: {} } });
                                Swal.fire('Error', xhr.responseJSON?.message || 'Failed load attendance calculations', 'error');
                            })
                            .always(() => {
                                setSectionLoading('#calcTableWrap', false);
                            });
                    },
                    columns: [
                        { data: null, render: (d, t, r, m) => m.settings._iDisplayStart + m.row + 1, orderable: false, searchable: false },
                        { data: null, render: (r) => `${getEmpCode(r)} - ${r.employee_name || '-'}` },
                        { data: 'days_present' },
                        { data: 'normal_hours', render: (v) => Number(v || 0).toFixed(2) },
                        { data: 'overtime_hours', render: (v) => Number(v || 0).toFixed(2) },
                        ...dynamicColumns,
                        { data: 'weighted_overtime_hours', render: (v) => Number(v || 0).toFixed(2) },
                        { data: null, orderable: false, searchable: false, render: (r) => {
                            const params = new URLSearchParams({
                                profil_bulan_id: String($('#profilBulanId').val() || ''),
                                karyawan_id: String(r.karyawan_id || ''),
                                date_from: String($('#filterDateFrom').val() || ''),
                                date_to: String($('#filterDateTo').val() || '')
                            });
                            return `<a class="btn btn-sm btn-primary text-nowrap" target="_blank" href="{{ route('attendance_review_v2.calculations.detail') }}?${params.toString()}">Cek Detail</a>`;
                        }},
                    ],
                });
            };

            const renderCalcSummary = () => {
                const sum = calcMeta?.summary || {};
                $('#calcSummary [data-k="employees"]').text(Number(sum.employees || 0));
                $('#calcSummary [data-k="days_present"]').text(Number(sum.days_present || 0));
                $('#calcSummary [data-k="actual_hours"]').text(Number(sum.actual_hours || 0).toFixed(2));
                $('#calcSummary [data-k="normal_hours"]').text(Number(sum.normal_hours || 0).toFixed(2));
                $('#calcSummary [data-k="overtime_hours"]').text(Number(sum.overtime_hours || 0).toFixed(2));
                $('#calcSummary [data-k="weighted_overtime_hours"]').text(Number(sum.weighted_overtime_hours || 0).toFixed(2));
                const hk = Number(sum.days_present || 0);
                const from = (calcMeta?.date_from || $('#filterDateFrom').val() || '-').toString();
                const to = (calcMeta?.date_to || $('#filterDateTo').val() || '-').toString();
                $('#hkStatusBar').html(`Status HK: <strong>${hk} HK</strong> | Range tanggal: <span class="text-muted">${from} s/d ${to}</span>`);
            };

            const syncMatrixTopScrollWidth = () => {
                const container = document.getElementById('matrixContainer');
                const table = document.getElementById('matrixTable');
                const topInner = document.getElementById('matrixScrollTopInner');
                if (!container || !table || !topInner) return;
                topInner.style.width = `${Math.max(table.scrollWidth, container.clientWidth)}px`;
            };

            const resetCalculationView = () => {
                calcRows = [];
                calcMeta = { summary: {} };
                calcAllowLoad = false;
                if (calcTable) {
                    calcTable.clear();
                    $('#calcTable tbody').empty();
                }
                renderCalcSummary();
            };

            buildCalcTable([]);

            const renderMatrix = () => {
                const profil = getSelectedProfil();
                const periodStart = reviewMeta?.date_from || profil?.start_date;
                const periodEnd = reviewMeta?.date_to || profil?.end_date;
                $('#periodLabel').text(periodStart && periodEnd ? `Periode: ${periodStart} s/d ${periodEnd}` : 'Periode: -');

                const dates = buildDateRange(periodStart, periodEnd);
                const $thead = $('#matrixTable thead');
                const $tbody = $('#matrixTable tbody');
                $thead.empty();
                $tbody.empty();

                if (!dates.length) {
                    $thead.html('<tr><th>Data belum tersedia</th></tr>');
                    return;
                }

                const headerCells = dates.map((d) => {
                    const dateMeta = getCalendarMarkInfo(d);
                    let mark = '';
                    if (dateMeta) {
                        mark = `<span class="badge ${dateMeta.badgeClass}" title="${escapeHtml(dateMeta.title)}">${escapeHtml(dateMeta.label)}</span>`;
                    }
                    return `<th class="matrix-date-head">
                        <div class="matrix-date-wrap">
                            <div class="matrix-date-main">${fmtShortDate(d)}</div>
                            <div class="matrix-date-day">${fmtDay(d)}</div>
                            <div class="matrix-date-badges">${mark}</div>
                            <div class="matrix-date-actions">
                                <button class="btn btn-outline-success btn-approve-date" data-date="${d}" ${closedDisabledAttr()}>Apv</button>
                                <button class="btn btn-outline-warning btn-unapprove-date" data-date="${d}" ${closedDisabledAttr()}>Un</button>
                            </div>
                        </div>
                    </th>`;
                }).join('');
                $thead.html(`<tr><th class="matrix-no-head">No</th><th class="sticky-col">Karyawan</th>${headerCells}</tr>`);

                const groups = {};
                (reviewRows || []).forEach((r) => {
                    const key = String(r.karyawan_id);
                    if (!groups[key]) {
                        const shiftCode = String(r.applied_shift_code || '').trim();
                        const shiftName = String(r.applied_shift_name || '').trim();
                        const shiftTime = String(r.applied_shift_time || '').trim();
                        const shiftParts = [shiftCode, shiftName].filter(Boolean).join(' - ');
                        groups[key] = {
                            karyawan_id: r.karyawan_id,
                            employee_code: r.employee_code,
                            finger_id: r.finger_id,
                            employee_name: r.employee_name,
                            applied_shift_label: shiftParts,
                            applied_shift_time: shiftTime,
                            byDate: {}
                        };
                    }
                    groups[key].byDate[r.work_date] = r;
                });

                const ordered = Object.values(groups).sort((a, b) => {
                    const aKey = `${getEmpCode(a)} ${a.employee_name || ''}`.toLowerCase();
                    const bKey = `${getEmpCode(b)} ${b.employee_name || ''}`.toLowerCase();
                    return aKey.localeCompare(bKey);
                });
                // Selalu tampilkan semua kolom tanggal agar jam tetap terlihat walaupun sudah terlaksana.
                const visibleDates = dates;
                lastVisibleDates = visibleDates;
                const keyword = (matrixEmployeeKeyword || '').trim().toLowerCase();
                const isRowPending = (emp) => visibleDates.some((d) => {
                    const cell = emp.byDate[d];
                    return cell && cell.id && !cell.is_approved && cell.attendance_tag !== 'leave_approved';
                });
                const isRowMissing = (emp) => visibleDates.some((d) => {
                    const cell = emp.byDate[d];
                    const status = String(cell?.effective_status || cell?.status || '').toLowerCase();
                    return status === 'missing_in' || status === 'missing_out';
                });
                const isRowNeedsSpl = (emp) => visibleDates.some((d) => {
                    const cell = emp.byDate[d];
                    return Boolean(
                        cell?.missing_spl_overtime ||
                        cell?.needs_extend_spl ||
                        cell?.needs_no_rest_normal_included ||
                        cell?.needs_no_rest_skip_break
                    );
                });
                let filteredOrdered = keyword
                    ? ordered.filter((emp) => `${getEmpCode(emp)} ${emp.employee_code || ''} ${emp.employee_name || ''}`.toLowerCase().includes(keyword))
                    : ordered;
                if (showPendingOnly) {
                    filteredOrdered = filteredOrdered.filter(isRowPending);
                }
                if (showMissingOnly) {
                    filteredOrdered = filteredOrdered.filter(isRowMissing);
                }
                if (showNeedsSplOnly) {
                    filteredOrdered = filteredOrdered.filter(isRowNeedsSpl);
                }
                lastMatrixEmployees = filteredOrdered;

                if (!filteredOrdered.length) {
                    const emptyText = showMissingOnly
                        ? 'Tidak ada karyawan dengan status Missing pada filter aktif.'
                        : (showNeedsSplOnly
                            ? 'Tidak ada karyawan dengan penanda Butuh SPL pada filter aktif.'
                            : 'Belum ada hasil review attendance.');
                    $tbody.html(`<tr><td colspan="${dates.length + 2}" class="text-center text-muted">${emptyText}</td></tr>`);
                    return;
                }

                const approvalStatsByDate = {};
                visibleDates.forEach((d) => {
                    const rowsForDate = filteredOrdered
                        .map((emp) => emp.byDate[d])
                        .filter((cell) => !!cell);
                    const approvableRows = rowsForDate.filter((cell) => (cell.attendance_tag || '') !== 'leave_approved');
                    const approvedCount = approvableRows.filter((cell) => !!cell.is_approved).length;
                    approvalStatsByDate[d] = {
                        total: approvableRows.length,
                        approved: approvedCount,
                        allApproved: approvableRows.length > 0 && approvedCount >= approvableRows.length,
                    };
                });

                const headerCellsVisible = visibleDates
                    .map((d) => {
                        const dateMeta = getCalendarMarkInfo(d);
                        const stat = approvalStatsByDate[d] || { total: 0, approved: 0, allApproved: true };
                        const pendingCount = Math.max(0, Number(stat.total || 0) - Number(stat.approved || 0));
                        const isPending = Number(stat.total || 0) > 0 && !stat.allApproved;
                        const isFutureDate = d > new Date().toISOString().slice(0, 10);
                        const headClass = `matrix-date-head${isPending ? ' pending-approve' : ''}${isFutureDate ? ' matrix-date-future' : ''}`;
                        const tooltip = isPending
                            ? `Belum semua approve. Approved ${stat.approved}/${stat.total}, Pending ${pendingCount}`
                            : (Number(stat.total || 0) > 0
                                ? `Semua sudah approve (${stat.approved}/${stat.total})`
                                : 'Belum ada item review pada tanggal ini');
                        const pendingMark = isPending
                            ? `<span class="badge text-bg-warning text-dark">Pending ${pendingCount}/${stat.total}</span>`
                            : '';
                        let mark = '';
                        if (dateMeta) {
                            mark = `<span class="badge ${dateMeta.badgeClass}" title="${escapeHtml(dateMeta.title)}">${escapeHtml(dateMeta.label)}</span>`;
                        }
                        return `<th class="${headClass}" title="${tooltip}">
                            <div class="matrix-date-wrap">
                                <div class="matrix-date-main">${fmtShortDate(d)}</div>
                                <div class="matrix-date-day">${fmtDay(d)}</div>
                                <div class="matrix-date-badges">${mark}${pendingMark}</div>
                                <div class="matrix-date-actions">
                                    <button class="btn btn-outline-success btn-approve-date" data-date="${d}">Apv</button>
                                    <button class="btn btn-outline-warning btn-unapprove-date" data-date="${d}">Un</button>
                                </div>
                            </div>
                        </th>`;
                    })
                    .join('');
                $thead.html(`<tr><th class="matrix-no-head">No</th><th class="sticky-col">Karyawan</th>${headerCellsVisible}</tr>`);

                const rowsHtml = filteredOrdered.map((emp, idx) => {
                    const safeEmployeeCode = escapeHtml(getEmpDisplayCode(emp));
                    const safeEmployeeName = escapeHtml(emp.employee_name || '-');
                    const safeShiftLabel = escapeHtml(emp.applied_shift_label || '');
                    const safeShiftTime = escapeHtml(emp.applied_shift_time || '');
                    const shiftInfo = safeShiftLabel
                        ? `<div class="mt-1 text-success-emphasis"><small>Profil: ${safeShiftLabel}${safeShiftTime ? ` (${safeShiftTime})` : ''}</small></div>`
                        : '';
                    const missingSplCount = visibleDates.reduce((acc, d) => {
                        const c = emp.byDate[d];
                        return acc + (c && c.missing_spl_overtime ? 1 : 0);
                    }, 0);
                    const extendSplCount = visibleDates.reduce((acc, d) => {
                        const c = emp.byDate[d];
                        return acc + (c && c.needs_extend_spl ? 1 : 0);
                    }, 0);
                    const suggestShiftIcon = `<button
                        class="btn btn-xs btn-outline-warning btn-suggest-shift ms-1"
                        data-karyawan-id="${emp.karyawan_id || ''}"
                        data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                        data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                        ${closedDisabledAttr()}
                        title="Suggest ganti profil jam kerja dari rata-rata jam masuk">
                        <i class="fas fa-wand-magic-sparkles"></i>
                    </button>`;
                    const missingSplBadgeRow = missingSplCount > 0
                        ? `<div class="mt-1 d-flex align-items-center flex-wrap gap-1"><span class="badge text-bg-danger" title="Ada overtime tanpa SPL (draft/submitted/in_review/approved)">${missingSplCount}x OT tanpa SPL</span>${extendSplCount > 0 ? '' : suggestShiftIcon}</div>`
                        : '';
                    const extendSplBadgeRow = extendSplCount > 0
                        ? `<div class="mt-1 d-flex align-items-center flex-wrap gap-1"><span class="badge text-bg-warning text-dark" title="Ada SPL yang masih kurang dan butuh extend">${extendSplCount}x Butuh Extend SPL</span>${suggestShiftIcon}</div>`
                        : '';
                    const hasAutoOt = Object.values(emp.byDate || {}).some((c) => Boolean(c?.overtime_auto_without_spl));
                    const hasPending = isRowPending(emp);
                    const rowWarningTitle = [
                        hasPending ? 'Ada item pending approval' : '',
                        missingSplCount > 0 ? `${missingSplCount} OT tanpa SPL` : '',
                        extendSplCount > 0 ? `${extendSplCount} butuh extend SPL` : '',
                    ].filter(Boolean).join(' | ');
                    const rowWarningIcon = rowWarningTitle
                        ? `<span class="matrix-row-warning-icon" data-karyawan-id="${emp.karyawan_id || ''}" title="${escapeHtml(rowWarningTitle)}. Klik untuk fokus item action."><i class="fas fa-triangle-exclamation"></i></span>`
                        : '';
                    const pendingUserCount = visibleDates.reduce((acc, d) => {
                        const c = emp.byDate[d];
                        return acc + (c && c.id && !c.is_approved && c.attendance_tag !== 'leave_approved' ? 1 : 0);
                    }, 0);
                    const detailParams = new URLSearchParams({
                        profil_bulan_id: String($('#profilBulanId').val() || ''),
                        karyawan_id: String(emp.karyawan_id || ''),
                        date_from: String($('#filterDateFrom').val() || ''),
                        date_to: String($('#filterDateTo').val() || '')
                    });
                    const detailUrl = `{{ route('attendance_review_v2.calculations.detail') }}?${detailParams.toString()}`;
                    const noCol = `<td class="text-center">${idx + 1}</td>`;
                    const headCol = `<td class="sticky-col">
                        <div class="matrix-emp-code matrix-emp-code-pick" data-karyawan-id="${emp.karyawan_id || ''}" data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}" data-karyawan-name="${escapeHtml(emp.employee_name || '')}" title="Double-click untuk tambah ke Search / Filter User">${safeEmployeeCode}</div>
                        ${(!String(emp?.finger_id ?? '').trim() && looksLikeKtpNik(emp?.employee_code))
                            ? `<div class="small text-muted">EMP: ${escapeHtml(emp?.employee_code || '-')}</div>`
                            : ''}
                        <div class="matrix-emp-toolbar" role="group" aria-label="Aksi karyawan">
                            <button
                                class="btn btn-primary btn-pick-user"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                title="Klik untuk isi filter user ini">
                                <i class="fas fa-search me-1"></i>Search
                            </button>
                            ${!hasAutoOt ? `
                            <button
                                class="btn btn-danger btn-bulk-spl-shortcut"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                ${closedDisabledAttr()}
                                title="Buat SPL otomatis untuk rentang tanggal terfilter">
                                <i class="fas fa-file-signature me-1"></i>SPL
                            </button>` : ''}
                            ${hasAutoOt ? `
                            <button
                                class="btn btn-danger btn-auto-ot-holiday-spl"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                ${closedDisabledAttr()}
                                title="Buat SPL non-workday dari jam actual untuk karyawan AUTO OT">
                                <i class="fas fa-calendar-plus me-1"></i>SPL
                            </button>` : ''}
                            <button
                                class="btn btn-success btn-approve-user"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                ${pendingUserCount > 0 && !isSelectedProfilClosed() ? '' : 'disabled'}
                                title="Approve semua item pending untuk user ini pada range aktif">
                                <i class="fas fa-check me-1"></i>Apv${pendingUserCount > 0 ? ` (${pendingUserCount})` : ''}
                            </button>
                            <button
                                class="btn btn-warning text-dark btn-unapprove-user"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                ${closedDisabledAttr()}
                                title="Unapprove semua item approved untuk user ini pada range aktif">
                                <i class="fas fa-rotate-left me-1"></i>UnApv
                            </button>
                            <a class="btn btn-dark btn-detail-hours" href="${detailUrl}" target="_blank" title="Cek detail rincian jam karyawan ini">
                                <i class="fas fa-clock me-1"></i>Cek Detail Rincian Jam
                            </a><button class="btn btn-info text-dark btn-view-employee-schedule" data-karyawan-id="${emp.karyawan_id || ''}" title="Lihat jadwal periode aktif"><i class="fas fa-calendar-days me-1"></i>Lihat Jadwal</button>
                        </div>
                        <div class="matrix-emp-name">${safeEmployeeName}${rowWarningIcon}</div>
                        ${missingSplBadgeRow}
                        ${extendSplBadgeRow}
                        ${shiftInfo}
                    </td>`;
                    const dayCols = visibleDates.map((d) => {
                        const cell = emp.byDate[d];
                        if (!cell) {
                            return '<td><div class="matrix-cell status-blank"></div></td>';
                        }
                        const approvalIconBadge = cell.id
                            ? (cell.is_approved
                                ? '<span class="matrix-approval-icon is-approved" title="Approved"><i class="fas fa-check"></i></span>'
                                : (cell.attendance_tag === 'leave_approved'
                                    ? '<span class="matrix-approval-icon is-approved" title="Auto exempt"><i class="fas fa-shield-alt"></i></span>'
                                    : '<span class="matrix-approval-icon is-pending" title="Pending approval"><i class="fas fa-hourglass-half"></i></span>'))
                            : '';
                        if (cell.effective_status === 'contract_not_started' || cell.effective_status === 'contract_ended') {
                            const note = cell.effective_status === 'contract_not_started'
                                ? (cell.contract_start_date ? `Mulai ${fmtDateIdFull(cell.contract_start_date)}` : '')
                                : (cell.contract_end_date ? `s/d ${fmtDateIdFull(cell.contract_end_date)}` : '');
                            const noteHtml = note ? `<div><small class="text-muted">${escapeHtml(note)}</small></div>` : '';
                            const labelHtml = cell.contract_label ? `<div><small>${escapeHtml(cell.contract_label)}</small></div>` : '';
                            const hasContractTime = Boolean(cell.checkin_at || cell.checkout_at || cell.raw_log_in_at || cell.raw_log_out_at);
                            const contractShownIn = cell.checkin_at ? String(cell.checkin_at).slice(11, 16) : (cell.raw_log_in_at ? String(cell.raw_log_in_at).slice(11, 16) : '-');
                            const contractShownOut = cell.checkout_at ? String(cell.checkout_at).slice(11, 16) : (cell.raw_log_out_at ? String(cell.raw_log_out_at).slice(11, 16) : '-');
                            const contractRawIn = cell.raw_log_in_at ? String(cell.raw_log_in_at).slice(11, 16) : '';
                            const contractRawOut = cell.raw_log_out_at ? String(cell.raw_log_out_at).slice(11, 16) : '';
                            const contractRawIo = (contractRawIn || contractRawOut)
                                ? `<div class="matrix-io-raw"><b>asli</b> ${contractRawIn || contractShownIn} / ${contractRawOut || contractShownOut}</div>`
                                : '';
                            const contractTimeHtml = (showContractHours && hasContractTime)
                                ? `<div class="matrix-io">${contractShownIn} / ${contractShownOut}</div>${contractRawIo}`
                                : '';
                            const contractHint = (!showContractHours && hasContractTime)
                                ? '<div><small class="text-warning-emphasis">Ada log. Aktifkan Jam KS untuk tampilkan.</small></div>'
                                : '';
                            const contractCellClass = `matrix-cell status-contract${showContractHours && hasContractTime ? ' contract-with-time' : ''}`;
                            const contractActionButtons = cell.id
                                ? `<div class="btn-group btn-group-sm mt-2 w-100">
                                        <button class="btn btn-xs btn-primary btn-approve" data-id="${cell.id}">Approve</button>
                                        <button class="btn btn-xs btn-warning btn-fc-request" data-review-id="${cell.id}" data-karyawan-id="${cell.karyawan_id || ''}" data-employee="${escapeHtml(`${getEmpCode(emp)} - ${emp.employee_name || '-'}`)}" data-work-date="${cell.work_date || ''}" data-in-time="${contractShownIn}" data-out-time="${contractShownOut}" data-reason="Koreksi kontrak selesai">FC</button>
                                        <button class="btn btn-xs btn-secondary btn-manual-time" data-id="${cell.id}">Edit</button>
                                        <button class="btn btn-xs btn-dark btn-shift-shortcut" data-karyawan-id="${cell.karyawan_id || ''}" data-work-date="${cell.work_date || ''}">Shift</button>
                                    </div>`
                                : '';
                            return `<td><div class="${contractCellClass}">
                                <div class="mb-1">${statusBadge(cell.effective_status, cell)}</div>
                                ${labelHtml}
                                ${noteHtml}
                                ${contractTimeHtml}
                                ${contractHint}
                                ${contractActionButtons}
                            </div></td>`;
                        }
                        if (cell.attendance_tag === 'leave_approved') {
                            const leaveBadge = `<span class="badge text-bg-primary">${cell.attendance_tag_label || 'Leave Approved'}</span>`;
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            const emergencyAction = cell.id
                                ? `<div class="mt-2"><button type="button" class="btn btn-xs btn-outline-danger btn-cancel-emergency-leave" data-id="${cell.id}"><i class="fas fa-exclamation-triangle me-1"></i>Batal Leave</button></div>`
                                : '';
                            return `<td><div class="matrix-cell status-has-time">${approvalIconBadge}${leaveBadge}${note}${emergencyAction}</div></td>`;
                        }

                        const hasTime = Boolean(cell.checkin_at || cell.checkout_at);
                        const isOffShiftCell = String(cell.applied_shift_code || '').toLowerCase().trim() === 'off';
                        if (isOffShiftCell) {
                            return `<td><div class="matrix-cell status-missing_out off-shift">${approvalIconBadge}<span class="badge text-bg-secondary">OFF</span><div><span class="badge text-bg-light text-dark"><i class="fas fa-moon me-1"></i>LIBUR</span></div><div><span class="badge text-bg-dark">Jadwal OFF <b>&times;</b></span></div><div class="matrix-io"><s>00.00 / 00.00</s></div><div class="matrix-io-raw"><b>actual</b> -</div><div class="mt-1 btn-group btn-group-sm"><button type="button" class="btn btn-xs btn-primary">Approve</button><button type="button" class="btn btn-xs btn-danger">Tolak</button><button type="button" class="btn btn-xs btn-warning">FC</button><button type="button" class="btn btn-xs btn-secondary">Edit</button>${shiftShortcutButton(cell, emp)}</div></div></td>`;
                        }
                        const isUnpairedAttempt = cell.status === 'unpaired' && cell.checkin_at && !cell.checkout_at;                        if (!hasTime && (cell.attendance_tag || '').startsWith('overtime_')) {
                            const otBadgeClass = cell.attendance_tag === 'overtime_approved' ? 'badge-spl-purple' : 'text-bg-secondary';
                            const otBadge = `<span class="badge ${otBadgeClass}">${cell.attendance_tag_label || 'SPL'}</span>`;
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            return `<td><div class="matrix-cell status-has-time">${approvalIconBadge}${otBadge}${note}<div class="mt-1">${shiftShortcutButton(cell, emp)}</div></div></td>`;
                        }
                        if (!hasTime && (cell.attendance_tag || '').startsWith('forgetting_clock_')) {
                            const _fcRefId2 = Number(cell.attendance_tag_reference_id || 0);
                            const _fcNoteStr2 = String(cell.attendance_tag_notes || '');
                            const _fcMatch2 = _fcNoteStr2.match(/^(FC-[\d-]+)/);
                            const _fcNo2 = _fcMatch2 ? _fcMatch2[1] : '';
                            const _fcLabel2 = _fcNo2 ? `${escapeHtml(_fcNo2)} <small class="opacity-75">${escapeHtml(cell.attendance_tag_label || 'FC')}</small>` : escapeHtml(cell.attendance_tag_label || 'FC');
                            const _fcClose2 = _fcRefId2 > 0 ? `<button type="button" class="btn-close btn-close-white ms-1 btn-fc-cancel" data-fc-id="${_fcRefId2}" data-fc-no="${escapeHtml(_fcNo2)}" title="Batalkan FC" style="font-size:.55rem;padding:2px 3px;vertical-align:middle;"></button>` : '';
                            const fcBadge = `<div class="d-inline-flex align-items-center"><span class="badge badge-fc-orange">${_fcLabel2}</span>${_fcClose2}</div>`;
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            return `<td><div class="matrix-cell status-has-time">${approvalIconBadge}${fcBadge}${note}<div class="mt-1">${shiftShortcutButton(cell, emp)}</div></div></td>`;
                        }
                        if (!hasTime) {
                            const plannedStartText = String(cell.planned_shift_start || '');
                            const plannedEndText = String(cell.planned_shift_end || '');
                            const nowMatrix = new Date();
                            const todayDate = `${nowMatrix.getFullYear()}-${String(nowMatrix.getMonth() + 1).padStart(2, '0')}-${String(nowMatrix.getDate()).padStart(2, '0')}`;
                            const isFutureDate = d > todayDate;
                            const plannedStart = plannedStartText ? new Date(plannedStartText.replace(' ', 'T')) : null;
                            const isWaitingShift = plannedStart && !Number.isNaN(plannedStart.getTime()) && plannedStart.getTime() > nowMatrix.getTime();
                            if (isWaitingShift) {
                                const planIn = plannedStartText.slice(11, 16) || '-';
                                const planOut = plannedEndText.slice(11, 16) || '-';
                                const isCrossDayPlan = plannedEndText && plannedEndText.slice(0, 10) !== plannedStartText.slice(0, 10);
                                return `<td><div class="matrix-cell status-has-time">${approvalIconBadge}<span class="badge text-bg-info text-dark"><i class="fas fa-calendar-check me-1"></i>Waiting Shift</span><div class="matrix-io">${formatHmDot(planIn)} / ${formatHmDot(planOut)}${isCrossDayPlan ? '<span class="matrix-io-nextday">+1</span>' : ''}</div><div class="matrix-io-raw"><b>actual</b> -</div><div class="mt-1">${shiftShortcutButton(cell, emp)}</div></div></td>`;
                            }
                            if (isFutureDate) {
                                return `<td><div class="matrix-cell matrix-cell-future">${approvalIconBadge}<div class="matrix-io">-</div><div class="mt-1">${shiftShortcutButton(cell, emp)}</div></div></td>`;
                            }
                            const isOffShift = String(cell.applied_shift_code || '').toLowerCase().trim() === 'off';
                            if (isOffShift) {
                                return `<td><div class="matrix-cell status-missing_out off-shift">${approvalIconBadge}<span class="badge text-bg-secondary">OFF</span><div><span class="badge text-bg-light text-dark"><i class="fas fa-moon me-1"></i>LIBUR</span></div><div><span class="badge text-bg-dark">Jadwal OFF <b>&times;</b></span></div><div class="matrix-io"><s>00.00 / 00.00</s></div><div class="matrix-io-raw"><b>actual</b> -</div><div class="mt-1 btn-group btn-group-sm"><button type="button" class="btn btn-xs btn-primary">Approve</button><button type="button" class="btn btn-xs btn-danger">Tolak</button><button type="button" class="btn btn-xs btn-warning">FC</button><button type="button" class="btn btn-xs btn-secondary">Edit</button>${shiftShortcutButton(cell, emp)}</div></div></td>`;
                            }
                            const noLogReasonText = cleanNoLogReason(cell.reason);
                            const noLogReason = noLogReasonText ? `<div><small>${escapeHtml(noLogReasonText)}</small></div>` : '';
                            const noLogActionClass = cell.id && !cell.is_approved ? ' needs-action-cell' : '';
                            const noLogShiftCode = String(cell.applied_shift_code || cell.planned_shift_code || '').trim();
                            const noLogShiftBadge = noLogShiftCode ? `<div class="mt-1"><span class="badge text-bg-dark">Jadwal ${escapeHtml(noLogShiftCode)}</span></div>` : '';
                            const noLogPlanIn = plannedStartText.slice(11, 16) || '';
                            const noLogPlanOut = plannedEndText.slice(11, 16) || '';
                            const noLogPlanTime = noLogPlanIn && noLogPlanOut ? `<div class="matrix-io">${formatHmDot(noLogPlanIn)} / ${formatHmDot(noLogPlanOut)}</div><div class="matrix-io-raw"><b>actual</b> -</div>` : '';
                            return `<td><div class="matrix-cell status-no_log${noLogActionClass}">${approvalIconBadge}<span class="badge text-bg-secondary">No Log</span>${noLogShiftBadge}${noLogPlanTime}${noLogReason}<div class="mt-1">${shiftShortcutButton(cell, emp)}</div></div></td>`;
                        }

                        const actualCrossDate = Boolean(
                            cell.checkin_at &&
                            cell.checkout_at &&
                            cell.checkin_at.slice(0, 10) !== cell.checkout_at.slice(0, 10)
                        );
                        const isOffShift = String(cell.applied_shift_code || '').toLowerCase().trim() === 'off';
                        const isNightShift = Boolean(cell.is_cross_day) && !isOffShift;
                        const isContinuesCarry = String(cell.effective_status || '').toLowerCase() === 'continues_carry';
                        const shownIn = isOffShift ? '00:00' : (cell.checkin_at ? cell.checkin_at.slice(11, 16) : '-');
                        const shownOut = isOffShift ? '00:00' : (cell.checkout_at ? cell.checkout_at.slice(11, 16) : '-');
                        const unpairedLogIn = isUnpairedAttempt && cell.raw_log_in_at ? String(cell.raw_log_in_at).slice(11, 16) : shownIn;
                        const unpairedLogOut = isUnpairedAttempt && cell.raw_log_out_at ? String(cell.raw_log_out_at).slice(11, 16) : shownOut;
                        const displayIn = isUnpairedAttempt ? unpairedLogIn : (actualCrossDate ? roundHmToHour(shownIn) : shownIn);
                        const displayOut = isUnpairedAttempt ? unpairedLogOut : (actualCrossDate ? roundHmToHour(shownOut) : shownOut);
                        const outNextDayBadge = actualCrossDate
                            ? '<span class="matrix-io-nextday" title="Jam pulang tanggal berikutnya">+1</span>'
                            : '';
                        const ioText = isContinuesCarry ? escapeHtml(String(cell.pairing_hint || 'Sisa Cut 1 Day / -')) : (formatHmDot(displayIn) + ' / ' + formatHmDot(displayOut) + outNextDayBadge);
                        // "Jam asli" (dari log mentah). Dipakai untuk melihat overtime yang di-cut ke jam planning.
                        const rawInSrc = cell.raw_log_in_at || cell.suggested_checkin_at || (actualCrossDate ? cell.checkin_at : '');
                        const rawOutSrc = cell.raw_log_out_at || cell.suggested_checkout_at || (actualCrossDate ? cell.checkout_at : '');
                        const rawIn = rawInSrc ? String(rawInSrc).slice(11, 16) : '';
                        const rawOut = rawOutSrc ? String(rawOutSrc).slice(11, 16) : '';
                        const forceShowRaw = Boolean(cell.missing_spl_overtime);
                        const showRaw = !isOffShift && (actualCrossDate || forceShowRaw || (rawIn && rawIn !== shownIn) || (rawOut && rawOut !== shownOut));
                        const rawIo = isOffShift
                            ? '<div class="matrix-io-raw"><b>actual</b> -</div>'
                            : (showRaw
                                ? `<div class="matrix-io-raw"><b>actual</b> ${formatHmDot(rawIn || displayIn)} / ${formatHmDot(rawOut || displayOut)}${actualCrossDate ? ' <span class="text-info fw-bold">(Pulang lintas hari)</span>' : ''}</div>`
                                : '');
                        const finalIoHtml = isOffShift
                            ? '<div class="matrix-io"><s>00.00 / 00.00</s></div>'
                            : (!isUnpairedAttempt && shownIn === '00:00' && shownOut === '00:00' && rawIo
                                ? '<div class="small text-muted">Jam final belum dibentuk</div>'
                                : `<div class="matrix-io">${ioText}</div>`);
                        const isPendingCell = Boolean(cell.id) && !cell.is_approved && cell.attendance_tag !== 'leave_approved';
                        const isHoliday = Boolean(cell.is_holiday);
                        const isSpl = cell.attendance_tag === 'overtime_approved';
                        const holidayVisual = getHolidayVisual(cell, isSpl);
                        const holidayBadge = (isSpl && isHoliday)
                            ? `<div class="mb-1"><span class="badge ${holidayVisual.otBadgeClass}" title="${escapeHtml(holidayVisual.title)} + SPL">${escapeHtml(holidayVisual.otLabel)}</span></div>`
                            : '';
                        const isFcTag2 = (cell.attendance_tag || '').startsWith('forgetting_clock_');
                        const fcRefId2 = isFcTag2 ? Number(cell.attendance_tag_reference_id || 0) : 0;
                        const fcNoteStr2 = String(cell.attendance_tag_notes || '');
                        const fcMatch2 = fcNoteStr2.match(/^(FC-[\d-]+)/);
                        const fcNo2 = fcMatch2 ? fcMatch2[1] : '';
                        const fcLabel2 = isFcTag2 && fcNo2
                            ? `${escapeHtml(fcNo2)}<small class="ms-1 opacity-75">${escapeHtml(cell.attendance_tag_label || 'FC')}</small>`
                            : escapeHtml(cell.attendance_tag_label || cell.attendance_tag);
                        const fcCloseBtn2 = isFcTag2 && fcRefId2 > 0
                            ? `<button type="button" class="btn-close btn-close-white ms-1 btn-fc-cancel" data-fc-id="${fcRefId2}" data-fc-no="${escapeHtml(fcNo2)}" title="Batalkan FC" style="font-size:.55rem;padding:2px 3px;vertical-align:middle;"></button>`
                            : '';
                        const tagBadge = cell.attendance_tag
                            ? `<div class="mb-1 d-inline-flex align-items-center"><span class="badge ${cell.attendance_tag === 'leave_approved' ? 'text-bg-primary' : (cell.attendance_tag === 'overtime_approved' ? 'badge-spl-purple' : (isFcTag2 ? 'badge-fc-orange' : 'text-bg-secondary'))}" title="${cell.attendance_tag_notes || ''}">${fcLabel2}</span>${fcCloseBtn2}</div>`
                            : '';
                        const customScheduleBadge = cell.is_custom_schedule && cell.applied_shift_code
                            ? `<div class="mb-1"><span class="badge text-bg-dark custom-shift-badge" title="Jadwal shifting harian">
                                Jadwal ${escapeHtml(cell.applied_shift_code)}
                                <button type="button"
                                    class="btn-clear-custom-shift"
                                    data-karyawan-id="${cell.karyawan_id || emp.karyawan_id || ''}"
                                    data-work-date="${cell.work_date || d}"
                                    title="Hapus jadwal harian ini">X</button>
                            </span></div>`
                            : '';
                        const autoOtBadge = cell.overtime_auto_without_spl
                            ? `<div class="mb-1"><span class="badge text-bg-info text-dark" title="Workday ini memakai mode OT otomatis tanpa SPL, jadi checkout lembur mengikuti log aktual.">AUTO OT</span></div>`
                            : '';
                        const offlineBadge = cell.offline_pending
                            ? `<div class="mb-1"><span class="badge text-bg-warning text-dark">Offline Pending (${Number(cell.offline_pending_count || 0)})</span></div>`
                            : '';
                        const logAttemptBadge = isUnpairedAttempt
                            ? `<div class="mb-1"><span class="badge text-bg-info text-dark">Log murni</span></div>`
                            : '';
                        const missingSplBadge = cell.missing_spl_overtime
                            ? `<div class="mb-1"><span class="badge text-bg-danger" title="Overtime ${Number(cell.missing_spl_overtime_minutes || 0)} menit tanpa SPL">Butuh SPL</span></div>`
                            : '';
                        const extendSplBadge = cell.needs_extend_spl
                            ? `<div class="mb-1"><span class="badge text-bg-warning text-dark" title="Jam pulang asli melewati batas SPL approved (+${Number(cell.extend_spl_minutes || 0)} menit). Buat Extend SPL jika memang lembur lebih lama.">Butuh Extend SPL</span></div>`
                            : '';
                        const noRestNormalIncludedBadge = cell.needs_no_rest_normal_included
                            ? `<div class="mb-1"><span class="badge text-bg-secondary" title="Window kerja melintasi jam istirahat (+${Number(cell.no_rest_normal_included_minutes || 0)} menit). Buat SPL NoRest-1 agar normal included diterapkan.">Butuh NoRest-1</span></div>`
                            : '';
                        const noRestSkipBreakBadge = cell.needs_no_rest_skip_break
                            ? `<div class="mb-1"><span class="badge text-bg-warning text-dark" title="Window kerja melintasi jam istirahat (+${Number(cell.no_rest_skip_break_minutes || 0)} menit). Buat SPL NoRest-2 agar break tidak dipotong.">Butuh NoRest-2</span></div>`
                            : '';
                        const lockAttr = closedDisabledAttr();
                        const btnApprove = cell.is_approved
                            ? '<span class="badge text-bg-success">OK</span>'
                            : (cell.attendance_tag === 'leave_approved'
                                ? '<span class="badge text-bg-primary">Auto Exempt</span>'
                                : (cell.id ? `<button class="btn btn-xs btn-outline-primary btn-approve" data-id="${cell.id}" ${lockAttr}>Approve</button>` : '<span class="badge text-bg-secondary">-</span>'));
                        const btnRejectHours = cell.can_reject_hours
                            ? `<button class="btn btn-xs btn-outline-danger btn-reject-hours" data-id="${cell.id}" ${lockAttr}>Tolak</button>`
                            : '';
                        const btnRestoreHours = cell.can_restore_hours
                            ? `<button class="btn btn-xs btn-outline-success btn-restore-hours" data-id="${cell.id}" ${lockAttr}>Restore</button>`
                            : '';
                        const btnOfflineApprove = cell.offline_pending
                            ? `<button class="btn btn-xs btn-outline-success btn-offline-approve" data-id="${cell.id}" ${lockAttr}>Apv Of</button>`
                            : '';
                        const btnOfflineReject = cell.offline_pending
                            ? `<button class="btn btn-xs btn-outline-danger btn-offline-reject" data-id="${cell.id}" ${lockAttr}>Rjt Of</button>`
                            : '';
                        const btnManual = cell.id
                            ? `<button class="btn btn-xs btn-outline-secondary btn-manual-time" data-id="${cell.id}" ${lockAttr}>Edit</button>`
                            : '';
                        const btnShift = shiftShortcutButton(cell, emp);
                        // History button intentionally hidden (can still be accessed via API if needed).
                        const btnHistory = '';
                        const fcInTime = (cell.checkin_at || cell.suggested_checkin_at || cell.planned_shift_start || '').slice(11, 16);
                        const fcOutTime = (cell.checkout_at || cell.suggested_checkout_at || cell.planned_shift_end || '').slice(11, 16);
                        const btnFc = cell.id ? `<button type="button" class="btn btn-xs btn-warning btn-fc-request"
                            data-review-id="${cell.id}"
                            data-karyawan-id="${cell.karyawan_id || ''}"
                            data-employee="${escapeHtml(`${getEmpCode(emp)} - ${emp.employee_name || '-'}`)}"
                            data-work-date="${cell.work_date || ''}"
                            data-in-time="${fcInTime}"
                            data-out-time="${fcOutTime}"
                            data-reason="Forgetting clock dari Attendance Review V2"
                            ${lockAttr}>FC</button>` : '';
                        const needsActionBadge = cell.needs_action ? '<span class="badge text-bg-warning text-dark">Action</span>' : '';
                        const offBadge = isOffShift ? '<div class="mb-1"><span class="badge text-bg-secondary"><i class="fas fa-moon me-1"></i>LIBUR</span></div>' : '';
                        const nightBadge = isNightShift ? '<div class="night-badge">Shift Malam</div>' : '';
                        const crossDateBadge = (!isNightShift && actualCrossDate)
                            ? '<div class="mb-1"><span class="badge text-bg-info text-dark" title="Jam pulang melewati tanggal kerja, tetapi shift planning bukan shift malam.">Pulang lintas hari</span></div>'
                            : '';
                        const pairingRole = String(cell.pairing_role || '').trim().toLowerCase();
                        const carryOutTime = cell.raw_log_out_at ? formatHmDot(roundHmToHour(String(cell.raw_log_out_at).slice(11, 16))) : '';
                        const pairingRoleBadge = isContinuesCarry
                            ? `<div class="mb-1"><span class="badge text-bg-info text-dark"><i class="fas fa-clock-rotate-left me-1"></i>Sisa Cut 1 Day</span></div>`
                            : (isNightShift && pairingRole
                                ? `<div class="mb-1"><span class="night-role-badge ${pairingRole === 'anchor' ? 'anchor' : 'paired'}">${pairingRole === 'anchor' ? 'Anchor' : 'Paired'}</span></div>`
                                : '');
                        const pairingBadge = isContinuesCarry
? `<div class="mb-1"><span class="badge text-bg-secondary" title="Sisa jam dari Continues tanggal sebelumnya">Batas ${carryOutTime || '-'} &middot; HK berikutnya</span></div>`
                            : (cell.pairing_hint
                                ? `<div class="mb-1"><span class="badge text-bg-dark" title="Pairing lintas hari">${escapeHtml(cell.pairing_hint)}</span></div>`
                                : '');
                        const nightClass = isNightShift
                            ? (pairingRole === 'anchor'
                                ? ' night-shift night-anchor'
                                : (pairingRole === 'carry'
                                    ? ' night-shift night-carry'
                                    : ' night-shift night-pending-pair'))
                            : '';
                        const statusClassKey = String(cell.effective_status || cell.status || '')
                            .toLowerCase()
                            .replace(/[^a-z0-9_-]/g, '_');
                        const visualStatusClass = ['missing_in', 'missing_out', 'unpaired', 'shift_transition'].includes(statusClassKey)
                            ? ` status-${statusClassKey}`
                            : ' status-has-time';
                        const isManualPendingCell = isPendingCell && String(cell.reason || '').includes('MANUAL_TIME_LOCK::');
                        const needsActionCellClass = (
                            !isOffShift && (isPendingCell ||
                            Boolean(cell.missing_spl_overtime) ||
                            Boolean(cell.needs_extend_spl) ||
                            Boolean(cell.offline_pending) ||
                            Boolean(cell.needs_no_rest_normal_included) ||
                            Boolean(cell.needs_no_rest_skip_break) ||
                            ['missing_in', 'missing_out', 'unpaired', 'shift_transition'].includes(statusClassKey))
                        ) ? ' needs-action-cell' : '';
                        const cellClass = `matrix-cell${visualStatusClass}${nightClass}${isOffShift ? ' off-shift' : ''}${needsActionCellClass}${isManualPendingCell ? ' manual-pending' : ''}`;
                        const rawDisplayStatus = String(cell.effective_status || cell.status || '').toLowerCase();
                        const displayStatus = ['needs_spl', 'needs_extend_spl', 'needs_no_rest'].includes(rawDisplayStatus)
                            ? 'normal'
                            : (cell.effective_status || cell.status);

                        const confPct = Number(cell.confidence_score || 0);
                        const confClass = confPct >= 60 ? 'matrix-conf good' : 'matrix-conf';
                        const confChip = Number.isFinite(confPct)
                            ? `<div class="${confClass}" title="Confidence ${confPct.toFixed(1)}%">${confPct.toFixed(1)}%</div>`
                            : '';
                        return `<td>
                            <div class="${cellClass}">
                                ${confChip}
                                ${approvalIconBadge}
                                <div class="mb-1">${statusBadge(displayStatus, cell)}</div>
                                ${offBadge}
                                ${nightBadge}
                                ${crossDateBadge}
                                ${pairingRoleBadge}
                                ${pairingBadge}
                                ${customScheduleBadge}${holidayBadge}${autoOtBadge}${tagBadge}
                                ${logAttemptBadge}
                                ${offlineBadge}
                                ${missingSplBadge}
                                ${extendSplBadge}
                                ${noRestNormalIncludedBadge}
                                ${noRestSkipBreakBadge}
                                ${finalIoHtml}
                                ${rawIo}
                                <div class="mt-1">${needsActionBadge}</div>
                                <div class="mt-1 btn-group btn-group-sm" role="group" aria-label="Cell actions">
                                    ${btnApprove}${btnRejectHours}${btnRestoreHours}${btnOfflineApprove}${btnOfflineReject}${btnFc}${btnManual}${btnShift}${btnHistory}
                                </div>
                            </div>
                        </td>`;
                    }).join('');

                    const rowClass = hasPending ? 'matrix-row-pending' : '';
                    return `<tr class="${rowClass}" data-karyawan-id="${emp.karyawan_id || ''}">${noCol}${headCol}${dayCols}</tr>`;
                }).join('');

                $tbody.html(rowsHtml);
            };

            const openHistory = (id) => {
                $.getJSON(`{{ url('/attendance-review-v2/reviews') }}/${id}/histories`)
                    .done((resp) => {
                        const rows = resp.data || [];
                        const meta = resp.meta || {};
                        const lookups = meta.lookups || {};
                        $('#historyTitle').text(`History Review - ${meta.employee_code || '-'} ${meta.employee_name || ''} (${meta.work_date || '-'})`);
                        const formatDateId = (dateStr) => {
                            const dt = new Date(`${dateStr}T00:00:00`);
                            if (Number.isNaN(dt.getTime())) return dateStr;
                            return dt.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
                        };
                        const formatDateTimeSmart = (raw) => {
                            const s = String(raw || '').trim();
                            const mDt = s.match(/^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2})/);
                            if (mDt) return `${formatDateId(mDt[1])} ${mDt[2]}`;
                            const mD = s.match(/^(\d{4}-\d{2}-\d{2})$/);
                            if (mD) return formatDateId(mD[1]);
                            return s;
                        };
                        const normalizeVal = (key, v) => {
                            if (v === null || typeof v === 'undefined' || v === '') return '-';
                            if (typeof v === 'boolean') return v ? 'Yes' : 'No';
                            if (typeof v === 'object') return JSON.stringify(v);
                            const raw = String(v);
                            if (['checkin_at', 'checkout_at', 'suggested_checkin_at', 'suggested_checkout_at', 'planned_shift_start', 'planned_shift_end', 'approved_at'].includes(key)) {
                                return formatDateTimeSmart(raw);
                            }
                            if (key === 'work_date') {
                                return formatDateTimeSmart(raw);
                            }
                            if (key === 'status') {
                                return raw.replace(/_/g, ' ');
                            }
                            if (key === 'confidence_score') {
                                return `${raw}%`;
                            }
                            if (key === 'approved_by') {
                                const mapped = lookups?.approved_by?.[raw] || lookups?.approved_by?.[Number(raw)] || '';
                                return mapped ? `${raw} (${mapped})` : raw;
                            }
                            if (key === 'karyawan_id') {
                                const mapped = lookups?.karyawan?.[raw] || lookups?.karyawan?.[Number(raw)] || '';
                                return mapped ? `${raw} (${mapped})` : raw;
                            }
                            if (key === 'profil_bulan_id') {
                                const mapped = lookups?.profil_bulan?.[raw] || lookups?.profil_bulan?.[Number(raw)] || '';
                                return mapped ? `${raw} (${mapped})` : raw;
                            }
                            if (key === 'planned_profil_jam_kerja_id') {
                                const mapped = lookups?.shift?.[raw] || lookups?.shift?.[Number(raw)] || '';
                                return mapped ? `${raw} (${mapped})` : raw;
                            }
                            return raw;
                        };
                        const toActionBadge = (action) => {
                            const raw = String(action || '-').toLowerCase();
                            const map = {
                                approved: ['success', 'Approved'],
                                unapproved: ['secondary', 'Unapproved'],
                                auto_unapproved_on_schedule_change: ['warning', 'Auto Rollback'],
                                rejected_hours_holiday: ['danger', 'Tolak Jam'],
                                restored_hours_holiday: ['info', 'Restore Jam'],
                                manual_time_set: ['primary', 'Koreksi Manual'],
                                reset_to_draft: ['secondary', 'Draft'],
                            };
                            const [cls, label] = map[raw] || ['dark', String(action || '-')];
                            return `<span class="badge text-bg-${cls}">${escapeHtml(label)}</span>`;
                        };
                        const renderDiff = (beforeData, afterData, idx) => {
                            const before = beforeData || {};
                            const after = afterData || {};
                            const orderedKeys = [
                                'status', 'work_date', 'checkin_at', 'checkout_at',
                                'suggested_checkin_at', 'suggested_checkout_at',
                                'planned_shift_start', 'planned_shift_end', 'is_cross_day',
                                'is_approved', 'approved_by', 'approved_at',
                                'confidence_score', 'reason'
                            ];
                            const allKeys = Array.from(new Set([
                                ...orderedKeys,
                                ...Object.keys(before),
                                ...Object.keys(after),
                            ]));
                            const labelMap = {
                                status: 'Status',
                                work_date: 'Tanggal Kerja',
                                checkin_at: 'Check In',
                                checkout_at: 'Check Out',
                                suggested_checkin_at: 'Suggest In',
                                suggested_checkout_at: 'Suggest Out',
                                planned_shift_start: 'Plan In',
                                planned_shift_end: 'Plan Out',
                                is_cross_day: 'Cross Day',
                                is_approved: 'Approved',
                                approved_by: 'Approved By',
                                approved_at: 'Approved At',
                                confidence_score: 'Confidence',
                                reason: 'Reason',
                                planned_profil_jam_kerja_id: 'Profil Shift',
                                 profil_bulan_id: 'Profil Bulan',
                                 karyawan_id: 'Karyawan',
                             };
                            const rows = allKeys.map((key) => {
                                const b = normalizeVal(key, before[key]);
                                const a = normalizeVal(key, after[key]);
                                const changed = b !== a;
                                return `
                                     <tr class="${changed ? 'changed' : ''}">
                                         <td class="field-name">${escapeHtml(labelMap[key] || key)}</td>
                                         <td>${escapeHtml(b)}</td>
                                         <td>${escapeHtml(a)}</td>
                                     </tr>
                                 `;
                            }).join('');

                            // Compact view: only show changed fields (max 6 lines), allow expanding full diff table.
                            const changedItems = allKeys.map((key) => {
                                const b = normalizeVal(key, before[key]);
                                const a = normalizeVal(key, after[key]);
                                if (b === a) return null;
                                return { label: (labelMap[key] || key), before: b, after: a };
                            }).filter(Boolean);

                            const maxLines = 6;
                            const compactLines = (changedItems.length ? changedItems.slice(0, maxLines) : []).map((it) => {
                                return `<div class="diff-line"><span class="diff-field">${escapeHtml(it.label)}</span>: ${escapeHtml(it.before)}<span class="diff-arrow">&rarr;</span>${escapeHtml(it.after)}</div>`;
                            }).join('');

                            const moreCount = Math.max(0, changedItems.length - maxLines);
                            const collapseId = `historyDiff_${idx}`;

                            const compactHtml = changedItems.length
                                ? `
                                    <div class="history-diff-compact">
                                        ${compactLines}
                                        ${moreCount > 0 ? `<div class="text-muted small">+${moreCount} perubahan lain...</div>` : ``}
                                        <div class="history-diff-tools">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#${collapseId}" aria-expanded="false">
                                                Detail
                                            </button>
                                        </div>
                                    </div>
                                `
                                : `<div class="text-muted small">Tidak ada perubahan field.</div>`;

                            const fullHtml = `
                                <div class="collapse mt-2" id="${collapseId}">
                                    <table class="history-mini-table">
                                        <thead>
                                            <tr>
                                                <th>Field</th>
                                                <th>Before</th>
                                                <th>After</th>
                                            </tr>
                                        </thead>
                                        <tbody>${rows}</tbody>
                                    </table>
                                </div>
                            `;

                            return compactHtml + fullHtml;
                        };

                        const bodyHtml = rows.length
                            ? rows.map((r, i) => {
                                return `<tr>
                                    <td>${i + 1}</td>
                                    <td>${r.changed_at || '-'}</td>
                                    <td>${toActionBadge(r.action)}</td>
                                    <td>${escapeHtml(r.changed_by || '-')}</td>
                                    <td>${renderDiff(r.before_data, r.after_data, i)}</td>
                                    <td>${escapeHtml(r.notes || '-')}</td>
                                </tr>`;
                            }).join('')
                            : '<tr><td colspan="6" class="text-center text-muted">Belum ada histori perubahan.</td></tr>';

                        $('#historyTable tbody').html(bodyHtml);
                        historyModal.show();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load histories', 'error'));
            };

            const profilBulanText = (row) => {
                const base = [row?.code || '', row?.name || ''].filter(Boolean).join(' - ');
                const range = row?.start_date && row?.end_date ? ` (${row.start_date} s/d ${row.end_date})` : '';
                return row?.text || `${base}${range}` || '-';
            };

            const cacheProfilBulan = (row) => {
                if (!row || !row.id) return null;
                const normalized = {
                    id: Number(row.id),
                    code: row.code || '',
                    name: row.name || '',
                    period_year: Number(row.period_year || 0),
                    period_month: Number(row.period_month || 0),
                    start_date: row.start_date || '',
                    end_date: row.end_date || '',
                    status: row.status || '',
                    text: profilBulanText(row)
                };
                const list = refs.profil_bulans || [];
                const idx = list.findIndex((p) => Number(p.id || 0) === Number(normalized.id || 0));
                if (idx >= 0) {
                    list[idx] = Object.assign({}, list[idx], normalized);
                } else {
                    list.push(normalized);
                }
                refs.profil_bulans = list;
                return normalized;
            };

            const initProfilBulanSelect = (preferredProfil = null) => {
                const $profil = $('#profilBulanId');
                if ($profil.data('select2')) {
                    $profil.select2('destroy');
                }

                $profil.empty();
                if (preferredProfil && preferredProfil.id) {
                    const cached = cacheProfilBulan(preferredProfil);
                    const option = new Option(profilBulanText(cached), String(cached.id), true, true);
                    $profil.append(option);
                }

                let profilBulanXhr = null;
                $profil.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    dropdownParent: $('body'),
                    placeholder: 'Cari profil bulan...',
                    allowClear: true,
                    dropdownCssClass: 'profil-bulan-dropdown',
                    templateResult: (row) => {
                        if (!row || !row.id) return row?.text || '';
                        const kind = String(row.profile_kind || '').toLowerCase();
                        const badge = kind === 'sub'
                            ? '<span class="badge bg-warning text-dark ms-2">SUB</span>'
                            : '<span class="badge bg-primary ms-2">MAIN</span>';
                        const icon = kind === 'sub' ? '<span class="text-warning me-2">&#x2514;&#x2500;</span>' : '<span class="text-primary me-2 fw-bold">MAIN</span>';
                        return $(`<div class="d-flex align-items-center justify-content-between w-100"><div class="text-wrap">${icon} ${row.text || ''}</div>${badge}</div>`);
                    },
                    templateSelection: (row) => row?.text || row?.name || row?.code || '',
                    ajax: {
                        url: '{{ url('/attendance-review-v2/refs/profil-bulans') }}',
                        dataType: 'json',
                        delay: 450,
                        cache: true,
                        data: (params) => ({
                            q: params.term || '',
                            page: params.page || 1,
                            per_page: 10
                        }),
                        transport: (params, success, failure) => {
                            if (profilBulanXhr && profilBulanXhr.readyState !== 4) {
                                profilBulanXhr.abort();
                            }
                            profilBulanXhr = $.ajax(params);
                            profilBulanXhr.then(success);
                            profilBulanXhr.fail((xhr) => {
                                if (xhr.statusText !== 'abort') failure(xhr);
                            });
                            return profilBulanXhr;
                        },
                        processResults: (resp, params) => {
                            params.page = params.page || 1;
                            const rows = resp.results || resp.data || [];
                            rows.forEach(cacheProfilBulan);
                            return {
                                results: rows.map((row) => ({
                                    ...row,
                                    id: String(row.id),
                                    text: profilBulanText(row)
                                })),
                                pagination: resp.pagination || { more: false }
                            };
                        }
                    }
                });

                $profil.off('select2:select.profilBulan').on('select2:select.profilBulan', function (e) {
                    cacheProfilBulan(e.params?.data || null);
                });
                $profil
                    .off('select2:open.profilBulanPerf select2:close.profilBulanPerf')
                    .on('select2:open.profilBulanPerf', stopQueueHealthPolling)
                    .on('select2:close.profilBulanPerf', startQueueHealthPolling);
            };

            const selectedKaryawanIds = () => {
                if (forcedKaryawanId) return [String(forcedKaryawanId)];
                const selected = ($('#filterKaryawanId').val() || [])
                    .map((id) => String(id || '').trim())
                    .filter((id) => id !== '');
                const allIds = (refs.karyawans || [])
                    .map((row) => String(row.id || '').trim())
                    .filter((id) => id !== '');
                return allIds.length > 0 && selected.length >= allIds.length ? [] : selected;
            };

            const toolSelectedKaryawanIds = () => {
                if (forcedKaryawanId) return [String(forcedKaryawanId)];
                return ($('#filterKaryawanId').val() || [])
                    .map((id) => String(id || '').trim())
                    .filter((id) => id !== '');
            };
            const selectedSingleKaryawanId = () => {
                const ids = selectedKaryawanIds();
                return ids.length === 1 ? ids[0] : '';
            };

            const appendKaryawanFilterParams = (params) => {
                const ids = selectedKaryawanIds();
                if (ids.length === 1) {
                    params.set('karyawan_id', ids[0]);
                } else if (ids.length > 1) {
                    ids.forEach((id) => params.append('karyawan_ids[]', id));
                }
                return params;
            };

            const withKaryawanFilterParams = (params) => {
                const ids = selectedKaryawanIds();
                if (ids.length === 1) {
                    params.karyawan_id = ids[0];
                } else if (ids.length > 1) {
                    params.karyawan_ids = ids;
                } else {
                    params.karyawan_id = '';
                }
                return params;
            };

            const normalizePasteKey = (value) => String(value || '').toLowerCase().replace(/[^a-z0-9]+/g, '');

            const getKaryawanPasteDisplayCode = (row) => {
                const employeeCode = String(row?.employee_code || '').trim();
                const fallbackCode = String(row?.code || '').trim();
                return employeeCode || fallbackCode || '-';
            };

            const getKaryawanPasteLabel = (row) => {
                const primaryCode = getKaryawanPasteDisplayCode(row);
                const fingerId = String(row?.finger_id || '').trim();
                const name = String(row?.name || '').trim() || '-';
                if (fingerId && fingerId !== primaryCode) {
                    return `${primaryCode} - ${name} [Finger: ${fingerId}]`;
                }
                return `${primaryCode} - ${name}`;
            };

            const findKaryawanFromPasteToken = (token) => {
                const raw = String(token || '').trim();
                const compact = normalizePasteKey(raw);
                if (!compact) return null;
                const rawLower = raw.toLowerCase();
                const isNumericLike = /^\d+$/.test(compact);
                return (refs.karyawans || []).find((row) => {
                    const code = String(row.code || '').trim().toLowerCase();
                    const empCode = String(row.employee_code || '').trim().toLowerCase();
                    const finger = String(row.finger_id || '').trim().toLowerCase();
                    const name = String(row.name || '').trim().toLowerCase();
                    const codeCompact = normalizePasteKey(row.code);
                    const empCodeCompact = normalizePasteKey(row.employee_code);
                    const fingerCompact = normalizePasteKey(row.finger_id);
                    const nameCompact = normalizePasteKey(row.name);
                    const exactCodeMatch = (code && rawLower === code)
                        || (codeCompact && compact === codeCompact)
                        || (empCode && rawLower === empCode)
                        || (empCodeCompact && compact === empCodeCompact)
                        || (finger && rawLower === finger)
                        || (fingerCompact && compact === fingerCompact);
                    if (exactCodeMatch) return true;
                    if (isNumericLike) return false;
                    return (name && rawLower === name)
                        || (nameCompact && compact === nameCompact)
                        || (codeCompact && compact.includes(codeCompact))
                        || (empCodeCompact && compact.includes(empCodeCompact))
                        || (fingerCompact && compact.includes(fingerCompact));
                }) || null;
            };

            const applyPastedKaryawanFilter = (text) => {
                const source = String(text || '');
                const tokens = source
                    .split(/\r?\n|\t|;/)
                    .map((part) => part.trim())
                    .filter(Boolean);
                const matches = [];
                const unmatched = [];
                tokens.forEach((token) => {
                    const match = findKaryawanFromPasteToken(token);
                    if (match && match.id) {
                        matches.push(match);
                    } else {
                        unmatched.push(token);
                    }
                });

                const uniqueIds = [...new Set(matches.map((row) => String(row.id)))];
                if (!uniqueIds.length) {
                    Swal.fire('Info', 'Tidak ada kode/nama karyawan yang cocok dari data paste.', 'info');
                    return;
                }

                const existingIds = ($('#filterKaryawanId').val() || []).map((id) => String(id));
                matches.forEach((row) => {
                    const id = String(row.id || '').trim();
                    if (id && !$(`#filterKaryawanId option[value="${id}"]`).length) {
                        $('#filterKaryawanId').append(`<option value="${id}">${escapeHtml(getKaryawanPasteLabel(row))}</option>`);
                    }
                });
                const nextIds = [...new Set(existingIds.concat(uniqueIds))];
                $('#filterKaryawanId').val(nextIds).trigger('change');
                forcedKaryawanId = '';
                currentPage = 1;
                loadReviews();
                refreshCalculationsIfLoaded();

                const message = unmatched.length
                    ? `${uniqueIds.length} user ditambahkan. ${unmatched.length} baris tidak cocok.`
                    : `${uniqueIds.length} user ditambahkan dari paste Excel.`;
                Swal.fire({ icon: 'success', title: 'Filter user terisi', text: message, timer: 1800, showConfirmButton: false });
            };

            const bindKaryawanPasteSearch = () => {
                $(document)
                    .off('paste.attReviewKaryawanPaste')
                    .on('paste.attReviewKaryawanPaste', '.select2-search__field', function (event) {
                        const select2 = $('#filterKaryawanId').data('select2');
                        const target = event.target;
                        const inSelection = select2?.$selection?.find(target).length > 0;
                        const inDropdown = select2?.$dropdown?.find(target).length > 0;
                        if (!inSelection && !inDropdown) return;
                        const clipboardText = event.originalEvent?.clipboardData?.getData('text') || '';
                        if (!clipboardText || !/[\r\n\t;]/.test(clipboardText)) return;
                        event.preventDefault();
                        applyPastedKaryawanFilter(clipboardText);
                    });
            };

            const syncKaryawanFilterClearButton = () => {
                const hasSelected = (($('#filterKaryawanId').val() || []).filter(Boolean).length > 0);
                $('#btnClearKaryawanFilter').toggleClass('d-none', !hasSelected);
            };

            const renderKaryawanFilterOptions = (rows) => {
                const visibleRows = (rows || []).slice(0, 500);
                $('#filterKaryawanId').html(visibleRows.map((r) => `<option value="${r.id}">${escapeHtml(getKaryawanPasteLabel(r))}</option>`).join(''));
                if ($('#filterKaryawanId').data('select2')) {
                    $('#filterKaryawanId').select2('destroy');
                }
                $('#filterKaryawanId').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    dropdownParent: $('body'),
                    placeholder: 'Semua user / paste dari Excel',
                    allowClear: true,
                    closeOnSelect: true
                });
                $('#filterKaryawanId')
                    .off('select2:select.closeAfterPick')
                    .on('select2:select.closeAfterPick', function () {
                        $(this).select2('close');
                    })
                    .off('change.syncClearButton')
                    .on('change.syncClearButton', syncKaryawanFilterClearButton);
                syncKaryawanFilterClearButton();
                bindKaryawanPasteSearch();
            };

            const loadKaryawanFilterForProfile = () => {
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!profilId) {
                    refs.karyawans = [];
                    renderKaryawanFilterOptions([]);
                    return $.Deferred().resolve().promise();
                }
                return $.getJSON('{{ route('attendance_review_v2.refs') }}', {
                    profil_bulan_id: profilId,
                    profile_scope: 'selected'
                })
                    .done((resp) => {
                        refs.karyawans = resp?.data?.karyawans || [];
                        $('#filterKaryawanId').val([]).trigger('change');
                        renderKaryawanFilterOptions(refs.karyawans);
                    });
            };

            const loadRefs = () => {
                return $.getJSON('{{ route('attendance_review_v2.refs') }}').done((resp) => {
                    refs = resp.data || refs;
                    initProfilBulanSelect(null);
                    syncClosedProfileUi();
                    refs.karyawans = [];
                    renderKaryawanFilterOptions([]);
                    const roundingOptions = ['<option value="">- Tanpa Pembulatan -</option>']
                        .concat((refs.roundings || []).map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`));
                    $('#roundingRuleId').html(roundingOptions.join(''));
                });
            };

            const loadSplShortcutRefs = () => {
                if (splShortcutRefsPromise) return splShortcutRefsPromise;
                splShortcutRefsPromise = $.getJSON('{{ route('surat_perintah_lembur.refs') }}')
                    .done((resp) => {
                        splShortcutRefs = resp.data || resp || splShortcutRefs;
                        const flowOptions = (splShortcutRefs.flows || [])
                            .map((row) => `<option value="${row.id}">${escapeHtml(row.code || '-')} - ${escapeHtml(row.name || '-')}</option>`)
                            .join('');
                        $('#bulkSplFlowId').html(flowOptions || '<option value="">- Flow belum tersedia -</option>');
                        $('#autoOtHolidaySplFlowId').html(flowOptions || '<option value="">- Flow belum tersedia -</option>');
                        $('#bulkContinuesFlowId').html(flowOptions || '<option value="">- Flow belum tersedia -</option>');
                        const preferredAutoOtFlowValue = pickPreferredApprovalFlowValue($('#autoOtHolidaySplFlowId'));
                        if (preferredAutoOtFlowValue) {
                            $('#autoOtHolidaySplFlowId').val(preferredAutoOtFlowValue);
                            $('#bulkContinuesFlowId').val(preferredAutoOtFlowValue);
                        }

                        const splTypeOptions = (splShortcutRefs.splTypes || [])
                            .map((row) => `<option value="${row.value}">${escapeHtml(row.label || row.value || '-')}</option>`)
                            .join('');
                        $('#bulkSplType').html(splTypeOptions || '<option value="normal">Normal</option>');
                        $('#autoOtHolidaySplType').html(splTypeOptions || '<option value="normal">Normal</option>');

                        const normalExists = $('#bulkSplType option[value="normal"]').length > 0;
                        if (normalExists) {
                            $('#bulkSplType').val('normal');
                            $('#autoOtHolidaySplType').val('normal');
                        }
                    })
                    .always(() => {
                        splShortcutRefsPromise = null;
                    });

                return splShortcutRefsPromise;
            };

            const getSelectedProfilRange = () => {
                const profilId = Number($('#profilBulanId').val() || 0);
                const selected = (refs.profil_bulans || []).find((p) => Number(p.id || 0) === profilId);
                if (!selected || !selected.start_date || !selected.end_date) {
                    return null;
                }
                return {
                    start: String(selected.start_date),
                    end: String(selected.end_date)
                };
            };

            const clampDateInRange = (val, min, max) => {
                if (!val) return '';
                const v = String(val);
                if (min && v < min) return min;
                if (max && v > max) return max;
                return v;
            };

            const applyDateBoundsFromProfile = (fillDefault = false) => {
                const range = getSelectedProfilRange();
                if (!range) {
                    $('#filterDateFrom').removeAttr('min').removeAttr('max');
                    $('#filterDateTo').removeAttr('min').removeAttr('max');
                    return;
                }

                $('#filterDateFrom').attr('min', range.start).attr('max', range.end);
                $('#filterDateTo').attr('min', range.start).attr('max', range.end);

                let fromVal = $('#filterDateFrom').val() || '';
                let toVal = $('#filterDateTo').val() || '';

                if (fillDefault) {
                    fromVal = range.start;
                    toVal = range.end;
                }

                fromVal = clampDateInRange(fromVal, range.start, range.end);
                toVal = clampDateInRange(toVal, range.start, range.end);

                if (fromVal && toVal && fromVal > toVal) {
                    toVal = fromVal;
                }

                $('#filterDateFrom').val(fromVal);
                $('#filterDateTo').val(toVal);
            };

            const openBulkSplShortcutModal = (karyawanId, karyawanCode, karyawanName) => {
                const range = getSelectedProfilRange();
                $('#bulkSplKaryawanId').val(String(karyawanId || ''));
                $('#bulkSplKaryawanLabel').val([karyawanCode, karyawanName].filter(Boolean).join(' - '));
                $('#bulkSplDateFrom').val($('#filterDateFrom').val() || range?.start || '');
                $('#bulkSplDateTo').val($('#filterDateTo').val() || range?.end || '');
                if (range) {
                    $('#bulkSplDateFrom').attr('min', range.start).attr('max', range.end);
                    $('#bulkSplDateTo').attr('min', range.start).attr('max', range.end);
                }
                $('#bulkSplTargetMode').val('both');
                $('#bulkSplDateMode').val('suggested');
                $('#bulkSplProcessMode').val('draft');
                $('#bulkSplReason').val('SPL otomatis khusus dari Attendance Review V2.');

                showBusySwal('Menyiapkan form SPL...', 'Mengambil flow approval dan tipe SPL.');
                loadSplShortcutRefs()
                    .done(() => {
                        rebuildBulkSplCandidates();
                        hideBusySwal();
                        bulkSplShortcutModal.show();
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load referensi SPL', 'error');
                    });
            };

            const toTimeInput = (value) => {
                const raw = String(value || '').trim();
                if (!raw) return '';
                const match = raw.match(/(\d{1,2}):(\d{2})/);
                if (!match) return '';
                return `${String(match[1]).padStart(2, '0')}:${match[2]}`;
            };

            const addDaysLocal = (dateValue, days) => {
                const date = parseLocalDate(dateValue);
                if (!date) return '';
                date.setDate(date.getDate() + days);
                return formatLocalDate(date);
            };

            const renderBulkContinuesWorkdayCandidates = () => {
                const workDate = String($('#bulkContinuesWorkDate').val() || '').trim();
                const ids = selectedKaryawanIds();
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!workDate || !profilId || !ids.length) {
                    bulkContinuesWorkdayCandidates = [];
                    $('#bulkContinuesWorkdayBody').html('<tr><td colspan="6" class="text-center text-muted">Pilih tanggal dan user di Filter User dahulu.</td></tr>');
                    $('#bulkContinuesSummary').text('Belum ada data.');
                    $('#btnSubmitBulkContinuesWorkday').prop('disabled', true);
                    return;
                }

                $('#bulkContinuesWorkdayBody').html('<tr><td colspan="6" class="text-center text-muted"><span class="spinner-border spinner-border-sm me-1"></span>Mengambil saran log next-day...</td></tr>');
                $('#btnSubmitBulkContinuesWorkday').prop('disabled', true);
                const candidateParams = {
                    profil_bulan_id: profilId,
                    work_date: workDate,
                    profile_scope: $('#attendanceProfileScope').val() || 'all',
                    unapproved_only: $('#bulkContinuesUnapprovedOnly').is(':checked') ? 1 : 0,
                };
                if (ids.length < (refs.karyawans || []).length) {
                    candidateParams.karyawan_ids = ids;
                }
                $.getJSON('{{ route('attendance_review_v2.reviews.bulk_continues_workday_candidates') }}', candidateParams).done((resp) => {
                    bulkContinuesWorkdayCandidates = Array.isArray(resp?.data) ? resp.data : [];
                    const rowsHtml = bulkContinuesWorkdayCandidates.length
                        ? bulkContinuesWorkdayCandidates.map((row, idx) => `
                            <tr data-karyawan-id="${escapeHtml(row.karyawan_id)}">
                                <td class="text-center"><input type="checkbox" class="form-check-input bulk-continues-row-check" checked></td>
                                <td class="text-center">${idx + 1}</td>
                                <td>
                                    <div class="fw-semibold">${escapeHtml(row.code)} - ${escapeHtml(row.name)}</div>
                                    <small class="text-muted">ContinuesNextDay ${escapeHtml(workDate)} ke ${escapeHtml(addDaysLocal(workDate, 1))}</small>
                                </td>
                                <td>
                                    <input type="datetime-local" class="form-control form-control-sm continues-start-time" value="${escapeHtml(row.start_datetime || '')}" required>
                                </td>
                                <td>
                                    <input type="datetime-local" class="form-control form-control-sm continues-end-time" value="${escapeHtml(row.end_datetime || '')}" required>
                                </td>
                                <td><small class="${row.end_time ? 'text-muted' : 'text-danger'}">${escapeHtml(row.note || '-')}</small></td>
                            </tr>
                        `).join('')
                        : '<tr><td colspan="6" class="text-center text-muted">Tidak ada kandidat. Tanggal next-day yang sudah pairing lengkap otomatis disembunyikan.</td></tr>';
                    $('#bulkContinuesWorkdayBody').html(rowsHtml);
                    $('#bulkContinuesCheckAll').prop('checked', true);
                    $('#bulkContinuesSummary').text(bulkContinuesWorkdayCandidates.length ? `${bulkContinuesWorkdayCandidates.length} kandidat next-day siap dicek.` : 'Tidak ada kandidat next-day.');
                    $('#btnSubmitBulkContinuesWorkday').prop('disabled', bulkContinuesWorkdayCandidates.length <= 0);
                }).fail((xhr) => {
                    $('#bulkContinuesWorkdayBody').html('<tr><td colspan="6" class="text-center text-danger">Gagal mengambil saran next-day.</td></tr>');
                    $('#bulkContinuesSummary').text(xhr.responseJSON?.message || 'Gagal load kandidat.');
                });
            };

            const openBulkContinuesWorkdayModal = () => {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }
                if (!String($('#profilBulanId').val() || '').trim()) {
                    Swal.fire('Warning', 'Profil bulan belum dipilih.', 'warning');
                    return;
                }
                if (!selectedKaryawanIds().length) {
                    Swal.fire('Warning', 'Pilih karyawan di Filter User dahulu.', 'warning');
                    return;
                }
                const range = getSelectedProfilRange();
                $('#bulkContinuesWorkDate').val($('#filterDateFrom').val() || range?.start || '');
                if (range) {
                    $('#bulkContinuesWorkDate').attr('min', range.start).attr('max', range.end);
                }
                $('#bulkContinuesProcessMode').val('approve');
                $('#bulkContinuesReason').val('SPL Continues Work Day bulk dari Attendance Review V2.');

                showBusySwal('Menyiapkan Continues Work Day...', 'Mengambil flow approval dan data user terpilih.');
                loadSplShortcutRefs()
                    .done(() => {
                        renderBulkContinuesWorkdayCandidates();
                        hideBusySwal();
                        bulkContinuesWorkdayModal.show();
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load referensi SPL', 'error');
                    });
            };

            const openAutoOtHolidaySplModal = (karyawanId, karyawanCode, karyawanName) => {
                $('#autoOtHolidaySplKaryawanId').val(String(karyawanId || ''));
                $('#autoOtHolidaySplKaryawanLabel').val([karyawanCode, karyawanName].filter(Boolean).join(' - '));
                const selectedEmployeeRows = (reviewRows || [])
                    .filter((row) => Number(row.karyawan_id || 0) === Number(karyawanId || 0))
                    .filter((row) => Boolean(row.overtime_auto_without_spl))
                    .filter((row) => Boolean(row.is_holiday))
                    .map((row) => {
                        const holidayVisual = getHolidayVisual(row, false);
                        const actualIn = row.raw_log_in_at || row.suggested_checkin_at || row.checkin_at || '';
                        const actualOut = row.raw_log_out_at || row.suggested_checkout_at || row.checkout_at || '';
                        const hasAnySpl = String(row.attendance_tag || '').startsWith('overtime_');
                        const existingSplStatus = String(row.attendance_tag_status || '').toLowerCase();
                        const splStatusLabel = row.attendance_tag_label || 'SPL aktif';
                        const existingSplId = Number(row.attendance_tag_reference_id || 0);
                        const hasValidActual = actualIn && actualOut && String(actualOut) > String(actualIn);
                        const canUpdateExistingDraft = hasAnySpl && existingSplId > 0 && existingSplStatus === 'draft';
                        return {
                            date: String(row.work_date || ''),
                            kind: holidayVisual.dayLabel || 'Libur',
                            kind_key: holidayVisual.kind || 'holiday',
                            holiday_name: holidayVisual.title || holidayVisual.dayLabel || 'Libur',
                            actual_in: actualIn,
                            actual_out: actualOut,
                            actual_label: `${formatTimeHm(actualIn)} - ${formatTimeHm(actualOut)}`,
                            spl_label: `${formatTimeHm(actualIn)} - ${formatTimeHm(actualOut)}`,
                            notes: hasAnySpl
                                ? (canUpdateExistingDraft ? `Sudah ada ${splStatusLabel} - bisa diproses ulang` : `Sudah ada ${splStatusLabel}`)
                                : (!actualIn || !actualOut ? 'Jam actual tidak lengkap' : 'Siap diproses'),
                            edit_url: buildSplEditUrl(existingSplId),
                            selectable: hasValidActual && (!hasAnySpl || canUpdateExistingDraft),
                            update_existing: canUpdateExistingDraft,
                        };
                    })
                    .filter((row) => row.date)
                    .sort((a, b) => String(a.date).localeCompare(String(b.date)));

                autoOtHolidayCandidates = selectedEmployeeRows;
                const rowsHtml = selectedEmployeeRows.length
                    ? selectedEmployeeRows.map((row, idx) => `
                        <tr>
                            <td class="text-center">
                                <input type="checkbox" class="form-check-input auto-ot-holiday-date-check"
                                    value="${escapeHtml(row.date)}" ${row.selectable ? 'checked' : 'disabled'} />
                            </td>
                            <td>
                                <div>${escapeHtml(row.date)}</div>
                                <small class="text-muted">${escapeHtml(fmtDay(row.date))}</small>
                            </td>
                            <td>
                                <span class="badge ${row.kind_key === 'weekend' ? 'badge-weekend-ot' : (row.kind_key === 'holiday_special' ? 'badge-holiday-special-ot' : 'badge-holiday-ot')}">${escapeHtml(row.kind)}</span>
                                <div><small class="text-muted">${escapeHtml(row.holiday_name)}</small></div>
                            </td>
                            <td>${escapeHtml(row.actual_label)}</td>
                            <td>${escapeHtml(row.spl_label)}</td>
                            <td>
                                <small class="${row.selectable ? (row.update_existing ? 'text-warning-emphasis' : 'text-muted') : 'text-danger'}">${escapeHtml(row.notes)}</small>
                                ${row.edit_url ? `<div class="mt-1"><a class="btn btn-xs btn-outline-warning" href="${escapeHtml(row.edit_url)}" target="_blank">Edit SPL</a></div>` : ''}
                            </td>
                        </tr>
                    `).join('')
                    : '<tr><td colspan="6" class="text-center text-muted">Tidak ada hari non-workday dengan jam actual pada filter yang aktif.</td></tr>';
                $('#autoOtHolidaySplCandidateBody').html(rowsHtml);
                $('#autoOtHolidaySplCheckAll').prop('checked', true).prop('disabled', !selectedEmployeeRows.some((row) => row.selectable));
                const selectableCount = selectedEmployeeRows.filter((row) => row.selectable).length;
                const updateCount = selectedEmployeeRows.filter((row) => row.selectable && row.update_existing).length;
                const createCount = Math.max(0, selectableCount - updateCount);
                $('#autoOtHolidaySplSummary').text(
                    selectableCount > 0
                        ? `${selectableCount} tanggal siap diproses dari ${selectedEmployeeRows.length} tanggal terdeteksi (${createCount} buat baru, ${updateCount} update draft).`
                        : 'Tidak ada tanggal yang siap diproses.'
                );
                $('#btnSubmitAutoOtHolidaySpl').prop('disabled', selectableCount <= 0);
                $('#autoOtHolidaySplProcessMode').val('approve');
                $('#autoOtHolidaySplReason').val('SPL non-workday khusus AUTO OT dari Attendance Review V2.');

                showBusySwal('Menyiapkan form SPL libur...', 'Mengambil flow approval dan tipe SPL.');
                loadSplShortcutRefs()
                    .done(() => {
                        const preferredAutoOtFlowValue = pickPreferredApprovalFlowValue($('#autoOtHolidaySplFlowId'));
                        if (preferredAutoOtFlowValue) {
                            $('#autoOtHolidaySplFlowId').val(preferredAutoOtFlowValue);
                        }
                        hideBusySwal();
                        autoOtHolidaySplModal.show();
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load referensi SPL', 'error');
                    });
            };

            const loadReviews = () => {
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    reviewRows = [];
                    reviewTable.clear().draw();
                    renderMatrix();
                    return;
                }
                // Visual indicator for slow network/DB loads.
                setSectionLoading('#reviewTableWrap', true, 'Memuat review...');
                setSectionLoading('#matrixContainer', true, 'Memuat matrix...');
                const reqSeq = ++reviewRequestSeq;
                const requestedProfilId = String(profilId);
                const params = withKaryawanFilterParams({
                    profil_bulan_id: profilId,
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || '',
                    page: showNeedsSplOnly ? 1 : currentPage,
                    per_page: showNeedsSplOnly ? 500 : ($('#perPage').val() || 50)
                });
                if (urgencyShadowEnabled) {
                    params.urgency_shadow = 1;
                }
                if (showMissingOnly) {
                    params.status_filter = 'missing';
                }
                $.getJSON('{{ route('attendance_review_v2.reviews.data') }}', params)
                    .done((resp) => {
                        if (reqSeq !== reviewRequestSeq || String($('#profilBulanId').val() || '') !== requestedProfilId) {
                            return;
                        }
                        reviewRows = resp.data || [];
                        if (urgencyShadowEnabled) {
                            reviewRows = reviewRows.map((row) => ({ ...row, checkin_at: row.display_checkin_at || row.checkin_at, checkout_at: row.display_checkout_at || row.checkout_at }));
                        }
                        reviewMeta = resp.meta || { holiday_map: {}, holiday_special_map: {}, workday_map: {} };
                        matrixEmployeeKeyword = '';
                        $('#reviewTable thead .review-filter-input').val('');
                        reviewTable.columns().search('');
                        reviewTable.clear().rows.add(reviewRows).draw();
                        renderMatrix();
                        syncMatrixTopScrollWidth();
                        const paging = reviewMeta.pagination || { page: 1, total_pages: 1, total_employees: 0, per_page: 50 };
                        currentPage = Number(paging.page || 1);
                        const totalPages = Number(paging.total_pages || 1);
                        const totalEmployees = Number(paging.total_employees || 0);
                        const pageInfoText = `Page ${currentPage} / ${Math.max(1, totalPages)} | Users ${paging.total_employees || 0}`;
                        $('#matrixPageInfo').text(pageInfoText);
                        $('#matrixPageInfoTop').text(pageInfoText);
                        $('#btnPrevPage').prop('disabled', currentPage <= 1);
                        $('#btnNextPage').prop('disabled', currentPage >= totalPages);
                        $('#btnPrevPageTop').prop('disabled', currentPage <= 1);
                        $('#btnNextPageTop').prop('disabled', currentPage >= totalPages);
                        syncReviewPageInputs();
                        $('#emptyProfileAlert').toggleClass('d-none', totalEmployees > 0);
                        const missing = !!(reviewMeta && reviewMeta.missing_assignment);
                        const missingEmp = reviewMeta && reviewMeta.missing_assignment_employee ? reviewMeta.missing_assignment_employee : null;
                        if (missing && missingEmp) {
                            const label = [missingEmp.employee_code, missingEmp.employee_name].filter(Boolean).join(' - ') || missingEmp.id;
                            $('#missingAssignmentName').text(label || '-');
                        }
                        $('#missingAssignmentAlert').toggleClass('d-none', !missing);
                        $('#btnRunDetect').prop('disabled', totalEmployees <= 0 || isSelectedProfilClosed());
                        $('#btnRebuildPlanning').prop('disabled', totalEmployees <= 0 || isSelectedProfilClosed());
                        refreshApproveAllButtonState();
                        syncClosedProfileUi();
                        if (totalEmployees <= 0) {
                            resetCalculationView();
                        }
                    })
                    .fail((xhr) => {
                        if (reqSeq !== reviewRequestSeq || String($('#profilBulanId').val() || '') !== requestedProfilId) {
                            return;
                        }
                        reviewRows = [];
                        reviewMeta = { holiday_map: {}, holiday_special_map: {}, workday_map: {}, pagination: { page: 1, total_pages: 1, total_employees: 0 } };
                        reviewTable.clear().draw();
                        renderMatrix();
                        $('#matrixPageInfo').text('Page 1 / 1 | Users 0');
                        $('#btnPrevPage').prop('disabled', true);
                        $('#btnNextPage').prop('disabled', true);
                        $('#matrixPageInfoTop').text('Page 1 / 1 | Users 0');
                        $('#btnPrevPageTop').prop('disabled', true);
                        $('#btnNextPageTop').prop('disabled', true);
                        syncReviewPageInputs();
                        $('#emptyProfileAlert').addClass('d-none');
                        $('#missingAssignmentAlert').addClass('d-none');
                        $('#btnRunDetect').prop('disabled', isSelectedProfilClosed());
                        $('#btnRebuildPlanning').prop('disabled', isSelectedProfilClosed());
                        refreshApproveAllButtonState();
                        syncClosedProfileUi();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load reviews', 'error');
                    })
                    .always(() => {
                        if (reqSeq === reviewRequestSeq && String($('#profilBulanId').val() || '') === requestedProfilId) {
                            setSectionLoading('#reviewTableWrap', false);
                            setSectionLoading('#matrixContainer', false);
                        }
                    });
            };

            const loadShiftShortcutRefs = () => {
                const renderShiftShortcutOptions = () => {
                    const options = [
                        '<option value="">- pilih shift -</option>',
                        ...(shiftShortcutRefs.shifts || []).map((s) => {
                            const label = `${s.code || '-'} - ${s.name || '-'} (${s.start_time || '-'}-${s.end_time || '-'})`;
                            return `<option value="${s.id}">${escapeHtml(label)}</option>`;
                        })
                    ];
                    $('#shiftShortcutShiftId').html(options.join(''));
                };
                if ((shiftShortcutRefs.shifts || []).length) {
                    renderShiftShortcutOptions();
                    return $.Deferred().resolve({ data: shiftShortcutRefs }).promise();
                }
                if (shiftShortcutRefsPromise) return shiftShortcutRefsPromise;
                shiftShortcutRefsPromise = $.getJSON('{{ route('attendance_review_v2.shift_shortcut.refs') }}')
                    .done((resp) => {
                        shiftShortcutRefs = resp.data || { shifts: [] };
                        renderShiftShortcutOptions();
                    })
                    .always(() => { shiftShortcutRefsPromise = null; });
                return shiftShortcutRefsPromise;
            };

            const openShiftShortcutModal = ($btn) => {
                const karyawanId = Number($btn.data('karyawan-id') || 0);
                const workDate = String($btn.data('work-date') || '');
                const employee = String($btn.data('employee') || '-');
                const currentShiftId = String($btn.data('current-shift-id') || '');
                const currentShift = String($btn.data('current-shift') || '-');
                if (!karyawanId || !workDate) {
                    Swal.fire('Error', 'Data karyawan/tanggal tidak lengkap.', 'error');
                    return;
                }
                $('#shiftShortcutKaryawanId').val(karyawanId);
                $('#shiftShortcutWorkDate').val(workDate);
                $('#shiftShortcutMeta').html(`${escapeHtml(employee)} | ${escapeHtml(workDate)}<br>Shift saat ini: <b>${escapeHtml(currentShift || '-')}</b>`);
                $('#shiftShortcutShiftId').html('<option value="">Memuat shift...</option>').prop('disabled', true);
                $('#shiftShortcutNotes').val('Ganti shift dari Attendance Review V2.');
                $('#shiftShortcutClear').prop('checked', false);
                $('#shiftShortcutRebuild').prop('checked', true);
                $('#shiftShortcutDetect').prop('checked', true);
                shiftShortcutModal.show();
                loadShiftShortcutRefs()
                    .done(() => {
                        $('#shiftShortcutShiftId').prop('disabled', false);
                        $('#shiftShortcutShiftId').val(currentShiftId || '');
                    })
                    .fail((xhr) => {
                        shiftShortcutModal.hide();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal mengambil daftar shift.', 'error');
                    });
            };

            const refreshAfterShiftShortcut = (resp, successMessage = 'Shift tersimpan.') => {
                const detectJobId = Number(resp?.jobs?.detect?.job_id || resp?.data?.job_id || 0);
                if (detectJobId > 0) {
                    Swal.fire('Tersimpan', `${successMessage} Run Deteksi sedang diproses. Card akan refresh setelah selesai.`, 'info');
                    pollDetectStatus(detectJobId);
                    processQueueOnce(true);
                    return;
                }
                Swal.fire('Berhasil', successMessage, 'success');
                setTimeout(() => {
                    loadReviews();
                    refreshCalculationsIfLoaded();
                }, 700);
            };

            const submitShiftShortcut = () => {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum ganti shift.', 'warning');
                    return;
                }
                const $btn = $('#btnSaveShiftShortcut');
                const clearOverride = $('#shiftShortcutClear').is(':checked');
                const payload = {
                    profil_bulan_id: $('#profilBulanId').val() || '',
                    karyawan_id: $('#shiftShortcutKaryawanId').val() || '',
                    work_date: $('#shiftShortcutWorkDate').val() || '',
                    profil_jam_kerja_id: $('#shiftShortcutShiftId').val() || '',
                    notes: $('#shiftShortcutNotes').val() || '',
                    clear_override: clearOverride ? 1 : 0,
                    rebuild: $('#shiftShortcutRebuild').is(':checked') ? 1 : 0,
                    detect: $('#shiftShortcutDetect').is(':checked') ? 1 : 0,
                };
                if (!clearOverride && !payload.profil_jam_kerja_id) {
                    Swal.fire('Error', 'Pilih shift baru, atau centang hapus override.', 'error');
                    return;
                }
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
                $.post('{{ route('attendance_review_v2.shift_shortcut.store') }}', payload)
                    .done((resp) => {
                        shiftShortcutModal.hide();
                        refreshAfterShiftShortcut(resp, resp.message || 'Shift tersimpan.');
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan shift.', 'error');
                    })
                    .always(() => {
                        $btn.prop('disabled', false).text('Simpan Shift');
                    });
            };

            const loadCalculations = () => {
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    resetCalculationView();
                    return;
                }
                setSectionLoading('#calcTableWrap', true, 'Memuat perhitungan...');
                // Hindari data profil sebelumnya masih tampil saat profile/filter diganti.
                resetCalculationView();
                if (!calcTable) buildCalcTable([]);
                calcAllowLoad = true;
                calcTable.ajax.reload(() => setSectionLoading('#calcTableWrap', false), true);
            };

            const refreshCalculationsIfLoaded = () => {
                if (calcAllowLoad) loadCalculations();
            };

            $('#btnLoadCalculations').on('click', function () {
                loadCalculations();
            });

            const doApprove = (id) => {
                $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/approve`)
                    .done((resp) => {
                        loadReviews();
                        refreshCalculationsIfLoaded();
                        Swal.fire('Success', resp?.message || 'Approved', 'success');
                    })
                    .fail((xhr) => {
                        const message = xhr.responseJSON?.message
                            || xhr.responseText?.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
                            || `Approve gagal (${xhr.status || 'unknown'})`;
                        Swal.fire('Error', message.slice(0, 500), 'error');
                    });
            };

            const loadManualTimeLogOptions = () => {
                const id = Number(currentManualReviewId || 0);
                const row = (reviewRows || []).find((r) => Number(r.id || 0) === id);
                if (!row) {
                    Swal.fire('Info', 'Data review tidak ditemukan.', 'info');
                    return;
                }
                const $in = $('#manualCheckinTime');
                const $out = $('#manualCheckoutTime');
                $in.html('<option value="">Memuat log...</option>').prop('disabled', true);
                $out.html('<option value="">Memuat log...</option>').prop('disabled', true);
                $('#btnSaveManualTime').prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1"></span>Memuat...');
                manualTimeModal.show();

                $.getJSON(`{{ url('/attendance-review-v2/reviews') }}/${id}/log-options`, {
                    include_next_day: $('#manualTimeMeta').data('auto-next-day') || $('#manualShowNextDayLogs').is(':checked') ? 1 : 0,
                    allow_used_next_day: $('#manualShowNextDayLogs').is(':checked') ? 1 : 0
                })
                    .done((resp) => {
                        const data = Array.isArray(resp?.data) ? resp.data : [];
                        const checkinOptions = Array.isArray(resp?.checkin_options) ? resp.checkin_options : data;
                        const checkoutOptions = Array.isArray(resp?.checkout_options) ? resp.checkout_options : data;
                        const currentIn = (resp?.meta?.current_in || pickTime(row.checkin_at) || '').toString();
                        const currentOut = (resp?.meta?.current_out || pickTime(row.checkout_at) || '').toString();
                        const rowCurrentInValue = String(row.checkin_at || row.suggested_checkin_at || '').slice(0, 16);
                        const rowCurrentOutValue = String(row.checkout_at || row.suggested_checkout_at || '').slice(0, 16);
                        const currentInValue = (resp?.meta?.current_in_datetime || rowCurrentInValue || '').toString();
                        const currentOutValue = (resp?.meta?.current_out_datetime || rowCurrentOutValue || '').toString();
                        const recommendedInValue = (resp?.meta?.recommended_in_datetime || '').toString();
                        const recommendedOutValue = (resp?.meta?.recommended_out_datetime || '').toString();

                        const buildManualLogOptions = ($target, sourceOptions, currentValue, currentTag, selectedValue) => {
                            const seen = new Set();
                            const currentValueText = (currentValue || '').toString().trim();
                            const normalized = sourceOptions
                                .map((opt) => {
                                    const value = (opt?.datetime || '').toString().trim();
                                    if (!value || seen.has(value)) {
                                        return null;
                                    }
                                    seen.add(value);
                                    const labelParts = [fmtDateTimeWithDay(value, row.work_date)];
                                    if (value === selectedValue && value !== currentValueText) {
                                        labelParts.push('rekomendasi');
                                    }
                                    if (opt?.source) {
                                        labelParts.push(opt.source);
                                    }

                                    return {
                                        value,
                                        label: `${labelParts.shift()}${labelParts.length ? ` (${labelParts.join(' - ')})` : ''}`.trim()
                                    };
                                })
                                .filter(Boolean);

                            if (currentValueText && !seen.has(currentValueText)) {
                                normalized.push({
                                    value: currentValueText,
                                    label: `${fmtDateTimeWithDay(currentValueText, row.work_date)} (${currentTag})`
                                });
                            }

                            normalized.sort((a, b) => a.value.localeCompare(b.value));

                            let html = '<option value="">- Pilih Log -</option>';
                            normalized.forEach((opt) => {
                                html += `<option value="${opt.value}">${opt.label}</option>`;
                            });
                            $target.html(html);
                            $target.val(currentValueText || selectedValue || '');
                            $target.prop('disabled', false);
                        };

                        buildManualLogOptions($in, checkinOptions, currentInValue, 'tersimpan', recommendedInValue || currentInValue);
                        buildManualLogOptions($out, checkoutOptions, currentOutValue, 'tersimpan', recommendedOutValue || currentOutValue);
                        const refreshManualTimeSummary = () => {
                            const inValue = ($in.val() || '').toString();
                            const outValue = ($out.val() || '').toString();
                            $('#manualCheckinSummary').text(inValue ? fmtDateTimeWithDay(inValue, row.work_date) : '-');
                            $('#manualCheckoutSummary').text(outValue ? fmtDateTimeWithDay(outValue, row.work_date) : '-');
                            if (!inValue || !outValue) {
                                $('#manualDurationSummary').text('-');
                                $('#manualStatusSummary').text('Belum Lengkap');
                                return;
                            }
                            const inAt = new Date(inValue.replace(' ', 'T'));
                            const outAt = new Date(outValue.replace(' ', 'T'));
                            const minutes = Math.max(0, Math.round((outAt.getTime() - inAt.getTime()) / 60000));
                            $('#manualDurationSummary').text(`${Math.floor(minutes / 60)} Jam ${String(minutes % 60).padStart(2, '0')} Menit`);
                            $('#manualStatusSummary').text('Lengkap (IN & OUT)');
                        };
                        $in.add($out).off('change.manualSummary').on('change.manualSummary', refreshManualTimeSummary);
                        refreshManualTimeSummary();
                        if (!checkoutOptions.length) {
                            $out.prepend('<option value="" selected>- Tidak ada log OUT eksplisit; gunakan FC OUT -</option>');
                        }
                        $('#btnSaveManualTime').prop('disabled', false).text('Simpan Koreksi');
                    })
                    .fail((xhr) => {
                        manualTimeModal.hide();
                        $('#btnSaveManualTime').prop('disabled', false).text('Simpan Koreksi');
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load log options', 'error');
                    });
            };

            const openManualTimeModal = (id) => {
                const row = (reviewRows || []).find((r) => Number(r.id || 0) === Number(id));
                if (!row) {
                    Swal.fire('Info', 'Data review tidak ditemukan.', 'info');
                    return;
                }
                currentManualReviewId = Number(id);
                const meta = `${row.employee_code || '-'} - ${row.employee_name || '-'} | ${row.work_date || '-'}`;
                $('#manualTimeMeta').text(meta);
                $('#manualTimeNotes').val('');
                const status = String(row.effective_status || row.status || '').toLowerCase();
                const currentOutDate = String(row.checkout_at || row.suggested_checkout_at || '').slice(0, 10);
                const shouldAutoShowNextDay = status === 'missing_out'
                    || status === 'shift_transition'
                    || (currentOutDate && currentOutDate !== String(row.work_date || ''));
                $('#manualTimeMeta').data('auto-next-day', shouldAutoShowNextDay ? 1 : 0);
                $('#manualShowNextDayLogs').prop('checked', false);
                loadManualTimeLogOptions();
            };

            const submitManualTime = () => {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum koreksi jam.', 'warning');
                    return;
                }
                const id = Number(currentManualReviewId || 0);
                if (!id) {
                    Swal.fire('Error', 'Review ID tidak valid.', 'error');
                    return;
                }
                const payload = {
                    checkin_time: ($('#manualCheckinTime').val() || '').toString().trim(),
                    checkout_time: ($('#manualCheckoutTime').val() || '').toString().trim(),
                    notes: ($('#manualTimeNotes').val() || '').toString().trim()
                };
                if (payload.checkin_time && payload.checkout_time) {
                    const inAt = new Date(payload.checkin_time.replace(' ', 'T'));
                    const outAt = new Date(payload.checkout_time.replace(' ', 'T'));
                    const minutesGap = Math.abs((outAt.getTime() - inAt.getTime()) / 60000);
                    if (payload.checkin_time.slice(0, 10) === payload.checkout_time.slice(0, 10) && minutesGap <= 10) {
                        Swal.fire('Percobaan ganda', 'Log masuk dan pulang hanya terpaut beberapa menit di hari yang sama. Ini dianggap 2x percobaan presensi, bukan pasangan IN/OUT. Gunakan FC OUT jika jam pulang belum ada.', 'warning');
                        return;
                    }
                }
                $('#btnSaveManualTime').prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
                $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/manual-time`, payload)
                    .done((resp) => {
                        manualTimeModal.hide();
                        loadReviews();
                        refreshCalculationsIfLoaded();
                        Swal.fire('Success', resp?.message || 'Koreksi jam tersimpan.', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Koreksi jam gagal', 'error'))
                    .always(() => {
                        $('#btnSaveManualTime').prop('disabled', false).text('Simpan Koreksi');
                    });
            };

            const timeFromManualValue = (value) => {
                const text = String(value || '').trim();
                if (!text) return '';
                const match = text.match(/(\d{2}):(\d{2})/);
                return match ? `${match[1]}:${match[2]}` : '';
            };

            const buildManualTimeFcPayload = (mode = 'both') => {
                const id = Number(currentManualReviewId || 0);
                const row = (reviewRows || []).find((r) => Number(r.id || 0) === id);
                if (!id || !row) {
                    Swal.fire('Error', 'Data review untuk shortcut FC tidak ditemukan.', 'error');
                    return null;
                }

                const selectedIn = timeFromManualValue($('#manualCheckinTime').val());
                const selectedOut = timeFromManualValue($('#manualCheckoutTime').val());
                const fallbackIn = pickTime(row.checkin_at || row.suggested_checkin_at || row.planned_shift_start);
                const fallbackOut = pickTime(row.checkout_at || row.suggested_checkout_at || row.planned_shift_end);
                const useIn = mode === 'out' ? '' : (selectedIn || fallbackIn);
                const useOut = mode === 'in' ? '' : (selectedOut || fallbackOut);

                if (!useIn && !useOut) {
                    Swal.fire('Warning', 'Pilih minimal satu log IN atau OUT dulu untuk membuat FC.', 'warning');
                    return null;
                }

                const note = ($('#manualTimeNotes').val() || '').toString().trim();
                const label = mode === 'in' ? 'IN' : (mode === 'out' ? 'OUT' : 'IN/OUT');
                return {
                    reviewId: id,
                    karyawanId: Number(row.karyawan_id || 0),
                    employee: `${getEmpCode(row)} - ${row.employee_name || '-'}`,
                    workDate: String(row.work_date || ''),
                    inTime: useIn,
                    outTime: useOut,
                    reason: note || `Forgetting clock ${label} dari Attendance Review V2`,
                };
            };

            const openManualTimeForgettingClockShortcut = (mode = 'both') => {
                if (mode === 'continues') {
                    $('#manualShowNextDayLogs').prop('checked', true).trigger('change');
                    Swal.fire('Mode Continues', 'Log lintas hari ditampilkan. Pilih IN tanggal sebelumnya dan OUT tanggal berikutnya, lalu simpan koreksi.', 'info');
                    return;
                }
                const payload = buildManualTimeFcPayload(mode);
                if (!payload) return;
                if (!payload.karyawanId || !payload.workDate) {
                    Swal.fire('Warning', 'Data karyawan atau tanggal kerja belum lengkap untuk membuat FC.', 'warning');
                    return;
                }
                manualTimeModal.hide();
                setTimeout(() => openForgettingClockQuickForm(payload), 180);
            };

            let fcRefsCache = null;
            const loadForgettingClockRefs = () => {
                if (fcRefsCache) {
                    return $.Deferred().resolve(fcRefsCache).promise();
                }
                return $.getJSON('{{ route('forgetting_clock_request.refs') }}').then((resp) => {
                    fcRefsCache = resp?.data || {};
                    return fcRefsCache;
                });
            };

            const openForgettingClockQuickForm = (payload) => {
                loadForgettingClockRefs()
                    .done((fcRefs) => {
                        const flows = Array.isArray(fcRefs?.flows) ? fcRefs.flows : [];
                        if (!flows.length) {
                            Swal.fire('Error', 'Flow approval Forgetting Clock belum tersedia.', 'error');
                            return;
                        }

                        const flowOptions = flows.map((flow) => {
                            const label = `${flow.code || '-'} - ${flow.name || '-'}`;
                            return `<option value="${flow.id}">${escapeHtml(label)}</option>`;
                        }).join('');
                        const autoApproveHtml = canDirectApproveRequests
                            ? `<div class="mt-2 p-3 rounded" style="background:#ecfdf3;border:1px solid rgba(25,135,84,.25);">
                                    <label class="form-label fw-semibold mb-2">Mode proses</label>
                                    <div class="d-flex flex-wrap gap-2">
                                        <input class="btn-check" type="radio" name="quickFcSubmitMode" id="quickFcModeApprove" value="approve" checked>
                                        <label class="btn btn-sm btn-success" for="quickFcModeApprove">Langsung approve Admin/HRD</label>
                                        <input class="btn-check" type="radio" name="quickFcSubmitMode" id="quickFcModeDraft" value="draft">
                                        <label class="btn btn-sm btn-outline-secondary" for="quickFcModeDraft">Pengajuan dulu</label>
                                    </div>
                                    <div class="small text-muted mt-2">Langsung approve akan membuat FC, submit, approve semua step, lalu masuk ke Attendance Review.</div>
                                </div>`
                            : '';

                        Swal.fire({
                            title: 'Buat Forgetting Clock',
                            width: 680,
                            html: `
                                <div class="text-start">
                                    <div class="mb-2 small text-muted">${escapeHtml(payload.employee || '-')}</div>
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">Flow Approval</label>
                                            <select id="quickFcFlowId" class="form-select">${flowOptions}</select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Tanggal</label>
                                            <input type="date" id="quickFcWorkDate" class="form-control" value="${escapeHtml(payload.workDate || '')}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Usulan IN</label>
                                            <input type="time" id="quickFcInTime" class="form-control" value="${escapeHtml(payload.inTime || '')}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">Usulan OUT</label>
                                            <input type="time" id="quickFcOutTime" class="form-control" value="${escapeHtml(payload.outTime || '')}">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-semibold">Keterangan</label>
                                            <textarea id="quickFcReason" class="form-control" rows="3">${escapeHtml(payload.reason || 'Forgetting clock dari Attendance Review V2')}</textarea>
                                        </div>
                                    </div>
                                    ${autoApproveHtml}
                                </div>
                            `,
                            showCancelButton: true,
                            confirmButtonText: 'Simpan FC',
                            cancelButtonText: 'Batal',
                            focusConfirm: false,
                            preConfirm: () => {
                                const data = {
                                    approval_flow_id: ($('#quickFcFlowId').val() || '').toString().trim(),
                                    work_date: ($('#quickFcWorkDate').val() || '').toString().trim(),
                                    requested_checkin_time: ($('#quickFcInTime').val() || '').toString().trim(),
                                    requested_checkout_time: ($('#quickFcOutTime').val() || '').toString().trim(),
                                    reason: ($('#quickFcReason').val() || '').toString().trim(),
                                    auto_approve: canDirectApproveRequests && $('input[name="quickFcSubmitMode"]:checked').val() === 'approve' ? '1' : '0',
                                };
                                if (!data.approval_flow_id) {
                                    Swal.showValidationMessage('Flow approval wajib dipilih.');
                                    return false;
                                }
                                if (!data.work_date) {
                                    Swal.showValidationMessage('Tanggal kerja wajib diisi.');
                                    return false;
                                }
                                if (!data.requested_checkin_time && !data.requested_checkout_time) {
                                    Swal.showValidationMessage('Minimal isi salah satu jam IN atau OUT.');
                                    return false;
                                }
                                if (!data.reason) {
                                    Swal.showValidationMessage('Keterangan wajib diisi.');
                                    return false;
                                }
                                return data;
                            },
                        }).then((result) => {
                            if (!result.isConfirmed) return;
                            const postData = {
                                ...result.value,
                                karyawan_id: payload.karyawanId,
                                attendance_daily_review_id: payload.reviewId,
                            };
                            $.post('{{ route('forgetting_clock_request.store') }}', postData)
                                .done((resp) => {
                                    loadReviews();
                                    loadCalculations();
                                    Swal.fire('Success', resp?.message || 'Forgetting Clock tersimpan.', 'success');
                                })
                                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan Forgetting Clock', 'error'));
                        });
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load referensi Forgetting Clock', 'error'));
            };

            const readForgettingClockPayload = ($btn) => ({
                reviewId: Number($btn.data('review-id') || 0),
                karyawanId: Number($btn.data('karyawan-id') || 0),
                employee: String($btn.data('employee') || ''),
                workDate: String($btn.data('work-date') || ''),
                inTime: String($btn.data('in-time') || ''),
                outTime: String($btn.data('out-time') || ''),
                reason: String($btn.data('reason') || ''),
            });

            const doApproveByDate = (workDate) => {
                const profilId = Number($('#profilBulanId').val() || 0);
                if (!profilId || !workDate) {
                    Swal.fire('Warning', 'Profil bulan atau tanggal belum valid.', 'warning');
                    return;
                }
                const keyword = (matrixEmployeeKeyword || '').trim().toLowerCase();
                const reviewIds = (reviewRows || [])
                    .filter((r) => r.work_date === workDate && r.id)
                    .filter((r) => !keyword || `${r.employee_code || ''} ${r.employee_name || ''}`.toLowerCase().includes(keyword))
                    .filter((r) => !r.is_approved && r.attendance_tag !== 'leave_approved')
                    .map((r) => Number(r.id))
                    .filter((id) => id > 0);

                if (!reviewIds.length) {
                    Swal.fire('Info', `Tidak ada item yang perlu di-approve untuk ${workDate}.`, 'info');
                    return;
                }

                Swal.fire({
                    title: 'Approve semua item tanggal ini?',
                    text: `${workDate} (${reviewIds.length} item)`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, approve all'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    const $buttons = $('.btn-approve-date').filter(function () {
                        return String($(this).data('date') || '') === String(workDate);
                    });
                    const buttonHtml = $buttons.first().html();
                    $buttons.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Apv...');
                    Swal.fire({
                        title: 'Memproses approve...',
                        html: `<div class="text-start">Tanggal: <b>${escapeHtml(workDate)}</b><br>Item: <b>${reviewIds.length}</b></div>`,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => Swal.showLoading()
                    });
                    $.post(`{{ route('attendance_review_v2.reviews.approve_by_date') }}`, {
                        profil_bulan_id: profilId,
                        work_date: workDate,
                        review_ids: reviewIds
                    })
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Bulk approve selesai', 'success');
                        })
                        .fail((xhr) => {
                            const message = xhr.responseJSON?.message
                                || xhr.responseText?.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
                                || `Bulk approve gagal (${xhr.status || 'unknown'})`;
                            Swal.fire('Error', message.slice(0, 500), 'error');
                        })
                        .always(() => {
                            $buttons.prop('disabled', false).html(buttonHtml || 'Apv');
                        });
                });
            };

            const getVisibleDraftReviewRows = () => {
                const keyword = (matrixEmployeeKeyword || '').trim().toLowerCase();
                return (reviewRows || [])
                    .filter((r) => r.id)
                    .filter((r) => !r.is_approved && r.attendance_tag !== 'leave_approved')
                    .filter((r) => !keyword || `${r.employee_code || ''} ${r.employee_name || ''}`.toLowerCase().includes(keyword));
            };

            const parseLocalDate = (value) => {
                const parts = String(value || '').trim().split('-').map((part) => Number(part));
                if (parts.length !== 3 || parts.some((part) => !Number.isFinite(part))) return null;
                const date = new Date(parts[0], parts[1] - 1, parts[2]);
                if (Number.isNaN(date.getTime())) return null;
                return date;
            };

            const formatLocalDate = (date) => {
                const pad = (number) => String(number).padStart(2, '0');
                return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
            };

            const enumerateLocalDateRange = (dateFrom, dateTo) => {
                const start = parseLocalDate(dateFrom);
                const end = parseLocalDate(dateTo || dateFrom);
                if (!start || !end || start > end) return [];
                const dates = [];
                const cursor = new Date(start.getFullYear(), start.getMonth(), start.getDate());
                while (cursor <= end) {
                    dates.push(formatLocalDate(cursor));
                    cursor.setDate(cursor.getDate() + 1);
                }
                return dates;
            };

            const refreshApproveAllButtonState = () => {
                const $btn = $('#btnApproveAllCheck');
                if (!ENABLE_APPROVE_ALL_CHECK) {
                    $btn.addClass('d-none');
                    return;
                }
                $btn.removeClass('d-none');
                const hasProfile = Number($('#profilBulanId').val() || 0) > 0;
                const totalEmployees = Number((reviewMeta?.pagination || {}).total_employees || 0);
                $btn.prop('disabled', !hasProfile || isSelectedProfilClosed() || totalEmployees <= 0);
            };

            const doApproveAllCheck = async () => {
                if (!ENABLE_APPROVE_ALL_CHECK) return;

                const profilId = Number($('#profilBulanId').val() || 0);
                if (!profilId) {
                    Swal.fire('Warning', 'Profil bulan belum valid.', 'warning');
                    return;
                }
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum approval.', 'warning');
                    return;
                }

                const dateFrom = String(reviewMeta?.date_from || $('#filterDateFrom').val() || '').trim();
                const dateTo = String(reviewMeta?.date_to || $('#filterDateTo').val() || dateFrom).trim();
                const dates = enumerateLocalDateRange(dateFrom, dateTo);
                if (!dates.length) {
                    Swal.fire('Info', 'Range tanggal belum valid untuk diproses.', 'info');
                    return;
                }

                const selectedIds = selectedKaryawanIds();
                const totalEmployees = Number((reviewMeta?.pagination || {}).total_employees || 0);
                const scopeText = selectedIds.length
                    ? `${selectedIds.length} karyawan dari Filter User`
                    : `${totalEmployees || 'semua'} karyawan pada filter aktif`;
                const localSearch = (matrixEmployeeKeyword || '').trim();
                const localSearchNote = localSearch
                    ? '<div class="mt-2 text-danger"><b>Catatan:</b> Search matrix lokal tidak dipakai untuk approve semua halaman. Gunakan Filter User kalau ingin membatasi karyawan.</div>'
                    : '';

                const confirm = await Swal.fire({
                    title: 'Approve All (Cek) aman?',
                    html: `
                        <div class="text-start">
                            Sistem hanya approve review yang aman pada periode <b>${escapeHtml(dateFrom)} s/d ${escapeHtml(dateTo)}</b>.
                            <br>Scope: <b>${escapeHtml(scopeText)}</b>.
                            <br>Tanggal diproses: <b>${dates.length}</b>.
                            <br><span class="text-danger">Item Missing, Butuh SPL, Butuh Extend SPL, shift transition, dan kontrak bermasalah akan di-skip.</span>
                            <br><span class="text-danger">Ini bukan hanya page matrix yang sedang tampil.</span>
                            ${localSearchNote}
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, approve yang aman'
                });
                if (!confirm.isConfirmed) return;

                const $btn = $('#btnApproveAllCheck');
                const originalHtml = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Approving...');

                try {
                    let totalApproved = 0;
                    let totalSkipped = 0;
                    const basePayload = withKaryawanFilterParams({
                        profil_bulan_id: profilId,
                        attendance_profile_scope: ($('#approveProfileScope').val() || 'selected').toString(),
                        safe_only: 1
                    });
                    for (const workDate of dates) {
                        const resp = await $.post(`{{ route('attendance_review_v2.reviews.approve_by_date') }}`, {
                            ...basePayload,
                            work_date: workDate
                        });
                        totalApproved += Number(resp?.data?.approved || 0);
                        totalSkipped += Number(resp?.data?.skipped || 0);
                    }

                    loadReviews();
                    refreshCalculationsIfLoaded();
                    Swal.fire('Success', `Approve cek aman selesai. Approved: ${totalApproved}, Skip: ${totalSkipped}. Skip berarti perlu SPL/FC/manual atau Run ulang.`, 'success');
                } catch (xhr) {
                    const message = xhr?.responseJSON?.message
                        || xhr?.responseText?.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
                        || `Approve all gagal (${xhr?.status || 'unknown'})`;
                    Swal.fire('Error', message.slice(0, 500), 'error');
                } finally {
                    $btn.html(originalHtml);
                    refreshApproveAllButtonState();
                }
            };

            const doUnapproveByDate = (workDate) => {
                const profilId = Number($('#profilBulanId').val() || 0);
                if (!profilId || !workDate) {
                    Swal.fire('Warning', 'Profil bulan atau tanggal belum valid.', 'warning');
                    return;
                }
                const keyword = (matrixEmployeeKeyword || '').trim().toLowerCase();
                const reviewIds = (reviewRows || [])
                    .filter((r) => r.work_date === workDate && r.id)
                    .filter((r) => !keyword || `${r.employee_code || ''} ${r.employee_name || ''}`.toLowerCase().includes(keyword))
                    .filter((r) => !!r.is_approved)
                    .map((r) => Number(r.id))
                    .filter((id) => id > 0);

                if (!reviewIds.length) {
                    Swal.fire('Info', `Tidak ada item approved untuk di-unapprove pada ${workDate}.`, 'info');
                    return;
                }

                Swal.fire({
                    title: 'Unapprove semua item tanggal ini?',
                    text: `${workDate} (${reviewIds.length} item)`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, unapprove all'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('attendance_review_v2.reviews.unapprove_by_date') }}`, {
                        profil_bulan_id: profilId,
                        work_date: workDate,
                        review_ids: reviewIds
                    })
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Bulk unapprove selesai', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk unapprove gagal', 'error'));
                });
            };

            const doApproveByUser = (karyawanId, employeeLabel) => {
                const reviewIds = (reviewRows || [])
                    .filter((r) => Number(r.karyawan_id || 0) === Number(karyawanId || 0))
                    .filter((r) => r.id)
                    .filter((r) => !r.is_approved && r.attendance_tag !== 'leave_approved')
                    .map((r) => Number(r.id))
                    .filter((id) => id > 0);

                if (!reviewIds.length) {
                    Swal.fire('Info', 'Tidak ada item pending untuk user ini pada halaman aktif.', 'info');
                    return;
                }

                Swal.fire({
                    title: 'Approve semua item user ini?',
                    html: `<div class="text-start"><b>${escapeHtml(employeeLabel || '-')}</b><br>Item pending: <b>${reviewIds.length}</b> pada halaman/range aktif.</div>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, approve user'
                }).then((res) => {
                    if (!res.isConfirmed) return;

                    const requests = reviewIds.map((id) => $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/approve`));
                    Promise.all(requests)
                        .then(() => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', `Approve user selesai. Total approved: ${reviewIds.length}.`, 'success');
                        })
                        .catch((xhr) => {
                            Swal.fire('Error', xhr?.responseJSON?.message || 'Approve user gagal', 'error');
                        });
                });
            };

            const doUnapproveByUser = (karyawanId, employeeLabel) => {
                const reviewIds = (reviewRows || [])
                    .filter((r) => Number(r.karyawan_id || 0) === Number(karyawanId || 0))
                    .filter((r) => r.id)
                    .filter((r) => !!r.is_approved)
                    .map((r) => Number(r.id))
                    .filter((id) => id > 0);

                if (!reviewIds.length) {
                    Swal.fire('Info', 'Tidak ada item approved untuk user ini pada halaman aktif.', 'info');
                    return;
                }

                Swal.fire({
                    title: 'Unapprove semua item user ini?',
                    html: `<div class="text-start"><b>${escapeHtml(employeeLabel || '-')}</b><br>Item approved: <b>${reviewIds.length}</b> pada halaman/range aktif.</div>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, unapprove user'
                }).then((res) => {
                    if (!res.isConfirmed) return;

                    const profilId = Number($('#profilBulanId').val() || 0);
                    const workDates = [...new Set(
                        (reviewRows || [])
                            .filter((r) => Number(r.karyawan_id || 0) === Number(karyawanId || 0))
                            .filter((r) => !!r.is_approved)
                            .map((r) => String(r.work_date || '').trim())
                            .filter(Boolean)
                    )];

                    const requests = workDates.map((workDate) => {
                        const idsOnDate = (reviewRows || [])
                            .filter((r) => Number(r.karyawan_id || 0) === Number(karyawanId || 0))
                            .filter((r) => !!r.is_approved && String(r.work_date || '').trim() === workDate)
                            .map((r) => Number(r.id))
                            .filter((id) => id > 0);
                        return $.post(`{{ route('attendance_review_v2.reviews.unapprove_by_date') }}`, {
                            profil_bulan_id: profilId,
                            work_date: workDate,
                            review_ids: idsOnDate
                        });
                    });

                    Promise.all(requests)
                        .then(() => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', `Unapprove user selesai. Total item: ${reviewIds.length}.`, 'success');
                        })
                        .catch((xhr) => {
                            Swal.fire('Error', xhr?.responseJSON?.message || 'Unapprove user gagal', 'error');
                        });
                });
            };

            const doRejectHours = (id) => {
                Swal.fire({
                    title: 'Tolak jam pada hari libur?',
                    text: 'Jam checkin/checkout akan dikosongkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, tolak jam'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/reject-hours`)
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Jam ditolak', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Tolak jam gagal', 'error'));
                });
            };

            const doRestoreHours = (id) => {
                Swal.fire({
                    title: 'Restore jam yang ditolak?',
                    text: 'Jam akan dikembalikan dari data sebelum ditolak.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, restore'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/restore-hours`)
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Jam direstore', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Restore gagal', 'error'));
                });
            };

            const doApproveOfflineLogs = (id) => {
                Swal.fire({
                    title: 'Approve log offline?',
                    text: 'Marker offline pending akan dihapus dan log ditandai valid.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, approve offline'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/offline-approve`)
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Offline log approved', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Approve offline gagal', 'error'));
                });
            };

            const doRejectOfflineLogs = (id) => {
                Swal.fire({
                    title: 'Reject log offline?',
                    text: 'Log offline ditolak dan baris review akan kembali draft/no log.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, reject offline'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/offline-reject`)
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Success', resp?.message || 'Offline log rejected', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Reject offline gagal', 'error'));
                });
            };

            const getBulkSplShortcutCandidates = (karyawanId, targetMode) => {
                const range = getSelectedProfilRange();
                const filterFrom = clampDateInRange(String($('#filterDateFrom').val() || '').trim(), range?.start || '', range?.end || '');
                const filterTo = clampDateInRange(String($('#filterDateTo').val() || '').trim(), range?.start || '', range?.end || '');
                const selectedTargetMode = String(targetMode || 'both').trim().toLowerCase();
                const items = (reviewRows || [])
                    .filter((row) => Number(row.karyawan_id || 0) === Number(karyawanId || 0))
                    .filter((row) => {
                        const date = String(row.work_date || '').trim();
                        if (!date) return false;
                        if (filterFrom && date < filterFrom) return false;
                        if (filterTo && date > filterTo) return false;
                        return true;
                    })
                    .map((row) => {
                        const missing = Boolean(row.missing_spl_overtime);
                        const extend = Boolean(row.needs_extend_spl);
                        const plannedStart = String(row.planned_shift_start || '').trim();
                        const rawInSource = String(row.raw_log_in_at || row.checkin_at || row.suggested_checkin_at || '').trim();
                        const earlyIn = Boolean(plannedStart && rawInSource && rawInSource < plannedStart);
                        const hasAnyLog = Boolean(row.checkin_at || row.checkout_at || row.raw_log_in_at || row.raw_log_out_at || row.suggested_checkin_at || row.suggested_checkout_at);
                        if (selectedTargetMode === 'selected_manual') {
                            if (!hasAnyLog) {
                                return null;
                            }
                            const manualDetail = [];
                            if (row.checkin_at || row.raw_log_in_at) {
                                manualDetail.push(`IN ${formatTimeHm(row.raw_log_in_at || row.checkin_at)}`);
                            }
                            if (row.checkout_at || row.raw_log_out_at || row.suggested_checkout_at) {
                                manualDetail.push(`OUT ${formatTimeHm(row.raw_log_out_at || row.suggested_checkout_at || row.checkout_at)}`);
                            }
                            return {
                                date: String(row.work_date || ''),
                                day: fmtDay(String(row.work_date || '')),
                                modes: ['selected_manual'],
                                targetLabel: 'Tanggal dipilih manual',
                                detail: manualDetail.join(' | ') || 'Gunakan tanggal ini untuk buat SPL manual cepat.',
                            };
                        }
                        const candidateModes = [];
                        if (missing) candidateModes.push('missing');
                        if (extend) candidateModes.push('extend');
                        if (earlyIn) candidateModes.push('early_in');
                        if (!candidateModes.length) {
                            return null;
                        }
                        const allowedByTarget = selectedTargetMode === 'both'
                            ? candidateModes.length > 0
                            : candidateModes.includes(selectedTargetMode);
                        if (!allowedByTarget) {
                            return null;
                        }

                        const detailParts = [];
                        if (missing) {
                            detailParts.push(`Butuh SPL (+${Number(row.missing_spl_overtime_minutes || 0)} menit)`);
                        }
                        if (extend) {
                            detailParts.push(`Butuh Extend SPL (+${Number(row.extend_spl_minutes || 0)} menit)`);
                        }
                        if (earlyIn) {
                            detailParts.push(`Masuk Cepat (${formatTimeHm(rawInSource)} -> ${formatTimeHm(plannedStart)})`);
                        }
                        if (row.needs_no_rest_normal_included) {
                            detailParts.push(`Butuh NoRest-1 (+${Number(row.no_rest_normal_included_minutes || 0)} menit break overlap)`);
                        }
                        if (row.needs_no_rest_skip_break) {
                            detailParts.push(`Butuh NoRest-2 (+${Number(row.no_rest_skip_break_minutes || 0)} menit break overlap)`);
                        }

                        return {
                            date: String(row.work_date || ''),
                            day: fmtDay(String(row.work_date || '')),
                            modes: candidateModes,
                            targetLabel: candidateModes.length > 1
                                ? candidateModes.map((mode) => {
                                    if (mode === 'missing') return 'Butuh SPL';
                                    if (mode === 'extend') return 'Extend SPL';
                                    if (mode === 'early_in') return 'Masuk Cepat';
                                    return mode;
                                }).join(' + ')
                                : (candidateModes[0] === 'missing'
                                    ? 'Butuh SPL'
                                    : (candidateModes[0] === 'extend' ? 'Extend SPL' : 'Masuk Cepat')),
                            detail: detailParts.join(' | '),
                        };
                    })
                    .filter(Boolean)
                    .sort((a, b) => String(a.date).localeCompare(String(b.date)));

                const unique = [];
                const seen = new Set();
                items.forEach((item) => {
                    const key = `${item.date}|${item.modes.join(',')}`;
                    if (seen.has(key)) return;
                    seen.add(key);
                    unique.push(item);
                });
                return unique;
            };

            const renderBulkSplCandidates = () => {
                const mode = String($('#bulkSplDateMode').val() || 'suggested').trim();
                const hasSuggestedMode = mode === 'suggested';
                $('#bulkSplSuggestedDatesSection').toggle(hasSuggestedMode);
                $('#bulkSplDateFrom, #bulkSplDateTo').prop('disabled', hasSuggestedMode);

                if (!hasSuggestedMode) {
                    $('#bulkSplCandidateDateSummary').text('Mode rentang aktif. Sistem akan memproses seluruh tanggal dalam rentang yang dipilih.');
                    return;
                }

                const rowsHtml = bulkSplShortcutCandidates.length
                    ? bulkSplShortcutCandidates.map((item, idx) => {
                        const badgeClass = item.modes.length === 2
                            ? 'text-bg-primary'
                            : (item.modes.includes('missing')
                                ? 'text-bg-danger'
                                : (item.modes.includes('early_in') ? 'text-bg-info text-dark' : 'text-bg-warning text-dark'));
                        return `
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" class="form-check-input bulk-spl-date-check" value="${escapeHtml(item.date)}" checked />
                                </td>
                                <td>
                                    <div>${escapeHtml(item.date)}</div>
                                    <small class="text-muted">${escapeHtml(item.day)}</small>
                                </td>
                                <td><span class="badge ${badgeClass}">${escapeHtml(item.targetLabel)}</span></td>
                                <td><small>${escapeHtml(item.detail || '-')}</small></td>
                            </tr>
                        `;
                    }).join('')
                    : '<tr><td colspan="4" class="text-center text-muted">Tidak ada tanggal kurang yang terdeteksi pada filter aktif.</td></tr>';

                $('#bulkSplCandidateDateBody').html(rowsHtml);
                const selectableCount = bulkSplShortcutCandidates.length;
                $('#bulkSplCheckAllDates').prop('checked', selectableCount > 0).prop('disabled', selectableCount === 0);
                $('#bulkSplCandidateDateSummary').text(
                    selectableCount > 0
                        ? `${selectableCount} tanggal kandidat terdeteksi. Anda bisa centang tanggal yang benar-benar ingin dibuatkan SPL.`
                        : 'Tidak ada kandidat Butuh SPL / Extend SPL / Masuk Cepat pada filter aktif untuk karyawan ini.'
                );
            };

            const rebuildBulkSplCandidates = () => {
                const karyawanId = String($('#bulkSplKaryawanId').val() || '').trim();
                const targetMode = String($('#bulkSplTargetMode').val() || 'both').trim();
                bulkSplShortcutCandidates = getBulkSplShortcutCandidates(karyawanId, targetMode);
                if (!bulkSplShortcutCandidates.length && String($('#bulkSplDateMode').val() || '') === 'suggested') {
                    $('#bulkSplDateMode').val('range');
                }
                renderBulkSplCandidates();
            };

            const syncReviewPageInputs = () => {
                const totalPages = Math.max(1, Number((reviewMeta.pagination || {}).total_pages || 1));
                ['#pageJumpInput', '#pageJumpInputTop'].forEach((selector) => {
                    $(selector).attr('max', totalPages).val(Math.min(Math.max(1, currentPage), totalPages));
                });
                $('#btnGoPage, #btnGoPageTop').prop('disabled', totalPages <= 1);
            };

            const goToReviewPage = (value) => {
                const totalPages = Math.max(1, Number((reviewMeta.pagination || {}).total_pages || 1));
                const targetPage = Math.floor(Number(value || 0));
                if (!Number.isFinite(targetPage) || targetPage < 1) {
                    Swal.fire('Info', 'Masukkan nomor halaman yang valid.', 'info');
                    syncReviewPageInputs();
                    return;
                }
                const normalizedPage = Math.min(targetPage, totalPages);
                if (normalizedPage === currentPage) {
                    syncReviewPageInputs();
                    return;
                }
                currentPage = normalizedPage;
                syncReviewPageInputs();
                loadReviews();
            };

            const isActionCell = (cell) => Boolean(cell && (
                (cell.id && !cell.is_approved && cell.attendance_tag !== 'leave_approved') ||
                cell.missing_spl_overtime ||
                cell.needs_extend_spl ||
                cell.offline_pending ||
                cell.needs_no_rest_normal_included ||
                cell.needs_no_rest_skip_break ||
                ['missing_in', 'missing_out', 'unpaired', 'shift_transition'].includes(String(cell.effective_status || cell.status || '').toLowerCase())
            ));

            const actionReasons = (cell) => {
                const reasons = [];
                if (cell.id && !cell.is_approved && cell.attendance_tag !== 'leave_approved') reasons.push('Pending approval');
                if (cell.missing_spl_overtime) reasons.push(`Butuh SPL${cell.missing_spl_overtime_minutes ? ` +${Number(cell.missing_spl_overtime_minutes)}m` : ''}`);
                if (cell.needs_extend_spl) reasons.push(`Butuh Extend SPL${cell.extend_spl_minutes ? ` +${Number(cell.extend_spl_minutes)}m` : ''}`);
                if (cell.offline_pending) reasons.push('Offline pending');
                if (cell.needs_no_rest_normal_included) reasons.push('Butuh NoRest-1');
                if (cell.needs_no_rest_skip_break) reasons.push('Butuh NoRest-2');
                const status = String(cell.effective_status || cell.status || '').toLowerCase();
                if (['missing_in', 'missing_out', 'unpaired', 'shift_transition'].includes(status)) reasons.push(status.replaceAll('_', ' '));
                return reasons;
            };

            const focusMatrixCell = (karyawanId, workDate) => {
                const $row = $(`#matrixTable tbody tr[data-karyawan-id="${karyawanId}"]`);
                const index = lastVisibleDates.findIndex((date) => String(date) === String(workDate));
                const $cell = index >= 0 ? $row.children('td').eq(index + 2).find('.matrix-cell').first() : $row.find('.needs-action-cell').first();
                $row.addClass('matrix-row-focus');
                $('#matrixTable .action-focus').removeClass('action-focus');
                if ($cell.length) {
                    $cell.addClass('action-focus');
                    const container = document.getElementById('matrixContainer');
                    const cellEl = $cell.get(0);
                    if (container && cellEl) {
                        const containerRect = container.getBoundingClientRect();
                        const cellRect = cellEl.getBoundingClientRect();
                        container.scrollTop += cellRect.top - containerRect.top - 80;
                        container.scrollLeft += cellRect.left - containerRect.left - 280;
                    }
                }
                setTimeout(() => {
                    $row.removeClass('matrix-row-focus');
                    $cell.removeClass('action-focus');
                }, 3600);
            };

            const openEmployeeScheduleModal = (karyawanId) => {
                scheduleQuestionEmployee = lastMatrixEmployees.find((row) => String(row.karyawan_id || '') === String(karyawanId || '')) || null;
                scheduleQuestionDates = [];
                scheduleQuestionSelectedDates = [];
                scheduleQuestionLastDate = null;
                const emp = lastMatrixEmployees.find((row) => String(row.karyawan_id || '') === String(karyawanId || ''));
                if (!emp) return;
                const rows = lastVisibleDates.map((date, index) => {
                    const cell = emp.byDate?.[date] || null;
                    const code = String(cell?.applied_shift_code || '').trim();
                    const name = String(cell?.applied_shift_name || '').trim();
                    const time = String(cell?.applied_shift_time || '').trim();
                    const custom = Boolean(cell?.is_custom_schedule);
                    if (!custom) scheduleQuestionDates.push(date);
                    const label = custom && code ? `${code}${name ? ` - ${name}` : ''}${time ? ` (${time})` : ''}` : 'Belum menjadwalkan';
                    const badge = custom ? '<span class="badge text-bg-success">Terjadwal</span>' : '<span class="badge text-bg-secondary">Kosong</span>';
                    const dateParts = String(date).split('-');
                    const dateLabel = dateParts.length === 3 ? `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}` : date;
                    return `<tr><td class="text-center text-muted">${index + 1}.</td><td class="text-center"><input type="checkbox" class="form-check-input schedule-question-date" data-date="${date}" ${!custom && scheduleQuestionSelectedDates.includes(date) ? 'checked' : ''} ${custom ? 'disabled' : ''}></td><td class="schedule-date">${escapeHtml(dateLabel)}</td><td class="schedule-label">${escapeHtml(label)}</td><td class="text-center">${badge}</td></tr>`;
                }).join('');
                $('#employeeScheduleTitle').text(`Jadwal Periode - ${getEmpCode(emp) || emp.employee_code || '-'} ${emp.employee_name || ''}`);
                const firstEmpty = scheduleQuestionDates.slice().sort()[0];
                if (firstEmpty) {
                    const limit = new Date(firstEmpty + 'T00:00:00');
                    limit.setDate(limit.getDate() + 1);
                    const limitKey = limit.toISOString().slice(0, 10);
                    scheduleQuestionSelectedDates = scheduleQuestionDates.filter((date) => date <= limitKey);
                }
                $('#employeeScheduleBody').html(rows || '<tr><td colspan="5" class="text-center text-muted py-4">Tidak ada tanggal periode.</td></tr>');
                $('#scheduleQuestionSelectAll').prop('checked', scheduleQuestionDates.length > 0 && scheduleQuestionSelectedDates.length === scheduleQuestionDates.length);
                $('.schedule-question-date').each(function () { $(this).prop('checked', scheduleQuestionSelectedDates.includes(String($(this).data('date') || ''))); });
                employeeScheduleModal.show();
            };
            $(document).on('click', '.schedule-question-date', function (event) {
                const date = String($(this).data('date') || '');
                if (event.shiftKey && scheduleQuestionLastDate) {
                    const start = scheduleQuestionDates.indexOf(scheduleQuestionLastDate);
                    const end = scheduleQuestionDates.indexOf(date);
                    if (start >= 0 && end >= 0) {
                        event.preventDefault();
                        const range = scheduleQuestionDates.slice(Math.min(start, end), Math.max(start, end) + 1);
                        if (!event.ctrlKey && !event.metaKey) scheduleQuestionSelectedDates = [];
                        scheduleQuestionSelectedDates = [...new Set([...scheduleQuestionSelectedDates, ...range])];
                        $('.schedule-question-date:not(:disabled)').each(function () {
                            $(this).prop('checked', scheduleQuestionSelectedDates.includes(String($(this).data('date') || '')));
                        });
                    }
                } else {
                    scheduleQuestionSelectedDates = scheduleQuestionSelectedDates.filter((item) => item !== date);
                    if (this.checked) scheduleQuestionSelectedDates.push(date);
                }
                scheduleQuestionLastDate = date;
                $('#scheduleQuestionSelectAll').prop('checked', scheduleQuestionDates.length > 0 && scheduleQuestionSelectedDates.length === scheduleQuestionDates.length);
            });
            $(document).on('change', '.schedule-question-date', function () {
                if (scheduleQuestionLastDate === String($(this).data('date') || '')) return;
            });
            $(document).on('change', '#scheduleQuestionSelectAll', function () {
                scheduleQuestionSelectedDates = this.checked ? [...scheduleQuestionDates] : [];
                $('.schedule-question-date:not(:disabled)').prop('checked', this.checked);
            });
            $('#btnScheduleBulkQuestion').on('click', function () {
                const dates = [...new Set(scheduleQuestionSelectedDates)].sort();
                if (!scheduleQuestionEmployee || !dates.length) {
                    Swal.fire('Tidak ada', 'Tidak ada tanggal kosong untuk diajukan.', 'info');
                    return;
                }
                $('#scheduleBulkQuestionInfo').text(`${dates.length} tanggal kosong akan dikirim ke Android untuk ${scheduleQuestionEmployee.employee_name || '-'}.`);
                scheduleBulkQuestionModal.show();
            });
            $('#scheduleBulkQuestionForm').on('submit', function (event) {
                event.preventDefault();
                const dates = [...new Set(scheduleQuestionSelectedDates)].sort();
                const requests = dates.map((date) => $.ajax({
                    url: @json(route('master_shift_schedule.answer_tasks.bulk')),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}', date_from: date, date_to: date,
                        karyawan_ids: [scheduleQuestionEmployee.karyawan_id],
                        kind: $('#scheduleBulkQuestionKind').val(),
                        question: $('#scheduleBulkQuestionText').val()
                    }
                }));
                $.when.apply($, requests).done(() => {
                    scheduleBulkQuestionModal.hide();
                    Swal.fire('Berhasil', `${dates.length} tanggal kosong dikirim ke Android.`, 'success');
                }).fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Question gagal dikirim.', 'error'));
            });
            const openEmployeeActionModal = (karyawanId) => {
                const emp = lastMatrixEmployees.find((row) => String(row.karyawan_id || '') === String(karyawanId || ''));
                if (!emp) return;
                const code = escapeHtml(getEmpCode(emp) || emp.employee_code || '-');
                const name = escapeHtml(emp.employee_name || '-');
                const rows = lastVisibleDates
                    .map((date) => ({ date, cell: emp.byDate?.[date] || null }))
                    .filter((row) => isActionCell(row.cell));
                $('#employeeActionTitle').text(`Action Karyawan - ${getEmpCode(emp) || emp.employee_code || '-'} ${emp.employee_name || ''}`);
                const body = rows.length ? rows.map(({ date, cell }) => {
                    const planIn = String(cell.planned_shift_start || '').slice(11, 16) || '-';
                    const planOut = String(cell.planned_shift_end || '').slice(11, 16) || '-';
                    const plan = `${planIn} / ${planOut}`;
                    const shiftLabel = String(cell.applied_shift_code || cell.planned_shift_code || cell.planned_shift_name || cell.planned_shift_label || '').trim();
                    const isScheduledShift = (planIn !== '-' && planOut !== '-' && `${planIn}/${planOut}` !== '07:00/16:00')
                        || (shiftLabel !== '' && !/normal|office/i.test(shiftLabel));
                    const planHtml = `${escapeHtml(plan)}${isScheduledShift ? `<br><span class="badge text-bg-info text-dark mt-1">${escapeHtml(shiftLabel || 'Shift')}</span>` : ''}`;
                    const actualIn = String(cell.raw_log_in_at || cell.checkin_at || cell.suggested_checkin_at || '').slice(11, 16) || '-';
                    const actualOut = String(cell.raw_log_out_at || cell.checkout_at || cell.suggested_checkout_at || '').slice(11, 16) || '-';
                    const detailDate = String(cell.work_date || '');
                const nowDetail = new Date();
                const todayDetail = `${nowDetail.getFullYear()}-${String(nowDetail.getMonth() + 1).padStart(2, '0')}-${String(nowDetail.getDate()).padStart(2, '0')}`;
                const hasPlannedDetail = Boolean(cell.planned_shift_start && cell.planned_shift_end);
                const isWaitingDetail = detailDate >= todayDetail && hasPlannedDetail;
                const status = escapeHtml((isWaitingDetail && hasPlannedDetail && !cell.checkin_at && !cell.checkout_at)
                    ? 'Waiting Shift'
                    : String(cell.effective_status || cell.status || '-').replaceAll('_', ' '));
                    const focusBtn = `<button class="btn btn-xs btn-dark btn-focus-matrix-cell" data-karyawan-id="${emp.karyawan_id || ''}" data-work-date="${date}"><i class="fas fa-crosshairs"></i></button>`;
                    const approveBtn = cell.id && !cell.is_approved && cell.attendance_tag !== 'leave_approved'
                        ? `<button class="btn btn-xs btn-primary btn-approve" data-id="${cell.id}" ${closedDisabledAttr()}>Approve</button>` : '';
                    const fcBtn = cell.id ? `<button type="button" class="btn btn-xs btn-warning btn-fc-request"
                        data-review-id="${cell.id}"
                        data-karyawan-id="${cell.karyawan_id || ''}"
                        data-employee="${code} - ${name}"
                        data-work-date="${cell.work_date || date}"
                        data-in-time="${actualIn}"
                        data-out-time="${actualOut}"
                        data-reason="Forgetting clock dari Attendance Review V2" ${closedDisabledAttr()}>FC</button>` : '';
                    const editBtn = cell.id ? `<button class="btn btn-xs btn-secondary btn-manual-time" data-id="${cell.id}" ${closedDisabledAttr()}>Edit</button>` : '';
                    const shiftBtn = shiftShortcutButton(cell, emp);
                    const splBtn = (cell.missing_spl_overtime || cell.needs_extend_spl)
                        ? `<button class="btn btn-xs btn-danger btn-bulk-spl-shortcut"
                            data-karyawan-id="${emp.karyawan_id || ''}"
                            data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                            data-karyawan-name="${escapeHtml(emp.employee_name || '')}" ${closedDisabledAttr()}>SPL</button>` : '';
                    return `<tr>
                        <td>${escapeHtml(fmtShortDate(date))}</td>
                        <td>${escapeHtml(fmtDay(date))}</td>
                        <td>${actionReasons(cell).map((item) => `<span class="badge text-bg-warning text-dark me-1">${escapeHtml(item)}</span>`).join('')}</td>
                        <td>${planHtml}</td>
                        <td>${escapeHtml(`${actualIn} / ${actualOut}`)}</td>
                        <td>${status}</td>
                        <td><div class="btn-group btn-group-sm">${focusBtn}${approveBtn}${fcBtn}${editBtn}${shiftBtn}${splBtn}</div></td>
                    </tr>`;
                }).join('') : '<tr><td colspan="7" class="text-center text-muted">Tidak ada tanggal butuh action.</td></tr>';
                $('#employeeActionBody').html(body);
                employeeActionModal.show();
            };

            $(document).on('click', '.btn-view-employee-schedule', function () {
                openEmployeeScheduleModal($(this).data('karyawan-id'));
            });
            const loadUrgencyRefs = () => {
                if (urgencyRefsLoaded) return $.Deferred().resolve().promise();
                return $.when($.getJSON('{{ route('master_approval.flows.data') }}'), $.getJSON('{{ route('attendance_review_v2.urgency_policy.pic_options') }}')).done((flowResponse, userResponse) => {
                    const flows = (flowResponse[0]?.data || []).filter((row) => String(row.module_key || '') === 'attendance_urgency_policy' && row.is_active);
                    const users = (userResponse[0]?.results || []).filter((row) => row.id);
                    $('#urgencyApprovalFlowId').html('<option value="">- Pilih flow URGENSI -</option>' + flows.map((row) => `<option value="${row.id}">${escapeHtml(row.code || '')} - ${escapeHtml(row.name || '')}</option>`).join(''));
                    $('#urgencyResponsiblePicId').html('<option value="">- PIC HRD / Admin -</option>' + users.map((row) => `<option value="${row.id}">${escapeHtml(row.name || row.email || row.id)}</option>`).join(''));
                    urgencyRefsLoaded = true;
                });
            };
            const paintUrgencyButton = (policy) => {
                const status = String(policy?.status || '').toLowerCase();
                const pending = ['draft', 'submitted', 'in_review'].includes(status);
                const label = status === 'approved' ? 'ON' : pending ? 'MENUNGGU APPROVAL' : status === 'rejected' ? 'DITOLAK' : 'OFF';
                const color = status === 'approved' ? 'success' : pending ? 'warning' : status === 'rejected' ? 'danger' : 'secondary';
                $('#btnUrgencyPolicy').removeClass('btn-success btn-warning btn-danger btn-secondary text-dark').addClass(`btn-${color}`).toggleClass('text-dark', pending);
                $('#urgencyPolicyButtonText').text(`URGENSI: ${label}`);
            };
            const refreshUrgencyButton = () => {
                const profilId = String($('#profilBulanId').val() || '');
                if (!profilId) { paintUrgencyButton(null); return; }
                $('#urgencyPolicyButtonText').text('URGENSI: MEMUAT');
                $.getJSON(urgencyPolicyUrl, { profil_bulan_id: profilId }).done((response) => paintUrgencyButton(response.data || null)).fail(() => paintUrgencyButton(null));
            };
            const loadUrgencyPolicy = () => {
                const profilId = String($('#profilBulanId').val() || '');
                if (!profilId) { toastr.warning('Pilih Profil Bulan terlebih dahulu.'); return; }
                loadUrgencyRefs().always(() => $.getJSON(urgencyPolicyUrl, { profil_bulan_id: profilId }).done((response) => {
                    const policy = response.data;
                    paintUrgencyButton(policy || null);
                    if (policy) {
                        $('#urgencyPolicyStatus').html(`<div class="alert alert-${policy.status === 'approved' ? 'success' : 'info'} mb-0"><b>URGENSI ${escapeHtml(String(policy.status || '').toUpperCase())}</b><br><small>Delay: ${Number(policy.delay_minutes || 0)} menit. Setelah final approval, job berjalan setiap 5 menit.</small></div>`);
                        $('#urgencyPolicyForm, #btnSubmitUrgencyPolicy').toggle(policy.status === 'rejected');
                    } else {
                        $('#urgencyPolicyStatus').html('<div class="text-muted small">Belum ada kebijakan URGENSI untuk profil ini.</div>');
                        $('#urgencyPolicyForm, #btnSubmitUrgencyPolicy').show();
                    }
                    urgencyPolicyModal.show();
                }).fail((xhr) => toastr.error(xhr.responseJSON?.message || 'Gagal membaca status URGENSI.')));
            };
            $('#btnUrgencyPolicy').on('click', loadUrgencyPolicy);
            $('#btnSubmitUrgencyPolicy').on('click', function () {
                const profilId = String($('#profilBulanId').val() || '');
                const payload = { profil_bulan_id: profilId, approval_flow_id: $('#urgencyApprovalFlowId').val(), responsible_pic_id: $('#urgencyResponsiblePicId').val() || null, delay_minutes: $('#urgencyDelayMinutes').val(), reason: $('#urgencyReason').val() };
                if (!payload.approval_flow_id || !String(payload.reason || '').trim()) { toastr.warning('Approval flow dan alasan wajib diisi.'); return; }
                $.post(urgencyPolicyStoreUrl, payload).done((response) => { toastr.success(response.message || 'Kebijakan dikirim.'); paintUrgencyButton(response.data || { status: 'in_review' }); urgencyPolicyModal.hide(); }).fail((xhr) => toastr.error(xhr.responseJSON?.message || 'Gagal mengajukan kebijakan.'));
            });
            $('#profilBulanId').on('change', function () {
                                refreshUrgencyButton();
                forcedKaryawanId = '';
                applyDateBoundsFromProfile(true);
                syncClosedProfileUi();
                reviewRows = [];
                reviewMeta = { holiday_map: {}, holiday_special_map: {}, workday_map: {}, pagination: { page: 1, total_pages: 1, total_employees: 0 } };
                reviewTable.clear().draw();
                renderMatrix();
                resetCalculationView();
                $('#matrixPageInfo, #matrixPageInfoTop').text('Page 1 / 1 | Users 0');
                $('#periodLabel').text('Periode siap. Klik Terapkan untuk memuat data.');
                loadKaryawanFilterForProfile();
            });
            $('#attendanceProfileScope').on('change', function () {
                $('#periodLabel').text('Scope Actual hanya dipakai untuk export actual.');
            });
            $('#filterDateFrom, #filterDateTo').on('change', function () {
                applyDateBoundsFromProfile(false);
            });
            $('#filterKaryawanId').on('change', function () {
                forcedKaryawanId = '';
                syncKaryawanFilterClearButton();
            });
            $('#btnSelectAllKaryawanFilter').on('click', function () {
                const ids = (refs.karyawans || [])
                    .map((row) => String(row.id || '').trim())
                    .filter(Boolean);
                const $filter = $('#filterKaryawanId');
                (refs.karyawans || []).forEach((row) => {
                    const id = String(row.id || '').trim();
                    if (id && !$filter.find(`option[value="${id}"]`).length) {
                        $filter.append(`<option value="${id}">${escapeHtml(getKaryawanPasteLabel(row))}</option>`);
                    }
                });
                $filter.val(ids).trigger('change');
                forcedKaryawanId = '';
                currentPage = 1;
            });
            $('#btnClearKaryawanFilter').on('click', function () {
                $('#filterKaryawanId').val([]).trigger('change');
                forcedKaryawanId = '';
                currentPage = 1;
                loadReviews();
                resetCalculationView();
            });
            $('#perPage').on('change', function () {
                currentPage = 1;
                loadReviews();
                resetCalculationView();
            });
            $('#btnApplyFilter').on('click', function () {
                currentPage = 1;
                loadReviews();
                resetCalculationView();
            });
            $('#btnApproveAllCheck').on('click', function () {
                doApproveAllCheck();
            });
            $('#btnResetFilter').on('click', function () {
                $('#filterKaryawanId').val([]).trigger('change');
                $('#filterDateFrom').val('');
                $('#filterDateTo').val('');
                forcedKaryawanId = '';
                currentPage = 1;
                showPendingOnly = false;
                showMissingOnly = false;
                showNeedsSplOnly = false;
                $('#btnShowPendingOnly').removeClass('active').addClass('btn-warning text-dark')
                    .html('<i class="fas fa-triangle-exclamation me-1"></i>Pending');
                $('#btnShowMissingOnly').removeClass('active').addClass('btn-warning text-dark')
                    .html('<i class="fas fa-highlighter me-1"></i>Missing');
                $('#btnShowNeedsSplOnly').removeClass('active').addClass('btn-danger')
                    .html('<i class="fas fa-file-signature me-1"></i>Belum Ada SPL');
                syncContractHoursButton();
                loadReviews();
                resetCalculationView();
            });
            $('#btnShowPendingOnly').on('click', function () {
                showPendingOnly = !showPendingOnly;
                $(this)
                    .toggleClass('active', showPendingOnly)
                    .addClass('btn-warning text-dark')
                    .html(`<i class="fas fa-triangle-exclamation me-1"></i>${showPendingOnly ? 'Pending Only' : 'Pending Saja'}`);
                renderMatrix();
            });
            $('#btnShowMissingOnly').on('click', function () {
                showMissingOnly = !showMissingOnly;
                currentPage = 1;
                $(this)
                    .toggleClass('active', showMissingOnly)
                    .addClass('btn-warning text-dark')
                    .html(`<i class="fas fa-highlighter me-1"></i>${showMissingOnly ? 'Missing Only' : 'Missing'}`);
                loadReviews();
            });
            $('#btnShowNeedsSplOnly').on('click', function () {
                showNeedsSplOnly = !showNeedsSplOnly;
                currentPage = 1;
                $(this)
                    .toggleClass('active', showNeedsSplOnly)
                    .addClass('btn-danger')
                    .html(`<i class="fas fa-file-signature me-1"></i>${showNeedsSplOnly ? 'Butuh SPL Only' : 'Belum Ada SPL'}`);
                loadReviews();
            });
            $('#btnToggleContractHours').on('click', function () {
                showContractHours = !showContractHours;
                localStorage.setItem(contractHoursSettingKey, showContractHours ? '1' : '0');
                syncContractHoursButton();
                renderMatrix();
            });
            $('#matrixScrollTop').on('scroll', function () {
                $('#matrixContainer').scrollLeft(this.scrollLeft);
            });
            $('#matrixContainer').on('scroll', function () {
                $('#matrixScrollTop').scrollLeft(this.scrollLeft);
            });
            $(window).on('resize', syncMatrixTopScrollWidth);
            $('#btnScanEmergencyCases').on('click', function () {
                const profilId = $('#profilBulanId').val() || '';
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu.', 'warning');
                    return;
                }
                $('#scanEmergencyDate').val($('#filterDateFrom').val() || $('#periodStart').text().replace(/^Periode:\s*/,'').split(' s/d ')[0] || '');
                $('#scanEmergencyRows').html('<tr><td colspan="8" class="text-center text-muted py-3">Pilih tanggal lalu scan.</td></tr>');
                scanEmergencyModal.show();
            });
            $('#btnRunScanEmergency').on('click', function () {
                const profilId = $('#profilBulanId').val() || '';
                const dateX = $('#scanEmergencyDate').val() || '';
                if (!profilId || !dateX) {
                    Swal.fire('Warning', 'Profil bulan dan tanggal wajib diisi.', 'warning');
                    return;
                }
                $('#scanEmergencyRows').html('<tr><td colspan="8" class="text-center text-muted py-3">Memindai...</td></tr>');
                $.getJSON(`{{ route('attendance_review_v2.reviews.scan_emergency_cases') }}`, { profil_bulan_id: profilId, work_date: dateX })
                    .done((resp) => {
                        const rows = Array.isArray(resp?.data) ? resp.data : [];
                        if (!rows.length) {
                            $('#scanEmergencyRows').html('<tr><td colspan="8" class="text-center text-muted py-3">Tidak ada case mencurigakan.</td></tr>');
                            return;
                        }
                        $('#scanEmergencyRows').html(rows.map((row) => `
                            <tr class="scan-emergency-row" data-search="${escapeHtml(`${row.employee_code || ''} ${row.employee_name || ''} ${row.source || ''} ${row.conflict || ''} ${row.suggestion || ''}`.toLowerCase())}">
                                <td><input type="checkbox" class="form-check-input scan-emergency-check" value="${row.karyawan_id}" data-date="${row.work_date || ''}"></td>
                                <td><div class="fw-semibold">${escapeHtml(`${row.employee_code || '-'} - ${row.employee_name || '-'}`)}</div><div class="small text-muted">${escapeHtml(row.work_date || '-')}</div></td>
                                <td>${escapeHtml(row.raw_in || '-')}</td>
                                <td>${escapeHtml(row.raw_out || '-')}</td>
                                <td>${escapeHtml(row.source || '-')}<br><span class="small text-muted">${escapeHtml(row.device || '-')}</span></td>
                                <td>${escapeHtml(row.conflict || '-')}</td>
                                <td><span class="badge text-bg-warning text-dark">${escapeHtml(row.suggestion || '-')}</span></td>
                                <td><span class="badge text-bg-primary">${Number(row.confidence || 0)}%</span></td>
                            </tr>
                        `).join(''));
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Scan gagal', 'error'));
            });
            const refreshScanEmergencyShiftOptions = () => {
                const options = ['<option value="">- pilih shift -</option>', ...(shiftShortcutRefs.shifts || []).map((shift) => `<option value="${shift.id}">${escapeHtml(`${shift.code || '-'} - ${shift.name || '-'} (${shift.start_time || '-'}-${shift.end_time || '-'})`)}</option>` )];
                $('#scanEmergencyShiftId').html(options.join(''));
            };
            $('#btnScanEmergencyCases').on('click', function () {
                loadShiftShortcutRefs().done(refreshScanEmergencyShiftOptions);
            });
            $('#scanEmergencySearch').on('input', function () {
                const keyword = String($(this).val() || '').toLowerCase().trim();
                $('#scanEmergencyRows .scan-emergency-row').each(function () { $(this).toggle(!keyword || String($(this).data('search') || '').includes(keyword)); });
            });
            $('#checkAllEmergencyRows').on('change', function () { $('#scanEmergencyRows .scan-emergency-row:visible .scan-emergency-check').prop('checked', $(this).is(':checked')); });
            $('#btnSelectAllEmergency').on('click', function () { $('#scanEmergencyRows .scan-emergency-row:visible .scan-emergency-check').prop('checked', true); });
            $('#btnBulkSetEmergencyShift').on('click', function () {
                const profilId = $('#profilBulanId').val() || '';
                const shiftId = $('#scanEmergencyShiftId').val() || '';
                const selected = $('#scanEmergencyRows .scan-emergency-check:checked').map(function () { return { karyawan_id: $(this).val(), work_date: $(this).data('date') }; }).get();
                if (!shiftId || !selected.length) { Swal.fire('Warning', 'Pilih shift dan minimal satu karyawan.', 'warning'); return; }
                Swal.fire({ title: 'Set shift bulk?', text: `${selected.length} karyawan akan diberi override shift pada tanggal X, lalu rebuild dan deteksi.`, icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, set shift' }).then((result) => {
                    if (!result.isConfirmed) return;
                    let chain = $.Deferred().resolve().promise(); let done = 0;
                    selected.forEach((item) => { chain = chain.then(() => $.post('{{ route('attendance_review_v2.shift_shortcut.store') }}', { profil_bulan_id: profilId, karyawan_id: item.karyawan_id, work_date: item.work_date, profil_jam_kerja_id: shiftId, notes: 'Bulk scan emergency / forget clock.', rebuild: 1, detect: 1 }).done(() => { done++; })); });
                    chain.done(() => { loadReviews(); Swal.fire('Selesai', `${done} shift tersimpan. Rebuild/deteksi diproses.`, 'success'); }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk set shift gagal.', 'error'));
                });
            });
            $('#btnJumpPending').on('click', function () {
                const $pending = $('#matrixTable').find('.matrix-row-pending').first();
                if (!$pending.length) {
                    Swal.fire('Info', 'Tidak ada baris pending di halaman ini.', 'info');
                    return;
                }
                const $wrap = $('#matrixTable').closest('.table-responsive');
                $wrap.animate({ scrollTop: $pending.position().top + $wrap.scrollTop() - 60 }, 250);
            });
            $('#btnPrevPage').on('click', function () {
                if (currentPage <= 1) return;
                currentPage -= 1;
                syncReviewPageInputs();
                loadReviews();
            });
            $('#btnPrevPageTop').on('click', function () {
                if (currentPage <= 1) return;
                currentPage -= 1;
                syncReviewPageInputs();
                loadReviews();
            });
            $('#btnNextPage').on('click', function () {
                const totalPages = Number((reviewMeta.pagination || {}).total_pages || 1);
                if (currentPage >= totalPages) return;
                currentPage += 1;
                syncReviewPageInputs();
                loadReviews();
            });
            $('#btnNextPageTop').on('click', function () {
                const totalPages = Number((reviewMeta.pagination || {}).total_pages || 1);
                if (currentPage >= totalPages) return;
                currentPage += 1;
                syncReviewPageInputs();
                loadReviews();
            });
            $('#btnGoPage, #btnGoPageTop').on('click', function () {
                const inputSelector = this.id === 'btnGoPageTop' ? '#pageJumpInputTop' : '#pageJumpInput';
                goToReviewPage($(inputSelector).val());
            });
            $('#pageJumpInput, #pageJumpInputTop').on('keydown', function (e) {
                if (e.key !== 'Enter') return;
                e.preventDefault();
                goToReviewPage($(this).val());
            });
            $('#pageJumpInput, #pageJumpInputTop').on('blur', function () {
                const totalPages = Math.max(1, Number((reviewMeta.pagination || {}).total_pages || 1));
                const targetPage = Math.floor(Number($(this).val() || 0));
                $(this).val(Number.isFinite(targetPage) && targetPage >= 1 ? Math.min(targetPage, totalPages) : currentPage);
            });
            syncReviewPageInputs();

            const setRunButtonLoading = (isLoading) => {
                const $btn = $('#btnRunDetect');
                if (isLoading) {
                    $btn
                        .data('original-html', $btn.html())
                        .addClass('is-running')
                        .prop('disabled', true)
                        .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Running...');
                    return;
                }
                $btn
                    .removeClass('is-running')
                    .html($btn.data('original-html') || '<i class="fas fa-magnifying-glass me-1"></i>Run');
                const totalEmployees = Number((reviewMeta?.pagination || {}).total_employees || 0);
                $btn.prop('disabled', totalEmployees <= 0 || isSelectedProfilClosed());
            };

            const setRebuildButtonLoading = (isLoading) => {
                const $btn = $('#btnRebuildPlanning');
                if (isLoading) {
                    $btn
                        .data('original-html', $btn.html())
                        .prop('disabled', true)
                        .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Rebuilding...');
                    return;
                }
                $btn
                    .html($btn.data('original-html') || '<i class="fas fa-arrows-rotate me-1"></i>Rebuild Planning');
                const totalEmployees = Number((reviewMeta?.pagination || {}).total_employees || 0);
                $btn.prop('disabled', totalEmployees <= 0 || isSelectedProfilClosed());
            };
            let detectPollTimer = null;
            let currentDetectJobId = 0;
            let rebuildPollTimer = null;
            let currentRebuildJobId = 0;
            let queueHealthTimer = null;
            const attendanceQueueName = 'attendance-review';
            let detectPendingStreak = 0;
            let detectLastAutoKickAt = 0;
            let detectLastUpdatedAt = '';
            let detectStaleStreak = 0;
            let detectNotifiedDoneId = 0;
            let rebuildPendingStreak = 0;
            let rebuildLastAutoKickAt = 0;
            let rebuildLastUpdatedAt = '';
            let rebuildStaleStreak = 0;
            let rebuildNotifiedDoneId = 0;
            let queueHealthXhr = null;
            const stopDetectPolling = () => {
                if (detectPollTimer) {
                    clearInterval(detectPollTimer);
                    detectPollTimer = null;
                }
            };
            const stopRebuildPolling = () => {
                if (rebuildPollTimer) {
                    clearInterval(rebuildPollTimer);
                    rebuildPollTimer = null;
                }
            };
            const stopQueueHealthPolling = () => {
                if (queueHealthTimer) {
                    clearInterval(queueHealthTimer);
                    queueHealthTimer = null;
                }
                if (queueHealthXhr && queueHealthXhr.readyState !== 4) {
                    queueHealthXhr.abort();
                    queueHealthXhr = null;
                }
            };
            const renderQueueHealth = (row) => {
                const status = String(row?.status || 'idle');
                const pending = Number(row?.pending || 0);
                const reserved = Number(row?.reserved || 0);
                const delayed = Number(row?.delayed || 0);
                const offline = !!row?.likely_worker_offline;
                const openByType = row?.open_by_type || {};
                const queueParts = [];
                if (Number(openByType?.sync_public_api || 0) > 0) queueParts.push(`${Number(openByType.sync_public_api)} sync`);
                if (Number(openByType?.detect || 0) > 0) queueParts.push(`${Number(openByType.detect)} detect`);
                if (Number(openByType?.rebuild_planning || 0) > 0) queueParts.push(`${Number(openByType.rebuild_planning)} rebuild`);
                if (Number(openByType?.import_machine_log || 0) > 0) queueParts.push(`${Number(openByType.import_machine_log)} import`);
                const queueSuffix = queueParts.length ? ` | ${queueParts.join(', ')}` : '';
                let cls = 'text-bg-secondary';
                let text = 'Queue: -';
                if (status === 'busy') {
                    cls = 'text-bg-primary';
                    text = `Queue: busy (${reserved})${queueSuffix}`;
                } else if (status === 'queued') {
                    cls = 'text-bg-info';
                    text = `Queue: queued (${pending})${queueSuffix}`;
                } else if (status === 'stalled' || offline) {
                    cls = 'text-bg-danger';
                    text = `Queue: stalled (${pending})${queueSuffix}`;
                } else if (status === 'idle') {
                    cls = 'text-bg-success';
                    text = 'Queue: idle';
                }
                $('#queueHealthBadge')
                    .removeClass('text-bg-secondary text-bg-success text-bg-primary text-bg-info text-bg-danger')
                    .addClass(cls)
                    .text(text)
                    .attr('title', `pending=${pending}, reserved=${reserved}, delayed=${delayed}, open=${queueParts.join(', ') || '-'}`);
            };
            const loadQueueHealth = () => {
                if (queueHealthXhr && queueHealthXhr.readyState !== 4) {
                    return queueHealthXhr;
                }
                queueHealthXhr = $.getJSON('{{ route('attendance_review_v2.queue.health') }}', { queue: attendanceQueueName })
                    .done((resp) => {
                        renderQueueHealth(resp?.data || {});
                    })
                    .always(() => {
                        queueHealthXhr = null;
                    });
                return queueHealthXhr;
            };
            const startQueueHealthPolling = () => {
                stopQueueHealthPolling();
                loadQueueHealth();
                queueHealthTimer = setInterval(loadQueueHealth, 30000);
            };
            const processQueueOnce = (silent = false) => {
                return $.post('{{ route('attendance_review_v2.queue.process_once') }}', { queue: attendanceQueueName })
                    .done((resp) => {
                        renderQueueHealth(resp?.health || {});
                        if (!silent) {
                            Swal.fire('Success', resp?.message || 'Queue diproses sekali.', 'success');
                        }
                    })
                    .fail((xhr) => {
                        if (!silent) {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal process queue', 'error');
                        }
                    });
            };
            const renderRebuildStatus = (row) => {
                const status = String(row?.status || 'pending');
                const pct = Number(row?.progress_percent || 0);
                let cls = 'alert alert-info';
                if (status === 'done') cls = 'alert alert-success';
                if (status === 'failed') cls = 'alert alert-danger';
                const updatedAt = row?.updated_at ? ` | Last update: ${escapeHtml(row.updated_at)}` : '';
                const from = row?.date_from ? ` | Dari: ${escapeHtml(String(row.date_from))}` : '';
                const to = row?.date_to ? ` | Sampai: ${escapeHtml(String(row.date_to))}` : '';
                const updated = Number(row?.updated || 0);
                const skipped = Number(row?.skipped || 0);
                const resetApproval = Number(row?.reset_approval || 0);
                const err = row?.error_message ? `<div class="small text-danger mt-1">${escapeHtml(row.error_message)}</div>` : '';
                const summary = status === 'done'
                    ? ` | Updated: ${updated} | Skip: ${skipped} | Reset approval: ${resetApproval}`
                    : '';
                let hint = '';
                const statusHint = String(row?.status_hint || '').trim();
                if (statusHint !== '') {
                    hint = `<div class="small text-muted mt-1">${escapeHtml(statusHint)}</div>`;
                } else if (status === 'pending' || status === 'processing') {
                    hint = `<div class="small text-muted mt-1">Jika progress tidak bergerak, cek worker/queue. Anda juga bisa klik Process Queue.</div>`;
                } else if (status === 'done') {
                    hint = `<div class="small fw-semibold text-primary mt-1"><i class="fas fa-circle-info me-1"></i>Planning sudah sinkron. Klik <b>Run Deteksi</b> agar jam aktual, SPL approved, FC, dan manual time dihitung ulang ke matrix.</div>`;
                }
                const refreshBtn = (status !== 'done' && status !== 'failed')
                    ? `<button class="btn btn-sm btn-outline-secondary ms-2" id="btnRefreshRebuildJob" data-id="${Number(row?.id || 0)}"><i class="fas fa-rotate me-1"></i>Refresh</button>`
                    : '';
                $('#rebuildStatus')
                    .removeClass('d-none')
                    .html(`<div class="${cls} py-2 px-3 mb-0"><b>Rebuild Job ${escapeHtml(row?.request_no || '-')}</b> | Status: ${status} | Progress: ${pct}% (${Number(row?.processed_users || 0)}/${Number(row?.total_users || 0)})${from}${to}${updatedAt}${summary}${refreshBtn}${err}${hint}</div>`);
            };
            const pollRebuildStatus = (jobId) => {
                stopRebuildPolling();
                currentRebuildJobId = Number(jobId || 0);
                rebuildPendingStreak = 0;
                rebuildLastAutoKickAt = 0;
                rebuildLastUpdatedAt = '';
                rebuildStaleStreak = 0;
                const run = () => {
                    $.getJSON(`{{ url('/attendance-review-v2/rebuild') }}/${currentRebuildJobId}/status`)
                        .done((resp) => {
                            const row = resp?.data || {};
                            renderRebuildStatus(row);
                            const status = String(row?.status || '');
                            const updatedAt = String(row?.updated_at || '');
                            if (updatedAt && updatedAt === rebuildLastUpdatedAt) {
                                rebuildStaleStreak += 1;
                            } else {
                                rebuildStaleStreak = 0;
                                rebuildLastUpdatedAt = updatedAt;
                            }
                            if (status === 'done') {
                                stopRebuildPolling();
                                setRebuildButtonLoading(false);
                                loadReviews();
                                refreshCalculationsIfLoaded();
                                if (rebuildNotifiedDoneId !== currentRebuildJobId) {
                                    rebuildNotifiedDoneId = currentRebuildJobId;
                                    Swal.fire({
                                        title: 'Rebuild selesai, wajib Run Deteksi',
                                        html: `Updated: ${Number(row?.updated || 0)}, Skip: ${Number(row?.skipped || 0)}, Reset approval: ${Number(row?.reset_approval || 0)}.<br><br><b>Matrix belum final.</b> Klik <b>Run Deteksi</b> supaya jam aktual, SPL approved, FC, dan manual time dihitung ulang.`,
                                        icon: 'warning',
                                        showCancelButton: true,
                                        confirmButtonText: '<i class="fas fa-magnifying-glass me-1"></i>Run Deteksi Sekarang',
                                        cancelButtonText: 'Nanti dulu'
                                    }).then((res) => {
                                        if (res.isConfirmed) {
                                            startDetectJob();
                                        }
                                    });
                                }
                                currentRebuildJobId = 0;
                            } else if (status === 'failed') {
                                stopRebuildPolling();
                                setRebuildButtonLoading(false);
                                if (rebuildNotifiedDoneId !== currentRebuildJobId) {
                                    rebuildNotifiedDoneId = currentRebuildJobId;
                                    Swal.fire('Error', row?.error_message || 'Rebuild planning gagal', 'error');
                                }
                                currentRebuildJobId = 0;
                            } else if (status === 'pending') {
                                rebuildPendingStreak += 1;
                                const nowMs = Date.now();
                                const shouldAutoKick = rebuildPendingStreak >= 3 && (nowMs - rebuildLastAutoKickAt) >= 12000;
                                if (shouldAutoKick) {
                                    rebuildLastAutoKickAt = nowMs;
                                    $.getJSON('{{ route('attendance_review_v2.queue.health') }}', { queue: attendanceQueueName })
                                        .done((qResp) => {
                                            const q = qResp?.data || {};
                                            renderQueueHealth(q);
                                            const stalled = String(q.status || '') === 'stalled' || (Number(q.pending || 0) > 0 && Number(q.reserved || 0) === 0);
                                            if (stalled) {
                                                processQueueOnce(true);
                                            }
                                        });
                                }
                            } else if (status === 'processing') {
                                if (rebuildStaleStreak >= 3) {
                                    processQueueOnce(true);
                                }
                            } else {
                                rebuildPendingStreak = 0;
                            }
                        })
                        .fail((xhr) => {
                            stopRebuildPolling();
                            setRebuildButtonLoading(false);
                            $('#rebuildStatus')
                                .removeClass('d-none')
                                .html(`<div class="alert alert-danger py-2 px-3 mb-0"><strong>Rebuild Planning gagal.</strong> <span class="small ms-1">${escapeHtml(String(xhr.responseJSON?.message || 'Gagal cek status Rebuild job'))}</span></div>`);
                        });
                };
                run();
                rebuildPollTimer = setInterval(run, 2500);
            };
            const renderDetectStatus = (row) => {
                  const status = String(row?.status || 'pending');
                  const pct = Number(row?.progress_percent || 0);
                  let cls = 'alert alert-info';
                  if (status === 'done') cls = 'alert alert-success';
                  if (status === 'failed') cls = 'alert alert-danger';
                  if (status === 'cancelled') cls = 'alert alert-warning';
                  if (status === 'paused') cls = 'alert alert-secondary';
                  const updatedAt = row?.updated_at ? ` | Last update: ${escapeHtml(row.updated_at)}` : '';
                  const err = row?.error_message ? `<div class="small text-danger mt-1">${escapeHtml(row.error_message)}</div>` : '';
                  const affected = Number(row?.affected_rows || 0);
                  const affectedText = status === 'done' ? ` | Affected: ${affected}` : '';
                  const statusHint = String(row?.status_hint || '').trim();
                  const hint = statusHint !== ''
                      ? `<div class="small text-muted mt-1">${escapeHtml(statusHint)}</div>`
                      : ((status === 'pending' || status === 'processing')
                          ? `<div class="small text-muted mt-1">Jika progress tidak bergerak, cek worker/queue. Anda juga bisa klik Process Queue.</div>`
                          : '');
                  const pauseBtn = (status === 'pending' || status === 'processing')
                      ? `<button class="btn btn-sm btn-outline-warning ms-2" id="btnPauseDetectJob" data-id="${Number(row?.id || 0)}"><i class="fas fa-pause me-1"></i>Pause</button>`
                      : '';
                  const resumeBtn = (status === 'paused')
                      ? `<button class="btn btn-sm btn-outline-primary ms-2" id="btnResumeDetectJob" data-id="${Number(row?.id || 0)}"><i class="fas fa-play me-1"></i>Resume</button>`
                      : '';
                  const stopBtn = (status === 'pending' || status === 'processing' || status === 'paused')
                      ? `<button class="btn btn-sm btn-outline-danger ms-2" id="btnCancelDetectJob" data-id="${Number(row?.id || 0)}"><i class="fas fa-stop me-1"></i>Stop</button>`
                      : '';
                  const refreshBtn = (status !== 'done' && status !== 'failed' && status !== 'cancelled')
                      ? `<button class="btn btn-sm btn-outline-secondary ms-2" id="btnRefreshDetectJob" data-id="${Number(row?.id || 0)}"><i class="fas fa-rotate me-1"></i>Refresh</button>`
                      : '';
                  $('#detectJobStatus')
                      .removeClass('d-none')
                      .html(`<div class="${cls} py-2 px-3 mb-0"><b>Run Job ${escapeHtml(row?.request_no || '-')}</b> | Status: ${status} | Progress: ${pct}% (${Number(row?.processed_users || 0)}/${Number(row?.total_users || 0)})${updatedAt}${affectedText}${pauseBtn}${resumeBtn}${stopBtn}${refreshBtn}${err}${hint}</div>`);
              };
            const pollDetectStatus = (jobId) => {
                  stopDetectPolling();
                  currentDetectJobId = Number(jobId || 0);
                  detectPendingStreak = 0;
                  detectLastAutoKickAt = 0;
                  detectLastUpdatedAt = '';
                  detectStaleStreak = 0;
                  const run = () => {
                      $.getJSON(`{{ url('/attendance-review-v2/detect') }}/${currentDetectJobId}/status`)
                          .done((resp) => {
                              const row = resp?.data || {};
                              renderDetectStatus(row);
                              const status = String(row?.status || '');
                              const updatedAt = String(row?.updated_at || '');
                              if (updatedAt && updatedAt === detectLastUpdatedAt) {
                                  detectStaleStreak += 1;
                              } else {
                                  detectStaleStreak = 0;
                                  detectLastUpdatedAt = updatedAt;
                              }
                  if (status === 'done') {
                                  stopDetectPolling();
                                  setRunButtonLoading(false);
                                  loadReviews();
                                  refreshCalculationsIfLoaded();
                                  if (detectNotifiedDoneId !== currentDetectJobId) {
                                      detectNotifiedDoneId = currentDetectJobId;
                                      Swal.fire('Success', `Detection selesai. Affected: ${Number(row?.affected_rows || 0)} baris.`, 'success');
                                  }
                                  currentDetectJobId = 0;
                              } else if (status === 'cancelled') {
                                  stopDetectPolling();
                                  setRunButtonLoading(false);
                                  loadReviews();
                                  refreshCalculationsIfLoaded();
                                  if (detectNotifiedDoneId !== currentDetectJobId) {
                                      detectNotifiedDoneId = currentDetectJobId;
                                      Swal.fire('Info', 'Run detection dibatalkan.', 'info');
                                  }
                                  currentDetectJobId = 0;
                              } else if (status === 'paused') {
                                  stopDetectPolling();
                                  setRunButtonLoading(false);
                              } else if (status === 'failed') {
                                  stopDetectPolling();
                                  setRunButtonLoading(false);
                                  if (detectNotifiedDoneId !== currentDetectJobId) {
                                      detectNotifiedDoneId = currentDetectJobId;
                                      Swal.fire('Error', row?.error_message || 'Detection gagal', 'error');
                                  }
                                  currentDetectJobId = 0;
                              } else if (status === 'pending') {
                                  detectPendingStreak += 1;
                                  const nowMs = Date.now();
                                  const shouldAutoKick = detectPendingStreak >= 3 && (nowMs - detectLastAutoKickAt) >= 12000;
                                  if (shouldAutoKick) {
                                      detectLastAutoKickAt = nowMs;
                                      $.getJSON('{{ route('attendance_review_v2.queue.health') }}', { queue: attendanceQueueName })
                                          .done((qResp) => {
                                              const q = qResp?.data || {};
                                              renderQueueHealth(q);
                                              const stalled = String(q.status || '') === 'stalled' || (Number(q.pending || 0) > 0 && Number(q.reserved || 0) === 0);
                                              if (stalled) {
                                                  processQueueOnce(true);
                                              }
                                          });
                                  }
                              } else if (status === 'processing') {
                                  if (detectStaleStreak >= 3) {
                                      processQueueOnce(true);
                                  }
                              } else {
                                  detectPendingStreak = 0;
                              }
                          })
                        .fail((xhr) => {
                            stopDetectPolling();
                            setRunButtonLoading(false);
                            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal cek status Run job', 'error');
                        });
                };
                run();
                detectPollTimer = setInterval(run, 2500);
            };

            $(document).on('click', '#btnCancelDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                $.post(`{{ url('/attendance-review-v2/detect') }}/${jobId}/cancel`)
                    .done((resp) => {
                        Swal.fire('Success', resp?.message || 'Permintaan stop dikirim', 'success');
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal stop job', 'error');
                    });
            });

            $(document).on('click', '#btnPauseDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                $.post(`{{ url('/attendance-review-v2/detect') }}/${jobId}/pause`)
                    .done((resp) => {
                        Swal.fire('Success', resp?.message || 'Job dipause.', 'success');
                        pollDetectStatus(jobId);
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal pause job', 'error');
                    });
            });

            $(document).on('click', '#btnResumeDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                setRunButtonLoading(true);
                $.post(`{{ url('/attendance-review-v2/detect') }}/${jobId}/resume`)
                    .done((resp) => {
                        Swal.fire('Success', resp?.message || 'Job dilanjutkan.', 'success');
                        pollDetectStatus(jobId);
                    })
                    .fail((xhr) => {
                        setRunButtonLoading(false);
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal resume job', 'error');
                    });
            });

            $('#btnProcessQueueNow').on('click', function () {
                const $btn = $(this);
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Processing...');
                processQueueOnce(false)
                    .always(() => {
                        $btn.prop('disabled', false).html('<i class="fas fa-play me-1"></i>Process Queue');
                        loadQueueHealth();
                    });
            });

            const startDetectJob = () => {
                const payload = {
                    profil_bulan_id: $('#profilBulanId').val(),
                    rounding_rule_id: $('#roundingRuleId').val() || '',
                    karyawan_id: selectedSingleKaryawanId(),
                    attendance_profile_scope: ($('#detectProfileScope').val() || 'selected').toString()
                };
                if (!payload.profil_bulan_id) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }
                setRunButtonLoading(true);
                $.post('{{ route('attendance_review_v2.detect') }}', payload)
                    .done((resp) => {
                        const jobMeta = resp?.data ?? resp ?? {};
                        const jobId = Number(jobMeta?.job_id || 0);
                        if (jobId <= 0) {
                            setRunButtonLoading(false);
                            Swal.fire('Error', 'Job id tidak valid.', 'error');
                            return;
                        }
                        pollDetectStatus(jobId);
                    })
                    .fail((xhr) => {
                        setRunButtonLoading(false);
                        Swal.fire('Error', xhr.responseJSON?.message || 'Detection failed', 'error');
                    })
                    .always(() => {
                        // Tombol akan dibuka lagi saat polling selesai/fail.
                    });
            };

            $('#btnRunDetect').on('click', function () {
                startDetectJob();
            });

            $('#btnRebuildPlanning').on('click', function () {
                const payload = {
                    profil_bulan_id: $('#profilBulanId').val(),
                    karyawan_id: selectedSingleKaryawanId(),
                    attendance_profile_scope: ($('#rebuildProfileScope').val() || 'selected').toString(),
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || ''
                };
                if (!payload.profil_bulan_id) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Rebuild planning dari profil terbaru?',
                    html: 'Planning shift akan diperbarui dari assignment/profil terbaru. <b>Ini belum menghitung ulang jam aktual.</b><br><span class="text-primary">Setelah selesai, klik <b>Run Deteksi</b> agar SPL approved, FC, manual time, dan raw log masuk ke matrix.</span>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, rebuild planning'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    setRebuildButtonLoading(true);
                    $('#rebuildStatus')
                        .removeClass('d-none')
                        .html(`
                            <div class="alert alert-primary py-2 px-3 mb-0">
                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                <strong>Rebuild Planning sedang diproses...</strong>
                                <span class="small ms-1">Job rebuild sedang dimasukkan ke queue.</span>
                            </div>
                        `);
                    $.post('{{ route('attendance_review_v2.rebuild_planning') }}', payload)
                        .done((resp) => {
                            const jobMeta = resp?.data ?? resp ?? {};
                            const jobId = Number(jobMeta?.job_id || 0);
                            if (jobId > 0) {
                                pollRebuildStatus(jobId);
                            } else {
                                setRebuildButtonLoading(false);
                                $('#rebuildStatus')
                                    .removeClass('d-none')
                                    .html('<div class="alert alert-warning py-2 px-3 mb-0"><strong>Rebuild job dimulai,</strong> tetapi job id tidak ditemukan.</div>');
                            }
                        })
                        .fail((xhr) => {
                            setRebuildButtonLoading(false);
                            $('#rebuildStatus')
                                .removeClass('d-none')
                                .html(`<div class="alert alert-danger py-2 px-3 mb-0"><strong>Rebuild Planning gagal.</strong> <span class="small ms-1">${escapeHtml(String(xhr.responseJSON?.message || 'Rebuild planning gagal'))}</span></div>`);
                            Swal.fire('Error', xhr.responseJSON?.message || 'Rebuild planning gagal', 'error');
                        });
                });
            });

            const triggerExport = (format) => {
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }
                const params = appendKaryawanFilterParams(new URLSearchParams({
                    profil_bulan_id: String(profilId),
                    date_from: String($('#filterDateFrom').val() || ''),
                    date_to: String($('#filterDateTo').val() || ''),
                    format: String(format || 'excel'),
                }));
                window.open(`{{ route('attendance_review_v2.reviews.export') }}?${params.toString()}`, '_blank');
            };
            const actualExportModal = new bootstrap.Modal(document.getElementById('actualExportModal'));
            const localTodayDate = () => {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };
            const toDateTimeLocalValue = (value, endOfDay = false) => {
                const raw = String(value || '').trim();
                if (!raw) return `${localTodayDate()}T${endOfDay ? '23:59' : '00:00'}`;
                if (raw.includes('T')) return raw.slice(0, 16);
                return `${raw}T${endOfDay ? '23:59' : '00:00'}`;
            };
            const openActualRecordExportModal = () => {
                $('#actualExportProfileScope').val(String($('#attendanceProfileScope').val() || 'all'));
                $('#actualExportDateFrom').val(toDateTimeLocalValue($('#filterDateFrom').val(), false));
                $('#actualExportDateTo').val(toDateTimeLocalValue($('#filterDateTo').val(), true));
                actualExportModal.show();
            };
            $('#actualExportDateFrom').on('change', function () {
                const startValue = String($(this).val() || '').trim();
                if (!startValue) return;
                const selectedDate = startValue.slice(0, 10);
                $('#actualExportDateTo').val(`${selectedDate}T23:59`);
            });
            const triggerActualRecordExport = () => {
                const profilId = $('#profilBulanId').val();
                const profileScope = String($('#actualExportProfileScope').val() || 'all');
                const dateFrom = String($('#actualExportDateFrom').val() || '');
                const dateTo = String($('#actualExportDateTo').val() || '');
                const fingerNumbers = String($('#actualExportFingerNumbers').val() || '').trim();
                if (profileScope === 'selected' && !profilId) {
                    Swal.fire('Warning', 'Scope Profil dipilih saja memerlukan Profil Bulan pada filter utama.', 'warning');
                    return;
                }
                if (!dateFrom || !dateTo) {
                    Swal.fire('Warning', 'Pilih tanggal awal dan tanggal akhir', 'warning');
                    return;
                }
                if (dateFrom > dateTo) {
                    Swal.fire('Warning', 'Sampai Tanggal tidak boleh sebelum Dari Tanggal', 'warning');
                    return;
                }
                const params = appendKaryawanFilterParams(new URLSearchParams({
                    ...(profilId ? { profil_bulan_id: String(profilId) } : {}),
                    profile_scope: profileScope,
                    date_from: dateFrom,
                    date_to: dateTo,
                    ...(fingerNumbers ? { finger_numbers: fingerNumbers } : {}),
                }));
                actualExportModal.hide();
                window.open(`{{ route('attendance_review_v2.reviews.export_actual_excel') }}?${params.toString()}`, '_blank');
            };
            const buildExportPayload = () => ({
                profil_bulan_id: String($('#profilBulanId').val() || ''),
                karyawan_id: selectedSingleKaryawanId(),
                date_from: String($('#filterDateFrom').val() || ''),
                date_to: String($('#filterDateTo').val() || ''),
            });
            let zipPollTimer = null;
            let currentZipJobId = 0;
            const stopZipPolling = () => {
                if (zipPollTimer) {
                    clearInterval(zipPollTimer);
                    zipPollTimer = null;
                }
            };
            const renderZipStatus = (row) => {
                const status = String(row?.status || 'pending');
                const pct = Number(row?.progress_percent || 0);
                let cls = 'alert alert-info';
                if (status === 'done') cls = 'alert alert-success';
                if (status === 'failed') cls = 'alert alert-danger';
                const downloadBtn = row?.download_url
                    ? `<a class="btn btn-sm btn-success ms-2" href="${row.download_url}" target="_blank"><i class="fas fa-download me-1"></i>Download ZIP</a>`
                    : '';
                const err = row?.error_message ? `<div class="small text-danger mt-1">${row.error_message}</div>` : '';
                $('#zipJobStatus')
                    .removeClass('d-none')
                    .html(`<div class="${cls} py-2 px-3 mb-0"><b>ZIP Job ${row?.request_no || '-'}</b> | Status: ${status} | Progress: ${pct}% (${row?.processed_users || 0}/${row?.total_users || 0}) ${downloadBtn}${err}</div>`);
            };
            const pollZipStatus = (jobId) => {
                stopZipPolling();
                currentZipJobId = Number(jobId || 0);
                const run = () => {
                    if (document.hidden) return;
                    $.getJSON(`{{ url('/attendance-review-v2/calculations/zip') }}/${jobId}/status`)
                        .done((resp) => {
                            const row = resp?.data || {};
                            renderZipStatus(row);
                            if (row.status === 'done' || row.status === 'failed') {
                                stopZipPolling();
                                currentZipJobId = 0;
                            }
                        })
                        .fail(() => {
                            stopZipPolling();
                        });
                };
                run();
                zipPollTimer = setInterval(run, 3000);
            };

            let logJobPollTimer = null;
            let currentLogJobId = 0;
            let logJobNotifiedDoneId = 0;
            const stopLogJobPolling = () => {
                if (logJobPollTimer) {
                    clearInterval(logJobPollTimer);
                    logJobPollTimer = null;
                }
            };
            const renderLogJobStatus = (row) => {
                const status = String(row?.status || 'pending');
                const pct = Number(row?.progress_percent || 0);
                const label = escapeHtml(row?.label || 'Import/Sync Log');
                const message = row?.message ? `<div class="small text-muted mt-1">${escapeHtml(row.message)}</div>` : '';
                const err = row?.error_message ? `<div class="small text-danger mt-1">${escapeHtml(row.error_message)}</div>` : '';
                const detectInfo = row?.detect_job_id
                    ? `<div class="small text-primary mt-1">${escapeHtml(row?.detect_message || 'Run detection otomatis masuk antrian.')} Job ID: ${Number(row.detect_job_id || 0)}</div>`
                    : '';
                const stats = [
                    row?.expected_total ? `Estimasi: ${Number(row.expected_total || 0)}` : '',
                    row?.page ? `Page: ${Number(row.page || 0)}` : '',
                    row?.fetched ? `Terambil: ${Number(row.fetched || 0)}` : '',
                    row?.normalized ? `Valid: ${Number(row.normalized || 0)}` : '',
                    `Baru: ${Number(row?.inserted || 0)}`,
                    `Duplikat: ${Number(row?.duplicates || 0)}`,
                    `Gagal: ${Number(row?.failed || 0)}`,
                    row?.unmapped_inserted ? `NULL: ${Number(row.unmapped_inserted || 0)}` : '',
                ].filter(Boolean).join(' | ');
                let cls = 'alert alert-info';
                if (status === 'done') cls = 'alert alert-success';
                if (status === 'failed') cls = 'alert alert-danger';
                const statusHint = String(row?.status_hint || '').trim();
                const hint = statusHint !== '' ? `<div class="small mt-1 text-muted">${escapeHtml(statusHint)}</div>` : '';
                $('#logJobStatus')
                    .removeClass('d-none')
                    .html(`<div class="${cls} py-2 px-3 mb-0"><b>${label} Job ${escapeHtml(row?.request_no || '-')}</b> | Status: ${escapeHtml(status)} | Progress: ${pct}% (${Number(row?.processed_users || 0)}/${Number(row?.total_users || 0)})<div class="progress mt-2" style="height: 8px;"><div class="progress-bar" style="width: ${Math.max(0, Math.min(100, pct))}%"></div></div><div class="small mt-1">${stats}</div>${message}${detectInfo}${hint}${err}</div>`);
            };
            const pollLogJobStatus = (jobId) => {
                stopLogJobPolling();
                currentLogJobId = Number(jobId || 0);
                const run = () => {
                    if (document.hidden) return;
                    $.getJSON(`{{ url('/attendance-review-v2/logs/jobs') }}/${currentLogJobId}/status`)
                        .done((resp) => {
                            const row = resp?.data || {};
                            renderLogJobStatus(row);
                            const status = String(row?.status || '');
                            if (status === 'done') {
                                stopLogJobPolling();
                                loadReviews();
                                refreshCalculationsIfLoaded();
                                const detectJobId = Number(row?.detect_job_id || 0);
                                if (detectJobId > 0) {
                                    pollDetectStatus(detectJobId);
                                }
                                if (logJobNotifiedDoneId !== currentLogJobId) {
                                    logJobNotifiedDoneId = currentLogJobId;
                                    const nextText = detectJobId > 0 ? ' Run detection otomatis sudah masuk antrian.' : '';
                                    Swal.fire('Success', `${row?.label || 'Job'} selesai. Data baru: ${Number(row?.inserted || 0)}, duplikat: ${Number(row?.duplicates || 0)}, gagal: ${Number(row?.failed || 0)}.${nextText}`, 'success');
                                }
                                currentLogJobId = 0;
                            } else if (status === 'failed') {
                                stopLogJobPolling();
                                if (logJobNotifiedDoneId !== currentLogJobId) {
                                    logJobNotifiedDoneId = currentLogJobId;
                                    Swal.fire('Error', row?.error_message || 'Job import/sync log gagal', 'error');
                                }
                                currentLogJobId = 0;
                            }
                        })
                        .fail(() => {
                            stopLogJobPolling();
                        });
                };
                run();
                logJobPollTimer = setInterval(run, 3000);
            };

            const extractQueueJobMeta = (resp) => {
                const candidates = [
                    resp,
                    resp?.data,
                    resp?.payload,
                    resp?.result,
                    resp?.data?.data,
                    resp?.payload?.data,
                    resp?.result?.data,
                ].filter(Boolean);

                for (const item of candidates) {
                    const jobId = Number(item?.job_id || item?.id || item?.export_job_id || 0);
                    if (jobId > 0) {
                        return {
                            job_id: jobId,
                            request_no: item?.request_no || '',
                            raw: item,
                        };
                    }
                }

                return {
                    job_id: 0,
                    request_no: '',
                    raw: resp,
                };
            };

            const isDirectMachineImportResponse = (resp) => {
                if (!resp || typeof resp !== 'object') return false;
                const message = String(resp?.message || '').toLowerCase();
                if (message.includes('import log mesin selesai')) return true;

                return ['inserted', 'duplicates', 'failed', 'unmapped_inserted'].some((key) =>
                    Object.prototype.hasOwnProperty.call(resp, key)
                );
            };

            const machineImportSummaryHtml = (payload) => {
                const errors = Array.isArray(payload?.errors) ? payload.errors.filter(Boolean) : [];
                const errorPreview = errors.slice(0, 5).map((item) => {
                    if (typeof item === 'string') return item;
                    if (item && typeof item === 'object') {
                        return [item.row ? `row ${item.row}` : '', item.message || item.error || '']
                            .filter(Boolean)
                            .join(' | ');
                    }
                    return String(item || '');
                }).filter(Boolean);

                return `
                    <div class="text-start">
                        <div>Insert: <b>${Number(payload?.inserted || 0).toLocaleString('id-ID')}</b></div>
                        <div>Duplikat: <b>${Number(payload?.duplicates || 0).toLocaleString('id-ID')}</b></div>
                        <div>Gagal: <b>${Number(payload?.failed || 0).toLocaleString('id-ID')}</b></div>
                        <div>NULL/unmapped: <b>${Number(payload?.unmapped_inserted || 0).toLocaleString('id-ID')}</b></div>
                        ${errorPreview.length ? `<hr><div class="fw-bold text-danger">Error sample</div><ul class="small mb-0 ps-3">${errorPreview.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ul>` : ''}
                    </div>
                `;
            };

            document.addEventListener('visibilitychange', function () {
                if (document.hidden) {
                    stopQueueHealthPolling();
                    stopDetectPolling();
                    stopZipPolling();
                    stopLogJobPolling();
                    return;
                }

                startQueueHealthPolling();
                if (currentDetectJobId > 0) {
                    pollDetectStatus(currentDetectJobId);
                }
                if (currentZipJobId > 0) {
                    pollZipStatus(currentZipJobId);
                }
                if (currentLogJobId > 0) {
                    pollLogJobStatus(currentLogJobId);
                }
            });

            $('#btnExportExcel').on('click', function () {
                triggerExport('excel');
            });
            const buildActualExportParams = () => {
                const profilId = $('#profilBulanId').val();
                const profileScope = String($('#actualExportProfileScope').val() || 'all');
                const dateFrom = String($('#actualExportDateFrom').val() || '');
                const dateTo = String($('#actualExportDateTo').val() || '');
                const fingerNumbers = String($('#actualExportFingerNumbers').val() || '').trim();
                return appendKaryawanFilterParams(new URLSearchParams({
                    ...(profilId ? { profil_bulan_id: String(profilId) } : {}),
                    profile_scope: profileScope,
                    date_from: dateFrom,
                    date_to: dateTo,
                    ...(fingerNumbers ? { finger_numbers: fingerNumbers } : {}),
                }));
            };

            $('#btnExportActualExcel').on('click', function () {
                openActualRecordExportModal();
            });
            $('#btnExportSelectedSchedule').on('click', function () {
                const ids = toolSelectedKaryawanIds();
                const dateFrom = String($('#filterDateFrom').val() || '');
                const dateTo = String($('#filterDateTo').val() || '');
                if (!ids.length) return Swal.fire('Pilih user', 'Pilih minimal satu karyawan pada filter karyawan.', 'warning');
                if (!dateFrom || !dateTo || dateFrom > dateTo) return Swal.fire('Pilih periode', 'Tanggal periode belum valid.', 'warning');
                const params = new URLSearchParams({ date_from: dateFrom, date_to: dateTo });
                ids.forEach((id) => params.append('karyawan_ids[]', id));
                window.open(`{{ route('attendance_review_v2.schedule.export_pivot') }}?${params.toString()}`, '_blank');
            });

            $('#btnBulkQuestionSelectedSchedule').on('click', async function () {
                const ids = toolSelectedKaryawanIds(), dateFrom = String($('#filterDateFrom').val() || ''), dateTo = String($('#filterDateTo').val() || '');
                if (!ids.length) return Swal.fire('Pilih user', 'Pilih minimal satu karyawan.', 'warning');
                if (!dateFrom || !dateTo || dateFrom > dateTo) return Swal.fire('Pilih periode', 'Tanggal periode belum valid.', 'warning');
                const result = await Swal.fire({ title: 'Question Jadwal Selected', html: `<div class="text-start small mb-2">${ids.length} user | ${dateFrom} s/d ${dateTo}</div><label class="form-label">Deadline Jawaban</label><input id="swalScheduleDeadline" type="datetime-local" class="form-control mb-2"><label class="form-label">Pertanyaan</label><input id="swalScheduleQuestion" class="form-control" placeholder="Kosongkan untuk default">`, showCancelButton: true, confirmButtonText: 'Kirim Question', preConfirm: () => ({ deadline_at: $('#swalScheduleDeadline').val(), question: $('#swalScheduleQuestion').val() }) });
                if (!result.isConfirmed) return;
                $.post('{{ route('master_shift_schedule.answer_tasks.bulk') }}', { date_from: dateFrom, date_to: dateTo, karyawan_ids: ids, kind: 'verify', question: result.value.question, deadline_at: result.value.deadline_at, only_empty: 1 }).done((resp) => Swal.fire('Berhasil', resp.message, 'success')).fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Question gagal dibuat.', 'error'));
            });
            $('#btnBulkQuestionSelectedFc').on('click', async function () {
                const ids = toolSelectedKaryawanIds();
                const dateFrom = String($('#filterDateFrom').val() || '');
                const dateTo = String($('#filterDateTo').val() || '');
                if (!ids.length) return Swal.fire('Pilih user', 'Pilih minimal satu karyawan.', 'warning');
                if (!dateFrom || !dateTo || dateFrom > dateTo) return Swal.fire('Pilih periode', 'Tanggal periode belum valid.', 'warning');
                const result = await Swal.fire({title: 'Kirim Bulk Question FC?', html: `<div class="text-start small">${ids.length} user<br>${dateFrom} s/d ${dateTo}<hr>Hanya data missing attendance yang diproses.</div>`, icon: 'question', showCancelButton: true, confirmButtonText: 'Kirim Question FC'});
                if (!result.isConfirmed) return;
                $.post('{{ route('attendance_review_v2.reviews.bulk_question_fc') }}', {karyawan_ids: ids, date_from: dateFrom, date_to: dateTo})
                    .done((resp) => Swal.fire('Berhasil', resp.message || 'Bulk Question FC terkirim.', 'success'))
                    .fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Bulk Question FC gagal.', 'error'));
            });
            $('#btnScheduleTimeoutOff').on('click', function () {
                const selectedIds = toolSelectedKaryawanIds();
                if (!selectedIds.length) return Swal.fire('Pilih user', 'Pilih minimal satu karyawan.', 'warning');
                $.getJSON('{{ route('master_shift_schedule.answer_tasks.expired') }}', { karyawan_ids: selectedIds }).done(async (resp) => {
                    const rows = resp.data || [];
                    if (!rows.length) return Swal.fire('Tidak ada', 'Tidak ada question timeout yang perlu OFF.', 'info');
                    const preview = rows.slice(0, 10).map((r) => `${r.finger_id} - ${r.karyawan} - ${r.work_date}`).join('<br>');
                    const result = await Swal.fire({ title: 'Jadikan OFF?', html: `<div class="text-start small">${rows.length} timeout.<hr>${preview}</div><input id="swalTimeoutOffNotes" class="form-control mt-2" placeholder="Catatan audit">`, icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, jadikan OFF', preConfirm: () => $('#swalTimeoutOffNotes').val() });
                    if (!result.isConfirmed) return;
                    $.post('{{ route('master_shift_schedule.answer_tasks.confirm_off') }}', { ids: rows.map((r) => r.id), notes: result.value }).done((done) => Swal.fire('Selesai', done.message, 'success')).fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal membuat OFF.', 'error'));
                });
            });
            $('#btnExportFcApprovedExcel').on('click', function () {
                const profileScope = String($('#actualExportProfileScope').val() || 'all');
                const dateFrom = String($('#actualExportDateFrom').val() || '');
                const dateTo = String($('#actualExportDateTo').val() || '');
                if (profileScope === 'selected' && !$('#profilBulanId').val()) {
                    Swal.fire('Warning', 'Scope Profil dipilih saja memerlukan Profil Bulan pada filter utama.', 'warning');
                    return;
                }
                if (!dateFrom || !dateTo) {
                    Swal.fire('Warning', 'Pilih tanggal awal dan tanggal akhir', 'warning');
                    return;
                }
                if (dateFrom > dateTo) {
                    Swal.fire('Warning', 'Sampai Tanggal tidak boleh sebelum Dari Tanggal', 'warning');
                    return;
                }
                const params = buildActualExportParams();
                window.open(`{{ route('attendance_review_v2.reviews.export_forgetting_clock_approved_excel') }}?${params.toString()}`, '_blank');
            });
            $('#actualExportForm').on('submit', function (event) {
                event.preventDefault();
                triggerActualRecordExport();
            });
            $('#btnExportPdf').on('click', function () {
                triggerExport('pdf');
            });
            $('#btnPrintSheet').on('click', function () {
                if (this.disabled) return;
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }
                const params = new URLSearchParams({
                    profil_bulan_id: String(profilId),
                    karyawan_id: selectedSingleKaryawanId(),
                    date_from: String($('#filterDateFrom').val() || ''),
                    date_to: String($('#filterDateTo').val() || '')
                });
                window.open(`{{ route('attendance_review_v2.calculations.sheet') }}?${params.toString()}`, '_blank');
            });
            $('#btnSendEmailPdf').on('click', async function () {
                if (this.disabled) return;
                const payload = buildExportPayload();
                if (!payload.profil_bulan_id) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }

                const emailInput = await Swal.fire({
                    title: 'Kirim PDF ke Email',
                    text: 'Isi email tujuan. Boleh lebih dari satu, pisahkan dengan koma.',
                    input: 'text',
                    inputPlaceholder: 'hrd@company.com, manager@company.com',
                    showCancelButton: true,
                    confirmButtonText: 'Kirim',
                    cancelButtonText: 'Batal',
                });
                if (!emailInput.isConfirmed) return;

                const recipient = String(emailInput.value || '').trim();
                if (!recipient) {
                    Swal.fire('Warning', 'Email tujuan wajib diisi', 'warning');
                    return;
                }

                $.post('{{ route('attendance_review_v2.reviews.export.send') }}', {
                    ...payload,
                    channel: 'email',
                    recipient,
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'PDF berhasil dikirim ke email', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal kirim email', 'error'));
            });
            $('#btnSendWaReport').on('click', async function () {
                if (this.disabled) return;
                const payload = buildExportPayload();
                if (!payload.profil_bulan_id) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }

                const waInput = await Swal.fire({
                    title: 'Kirim Notifikasi WA',
                    text: 'Masukkan nomor tujuan format internasional, contoh 62812xxxxxxx',
                    input: 'text',
                    inputPlaceholder: '62812xxxxxxx',
                    showCancelButton: true,
                    confirmButtonText: 'Kirim',
                    cancelButtonText: 'Batal',
                });
                if (!waInput.isConfirmed) return;

                const recipient = String(waInput.value || '').trim();
                if (!recipient) {
                    Swal.fire('Warning', 'Nomor WA tujuan wajib diisi', 'warning');
                    return;
                }

                $.post('{{ route('attendance_review_v2.reviews.export.send') }}', {
                    ...payload,
                    channel: 'wa',
                    recipient,
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'Notifikasi WA berhasil dikirim', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal kirim WA', 'error'));
            });
            const zipBatchStorageKey = 'attendance-review-zip-batch-v1';
            let zipBatchPollTimer = null;
            const stopZipBatchPolling = () => { if (zipBatchPollTimer) { clearInterval(zipBatchPollTimer); zipBatchPollTimer = null; } };
            const renderZipBatch = (batch) => {
                const html = batch.parts.map((part, i) => {
                    const status = String(part.status || 'pending');
                    const cls = status === 'done' ? 'success' : (status === 'failed' ? 'danger' : 'secondary');
                    const action = part.download_url ? `<a class="btn btn-sm btn-success ms-2" href="${part.download_url}" target="_blank">Download</a>` : '';
                    return `<div class="border rounded p-2 mb-2"><b>Part ${i + 1}</b> (${part.ids.length} user) <span class="badge text-bg-${cls}">${status}</span>${action}</div>`;
                }).join('');
                $('#zipBatchModalBody').html(html);
            };
            const pollZipBatch = (batch) => {
                stopZipBatchPolling();
                const run = () => batch.parts.forEach((part) => {
                    if (!part.job_id || ['done', 'failed'].includes(part.status)) return;
                    $.getJSON(`{{ url('/attendance-review-v2/calculations/zip') }}/${part.job_id}/status`).done((resp) => {
                        const row = resp?.data || {};
                        Object.assign(part, { status: row.status || 'pending', download_url: row.download_url || '' });
                        localStorage.setItem(zipBatchStorageKey, JSON.stringify(batch)); renderZipBatch(batch);
                    });
                });
                run(); zipBatchPollTimer = setInterval(run, 3000);
            };
            const createZipParts = (batch) => {
                const part = batch.parts.find((item) => !item.job_id);
                if (!part) return pollZipBatch(batch);
                $.post('{{ route('attendance_review_v2.calculations.zip.request') }}', { profil_bulan_id: batch.profil_bulan_id, karyawan_ids: part.ids, date_from: batch.date_from, date_to: batch.date_to })
                    .done((resp) => { part.job_id = Number(extractQueueJobMeta(resp)?.job_id || 0); part.status = part.job_id ? 'pending' : 'failed'; localStorage.setItem(zipBatchStorageKey, JSON.stringify(batch)); renderZipBatch(batch); createZipParts(batch); })
                    .fail((xhr) => { part.status = 'failed'; part.error = xhr.responseJSON?.message || 'Gagal membuat job'; localStorage.setItem(zipBatchStorageKey, JSON.stringify(batch)); renderZipBatch(batch); createZipParts(batch); });
            };
            $('#btnExportZipUser').on('click', function () {
                const profilId = $('#profilBulanId').val();
                const ids = forcedKaryawanId ? [String(forcedKaryawanId)] : (($('#filterKaryawanId').val() || []).map(String).filter(Boolean));
                if (!profilId) return Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                if (!ids.length) return Swal.fire('Warning', 'Pilih minimal satu user untuk ZIP.', 'warning');
                const parts = []; for (let i = 0; i < ids.length; i += 30) parts.push({ ids: ids.slice(i, i + 30), status: 'pending' });
                const batch = { profil_bulan_id: profilId, date_from: $('#filterDateFrom').val() || '', date_to: $('#filterDateTo').val() || '', parts };
                localStorage.setItem(zipBatchStorageKey, JSON.stringify(batch)); $('#zipBatchModal').modal('show'); renderZipBatch(batch); createZipParts(batch);
            });
            $('#zipBatchModal').on('shown.bs.modal', function () { try { const batch = JSON.parse(localStorage.getItem(zipBatchStorageKey) || 'null'); if (batch?.parts?.length) { renderZipBatch(batch); pollZipBatch(batch); } } catch (_) {} });
            $('#btnClearZipBatch').on('click', function () { stopZipBatchPolling(); localStorage.removeItem(zipBatchStorageKey); $('#zipBatchModal').modal('hide'); });
            setTimeout(() => { try { if (JSON.parse(localStorage.getItem(zipBatchStorageKey) || 'null')?.parts?.length) $('#zipBatchModal').modal('show'); } catch (_) {} }, 700);

            $('#btnImportMachineLog').on('click', function () {
                $('#importMachineLogForm')[0].reset();
                $('#machineDelimiter').val('auto');
                $('#machineSource').val('x100c-flashdisk');
                $('#machineUploadProgressWrap').addClass('d-none');
                $('#machineUploadProgressBar').css('width', '0%').text('0%');
                $('#machineUploadProgressPercent').text('0%');
                $('#machineUploadProgressText').text('Uploading 0%');
                $('#btnSubmitImportMachineLog').prop('disabled', false);
                importMachineLogModal.show();
            });

            $('#btnSyncPublicApiLog').on('click', function () {
                $('#syncPublicApiForm')[0].reset();
                $('#publicApiStartDate').val(($('#filterDateFrom').val() || '').toString());
                $('#publicApiEndDate').val(($('#filterDateTo').val() || '').toString());
                $('#publicApiKey').val('');
                // Host API: prefer localStorage (per-browser), fallback to server default.
                try {
                    const saved = (localStorage.getItem('attendance_public_api_base_url') || '').toString().trim();
                    if (saved) {
                        $('#publicApiBaseUrl').val(saved);
                    }
                } catch (e) {}
                $('#btnSubmitSyncPublicApi').prop('disabled', false);
                $('#publicApiStatusBox').removeClass('alert-success alert-danger').addClass('alert-secondary');
                $('#publicApiStatusText').text('Belum dicek');
                $('#publicApiStatusDetail').text('Klik "Tes Koneksi" untuk cek endpoint aktif.');
                $('#publicApiOverrideKeyWrap').addClass('d-none');
                syncPublicApiModal.show();
            });

            $('#publicApiOverrideLock').on('change', function () {
                const checked = $(this).is(':checked');
                if (checked) {
                    $('#publicApiOverrideKeyWrap').removeClass('d-none');
                } else {
                    $('#publicApiOverrideKeyWrap').addClass('d-none');
                    $('#publicApiOverrideKey').val('');
                }
            });

            $('#btnTestSyncPublicApi').on('click', function () {
                const btn = $(this);
                btn.prop('disabled', true);
                const baseUrl = ($('#publicApiBaseUrl').val() || '').toString().trim();
                const apiKey = ($('#publicApiKey').val() || '').toString().trim();
                try { if (baseUrl) localStorage.setItem('attendance_public_api_base_url', baseUrl); } catch (e) {}
                $.post('{{ route('attendance_review_v2.logs.test_public_api') }}', { base_url: baseUrl, api_key: apiKey })
                    .done((resp) => {
                        $('#publicApiStatusBox').removeClass('alert-secondary alert-danger').addClass('alert-success');
                        $('#publicApiStatusText').text(resp?.message || 'API publik bisa diakses.');
                        const detail = [
                            `Endpoint aktif: ${resp?.endpoint || '-'}`,
                            `Sample rows: ${Number(resp?.count || 0)}`,
                            ...(Array.isArray(resp?.tried_endpoints) ? [`Tried: ${resp.tried_endpoints.join(' | ')}`] : []),
                        ].join(' | ');
                        $('#publicApiStatusDetail').text(detail);
                    })
                    .fail((xhr) => {
                        const resp = xhr.responseJSON || {};
                        $('#publicApiStatusBox').removeClass('alert-secondary alert-success').addClass('alert-danger');
                        $('#publicApiStatusText').text(resp?.message || 'Tes koneksi gagal');
                        const detail = [
                            resp?.endpoint ? `Endpoint terakhir: ${resp.endpoint}` : '',
                            Array.isArray(resp?.tried_endpoints) ? `Tried: ${resp.tried_endpoints.join(' | ')}` : '',
                        ].filter(Boolean).join(' | ');
                        $('#publicApiStatusDetail').text(detail || 'Periksa host API, route, atau API key.');
                    })
                    .always(() => btn.prop('disabled', false));
            });

            $('#importMachineLogForm').on('submit', function (e) {
                e.preventDefault();
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu.', 'warning');
                    return;
                }
                const file = $('#machineLogFile')[0].files[0];
                if (!file) {
                    Swal.fire('Warning', 'Pilih file log terlebih dahulu.', 'warning');
                    return;
                }

                const formData = new FormData();
                formData.append('profil_bulan_id', profilId);
                formData.append('file', file);
                formData.append('delimiter', ($('#machineDelimiter').val() || 'auto').toString());
                formData.append('source', ($('#machineSource').val() || 'x100c-flashdisk').toString());
                formData.append('device_code', ($('#machineDeviceCode').val() || '').toString());

                $('#machineUploadProgressWrap').removeClass('d-none');
                $('#machineUploadProgressBar').css('width', '0%').text('0%');
                $('#machineUploadProgressPercent').text('0%');
                $('#machineUploadProgressText').text('Uploading 0%');
                $('#btnSubmitImportMachineLog').prop('disabled', true);

                $.ajax({
                    url: '{{ route('attendance_review_v2.logs.import_machine') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    timeout: 0,
                    xhr: function () {
                        const xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            xhr.upload.addEventListener('progress', function (e) {
                                if (!e.lengthComputable) return;
                                const percent = Math.max(0, Math.min(100, Math.round((e.loaded / e.total) * 100)));
                                $('#machineUploadProgressBar').css('width', `${percent}%`).text(`${percent}%`);
                                $('#machineUploadProgressPercent').text(`${percent}%`);
                                $('#machineUploadProgressText').text(percent < 100 ? `Uploading ${percent}%` : 'Upload selesai, memproses di server...');
                            }, false);
                            xhr.upload.addEventListener('load', function () {
                                $('#machineUploadProgressBar').css('width', '100%').text('100%');
                                $('#machineUploadProgressPercent').text('100%');
                                $('#machineUploadProgressText').text('Upload selesai, memproses di server...');
                            }, false);
                        }
                        return xhr;
                    },
                    beforeSend: function () {
                        $('#machineUploadProgressText').text('Uploading 0%');
                    }
                })
                    .done((resp) => {
                        $('#machineUploadProgressBar').css('width', '100%').text('100%');
                        $('#machineUploadProgressPercent').text('100%');
                        importMachineLogModal.hide();
                        const payload = resp?.data ?? resp ?? {};
                        const jobMeta = extractQueueJobMeta(resp);
                        const jobId = Number(jobMeta?.job_id || 0);
                        if (jobId > 0) {
                            $('#machineUploadProgressText').text('Upload selesai, job masuk antrian...');
                            pollLogJobStatus(jobId);
                            Swal.fire('Queued', resp?.message || 'Upload log masuk antrian.', 'success');
                        } else if (isDirectMachineImportResponse(payload) || isDirectMachineImportResponse(resp)) {
                            $('#machineUploadProgressText').text('Import selesai.');
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            loadQueueHealth();
                            Swal.fire({
                                icon: Number(payload?.failed || 0) > 0 ? 'warning' : 'success',
                                title: resp?.message || payload?.message || 'Import log mesin selesai.',
                                html: machineImportSummaryHtml(payload),
                                width: 560
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Job id tidak valid',
                                html: `<pre class="text-start" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(JSON.stringify(resp || {}, null, 2))}</pre>`,
                                width: 720
                            });
                        }
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Import log mesin gagal', 'error'))
                    .always(() => {
                        $('#btnSubmitImportMachineLog').prop('disabled', false);
                    });
            });

            $('#btnSubmitSyncPublicApi').on('click', function (e) {
                e.preventDefault();
                $('#syncPublicApiForm').trigger('submit');
            });

            $('#syncPublicApiForm').on('submit', function (e) {
                e.preventDefault();
                const profilId = $('#profilBulanId').val();
                const karyawanIds = forcedKaryawanId
                    ? [String(forcedKaryawanId)]
                    : (($('#filterKaryawanId').val() || [])
                        .map((id) => String(id || '').trim())
                        .filter((id) => id !== ''));
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu.', 'warning');
                    return;
                }
                const startDate = ($('#publicApiStartDate').val() || '').toString();
                const endDate = ($('#publicApiEndDate').val() || '').toString();
                if (!startDate || !endDate) {
                    Swal.fire('Warning', 'Start date dan end date wajib diisi.', 'warning');
                    return;
                }
                const baseUrl = ($('#publicApiBaseUrl').val() || '').toString().trim();
                const apiKey = ($('#publicApiKey').val() || '').toString().trim();
                try { if (baseUrl) localStorage.setItem('attendance_public_api_base_url', baseUrl); } catch (e) {}

                const $syncBtn = $('#btnSubmitSyncPublicApi');
                const originalHtml = $syncBtn.data('original-html') || $syncBtn.html();
                $syncBtn.data('original-html', originalHtml);
                $syncBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Queueing...');
                $('#publicApiStatusBox').removeClass('alert-success alert-danger').addClass('alert-secondary');
                $('#publicApiStatusText').text('Mengirim job sync ke queue...');
                $('#publicApiStatusDetail').text('Tunggu sebentar, setelah job dibuat status progress akan muncul di halaman.');
                showBusySwal('Membuat job sync...', 'Mengirim permintaan Ambil & Proses ke queue attendance-review.');
                $.post('{{ route('attendance_review_v2.logs.sync_public_api') }}', {
                    profil_bulan_id: profilId,
                    attendance_profile_scope: 'all',
                    base_url: baseUrl,
                    api_key: apiKey,
                    start_date: startDate,
                    end_date: endDate,
                    sn: ($('#publicApiSn').val() || '').toString().trim(),
                    emp_code: ($('#publicApiEmpCode').val() || '').toString().trim(),
                    override_lock: $('#publicApiOverrideLock').is(':checked') ? 1 : 0,
                    override_key: ($('#publicApiOverrideKey').val() || '').toString().trim(),
                    rounding_rule_id: $('#roundingRuleId').val() || '',
                    run_detect_after_sync: 1,
                })
                    .done((resp) => {
                        syncPublicApiModal.hide();
                        const payload = resp?.data ?? resp ?? {};
                        const queueJobMeta = extractQueueJobMeta(resp);
                        const jobId = Number(queueJobMeta?.job_id || payload?.job_id || 0);
                        if (jobId > 0) {
                            pollLogJobStatus(jobId);
                            Swal.fire('Queued', resp?.message || 'Sync API masuk antrian.', 'success');
                        } else if (
                            Number(payload?.fetched || payload?.normalized || payload?.inserted || payload?.duplicates || 0) > 0
                            || String(resp?.message || payload?.message || '').toLowerCase().includes('sync api publik selesai')
                        ) {
                            syncPublicApiModal.hide();
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            const detectJobId = Number(payload?.detect_job_id || 0);
                            if (detectJobId > 0) {
                                pollDetectStatus(detectJobId);
                            }
                            const detectLine = detectJobId > 0
                                ? `<br>Run Detection: <b>Queue #${detectJobId}</b>`
                                : (payload?.detect_error ? `<br>Run Detection: <b class="text-danger">${escapeHtml(payload.detect_error)}</b>` : '');
                            const failedCount = Number(payload?.failed || 0);
                            const errorList = Array.isArray(payload?.errors) ? payload.errors.filter(Boolean) : [];
                            const formatSyncErrorItem = (item) => {
                                if (item == null) return '';
                                if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
                                    return String(item);
                                }
                                if (Array.isArray(item)) {
                                    return item.map((part) => formatSyncErrorItem(part)).filter(Boolean).join(' | ');
                                }
                                if (typeof item === 'object') {
                                    const msg = String(item.message || item.error || item.reason || '').trim();
                                    const code = String(item.code || '').trim();
                                    const row = item.row != null ? `row ${item.row}` : '';
                                    const logAt = String(item.log_at || item.punch_time || '').trim();
                                    const emp = String(item.employee_code || item.emp_code || item.finger_id || '').trim();
                                    const parts = [msg, code, row, emp, logAt].filter(Boolean);
                                    return parts.length ? parts.join(' | ') : JSON.stringify(item);
                                }
                                return String(item);
                            };
                            const errorPreview = failedCount > 0 && errorList.length
                                ? `
                                    <div class="text-start mt-3 p-2 rounded border bg-light">
                                        <div class="fw-bold mb-1 text-danger">Feedback Review Failed</div>
                                        <ul class="small mb-2 ps-3">
                                            ${errorList.slice(0, 3).map((item) => `<li>${escapeHtml(formatSyncErrorItem(item))}</li>`).join('')}
                                        </ul>
                                        <div class="small text-muted">Biasanya perlu cek mapping finger/employee code, lock ingest tanggal, atau format tanggal/jam dari API publik.</div>
                                    </div>
                                `
                                : '';
                            Swal.fire({
                                icon: 'success',
                                title: 'Sync API selesai',
                                html: `
                                    Fetched: <b>${Number(payload?.fetched || 0)}</b><br>
                                    Normalized: <b>${Number(payload?.normalized || 0)}</b><br>
                                    Inserted: <b>${Number(payload?.inserted || 0)}</b><br>
                                    Duplicate: <b>${Number(payload?.duplicates || 0)}</b><br>
                                    Failed: <b>${failedCount}</b>${detectLine}
                                    ${errorPreview}
                                `,
                                width: 720,
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Job id tidak valid',
                                html: `<pre class="text-start" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(JSON.stringify(resp || {}, null, 2))}</pre>`,
                                width: 720
                            });
                        }
                    })
                    .fail((xhr) => {
                        const resp = xhr.responseJSON || {};
                        Swal.fire('Error', [resp?.message || 'Sync API publik gagal', resp?.endpoint ? `Endpoint: ${resp.endpoint}` : '', Array.isArray(resp?.tried_endpoints) ? `Tried: ${resp.tried_endpoints.join(' | ')}` : ''].filter(Boolean).join('\n'), 'error');
                    })
                    .always(() => {
                        $syncBtn.prop('disabled', false).html(originalHtml);
                    });
            });

            $('#btnPreviewSyncPublicApi').on('click', function () {
                const startDate = ($('#publicApiStartDate').val() || '').toString();
                const endDate = ($('#publicApiEndDate').val() || '').toString();
                if (!startDate || !endDate) {
                    Swal.fire('Warning', 'Start date dan end date wajib diisi.', 'warning');
                    return;
                }

                const baseUrl = ($('#publicApiBaseUrl').val() || '').toString().trim();
                const apiKey = ($('#publicApiKey').val() || '').toString().trim();
                try { if (baseUrl) localStorage.setItem('attendance_public_api_base_url', baseUrl); } catch (e) {}

                const btn = $(this);
                btn.prop('disabled', true);
                showBusySwal('Preview API...', 'Mengambil sample data dari API publik.');
                $.post('{{ route('attendance_review_v2.logs.preview_public_api') }}', {
                    base_url: baseUrl,
                    api_key: apiKey,
                    start_date: startDate,
                    end_date: endDate,
                    sn: ($('#publicApiSn').val() || '').toString().trim(),
                    emp_code: ($('#publicApiEmpCode').val() || '').toString().trim(),
                })
                    .done((resp) => {
                        hideBusySwal();
                        const sample = Array.isArray(resp?.sample) ? resp.sample : [];
                        const previewText = sample.length
                            ? sample.map((row, idx) => `${idx + 1}. ${JSON.stringify(row)}`).join('\n')
                            : 'Tidak ada sample data.';
                        Swal.fire({
                            icon: 'info',
                            title: 'Preview API Publik',
                            html: `Total data: <b>${Number(resp?.total || 0)}</b><pre class=\"text-start mt-2\" style=\"max-height:300px;overflow:auto;white-space:pre-wrap;\">${escapeHtml(previewText)}</pre>`,
                            width: 760
                        });
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        const resp = xhr.responseJSON || {};
                        Swal.fire('Error', [resp?.message || 'Preview API publik gagal', resp?.endpoint ? `Endpoint: ${resp.endpoint}` : '', Array.isArray(resp?.tried_endpoints) ? `Tried: ${resp.tried_endpoints.join(' | ')}` : ''].filter(Boolean).join('\n'), 'error');
                    })
                    .always(() => {
                        hideBusySwal();
                        btn.prop('disabled', false);
                    });
            });

            $('#btnRepairMachineLog').on('click', function () {
                const source = ($('#machineSource').val() || 'x100c-flashdisk').toString().trim() || 'x100c-flashdisk';
                const deviceCode = ($('#machineDeviceCode').val() || '').toString().trim();

                Swal.fire({
                    title: 'Repair mapping log NULL?',
                    text: 'Sistem akan mencoba mapping karyawan dari finger_id/employee_code.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Repair',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post('{{ route('attendance_review_v2.logs.repair_mapping') }}', {
                        source,
                        device_code: deviceCode
                    })
                        .done((resp) => {
                            const d = resp?.data || {};
                            Swal.fire({
                                icon: 'success',
                                title: 'Repair selesai',
                                html: `Dicek: <b>${Number(d.checked || 0)}</b><br>Berhasil repair: <b>${Number(d.repaired || 0)}</b><br>Sisa NULL: <b>${Number(d.still_unmapped || 0)}</b>`
                            });
                            loadReviews();
                            refreshCalculationsIfLoaded();
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Repair mapping gagal', 'error'));
                });
            });

            const loadUnmappedLogs = () => {
                const source = ($('#machineSource').val() || 'x100c-flashdisk').toString().trim() || 'x100c-flashdisk';
                const deviceCode = ($('#machineDeviceCode').val() || '').toString().trim();
                $.getJSON('{{ route('attendance_review_v2.logs.unmapped') }}', {
                    source,
                    device_code: deviceCode,
                    limit: 1000
                }).done((resp) => {
                    const rows = Array.isArray(resp?.data) ? resp.data : [];
                    const meta = resp?.meta || {};
                    $('#unmappedInfo').text(`Total tampil: ${Number(meta.count || 0)} | Source: ${meta.source || '-'} | Device: ${meta.device_code || '-'}`);
                    $('#tblUnmappedLogBody').html(
                        rows.length
                            ? rows.map((r) => `
                                <tr>
                                    <td>${Number(r.id || 0)}</td>
                                    <td>${escapeHtml(r.log_at || '-')}</td>
                                    <td>${escapeHtml(r.finger_id || '-')}</td>
                                    <td>${escapeHtml(r.employee_code || '-')}</td>
                                    <td>${escapeHtml(r.log_type || '-')}</td>
                                    <td>${escapeHtml(r.source || '-')}</td>
                                    <td>${escapeHtml(r.device_code || '-')}</td>
                                    <td>${escapeHtml(r.notes || '-')}</td>
                                </tr>
                            `).join('')
                            : '<tr><td colspan="8" class="text-center text-muted">Tidak ada data NULL untuk filter ini.</td></tr>'
                    );
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data unmapped', 'error');
                });
            };

            $('#btnReviewUnmappedLog').on('click', function () {
                reviewUnmappedModal.show();
                loadUnmappedLogs();
            });

            $('#btnReloadUnmappedLog').on('click', function () {
                loadUnmappedLogs();
            });

            $('#reviewTable').on('click', '.btn-approve', function () {
                doApprove(Number($(this).data('id')));
            });

            $(document).on('click', '#btnRefreshDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                pollDetectStatus(jobId);
            });

            $(document).on('click', '#btnRefreshRebuildJob', function () {
                const jobId = Number($(this).data('id') || currentRebuildJobId || 0);
                if (jobId <= 0) return;
                pollRebuildStatus(jobId);
            });

            $(document).on('click', '#btnGoProfilBulan', function () {
                window.open('{{ url('/master-profil-bulan') }}', '_blank');
            });
            $('#reviewTable').on('click', '.btn-manual-time', function () {
                openManualTimeModal(Number($(this).data('id')));
            });
            $('#reviewTable').on('click', '.btn-shift-shortcut', function () {
                openShiftShortcutModal($(this));
            });

            $('#reviewTable').on('click', '.btn-attendance-question', function (e) {
                e.preventDefault();
                const id = Number($(this).data('id') || 0);
                if (!id || isPeriodClosed()) return;
                const employee = String($(this).data('employee') || '-');
                const workDate = String($(this).data('work-date') || '-');
                Swal.fire({
                    title: 'Kirim Question ke Android?',
                    html: `<div class="text-start"><b>${escapeHtml(employee)}</b><br>Tanggal: <b>${escapeHtml(workDate)}</b><br><small>Question hanya klarifikasi. Log mesin tidak berubah. Jika dijawab lupa finger, sistem membuat FC untuk approval.</small></div>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Kirim Question'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/question`, { _token: '{{ csrf_token() }}' })
                        .done((resp) => Swal.fire('Berhasil', resp.message || 'Question terkirim.', 'success'))
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membuat question.', 'error'));
                });
            });

            $('#reviewTable').on('click', '.btn-fc-request', function (e) {
                e.preventDefault();
                openForgettingClockQuickForm(readForgettingClockPayload($(this)));
            });

            $('#reviewTable').on('click', '.btn-history', function () {
                openHistory(Number($(this).data('id')));
            });
            $('#reviewTable').on('click', '.btn-reject-hours', function () {
                doRejectHours(Number($(this).data('id')));
            });
            $('#reviewTable').on('click', '.btn-restore-hours', function () {
                doRestoreHours(Number($(this).data('id')));
            });
            $('#reviewTable').on('click', '.btn-offline-approve', function () {
                doApproveOfflineLogs(Number($(this).data('id')));
            });
            $('#reviewTable').on('click', '.btn-offline-reject', function () {
                doRejectOfflineLogs(Number($(this).data('id')));
            });
            $('#btnSaveManualTime').on('click', function () {
                submitManualTime();
            });

            $('#btnResetPrediction').on('click', function () {
                const id = Number(currentManualReviewId || 0);
                if (!id) return;
                Swal.fire({
                    icon: 'warning',
                    title: 'Reset prediksi?',
                    text: 'Pairing/carry hasil prediksi dihapus. Raw log tidak dihapus. Setelah itu jalankan Run Deteksi.',
                    showCancelButton: true,
                    confirmButtonText: 'Reset Prediksi',
                    confirmButtonColor: '#dc3545'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/manual-time`, { reset_prediction: 1 })
                        .done((resp) => {
                            manualTimeModal.hide();
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Selesai', resp?.message || 'Prediksi direset.', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Reset prediksi gagal.', 'error'));
                });
            });

            $('#btnManualTimeCreateFc').on('click', function (e) {
                e.preventDefault();
                openManualTimeForgettingClockShortcut('both');
            });

            $('#manualTimeModal').on('click', '.btn-manual-fc-shortcut', function (e) {
                e.preventDefault();
                openManualTimeForgettingClockShortcut(String($(this).data('mode') || 'both'));
            });
            $('#manualShowNextDayLogs').on('change', function () {
                loadManualTimeLogOptions();
            });

            $('#matrixTable').on('click', '.btn-approve', function () {
                doApprove(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-manual-time', function () {
                openManualTimeModal(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-cancel-emergency-leave', function () {
                const id = Number($(this).data('id'));
                if (!id) return;
                Swal.fire({
                    icon: 'warning',
                    title: 'Batalkan leave emergency?',
                    text: 'Leave approved dibuka kembali sebagai draft. Setelah itu jalankan Run Deteksi untuk karyawan ini.',
                    input: 'text',
                    inputPlaceholder: 'Alasan pembatalan leave',
                    inputValidator: (value) => value ? undefined : 'Alasan wajib diisi.',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, batal leave',
                    confirmButtonColor: '#dc3545'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/cancel-emergency-leave`, { reason: result.value })
                        .done((resp) => {
                            loadReviews();
                            refreshCalculationsIfLoaded();
                            Swal.fire('Selesai', resp?.message || 'Leave dibatalkan.', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Batal leave gagal.', 'error'));
                });
            });
            $('#matrixTable').on('click', '.btn-shift-shortcut', function () {
                openShiftShortcutModal($(this));
            });
            $('#matrixTable').on('click', '.btn-clear-custom-shift', function (e) {
                e.preventDefault();
                e.stopPropagation();
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const workDate = String($(this).data('work-date') || '').trim();
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!karyawanId || !workDate || !profilId) {
                    Swal.fire('Warning', 'Data jadwal tidak valid.', 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Hapus jadwal harian?',
                    text: 'Jadwal akan dinonaktifkan, lalu rebuild dan run deteksi untuk tanggal ini.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post('{{ route('attendance_review_v2.shift_shortcut.store') }}', {
                        profil_bulan_id: profilId,
                        karyawan_id: karyawanId,
                        work_date: workDate,
                        clear_override: 1,
                        rebuild: 1,
                        detect: 1,
                    }).done((resp) => {
                        refreshAfterShiftShortcut(resp, resp?.message || 'Jadwal harian dihapus.');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus jadwal harian.', 'error');
                    });
                });
            });
            $('#btnSaveShiftShortcut').on('click', function () {
                submitShiftShortcut();
            });

            $('#matrixTable').on('click', '.btn-fc-request', function (e) {
                e.preventDefault();
                openForgettingClockQuickForm(readForgettingClockPayload($(this)));
            });

            $('#matrixTable').on('click', '.btn-history', function () {
                openHistory(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-reject-hours', function () {
                doRejectHours(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-restore-hours', function () {
                doRestoreHours(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-offline-approve', function () {
                doApproveOfflineLogs(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-offline-reject', function () {
                doRejectOfflineLogs(Number($(this).data('id')));
            });
            $('#matrixTable').on('click', '.btn-approve-date', function () {
                doApproveByDate(String($(this).data('date') || ''));
            });
            $('#matrixTable').on('click', '.btn-approve-user', function () {
                const $btn = $(this);
                const employeeLabel = [String($btn.data('karyawan-code') || '').trim(), String($btn.data('karyawan-name') || '').trim()]
                    .filter(Boolean)
                    .join(' - ');
                doApproveByUser(Number($btn.data('karyawan-id') || 0), employeeLabel);
            });
            $('#matrixTable').on('click', '.btn-unapprove-user', function () {
                const $btn = $(this);
                const employeeLabel = [String($btn.data('karyawan-code') || '').trim(), String($btn.data('karyawan-name') || '').trim()]
                    .filter(Boolean)
                    .join(' - ');
                doUnapproveByUser(Number($btn.data('karyawan-id') || 0), employeeLabel);
            });
            $('#matrixTable').on('click', '.btn-unapprove-date', function () {
                doUnapproveByDate(String($(this).data('date') || ''));
            });
            $('#matrixTable').on('click', '.matrix-row-warning-icon', function (e) {
                e.preventDefault();
                e.stopPropagation();
                openEmployeeActionModal(String($(this).data('karyawan-id') || '').trim());
            });

            // === Cell Detail Modal ===
            let currentCellDetailReviewId = null;
            let currentCellDetailEmp = null;
            let currentCellDetailWorkDate = null;

            let currentCellDetailSplRefId = null;
            let currentCellDetailSplStatus = null;

            const openCellDetailModal = (cell, emp) => {
                if (!cell) return;
                currentCellDetailReviewId = Number(cell.id || 0);
                currentCellDetailEmp = emp;
                currentCellDetailWorkDate = cell.work_date || '';
                const empCode = escapeHtml(getEmpCode(emp) || emp.employee_code || '-');
                const empName = escapeHtml(emp.employee_name || '-');
                const workDate = escapeHtml(cell.work_date || '-');
                const dayName = fmtDay(cell.work_date || '');
                $('#cellDetailTitle').text(`${empCode} - ${empName} | ${workDate} (${dayName})`);

                const isOffShift = String(cell.applied_shift_code || '').toLowerCase().trim() === 'off';
                const plannedIn = isOffShift ? '00:00' : (String(cell.planned_shift_start || '').slice(11, 16) || '-');
                const plannedOut = isOffShift ? '00:00' : (String(cell.planned_shift_end || '').slice(11, 16) || '-');
                const checkin = isOffShift ? '-' : String(cell.checkin_at || '-');
                const checkout = isOffShift ? '-' : String(cell.checkout_at || '-');
                const rawIn = isOffShift ? '-' : String(cell.raw_log_in_at || cell.suggested_checkin_at || '-');
                const rawOut = isOffShift ? '-' : String(cell.raw_log_out_at || cell.suggested_checkout_at || '-');
                const suggestedIn = isOffShift ? '-' : String(cell.suggested_checkin_at || '-');
                const suggestedOut = isOffShift ? '-' : String(cell.suggested_checkout_at || '-');
                const detailDate = String(cell.work_date || '');
                const todayDetail = new Date().toISOString().slice(0, 10);
                const hasPlannedDetail = Boolean(cell.planned_shift_start && cell.planned_shift_end);
                const isWaitingDetail = detailDate >= todayDetail && hasPlannedDetail;
                const status = escapeHtml((isWaitingDetail && !cell.checkin_at && !cell.checkout_at)
                    ? 'Waiting Shift'
                    : String(cell.effective_status || cell.status || '-').replaceAll('_', ' '));
                const tag = cell.attendance_tag_label || cell.attendance_tag || '-';
                const tagNotes = escapeHtml(cell.attendance_tag_notes || '-');
                const reason = escapeHtml((isWaitingDetail && !cell.checkin_at && !cell.checkout_at) ? 'Plan belum terlaksana.' : (cell.reason || '-'));
                const offBadge = isOffShift ? '<span class="badge text-bg-secondary ms-1">LIBUR</span>' : '';
                const conf = Number(cell.confidence_score || 0).toFixed(1);
                const approved = cell.is_approved ? '<span class="badge text-bg-success">Approved</span>' : '<span class="badge text-bg-warning text-dark">Pending</span>';
                const approvedAt = cell.approved_at ? escapeHtml(cell.approved_at) : '-';
                const shiftLabel = escapeHtml([cell.applied_shift_code, cell.applied_shift_name].filter(Boolean).join(' - ') || cell.planned_shift_code || '-');
                const isNight = cell.is_cross_day ? '<span class="badge text-bg-dark">Cross Day</span>' : '<span class="badge text-bg-light text-dark border">Normal</span>';
                const pairing = cell.pairing_role ? escapeHtml(`${cell.pairing_role}${cell.pairing_hint ? ' (' + cell.pairing_hint + ')' : ''}`) : '-';
                const holiday = cell.is_holiday ? escapeHtml(cell.holiday_name || 'Holiday') : '-';
                const flags = [];
                if (cell.needs_action) flags.push('<span class="badge text-bg-warning text-dark">Needs Action</span>');
                if (cell.offline_pending) flags.push('<span class="badge text-bg-warning text-dark">Offline Pending</span>');
                if (cell.missing_spl_overtime) flags.push('<span class="badge text-bg-danger">Missing SPL OT</span>');
                if (cell.needs_extend_spl) flags.push('<span class="badge text-bg-info">Need Extend SPL</span>');
                if (cell.needs_no_rest_normal_included) flags.push('<span class="badge text-bg-info">NoRest-1</span>');
                if (cell.needs_no_rest_skip_break) flags.push('<span class="badge text-bg-info">NoRest-2</span>');
                const flagsHtml = flags.length ? flags.join(' ') : '<span class="text-muted">-</span>';

                // SPL info
                const hasSpl = String(cell.attendance_tag || '').startsWith('overtime_');
                const splRefId = Number(cell.attendance_tag_reference_id || 0);
                const splStatus = String(cell.attendance_tag_status || '').toLowerCase();
                currentCellDetailSplRefId = splRefId;
                currentCellDetailSplStatus = splStatus;

                let splSectionHtml = '';
                if (hasSpl && splRefId > 0) {
                    const splStatusLabel = escapeHtml(cell.attendance_tag_label || 'SPL');
                    const splStatusBadge = splStatus === 'approved'
                        ? '<span class="badge text-bg-success">Approved</span>'
                        : (splStatus === 'draft' ? '<span class="badge text-bg-secondary">Draft</span>'
                            : (splStatus === 'submitted' || splStatus === 'in_review' ? '<span class="badge text-bg-info">In Review</span>'
                                : '<span class="badge text-bg-light text-dark border">' + escapeHtml(splStatus) + '</span>'));
                    const canModifySpl = ['draft', 'submitted', 'in_review', 'rejected'].includes(splStatus);
                    const splTypeLabel = cell.overtime_type_label || cell.overtime_type || 'Normal';
                    splSectionHtml = `
                    <div class="spl-modify-card">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <div class="detail-section-title mb-0"><i class="fas fa-file-signature"></i>SPL Overtime</div>
                            <div class="d-flex align-items-center gap-2">
                                ${splStatusBadge}
                                <button type="button" class="btn btn-sm btn-outline-danger btn-cell-detail-spl-delete" data-spl-id="${splRefId}" title="Hapus SPL ini"><i class="fas fa-trash"></i> Hapus</button>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div>
                                <div class="text-muted small">SPL #${splRefId}</div>
                                <div class="spl-current-type">${escapeHtml(splStatusLabel)}</div>
                            </div>
                            <div class="vr" style="height:36px;"></div>
                            <div>
                                <div class="text-muted small">Jenis Saat Ini</div>
                                <div class="spl-current-type">${escapeHtml(splTypeLabel)}<span class="spl-badge">OVERTIME</span></div>
                            </div>
                        </div>
                        <div class="small text-muted mb-2">${escapeHtml(tagNotes)}</div>
                        <div id="splModifyForm" class="${canModifySpl ? '' : 'd-none'}">
                            <div class="row g-2 align-items-end">
                                <div class="col">
                                    <label class="form-label small fw-semibold mb-1">Ubah Jenis Overtime</label>
                                    <select class="form-select form-select-sm" id="cellDetailSplType"></select>
                                </div>
                                <div class="col-auto">
                                    <button type="button" class="btn btn-sm btn-primary" id="btnCellDetailSplSave"><i class="fas fa-check me-1"></i>Simpan</button>
                                </div>
                            </div>
                        </div>
                        ${!canModifySpl ? '<div class="small text-danger mt-1"><i class="fas fa-lock me-1"></i>SPL sudah ' + escapeHtml(splStatus) + ', tidak bisa diubah.</div>' : ''}
                    </div>`;
                } else if (cell.missing_spl_overtime) {
                    splSectionHtml = `
                    <div class="spl-modify-card" style="background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fca5a5;">
                        <div class="detail-section-title mb-1" style="color:#dc2626;"><i class="fas fa-triangle-exclamation"></i>Belum Ada SPL</div>
                        <div class="small text-danger">Overtime ${Number(cell.missing_spl_overtime_minutes || 0)} menit tanpa SPL. Gunakan tombol SPL di toolbar karyawan untuk membuat SPL.</div>
                    </div>`;
                }

                const html = `
                <div class="detail-section">
                    <div class="detail-section-title"><i class="fas fa-clock"></i>Jam Kerja ${offBadge}</div>
                    <div class="detail-grid">
                        <div class="detail-label">Shift Planning</div>
                        <div class="detail-value">${escapeHtml(plannedIn)} / ${escapeHtml(plannedOut)} <span class="badge text-bg-light text-dark border ms-1">${shiftLabel}</span></div>
                        <div class="detail-label">Jam Actual</div>
                        <div class="detail-value">${checkin === '-' && checkout === '-' ? '-' : `${escapeHtml(checkin)} / ${escapeHtml(checkout)}`}</div>
                        <div class="detail-label">Raw Log</div>
                        <div class="detail-value">${rawIn === '-' && rawOut === '-' ? '-' : `${escapeHtml(rawIn)} / ${escapeHtml(rawOut)}`}</div>
                        <div class="detail-label">Suggested</div>
                        <div class="detail-value">${suggestedIn === '-' && suggestedOut === '-' ? '-' : `${escapeHtml(suggestedIn)} / ${escapeHtml(suggestedOut)}`}</div>
                    </div>
                </div>
                <div class="detail-section">
                    <div class="detail-section-title"><i class="fas fa-clipboard-check"></i>Status & Approval</div>
                    <div class="detail-grid">
                        <div class="detail-label">Effective Status</div>
                        <div class="detail-value">${status}</div>
                        <div class="detail-label">Reason</div>
                        <div class="detail-value">${reason}</div>
                        <div class="detail-label">Attendance Tag</div>
                        <div class="detail-value">${escapeHtml(tag)}</div>
                        <div class="detail-label">Tag Notes</div>
                        <div class="detail-value">${tagNotes}</div>
                        <div class="detail-label">Approval</div>
                        <div class="detail-value">${approved} &nbsp; <small class="text-muted">${approvedAt}</small></div>
                        <div class="detail-label">Confidence</div>
                        <div class="detail-value">${conf}%</div>
                        <div class="detail-label">Night / Cross Day</div>
                        <div class="detail-value">${isOffShift ? '<span class="badge text-bg-secondary">OFF</span>' : isNight}</div>
                        <div class="detail-label">Pairing</div>
                        <div class="detail-value">${isOffShift ? '-' : pairing}</div>
                        <div class="detail-label">Holiday</div>
                        <div class="detail-value">${holiday}</div>
                        <div class="detail-label">Flags</div>
                        <div class="detail-value">${isOffShift ? '<span class="text-muted">-</span>' : flagsHtml}</div>
                    </div>
                </div>
                ${splSectionHtml}`;
                $('#cellDetailBody').html(html);

                // Load SPL type options if form visible
                if (hasSpl && splRefId > 0 && ['draft', 'submitted', 'in_review', 'rejected'].includes(splStatus)) {
                    loadSplShortcutRefs().then(() => {
                        const splTypeOptions = (splShortcutRefs.splTypes || [])
                            .map((row) => `<option value="${row.value}" ${row.value === (cell.overtime_type || 'normal') ? 'selected' : ''}>${escapeHtml(row.label || row.value || '-')}</option>`)
                            .join('');
                        $('#cellDetailSplType').html(splTypeOptions || '<option value="normal">Normal</option>');
                    });
                }

                // Show/hide Modify SPL button in footer
                if (hasSpl && splRefId > 0) {
                    $('#btnCellDetailSpl').removeClass('d-none').data('spl-id', splRefId);
                } else {
                    $('#btnCellDetailSpl').addClass('d-none');
                }

                const cellDetailModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('cellDetailModal'));
                cellDetailModal.show();
            };

            // Event: klik cell di matrix table
            $('#matrixTable').on('click', '.matrix-cell', function (e) {
                if (e.target.closest('button, a, .btn-group')) return;
                const $td = $(this).closest('td');
                const $tr = $td.closest('tr');
                const karyawanId = String($tr.data('karyawan-id') || '');
                const colIndex = $tr.children('td').index($td) - 2;
                if (colIndex < 0 || colIndex >= lastVisibleDates.length) return;
                const workDate = lastVisibleDates[colIndex];
                const emp = lastMatrixEmployees.find((r) => String(r.karyawan_id || '') === karyawanId);
                if (!emp || !emp.byDate || !emp.byDate[workDate]) return;
                openCellDetailModal(emp.byDate[workDate], emp);
            });

            // Event: Modify Jam dari detail modal
            $('#btnCellDetailModify').on('click', function () {
                if (!currentCellDetailReviewId) return;
                const cellDetailModal = bootstrap.Modal.getInstance(document.getElementById('cellDetailModal'));
                if (cellDetailModal) cellDetailModal.hide();
                setTimeout(() => openManualTimeModal(currentCellDetailReviewId), 200);
            });

            // Event: Delete dari detail modal
            $('#btnCellDetailDelete').on('click', function () {
                if (!currentCellDetailReviewId) return;
                const reviewId = currentCellDetailReviewId;
                const empLabel = currentCellDetailEmp ? `${getEmpCode(currentCellDetailEmp)} - ${currentCellDetailEmp.employee_name || ''}` : '';
                const dateLabel = currentCellDetailWorkDate || '';
                Swal.fire({
                    title: 'Hapus Review?',
                    html: `Hapus data review <b>${escapeHtml(empLabel)}</b> tanggal <b>${escapeHtml(dateLabel)}</b>?<br><small class="text-muted">Tindakan ini tidak dapat dibatalkan.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    const cellDetailModal = bootstrap.Modal.getInstance(document.getElementById('cellDetailModal'));
                    if (cellDetailModal) cellDetailModal.hide();
                    Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
                    $.post(`{{ url('/attendance-review-v2/reviews') }}/${reviewId}/delete`, { _token: '{{ csrf_token() }}' })
                        .done((resp) => {
                            Swal.fire('Terhapus', resp?.message || 'Review berhasil dihapus.', 'success');
                            loadReviews();
                            refreshCalculationsIfLoaded();
                        })
                        .fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal menghapus review.', 'error'));
                });
            });
            // Event: Modify SPL Type dari detail modal (inline)
            $(document).on('click', '#btnCellDetailSplSave', function () {
                const splId = currentCellDetailSplRefId;
                const newType = String($('#cellDetailSplType').val() || 'normal').trim();
                if (!splId) return;
                const $btn = $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
                $.post(`{{ url('/surat-perintah-lembur') }}/${splId}/update-overtime-type`, {
                    overtime_type: newType,
                    _token: '{{ csrf_token() }}'
                })
                    .done((resp) => {
                        Swal.fire('Berhasil', resp?.message || 'Jenis SPL berhasil diubah.', 'success');
                        const cellDetailModal = bootstrap.Modal.getInstance(document.getElementById('cellDetailModal'));
                        if (cellDetailModal) cellDetailModal.hide();
                        loadReviews();
                        refreshCalculationsIfLoaded();
                    })
                    .fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal mengubah jenis SPL.', 'error'))
                    .always(() => $btn.prop('disabled', false).html('<i class="fas fa-check me-1"></i>Simpan'));
            });

            // Event: Cancel FC dari badge (x button)
            $(document).on('click', '.btn-fc-cancel', function (e) {
                e.preventDefault();
                e.stopPropagation();
                const fcId = Number($(this).data('fc-id') || 0);
                const fcNo = String($(this).data('fc-no') || '');
                if (!fcId) return;
                Swal.fire({
                    title: 'Batalkan FC?',
                    html: `Batalkan Forgetting Clock <b>${escapeHtml(fcNo)}</b>?<br><small class="text-muted">Status akan berubah menjadi cancelled.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'Ya, Batalkan',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    Swal.fire({ title: 'Membatalkan...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
                    $.post(`{{ url('/attendance-review-v2/forgetting-clock') }}/${fcId}/cancel`, { _token: '{{ csrf_token() }}' })
                        .done((resp) => {
                            Swal.fire('Dibatalkan', resp?.message || 'FC berhasil dibatalkan.', 'success');
                            loadReviews();
                            refreshCalculationsIfLoaded();
                        })
                        .fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal membatalkan FC.', 'error'));
                });
            });

            // Event: Hapus SPL dari detail modal
            $(document).on('click', '.btn-cell-detail-spl-delete', function () {
                const splId = Number($(this).data('spl-id') || 0);
                if (!splId) return;
                Swal.fire({
                    title: 'Hapus SPL?',
                    html: `Hapus SPL <b>#${splId}</b> dari record ini?<br><small class="text-muted">Tindakan ini tidak dapat dibatalkan.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    Swal.fire({ title: 'Menghapus SPL...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
                    $.ajax({
                        url: `{{ url('/surat-perintah-lembur') }}/${splId}`,
                        type: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        data: { force: true },
                    })
                        .done((resp) => {
                            Swal.fire('Terhapus', resp?.message || 'SPL berhasil dihapus.', 'success');
                            const cellDetailModal = bootstrap.Modal.getInstance(document.getElementById('cellDetailModal'));
                            if (cellDetailModal) cellDetailModal.hide();
                            loadReviews();
                            refreshCalculationsIfLoaded();
                        })
                        .fail((xhr) => Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal menghapus SPL.', 'error'));
                });
            });

            // Event: Modify SPL button di footer
            $('#btnCellDetailSpl').on('click', function () {
                if (!currentCellDetailSplRefId) return;
                const editUrl = buildSplEditUrl(currentCellDetailSplRefId);
                if (editUrl) window.open(editUrl, '_blank');
            });

            $('#employeeActionBody').on('click', '.btn-focus-matrix-cell', function () {
                employeeActionModal.hide();
                focusMatrixCell(String($(this).data('karyawan-id') || ''), String($(this).data('work-date') || ''));
            });
            $('#employeeActionBody').on('click', '.btn-approve', function () {
                doApprove(Number($(this).data('id')));
            });
            $('#employeeActionBody').on('click', '.btn-manual-time', function () {
                employeeActionModal.hide();
                openManualTimeModal(Number($(this).data('id')));
            });
            $('#employeeActionBody').on('click', '.btn-shift-shortcut', function () {
                employeeActionModal.hide();
                openShiftShortcutModal($(this));
            });
            $('#employeeActionBody').on('click', '.btn-fc-request', function (e) {
                e.preventDefault();
                employeeActionModal.hide();
                openForgettingClockQuickForm(readForgettingClockPayload($(this)));
            });
            $('#employeeActionBody').on('click', '.btn-bulk-spl-shortcut', function () {
                employeeActionModal.hide();
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const $source = $(`#matrixTable .btn-bulk-spl-shortcut[data-karyawan-id="${karyawanId}"]`).first();
                if ($source.length) {
                    $source.trigger('click');
                }
            });
            $('#matrixTable').on('click', '.btn-pick-user', function () {
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const karyawanCode = String($(this).data('karyawan-code') || '').trim();
                const karyawanName = String($(this).data('karyawan-name') || '').trim();
                if (!karyawanId) return;
                const $filter = $('#filterKaryawanId');
                const existingIds = ($filter.val() || [])
                    .map((id) => String(id || '').trim())
                    .filter(Boolean);

                forcedKaryawanId = '';
                let targetVal = '';

                const codeNeedle = karyawanCode.toLowerCase();
                const nameNeedle = karyawanName.toLowerCase();
                const $byText = $filter.find('option').filter(function () {
                    const txt = String($(this).text() || '').toLowerCase();
                    if (!txt || txt.includes('- semua user -')) return false;
                    if (codeNeedle && txt.includes(codeNeedle)) return true;
                    if (nameNeedle && txt.includes(nameNeedle)) return true;
                    return false;
                }).first();

                if ($byText.length) {
                    targetVal = String($byText.val() || '').trim();
                } else if (karyawanId && $filter.find(`option[value="${karyawanId}"]`).length > 0) {
                    targetVal = karyawanId;
                }
                if (!targetVal) {
                    const fallbackLabel = [karyawanCode, karyawanName].filter(Boolean).join(' - ') || karyawanId;
                    $filter.append(`<option value="${karyawanId}">${escapeHtml(fallbackLabel)}</option>`);
                    targetVal = karyawanId;
                }

                const nextIds = [...new Set(existingIds.concat(targetVal ? [targetVal] : []))];
                $filter.val(nextIds).trigger('change');
                currentPage = 1;
                loadReviews();
                refreshCalculationsIfLoaded();
                const section = document.getElementById('calcSection');
                if (section && typeof section.scrollIntoView === 'function') {
                    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });

            $('#matrixTable').on('dblclick', '.matrix-emp-code-pick', function () {
                const $code = $(this);
                const karyawanId = String($code.data('karyawan-id') || '').trim();
                const karyawanCode = String($code.data('karyawan-code') || '').trim();
                const karyawanName = String($code.data('karyawan-name') || '').trim();
                if (!karyawanId) return;
                const $filter = $('#filterKaryawanId');
                const existingIds = ($filter.val() || []).map(String).filter(Boolean);
                if (!$filter.find(`option[value="${karyawanId}"]`).length) {
                    const label = [karyawanCode, karyawanName].filter(Boolean).join(' - ') || karyawanId;
                    $filter.append(`<option value="${karyawanId}">${escapeHtml(label)}</option>`);
                }
                const nextIds = [...new Set(existingIds.concat(karyawanId))];
                $filter.val(nextIds).trigger('change');
                forcedKaryawanId = '';
                syncKaryawanFilterClearButton();
                Swal.fire({icon: 'success', title: 'User dipilih', text: `${karyawanCode || karyawanId} ditambahkan. Pilih user lain, lalu klik Terapkan.`, timer: 1500, showConfirmButton: false});
            });

            $('#matrixTable').on('click', '.btn-suggest-shift', function () {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum apply suggest shift.', 'warning');
                    return;
                }
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const karyawanCode = String($(this).data('karyawan-code') || '').trim();
                const karyawanName = String($(this).data('karyawan-name') || '').trim();
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!profilId || !karyawanId) {
                    Swal.fire('Warning', 'Profil bulan / karyawan tidak valid.', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Cek Suggest Shift...',
                    text: 'Menghitung rata-rata jam masuk aktual.',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.getJSON('{{ route('attendance_review_v2.detect.suggest_shift') }}', {
                    profil_bulan_id: profilId,
                    karyawan_id: karyawanId,
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || ''
                })
                    .done((resp) => {
                        const d = resp?.data || {};
                        const current = d.current_shift || {};
                        const suggested = d.suggested_shift || {};
                        const suggestChange = Boolean(d.suggest_change);
                        const candidates = Array.isArray(d.candidates) ? d.candidates : [];
                        const candidateTotal = Number(d.candidate_total || candidates.length || 0);
                        const sampleDays = Number(d.sample_days || 0);
                        const avgCheckin = d.avg_checkin_time || '-';

                        const infoHtml = `
                            <div class="text-start">
                                <div><b>${escapeHtml(karyawanCode)} - ${escapeHtml(karyawanName)}</b></div>
                                <div class="mt-2">Rata-rata jam masuk: <b>${escapeHtml(avgCheckin)}</b> (${sampleDays} hari sampel)</div>
                                <div class="mt-2">Profil saat ini: <b>${escapeHtml(current.code || '-')}</b> - ${escapeHtml(current.name || '-')} (${escapeHtml(current.start_time || '-')}-${escapeHtml(current.end_time || '-')}) | Selisih: ${Number(current.diff_minutes || 0)} menit</div>
                                <div class="mt-1">Suggest: <b>${escapeHtml(suggested.code || '-')}</b> - ${escapeHtml(suggested.name || '-')} (${escapeHtml(suggested.start_time || '-')}-${escapeHtml(suggested.end_time || '-')}) | Selisih: ${Number(suggested.diff_minutes || 0)} menit</div>
                                <div class="mt-2 text-muted">${escapeHtml(d.reason || '')}</div>
                            </div>`;

                        const optionsHtml = (candidates || []).map((c) => {
                            const val = Number(c.id || 0);
                            const selected = (val === Number(suggested.id || 0)) ? 'selected' : '';
                            const line = `${c.code || '-'} - ${c.name || '-'} (${c.start_time || '-'}-${c.end_time || '-'}) | Selisih ${Number(c.diff_minutes || 0)} menit`;
                            return `<option value="${val}" data-search="${escapeHtml(line.toLowerCase())}" ${selected}>${escapeHtml(line)}</option>`;
                        }).join('');

                        Swal.fire({
                            icon: suggestChange ? 'question' : 'info',
                            title: 'Suggest Shift',
                            width: 920,
                            html: `${infoHtml}
                                <div class="text-start mt-3">
                                    <label class="form-label mb-1"><b>Pilih Profil Jam Kerja</b> <span class="text-muted">(${candidateTotal} kandidat)</span></label>
                                    <input id="suggestShiftSearch" class="form-control form-control-sm mb-2" placeholder="Cari kode / nama / jam profil...">
                                    <select id="suggestShiftSelect" class="form-select form-select-sm" size="12" style="min-height:300px;">${optionsHtml}</select>
                                    <div class="small text-muted mt-1">Urutan berdasarkan selisih paling dekat. Ketik untuk filter pilihan.</div>
                                </div>`,
                            showCancelButton: true,
                            confirmButtonText: 'Terapkan Pilihan',
                            cancelButtonText: 'Batal',
                            didOpen: () => {
                                $('#suggestShiftSearch').on('input', function () {
                                    const keyword = String($(this).val() || '').trim().toLowerCase();
                                    $('#suggestShiftSelect option').each(function () {
                                        const text = String($(this).data('search') || $(this).text() || '').toLowerCase();
                                        $(this).toggle(!keyword || text.includes(keyword));
                                    });
                                });
                            }
                        }).then((result) => {
                            if (!result.isConfirmed) return;
                            if (isSelectedProfilClosed()) {
                                Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum apply suggest shift.', 'warning');
                                return;
                            }
                            const selectedId = Number($('#suggestShiftSelect').val() || 0);
                            if (selectedId <= 0) {
                                Swal.fire('Warning', 'Pilih profil jam kerja terlebih dahulu.', 'warning');
                                return;
                            }
                            $.post('{{ route('attendance_review_v2.detect.suggest_shift.apply') }}', {
                                profil_bulan_id: profilId,
                                karyawan_id: karyawanId,
                                suggested_profil_jam_kerja_id: selectedId
                            })
                                .done((applyResp) => {
                                    Swal.fire('Success', applyResp?.message || 'Suggestion diterapkan.', 'success');
                                    loadReviews();
                                    refreshCalculationsIfLoaded();
                                })
                                .fail((xhr) => {
                                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menerapkan suggestion', 'error');
                                });
                        });
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal cek suggest shift', 'error');
                    });
            });

            $('#matrixTable').on('click', '.btn-bulk-spl-shortcut', function () {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const karyawanCode = String($(this).data('karyawan-code') || '').trim();
                const karyawanName = String($(this).data('karyawan-name') || '').trim();
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!profilId || !karyawanId) {
                    Swal.fire('Warning', 'Profil bulan atau karyawan belum valid.', 'warning');
                    return;
                }
                openBulkSplShortcutModal(karyawanId, karyawanCode, karyawanName);
            });

            $('#matrixTable').on('click', '.btn-auto-ot-holiday-spl', function () {
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }
                const karyawanId = String($(this).data('karyawan-id') || '').trim();
                const karyawanCode = String($(this).data('karyawan-code') || '').trim();
                const karyawanName = String($(this).data('karyawan-name') || '').trim();
                const profilId = String($('#profilBulanId').val() || '').trim();
                if (!profilId || !karyawanId) {
                    Swal.fire('Warning', 'Profil bulan atau karyawan belum valid.', 'warning');
                    return;
                }
                openAutoOtHolidaySplModal(karyawanId, karyawanCode, karyawanName);
            });

            $('#autoOtHolidaySplCheckAll').on('change', function () {
                const checked = $(this).is(':checked');
                $('#autoOtHolidaySplCandidateBody .auto-ot-holiday-date-check:not(:disabled)').prop('checked', checked);
            });

            $('#btnBulkContinuesWorkday').on('click', function () {
                openBulkContinuesWorkdayModal();
            });

            $('#bulkContinuesWorkDate').on('change', renderBulkContinuesWorkdayCandidates);
            $('#bulkContinuesUnapprovedOnly').on('change', renderBulkContinuesWorkdayCandidates);
            $('#bulkContinuesCheckAll').on('change', function () {
                $('#bulkContinuesWorkdayBody .bulk-continues-row-check').prop('checked', $(this).is(':checked'));
            });
            $('#btnBulkContinuesSelectAll').on('click', function () {
                $('#bulkContinuesCheckAll').prop('checked', true);
                $('#bulkContinuesWorkdayBody .bulk-continues-row-check').prop('checked', true);
            });
            $('#btnBulkContinuesUnselectAll').on('click', function () {
                $('#bulkContinuesCheckAll').prop('checked', false);
                $('#bulkContinuesWorkdayBody .bulk-continues-row-check').prop('checked', false);
            });

            $('#bulkContinuesWorkdayForm').on('submit', function (e) {
                e.preventDefault();
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }

                const profilId = String($('#profilBulanId').val() || '').trim();
                const workDate = String($('#bulkContinuesWorkDate').val() || '').trim();
                const approvalFlowId = String($('#bulkContinuesFlowId').val() || '').trim();
                const processMode = String($('#bulkContinuesProcessMode').val() || 'approve').trim();
                const reason = String($('#bulkContinuesReason').val() || '').trim();
                const items = $('#bulkContinuesWorkdayBody tr[data-karyawan-id]').filter(function () {
                    return $(this).find('.bulk-continues-row-check').is(':checked');
                }).map(function () {
                    const $row = $(this);
                    return {
                        karyawan_id: String($row.data('karyawan-id') || '').trim(),
                        start_time: String($row.find('.continues-start-time').val() || '').trim(),
                        end_time: String($row.find('.continues-end-time').val() || '').trim(),
                    };
                }).get().filter((row) => row.karyawan_id && row.start_time && row.end_time);

                if (!profilId || !workDate || !approvalFlowId || !items.length) {
                    Swal.fire('Warning', 'Tanggal, flow approval, dan jam tiap karyawan wajib diisi.', 'warning');
                    return;
                }

                $('#btnSubmitBulkContinuesWorkday').prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1"></span>Proses...');
                showBusySwal('Memproses Continues Work Day...', `0 / ${items.length} karyawan.`);
                let bulkContinuesHandled = false;
                const chunks = [];
                for (let i = 0; i < items.length; i += 2) {
                    chunks.push(items.slice(i, i + 2));
                }
                const totals = { created: 0, updated: 0, submitted: 0, approved: 0, skipped: [] };

                const processBulkContinuesChunk = (index = 0) => {
                    const doneCount = chunks.slice(0, index).reduce((sum, chunk) => sum + chunk.length, 0);
                    $('.swal2-html-container .text-muted').text(`${doneCount} / ${items.length} karyawan.`);
                    if (index >= chunks.length) {
                        bulkContinuesHandled = true;
                        hideBusySwal();
                        bulkContinuesWorkdayModal.hide();
                        const skipped = totals.skipped;
                        Swal.fire({
                            icon: 'success',
                            title: 'Continues Work Day selesai',
                            html: `
                                Dibuat: <b>${Number(totals.created || 0)}</b><br>
                                Diupdate draft: <b>${Number(totals.updated || 0)}</b><br>
                                Disubmit: <b>${Number(totals.submitted || 0)}</b><br>
                                Langsung approved: <b>${Number(totals.approved || 0)}</b><br>
                                Skip: <b>${Number(skipped.length || 0)}</b>
                                ${skipped.length ? `<pre class="text-start mt-2" style="max-height:200px;overflow:auto;white-space:pre-wrap;">${escapeHtml(skipped.join('\n'))}</pre>` : ''}
                                <div class="text-start mt-2 small text-muted">Jalankan Run Deteksi agar pasangan next-day checkout terbaca.</div>
                            `,
                            width: 720
                        });
                        loadReviews();
                        refreshCalculationsIfLoaded();
                        $('#btnSubmitBulkContinuesWorkday').prop('disabled', false)
                            .html('<i class="fas fa-clock-rotate-left me-1"></i>Proses Continues');
                        return;
                    }

                    $.post('{{ route('attendance_review_v2.reviews.bulk_continues_workday') }}', {
                        profil_bulan_id: profilId,
                        work_date: workDate,
                        approval_flow_id: approvalFlowId,
                        process_mode: processMode,
                        reason: reason,
                        items: chunks[index],
                    })
                        .done((resp) => {
                            const data = resp?.data || {};
                            totals.created += Number(data.created || 0);
                            totals.updated += Number(data.updated || 0);
                            totals.submitted += Number(data.submitted || 0);
                            totals.approved += Number(data.approved || 0);
                            totals.skipped.push(...(Array.isArray(data.skipped) ? data.skipped : []));
                            processBulkContinuesChunk(index + 1);
                        })
                        .fail((xhr) => {
                            bulkContinuesHandled = true;
                            hideBusySwal();
                            const message = xhr.responseJSON?.message || xhr.responseText || 'Gagal membuat SPL Continues Work Day';
                            Swal.fire({
                                icon: 'error',
                                title: `Bulk Continues gagal batch ${index + 1}/${chunks.length}`,
                                html: `<pre class="text-start small mb-0" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(message)}</pre>`,
                                width: 760
                            });
                            $('#btnSubmitBulkContinuesWorkday').prop('disabled', false)
                                .html('<i class="fas fa-clock-rotate-left me-1"></i>Proses Continues');
                        });
                };

                processBulkContinuesChunk();

                $(document).one('ajaxStop.bulkContinues', () => {
                    if (!bulkContinuesHandled) {
                        hideBusySwal();
                    }
                    });
            });

            $('#bulkSplShortcutForm').on('submit', function (e) {
                e.preventDefault();
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }

                const profilId = String($('#profilBulanId').val() || '').trim();
                const karyawanId = String($('#bulkSplKaryawanId').val() || '').trim();
                let dateFrom = String($('#bulkSplDateFrom').val() || '').trim();
                let dateTo = String($('#bulkSplDateTo').val() || '').trim();
                const approvalFlowId = String($('#bulkSplFlowId').val() || '').trim();
                const dateMode = String($('#bulkSplDateMode').val() || 'suggested').trim();
                let selectedDates = dateMode === 'suggested'
                    ? $('#bulkSplCandidateDateBody .bulk-spl-date-check:checked')
                        .map(function () { return String($(this).val() || '').trim(); })
                        .get()
                        .filter(Boolean)
                    : [];

                if (dateMode === 'suggested') {
                    if (!selectedDates.length) {
                        Swal.fire('Warning', 'Pilih minimal satu tanggal kurang yang ingin dibuatkan SPL.', 'warning');
                        return;
                    }
                    const sortedDates = [...selectedDates].sort();
                    dateFrom = sortedDates[0] || '';
                    dateTo = sortedDates[sortedDates.length - 1] || '';
                }

                if (!profilId || !karyawanId || !dateFrom || !dateTo || !approvalFlowId) {
                    Swal.fire('Warning', 'Karyawan, tanggal, dan flow approval wajib diisi.', 'warning');
                    return;
                }

                const processMode = String($('#bulkSplProcessMode').val() || 'draft').trim();
                const targetMode = String($('#bulkSplTargetMode').val() || 'both').trim();
                const overtimeType = String($('#bulkSplType').val() || 'normal').trim();
                const reason = String($('#bulkSplReason').val() || '').trim();

                if (targetMode === 'selected_manual' && !selectedDates.length && dateFrom && dateTo) {
                    const fromMs = Date.parse(dateFrom + 'T00:00:00');
                    const toMs = Date.parse(dateTo + 'T00:00:00');
                    if (!Number.isNaN(fromMs) && !Number.isNaN(toMs) && toMs >= fromMs) {
                        const cursor = new Date(fromMs);
                        const endCursor = new Date(toMs);
                        while (cursor <= endCursor) {
                            const yyyy = cursor.getFullYear();
                            const mm = String(cursor.getMonth() + 1).padStart(2, '0');
                            const dd = String(cursor.getDate()).padStart(2, '0');
                            selectedDates.push(`${yyyy}-${mm}-${dd}`);
                            cursor.setDate(cursor.getDate() + 1);
                        }
                    }
                }

                $('#btnSubmitBulkSplShortcut').prop('disabled', true);
                showBusySwal('Memproses SPL otomatis...', 'Membuat data SPL dari baris Attendance Review yang memenuhi syarat.');

                $.post('{{ route('attendance_review_v2.reviews.bulk_spl_shortcut') }}', {
                    profil_bulan_id: profilId,
                    karyawan_id: karyawanId,
                    date_from: dateFrom,
                    date_to: dateTo,
                    approval_flow_id: approvalFlowId,
                    overtime_type: overtimeType,
                    target_mode: targetMode,
                    process_mode: processMode,
                    reason: reason,
                    selected_dates: selectedDates,
                })
                    .done((resp) => {
                        hideBusySwal();
                        bulkSplShortcutModal.hide();
                        const data = resp?.data || {};
                        const skipped = Array.isArray(data.skipped) ? data.skipped : [];
                        Swal.fire({
                            icon: 'success',
                            title: 'Pintasan SPL selesai',
                            html: `
                                Dibuat: <b>${Number(data.created || 0)}</b><br>
                                Disubmit: <b>${Number(data.submitted || 0)}</b><br>
                                Langsung approved: <b>${Number(data.approved || 0)}</b><br>
                                Skip: <b>${Number(skipped.length || 0)}</b>
                                ${skipped.length ? `<pre class="text-start mt-2" style="max-height:200px;overflow:auto;white-space:pre-wrap;">${escapeHtml(skipped.join('\n'))}</pre>` : ''}
                            `,
                            width: 720
                        });
                        loadReviews();
                        refreshCalculationsIfLoaded();
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membuat SPL otomatis', 'error');
                    })
                    .always(() => {
                        hideBusySwal();
                        $('#btnSubmitBulkSplShortcut').prop('disabled', false);
                    });
            });

            $('#autoOtHolidaySplForm').on('submit', function (e) {
                e.preventDefault();
                if (isSelectedProfilClosed()) {
                    Swal.fire('Profil Closed', 'Profil bulan sudah closed. Buka revisi dulu sebelum membuat SPL.', 'warning');
                    return;
                }

                const profilId = String($('#profilBulanId').val() || '').trim();
                const karyawanId = String($('#autoOtHolidaySplKaryawanId').val() || '').trim();
                const approvalFlowId = String($('#autoOtHolidaySplFlowId').val() || '').trim();
                const selectedDates = $('#autoOtHolidaySplCandidateBody .auto-ot-holiday-date-check:checked')
                    .map(function () { return String($(this).val() || '').trim(); })
                    .get()
                    .filter(Boolean);

                if (!profilId || !karyawanId || !approvalFlowId) {
                    Swal.fire('Warning', 'Karyawan dan flow approval wajib diisi.', 'warning');
                    return;
                }

                if (!selectedDates.length) {
                    Swal.fire('Warning', 'Pilih minimal satu tanggal non-workday yang ingin dibuatkan SPL.', 'warning');
                    return;
                }

                const processMode = String($('#autoOtHolidaySplProcessMode').val() || 'draft').trim();
                const overtimeType = String($('#autoOtHolidaySplType').val() || 'normal').trim();
                const reason = String($('#autoOtHolidaySplReason').val() || '').trim();

                $('#btnSubmitAutoOtHolidaySpl').prop('disabled', true);
                showBusySwal('Memproses SPL non-workday...', 'Membuat data SPL dari jam actual holiday special/holiday/weekend untuk karyawan AUTO OT.');

                $.post('{{ route('attendance_review_v2.reviews.auto_ot_holiday_weekend_spl') }}', {
                    profil_bulan_id: profilId,
                    karyawan_id: karyawanId,
                    selected_dates: selectedDates,
                    approval_flow_id: approvalFlowId,
                    overtime_type: overtimeType,
                    process_mode: processMode,
                    reason: reason,
                })
                    .done((resp) => {
                        hideBusySwal();
                        autoOtHolidaySplModal.hide();
                        const data = resp?.data || {};
                        const skipped = Array.isArray(data.skipped) ? data.skipped : [];
                        Swal.fire({
                            icon: 'success',
                            title: 'SPL non-workday selesai',
                            html: `
                                Dibuat: <b>${Number(data.created || 0)}</b><br>
                                Diupdate: <b>${Number(data.updated || 0)}</b><br>
                                Disubmit: <b>${Number(data.submitted || 0)}</b><br>
                                Langsung approved: <b>${Number(data.approved || 0)}</b><br>
                                Skip: <b>${Number(skipped.length || 0)}</b>
                                ${skipped.length ? `<pre class="text-start mt-2" style="max-height:200px;overflow:auto;white-space:pre-wrap;">${escapeHtml(skipped.join('\n'))}</pre>` : ''}
                            `,
                            width: 720
                        });
                        loadReviews();
                        refreshCalculationsIfLoaded();
                    })
                    .fail((xhr) => {
                        hideBusySwal();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membuat SPL non-workday', 'error');
                    })
                    .always(() => {
                        hideBusySwal();
                        $('#btnSubmitAutoOtHolidaySpl').prop('disabled', selectedDates.length <= 0);
                    });
            });

            $('#bulkSplTargetMode').on('change', rebuildBulkSplCandidates);
            $('#bulkSplDateMode').on('change', renderBulkSplCandidates);
            $('#bulkSplCheckAllDates').on('change', function () {
                const checked = $(this).is(':checked');
                $('#bulkSplCandidateDateBody .bulk-spl-date-check').prop('checked', checked);
            });

            $.when(loadRefs()).always(() => {
                syncContractHoursButton();
                applyDateBoundsFromProfile(false);
                refreshApproveAllButtonState();
                $('#periodLabel').text('Periode: pilih profil bulan lalu klik Terapkan.');
            });
        });
    </script>
@endpush