@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: #fff;
        }
        #matrixTable thead th.sticky-col {
            z-index: 7;
        }

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

        .matrix-date-head {
            text-align: center;
            min-width: 160px;
        }
        .matrix-date-head.pending-approve {
            font-style: italic;
            color: #b45309;
        }
        .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/name visible (custom sizes; avoid Bootstrap heading classes). */
        .matrix-io {
            /* ~H3 size, responsive */
            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-filter-panel #filterKaryawanId + .select2-container .select2-selection--multiple {
            min-height: 34px;
            max-height: 118px;
            overflow-y: auto;
        }
        .attendance-action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }
        @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-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="card mb-3" id="calcSection">
        <div class="card-header attendance-toolbar-sticky">
            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-2">
                <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-end">
                    <div class="col-12 col-md-4 col-xl-3">
                        <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-md-3 col-xl-2">
                        <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-md-3 col-xl-2">
                        <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-md-2 col-xl-1">
                        <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-12 col-md-4 col-xl-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 col-xl-auto">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Filter actions">
                            <button class="btn btn-outline-primary" id="btnApplyFilter"><i class="fas fa-filter me-1"></i>Filter</button>
                            <button class="btn btn-outline-secondary" id="btnResetFilter"><i class="fas fa-rotate-left me-1"></i>Reset</button>
                            <button class="btn btn-outline-warning" id="btnShowPendingOnly"><i class="fas fa-triangle-exclamation me-1"></i>Pending</button>
                            <button class="btn btn-outline-warning" id="btnShowMissingOutOnly"><i class="fas fa-right-from-bracket me-1"></i>Missing OUT</button>
                            <button class="btn btn-outline-secondary" id="btnJumpPending"><i class="fas fa-arrow-down me-1"></i>Ke Pending</button>
                        </div>
                    </div>
                    <div class="col-12 attendance-user-filter">
                        <label class="form-label mb-1">Filter User <span class="text-muted fw-normal">(bisa paste banyak baris Excel)</span></label>
                        <select id="filterKaryawanId" class="form-select form-select-sm" multiple>
                            <option value="">- Semua User -</option>
                        </select>
                    </div>
                </div>
                <div class="attendance-action-row mt-2">
                    <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-success" id="btnExportExcel"><i class="fas fa-file-excel me-1"></i>Excel</button>
                    <button class="btn btn-outline-danger" id="btnExportPdf"><i class="fas fa-file-pdf me-1"></i>PDF</button>
                    <button class="btn btn-outline-dark" id="btnPrintSheet"><i class="fas fa-print me-1"></i>Sheet</button>
                    <button class="btn btn-outline-primary" id="btnSendEmailPdf"><i class="fas fa-envelope me-1"></i>Kirim Email</button>
                    <button class="btn btn-outline-success" id="btnSendWaReport"><i class="fab fa-whatsapp me-1"></i>Kirim WA</button>
                    <button class="btn btn-outline-primary" id="btnExportZipUser"><i class="fas fa-file-archive me-1"></i>ZIP Per User</button>
                    </div>
                    <div class="btn-group btn-group-sm" role="group" aria-label="Import and Sync">
                    <button class="btn btn-outline-dark" id="btnImportMachineLog">
                        <i class="fas fa-upload me-1"></i>Upload .dat
                    </button>
                    <button class="btn btn-outline-primary" id="btnSyncPublicApiLog">
                        <i class="fas fa-cloud-arrow-down me-1"></i>Ambil API
                    </button>
                    <button class="btn btn-outline-warning" id="btnRepairMachineLog">
                        <i class="fas fa-wrench me-1"></i>Repair NULL
                    </button>
                    <button class="btn btn-outline-secondary" id="btnReviewUnmappedLog">
                        <i class="fas fa-list me-1"></i>Review NULL
                    </button>
                    <a href="{{ route('attendance_review.summary') }}" class="btn btn-outline-info">
                        <i class="fas fa-table-list me-1"></i>Summary
                    </a>
                    <a href="{{ route('attendance_history_retention_settings.index') }}" class="btn btn-outline-dark">
                        <i class="fas fa-database me-1"></i>Retensi Histori
                    </a>
                    </div>
                    <div class="btn-group" role="group" aria-label="Main actions">
                    <button class="btn btn-outline-secondary" id="btnProcessQueueNow">
                        <i class="fas fa-play me-1"></i>Process Queue
                    </button>
                    <button class="btn btn-outline-primary" id="btnRebuildPlanning">
                        <i class="fas fa-arrows-rotate me-1"></i>Rebuild Planning
                    </button>
                    <button class="btn btn-outline-success" id="btnApproveAllCheck">
                        <i class="fas fa-check-double me-1"></i>Approve All (Cek)
                    </button>
                    <button class="btn btn-primary" id="btnRunDetect"><i class="fas fa-magnifying-glass me-1"></i>Run</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <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="alert alert-info py-2 px-3 mb-2">
                <strong>Info Run:</strong> tombol <strong>Run</strong> menjalankan deteksi attendance dari log absensi ke review harian sesuai profil bulan terpilih (shift, pembulatan jam, dan aturan SPL).
            </div>
            <div class="alert alert-secondary py-2 px-3 mb-2">
                <strong>Info Rebuild:</strong> tombol <strong>Rebuild Planning</strong> menyamakan ulang planning shift dari assignment profil terbaru. Baris approved yang planning-nya berubah akan kembali ke draft untuk direview ulang.
            </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-2 col-6"><div class="calc-stat"><div class="label">Jam Aktual / Efektif</div><div class="value" data-k="actual_hours">0</div></div></div>
                <div class="col-md-2 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-2 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-2 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 Aktual / Efektif</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">
                        <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-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="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 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 reviewRows = [];
            let calcRows = [];
            let reviewMeta = { holiday_map: {}, workday_map: {}, pagination: { page: 1, total_pages: 1 } };
            let calcMeta = { summary: {} };
            let currentPage = 1;
            let matrixEmployeeKeyword = '';
            let showPendingOnly = false;
            let showMissingOutOnly = 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',
                    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;
            };

            // 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 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 holidayName = String(r.holiday_name || '').toLowerCase();
                            const isWeekend = holidayName === 'weekend';
                            const isSpl = String(r.attendance_tag || '').startsWith('overtime_');
                            if (isWeekend && isSpl) {
                                return `<span class="badge badge-weekend-ot" title="Weekend + SPL">Weekend Lembur</span>`;
                            }
                            if (!isWeekend && isSpl) {
                                return `<span class="badge badge-holiday-ot" title="${r.holiday_name || 'Holiday'} + SPL">Holiday Lembur</span>`;
                            }
                            return `<span class="badge text-bg-danger" title="${r.holiday_name || 'Holiday'}">Libur</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'));
                            const badge = `<span class="badge ${badgeClass}" title="${r.attendance_tag_notes || ''}">${r.attendance_tag_label || r.attendance_tag}</span>`;
                            const editUrl = String(r.attendance_tag || '').startsWith('overtime_')
                                ? buildSplEditUrl(Number(r.attendance_tag_reference_id || 0))
                                : '';
                            return editUrl ? `<a href="${escapeHtml(editUrl)}" target="_blank">${badge}</a>` : badge;
                        }
                    },
                    { 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"
                                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 Aktual</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: 'actual_hours', render: (v) => Number(v || 0).toFixed(2) },
                        { 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.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 holidayMap = reviewMeta?.holiday_map || {};
                const workdayMap = reviewMeta?.workday_map || {};
                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 holiday = holidayMap[d];
                    const workday = workdayMap[d];
                    let mark = '';
                    if (holiday) {
                        mark = `<br><span class="badge text-bg-danger holiday-mark" title="${holiday}">Libur</span>`;
                    } else if (workday) {
                        mark = `<br><span class="badge text-bg-success holiday-mark" title="${workday}">Workday</span>`;
                    }
                    return `<th class="matrix-date-head">${fmtShortDate(d)}<br><small class="text-muted">${fmtDay(d)}</small>${mark}<br>
                        <button class="btn btn-xs btn-outline-primary btn-approve-date mt-1" data-date="${d}">Apv All</button>
                        <button class="btn btn-xs btn-outline-danger btn-unapprove-date mt-1" data-date="${d}">UnApv</button>
                    </th>`;
                }).join('');
                $thead.html(`<tr><th style="min-width:48px;">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 isRowMissingOut = (emp) => visibleDates.some((d) => {
                    const cell = emp.byDate[d];
                    const status = String(cell?.effective_status || cell?.status || '').toLowerCase();
                    return status === 'missing_out';
                });
                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 (showMissingOutOnly) {
                    filteredOrdered = filteredOrdered.filter(isRowMissingOut);
                }

                if (!filteredOrdered.length) {
                    const emptyText = showMissingOutOnly
                        ? 'Tidak ada karyawan dengan status Missing OUT 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 holiday = holidayMap[d];
                        const workday = workdayMap[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
                            ? `<br><small class="text-warning-emphasis">Pending ${pendingCount}/${stat.total}</small>`
                            : '';
                        let mark = '';
                        if (holiday) {
                            mark = `<br><span class="badge text-bg-danger holiday-mark" title="${holiday}">Libur</span>`;
                        } else if (workday) {
                            mark = `<br><span class="badge text-bg-success holiday-mark" title="${workday}">Workday</span>`;
                        }
                        return `<th class="${headClass}" title="${tooltip}">${fmtShortDate(d)}<br><small class="text-muted">${fmtDay(d)}</small>${mark}${pendingMark}<br>
                            <button class="btn btn-xs btn-outline-primary btn-approve-date mt-1" data-date="${d}">Apv All</button>
                            <button class="btn btn-xs btn-outline-danger btn-unapprove-date mt-1" data-date="${d}">UnApv</button>
                        </th>`;
                    })
                    .join('');
                $thead.html(`<tr><th style="min-width:48px;">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 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 hasPending = isRowPending(emp);
                    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>
                        </div>
                        <div class="matrix-emp-name">${safeEmployeeName}</div>
                        ${missingSplBadgeRow}
                        ${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>` : '';
                            return `<td><div class="matrix-cell status-blank">
                                <div class="mb-1">${statusBadge(cell.effective_status, cell)}</div>
                                ${labelHtml}
                                ${noteHtml}
                            </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 isNightShift = Boolean(
                            cell.checkin_at &&
                            cell.checkout_at &&
                            cell.checkin_at.slice(0, 10) !== cell.checkout_at.slice(0, 10)
                        );
                        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 holidayName = String(cell.holiday_name || '').toLowerCase();
                        const isWeekend = holidayName === 'weekend';
                        const isHoliday = Boolean(cell.is_holiday);
                        const isSpl = String(cell.attendance_tag || '').startsWith('overtime_');
                        const holidayBadge = (isSpl && isWeekend)
                            ? `<div class="mb-1"><span class="badge badge-weekend-ot" title="Weekend + SPL">Weekend Lembur</span></div>`
                            : ((isSpl && isHoliday)
                                ? `<div class="mb-1"><span class="badge badge-holiday-ot" title="${cell.holiday_name || 'Holiday'} + SPL">Holiday Lembur</span></div>`
                                : '');
                        const tagBadgeClass = 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'));
                        const tagBadgeInner = cell.attendance_tag
                            ? `<span class="badge ${tagBadgeClass}" title="${cell.attendance_tag_notes || ''}">${cell.attendance_tag_label || cell.attendance_tag}</span>`
                            : '';
                        const tagEditUrl = String(cell.attendance_tag || '').startsWith('overtime_')
                            ? buildSplEditUrl(Number(cell.attendance_tag_reference_id || 0))
                            : '';
                        const tagBadge = tagBadgeInner
                            ? `<div class="mb-1">${tagEditUrl ? `<a href="${escapeHtml(tagEditUrl)}" target="_blank">${tagBadgeInner}</a>` : tagBadgeInner}</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 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"
                            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 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}${isNightShift ? ' night-shift' : ''}`;

                        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(cell.effective_status || cell.status, cell)}</div>
                                <div class="mb-1">${pendingBadge}</div>
                                ${nightBadge}
                                ${holidayBadge}${autoOtBadge}${tagBadge}
                                ${offlineBadge}
                                ${missingSplBadge}
                                ${extendSplBadge}
                                <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/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/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 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 findKaryawanFromPasteToken = (token) => {
                const raw = String(token || '').trim();
                const compact = normalizePasteKey(raw);
                if (!compact) return null;
                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);
                    return (code && raw.toLowerCase() === code)
                        || (codeCompact && compact === codeCompact)
                        || (codeCompact && compact.includes(codeCompact))
                        || (empCode && raw.toLowerCase() === empCode)
                        || (empCodeCompact && compact === empCodeCompact)
                        || (empCodeCompact && compact.includes(empCodeCompact))
                        || (finger && raw.toLowerCase() === finger)
                        || (fingerCompact && compact === fingerCompact)
                        || (fingerCompact && compact.includes(fingerCompact))
                        || (name && raw.toLowerCase() === name)
                        || (nameCompact && compact === nameCompact);
                }) || 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.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(r.code || '-')} - ${escapeHtml(r.name || '-')}</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 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 loadReviews = () => {
                const profilId = $('#profilBulanId').val();
                if (!profilId) {
                    reviewRows = [];
                    reviewTable.clear().draw();
                    renderMatrix();
                    return;
                }
                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: currentPage,
                    per_page: $('#perPage').val() || 50
                });
                if (showMissingOutOnly) {
                    params.status_filter = 'missing_out';
                }
                $.getJSON('{{ route('attendance_review.reviews.data') }}', params)
                    .done((resp) => {
                        if (reqSeq !== reviewRequestSeq || String($('#profilBulanId').val() || '') !== requestedProfilId) {
                            return;
                        }
                        reviewRows = resp.data || [];
                        reviewMeta = resp.meta || { holiday_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: {}, 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.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/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/reviews') }}/${id}/log-options`)
                    .done((resp) => {
                        const data = Array.isArray(resp?.data) ? resp.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 buildManualLogOptions = ($target, currentValue, currentLabel) => {
                            const seen = new Set();
                            const normalized = data
                                .map((opt) => {
                                    const value = (opt?.datetime || '').toString().trim();
                                    if (!value || seen.has(value) || value === currentValue) {
                                        return null;
                                    }
                                    seen.add(value);
                                    return {
                                        value,
                                        label: `${value}${opt?.source ? ` (${opt.source})` : ''}`.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>`;
                            }
                            normalized.forEach((opt) => {
                                html += `<option value="${opt.value}">${opt.label}</option>`;
                            });
                            $target.html(html);
                            $target.val(currentValue || '');
                        };

                        buildManualLogOptions($in, currentInValue, `${currentInValue} (current)`);
                        buildManualLogOptions($out, currentOutValue, `${currentOutValue} (current)`);
                        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/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'));
            };

            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="form-check form-switch text-start mt-2 p-3 rounded" style="background:#ecfdf3;border:1px solid rgba(25,135,84,.25);">
                                    <input class="form-check-input" type="checkbox" id="quickFcAutoApprove" checked>
                                    <label class="form-check-label fw-semibold" for="quickFcAutoApprove">Langsung approve oleh Admin/HRD</label>
                                    <div class="small text-muted mt-1">Jika aktif, FC dibuat, 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')}</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 && $('#quickFcAutoApprove').is(':checked') ? '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.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 refreshApproveAllButtonState = () => {
                const $btn = $('#btnApproveAllCheck');
                if (!ENABLE_APPROVE_ALL_CHECK) {
                    $btn.addClass('d-none');
                    return;
                }
                $btn.removeClass('d-none');
                $btn.prop('disabled', getVisibleDraftReviewRows().length <= 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 rows = getVisibleDraftReviewRows();
                if (!rows.length) {
                    Swal.fire('Info', 'Tidak ada item draft yang perlu di-approve.', 'info');
                    return;
                }

                const idsByDate = {};
                rows.forEach((r) => {
                    const workDate = String(r.work_date || '').trim();
                    const reviewId = Number(r.id || 0);
                    if (!workDate || reviewId <= 0) return;
                    if (!idsByDate[workDate]) idsByDate[workDate] = [];
                    idsByDate[workDate].push(reviewId);
                });
                const dates = Object.keys(idsByDate).sort();
                if (!dates.length) {
                    Swal.fire('Info', 'Tidak ada tanggal valid untuk diproses.', 'info');
                    return;
                }

                const confirm = await Swal.fire({
                    title: 'Approve semua item draft terfilter?',
                    text: `${rows.length} item, ${dates.length} tanggal`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, approve all'
                });
                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;
                    for (const workDate of dates) {
                        const resp = await $.post(`{{ route('attendance_review.reviews.approve_by_date') }}`, {
                            profil_bulan_id: profilId,
                            work_date: workDate,
                            review_ids: idsByDate[workDate]
                        });
                        totalApproved += Number(resp?.data?.approved || 0);
                        totalSkipped += Number(resp?.data?.skipped || 0);
                    }

                    loadReviews();
                    loadCalculations();
                    Swal.fire('Success', `Approve all selesai. Approved: ${totalApproved}, Skip: ${totalSkipped}.`, '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.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 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/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/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/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/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 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;
                showMissingOutOnly = false;
                $('#btnShowPendingOnly').removeClass('btn-warning').addClass('btn-outline-warning')
                    .html('<i class="fas fa-triangle-exclamation me-1"></i>Pending');
                $('#btnShowMissingOutOnly').removeClass('btn-warning').addClass('btn-outline-warning')
                    .html('<i class="fas fa-right-from-bracket me-1"></i>Missing OUT');
                loadReviews();
                loadCalculations();
            });
            $('#btnShowPendingOnly').on('click', function () {
                showPendingOnly = !showPendingOnly;
                $(this)
                    .toggleClass('btn-outline-warning', !showPendingOnly)
                    .toggleClass('btn-warning', showPendingOnly)
                    .html(`<i class="fas fa-triangle-exclamation me-1"></i>${showPendingOnly ? 'Pending Only' : 'Pending Saja'}`);
                renderMatrix();
            });
            $('#btnShowMissingOutOnly').on('click', function () {
                showMissingOutOnly = !showMissingOutOnly;
                currentPage = 1;
                $(this)
                    .toggleClass('btn-outline-warning', !showMissingOutOnly)
                    .toggleClass('btn-warning', showMissingOutOnly)
                    .html(`<i class="fas fa-right-from-bracket me-1"></i>${showMissingOutOnly ? 'Missing OUT Only' : 'Missing OUT'}`);
                loadReviews();
            });
            $('#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 queueHealthTimer = null;
            const attendanceQueueName = 'attendance-review';
            let detectPendingStreak = 0;
            let detectLastAutoKickAt = 0;
            let detectLastUpdatedAt = '';
            let detectStaleStreak = 0;
            let detectNotifiedDoneId = 0;
            const stopDetectPolling = () => {
                if (detectPollTimer) {
                    clearInterval(detectPollTimer);
                    detectPollTimer = 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.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.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 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/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.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/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', '#btnRefreshDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                pollDetectStatus(jobId);
            });

            $(document).on('click', '#btnGoProfilBulan', function () {
                window.open('{{ url('/master-profil-bulan') }}', '_blank');
            });

            $(document).on('click', '#btnPauseDetectJob', function () {
                const jobId = Number($(this).data('id') || currentDetectJobId || 0);
                if (jobId <= 0) return;
                $.post(`{{ url('/attendance-review/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/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();
                    });
            });

            $('#btnRunDetect').on('click', function () {
                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.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.
                    });
            });

            $('#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?',
                    text: 'Planning shift akan diperbarui. Item approved yang planning-nya berubah akan kembali draft.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, rebuild'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    setRebuildButtonLoading(true);
                    showBusySwal('Rebuild planning...', 'Menghitung ulang planning shift. Tunggu sampai selesai.');
                    $.post('{{ route('attendance_review.rebuild_planning') }}', payload)
                        .done((resp) => {
                            loadReviews();
                            loadCalculations();
                            Swal.fire('Success', resp?.message || 'Rebuild planning selesai', 'success');
                        })
                        .fail((xhr) => {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Rebuild planning gagal', 'error');
                        })
                        .always(() => {
                            hideBusySwal();
                            setRebuildButtonLoading(false);
                        });
                });
            });

            const triggerExport = (format) => {
                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() || ''),
                    format: String(format || 'excel'),
                });
                window.open(`{{ route('attendance_review.reviews.export') }}?${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/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/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,
                };
            };

            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');
            });
            $('#btnExportPdf').on('click', function () {
                triggerExport('pdf');
            });
            $('#btnPrintSheet').on('click', function () {
                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.calculations.sheet') }}?${params.toString()}`, '_blank');
            });
            $('#btnSendEmailPdf').on('click', async function () {
                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.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 () {
                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.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 () {
                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.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.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.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%');
                        $('#machineUploadProgressText').text('Upload selesai, job masuk antrian...');
                        importMachineLogModal.hide();
                        const jobMeta = extractQueueJobMeta(resp);
                        const jobId = Number(jobMeta?.job_id || 0);
                        if (jobId > 0) {
                            pollLogJobStatus(jobId);
                            Swal.fire('Queued', resp?.message || 'Upload log 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 || '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.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.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.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.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')));
            });
            $('#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();
            });

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

            $.when(loadRefs()).always(() => {
                applyDateBoundsFromProfile(true);
                startQueueHealthPolling();
                refreshApproveAllButtonState();
                loadReviews();
                loadCalculations();
            });
        });
    </script>
@endpush