@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: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 10px;
            padding: 10px 14px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        }
        .loading-overlay .loading-text {
            font-size: 13px;
            color: #475569;
            margin-left: 10px;
        }

        .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;
        }
        #matrixContainer {
            max-height: 62vh;
            overflow: 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;
        }
        .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.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-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-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-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-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 .select2-selection--multiple {
            min-height: 31px;
            max-height: 40px;
            overflow-y: auto;
        }
        .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;
            padding: 4px 6px;
            border: 1px solid #2563eb;
            background: #dbeafe;
            border-radius: 7px;
        }
        .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 > 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: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .attendance-workflow-note {
            display: grid;
            gap: 5px;
            margin-top: 7px;
            font-size: 11px;
            line-height: 1.25;
        }
        .attendance-workflow-step {
            border-radius: 7px;
            padding: 6px 7px;
            border: 1px solid rgba(15, 23, 42, 0.16);
            background: rgba(255, 255, 255, 0.68);
            color: #0f172a;
        }
        .attendance-workflow-step b {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-right: 4px;
            color: #0f172a;
        }
        .attendance-workflow-step.is-required {
            border-color: #1d4ed8;
            background: #dbeafe;
        }
        .attendance-workflow-step.is-warning {
            border-color: #d97706;
            background: #fef3c7;
        }
        .attendance-main-actions .btn-group {
            width: 100%;
        }
        .attendance-main-actions .btn-group .btn {
            flex: 1 1 0;
        }
        .attendance-main-actions .btn {
            flex: 1 1 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-pending td {
            background: #fff7ed;
        }
        .matrix-row-pending .sticky-col {
            background: #ffedd5;
        }
        .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;
        }
        .history-diff-compact .diff-arrow {
            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); }
        }
    </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">
                                    <label class="form-label mb-1">Search / Filter User <span class="text-muted fw-normal">(bisa paste dari Excel)</span></label>
                                    <select id="filterKaryawanId" class="form-select form-select-sm" multiple>
                                        <option value="">- Semua User -</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <div class="btn-group btn-group-sm attendance-filter-actions" role="group" aria-label="Filter actions">
                                        <button class="btn btn-primary" id="btnApplyFilter"><i class="fas fa-filter me-1"></i>Filter</button>
                                        <button class="btn btn-secondary" id="btnResetFilter"><i class="fas fa-rotate-left me-1"></i>Reset</button>
                                        <button class="btn btn-dark" id="btnJumpPending"><i class="fas fa-arrow-down me-1"></i>Ke Pending</button>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="attendance-quick-tools btn-group-sm" role="group" aria-label="Filter cepat operator">
                                        <span class="small fw-bold text-primary-emphasis me-1">Cepat</span>
                                        <button class="btn btn-warning text-dark" id="btnShowPendingOnly"><i class="fas fa-triangle-exclamation me-1"></i>Pending</button>
                                        <button class="btn btn-warning text-dark" id="btnShowMissingOnly"><i class="fas fa-highlighter me-1"></i>Missing</button>
                                        <button class="btn btn-danger" id="btnShowNeedsSplOnly"><i class="fas fa-file-signature me-1"></i>Belum Ada SPL</button>
                                        <button class="btn btn-dark" id="btnToggleContractHours"><i class="fas fa-clock me-1"></i>Jam KS: Off</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-5 col-xl-2">
                        <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="btn-group btn-group-sm" role="group" aria-label="Export actions">
                                    <button class="btn btn-success" id="btnExportExcel"><i class="fas fa-file-excel me-1"></i>Excel</button>
                                    <button class="btn btn-success" id="btnExportActualExcel"><i class="fas fa-file-export me-1"></i>Actual</button>
                                    <button class="btn btn-danger" id="btnExportPdf"><i class="fas fa-file-pdf me-1"></i>PDF</button>
                                </div>
                                <button class="btn btn-sm btn-primary" id="btnRunDetect"><i class="fas fa-magnifying-glass me-1"></i>Run Deteksi</button>
                                <button class="btn btn-sm btn-primary" id="btnRebuildPlanning">
                                    <i class="fas fa-arrows-rotate me-1"></i>Rebuild Planning
                                </button>
                                <button class="btn btn-sm btn-success" id="btnApproveAllCheck">
                                    <i class="fas fa-check-double me-1"></i>Approve All (Cek)
                                </button>
                                <button class="btn btn-sm btn-secondary" id="btnProcessQueueNow">
                                    <i class="fas fa-play me-1"></i>Process Queue
                                </button>
                                <div class="attendance-workflow-note">
                                    <div class="attendance-workflow-step is-warning">
                                        <b><i class="fas fa-arrows-rotate"></i>1. Rebuild</b>
                                        hanya refresh planning shift/profil. Jam aktual belum dihitung ulang.
                                    </div>
                                    <div class="attendance-workflow-step is-required">
                                        <b><i class="fas fa-magnifying-glass"></i>2. Run Deteksi</b>
                                        wajib setelah ubah SPL, FC, atau manual time agar matrix ikut update.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-7 col-xl-3">
                        <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">
                                <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 class="btn btn-sm btn-dark" id="btnImportMachineLog">
                                        <i class="fas fa-upload me-1"></i>Upload .dat
                                    </button>
                                    <button class="btn btn-sm btn-primary" id="btnSyncPublicApiLog">
                                        <i class="fas fa-cloud-arrow-down me-1"></i>Ambil API
                                    </button>
                                    <button class="btn btn-sm btn-warning text-dark" id="btnRepairMachineLog">
                                        <i class="fas fa-wrench me-1"></i>Repair NULL
                                    </button>
                                    <button class="btn btn-sm btn-secondary" id="btnReviewUnmappedLog">
                                        <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">
                                        <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">
                                        <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="Sementara dinonaktifkan"><i class="fas fa-print me-1"></i>Sheet</button>
                                        <button class="btn btn-outline-primary" id="btnSendEmailPdf" disabled aria-disabled="true" title="Sementara 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="Sementara dinonaktifkan"><i class="fab fa-whatsapp me-1"></i>WA</button>
                                        <button class="btn btn-outline-primary" id="btnExportZipUser" disabled aria-disabled="true" title="Sementara dinonaktifkan"><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="mb-2 text-muted small" id="periodLabel">Periode: -</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="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="spinner-border spinner-border-sm" role="status" aria-hidden="true"></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">
        <div class="card-header">
            <h3 class="card-title m-0">Perhitungan Jam Attendance</h3>
        </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="spinner-border spinner-border-sm" role="status" aria-hidden="true"></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="spinner-border spinner-border-sm" role="status" aria-hidden="true"></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="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">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Koreksi Jam Manual</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <div class="text-muted small" id="manualTimeMeta">-</div>
                    </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label">Jam Masuk (HH:MM)</label>
                            <select class="form-select" id="manualCheckinTime"></select>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Jam Pulang (HH:MM)</label>
                            <select class="form-select" id="manualCheckoutTime"></select>
                            </div>
                        </div>
                    <div class="mt-2 p-2 rounded border bg-light">
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <span class="small fw-semibold text-muted me-auto">Shortcut Forgetting Clock</span>
                            <button type="button" class="btn btn-sm btn-outline-success btn-manual-fc-shortcut" data-mode="in">FC IN</button>
                            <button type="button" class="btn btn-sm btn-outline-warning btn-manual-fc-shortcut" data-mode="out">FC OUT</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-manual-fc-shortcut" data-mode="both">FC IN+OUT</button>
                        </div>
                        <div class="small text-muted mt-1">Pakai ini kalau koreksi perlu lewat pengajuan FC/approval, bukan override manual langsung.</div>
                    </div>
                    <div class="mt-2">
                        <label class="form-label">Catatan (opsional)</label>
                        <input type="text" class="form-control" id="manualTimeNotes" placeholder="Koreksi manual karena data trial." />
                    </div>
                    <div class="alert alert-warning mt-3 mb-0">
                        Jika jam pulang lebih kecil dari jam masuk, sistem akan anggap pulang di hari berikutnya.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning me-auto" id="btnManualTimeCreateFc">Buat FC</button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnSaveManualTime">Simpan Koreksi</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="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>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            $.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 autoOtHolidaySplModal = new bootstrap.Modal(document.getElementById('autoOtHolidaySplModal'));
            const reviewUnmappedModal = new bootstrap.Modal(document.getElementById('reviewUnmappedModal'));
            const manualTimeModal = new bootstrap.Modal(document.getElementById('manualTimeModal'));
            const splIndexUrl = @json(route('surat_perintah_lembur.index'));
            const buildSplEditUrl = (id) => id ? `${splIndexUrl}?open_id=${encodeURIComponent(id)}` : '';
            let refs = { profil_bulans: [], karyawans: [], roundings: [] };
            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 autoOtHolidayCandidates = [];
            let bulkSplShortcutCandidates = [];
            let currentPage = 1;
            let matrixEmployeeKeyword = '';

            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;
            let showContractHours = false;
            let forcedKaryawanId = '';
            let calcTable = null;
            let calcOtColumns = [];
            let reviewRequestSeq = 0;
            let calcRequestSeq = 0;
            const ENABLE_APPROVE_ALL_CHECK = true;

            const statusBadge = (status, row = null) => {
                const s = (status || 'no_log').toString();
                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',
                    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 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) : '-';

            // Non-blocking overlay helper for tables/sections.
            const setSectionLoading = (selector, isLoading, text = '') => {
                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 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 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 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}">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}">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}">Restore</button>`
                                : '';
                            const offlineApproveBtn = r.offline_pending
                                ? `<button class="btn btn-xs btn-outline-success btn-offline-approve me-1" data-id="${r.id}">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}">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"
                                title="Buat Forgetting Clock dari baris ini">FC</button>` : '';
                            const manualBtn = r.id
                                ? `<button class="btn btn-xs btn-outline-secondary btn-manual-time me-1" data-id="${r.id}">Koreksi Jam</button>`
                                : '';
                            // History button intentionally hidden (can still be accessed via API if needed).
                            return `${actionBadge}${offlineBadge}${approveBtn}${rejectBtn}${restoreBtn}${offlineApproveBtn}${offlineRejectBtn}${fcBtn}${manualBtn}`;
                        }
                    }
                ],
                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: true,
                    data: [],
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    columns: [
                        { data: null, render: (d, t, r, m) => 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-outline-primary" target="_blank" href="{{ route('attendance_review_v2.calculations.detail') }}?${params.toString()}">Open</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 resetCalculationView = () => {
                calcRows = [];
                calcMeta = { summary: {} };
                if (calcTable) calcTable.clear().draw();
                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-primary btn-approve-date" data-date="${d}">Apv</button>
                                <button class="btn btn-outline-danger 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>${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;
                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);
                }

                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 headClass = isPending ? 'matrix-date-head pending-approve' : 'matrix-date-head';
                        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-primary btn-approve-date" data-date="${d}">Apv</button>
                                    <button class="btn btn-outline-danger 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 missingSplBadgeRow = missingSplCount > 0
                        ? `<div class="mt-1"><span class="badge text-bg-danger" title="Ada overtime tanpa SPL (draft/submitted/in_review/approved)">${missingSplCount}x OT tanpa SPL</span></div>`
                        : '';
                    const extendSplBadgeRow = extendSplCount > 0
                        ? `<div class="mt-1"><span class="badge text-bg-warning text-dark" title="Ada SPL yang masih kurang dan butuh extend">${extendSplCount}x Butuh Extend SPL</span></div>`
                        : '';
                    const hasAutoOt = Object.values(emp.byDate || {}).some((c) => Boolean(c?.overtime_auto_without_spl));
                    const hasPending = isRowPending(emp);
                    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 noCol = `<td class="text-center">${idx + 1}</td>`;
                    const headCol = `<td class="sticky-col">
                        <div class="matrix-emp-code">${safeEmployeeCode}</div>
                        ${(!String(emp?.finger_id ?? '').trim() && looksLikeKtpNik(emp?.employee_code))
                            ? `<div class="small text-muted">EMP: ${escapeHtml(emp?.employee_code || '-')}</div>`
                            : ''}
                        <div class="btn-group btn-group-sm mt-1" role="group" aria-label="Row actions">
                            <button
                                class="btn btn-outline-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">
                                Search
                            </button>
                            <button
                                class="btn btn-outline-warning btn-suggest-shift"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                title="Suggest ganti profil jam kerja dari rata-rata jam masuk">
                                Suggest
                            </button>
                            ${!hasAutoOt ? `
                            <button
                                class="btn btn-outline-danger btn-bulk-spl-shortcut"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                title="Buat SPL otomatis untuk rentang tanggal terfilter">
                                SPL
                            </button>` : ''}
                            ${hasAutoOt ? `
                            <button
                                class="btn btn-outline-secondary btn-auto-ot-holiday-spl"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                title="Buat SPL non-workday dari jam actual untuk karyawan AUTO OT">
                                SPL Libur
                            </button>` : ''}
                        </div>
                        <div class="matrix-row-actions">
                            <button
                                class="btn btn-xs btn-primary btn-approve-user"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                ${pendingUserCount > 0 ? '' : 'disabled'}
                                title="Approve semua item pending untuk user ini pada range aktif">
                                Apv User${pendingUserCount > 0 ? ` (${pendingUserCount})` : ''}
                            </button>
                            <button
                                class="btn btn-xs btn-danger btn-unapprove-user"
                                data-karyawan-id="${emp.karyawan_id || ''}"
                                data-karyawan-code="${escapeHtml(getEmpCode(emp) || '')}"
                                data-karyawan-name="${escapeHtml(emp.employee_name || '')}"
                                title="Unapprove semua item approved untuk user ini pada range aktif">
                                UnApv User
                            </button>
                        </div>
                        <div class="matrix-emp-name">${safeEmployeeName}</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>';
                        }
                        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' : ''}`;
                            return `<td><div class="${contractCellClass}">
                                <div class="mb-1">${statusBadge(cell.effective_status, cell)}</div>
                                ${labelHtml}
                                ${noteHtml}
                                ${contractTimeHtml}
                                ${contractHint}
                            </div></td>`;
                        }
                        if (cell.attendance_tag === 'leave_approved') {
                            const leaveBadge = `<span class="badge text-bg-primary">${cell.attendance_tag_label || 'Leave Approved'}</span>`;
                            const reviewBadge = cell.is_approved
                                ? '<span class="badge text-bg-success ms-1">Approved</span>'
                                : '<span class="badge text-bg-secondary ms-1">Draft</span>';
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            return `<td><div class="matrix-cell status-has-time">${leaveBadge}${reviewBadge}${note}</div></td>`;
                        }

                        const hasTime = Boolean(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 reviewBadge = cell.is_approved
                                ? '<span class="badge text-bg-success ms-1">Approved</span>'
                                : '<span class="badge text-bg-secondary ms-1">Draft</span>';
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            return `<td><div class="matrix-cell status-has-time">${otBadge}${reviewBadge}${note}</div></td>`;
                        }
                        if (!hasTime && (cell.attendance_tag || '').startsWith('forgetting_clock_')) {
                            const fcBadge = `<span class="badge badge-fc-orange">${cell.attendance_tag_label || 'FC'}</span>`;
                            const reviewBadge = cell.is_approved
                                ? '<span class="badge text-bg-success ms-1">Approved</span>'
                                : '<span class="badge text-bg-secondary ms-1">Draft</span>';
                            const note = cell.attendance_tag_notes ? `<div><small>${cell.attendance_tag_notes}</small></div>` : '';
                            return `<td><div class="matrix-cell status-has-time">${fcBadge}${reviewBadge}${note}</div></td>`;
                        }
                        if (!hasTime) {
                            const reviewBadge = cell.is_approved
                                ? '<span class="badge text-bg-success ms-1">Approved</span>'
                                : '<span class="badge text-bg-secondary ms-1">Draft</span>';
                            const noLogReason = cell.reason ? `<div><small>${escapeHtml(cell.reason)}</small></div>` : '';
                            return `<td><div class="matrix-cell status-no_log"><span class="badge text-bg-secondary">No Log</span>${reviewBadge}${noLogReason}</div></td>`;
                        }

                        const actualCrossDate = Boolean(
                            cell.checkin_at &&
                            cell.checkout_at &&
                            cell.checkin_at.slice(0, 10) !== cell.checkout_at.slice(0, 10)
                        );
                        const isNightShift = Boolean(cell.is_cross_day);
                        const shownIn = cell.checkin_at ? cell.checkin_at.slice(11, 16) : '-';
                        const shownOut = cell.checkout_at ? cell.checkout_at.slice(11, 16) : '-';
                        const ioText = `${shownIn} / ${shownOut}`;
                        // "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 || '';
                        const rawOutSrc = cell.raw_log_out_at || cell.suggested_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 = forceShowRaw || (rawIn && rawIn !== shownIn) || (rawOut && rawOut !== shownOut);
                        const rawIo = showRaw
                            ? `<div class="matrix-io-raw"><b>asli</b> ${rawIn || shownIn} / ${rawOut || shownOut}</div>`
                            : '';
                        const isPendingCell = Boolean(cell.id) && !cell.is_approved && cell.attendance_tag !== 'leave_approved';
                        const pendingBadge = isPendingCell ? '<span class="badge text-bg-warning text-dark">Pending</span>' : '';
                        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 tagBadge = cell.attendance_tag
                            ? `<div class="mb-1"><span class="badge ${cell.attendance_tag === 'leave_approved' ? 'text-bg-primary' : (cell.attendance_tag === 'overtime_approved' ? 'badge-spl-purple' : ((cell.attendance_tag || '').startsWith('forgetting_clock_') ? 'badge-fc-orange' : 'text-bg-secondary'))}" title="${cell.attendance_tag_notes || ''}">${cell.attendance_tag_label || cell.attendance_tag}</span></div>`
                            : '';
                        const customScheduleBadge = cell.is_custom_schedule && cell.applied_shift_code
                            ? `<div class="mb-1"><span class="badge text-bg-dark" title="Jadwal shifting harian">Jadwal ${escapeHtml(cell.applied_shift_code)}</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 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 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}">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}">Tolak</button>`
                            : '';
                        const btnRestoreHours = cell.can_restore_hours
                            ? `<button class="btn btn-xs btn-outline-success btn-restore-hours" data-id="${cell.id}">Restore</button>`
                            : '';
                        const btnOfflineApprove = cell.offline_pending
                            ? `<button class="btn btn-xs btn-outline-success btn-offline-approve" data-id="${cell.id}">Apv Of</button>`
                            : '';
                        const btnOfflineReject = cell.offline_pending
                            ? `<button class="btn btn-xs btn-outline-danger btn-offline-reject" data-id="${cell.id}">Rjt Of</button>`
                            : '';
                        const btnManual = cell.id
                            ? `<button class="btn btn-xs btn-outline-secondary btn-manual-time" data-id="${cell.id}">Edit</button>`
                            : '';
                        // 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"
                            title="Buat Forgetting Clock dari tanggal ini">FC</button>` : '';
                        const needsActionBadge = cell.needs_action ? '<span class="badge text-bg-warning text-dark">Action</span>' : '';
                        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 +1</span></div>'
                            : '';
                        const pairingRole = String(cell.pairing_role || '').trim().toLowerCase();
                        const pairingRoleBadge = isNightShift && pairingRole
                            ? `<div class="mb-1"><span class="night-role-badge ${pairingRole === 'anchor' ? 'anchor' : (pairingRole === 'carry' ? 'carry' : 'paired')}">${pairingRole === 'anchor' ? 'Anchor' : (pairingRole === 'carry' ? 'Carry' : 'Paired')}</span></div>`
                            : '';
                        const pairingBadge = 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 cellClass = `matrix-cell${visualStatusClass}${nightClass}`;
                        const displayStatus = cell.missing_spl_overtime
                            ? 'needs_spl'
                            : (cell.needs_extend_spl
                                ? 'needs_extend_spl'
                                : ((cell.needs_no_rest_normal_included || cell.needs_no_rest_skip_break)
                                    ? 'needs_no_rest'
                                    : (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}
                                <div class="mb-1">${statusBadge(displayStatus, cell)}</div>
                                <div class="mb-1">${pendingBadge}</div>
                                ${nightBadge}
                                ${crossDateBadge}
                                ${pairingRoleBadge}
                                ${pairingBadge}
                                ${customScheduleBadge}${holidayBadge}${autoOtBadge}${tagBadge}
                                ${offlineBadge}
                                ${missingSplBadge}
                                ${extendSplBadge}
                                ${noRestNormalIncludedBadge}
                                ${noRestSkipBreakBadge}
                                <div class="matrix-io">${ioText}</div>
                                ${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}${btnHistory}
                                </div>
                            </div>
                        </td>`;
                    }).join('');

                    const rowClass = hasPending ? 'matrix-row-pending' : '';
                    return `<tr class="${rowClass}">${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">→</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);
                }

                $profil.select2({
                    theme: 'bootstrap-5',
                    width: '260px',
                    placeholder: 'Cari profil bulan...',
                    allowClear: false,
                    ajax: {
                        url: '{{ url('/attendance-review-v2/refs/profil-bulans') }}',
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({
                            q: params.term || '',
                            page: params.page || 1
                        }),
                        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);
                });
            };

            const selectedKaryawanIds = () => {
                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));
                const nextIds = [...new Set(existingIds.concat(uniqueIds))];
                $('#filterKaryawanId').val(nextIds).trigger('change');
                forcedKaryawanId = '';
                currentPage = 1;
                loadReviews();
                loadCalculations();

                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 loadRefs = () => {
                return $.getJSON('{{ route('attendance_review_v2.refs') }}').done((resp) => {
                    refs = resp.data || refs;
                    const profilBulans = refs.profil_bulans || [];
                    const preferredProfil = profilBulans.find((r) => ['open', 'running', 'draft'].includes(String(r.status || '').toLowerCase()))
                        || profilBulans[0];
                    initProfilBulanSelect(preferredProfil || null);
                    $('#filterKaryawanId').html((refs.karyawans || []).map((r) => `<option value="${r.id}">${escapeHtml(getKaryawanPasteLabel(r))}</option>`).join(''));
                    if ($('#filterKaryawanId').data('select2')) {
                        $('#filterKaryawanId').select2('destroy');
                    }
                    $('#filterKaryawanId').select2({
                        theme: 'bootstrap-5',
                        width: '220px',
                        placeholder: 'Semua user / paste dari Excel',
                        allowClear: true,
                        closeOnSelect: false
                    });
                    bindKaryawanPasteSearch();
                    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>');
                        const preferredAutoOtFlowValue = pickPreferredApprovalFlowValue($('#autoOtHolidaySplFlowId'));
                        if (preferredAutoOtFlowValue) {
                            $('#autoOtHolidaySplFlowId').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 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();
                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 (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 || [];
                        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();
                        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);
                        $('#btnRebuildPlanning').prop('disabled', totalEmployees <= 0);
                        refreshApproveAllButtonState();
                        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', false);
                        $('#btnRebuildPlanning').prop('disabled', false);
                        refreshApproveAllButtonState();
                        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 loadCalculations = () => {
                const profilId = $('#profilBulanId').val();
                if (!profilId) {
                    resetCalculationView();
                    return;
                }
                setSectionLoading('#calcTableWrap', true, 'Memuat perhitungan...');
                // Hindari data profil sebelumnya masih tampil saat profile/filter diganti.
                resetCalculationView();
                const reqSeq = ++calcRequestSeq;
                const requestedProfilId = String(profilId);
                const params = withKaryawanFilterParams({
                    profil_bulan_id: profilId,
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || ''
                });
                $.getJSON('{{ route('attendance_review_v2.calculations.data') }}', params)
                    .done((resp) => {
                        if (reqSeq !== calcRequestSeq || String($('#profilBulanId').val() || '') !== requestedProfilId) {
                            return;
                        }
                        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 || ''));
                        if (!calcTable || prevKey !== nextKey) {
                            buildCalcTable(incomingOtCols);
                        }
                        calcTable.clear().rows.add(calcRows).draw();
                        renderCalcSummary();
                    })
                    .fail((xhr) => {
                        if (reqSeq !== calcRequestSeq || String($('#profilBulanId').val() || '') !== requestedProfilId) {
                            return;
                        }
                        resetCalculationView();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load attendance calculations', 'error');
                    })
                    .always(() => {
                        if (reqSeq === calcRequestSeq && String($('#profilBulanId').val() || '') === requestedProfilId) {
                            setSectionLoading('#calcTableWrap', false);
                        }
                    });
            };

            const doApprove = (id) => {
                $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/approve`)
                    .done((resp) => {
                        loadReviews();
                        loadCalculations();
                        Swal.fire('Success', resp?.message || 'Approved', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Approve failed', '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 $in = $('#manualCheckinTime');
                const $out = $('#manualCheckoutTime');
                $in.html('<option value="">- Pilih Log -</option>');
                $out.html('<option value="">- Pilih Log -</option>');

                $.getJSON(`{{ url('/attendance-review-v2/reviews') }}/${id}/log-options`)
                    .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 currentInValue = (resp?.meta?.current_in_datetime || (currentIn ? `${row.work_date} ${currentIn}` : '')).toString();
                        const currentOutValue = (resp?.meta?.current_out_datetime || (currentOut ? `${row.work_date} ${currentOut}` : '')).toString();
                        const recommendedInValue = (resp?.meta?.recommended_in_datetime || '').toString();
                        const recommendedOutValue = (resp?.meta?.recommended_out_datetime || '').toString();

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

                                    return {
                                        value,
                                        label: `${labelParts.shift()}${labelParts.length ? ` (${labelParts.join(' - ')})` : ''}`.trim()
                                    };
                                })
                                .filter(Boolean)
                                .sort((a, b) => a.value.localeCompare(b.value));

                            let html = '<option value="">- Pilih Log -</option>';
                            if (currentValue) {
                                html += `<option value="${currentValue}">${currentLabel}</option>`;
                                seen.add(currentValue);
                            }
                            normalized.forEach((opt) => {
                                html += `<option value="${opt.value}">${opt.label}</option>`;
                            });
                            $target.html(html);
                            $target.val(selectedValue || currentValue || '');
                        };

                        buildManualLogOptions($in, checkinOptions, currentInValue, `${currentInValue} (current)`, recommendedInValue || currentInValue);
                        buildManualLogOptions($out, checkoutOptions, currentOutValue, `${currentOutValue} (current)`, recommendedOutValue || currentOutValue);
                        manualTimeModal.show();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load log options', 'error');
                    });
            };

            const submitManualTime = () => {
                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()
                };
                $.post(`{{ url('/attendance-review-v2/reviews') }}/${id}/manual-time`, payload)
                    .done((resp) => {
                        manualTimeModal.hide();
                        loadReviews();
                        loadCalculations();
                        Swal.fire('Success', resp?.message || 'Koreksi jam tersimpan.', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Koreksi jam gagal', 'error'));
            };

            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') => {
                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;
                    $.post(`{{ route('attendance_review_v2.reviews.approve_by_date') }}`, {
                        profil_bulan_id: profilId,
                        work_date: workDate,
                        review_ids: reviewIds
                    })
                        .done((resp) => {
                            loadReviews();
                            loadCalculations();
                            Swal.fire('Success', resp?.message || 'Bulk approve selesai', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk approve gagal', 'error'));
                });
            };

            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 || 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;
                }

                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,
                        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();
                    loadCalculations();
                    Swal.fire('Success', `Approve cek aman selesai. Approved: ${totalApproved}, Skip: ${totalSkipped}. Skip berarti perlu SPL/FC/manual atau Run ulang.`, 'success');
                } catch (xhr) {
                    Swal.fire('Error', xhr?.responseJSON?.message || 'Approve all gagal', '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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
                            loadCalculations();
                            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();
            };

            $('#profilBulanId').on('change', function () {
                forcedKaryawanId = '';
                applyDateBoundsFromProfile(true);
                loadReviews();
                loadCalculations();
            });
            $('#filterDateFrom, #filterDateTo').on('change', function () {
                applyDateBoundsFromProfile(false);
            });
            $('#filterKaryawanId').on('change', function () {
                forcedKaryawanId = '';
            });
            $('#perPage').on('change', function () {
                currentPage = 1;
                loadReviews();
                loadCalculations();
            });
            $('#btnApplyFilter').on('click', function () {
                currentPage = 1;
                loadReviews();
                loadCalculations();
            });
            $('#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;
                showContractHours = 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');
                $('#btnToggleContractHours').removeClass('active').addClass('btn-dark')
                    .html('<i class="fas fa-clock me-1"></i>Jam KS: Off');
                loadReviews();
                loadCalculations();
            });
            $('#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;
                $(this)
                    .toggleClass('active', showContractHours)
                    .addClass('btn-dark')
                    .html(`<i class="fas fa-clock me-1"></i>Jam KS: ${showContractHours ? 'On' : 'Off'}`);
                renderMatrix();
            });
            $('#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);
            };

            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);
            };
            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;
            const stopDetectPolling = () => {
                if (detectPollTimer) {
                    clearInterval(detectPollTimer);
                    detectPollTimer = null;
                }
            };
            const stopRebuildPolling = () => {
                if (rebuildPollTimer) {
                    clearInterval(rebuildPollTimer);
                    rebuildPollTimer = null;
                }
            };
            const stopQueueHealthPolling = () => {
                if (queueHealthTimer) {
                    clearInterval(queueHealthTimer);
                    queueHealthTimer = 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 = () => {
                $.getJSON('{{ route('attendance_review_v2.queue.health') }}', { queue: attendanceQueueName })
                    .done((resp) => {
                        renderQueueHealth(resp?.data || {});
                    });
            };
            const startQueueHealthPolling = () => {
                stopQueueHealthPolling();
                loadQueueHealth();
                queueHealthTimer = setInterval(loadQueueHealth, 5000);
            };
            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();
                                loadCalculations();
                                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();
                                  loadCalculations();
                                  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();
                                  loadCalculations();
                                  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()
                };
                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(),
                    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();
                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 triggerActualRecordExport = () => {
                const profilId = $('#profilBulanId').val();
                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() || ''),
                }));
                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();
                                loadCalculations();
                                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');
            });
            $('#btnExportActualExcel').on('click', function () {
                triggerActualRecordExport();
            });
            $('#btnExportPdf').on('click', function () {
                triggerExport('pdf');
            });
            $('#btnPrintSheet').on('click', function () {
                if (this.disabled) return;
                const profilId = $('#profilBulanId').val();
                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'));
            });
            $('#btnExportZipUser').on('click', function () {
                if (this.disabled) return;
                const profilId = $('#profilBulanId').val();
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan dulu', 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Generate ZIP PDF per user?',
                    text: 'Proses dijalankan di background. Anda bisa lanjut kerja sambil menunggu.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Generate',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post('{{ route('attendance_review_v2.calculations.zip.request') }}', {
                        profil_bulan_id: profilId,
                        karyawan_id: selectedSingleKaryawanId(),
                        date_from: $('#filterDateFrom').val() || '',
                        date_to: $('#filterDateTo').val() || '',
                    }).done((resp) => {
                        const jobMeta = extractQueueJobMeta(resp);
                        const jobId = Number(jobMeta?.job_id || 0);
                        if (jobId > 0) {
                            pollZipStatus(jobId);
                            Swal.fire('Queued', resp?.message || 'Job ZIP masuk antrian.', 'success');
                        } 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 || 'Gagal membuat job ZIP', 'error'));
                });
            });

            $('#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();
                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();
                            loadCalculations();
                            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();
                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,
                    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();
                            loadCalculations();
                            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();
                            loadCalculations();
                        })
                        .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-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();
            });

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

            $('#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-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', '.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);

                if (existingIds.length > 0) {
                    forcedKaryawanId = '';
                    currentPage = 1;
                    loadReviews();
                    loadCalculations();
                    const section = document.getElementById('calcSection');
                    if (section && typeof section.scrollIntoView === 'function') {
                        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                    return;
                }

                forcedKaryawanId = karyawanId;
                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;
                }

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

            $('#matrixTable').on('click', '.btn-suggest-shift', 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();
                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 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}" ${selected}>${escapeHtml(line)}</option>`;
                        }).join('');

                        Swal.fire({
                            icon: suggestChange ? 'question' : 'info',
                            title: 'Suggest Shift',
                            html: `${infoHtml}
                                <div class="text-start mt-3">
                                    <label class="form-label mb-1"><b>Pilih Profil Jam Kerja</b></label>
                                    <select id="suggestShiftSelect" class="form-select form-select-sm">${optionsHtml}</select>
                                </div>`,
                            showCancelButton: true,
                            confirmButtonText: 'Terapkan Pilihan',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (!result.isConfirmed) 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();
                                    loadCalculations();
                                })
                                .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 () {
                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 () {
                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);
            });

            $('#bulkSplShortcutForm').on('submit', function (e) {
                e.preventDefault();

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

                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();
                        loadCalculations();
                    })
                    .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(() => {
                applyDateBoundsFromProfile(true);
                startQueueHealthPolling();
                refreshApproveAllButtonState();
                loadReviews();
                loadCalculations();
            });
        });
    </script>
@endpush