@extends('layouts.adminlte')

@section('title', 'Scheduler')
@section('page_title', 'Scheduler')

@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/fullcalendar/index.global.min.css') }}" />
    <style>
        #schedulerCalendar {
            min-height: 640px;
        }
        .scheduler-overview-row {
            align-items: stretch;
        }
        .scheduler-calendar-col,
        .scheduler-sync-col {
            display: flex;
            flex-direction: column;
            min-height: 640px;
        }
        .scheduler-calendar-col > p {
            flex: 0 0 auto;
        }
        .fc-more-popover {
            position: fixed !important;
            top: 84px !important;
            bottom: 24px !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%);
            width: min(430px, calc(100vw - 32px));
            max-height: none !important;
            display: flex;
            flex-direction: column;
            overflow: hidden !important;
            z-index: 1080;
        }
        .fc-more-popover .fc-popover-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
        }
        .fc-more-popover .fc-popover-header {
            flex: 0 0 auto;
        }
        #schedulerCalendar .fc-daygrid-event {
            white-space: normal;
            line-height: 1.25;
        }
        .sync-status-panel {
            min-height: 640px;
            height: 100%;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            border: 1px solid #d8dee6;
            border-radius: 6px;
            padding: 12px;
            background: #fff;
        }
        .sync-status-list {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .ui-runner-panel {
            border: 1px solid #d8dee6;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 12px;
            background: #f8fafc;
        }
        .ui-runner-panel.is-running {
            border-color: #86efac;
            background: #f0fdf4;
        }
        .ui-runner-panel.is-stopped {
            border-color: #fecaca;
            background: #fff1f2;
        }
        .runner-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 600;
            background: #e5e7eb;
            color: #374151;
            white-space: nowrap;
        }
        .runner-pill.is-on {
            background: #dcfce7;
            color: #166534;
        }
        .runner-pill.is-off {
            background: #fee2e2;
            color: #991b1b;
        }
        .sync-job-item {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 8px;
            margin-bottom: 8px;
            background: #f8fafc;
        }
        .sync-job-item.is-processing,
        .sync-job-item.is-pending {
            border-color: #93c5fd;
            background: #eff6ff;
        }
        .sync-job-item.is-done {
            border-color: #86efac;
            background: #f0fdf4;
        }
        .sync-job-item.is-failed {
            border-color: #fecaca;
            background: #fff1f2;
        }
        #schedulerTable tbody tr.scheduler-status-success > td {
            background-color: #ecfdf3;
        }
        #schedulerTable tbody tr.scheduler-status-failed > td {
            background-color: #fff1f2;
        }
        #schedulerTable tbody tr.scheduler-status-success td:first-child {
            border-left: 4px solid #198754;
        }
        #schedulerTable tbody tr.scheduler-status-failed td:first-child {
            border-left: 4px solid #dc3545;
        }
        #schedulerTable tbody tr.scheduler-status-queued > td {
            background-color: #eff6ff;
        }
        #schedulerTable tbody tr.scheduler-status-queued td:first-child {
            border-left: 4px solid #0d6efd;
        }
        .scheduler-target-cell {
            min-width: 340px;
        }
        .scheduler-command-text {
            font-family: "Consolas", "Courier New", monospace;
            font-size: 12px;
            line-height: 1.45;
            white-space: normal;
            word-break: break-word;
        }
        .scheduler-progress-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        .scheduler-progress-card {
            border: 1px solid #dbe4f0;
            border-radius: 10px;
            padding: 8px 9px;
            background: #f8fbff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }
        .scheduler-progress-card.is-processing,
        .scheduler-progress-card.is-queued,
        .scheduler-progress-card.is-pending {
            border-color: #93c5fd;
            background: #eff6ff;
        }
        .scheduler-progress-card.is-success,
        .scheduler-progress-card.is-done {
            border-color: #86efac;
            background: #f0fdf4;
        }
        .scheduler-progress-card.is-failed {
            border-color: #fecaca;
            background: #fff1f2;
        }
        .scheduler-progress-card.is-disabled,
        .scheduler-progress-card.is-idle {
            border-color: #e5e7eb;
            background: #f8fafc;
            opacity: 0.85;
        }
        .scheduler-progress-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        .scheduler-progress-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
        }
        .scheduler-progress-card-meta,
        .scheduler-progress-card-message,
        .scheduler-progress-card-updated {
            font-size: 11px;
            line-height: 1.35;
        }
        .scheduler-progress-card-message {
            color: #475569;
            min-height: 30px;
        }
        .scheduler-progress-card-updated {
            color: #64748b;
            margin-top: 4px;
        }
        .scheduler-progress-overall {
            margin-top: 8px;
            padding: 6px 8px;
            border-radius: 8px;
            background: #f8fafc;
            border: 1px dashed #dbe4f0;
            font-size: 11px;
            color: #475569;
        }
        @media (max-width: 991.98px) {
            #schedulerCalendar,
            .scheduler-calendar-col,
            .scheduler-sync-col,
            .sync-status-panel {
                min-height: 0;
            }
            .sync-status-list {
                max-height: 420px;
            }
            .scheduler-progress-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">Scheduler Calendar (FullCalendar v6)</h3>
            <button class="btn btn-outline-primary btn-sm" id="btnRefreshCalendar">
                <i class="fas fa-sync-alt me-1"></i>Refresh Calendar
            </button>
        </div>
        <div class="card-body">
            <div class="row g-3 scheduler-overview-row">
                <div class="col-lg-8 scheduler-calendar-col">
                    <p class="text-muted mb-2">Tip: klik kanan pada tanggal di kalender untuk cepat tambah task.</p>
                    <div id="schedulerCalendar"></div>
                </div>
                <div class="col-lg-4 scheduler-sync-col">
                    <div class="sync-status-panel">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="mb-1">Realtime Sync Finger</h6>
                                <div class="small text-muted" id="syncStatusAsOf">-</div>
                            </div>
                            <button class="btn btn-outline-primary btn-sm" id="btnRefreshSyncStatus">
                                <i class="fas fa-sync-alt me-1"></i>Refresh
                            </button>
                        </div>
                        <div class="ui-runner-panel is-stopped" id="uiRunnerPanel">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="fw-semibold">UI Scheduler Runner</div>
                                    <div class="small text-muted" id="uiRunnerStatusText">Memuat status runner...</div>
                                </div>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-success btn-sm" id="btnStartUiRunner">
                                        <i class="fas fa-play me-1"></i>Start
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm" id="btnStopUiRunner">
                                        <i class="fas fa-stop me-1"></i>Stop
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap gap-1 mt-2">
                                <span class="runner-pill is-off" id="runnerSchedulerPill">Scheduler: off</span>
                                <span class="runner-pill is-off" id="runnerQueuePill">Queue: off</span>
                                <span class="runner-pill" id="runnerPendingPill">Pending: 0</span>
                            </div>
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-4">
                                <div class="border rounded p-2">
                                    <div class="small text-muted">Log Hari Ini</div>
                                    <div class="fw-bold" id="syncLogTotal">0</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border rounded p-2">
                                    <div class="small text-muted">Mapped</div>
                                    <div class="fw-bold text-success" id="syncLogMapped">0</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border rounded p-2">
                                    <div class="small text-muted">Review</div>
                                    <div class="fw-bold text-primary" id="syncReviewTotal">0</div>
                                </div>
                            </div>
                        </div>
                        <div class="small text-muted mb-2" id="syncLogRange">Range log: -</div>
                        <div class="sync-status-list" id="syncJobList">
                            <div class="text-muted small">Memuat status...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">Scheduler Tasks</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('guides.index', ['section' => 'scheduler']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>User Guide
                </a>
                <button class="btn btn-primary btn-sm" id="btnAddTask">
                    <i class="fas fa-plus me-1"></i>Add Task
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2 mb-3">
                <div><b>Mode UI:</b> klik <b>Start</b> pada panel Realtime Sync Finger untuk menjalankan worker scheduler dari halaman ini.</div>
                <div class="small mt-1">
                    Ubuntu service alternatif:
                    <code>cd /path-to-project && nohup php artisan scheduler:ui-worker --sleep=30 >> storage/logs/ui-scheduler-runner.log 2>&1 &</code>
                </div>
                <div class="small mt-1">
                    Format cron memakai 5 kolom, contoh tiap 10 menit: <code>*/10 * * * *</code>.
                </div>
            </div>
            <div class="table-responsive">
                <table id="schedulerTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Target</th>
                            <th>Cron</th>
                            <th>Timezone</th>
                            <th>Active</th>
                            <th>Last Run</th>
                            <th>Status</th>
                            <th>Run Count</th>
                            <th style="width:280px">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="schedulerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="schedulerModalTitle">Add Task</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="schedulerForm">
                    <div class="modal-body">
                        <input type="hidden" id="taskId" />
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" id="taskName" required />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Timezone (optional)</label>
                                <input type="text" class="form-control" id="taskTimezone" placeholder="Asia/Jakarta" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Task Type</label>
                                <select class="form-select" id="taskType">
                                    <option value="command">Command</option>
                                    <option value="url">URL</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <div id="commandSection">
                                    <label class="form-label">Preset Command</label>
                                    <select class="form-select mb-2" id="taskCommandPreset">
                                        <option value="">- Custom command -</option>
                                        <option value="attendance">Attendance Finger + Run Detection</option>
                                        <option value="thirdparty">Sync Job + SPL + Leave (Draft)</option>
                                        <option value="thirdparty_submit">Sync Job + SPL + Leave (Submit saja)</option>
                                        <option value="thirdparty_approve">Sync Job + SPL + Leave (Submit + Approve)</option>
                                        <option value="all">Sync Semua HRIS</option>
                                        <option value="scheduler_runner">Run Dynamic Scheduler</option>
                                    </select>
                                    <label class="form-label">Artisan Command</label>
                                    <textarea class="form-control" id="taskCommand" rows="3" placeholder="inspire"></textarea>
                                    <div id="taskSplModeWrap" class="border rounded p-2 my-2 bg-light d-none">
                                        <div class="row g-2 align-items-end">
                                            <div class="col-md-5">
                                                <label class="form-label mb-1">Mode SPL Cron</label>
                                                <select class="form-select" id="taskSplMode">
                                                    <option value="draft">Draft saja</option>
                                                    <option value="submit">Submit saja</option>
                                                    <option value="approve">Submit + Approve</option>
                                                </select>
                                            </div>
                                            <div class="col-md-7">
                                                <div class="small text-muted">
                                                    Berlaku untuk <code>ahsp:cron-sync</code>. Pilihan ini otomatis menulis
                                                    <code>--spl-mode</code> ke command agar cron tidak ambigu.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        Isi command artisan tanpa prefix <code>php artisan</code>. Untuk cron panjang, gunakan preset <code>ahsp:cron-sync</code>.
                                    </small>
                                </div>
                                <div id="urlSection" class="d-none">
                                    <div class="row g-2">
                                        <div class="col-md-3">
                                            <label class="form-label">HTTP Method</label>
                                            <select class="form-select" id="taskHttpMethod">
                                                <option value="GET">GET</option>
                                                <option value="POST">POST</option>
                                                <option value="PUT">PUT</option>
                                                <option value="PATCH">PATCH</option>
                                                <option value="DELETE">DELETE</option>
                                            </select>
                                        </div>
                                        <div class="col-md-9">
                                            <label class="form-label">URL</label>
                                            <input type="url" class="form-control" id="taskUrl" placeholder="https://domain/api/..." />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Request Headers (JSON object)</label>
                                            <textarea class="form-control" rows="3" id="taskHeaders" placeholder='{"Authorization":"Bearer x"}'></textarea>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Request Body (JSON)</label>
                                            <textarea class="form-control" rows="3" id="taskBody" placeholder='{"key":"value"}'></textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Timeout (seconds)</label>
                                            <input type="number" min="1" max="600" class="form-control" id="taskTimeout" value="30" />
                                        </div>
                                        <div class="col-md-8 d-flex align-items-end">
                                            <div class="form-check form-switch mb-2">
                                                <input class="form-check-input" type="checkbox" id="taskVerifySsl" checked />
                                                <label class="form-check-label" for="taskVerifySsl">Verify SSL</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Cron Expression</label>
                                <input type="text" class="form-control" id="taskCron" value="* * * * *" required />
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Common Cron</label>
                                <select class="form-select" id="commonCron">
                                    <option value="">- Select -</option>
                                    @foreach ($commonCron as $expr => $label)
                                        <option value="{{ $expr }}">{{ $label }} ({{ $expr }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="taskActive" checked />
                                    <label class="form-check-label" for="taskActive">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@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/fullcalendar/index.global.min.js') }}"></script>
    <script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const modal = new bootstrap.Modal(document.getElementById('schedulerModal'));
            let rowsCache = [];
            let calendar = null;
            let uiRunnerEnabled = localStorage.getItem('schedulerUiRunnerEnabled') === '1';
            const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            }[ch]));
            const toCronFromDate = (dateObj) => {
                const d = new Date(dateObj);
                if (Number.isNaN(d.getTime())) return '* * * * *';
                const minute = d.getMinutes();
                const hour = d.getHours();
                const day = d.getDate();
                const month = d.getMonth() + 1;
                return `${minute} ${hour} ${day} ${month} *`;
            };
            const commandPresets = {
                attendance: {
                    name: 'AMBIL FINGER AUTO PER JAM',
                    command: 'ahsp:cron-sync --only=attendance --attendance-lookback=3 --run-detect --override-lock',
                    cron: '*/10 * * * *',
                },
                thirdparty: {
                    name: 'SYNC JOB SPL LEAVE DRAFT',
                    command: 'ahsp:cron-sync --only=masterjob,spl,leave --rolling-days=3 --spl-mode=draft --leave-mode=draft --sync-leave-approval',
                    cron: '*/30 * * * *',
                },
                thirdparty_submit: {
                    name: 'SYNC JOB SPL LEAVE AUTO SUBMIT',
                    command: 'ahsp:cron-sync --only=masterjob,spl,leave --rolling-days=3 --spl-mode=submit --leave-mode=submit --sync-leave-approval',
                    cron: '*/30 * * * *',
                },
                thirdparty_approve: {
                    name: 'SYNC JOB SPL LEAVE AUTO APPROVE',
                    command: 'ahsp:cron-sync --only=masterjob,spl,leave --rolling-days=3 --spl-mode=approve --leave-mode=approve --sync-leave-approval',
                    cron: '*/30 * * * *',
                },
                all: {
                    name: 'SYNC HRIS SEMUA AUTO',
                    command: 'ahsp:cron-sync --only=masterjob,spl,leave,attendance --rolling-days=3 --spl-mode=draft --attendance-lookback=3 --run-detect --override-lock --sync-leave-approval',
                    cron: '*/30 * * * *',
                },
                scheduler_runner: {
                    name: 'RUN DYNAMIC SCHEDULER',
                    command: 'scheduler:run-dynamic',
                    cron: '* * * * *',
                },
            };
            const openAddTaskFromDate = (dateObj) => {
                $('#schedulerModalTitle').text('Add Task');
                $('#taskId').val('');
                $('#schedulerForm')[0].reset();
                $('#taskType').val('command');
                $('#taskHttpMethod').val('GET');
                $('#taskTimeout').val('30');
                $('#taskVerifySsl').prop('checked', true);
                $('#taskActive').prop('checked', true);
                $('#commonCron').val('');
                $('#taskCommandPreset').val('');
                $('#taskSplMode').val('draft');

                const clicked = new Date(dateObj);
                const safeDate = Number.isNaN(clicked.getTime()) ? new Date() : clicked;
                const mm = String(safeDate.getMonth() + 1).padStart(2, '0');
                const dd = String(safeDate.getDate()).padStart(2, '0');
                $('#taskName').val(`Task ${safeDate.getFullYear()}-${mm}-${dd}`);
                $('#taskCron').val(toCronFromDate(safeDate));

                syncTypeFields();
                syncSplModePanel();
                modal.show();
            };
            const closeCalendarMorePopover = () => {
                document.querySelectorAll('.fc-more-popover').forEach((el) => el.remove());
            };
            const syncSchedulerPanelHeight = () => {
                const calendarEl = document.getElementById('schedulerCalendar');
                const panelEl = document.querySelector('.sync-status-panel');
                if (!calendarEl || !panelEl) return;

                if (window.matchMedia('(max-width: 991.98px)').matches) {
                    panelEl.style.minHeight = '';
                    return;
                }

                const calendarHeight = Math.max(640, Math.ceil(calendarEl.getBoundingClientRect().height));
                panelEl.style.minHeight = `${calendarHeight}px`;
            };

            const initCalendar = () => {
                const calendarEl = document.getElementById('schedulerCalendar');
                if (!calendarEl || typeof FullCalendar === 'undefined') {
                    return;
                }
                calendar = new FullCalendar.Calendar(calendarEl, {
                    locale: 'id',
                    initialView: 'dayGridMonth',
                    height: 'auto',
                    firstDay: 1,
                    dayMaxEvents: 4,
                    moreLinkClick: 'popover',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    buttonText: {
                        today: 'Hari ini',
                        month: 'Bulan',
                        week: 'Minggu',
                        day: 'Hari',
                        list: 'Daftar',
                    },
                    eventTimeFormat: {
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: false
                    },
                    events: function(fetchInfo, successCallback, failureCallback) {
                        $.getJSON('{{ route('scheduler.calendar') }}', {
                            start: fetchInfo.startStr,
                            end: fetchInfo.endStr,
                        })
                            .done((resp) => {
                                successCallback(resp.data || []);
                                setTimeout(syncSchedulerPanelHeight, 120);
                            })
                            .fail((xhr) => failureCallback(xhr.responseJSON?.message || 'Failed load calendar data'));
                    },
                    datesSet: function () {
                        setTimeout(syncSchedulerPanelHeight, 120);
                    },
                    eventClick: function(info) {
                        const ext = info.event.extendedProps || {};
                        Swal.fire({
                            title: info.event.title || 'Task',
                            html: `
                                <div class="text-start">
                                    <div><b>Run at:</b> ${info.event.start ? info.event.start.toLocaleString() : '-'}</div>
                                    <div><b>Type:</b> ${ext.task_type || '-'}</div>
                                    <div><b>Target:</b> ${ext.target || '-'}</div>
                                    <div><b>Cron:</b> ${ext.cron || '-'}</div>
                                    <div><b>Timezone:</b> ${ext.timezone || '-'}</div>
                                </div>
                            `,
                            icon: 'info'
                        });
                    },
                    dayCellDidMount: function(info) {
                        info.el.addEventListener('contextmenu', function(ev) {
                            ev.preventDefault();
                            openAddTaskFromDate(info.date);
                        });
                    }
                });
                calendar.render();
                setTimeout(syncSchedulerPanelHeight, 180);
            };

            const table = $('#schedulerTable').DataTable({
                responsive: true,
                data: [],
                createdRow: function (row, data) {
                    $(row).removeClass('scheduler-status-success scheduler-status-failed scheduler-status-running scheduler-status-queued');
                    const status = String(data?.last_status || '').toLowerCase();
                    if (status === 'success') {
                        $(row).addClass('scheduler-status-success');
                    } else if (status === 'failed') {
                        $(row).addClass('scheduler-status-failed');
                    } else if (status === 'queued') {
                        $(row).addClass('scheduler-status-queued');
                    }
                },
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'task_type', render: (v) => v === 'url' ? '<span class="badge text-bg-info">URL</span>' : '<span class="badge text-bg-primary">Command</span>' },
                    {
                        data: null,
                        render: (row) => renderTaskTarget(row)
                    },
                    { data: 'cron_expression' },
                    { data: 'timezone', render: (v) => v || '-' },
                    { data: 'is_active', render: (v) => v ? '<span class="badge text-bg-success">Yes</span>' : '<span class="badge text-bg-secondary">No</span>' },
                    { data: 'last_run_at', render: (v) => v || '-' },
                    {
                        data: 'last_status',
                        render: (v) => {
                            const status = String(v || '-').toLowerCase();
                            if (status === 'success') return '<span class="badge text-bg-success"><i class="fas fa-check me-1"></i>Success</span>';
                            if (status === 'failed') return '<span class="badge text-bg-danger"><i class="fas fa-times me-1"></i>Failed</span>';
                            if (status === 'queued') return '<span class="badge text-bg-primary"><i class="fas fa-spinner me-1"></i>Queued</span>';
                            return `<span class="badge text-bg-secondary">${escapeHtml(v || '-')}</span>`;
                        }
                    },
                    { data: 'run_count' },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => `
                            <button class="btn btn-sm btn-outline-dark btn-check" data-id="${row.id}">Check</button>
                            <button class="btn btn-sm btn-outline-success btn-run" data-id="${row.id}">Run</button>
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-secondary btn-copy" data-id="${row.id}">Copy</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>
                        `
                    }
                ]
            });

            const loadData = () => {
                $.getJSON('{{ route('scheduler.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                        if (calendar) {
                            calendar.refetchEvents();
                        }
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load scheduler data', 'error');
                    });
            };
            const syncTypeFields = () => {
                const taskType = ($('#taskType').val() || 'command').toString().toLowerCase();
                $('#commandSection').toggleClass('d-none', taskType !== 'command');
                $('#urlSection').toggleClass('d-none', taskType !== 'url');
            };
            const isCronSyncCommand = (command) => /^ahsp:cron-sync\b/.test(String(command || '').trim());
            const extractSplMode = (command) => {
                const cmd = String(command || '');
                const splMode = cmd.match(/(?:^|\s)--spl-mode=([a-z_]+)/i)?.[1]?.toLowerCase();
                if (['draft', 'submit', 'approve'].includes(splMode)) return splMode;
                if (/(^|\s)--approve-spl\b/.test(cmd)) return 'approve';
                if (/(^|\s)--submit-spl\b/.test(cmd)) return 'submit';
                return 'draft';
            };
            const applySplModeToCommand = (command, mode) => {
                let cmd = String(command || '').trim().replace(/\s+/g, ' ');
                if (!isCronSyncCommand(cmd)) return cmd;
                const selected = ['draft', 'submit', 'approve'].includes(mode) ? mode : 'draft';
                cmd = cmd
                    .replace(/\s+--spl-mode(?:=(?:"[^"]*"|'[^']*'|[^\s]+))?/g, '')
                    .replace(/\s+--approve-spl\b/g, '')
                    .replace(/\s+--submit-spl\b/g, '')
                    .replace(/\s+/g, ' ')
                    .trim();
                return `${cmd} --spl-mode=${selected}`.trim();
            };
            const syncSplModePanel = (writeCommand = false) => {
                const taskType = ($('#taskType').val() || 'command').toString().toLowerCase();
                const command = ($('#taskCommand').val() || '').toString();
                const enabled = taskType === 'command' && isCronSyncCommand(command);
                $('#taskSplModeWrap').toggleClass('d-none', !enabled);
                if (!enabled) return;

                const mode = extractSplMode(command);
                $('#taskSplMode').val(mode);
                if (writeCommand) {
                    $('#taskCommand').val(applySplModeToCommand(command, mode));
                }
            };
            const statusBadge = (status) => {
                const s = String(status || '-').toLowerCase();
                if (s === 'done' || s === 'success') return '<span class="badge text-bg-success">done</span>';
                if (s === 'processing') return '<span class="badge text-bg-primary">processing</span>';
                if (s === 'pending') return '<span class="badge text-bg-info">pending</span>';
                if (s === 'queued') return '<span class="badge text-bg-info">queued</span>';
                if (s === 'idle') return '<span class="badge text-bg-secondary">idle</span>';
                if (s === 'disabled') return '<span class="badge text-bg-light text-dark border">off</span>';
                if (s === 'failed') return '<span class="badge text-bg-danger">failed</span>';
                if (s === 'cancelled') return '<span class="badge text-bg-secondary">cancelled</span>';
                return `<span class="badge text-bg-secondary">${escapeHtml(status || '-')}</span>`;
            };
            const renderTaskProgressCards = (taskProgress) => {
                if (!taskProgress || !taskProgress.is_suite) {
                    return '';
                }

                const components = Array.isArray(taskProgress.components) ? taskProgress.components : [];
                if (!components.length) {
                    return '';
                }

                const selectedSummary = Array.isArray(taskProgress.selected) && taskProgress.selected.length
                    ? taskProgress.selected.map((item) => escapeHtml(String(item || '').toUpperCase())).join(', ')
                    : '-';

                const cards = components.map((component) => {
                    const status = String(component.status || 'idle').toLowerCase();
                    const percent = component.percent === null || component.percent === undefined
                        ? null
                        : Math.max(0, Math.min(100, Number(component.percent || 0)));
                    const processed = Number(component.processed || 0);
                    const total = Number(component.total || 0);
                    const countsLabel = String(component.counts_label || '').trim();
                    const counterText = total > 0
                        ? `${processed.toLocaleString('id-ID')} / ${total.toLocaleString('id-ID')}`
                        : countsLabel;
                    return `
                        <div class="scheduler-progress-card is-${escapeHtml(status)}">
                            <div class="scheduler-progress-card-head">
                                <div class="scheduler-progress-card-title">${escapeHtml(component.label || '-')}</div>
                                ${statusBadge(status)}
                            </div>
                            ${percent !== null ? `
                                <div class="progress mb-2" style="height:6px;">
                                    <div class="progress-bar" style="width:${percent}%"></div>
                                </div>
                                <div class="scheduler-progress-card-meta">${percent.toLocaleString('id-ID')}%${counterText ? ` | ${escapeHtml(counterText)}` : ''}</div>
                            ` : `
                                <div class="scheduler-progress-card-meta">${escapeHtml(counterText || 'Tidak aktif')}</div>
                            `}
                            <div class="scheduler-progress-card-message">${escapeHtml(component.message || '-')}</div>
                            ${component.updated_at ? `<div class="scheduler-progress-card-updated">Update: ${escapeHtml(component.updated_at)}</div>` : ''}
                        </div>
                    `;
                }).join('');

                return `
                    <div class="scheduler-progress-grid">${cards}</div>
                    <div class="scheduler-progress-overall">
                        Komponen: ${selectedSummary}
                        ${taskProgress.updated_at ? ` | Progress update: ${escapeHtml(taskProgress.updated_at)}` : ''}
                    </div>
                `;
            };
            const renderTaskTarget = (row) => {
                const commandText = row.task_type === 'url'
                    ? `${row.http_method || 'GET'} ${row.url || '-'}`
                    : (row.command || '-');
                return `
                    <div class="scheduler-target-cell">
                        <div class="scheduler-command-text">${escapeHtml(commandText)}</div>
                        ${renderTaskProgressCards(row.task_progress || null)}
                    </div>
                `;
            };
            const setRunnerPill = (selector, label, running) => {
                $(selector)
                    .toggleClass('is-on', !!running)
                    .toggleClass('is-off', !running)
                    .html(`${running ? '<i class="fas fa-check-circle"></i>' : '<i class="fas fa-times-circle"></i>'} ${escapeHtml(label)}: ${running ? 'on' : 'off'}`);
            };
            const renderRunnerStatus = (payload) => {
                const data = payload?.data || {};
                const scheduler = data.scheduler || {};
                const queue = data.queue || {};
                const queueStats = data.queue_stats || {};
                const queueCoversRealtime = !!queue.covers_realtime;
                const isRunning = !!data.running || uiRunnerEnabled;
                $('#uiRunnerPanel')
                    .toggleClass('is-running', isRunning)
                    .toggleClass('is-stopped', !isRunning);
                const runnerMode = data.running
                    ? 'Background + UI heartbeat aktif'
                    : (uiRunnerEnabled
                        ? (queue.running && !queueCoversRealtime
                            ? 'UI heartbeat aktif, tetapi queue worker tidak mencakup scheduler/attendance-review'
                            : 'UI heartbeat aktif')
                        : 'Belum aktif / salah satu proses mati');
                $('#uiRunnerStatusText').text(`${runnerMode}. Update: ${data.as_of || '-'}`);
                setRunnerPill('#runnerSchedulerPill', `Scheduler${scheduler.pid ? ' #' + scheduler.pid : ''}`, !!scheduler.running);
                setRunnerPill('#runnerQueuePill', `Queue${queue.pid ? ' #' + queue.pid : ''}${queueCoversRealtime ? '' : ' (coverage kurang)'}`, !!queue.running && queueCoversRealtime);
                $('#runnerPendingPill').text(`Pending: ${Number(queueStats.realtime_pending_total || 0).toLocaleString('id-ID')}`);
                $('#btnStartUiRunner').prop('disabled', isRunning);
                $('#btnStopUiRunner').prop('disabled', !scheduler.running && !queue.running);
            };
            const loadRunnerStatus = () => {
                $.getJSON('{{ route('scheduler.runner.status') }}')
                    .done(renderRunnerStatus)
                    .fail((xhr) => {
                        $('#uiRunnerStatusText').text(xhr.responseJSON?.message || 'Gagal membaca status runner');
                    });
            };
            const runnerTick = () => {
                if (!uiRunnerEnabled) return;
                    $.post('{{ route('scheduler.runner.tick') }}')
                    .done((resp) => {
                        renderRunnerStatus(resp);
                        if ((Array.isArray(resp?.results) && resp.results.length) || resp?.queue_fallback?.ran) {
                            loadData();
                            loadSyncStatus();
                            toastr.info(resp?.queue_fallback?.ran ? 'Queue fallback diproses dari UI.' : (resp.message || 'Due task dijalankan'));
                        }
                    })
                    .fail((xhr) => {
                        $('#uiRunnerStatusText').text(xhr.responseJSON?.message || 'Heartbeat runner gagal');
                    });
            };
            const renderSyncStatus = (payload) => {
                const data = payload?.data || {};
                const logs = data.logs || {};
                const reviews = data.reviews || {};
                $('#syncStatusAsOf').text(`Update: ${data.as_of || '-'}`);
                $('#syncLogTotal').text(Number(logs.total || 0).toLocaleString('id-ID'));
                $('#syncLogMapped').text(Number(logs.mapped || 0).toLocaleString('id-ID'));
                $('#syncReviewTotal').text(Number(reviews.total || 0).toLocaleString('id-ID'));
                const logRange = logs.min_log || logs.max_log
                    ? `${logs.min_log || '-'} s/d ${logs.max_log || '-'}`
                    : '-';
                $('#syncLogRange').text(`Tanggal ${data.date || '-'} | Range log: ${logRange} | NULL: ${Number(logs.unmapped || 0).toLocaleString('id-ID')}`);

                const jobs = Array.isArray(data.jobs) ? data.jobs : [];
                if (!jobs.length) {
                    $('#syncJobList').html('<div class="text-muted small">Belum ada job sync/detection.</div>');
                    return;
                }
                $('#syncJobList').html(jobs.map((job) => {
                    const status = String(job.status || '').toLowerCase();
                    const type = String(job.type || '-').replace('sync_public_api', 'sync').replace('detect', 'detection');
                    const pct = Math.max(0, Math.min(100, Number(job.progress || 0)));
                    const counts = type === 'sync'
                        ? `fetch ${Number(job.fetched || 0)}, insert ${Number(job.inserted || 0)}, dup ${Number(job.duplicates || 0)}, fail ${Number(job.failed || 0)}`
                        : `${Number(job.processed || 0)} / ${Number(job.total || 0)} karyawan`;
                    const err = job.error_message ? `<div class="small text-danger mt-1">${escapeHtml(job.error_message)}</div>` : '';
                    const msg = job.message ? `<div class="small text-muted mt-1">${escapeHtml(job.message)}</div>` : '';
                    const canStop = ['pending', 'processing', 'paused'].includes(status);
                    const stopBtn = canStop
                        ? `<button type="button" class="btn btn-sm btn-outline-danger btn-stop-sync-job" data-job-id="${Number(job.id || 0)}"><i class="fas fa-stop me-1"></i>Stop</button>`
                        : '';
                    return `
                        <div class="sync-job-item is-${escapeHtml(status)}">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="fw-semibold">${escapeHtml(job.request_no || ('Job #' + job.id))}</div>
                                <div class="d-flex align-items-center gap-1">
                                    ${stopBtn}
                                    ${statusBadge(status)}
                                </div>
                            </div>
                            <div class="small text-muted">${escapeHtml(type)} | ${escapeHtml(job.started_at || job.created_at || '-')}</div>
                            <div class="progress mt-2" style="height:8px;">
                                <div class="progress-bar" style="width:${pct}%"></div>
                            </div>
                            <div class="small mt-1">${escapeHtml(counts)} | ${pct.toLocaleString('id-ID')}%</div>
                            ${msg}
                            ${err}
                        </div>
                    `;
                }).join(''));
            };
            const loadSyncStatus = () => {
                $.getJSON('{{ route('scheduler.attendance_sync_status') }}')
                    .done(renderSyncStatus)
                    .fail((xhr) => {
                        $('#syncJobList').html(`<div class="alert alert-danger py-2 px-3 mb-0 small">${escapeHtml(xhr.responseJSON?.message || 'Gagal memuat status sync')}</div>`);
                    });
            };

            $('#btnAddTask').on('click', function () {
                $('#schedulerModalTitle').text('Add Task');
                $('#taskId').val('');
                $('#schedulerForm')[0].reset();
                $('#taskCron').val('* * * * *');
                $('#taskActive').prop('checked', true);
                $('#taskType').val('command');
                $('#taskCommandPreset').val('');
                $('#taskHttpMethod').val('GET');
                $('#taskTimeout').val('30');
                $('#taskVerifySsl').prop('checked', true);
                $('#taskSplMode').val('draft');
                syncTypeFields();
                syncSplModePanel();
                modal.show();
            });

            $('#commonCron').on('change', function () {
                if (this.value) {
                    $('#taskCron').val(this.value);
                }
            });
            $('#taskCommandPreset').on('change', function () {
                const preset = commandPresets[$(this).val() || ''];
                if (!preset) return;
                if (!($('#taskName').val() || '').toString().trim()) {
                    $('#taskName').val(preset.name);
                }
                $('#taskCommand').val(preset.command);
                $('#taskCron').val(preset.cron);
                $('#taskType').val('command');
                syncTypeFields();
                syncSplModePanel(true);
            });
            $('#taskType').on('change', function () {
                syncTypeFields();
                syncSplModePanel();
            });
            $('#taskSplMode').on('change', function () {
                $('#taskCommand').val(applySplModeToCommand($('#taskCommand').val(), $(this).val()));
                syncSplModePanel();
            });
            $('#taskCommand').on('input', function () {
                syncSplModePanel(false);
            });
            $('#taskCommand').on('blur', function () {
                syncSplModePanel(true);
            });

            $('#schedulerTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((item) => Number(item.id) === id);
                if (!row) return;

                $('#schedulerModalTitle').text('Edit Task');
                $('#taskId').val(row.id);
                $('#taskName').val(row.name || '');
                $('#taskType').val((row.task_type || 'command').toLowerCase());
                $('#taskCommand').val(row.command || '');
                $('#taskCommandPreset').val('');
                $('#taskUrl').val(row.url || '');
                $('#taskHttpMethod').val((row.http_method || 'GET').toUpperCase());
                $('#taskHeaders').val(row.request_headers ? JSON.stringify(row.request_headers, null, 2) : '');
                $('#taskBody').val(row.request_body || '');
                $('#taskTimeout').val(row.timeout_seconds || 30);
                $('#taskVerifySsl').prop('checked', !!row.verify_ssl);
                $('#taskCron').val(row.cron_expression || '* * * * *');
                $('#taskTimezone').val(row.timezone || '');
                $('#taskActive').prop('checked', !!row.is_active);
                $('#commonCron').val('');
                syncTypeFields();
                syncSplModePanel(true);
                modal.show();
            });

            $('#schedulerTable').on('click', '.btn-copy', async function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((item) => Number(item.id) === id);
                if (!row) return;
                const text = row.task_type === 'url'
                    ? `${row.http_method || 'GET'} ${row.url || ''}`.trim()
                    : (row.command || '').toString();
                try {
                    await navigator.clipboard.writeText(text);
                    toastr.success('Target task berhasil disalin');
                } catch (e) {
                    Swal.fire({
                        title: 'Copy Target',
                        input: 'textarea',
                        inputValue: text,
                        inputAttributes: { readonly: true },
                        confirmButtonText: 'Tutup',
                    });
                }
            });

            $('#schedulerForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#taskId').val();
                const taskType = ($('#taskType').val() || 'command').toString().trim();
                let command = ($('#taskCommand').val() || '').toString().trim();
                if (taskType.toLowerCase() === 'command') {
                    command = applySplModeToCommand(command, $('#taskSplMode').val());
                    $('#taskCommand').val(command);
                }
                const payload = {
                    name: ($('#taskName').val() || '').toString().trim(),
                    task_type: taskType,
                    command,
                    url: ($('#taskUrl').val() || '').toString().trim(),
                    http_method: ($('#taskHttpMethod').val() || 'GET').toString().trim(),
                    request_headers: ($('#taskHeaders').val() || '').toString().trim(),
                    request_body: ($('#taskBody').val() || '').toString(),
                    timeout_seconds: ($('#taskTimeout').val() || '30').toString().trim(),
                    verify_ssl: $('#taskVerifySsl').is(':checked') ? 1 : 0,
                    cron_expression: ($('#taskCron').val() || '').toString().trim(),
                    timezone: ($('#taskTimezone').val() || '').toString().trim(),
                    is_active: $('#taskActive').is(':checked') ? 1 : 0
                };

                $.ajax({
                    url: id ? `{{ url('/scheduler') }}/${id}` : '{{ route('scheduler.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#schedulerTable').on('click', '.btn-run', function () {
                const id = Number($(this).data('id'));
                $.ajax({
                    url: `{{ url('/scheduler') }}/${id}/run-now`,
                    type: 'POST'
                }).done((resp) => {
                    loadData();
                    const status = String(resp?.status || '-').toLowerCase();
                    const icon = status === 'success' ? 'success' : (status === 'queued' ? 'info' : 'warning');
                    Swal.fire('Result', `${resp?.status || '-'}\n${resp?.output || '-'}`, icon);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Run failed', 'error');
                });
            });

            $('#schedulerTable').on('click', '.btn-check', function () {
                const id = Number($(this).data('id'));
                const btn = $(this);
                btn.prop('disabled', true).text('Checking...');
                $.ajax({
                    url: `{{ url('/scheduler') }}/${id}/check`,
                    type: 'POST'
                }).done((resp) => {
                    loadData();
                    const job = resp?.job || null;
                    const jobHtml = job ? `
                        <hr>
                        <div class="text-start">
                            <div><b>Job:</b> ${escapeHtml(job.request_no || job.id || '-')}</div>
                            <div><b>Status:</b> ${escapeHtml(job.status || '-')} ${job.stage ? `(${escapeHtml(job.stage)})` : ''}</div>
                            <div><b>Result:</b> fetched ${Number(job.fetched || 0)}, valid ${Number(job.normalized || 0)}, inserted ${Number(job.inserted || 0)}, duplicate ${Number(job.duplicates || 0)}, failed ${Number(job.failed || 0)}</div>
                            ${job.message ? `<div><b>Message:</b> ${escapeHtml(job.message)}</div>` : ''}
                            ${job.error_message ? `<div class="text-danger"><b>Error:</b> ${escapeHtml(job.error_message)}</div>` : ''}
                        </div>
                    ` : '';
                    Swal.fire({
                        title: resp?.status === 'success' ? 'Checker Success' : 'Checker Warning',
                        icon: resp?.status === 'success' ? 'success' : 'warning',
                        width: 760,
                        html: `
                            <div class="text-start">
                                <div><b>Status:</b> ${escapeHtml(resp?.status || '-')}</div>
                                <div><b>Code:</b> ${Number(resp?.code ?? 0)}</div>
                                ${resp?.hint ? `<div class="alert alert-info py-2 px-3 my-2">${escapeHtml(resp.hint)}</div>` : ''}
                                <div><b>Output:</b></div>
                                <pre class="text-start bg-light border rounded p-2 mt-1" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(resp?.output || '-')}</pre>
                            </div>
                            ${jobHtml}
                        `,
                    });
                }).fail((xhr) => {
                    const resp = xhr.responseJSON || {};
                    loadData();
                    Swal.fire({
                        title: 'Checker Failed',
                        icon: 'error',
                        width: 760,
                        html: `
                            <div class="text-start">
                                <div>${escapeHtml(resp?.message || 'Check failed')}</div>
                                <pre class="text-start bg-light border rounded p-2 mt-2" style="white-space:pre-wrap;max-height:260px;overflow:auto;">${escapeHtml(resp?.output || '')}</pre>
                            </div>
                        `,
                    });
                }).always(() => {
                    btn.prop('disabled', false).text('Check');
                });
            });

            $('#schedulerTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete scheduler task?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/scheduler') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            $('#btnRefreshCalendar').on('click', function () {
                if (calendar) {
                    calendar.refetchEvents();
                    toastr.success('Calendar refreshed');
                }
            });
            $('#btnStartUiRunner').on('click', function () {
                const btn = $(this);
                uiRunnerEnabled = true;
                localStorage.setItem('schedulerUiRunnerEnabled', '1');
                loadRunnerStatus();
                runnerTick();
                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Start...');
                $.post('{{ route('scheduler.runner.start') }}')
                    .done((resp) => {
                        toastr.success(resp?.message || 'UI runner started');
                        renderRunnerStatus(resp);
                        runnerTick();
                        loadSyncStatus();
                        loadData();
                    })
                    .fail((xhr) => {
                        toastr.warning((xhr.responseJSON?.message || 'Background runner gagal start') + '. UI heartbeat tetap aktif selama halaman ini terbuka.');
                        loadRunnerStatus();
                        runnerTick();
                    })
                    .always(() => {
                        btn.html('<i class="fas fa-play me-1"></i>Start');
                        loadRunnerStatus();
                    });
            });
            $('#btnStopUiRunner').on('click', function () {
                Swal.fire({
                    title: 'Stop UI runner?',
                    text: 'Scheduler dan queue worker yang dinyalakan dari UI akan dihentikan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Stop',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    const btn = $('#btnStopUiRunner');
                    btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Stop...');
                    $.post('{{ route('scheduler.runner.stop') }}')
                        .done((resp) => {
                            uiRunnerEnabled = false;
                            localStorage.removeItem('schedulerUiRunnerEnabled');
                            toastr.success(resp?.message || 'UI runner stopped');
                            renderRunnerStatus(resp);
                        })
                        .fail((xhr) => {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal stop UI runner', 'error');
                        })
                        .always(() => {
                            btn.html('<i class="fas fa-stop me-1"></i>Stop');
                            loadRunnerStatus();
                        });
                });
            });
            $('#btnRefreshSyncStatus').on('click', loadSyncStatus);
            $(document).on('click', '.fc-more-popover .fc-popover-close', function (event) {
                event.preventDefault();
                event.stopPropagation();
                closeCalendarMorePopover();
            });
            $(document).on('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeCalendarMorePopover();
                }
            });
            $(document).on('mousedown', function (event) {
                const target = $(event.target);
                if (!target.closest('.fc-more-popover, .fc-more-link').length) {
                    closeCalendarMorePopover();
                }
            });
            $('#syncJobList').on('click', '.btn-stop-sync-job', function () {
                const jobId = Number($(this).data('job-id') || 0);
                if (!jobId) return;
                Swal.fire({
                    title: 'Stop process?',
                    text: 'Job akan ditandai cancelled. Data yang sudah terlanjur masuk tetap tersimpan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Stop',
                    cancelButtonText: 'Batal'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/scheduler/attendance-sync-jobs') }}/${jobId}/cancel`,
                        type: 'POST'
                    }).done((resp) => {
                        toastr.success(resp?.message || 'Job dihentikan');
                        loadSyncStatus();
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal stop job', 'error');
                    });
                });
            });

            initCalendar();
            loadData();
            loadRunnerStatus();
            loadSyncStatus();
            if (uiRunnerEnabled) {
                runnerTick();
            }
            setInterval(loadData, 5000);
            setInterval(loadRunnerStatus, 10000);
            setInterval(runnerTick, 30000);
            setInterval(loadSyncStatus, 5000);
            window.addEventListener('resize', syncSchedulerPanelHeight);
            syncTypeFields();
        });
    </script>
@endpush