@extends('layouts.adminlte')

@section('title', 'FORGETTING CLOCK REQUEST')
@section('page_title', 'FORGETTING CLOCK REQUEST')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.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') }}" />
<link rel="stylesheet" href="{{ asset('vendor/fullcalendar/index.global.min.css') }}" />
<style>
    #fcModal .modal-dialog {
        margin: 1rem auto;
        max-height: calc(100vh - 2rem);
    }
    #fcModal .modal-content {
        display: flex;
        max-height: calc(100vh - 2rem);
        overflow: hidden;
    }
    #fcModal #fcForm {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }
    #fcModal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
    }
    #fcModal .modal-header,
    #fcModal .modal-footer {
        flex: 0 0 auto;
    }
    #fcModal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #fff;
        box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
    }
    #fcModal .direct-approve-box {
        border: 1px solid rgba(25, 135, 84, .25);
        background: #ecfdf3;
    }
    .request-status-tabs {
        display: inline-flex;
        padding: .35rem;
        border: 1px solid #dbeafe;
        border-radius: 12px;
        background: #f8fbff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    }
    .request-status-tabs .nav-link {
        border-radius: 9px;
        color: #475569;
        font-weight: 600;
        padding: .45rem .8rem;
    }
    .request-status-tabs .nav-link[data-status-tab="approved"] { color: #15803d; }
    .request-status-tabs .nav-link[data-status-tab="submitted"] { color: #1d4ed8; }
    .request-status-tabs .nav-link[data-status-tab="in_review"] { color: #b45309; }
    .request-status-tabs .nav-link[data-status-tab="draft"] { color: #64748b; }
    .request-status-tabs .nav-link.active {
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #0891b2);
        box-shadow: 0 6px 14px rgba(37, 99, 235, .24);
    }
    .request-status-tabs .nav-link.active[data-status-tab="approved"] { background: linear-gradient(135deg, #16a34a, #059669); }
    .request-status-tabs .nav-link.active[data-status-tab="submitted"] { background: linear-gradient(135deg, #2563eb, #0284c7); }
    .request-status-tabs .nav-link.active[data-status-tab="in_review"] { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .request-status-tabs .nav-link.active[data-status-tab="draft"] { background: linear-gradient(135deg, #64748b, #475569); }
    .dataTables_paginate .pagination { margin-bottom: 0; justify-content: center; }
    .request-status-tabs .tab-count {
        display: inline-flex;
        min-width: 1.35rem;
        height: 1.35rem;
        align-items: center;
        justify-content: center;
        margin-left: .4rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, .08);
        font-size: .75rem;
    }
    .request-status-tabs .nav-link.active .tab-count { background: rgba(255,255,255,.24); }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Pengajuan Forgetting Clock + Approval</h3>
        <div class="d-flex gap-2">
            <div class="btn-group btn-group-sm" role="group" aria-label="Switch View">
                <button class="btn btn-outline-secondary active" id="btnViewTable" type="button">Table</button>
                <button class="btn btn-outline-secondary" id="btnViewCalendar" type="button">Calendar</button>
            </div>
            @if(!($selfMode ?? false))
                <div class="btn-group btn-group-sm" role="group" aria-label="Import XLSX">
                    <button class="btn btn-outline-secondary" id="btnImportTemplate" type="button">Template Import</button>
                    <button class="btn btn-outline-primary" id="btnImportXlsx" type="button">Import XLSX</button>
                </div>
            @endif
            <button class="btn btn-primary btn-sm" id="btnAdd">Tambah Pengajuan</button>
        </div>
    </div>
    <div class="card-body">
        <div id="tableViewWrapper">
        <ul class="nav nav-pills gap-2 mb-3 request-status-tabs">
            <li class="nav-item"><button type="button" class="nav-link active" data-status-tab="draft">Belum Submit <span class="tab-count" data-count-status="draft">0</span></button></li>
            <li class="nav-item"><button type="button" class="nav-link" data-status-tab="submitted">Submitted <span class="tab-count" data-count-status="submitted">0</span></button></li>
            <li class="nav-item"><button type="button" class="nav-link" data-status-tab="in_review">Waiting Approve <span class="tab-count" data-count-status="in_review">0</span></button></li>
            <li class="nav-item"><button type="button" class="nav-link" data-status-tab="approved">Approved</button></li>
            <li class="nav-item"><button type="button" class="nav-link" data-status-tab="">Semua</button></li>
        </ul>
        <div class="row g-2 mb-3"><div class="col-md-3"><select id="sourceFilter" class="form-select form-select-sm"><option value="">Semua sumber</option><option value="personal">FC Personal</option><option value="question">FC dari Question</option><option value="urgency">FC Urgensi</option></select></div></div>
        @if(!($selfMode ?? false))
        <div class="d-flex flex-wrap gap-2 mb-2">
            <button class="btn btn-sm btn-outline-warning" id="btnBulkUpdate">Bulk Edit</button>
            <button class="btn btn-sm btn-outline-primary" id="btnBulkSubmit">Bulk Submit</button>
            <button class="btn btn-sm btn-outline-success" id="btnBulkApprove">Bulk Approve</button>
            <button class="btn btn-sm btn-outline-secondary" id="btnBulkUnapprove">Bulk Batal Approve</button>
            <button class="btn btn-sm btn-outline-danger" id="btnBulkReject">Bulk Reject</button>
            <button class="btn btn-sm btn-danger" id="btnBulkDelete">Bulk Delete</button>
        </div>
        @endif
        <table id="fcTable" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th style="width:32px"><input type="checkbox" id="checkAllRows"></th>
                    <th>No.</th>
                    <th>No FC</th>
                    <th>Karyawan</th>
                    <th>Tanggal</th>
                    <th>Usulan Jam</th>
                    <th>Flow</th>
                    <th>Level Approval</th>
                    <th>Bukti</th>
                    <th>Status</th>
                    <th>Sumber</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <th><input type="checkbox" id="checkAllRowsBottom"></th>
                    <th colspan="10" class="small text-muted">Select all halaman ini</th>
                </tr>
            </tfoot>
        </table>

        <hr>
        <h6 class="fw-bold mb-2">Question Pending / Jawaban Non-FC</h6>
        <div class="row g-2 mb-2"><div class="col-md-3"><select id="questionStatusFilter" class="form-select form-select-sm"><option value="">Semua status question</option><option value="pending_answer">Pending Answer</option><option value="answered">Answered Non-FC</option><option value="converted_to_fc">Converted to FC</option><option value="cancelled">Cancelled</option></select></div></div>
        <table id="questionTable" class="table table-sm table-striped w-100"><thead><tr><th>No</th><th>Karyawan</th><th>Tanggal</th><th>Missing</th><th>Pertanyaan</th><th>Jawaban</th><th>FC</th><th>Status</th><th>Aksi</th></tr></thead><tbody></tbody></table>
        </div>
        <div id="calendarViewWrapper" class="d-none">
        <div id="fcCalendar"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="fcModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title" id="fcModalTitle">Tambah Pengajuan Forgetting Clock</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="fcForm">
        <div class="modal-body">
            <input type="hidden" id="attendanceReviewId" />
            <div class="mb-2">
                <label class="form-label">Karyawan</label>
                <div class="border rounded-3 p-3 mb-2 bg-light-subtle">
                    <div class="d-flex flex-column flex-lg-row gap-2 align-items-lg-center justify-content-between">
                        <div>
                            <div class="fw-semibold small text-uppercase text-muted">Sort & Search Karyawan</div>
                            <div class="small text-muted">Pilih target pencarian dulu, lalu list karyawan akan disusun lebih rapi.</div>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-sm btn-primary btn-karyawan-sort active" data-sort-type="all">Semua</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="code">Kode</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="name">Nama</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="group">Group</button>
                            <button type="button" class="btn btn-sm btn-outline-primary btn-karyawan-sort" data-sort-type="export_group">Group Cetak</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetKaryawanSort">Reset</button>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="form-label mb-0" for="karyawanSearch">Cari Karyawan</label>
                            <span class="badge text-bg-primary" id="karyawanSearchActiveBadge">Semua</span>
                        </div>
                        <input type="text" id="karyawanSearch" class="form-control" placeholder="Cari kode / nama karyawan...">
                        <div class="form-text" id="karyawanSearchHint">Sedang mencari berdasarkan kode atau nama karyawan.</div>
                    </div>
                </div>
                <select id="karyawanId" class="d-none" required></select>
                <div class="border rounded-3 overflow-hidden" id="karyawanTableWrap">
                    <div class="table-responsive" style="max-height: 280px; overflow:auto;">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:120px;">Kode</th>
                                    <th>Nama</th>
                                    <th style="width:140px;">Group</th>
                                    <th style="width:170px;">Group Cetak</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanTableBody">
                                <tr><td colspan="4" class="text-muted text-center py-3">Memuat data karyawan...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="small text-muted mt-1" id="karyawanSelectionCount">Belum ada karyawan dipilih.</div>
            </div>
            <div class="mb-2"><label class="form-label">Flow Approval</label><select id="flowId" class="form-select" required></select></div>
            @if($canDirectApprove ?? false)
            <div class="direct-approve-box rounded-3 p-3 mb-2" id="directApproveWrap">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="directApprove">
                    <label class="form-check-label fw-semibold" for="directApprove">Langsung approve oleh Admin/HRD</label>
                </div>
                <div class="small text-muted mt-1">Jika aktif, pengajuan dibuat, otomatis submit, approve semua step via bypass Admin/HRD, lalu langsung masuk ke Attendance Review.</div>
            </div>
            @endif
            <div class="mb-2"><label class="form-label">Tanggal Kerja</label><input type="date" id="workDate" class="form-control" required /></div>
            <div class="row g-2">
                <div class="col"><label class="form-label">Usulan IN</label><input type="time" id="checkinTime" class="form-control" /></div>
                <div class="col"><label class="form-label">Usulan OUT</label><input type="time" id="checkoutTime" class="form-control" /></div>
            </div>
            <div class="mt-2"><label class="form-label">Keterangan</label><textarea id="reason" class="form-control" rows="2" required></textarea></div>
            <div class="mt-2"><label class="form-label">Bukti (jpg/png/pdf/webp) (optional)</label><input type="file" id="attachmentFile" class="form-control" accept=".jpg,.jpeg,.png,.pdf,.webp" /></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </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/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/index.global.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
<script>
$(function(){
    const selfMode = @json($selfMode ?? false);
    const canDirectApprove = @json($canDirectApprove ?? false);
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    function escapeHtml(str){
        return String(str ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    const modal = new bootstrap.Modal(document.getElementById('fcModal'));
    const modalEl = document.getElementById('fcModal');
    let refs = {karyawans:[], flows:[]}; let rows = []; let allRows = []; let activeStatusTab = 'draft'; let editId = null; let calendar = null;
    let karyawanSearchMode = 'all';

    function initFlowSelect(){
        const $flow = $('#flowId');
        if ($flow.data('select2')) $flow.select2('destroy');
        $flow.select2({
            theme: 'bootstrap-5',
            dropdownParent: $(modalEl),
            width: '100%',
            placeholder: 'Pilih flow approval...'
        });
    }

    function getSelectedKaryawanValue(){
        return String($('#karyawanId').val() || '').trim();
    }

    function syncKaryawanSelectionCount(){
        const selectedId = getSelectedKaryawanValue();
        const selectedRow = (refs.karyawans || []).find(x => String(x.id) === selectedId);
        $('#karyawanSelectionCount').html(selectedRow
            ? `Karyawan dipilih: <span class="fw-semibold">${escapeHtml(selectedRow.employee_code || '-')} - ${escapeHtml(selectedRow.full_name || '-')}</span>`
            : 'Belum ada karyawan dipilih.'
        );
    }

    function setSelectedKaryawanValue(value){
        $('#karyawanId').val(String(value || '').trim());
        syncKaryawanSelectionCount();
    }

    function applyKaryawanSearchModeUi(){
        $('.btn-karyawan-sort').removeClass('active btn-primary').addClass('btn-outline-primary');
        $(`.btn-karyawan-sort[data-sort-type="${karyawanSearchMode}"]`).removeClass('btn-outline-primary').addClass('active btn-primary');

        const meta = {
            all: { badge: 'Semua', placeholder: 'Cari kode / nama / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' },
            code: { badge: 'Kode', placeholder: 'Cari kode karyawan...', hint: 'Sedang mencari berdasarkan kode karyawan.' },
            name: { badge: 'Nama', placeholder: 'Cari nama karyawan...', hint: 'Sedang mencari berdasarkan nama karyawan.' },
            group: { badge: 'Group', placeholder: 'Cari group karyawan...', hint: 'Sedang mencari berdasarkan group karyawan.' },
            export_group: { badge: 'Group Cetak', placeholder: 'Cari group cetak...', hint: 'Sedang mencari berdasarkan group cetak aktif/profil bulan terbaru.' }
        }[karyawanSearchMode] || { badge: 'Semua', placeholder: 'Cari kode / nama / group karyawan...', hint: 'Sedang mencari berdasarkan kode, nama, group, atau group cetak.' };

        $('#karyawanSearchActiveBadge').text(meta.badge);
        $('#karyawanSearch').attr('placeholder', meta.placeholder);
        $('#karyawanSearchHint').text(meta.hint);
    }

    function resetKaryawanSearchMode(){
        karyawanSearchMode = 'all';
        $('#karyawanSearch').val('');
        applyKaryawanSearchModeUi();
    }

    function resolveKaryawanDividerLabel(row){
        if (karyawanSearchMode === 'group') return String(row.employee_group || '').trim() || 'Tanpa Group';
        if (karyawanSearchMode === 'export_group') return String(row.export_employee_group || '').trim() || 'Tanpa Group Cetak';
        if (karyawanSearchMode === 'name') return (String(row.full_name || '').trim().charAt(0) || '#').toUpperCase();
        if (karyawanSearchMode === 'code') return (String(row.employee_code || '').trim().charAt(0) || '#').toUpperCase();
        return '';
    }

    function renderKaryawanOptions(filterText = null){
        const keyword = String(filterText ?? $('#karyawanSearch').val() ?? '').trim().toLowerCase();
        const selectedId = getSelectedKaryawanValue();
        const filtered = (refs.karyawans || [])
            .slice()
            .sort((a, b) => {
                if (karyawanSearchMode === 'export_group') {
                    return String(a.export_employee_group || '').localeCompare(String(b.export_employee_group || ''), 'id')
                        || String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                if (karyawanSearchMode === 'group') {
                    return String(a.employee_group || '').localeCompare(String(b.employee_group || ''), 'id')
                        || String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                if (karyawanSearchMode === 'name') {
                    return String(a.full_name || '').localeCompare(String(b.full_name || ''), 'id');
                }
                return String(a.employee_code || '').localeCompare(String(b.employee_code || ''), 'id');
            })
            .filter(x => {
                if (!keyword) return true;
                const code = String(x.employee_code || '').toLowerCase();
                const name = String(x.full_name || '').toLowerCase();
                const group = String(x.employee_group || '').toLowerCase();
                const exportGroup = String(x.export_employee_group || '').toLowerCase();
                if (karyawanSearchMode === 'code') return code.includes(keyword);
                if (karyawanSearchMode === 'name') return name.includes(keyword);
                if (karyawanSearchMode === 'group') return group.includes(keyword);
                if (karyawanSearchMode === 'export_group') return exportGroup.includes(keyword);
                return code.includes(keyword) || name.includes(keyword) || group.includes(keyword) || exportGroup.includes(keyword);
            });

        $('#karyawanId').html(filtered.map(x => `<option value="${x.id}">${x.employee_code} - ${x.full_name}</option>`).join(''));
        if (selectedId && $('#karyawanId option[value="' + selectedId + '"]').length) {
            $('#karyawanId').val(selectedId);
        }

        let previousDividerLabel = null;
        const rowsHtml = filtered.length ? filtered.map(x => {
            const dividerLabel = resolveKaryawanDividerLabel(x);
            const dividerHtml = dividerLabel && karyawanSearchMode !== 'all' && dividerLabel !== previousDividerLabel
                ? `<tr class="table-secondary small text-uppercase fw-semibold"><td colspan="4">${escapeHtml(dividerLabel)}</td></tr>`
                : '';
            previousDividerLabel = dividerLabel || previousDividerLabel;
            const isSelected = String(x.id) === getSelectedKaryawanValue();
            return `${dividerHtml}
                <tr class="karyawan-table-row ${isSelected ? 'table-primary' : ''}" data-karyawan-id="${x.id}" style="cursor:pointer;">
                    <td class="fw-semibold">${escapeHtml(x.employee_code || '-')}</td>
                    <td>${escapeHtml(x.full_name || '-')}</td>
                    <td>${x.employee_group ? escapeHtml(x.employee_group) : '<span class="text-muted">-</span>'}</td>
                    <td>${x.export_employee_group ? escapeHtml(x.export_employee_group) : '<span class="text-muted">-</span>'}</td>
                </tr>`;
        }).join('') : '<tr><td colspan="4" class="text-muted text-center py-3">Tidak ada hasil karyawan.</td></tr>';
        $('#karyawanTableBody').html(rowsHtml);
        syncKaryawanSelectionCount();
    }

    function statusBadge(s){
        const map = { draft:'secondary', submitted:'secondary', in_review:'secondary', approved:'success', rejected:'secondary', cancelled:'dark' };
        return `<span class="badge text-bg-${map[s]||'secondary'}">${s||'-'}</span>`;
    }
    function statusColor(s){
        const map = { draft:'#9aa0a6', submitted:'#9aa0a6', in_review:'#9aa0a6', approved:'#198754', rejected:'#9aa0a6', cancelled:'#212529' };
        return map[s] || '#6c757d';
    }
    function getSelectedIds(){
        return $('.row-check:checked').map(function(){ return Number($(this).val()); }).get().filter(x => x > 0);
    }
    function refreshHeaderCheck(){
        const total = $('.row-check').length;
        const checked = $('.row-check:checked').length;
        $('#checkAllRows, #checkAllRowsBottom')
            .prop('checked', total > 0 && total === checked)
            .prop('indeterminate', checked > 0 && checked < total);
    }
    function renderBulkResult(resp, fallbackTitle){
        const msg = resp?.message || fallbackTitle || 'Selesai';
        const skipped = resp?.meta?.skipped || [];
        if (!skipped.length) {
            Swal.fire('Success', msg, 'success');
            return;
        }
        const preview = skipped.slice(0, 12).map(x => `#${x.id}: ${x.reason}`).join('<br>');
        Swal.fire({
            icon: 'warning',
            title: msg,
            html: `<div class="text-start">Sebagian data di-skip:<br>${preview}${skipped.length > 12 ? '<br>...dst' : ''}</div>`
        });
    }
    function setView(viewMode){
        const isTable = viewMode === 'table';
        $('#tableViewWrapper').toggleClass('d-none', !isTable);
        $('#calendarViewWrapper').toggleClass('d-none', isTable);
        $('#btnViewTable').toggleClass('active', isTable);
        $('#btnViewCalendar').toggleClass('active', !isTable);
        if (!isTable && calendar) calendar.render();
    }

    const table = selfMode ? null : $('#fcTable').DataTable({
        data: [],
        dom: "<'row align-items-center mb-2'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4 text-center'p><'col-sm-12 col-md-4'f>>rt<'row align-items-center mt-2'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        columns: [
            {data:null, orderable:false, searchable:false, render:(d,t,r)=>`<input type="checkbox" class="row-check" value="${r.id}">`},
            {data:null, render:(d,t,r,m)=>m.row+1, orderable:false, searchable:false},
            {data:'request_no'},
            {data:null, render:r=>`${r.employee_code||'-'} - ${r.employee_name||'-'}`},
            {data:'work_date'},
            {data:null, render:r=>`${(r.requested_checkin_at||'-').slice(11,16)} / ${(r.requested_checkout_at||'-').slice(11,16)}`},
            {data:'flow_name', render:v=>v||'-'},
            {data:'pending_level', render:v=>v||'-'},
            {data:null, render:r=>r.attachment_url ? `<a href="${r.attachment_url}" target="_blank">${r.attachment_name || 'Lihat bukti'}</a>` : '-'},
            {data:'status', render:v=>statusBadge(v)},
            {data:null, render:r=>sourceBadge(r)},
            {data:null, orderable:false, render:(d,t,r)=>{
                let btn = '';
                if (r.can_edit) btn += `<button class="btn btn-xs btn-outline-warning btn-edit" data-id="${r.id}">Edit</button> `;
                if (r.can_delete) btn += `<button class="btn btn-xs btn-outline-danger btn-delete" data-id="${r.id}">Delete</button> `;
                // Rejected dianggap final: tidak bisa submit ulang (buat request baru jika perlu).
                if (['draft'].includes((r.status||''))) btn += `<button class="btn btn-xs btn-outline-primary btn-submit" data-id="${r.id}">Submit</button> `;
                if (r.can_approve) btn += `<button class="btn btn-xs btn-outline-success btn-approve" data-id="${r.id}">Approve</button> `;
                if (r.can_unapprove) btn += `<button class="btn btn-xs btn-outline-secondary btn-unapprove" data-id="${r.id}">Batal Approve</button> `;
                if (r.can_reject) btn += `<button class="btn btn-xs btn-outline-danger btn-reject" data-id="${r.id}">Reject</button> `;
                btn += `<button class="btn btn-xs btn-outline-info btn-detail" data-id="${r.id}">Detail</button>`;
                return btn || '<span class="text-muted">-</span>';
            }}
        ]
    });
    function byId(id){ return (rows||[]).find(x => Number(x.id) === Number(id)); }
    function toTime(dt){ return dt ? String(dt).slice(11,16) : ''; }
    function resetForm(){
        editId = null;
        $('#fcModalTitle').text('Tambah Pengajuan Forgetting Clock');
        $('#attendanceReviewId').val('');
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
        $('#workDate').val(new Date().toISOString().slice(0,10));
        $('#checkinTime').val('');
        $('#checkoutTime').val('');
        $('#reason').val('');
        $('#attachmentFile').val('').prop('required', false);
        if (canDirectApprove) $('#directApproveWrap').removeClass('d-none');
        $('#directApprove').prop('checked', false);
    }
    function openEdit(row){
        editId = Number(row.id);
        $('#fcModalTitle').text('Edit Pengajuan Forgetting Clock');
        $('#attendanceReviewId').val(row.attendance_daily_review_id || '');
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
        setSelectedKaryawanValue(row.karyawan_id || '');
        $('#flowId').val(row.approval_flow_id || '');
        $('#workDate').val(row.work_date || '');
        $('#checkinTime').val(toTime(row.requested_checkin_at));
        $('#checkoutTime').val(toTime(row.requested_checkout_at));
        $('#reason').val(row.reason || '');
        $('#attachmentFile').val('').prop('required', false);
        $('#directApprove').prop('checked', false);
        if (canDirectApprove) $('#directApproveWrap').addClass('d-none');
        modal.show();
    }
    function renderCalendar(){
        const calendarEl = document.getElementById('fcCalendar');
        const events = (rows||[]).map(r => ({
            id: String(r.id),
            title: `${r.request_no || 'FC'} ${toTime(r.requested_checkin_at)||'--:--'}/${toTime(r.requested_checkout_at)||'--:--'}`,
            start: r.work_date,
            allDay: true,
            backgroundColor: statusColor(r.status),
            borderColor: statusColor(r.status),
            extendedProps: { row: r }
        }));
        if (!calendar) {
            calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'id',
                initialView: 'dayGridMonth',
                height: 'auto',
                firstDay: 1,
                buttonText: {
                    today: 'Hari ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    day: 'Hari',
                    list: 'Daftar'
                },
                noEventsContent: 'Belum ada data forgetting clock.',
                events,
                eventClick: function(info){
                    const r = info.event.extendedProps.row;
                    const html = `<div class="text-start"><div><b>No FC:</b> ${r.request_no||'-'}</div><div><b>Status:</b> ${r.status||'-'}</div><div><b>Tanggal:</b> ${r.work_date||'-'}</div><div><b>Usulan:</b> ${toTime(r.requested_checkin_at)||'-'} / ${toTime(r.requested_checkout_at)||'-'}</div><div><b>Keterangan:</b> ${r.reason||'-'}</div></div>`;
                    Swal.fire({
                        title: 'Detail Forgetting Clock',
                        html,
                        showCancelButton: !!r.can_delete,
                        cancelButtonText: 'Delete',
                        showDenyButton: !!r.can_edit,
                        denyButtonText: 'Edit',
                        confirmButtonText: 'Close'
                    }).then(res => {
                        if (res.isDenied && r.can_edit) openEdit(r);
                        if (res.dismiss === Swal.DismissReason.cancel && r.can_delete) {
                            Swal.fire({title:'Hapus pengajuan ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
                                if(!x.isConfirmed) return;
                                $.ajax({url:`{{ url('/forgetting-clock-request') }}/${r.id}`, method:'DELETE'})
                                    .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
                                    .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                            });
                        }
                    });
                }
            });
            calendar.render();
        } else {
            calendar.removeAllEvents();
            events.forEach(e => calendar.addEvent(e));
        }
    }

    function loadRefs(){
        return $.getJSON('{{ route('forgetting_clock_request.refs') }}').done(resp=>{
            refs = resp.data || refs;
            renderKaryawanOptions('');
            $('#flowId').html((refs.flows||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`).join(''));
            initFlowSelect();
            if (selfMode && (refs.karyawans||[]).length === 1) {
                setSelectedKaryawanValue(String(refs.karyawans[0].id));
                $('#karyawanId').prop('disabled', true);
                $('#karyawanTableWrap').addClass('opacity-75');
                $('#karyawanSearch').val('').prop('disabled', true);
            } else {
                $('#karyawanId').prop('disabled', false);
                $('#karyawanTableWrap').removeClass('opacity-75');
                $('#karyawanSearch').prop('disabled', false);
            }
        });
    }


    let questionRows = [];
    const questionTable = selfMode ? null : $('#questionTable').DataTable({
        data: [],
        columns: [
            {data:null, render:(d,t,r,m)=>m.row+1},
            {data:'employee'},
            {data:'work_date'},
            {data:'missing_type'},
            {data:'question_text'},
            {data:null, render:r=>`${r.answer_type || '-'}<br><small>${r.answer_notes || ''}</small>`},
            {data:null, render:r=>r.fc_no ? `${r.fc_no}<br><small>${r.fc_status || ''}</small>` : '-'},
            {data:'status', render:v=>statusBadge(v)},
            {data:null, orderable:false, render:r=>r.status === 'pending_answer' ? `<button class="btn btn-xs btn-outline-danger btn-cancel-question" data-id="${r.id}">Cancel</button>` : '<span class="text-muted">-</span>'},
        ]
    });
    function loadQuestions(){
        if (!questionTable) return;
        return $.getJSON('{{ route('forgetting_clock_request.questions.data') }}').done(resp=>{
            questionRows = resp.data || [];
            applyQuestionFilter();
        });
    }
    function applyQuestionFilter(){
        if (!questionTable) return;
        const st = String($('#questionStatusFilter').val() || '');
        const rows = st ? questionRows.filter(r => String(r.status || '') === st) : questionRows;
        questionTable.clear().rows.add(rows).draw();
    }
    function sourceBadge(row){
        const source = String(row.source_type || '').toLowerCase();
        if (source === 'question') return '<span class="badge text-bg-warning">Question</span>';
        if (source === 'urgency' || String(row.source || '') === 'attendance_urgency_auto') return '<span class="badge text-bg-danger">Urgensi</span>';
        return '<span class="badge text-bg-info">Personal</span>';
    }
    function filteredRows(){
        const source = String($('#sourceFilter').val() || '');
        return (allRows || []).filter(r => (!activeStatusTab || String(r.status || '') === activeStatusTab) && (!source || (source === 'urgency' ? (String(r.source_type || '') === 'urgency' || String(r.source || '') === 'attendance_urgency_auto') : String(r.source_type || '') === source)));
    }
    function loadData(){
        return $.getJSON('{{ route('forgetting_clock_request.data') }}').done(resp=>{
            allRows = resp.data || [];
            updateRequestTabCounts();
            rows = filteredRows();
            if (!selfMode) {
                table.clear().rows.add(rows).draw();
                $('#checkAllRows, #checkAllRowsBottom').prop('checked', false).prop('indeterminate', false);
            }
            renderCalendar();
            loadQuestions();
        });
    }

    function applyStatusTab(){
        rows = filteredRows();
        if (!selfMode) {
            table.clear().rows.add(rows).draw();
            $('#checkAllRows, #checkAllRowsBottom').prop('checked', false).prop('indeterminate', false);
        }
        renderCalendar();
    }
    function updateRequestTabCounts(){
        const counts = { draft: 0, submitted: 0, in_review: 0 };
        (allRows || []).forEach(row => {
            const status = String(row.status || '');
            if (Object.prototype.hasOwnProperty.call(counts, status)) counts[status]++;
        });
        Object.entries(counts).forEach(([status, count]) => {
            $(`.tab-count[data-count-status="${status}"]`).text(count);
        });
    }
    function syncBulkButtonsWithStatusTab(){
        const all = activeStatusTab === '';
        const draft = activeStatusTab === 'draft';
        const waiting = activeStatusTab === 'submitted' || activeStatusTab === 'in_review';
        const approved = activeStatusTab === 'approved';
        $('#btnBulkUpdate, #btnBulkSubmit, #btnBulkDelete').toggle(all || draft);
        $('#btnBulkApprove, #btnBulkReject').toggle(all || waiting);
        $('#btnBulkUnapprove').toggle(all || approved);
    }

    function prefillFromQuery(){
        const qs = new URLSearchParams(window.location.search);
        const reviewId = qs.get('review_id') || '';
        const karyawanId = qs.get('karyawan_id') || '';
        const workDate = qs.get('work_date') || '';
        const inTime = qs.get('in_time') || '';
        const outTime = qs.get('out_time') || '';
        const reason = qs.get('reason') || '';
        const shouldAutoApprove = qs.get('auto_approve') === '1';
        if (!reviewId && !karyawanId && !workDate) return;

        $('#attendanceReviewId').val(reviewId);
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
        if (karyawanId) setSelectedKaryawanValue(karyawanId);
        if (workDate) $('#workDate').val(workDate);
        if (inTime) $('#checkinTime').val(inTime);
        if (outTime) $('#checkoutTime').val(outTime);
        if (reason) $('#reason').val(reason);
        if (canDirectApprove) {
            $('#directApproveWrap').removeClass('d-none');
            $('#directApprove').prop('checked', shouldAutoApprove);
        }
        modal.show();
    }

    $('#btnAdd').on('click', function(){
        resetForm();
        modal.show();
    });
    $('#sourceFilter').on('change', applyStatusTab);
    $('#questionStatusFilter').on('change', applyQuestionFilter);
    $('#questionTable').on('click', '.btn-cancel-question', function(){
        const id = Number($(this).data('id') || 0);
        Swal.fire({title:'Cancel question?', icon:'warning', showCancelButton:true, confirmButtonText:'Cancel Question'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/forgetting-clock-request/question') }}/${id}/cancel`, {_token:'{{ csrf_token() }}'}).done(resp=>{ Swal.fire('Berhasil', resp.message || 'Question dibatalkan.', 'success'); loadQuestions(); }).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Gagal cancel question', 'error'));
        });
    });
    $('#fcTable').on('click', '.btn-detail', function(){
        const row = byId(Number($(this).data('id'))); if (!row) return;
        Swal.fire({ title: `Detail ${row.request_no || 'FC'}`, html: `<div class="text-start"><div><b>Sumber:</b> ${sourceBadge(row)}</div><div class="mt-2"><b>Reason:</b><br>${$('<div>').text(row.reason || '-').html()}</div><div class="mt-2"><b>Question ID:</b> ${row.source_type === 'question' ? (row.source_id || '-') : '-'}</div></div>` });
    });
    $('.request-status-tabs [data-status-tab]').on('click', function(){
        activeStatusTab = String($(this).data('status-tab') || '');
        $('.request-status-tabs [data-status-tab]').removeClass('active');
        $(this).addClass('active');
        syncBulkButtonsWithStatusTab();
        applyStatusTab();
    });
    $('.btn-karyawan-sort').on('click', function(){
        karyawanSearchMode = ($(this).data('sort-type') || 'all').toString();
        applyKaryawanSearchModeUi();
        renderKaryawanOptions($('#karyawanSearch').val());
    });
    $('#btnResetKaryawanSort').on('click', function(){
        resetKaryawanSearchMode();
        renderKaryawanOptions('');
    });
    $('#karyawanSearch').on('input', function(){
        renderKaryawanOptions($(this).val());
    });
    $('#karyawanTableBody').on('click', '.karyawan-table-row', function(){
        if ($('#karyawanId').prop('disabled')) return;
        const id = String($(this).data('karyawan-id') || '').trim();
        if (!id) return;
        setSelectedKaryawanValue(id);
        renderKaryawanOptions($('#karyawanSearch').val());
    });

    $('#fcForm').on('submit', function(e){
        e.preventDefault();
        const fd = new FormData();
        fd.append('karyawan_id', $('#karyawanId').val());
        fd.append('approval_flow_id', $('#flowId').val());
        fd.append('work_date', $('#workDate').val());
        fd.append('requested_checkin_time', $('#checkinTime').val());
        fd.append('requested_checkout_time', $('#checkoutTime').val());
        fd.append('reason', $('#reason').val());
        const reviewId = $('#attendanceReviewId').val();
        if (reviewId) fd.append('attendance_daily_review_id', reviewId);
        if (!editId && canDirectApprove) {
            fd.append('auto_approve', $('#directApprove').is(':checked') ? '1' : '0');
        }
        const file = $('#attachmentFile')[0]?.files?.[0];
        if (file) fd.append('attachment', file);

        if (editId) {
            fd.append('_method', 'PUT');
            $.ajax({
                url: `{{ url('/forgetting-clock-request') }}/${editId}`,
                method: 'POST',
                data: fd,
                processData: false,
                contentType: false
            })
            .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Updated', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        } else {
            $.ajax({
                url: '{{ route('forgetting_clock_request.store') }}',
                method: 'POST',
                data: fd,
                processData: false,
                contentType: false
            })
            .done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
        }
    });

    $('#fcTable').on('click', '.btn-edit', function(){
        const row = byId(Number($(this).data('id')));
        if (row) openEdit(row);
    });
    $('#fcTable').on('click', '.btn-delete', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Hapus pengajuan ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            $.ajax({url:`{{ url('/forgetting-clock-request') }}/${id}`, method:'DELETE'})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
        });
    });

    $('#fcTable').on('click', '.btn-submit', function(){
        const id = Number($(this).data('id'));
        $.post(`{{ url('/forgetting-clock-request') }}/${id}/submit`)
            .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Submitted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Submit failed', 'error'));
    });

    $('#fcTable').on('click', '.btn-approve', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Approve step ini?', input:'text', inputPlaceholder:'Catatan approve (opsional)', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/forgetting-clock-request') }}/${id}/approve`, {notes: res.value || ''})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Approved', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Approve failed', 'error'));
        });
    });

    $('#fcTable').on('click', '.btn-unapprove', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Batalkan approve?', text:'Dokumen akan kembali ke draft.', icon:'warning', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/forgetting-clock-request') }}/${id}/unapprove`, {notes: ''})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Approve dibatalkan', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Batal approve failed', 'error'));
        });
    });

    $('#fcTable').on('click', '.btn-reject', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Reject step ini?', input:'text', inputLabel:'Alasan reject', inputValidator:(v)=>!v?'Alasan wajib diisi':null, showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/forgetting-clock-request') }}/${id}/reject`, {notes: res.value})
                .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Rejected', 'success'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Reject failed', 'error'));
        });
    });

    $('#checkAllRows, #checkAllRowsBottom').on('change', function(){
        $('.row-check').prop('checked', $(this).is(':checked'));
        refreshHeaderCheck();
    });
    $('#fcTable').on('change', '.row-check', refreshHeaderCheck);
    $('#btnViewTable').on('click', function(){ setView('table'); });
    $('#btnViewCalendar').on('click', function(){ setView('calendar'); });

    $('#btnBulkDelete').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        Swal.fire({title:'Hapus data FC terpilih?', text:`Total: ${ids.length} data`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus'}).then(x=>{
            if(!x.isConfirmed) return;
            $.post('{{ route('forgetting_clock_request.bulk_delete') }}', {ids})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk hapus selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk delete failed', 'error'));
        });
    });
    $('#btnBulkSubmit').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        $.post('{{ route('forgetting_clock_request.bulk_submit') }}', {ids})
            .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk submit selesai'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk submit failed', 'error'));
    });
    $('#btnBulkApprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        Swal.fire({title:'Catatan Approve (opsional)', input:'text', showCancelButton:true, confirmButtonText:'Approve Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post('{{ route('forgetting_clock_request.bulk_approve') }}', {ids, notes: res.value || ''})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk approve selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk approve failed', 'error'));
        });
    });
    $('#btnBulkUnapprove').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        Swal.fire({title:'Bulk batal approve?', text:'Dokumen approved terpilih akan kembali ke draft.', icon:'warning', showCancelButton:true, confirmButtonText:'Batal Approve Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post('{{ route('forgetting_clock_request.bulk_unapprove') }}', {ids})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk batal approve selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk batal approve failed', 'error'));
        });
    });
    $('#btnBulkReject').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        Swal.fire({title:'Alasan Reject', input:'text', inputValidator:(v)=>!v?'Alasan wajib diisi':null, showCancelButton:true, confirmButtonText:'Reject Terpilih'}).then(res=>{
            if(!res.isConfirmed) return;
            $.post('{{ route('forgetting_clock_request.bulk_reject') }}', {ids, notes: res.value})
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk reject selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk reject failed', 'error'));
        });
    });
    $('#btnBulkUpdate').on('click', function(){
        const ids = getSelectedIds();
        if (!ids.length) return Swal.fire('Warning', 'Pilih data FC terlebih dahulu.', 'warning');
        const flowOptions = (refs.flows || []).map(x => `<option value=\"${x.id}\">${x.code} - ${x.name}</option>`).join('');
        Swal.fire({
            title: 'Bulk Edit FC',
            html: `
                <div class="text-start">
                    <label class="form-label">Flow Approval (opsional)</label>
                    <select id="bulkFlow" class="form-select mb-2"><option value="">- tidak diubah -</option>${flowOptions}</select>
                    <label class="form-label">Tanggal Kerja (opsional)</label>
                    <input id="bulkWorkDate" type="date" class="form-control mb-2">
                    <div class="row g-2">
                        <div class="col"><label class="form-label">Usulan IN</label><input id="bulkInTime" type="time" class="form-control"></div>
                        <div class="col"><label class="form-label">Usulan OUT</label><input id="bulkOutTime" type="time" class="form-control"></div>
                    </div>
                    <label class="form-label mt-2">Alasan (opsional)</label>
                    <textarea id="bulkReason" class="form-control" rows="2"></textarea>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Simpan Bulk Edit',
            preConfirm: () => {
                const payload = { ids };
                const vFlow = $('#bulkFlow').val();
                const vWork = $('#bulkWorkDate').val();
                const vIn = $('#bulkInTime').val();
                const vOut = $('#bulkOutTime').val();
                const vReason = $('#bulkReason').val();
                if (vFlow) payload.approval_flow_id = vFlow;
                if (vWork) payload.work_date = vWork;
                if (vIn) payload.requested_checkin_time = vIn;
                if (vOut) payload.requested_checkout_time = vOut;
                if ((vReason || '').trim() !== '') payload.reason = vReason.trim();
                return payload;
            }
        }).then(res => {
            if (!res.isConfirmed) return;
            const payload = res.value || { ids };
            if (Object.keys(payload).length <= 1) {
                return Swal.fire('Warning', 'Isi minimal 1 field yang mau diubah.', 'warning');
            }
            $.post('{{ route('forgetting_clock_request.bulk_update') }}', payload)
                .done(resp=>{ loadData(); renderBulkResult(resp, 'Bulk update selesai'); })
                .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Bulk update failed', 'error'));
        });
    });

    // Import XLSX (admin/ops)
    $('#btnImportTemplate').on('click', function(){
        window.open(`{{ route('forgetting_clock_request.import.template') }}`, '_blank');
    });

    $('#btnImportXlsx').on('click', function(){
        const flowOptions = (refs.flows || []).map(x => `<option value="${x.id}">${x.code} - ${x.name}</option>`).join('');
        Swal.fire({
            title: 'Import Forgetting Clock (XLSX)',
            html: `
                <div class="text-start">
                    <div class="alert alert-info py-2 mb-2">
                        Format file mengikuti tombol <b>Template Import</b>.
                    </div>
                    <label class="form-label">Default Flow (opsional)</label>
                    <select id="importDefaultFlow" class="form-select mb-2"><option value="">- (ambil dari kolom approval_flow_code) -</option>${flowOptions}</select>
                    <label class="form-label">File XLSX</label>
                    <input id="importFile" type="file" class="form-control" accept=".xlsx" />
                    <div class="form-text">Proses: Preview dulu, lalu Anda konfirmasi untuk simpan.</div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Preview',
            preConfirm: async () => {
                const file = document.getElementById('importFile')?.files?.[0];
                if (!file) {
                    Swal.showValidationMessage('Pilih file .xlsx terlebih dahulu.');
                    return false;
                }
                const fd = new FormData();
                fd.append('file', file);
                const df = $('#importDefaultFlow').val();
                if (df) fd.append('default_approval_flow_id', df);
                try {
                    const resp = await $.ajax({
                        url: `{{ route('forgetting_clock_request.import.preview') }}`,
                        method: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                    });
                    return resp;
                } catch (xhr) {
                    Swal.showValidationMessage(xhr?.responseJSON?.message || 'Preview gagal.');
                    return false;
                }
            }
        }).then(async (res) => {
            if (!res.isConfirmed) return;
            const resp = res.value || {};
            const data = resp.data || {};
            const rows = data.rows || [];
            const invalid = rows.filter(r => r.status === 'invalid');

            const previewHtml = `
                <div class="text-start">
                    <div><b>Total:</b> ${data.total || 0}</div>
                    <div><b>Valid:</b> ${data.valid || 0}</div>
                    <div><b>Duplicate (skip):</b> ${data.duplicates || 0}</div>
                    <div><b>Invalid:</b> ${data.invalid || 0}</div>
                    ${invalid.length ? `<hr class="my-2"><div class="small text-muted mb-1">Contoh error (maks 15):</div>
                        <div style="max-height:220px; overflow:auto; border:1px solid #eee; padding:8px;">
                            ${invalid.slice(0,15).map(r => `<div class="mb-1"><b>Row ${r.row}:</b> ${escapeHtml(r.message || 'Invalid')}</div>`).join('')}
                        </div>` : ''}
                </div>
            `;

            Swal.fire({
                title: 'Preview Import',
                html: previewHtml,
                showCancelButton: true,
                confirmButtonText: 'Simpan Import',
                preConfirm: async () => {
                    try {
                        const r2 = await $.post(`{{ route('forgetting_clock_request.import.confirm') }}`, { preview_id: resp.preview_id });
                        return r2;
                    } catch (xhr) {
                        Swal.showValidationMessage(xhr?.responseJSON?.message || 'Import gagal.');
                        return false;
                    }
                }
            }).then((res2) => {
                if (!res2.isConfirmed) return;
                const r2 = res2.value || {};
                const msg = r2.message || 'Import tersimpan.';
                const errUrl = r2.error_report_url || '';
                const extra = errUrl ? `<div class="mt-2"><a href="${errUrl}" target="_blank">Download error report (XLSX)</a></div>` : '';
                Swal.fire({ title: 'Success', html: `<div>${escapeHtml(msg)}</div>${extra}`, icon: 'success' });
                loadData();
            });
        });
    });

    setView(selfMode ? 'calendar' : 'table');
    $.when(loadRefs()).always(function(){
        syncBulkButtonsWithStatusTab();
        loadData();
        prefillFromQuery();
    });
});
</script>
@endpush