@extends('layouts.adminlte')

@section('title', 'MASTER SHIFT SCHEDULE')
@section('page_title', 'MASTER SHIFT SCHEDULE')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/fullcalendar/index.global.min.css') }}" />
    <style>
        .view-switch .btn.active { pointer-events: none; }
        #scheduleCalendar { min-height: 760px; }
        .fc .fc-toolbar-title { font-size: 1rem; font-weight: 700; }
        .fc .fc-button { text-transform: none; box-shadow: none !important; }
        .fc-event-shift { border: 0; border-radius: 10px; padding: 2px 4px; }
        .fc-event-holiday { background: #ffe3e3 !important; color: #b02a37 !important; border-color: #ffc9c9 !important; }
        .fc-event-locked { box-shadow: inset 0 0 0 1px rgba(125, 86, 0, 0.45); }
        .fc-daygrid-event-dot { display: none; }
        .request-badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; }
        .request-badge.pending { background: #fee2e2; color: #dc2626; font-weight: 700; }
        .request-badge.approved { background: #dcfce7; color: #16a34a; }
        .request-badge.rejected { background: #fef3c7; color: #d97706; }
        .request-badge.revoked { background: #e5e7eb; color: #6b7280; }
        .req-status-badge { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
        .req-status-badge.pending { background: #fee2e2; color: #dc2626; }
        .req-status-badge.approved { background: #dcfce7; color: #16a34a; }
        .req-status-badge.rejected { background: #fef3c7; color: #d97706; }
        .req-status-badge.revoked { background: #e5e7eb; color: #6b7280; }

        #frmModal .modal-dialog {
            max-width: min(1040px, calc(100vw - 1.5rem));
        }
        #frmPeriodPickerTableWrap {
            max-height: 320px;
            overflow: auto;
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
        }
        #frmPeriodPickerTable th,
        #frmPeriodPickerTable td {
            white-space: nowrap;
            vertical-align: middle;
        }
        @media (max-width: 768px) {
            #scheduleCalendar { min-height: 640px; }
            .fc .fc-toolbar { flex-direction: column; gap: .75rem; align-items: stretch; }
        }
    </style>
@endpush

@section('content')
    <div class="alert alert-info mb-3" id="guideShiftSchedule">
        <div class="d-flex align-items-start justify-content-between gap-2">
            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-info-circle"></i>
                <h6 class="mb-0">Keterangan Fitur Master Shift Schedule</h6>
                <span class="badge rounded-pill text-bg-light" id="guideShiftScheduleBadge">Auto close: 120s</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-dark" id="btnToggleGuideShiftSchedule" title="Tutup/Buka keterangan">
                    <i class="fas fa-chevron-up" id="guideShiftScheduleChevron"></i>
                </button>
                <button type="button" class="btn-close" aria-label="Close" id="btnCloseGuideShiftSchedule"></button>
            </div>
        </div>
        <div class="collapse show mt-2" id="guideShiftScheduleBody">
        <div class="small">
            <div><strong>Profil Bulan:</strong> memilih periode aktif payroll/attendance. Date From dan Date To akan mengikuti start/end profil.</div>
            <div><strong>Karyawan (Search):</strong> cari cepat berdasarkan kode atau nama karyawan.</div>
            <div><strong>Tampilkan:</strong> memuat data schedule sesuai filter yang dipilih.</div>
            <div><strong>Reset:</strong> mengembalikan filter ke default profil aktif.</div>
            <div><strong>Tambah:</strong> membuat schedule harian per karyawan per tanggal.</div>
            <div><strong>Bulk Apply:</strong> isi shift massal untuk banyak karyawan dan banyak tanggal.</div>
            <div><strong>Multiple Date Range:</strong> isi beberapa rentang tanggal (contoh: <code>2026-03-01..2026-03-07</code> atau <code>2026-03-10 s/d 2026-03-15</code>).</div>
            <div><strong>Multiple Date:</strong> isi tanggal terpisah (baris baru / dipisah koma).</div>
            <div><strong>Overwrite Existing:</strong> jika aktif, schedule lama akan diganti; jika nonaktif, data lama dilewati.</div>
            <div><strong>Lock Schedule:</strong> mengunci jadwal agar diprioritaskan saat proses Attendance Review run detection.</div>
            <div><strong>Prioritas Penerapan di Attendance Review:</strong> custom schedule profil aktif + locked, lalu custom profil aktif, lalu global locked, lalu global non-locked, terakhir fallback assignment bulanan.</div>
        </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Filter Schedule</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_shift_schedule.addon_download') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fab fa-chrome me-1"></i>Download Addon Chrome
                </a>
                <button class="btn btn-outline-success btn-sm" id="btnDownloadTemplate"><i class="fas fa-file-excel me-1"></i>Template</button>
                <button class="btn btn-outline-success btn-sm" id="btnImport"><i class="fas fa-file-upload me-1"></i>Import</button>
                <button class="btn btn-outline-primary btn-sm" id="btnBulk"><i class="fas fa-layer-group me-1"></i>Bulk Apply</button>
                <button class="btn btn-primary btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2">
                <div class="col-md-3">
                    <label class="form-label">Profil Bulan</label>
                    <select id="fProfil" class="form-select"></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Karyawan</label>
                    <select id="fKaryawan" class="form-select"></select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date From</label>
                    <input type="date" id="fFrom" class="form-control" />
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date To</label>
                    <input type="date" id="fTo" class="form-control" />
                </div>
                <div class="col-md-2 d-flex align-items-end gap-2">
                    <button class="btn btn-outline-primary w-100" id="btnFilter">Tampilkan</button>
                    <button class="btn btn-outline-secondary w-100" id="btnReset">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs mb-3" id="mainShiftTabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabSchedule" type="button">
                <i class="fas fa-calendar-alt me-1"></i>Schedule
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabRequests" type="button" id="tabBtnRequests">
                <i class="fas fa-inbox me-1"></i>Requests <span class="request-badge pending d-none" id="pendingBadge">0</span>
            </button>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tabSchedule">
            <div class="card">
                <div class="card-header"><h3 class="card-title m-0">Data Shift Schedule</h3></div>
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
            <div class="small text-muted">
                Gunakan mode kalender untuk melihat distribusi schedule per tanggal dan klik event untuk edit cepat.
            </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <button type="button" class="btn btn-outline-danger btn-sm" id="btnBulkDeleteMain"><i class="fas fa-trash me-1"></i>Bulk Delete</button>
                    <div class="btn-group btn-group-sm view-switch" role="group">
                        <button type="button" class="btn btn-primary active" id="btnViewTable">Tabel</button>
                        <button type="button" class="btn btn-outline-primary" id="btnViewCalendar">Full Calendar</button>
                    </div>
                </div>
            </div>
            <div id="tableWrapper">
                <div class="table-responsive">
                    <table id="tbl" class="table table-bordered table-hover align-middle w-100">
                        <thead>
                            <tr>
                                <th style="width: 40px;"><input type="checkbox" id="checkAllShiftRows" /></th>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th>Karyawan</th>
                                <th>Shift</th>
                                <th>Sumber</th>
                                <th>Lock</th>
                                <th>Catatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div id="calendarWrapper" class="d-none">
                <div id="scheduleCalendar"></div>
            </div>
        </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tabRequests">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0"><i class="fas fa-inbox me-1"></i>Shift Schedule Requests</h3>
                    <div class="d-flex gap-2 align-items-center">
                        <input type="text" class="form-control form-control-sm" id="reqSearch" placeholder="Cari nama/kode..." style="width:180px;" />
                        <select class="form-select form-select-sm" id="reqStatusFilter" style="width:130px;">
                            <option value="pending">Pending</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                            <option value="revoked">Revoked</option>
                            <option value="all">Semua</option>
                        </select>
                        <input type="date" class="form-control form-control-sm" id="reqDateFrom" style="width:140px;" />
                        <input type="date" class="form-control form-control-sm" id="reqDateTo" style="width:140px;" />
                        <button class="btn btn-outline-primary btn-sm" id="btnReqFilter"><i class="fas fa-search me-1"></i>Filter</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex gap-2">
                            <button class="btn btn-success btn-sm" id="btnReqApprove"><i class="fas fa-check me-1"></i>Approve Selected</button>
                            <button class="btn btn-danger btn-sm" id="btnReqReject"><i class="fas fa-times me-1"></i>Reject Selected</button>
                        </div>
                        <div class="small text-muted" id="reqSummary"></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle w-100" id="tblRequests">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:40px;"><input type="checkbox" id="checkAllRequests" /></th>
                                    <th>Tanggal</th>
                                    <th>Karyawan</th>
                                    <th>Shift Diminta</th>
                                    <th>Alasan</th>
                                    <th>Status</th>
                                    <th>Reviewer</th>
                                    <th>Catatan</th>
                                    <th style="width:90px;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="frmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="frmTitle">Tambah Shift Schedule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="frm">
                    <div class="modal-body">
                        <input type="hidden" id="id" />
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Profil Bulan</label>
                                <select id="profil_bulan_id" class="form-select"></select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Karyawan</label>
                                <select id="karyawan_id" class="form-select" required></select>
                            </div>
                            <div class="col-md-4" id="workDateSingleWrap">
                                <label class="form-label">Tanggal Kerja</label>
                                <input type="date" id="work_date" class="form-control" required />
                            </div>
                            <div class="col-md-8" id="shiftFieldWrap">
                                <label class="form-label">Shift</label>
                                <select id="profil_jam_kerja_id" class="form-select" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Source</label>
                                <input type="text" id="source" class="form-control" value="manual" />
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Catatan</label>
                                <input type="text" id="notes" class="form-control" />
                            </div>
                            <div class="col-12 d-none" id="frmAddMultiHint">
                                <div class="small text-muted">
                                    Mode tambah akan tetap terbuka setelah save. Pilih shift sekali, lalu centang tanggal-tanggal dalam 1 periode yang ingin langsung dibuatkan schedule.
                                </div>
                            </div>
                            <div class="col-12 d-none" id="frmPeriodPickerWrap">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                    <div class="small text-muted">Centang tanggal yang ingin diisi shift aktif saat ini.</div>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" id="btnFrmPickAllDates">Semua</button>
                                        <button type="button" class="btn btn-outline-primary" id="btnFrmPickWeekdays">Workday</button>
                                        <button type="button" class="btn btn-outline-secondary" id="btnFrmClearDates">Reset</button>
                                    </div>
                                </div>
                                <div id="frmPeriodPickerTableWrap">
                                    <table class="table table-sm table-striped mb-0" id="frmPeriodPickerTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="width: 44px;">#</th>
                                                <th>Tanggal</th>
                                                <th>Hari</th>
                                                <th>Data Existing</th>
                                            </tr>
                                        </thead>
                                        <tbody id="frmPeriodPickerRows">
                                            <tr><td colspan="4" class="text-center text-muted py-3">Pilih profil bulan dulu untuk menampilkan tanggal periode.</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-end mt-2">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="btnFrmAddToDraft">
                                        <i class="fas fa-plus me-1"></i>Add to Table
                                    </button>
                                </div>
                            </div>
                            <div class="col-12 d-none" id="frmDraftTableWrap">
                                <div class="border rounded p-2">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                        <div class="small fw-semibold">Draft Penambahan Shift</div>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnFrmClearDraft">Kosongkan Draft</button>
                                    </div>
                                    <div class="table-responsive" style="max-height: 220px; overflow:auto;">
                                        <table class="table table-sm table-striped mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 40px;"><input type="checkbox" id="checkAllFrmDraftRows"></th>
                                                    <th>Tanggal</th>
                                                    <th>Shift</th>
                                                    <th>Source</th>
                                                    <th>Catatan</th>
                                                    <th>Lock</th>
                                                    <th>Active</th>
                                                    <th style="width: 60px;">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody id="frmDraftRows">
                                                <tr><td colspan="8" class="text-center text-muted py-3">Belum ada draft. Pilih tanggal lalu klik Add to Table.</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end mt-2">
                                    <button type="button" class="btn btn-outline-danger btn-sm" id="btnFrmDeleteSelectedDraft">
                                        <i class="fas fa-trash me-1"></i>Hapus Terpilih
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="frm_overwrite_existing" />
                                    <label class="form-check-label" for="frm_overwrite_existing">Overwrite Existing</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="is_locked" />
                                    <label class="form-check-label" for="is_locked">Lock Schedule</label>
                                </div>
                            </div>
                            <div class="col-md-6 offset-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="is_active" checked />
                                    <label class="form-check-label" for="is_active">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>

    <div class="modal fade" id="bulkModal" 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">Bulk Apply Shift</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="bulkForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Profil Bulan</label>
                                <select id="bulk_profil_bulan_id" class="form-select"></select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Karyawan (multi)</label>
                                <select id="bulk_karyawan_ids" class="form-select" multiple size="8" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Date From</label>
                                <input type="date" id="bulk_from" class="form-control" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Date To</label>
                                <input type="date" id="bulk_to" class="form-control" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Shift</label>
                                <select id="bulk_shift_id" class="form-select" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Source</label>
                                <input type="text" id="bulk_source" class="form-control" value="bulk" />
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Catatan</label>
                                <input type="text" id="bulk_notes" class="form-control" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Multiple Date Range (opsional)</label>
                                <textarea id="bulk_date_ranges" class="form-control" rows="4" placeholder="2026-03-01..2026-03-07&#10;2026-03-15 s/d 2026-03-21"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Multiple Date (opsional)</label>
                                <textarea id="bulk_dates" class="form-control" rows="4" placeholder="2026-03-05&#10;2026-03-10,2026-03-12"></textarea>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" id="bulk_overwrite" checked />
                                    <label class="form-check-label" for="bulk_overwrite">Overwrite Existing</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">Apply</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importModal" 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">Import / Generate Template Shift Schedule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="importForm">
                    <div class="modal-body">
                        <div class="alert alert-info small">
                            <div><strong>Template:</strong> download berdasarkan profil bulan aktif/filter. Template akan berisi daftar karyawan yang sudah ada di profil tersebut.</div>
                            <div><strong>Kolom wajib:</strong> <code>employee_code</code>, <code>work_date</code>, <code>shift_code</code>.</div>
                            <div><strong>Profil:</strong> import hanya berlaku untuk 1 profil bulan per proses.</div>
                            <hr class="my-2">
                            <div><strong>Arti kolom template:</strong></div>
                            <div><code>profil_bulan_code</code>: kode profil bulan tujuan. Biasanya sudah terisi otomatis dari template.</div>
                            <div><code>employee_code</code>: kode karyawan yang ada di profil bulan tersebut. Jangan diubah jika tidak perlu.</div>
                            <div><code>employee_name</code>: nama karyawan untuk bantu cek visual. Tidak dipakai sebagai kunci utama.</div>
                            <div><code>work_date</code>: tanggal kerja yang akan diberi custom schedule. Format aman: <code>YYYY-MM-DD</code>.</div>
                            <div><code>shift_code</code>: kode shift dari master profil jam kerja. Harus sama persis dengan sheet <code>OPTIONS</code>.</div>
                            <div><code>source</code>: sumber data schedule, contoh <code>import</code>, <code>manual</code>, <code>bulk</code>.</div>
                            <div><code>is_locked</code>: isi <code>1</code> jika jadwal harus diprioritaskan saat Attendance Review, <code>0</code> jika tidak.</div>
                            <div><code>is_active</code>: isi <code>1</code> untuk aktif, <code>0</code> untuk nonaktif.</div>
                            <div><code>notes</code>: catatan tambahan, opsional.</div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Profil Bulan</label>
                                <select id="import_profil_bulan_id" class="form-select" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">File Import</label>
                                <input type="file" id="import_file" class="form-control" accept=".xlsx,.xls,.csv" required />
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="import_overwrite" checked />
                                    <label class="form-check-label" for="import_overwrite">Overwrite Existing</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Template Date From</label>
                                <input type="date" id="template_date_from" class="form-control" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Template Date To</label>
                                <input type="date" id="template_date_to" class="form-control" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">User Template (opsional, multi)</label>
                                <select id="template_karyawan_ids" class="form-select" multiple></select>
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <button type="button" class="btn btn-outline-success w-100" id="btnDownloadTemplateFromModal">
                                    <i class="fas fa-download me-1"></i>Download Template
                                </button>
                            </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-success">Upload & Import</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/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 frmModal = new bootstrap.Modal(document.getElementById('frmModal'));
            const bulkModal = new bootstrap.Modal(document.getElementById('bulkModal'));
            const importModal = new bootstrap.Modal(document.getElementById('importModal'));
            let refs = { profils: [], karyawans: [], shifts: [] };
            let rows = [];
            let groupedRows = [];
            let frmExistingScheduleMap = {};
            let frmDraftScheduleRows = [];
            let selectedShiftScheduleIds = new Set();
            let currentViewMode = 'table';
            const query = new URLSearchParams(window.location.search);
            const prefillProfilId = query.get('profil_bulan_id') || '';
            const prefillKaryawanId = query.get('karyawan_id') || '';
            const prefillFrom = query.get('date_from') || '';
            const prefillTo = query.get('date_to') || '';

            const table = $('#tbl').DataTable({
                responsive: true,
                data: [],
                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: (r) => {
                            const ids = (r.row_ids || []).map(Number);
                            const allSelected = ids.length > 0 && ids.every((id) => selectedShiftScheduleIds.has(id));
                            return `<input type="checkbox" class="form-check-input row-check-shift-group" data-ids="${ids.join(',')}" ${allSelected ? 'checked' : ''} />`;
                        }
                    },
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    {
                        data: null,
                        render: (r) => {
                            const date = r.latest_work_date || '-';
                            if (!r.latest_is_holiday && !r.latest_is_weekend) return date;
                            return `${renderDayTypeBadges({
                                is_weekend: r.latest_is_weekend,
                                is_holiday: r.latest_is_holiday,
                                holiday_name: r.latest_holiday_name,
                            })} <span class="${r.latest_is_holiday ? 'text-danger' : 'text-dark'} fw-semibold">${date}</span>`;
                        }
                    },
                    { data: null, render: (r) => `${r.karyawan_code || '-'} - ${r.karyawan_name || '-'}<div class="small text-muted">${r.total_dates || 0} tanggal</div>` },
                    { data: null, render: (r) => `${r.latest_shift_code || '-'} - ${r.latest_shift_name || '-'} (${r.latest_shift_start || '--:--'}-${r.latest_shift_end || '--:--'})` },
                    { data: 'latest_source', render: (v) => `<span class="badge text-bg-info">${v || '-'}</span>` },
                    { data: null, render: (r) => (Number(r.locked_count || 0) > 0 ? `<span class="badge text-bg-warning">${r.locked_count} Locked</span>` : '<span class="badge text-bg-secondary">No</span>') },
                    { data: 'latest_notes', render: (v) => v || '-' },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-primary btn-toggle-group" data-karyawan="${r.karyawan_id}">Detail Tanggal</button>
                        `
                    }
                ]
            });
            const calendar = new FullCalendar.Calendar(document.getElementById('scheduleCalendar'), {
                initialView: 'dayGridMonth',
                height: 'auto',
                firstDay: 1,
                locale: 'id',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                },
                buttonText: {
                    today: 'Hari Ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    list: 'List'
                },
                noEventsContent: 'Belum ada schedule untuk filter ini.',
                eventClick: function(info) {
                    const row = rows.find((x) => Number(x.id) === Number(info.event.extendedProps.rowId));
                    if (!row) return;
                    $('#frmTitle').text('Edit Shift Schedule');
                    $('#id').val(row.id);
                    $('#profil_bulan_id').val(String(row.profil_bulan_id || '')).trigger('change');
                    $('#karyawan_id').val(String(row.karyawan_id || '')).trigger('change');
                    $('#work_date').val(row.work_date || '');
                    $('#profil_jam_kerja_id').val(String(row.profil_jam_kerja_id || '')).trigger('change');
                    $('#source').val(row.source || 'manual');
                    $('#notes').val(row.notes || '');
                    $('#is_locked').prop('checked', !!row.is_locked);
                    $('#is_active').prop('checked', !!row.is_active);
                    frmModal.show();
                }
            });

            (function () {
                const bodyEl = document.getElementById('guideShiftScheduleBody');
                const toggleBtn = document.getElementById('btnToggleGuideShiftSchedule');
                const closeBtn = document.getElementById('btnCloseGuideShiftSchedule');
                const chevron = document.getElementById('guideShiftScheduleChevron');
                if (!bodyEl || !toggleBtn || !closeBtn || !window.bootstrap) return;

                const userId = Number('{{ (int) (auth()->id() ?? 0) }}') || 0;
                const storageKey = `ahsp:master_shift_schedule:guide_collapsed:u:${userId}`;
                const AUTO_CLOSE_MS = 120000;
                const collapse = new bootstrap.Collapse(bodyEl, { toggle: false });
                let timerId = null;
                const isShown = () => bodyEl.classList.contains('show');
                const setChevron = () => {
                    chevron.classList.toggle('fa-chevron-up', isShown());
                    chevron.classList.toggle('fa-chevron-down', !isShown());
                };
                const clearTimer = () => {
                    if (timerId) {
                        clearTimeout(timerId);
                        timerId = null;
                    }
                };
                const scheduleAutoClose = () => {
                    clearTimer();
                    timerId = window.setTimeout(() => {
                        try { window.localStorage.setItem(storageKey, '1'); } catch (e) {}
                        collapse.hide();
                    }, AUTO_CLOSE_MS);
                };
                const storedCollapsed = (() => {
                    try { return window.localStorage.getItem(storageKey) === '1'; } catch (e) { return false; }
                })();

                if (storedCollapsed) {
                    collapse.hide();
                } else {
                    collapse.show();
                    scheduleAutoClose();
                }
                setChevron();

                bodyEl.addEventListener('shown.bs.collapse', () => {
                    try { window.localStorage.setItem(storageKey, '0'); } catch (e) {}
                    setChevron();
                    scheduleAutoClose();
                });
                bodyEl.addEventListener('hidden.bs.collapse', () => {
                    try { window.localStorage.setItem(storageKey, '1'); } catch (e) {}
                    setChevron();
                    clearTimer();
                });
                toggleBtn.addEventListener('click', () => isShown() ? collapse.hide() : collapse.show());
                closeBtn.addEventListener('click', () => collapse.hide());
            })();

            const setViewMode = (mode) => {
                currentViewMode = mode === 'calendar' ? 'calendar' : 'table';
                $('#tableWrapper').toggleClass('d-none', currentViewMode !== 'table');
                $('#calendarWrapper').toggleClass('d-none', currentViewMode !== 'calendar');
                $('#btnViewTable').toggleClass('btn-primary active', currentViewMode === 'table').toggleClass('btn-outline-primary', currentViewMode !== 'table');
                $('#btnViewCalendar').toggleClass('btn-primary active', currentViewMode === 'calendar').toggleClass('btn-outline-primary', currentViewMode !== 'calendar');
                if (currentViewMode === 'calendar') {
                    calendar.render();
                    setTimeout(() => calendar.updateSize(), 30);
                }
            };

            const escapeHtml = (value) => $('<div>').text(value || '').html();
            const renderDayTypeBadges = (row) => {
                const badges = [];
                if (row?.is_weekend) {
                    badges.push('<span class="badge text-bg-light border text-dark">Weekend</span>');
                }
                if (row?.is_holiday) {
                    const holidayTitle = escapeHtml(row?.holiday_name || 'Holiday');
                    badges.push(`<span class="badge text-bg-danger" title="${holidayTitle}">Holiday</span>`);
                }
                if (!badges.length) {
                    badges.push('<span class="badge text-bg-light border text-dark">Normal</span>');
                }
                return badges.join(' ');
            };

            const buildGroupedRows = (sourceRows) => {
                return Object.values((sourceRows || []).reduce((acc, row) => {
                    const key = String(row.karyawan_id || '');
                    if (!acc[key]) {
                        acc[key] = {
                            karyawan_id: Number(row.karyawan_id || 0),
                            karyawan_code: row.karyawan_code || '',
                            karyawan_name: row.karyawan_name || '',
                            row_ids: [],
                            items: [],
                            total_dates: 0,
                            locked_count: 0,
                            latest_work_date: '',
                            latest_is_weekend: false,
                            latest_is_holiday: false,
                            latest_holiday_name: '',
                            latest_shift_code: '',
                            latest_shift_name: '',
                            latest_shift_start: '',
                            latest_shift_end: '',
                            latest_source: '',
                            latest_notes: '',
                        };
                    }
                    acc[key].items.push(row);
                    acc[key].row_ids.push(Number(row.id));
                    return acc;
                }, {})).map((group) => {
                    group.items.sort((a, b) => String(b.work_date || '').localeCompare(String(a.work_date || '')));
                    const latest = group.items[0] || {};
                    group.total_dates = group.items.length;
                    group.locked_count = group.items.filter((item) => !!item.is_locked).length;
                    group.latest_work_date = latest.work_date || '';
                    group.latest_is_weekend = !!latest.is_weekend;
                    group.latest_is_holiday = !!latest.is_holiday;
                    group.latest_holiday_name = latest.holiday_name || '';
                    group.latest_shift_code = latest.shift_code || '';
                    group.latest_shift_name = latest.shift_name || '';
                    group.latest_shift_start = latest.shift_start || '';
                    group.latest_shift_end = latest.shift_end || '';
                    group.latest_source = latest.source || '';
                    group.latest_notes = latest.notes || '';
                    return group;
                }).sort((a, b) => String(b.latest_work_date || '').localeCompare(String(a.latest_work_date || '')));
            };

            const renderGroupChildTable = (group) => {
                const childRows = (group.items || []).map((row) => `
                    <tr>
                        <td>${escapeHtml(row.work_date || '-')}</td>
                        <td>${renderDayTypeBadges(row)}</td>
                        <td>${escapeHtml(row.shift_code || '-')} - ${escapeHtml(row.shift_name || '-')} (${escapeHtml(row.shift_start || '--:--')}-${escapeHtml(row.shift_end || '--:--')})</td>
                        <td><span class="badge text-bg-info">${escapeHtml(row.source || '-')}</span></td>
                        <td>${row.is_locked ? '<span class="badge text-bg-warning">Locked</span>' : '<span class="badge text-bg-secondary">No</span>'}</td>
                        <td>${escapeHtml(row.notes || '-')}</td>
                        <td class="text-nowrap">
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-del" data-id="${row.id}">Delete</button>
                        </td>
                    </tr>
                `).join('');

                return `
                    <div class="p-2 bg-light border rounded">
                        <div class="small fw-semibold mb-2">Detail tanggal untuk ${escapeHtml(group.karyawan_code || '-')} - ${escapeHtml(group.karyawan_name || '-')}</div>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>Hari Khusus</th>
                                        <th>Shift</th>
                                        <th>Source</th>
                                        <th>Lock</th>
                                        <th>Catatan</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>${childRows}</tbody>
                            </table>
                        </div>
                    </div>
                `;
            };

            const buildCalendarEvents = () => {
                const events = rows.map((row) => {
                    const isHoliday = !!row.is_holiday;
                    const shiftTime = `${row.shift_start || '--:--'}-${row.shift_end || '--:--'}`;
                    const title = `${row.karyawan_code || '-'} ${row.karyawan_name || '-'} | ${row.shift_code || '-'} ${shiftTime}`;
                    return {
                        id: String(row.id),
                        title,
                        start: row.work_date,
                        allDay: true,
                        classNames: ['fc-event-shift', row.is_locked ? 'fc-event-locked' : '', isHoliday ? 'fc-event-holiday' : ''].filter(Boolean),
                        backgroundColor: isHoliday ? '#ffe3e3' : (row.is_locked ? '#ffe8a1' : '#dbeafe'),
                        textColor: isHoliday ? '#b02a37' : '#123c69',
                        borderColor: isHoliday ? '#ffc9c9' : (row.is_locked ? '#f4c95d' : '#93c5fd'),
                        extendedProps: {
                            rowId: row.id,
                            description: [
                                `<strong>${escapeHtml(row.karyawan_code || '-')} - ${escapeHtml(row.karyawan_name || '-')}</strong>`,
                                `${escapeHtml(row.shift_code || '-')} - ${escapeHtml(row.shift_name || '-')}`,
                                `Jam: ${escapeHtml(shiftTime)}`,
                                `Source: ${escapeHtml(row.source || '-')}`,
                                `Lock: ${row.is_locked ? 'Ya' : 'Tidak'}`,
                                row.notes ? `Catatan: ${escapeHtml(row.notes)}` : null,
                                isHoliday ? `Holiday: ${escapeHtml(row.holiday_name || 'Holiday')}` : null,
                            ].filter(Boolean).join('<br>')
                        }
                    };
                });
                calendar.removeAllEvents();
                calendar.addEventSource(events);
            };

            const fillOptions = () => {
                const profilOpts = ['<option value="">- Semua / Optional -</option>']
                    .concat(refs.profils.map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`));
                const empOpts = ['<option value="">- Semua / Pilih Karyawan -</option>']
                    .concat(refs.karyawans.map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`));
                const shiftOpts = ['<option value="">- Pilih Shift -</option>']
                    .concat(refs.shifts.map((r) => `<option value="${r.id}">${r.code} - ${r.name} (${(r.start_time || '').substring(0,5)}-${(r.end_time || '').substring(0,5)})</option>`));

                $('#fProfil, #profil_bulan_id, #bulk_profil_bulan_id, #import_profil_bulan_id').html(profilOpts.join(''));
                $('#fKaryawan').html(empOpts.join(''));
                $('#karyawan_id, #bulk_karyawan_ids').html(refs.karyawans.map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`).join(''));
                $('#profil_jam_kerja_id, #bulk_shift_id').html(shiftOpts.join(''));

                const firstOpen = (refs.profils || []).find((p) => (p.status || '').toLowerCase() === 'open');
                const selectedProfilId = prefillProfilId || (firstOpen ? String(firstOpen.id) : '');
                $('#fProfil').val(selectedProfilId);
                applyDateRangeFromProfil(selectedProfilId);
                if (prefillKaryawanId) $('#fKaryawan').val(String(prefillKaryawanId));
                if (prefillFrom) $('#fFrom').val(prefillFrom);
                if (prefillTo) $('#fTo').val(prefillTo);
                initUserSearch();
            };

            const initUserSearch = () => {
                const commonOpts = {
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Semua / Pilih Karyawan -',
                    allowClear: true
                };
                if ($('#fProfil').hasClass('select2-hidden-accessible')) {
                    $('#fProfil').select2('destroy');
                }
                $('#fProfil').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Semua / Pilih Profil -',
                    allowClear: true
                });

                if ($('#profil_bulan_id').hasClass('select2-hidden-accessible')) {
                    $('#profil_bulan_id').select2('destroy');
                }
                $('#profil_bulan_id').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Semua / Optional -',
                    allowClear: true,
                    dropdownParent: $('#frmModal')
                });

                if ($('#bulk_profil_bulan_id').hasClass('select2-hidden-accessible')) {
                    $('#bulk_profil_bulan_id').select2('destroy');
                }
                $('#bulk_profil_bulan_id').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Semua / Optional -',
                    allowClear: true,
                    dropdownParent: $('#bulkModal')
                });

                if ($('#import_profil_bulan_id').hasClass('select2-hidden-accessible')) {
                    $('#import_profil_bulan_id').select2('destroy');
                }
                $('#import_profil_bulan_id').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Pilih Profil -',
                    allowClear: false,
                    dropdownParent: $('#importModal')
                });

                if ($('#template_karyawan_ids').hasClass('select2-hidden-accessible')) {
                    $('#template_karyawan_ids').select2('destroy');
                }
                $('#template_karyawan_ids').html(refs.karyawans.map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`).join(''));
                $('#template_karyawan_ids').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Semua Karyawan Profil -',
                    dropdownParent: $('#importModal')
                });

                if ($('#fKaryawan').hasClass('select2-hidden-accessible')) {
                    $('#fKaryawan').select2('destroy');
                }
                $('#fKaryawan').select2(commonOpts);

                if ($('#karyawan_id').hasClass('select2-hidden-accessible')) {
                    $('#karyawan_id').select2('destroy');
                }
                $('#karyawan_id').select2({
                    ...commonOpts,
                    placeholder: '- Pilih Karyawan -',
                    allowClear: false,
                    dropdownParent: $('#frmModal')
                });

                if ($('#bulk_karyawan_ids').hasClass('select2-hidden-accessible')) {
                    $('#bulk_karyawan_ids').select2('destroy');
                }
                $('#bulk_karyawan_ids').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: '- Pilih Karyawan -',
                    dropdownParent: $('#bulkModal')
                });
            };

            const applyDateRangeFromProfil = (profilId) => {
                const id = Number(profilId || 0);
                const profil = (refs.profils || []).find((p) => Number(p.id) === id);
                if (!profil) {
                    $('#fFrom').val('');
                    $('#fTo').val('');
                    return;
                }
                $('#fFrom').val(profil.start_date || '');
                $('#fTo').val(profil.end_date || '');
            };

            const applyImportTemplateDateRangeFromProfil = (profilId) => {
                const id = Number(profilId || 0);
                const profil = (refs.profils || []).find((p) => Number(p.id) === id);
                if (!profil) {
                    $('#template_date_from').val('');
                    $('#template_date_to').val('');
                    return;
                }
                $('#template_date_from').val(profil.start_date || '');
                $('#template_date_to').val(profil.end_date || '');
            };

            const weekdayFormatter = new Intl.DateTimeFormat('id-ID', { weekday: 'short' });
            const formatLocalIsoDate = (isoDate) => {
                const date = new Date(`${isoDate}T00:00:00`);
                return Number.isNaN(date.getTime()) ? isoDate : new Intl.DateTimeFormat('id-ID', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric'
                }).format(date);
            };

            const loadFrmExistingSchedules = () => {
                const profilId = $('#profil_bulan_id').val() || '';
                const karyawanId = $('#karyawan_id').val() || '';
                const profil = (refs.profils || []).find((p) => String(p.id) === String(profilId));
                if (!profilId || !karyawanId || !profil || !profil.start_date || !profil.end_date) {
                    frmExistingScheduleMap = {};
                    buildFrmPeriodPicker();
                    return $.Deferred().resolve().promise();
                }

                return $.getJSON(`{{ route('master_shift_schedule.data') }}`, {
                    profil_bulan_id: profilId,
                    karyawan_id: karyawanId,
                    date_from: profil.start_date,
                    date_to: profil.end_date,
                }).done((resp) => {
                    const sourceRows = resp.data || [];
                    frmExistingScheduleMap = sourceRows.reduce((acc, row) => {
                        if (row.work_date) {
                            acc[row.work_date] = row;
                        }
                        return acc;
                    }, {});
                    buildFrmPeriodPicker();
                }).fail(() => {
                    frmExistingScheduleMap = {};
                    buildFrmPeriodPicker();
                });
            };

            const renderFrmDraftRows = () => {
                const $tbody = $('#frmDraftRows');
                if (!frmDraftScheduleRows.length) {
                    $tbody.html('<tr><td colspan="8" class="text-center text-muted py-3">Belum ada draft. Pilih tanggal lalu klik Add to Table.</td></tr>');
                    $('#checkAllFrmDraftRows').prop('checked', false);
                    return;
                }

                const html = frmDraftScheduleRows
                    .slice()
                    .sort((a, b) => a.work_date.localeCompare(b.work_date))
                    .map((row) => `
                        <tr>
                            <td><input type="checkbox" class="form-check-input frm-draft-check" value="${row.work_date}"></td>
                            <td class="fw-semibold">${formatLocalIsoDate(row.work_date)}</td>
                            <td>${escapeHtml(row.shift_code)} - ${escapeHtml(row.shift_name)}</td>
                            <td>${escapeHtml(row.source || '-')}</td>
                            <td>${escapeHtml(row.notes || '-')}</td>
                            <td>${row.is_locked ? '<span class="badge text-bg-warning">Locked</span>' : '<span class="badge text-bg-secondary">No</span>'}</td>
                            <td>${row.is_active ? '<span class="badge text-bg-success">Active</span>' : '<span class="badge text-bg-secondary">Off</span>'}</td>
                            <td><button type="button" class="btn btn-sm btn-outline-danger btn-frm-draft-remove" data-date="${row.work_date}">Hapus</button></td>
                        </tr>
                    `)
                    .join('');

                $tbody.html(html);
                $('#checkAllFrmDraftRows').prop('checked', false);
            };

            const buildFrmPeriodPicker = () => {
                const profilId = $('#profil_bulan_id').val() || '';
                const profil = (refs.profils || []).find((p) => String(p.id) === String(profilId));
                const $rows = $('#frmPeriodPickerRows');
                if (!profil || !profil.start_date || !profil.end_date) {
                    $rows.html('<tr><td colspan="4" class="text-center text-muted py-3">Pilih profil bulan dulu untuk menampilkan tanggal periode.</td></tr>');
                    return;
                }

                const start = new Date(`${profil.start_date}T00:00:00`);
                const end = new Date(`${profil.end_date}T00:00:00`);
                if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime()) || start > end) {
                    $rows.html('<tr><td colspan="4" class="text-center text-danger py-3">Periode profil bulan tidak valid.</td></tr>');
                    return;
                }

                const html = [];
                let cursor = new Date(start.getTime());
                while (cursor <= end) {
                    const iso = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`;
                    const day = cursor.getDay();
                    const isWeekend = day === 0 || day === 6;
                    const existing = frmExistingScheduleMap[iso] || null;
                    const canOverwriteExisting = $('#frm_overwrite_existing').is(':checked');
                    const existingHtml = existing
                        ? `
                            <div class="d-flex flex-column gap-1">
                                <div><span class="badge ${canOverwriteExisting ? 'text-bg-warning' : 'text-bg-success'}">${canOverwriteExisting ? 'Akan Update' : 'Sudah Ada'}</span> <span class="fw-semibold">${escapeHtml(existing.shift_code || '-')}</span></div>
                                <div class="small text-muted">${escapeHtml(existing.shift_name || '-')} (${escapeHtml(existing.shift_start || '--:--')}-${escapeHtml(existing.shift_end || '--:--')})</div>
                            </div>
                        `
                        : '<span class="badge text-bg-light border text-dark">Belum Ada</span>';
                    html.push(`
                        <tr>
                            <td><input type="checkbox" class="form-check-input frm-period-date" value="${iso}" ${existing && !canOverwriteExisting ? 'disabled' : ''}></td>
                            <td class="fw-semibold">${formatLocalIsoDate(iso)}</td>
                            <td>${weekdayFormatter.format(cursor)}</td>
                            <td>
                                <div class="d-flex flex-column gap-1">
                                    <div>${isWeekend ? '<span class="badge text-bg-light border text-dark">Weekend</span>' : '<span class="badge text-bg-success-subtle text-success-emphasis border border-success-subtle">Workday</span>'}</div>
                                    ${existingHtml}
                                </div>
                            </td>
                        </tr>
                    `);
                    cursor.setDate(cursor.getDate() + 1);
                }

                $rows.html(html.join(''));
            };

            const setFrmAddMode = (isAddMode) => {
                $('#frmAddMultiHint, #frmPeriodPickerWrap, #frmDraftTableWrap').toggleClass('d-none', !isAddMode);
                $('#workDateSingleWrap').toggleClass('d-none', isAddMode);
                $('#work_date').prop('required', !isAddMode);
            };

            const refreshPeriodPickerKeepingSelection = () => {
                const selectedDates = $('#frmPeriodPickerRows .frm-period-date:checked').map(function () {
                    return $(this).val();
                }).get();
                loadFrmExistingSchedules().always(() => {
                    selectedDates.forEach((date) => {
                        $(`#frmPeriodPickerRows .frm-period-date[value="${date}"]`).prop('checked', true);
                    });
                });
            };

            const resetFrmDraftRows = () => {
                frmDraftScheduleRows = [];
                renderFrmDraftRows();
            };

            const loadRefs = () => $.getJSON(`{{ route('master_shift_schedule.refs') }}`).done((resp) => {
                refs = resp.data || refs;
                fillOptions();
            });

            const loadData = () => {
                $.getJSON(`{{ route('master_shift_schedule.data') }}`, {
                    profil_bulan_id: $('#fProfil').val() || '',
                    karyawan_id: $('#fKaryawan').val() || '',
                    date_from: $('#fFrom').val() || '',
                    date_to: $('#fTo').val() || '',
                }).done((resp) => {
                    rows = resp.data || [];
                    const visibleIds = new Set(rows.map((r) => Number(r.id)));
                    selectedShiftScheduleIds = new Set([...selectedShiftScheduleIds].filter((id) => visibleIds.has(id)));
                    groupedRows = buildGroupedRows(rows);
                    table.clear().rows.add(groupedRows).draw();
                    $('#checkAllShiftRows').prop('checked', rows.length > 0 && rows.every((r) => selectedShiftScheduleIds.has(Number(r.id))));
                    $('#tbl .row-check-shift-group').each(function () {
                        const ids = String($(this).data('ids') || '').split(',').map((v) => Number(v)).filter((v) => v > 0);
                        $(this).prop('checked', ids.length > 0 && ids.every((id) => selectedShiftScheduleIds.has(id)));
                    });
                    buildCalendarEvents();
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load data failed', 'error'));
            };

            $('#btnViewTable').on('click', () => setViewMode('table'));
            $('#btnViewCalendar').on('click', () => setViewMode('calendar'));
            $('#btnFilter').on('click', loadData);
            $('#fProfil').on('change', function () {
                const profilId = $(this).val() || '';
                applyDateRangeFromProfil(profilId);
            });
            $('#import_profil_bulan_id').on('change', function () {
                const profilId = $(this).val() || '';
                applyImportTemplateDateRangeFromProfil(profilId);
            });
            $('#profil_bulan_id').on('change', function () {
                if (!$('#id').val()) {
                    loadFrmExistingSchedules();
                }
            });
            $('#frm_overwrite_existing').on('change', function () {
                if (!$('#id').val()) {
                    buildFrmPeriodPicker();
                }
            });
            $('#karyawan_id').on('change', function () {
                if (!$('#id').val()) {
                    loadFrmExistingSchedules();
                }
            });
            $('#btnReset').on('click', function () {
                const firstOpen = (refs.profils || []).find((p) => (p.status || '').toLowerCase() === 'open');
                $('#fProfil').val(firstOpen ? String(firstOpen.id) : '');
                $('#fKaryawan').val('');
                applyDateRangeFromProfil($('#fProfil').val() || '');
                loadData();
            });

            $('#btnAdd').on('click', function () {
                $('#frmTitle').text('Tambah Shift Schedule');
                $('#id').val('');
                $('#profil_bulan_id').val($('#fProfil').val() || '');
                $('#karyawan_id').val($('#fKaryawan').val() || '');
                $('#work_date').val('');
                $('#profil_jam_kerja_id').val('');
                $('#source').val('manual');
                $('#notes').val('');
                $('#frm_overwrite_existing').prop('checked', false);
                $('#is_locked').prop('checked', false);
                $('#is_active').prop('checked', true);
                setFrmAddMode(true);
                resetFrmDraftRows();
                loadFrmExistingSchedules();
                frmModal.show();
            });

            $('#tbl').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#frmTitle').text('Edit Shift Schedule');
                $('#id').val(row.id);
                $('#profil_bulan_id').val(String(row.profil_bulan_id || ''));
                $('#karyawan_id').val(String(row.karyawan_id || ''));
                $('#work_date').val(row.work_date || '');
                $('#profil_jam_kerja_id').val(String(row.profil_jam_kerja_id || ''));
                $('#source').val(row.source || 'manual');
                $('#notes').val(row.notes || '');
                $('#frm_overwrite_existing').prop('checked', true);
                $('#is_locked').prop('checked', !!row.is_locked);
                $('#is_active').prop('checked', !!row.is_active);
                setFrmAddMode(false);
                frmModal.show();
            });

            $('#btnFrmPickAllDates').on('click', function () {
                $('#frmPeriodPickerRows .frm-period-date').prop('checked', true);
            });

            $('#btnFrmPickWeekdays').on('click', function () {
                $('#frmPeriodPickerRows tr').each(function () {
                    const isWeekend = $(this).find('.badge').text().trim().toLowerCase() === 'weekend';
                    $(this).find('.frm-period-date').prop('checked', !isWeekend);
                });
            });

            $('#btnFrmClearDates').on('click', function () {
                $('#frmPeriodPickerRows .frm-period-date').prop('checked', false);
            });

            $('#btnFrmAddToDraft').on('click', function () {
                const profilId = $('#profil_bulan_id').val() || '';
                const karyawanId = $('#karyawan_id').val() || '';
                const shiftId = $('#profil_jam_kerja_id').val() || '';
                const shiftMeta = (refs.shifts || []).find((s) => String(s.id) === String(shiftId));
                const selectedDates = $('#frmPeriodPickerRows .frm-period-date:checked').map(function () {
                    return $(this).val();
                }).get();

                if (!profilId || !karyawanId || !shiftId) {
                    Swal.fire('Warning', 'Profil bulan, karyawan, dan shift wajib dipilih dulu.', 'warning');
                    return;
                }
                if (!selectedDates.length) {
                    Swal.fire('Warning', 'Pilih minimal satu tanggal lalu klik Add to Table.', 'warning');
                    return;
                }

                const source = ($('#source').val() || 'manual').toString();
                const notes = ($('#notes').val() || '').toString();
                const isLocked = $('#is_locked').is(':checked') ? 1 : 0;
                const isActive = $('#is_active').is(':checked') ? 1 : 0;

                selectedDates.forEach((dateKey) => {
                    const draftRow = {
                        profil_bulan_id: profilId,
                        karyawan_id: karyawanId,
                        work_date: dateKey,
                        profil_jam_kerja_id: shiftId,
                        shift_code: shiftMeta?.code || '-',
                        shift_name: shiftMeta?.name || '-',
                        source,
                        notes,
                        is_locked: isLocked,
                        is_active: isActive,
                    };
                    const existingIndex = frmDraftScheduleRows.findIndex((row) => row.work_date === dateKey);
                    if (existingIndex >= 0) {
                        frmDraftScheduleRows[existingIndex] = draftRow;
                    } else {
                        frmDraftScheduleRows.push(draftRow);
                    }
                });

                renderFrmDraftRows();
                Swal.fire('Masuk Draft', `${selectedDates.length} tanggal ditambahkan/diupdate ke tabel draft.`, 'success');
            });

            $('#frmDraftRows').on('click', '.btn-frm-draft-remove', function () {
                const workDate = ($(this).data('date') || '').toString();
                frmDraftScheduleRows = frmDraftScheduleRows.filter((row) => row.work_date !== workDate);
                renderFrmDraftRows();
            });

            $('#btnFrmClearDraft').on('click', function () {
                resetFrmDraftRows();
            });

            $('#checkAllFrmDraftRows').on('change', function () {
                $('#frmDraftRows .frm-draft-check').prop('checked', $(this).is(':checked'));
            });

            $('#btnFrmDeleteSelectedDraft').on('click', function () {
                const selectedDates = $('#frmDraftRows .frm-draft-check:checked').map(function () {
                    return ($(this).val() || '').toString();
                }).get();
                if (!selectedDates.length) {
                    Swal.fire('Warning', 'Pilih dulu baris draft yang ingin dihapus.', 'warning');
                    return;
                }
                frmDraftScheduleRows = frmDraftScheduleRows.filter((row) => !selectedDates.includes(row.work_date));
                renderFrmDraftRows();
            });

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

            $('#tbl').on('change', '.row-check-shift-group', function () {
                const ids = String($(this).data('ids') || '').split(',').map((v) => Number(v)).filter((v) => v > 0);
                if ($(this).is(':checked')) ids.forEach((id) => selectedShiftScheduleIds.add(id));
                else ids.forEach((id) => selectedShiftScheduleIds.delete(id));
                $('#checkAllShiftRows').prop('checked', rows.length > 0 && rows.every((r) => selectedShiftScheduleIds.has(Number(r.id))));
            });

            $('#checkAllShiftRows').on('change', function () {
                const checked = $(this).is(':checked');
                rows.forEach((row) => {
                    const id = Number(row.id);
                    if (checked) selectedShiftScheduleIds.add(id);
                    else selectedShiftScheduleIds.delete(id);
                });
                $('#tbl .row-check-shift-group').prop('checked', checked);
            });

            $('#tbl').on('click', '.btn-toggle-group', function () {
                const tr = $(this).closest('tr');
                const rowApi = table.row(tr);
                const group = rowApi.data();
                if (rowApi.child.isShown()) {
                    rowApi.child.hide();
                    tr.removeClass('shown');
                    $(this).text('Detail Tanggal');
                    return;
                }
                rowApi.child(renderGroupChildTable(group)).show();
                tr.addClass('shown');
                $(this).text('Tutup Detail');
            });

            $('#btnBulkDeleteMain').on('click', function () {
                const ids = [...selectedShiftScheduleIds];
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih dulu data yang ingin dihapus.', 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Bulk delete schedule?',
                    text: `${ids.length} data schedule akan dihapus.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('master_shift_schedule.bulk_delete') }}`, { ids })
                        .done((resp) => {
                            selectedShiftScheduleIds.clear();
                            $('#checkAllShiftRows').prop('checked', false);
                            loadData();
                            Swal.fire('Success', resp?.message || 'Deleted', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk delete failed', 'error'));
                });
            });

            $('#frm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#id').val();
                const isAddMode = !id;
                const payload = {
                    profil_bulan_id: $('#profil_bulan_id').val() || '',
                    karyawan_id: $('#karyawan_id').val(),
                    work_date: $('#work_date').val(),
                    profil_jam_kerja_id: $('#profil_jam_kerja_id').val(),
                    source: ($('#source').val() || 'manual').toString(),
                    notes: ($('#notes').val() || '').toString(),
                    is_locked: $('#is_locked').is(':checked') ? 1 : 0,
                    is_active: $('#is_active').is(':checked') ? 1 : 0,
                };

                if (!payload.karyawan_id || !payload.profil_jam_kerja_id) {
                    Swal.fire('Warning', 'Karyawan dan shift wajib diisi', 'warning');
                    return;
                }

                if (isAddMode) {
                    if (!frmDraftScheduleRows.length) {
                        Swal.fire('Warning', 'Tambahkan dulu minimal satu baris ke tabel draft.', 'warning');
                        return;
                    }

                    const groupedPayloads = Object.values(frmDraftScheduleRows.reduce((acc, row) => {
                        const key = [
                            row.profil_bulan_id || '',
                            row.karyawan_id || '',
                            row.profil_jam_kerja_id || '',
                            row.source || '',
                            row.notes || '',
                            row.is_locked ? '1' : '0',
                            row.is_active ? '1' : '0',
                        ].join('|');
                        if (!acc[key]) {
                            acc[key] = {
                                profil_bulan_id: row.profil_bulan_id || '',
                                karyawan_ids: [row.karyawan_id],
                                dates: [],
                                profil_jam_kerja_id: row.profil_jam_kerja_id,
                                source: row.source,
                                notes: row.notes,
                                is_locked: row.is_locked,
                                is_active: row.is_active,
                                overwrite: 1,
                            };
                        }
                        acc[key].dates.push(row.work_date);
                        return acc;
                    }, {})).map((group) => ({
                        ...group,
                        dates: group.dates.join('\n'),
                    }));

                    let chain = $.Deferred().resolve().promise();
                    let summary = { inserted: 0, updated: 0, skipped: 0 };

                    groupedPayloads.forEach((groupPayload) => {
                        chain = chain.then(() => $.ajax({
                            url: `{{ route('master_shift_schedule.bulk') }}`,
                            type: 'POST',
                            data: groupPayload,
                        }).done((resp) => {
                            summary.inserted += Number(resp?.inserted || 0);
                            summary.updated += Number(resp?.updated || 0);
                            summary.skipped += Number(resp?.skipped || 0);
                        }));
                    });

                    chain.done(() => {
                        loadData();
                        refreshPeriodPickerKeepingSelection();
                        Swal.fire('Success', `Draft tersimpan. Insert ${summary.inserted}, Update ${summary.updated}, Skip ${summary.skipped}.`, 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
                    return;
                }

                if (!payload.work_date) {
                    Swal.fire('Warning', 'Tanggal kerja wajib diisi', 'warning');
                    return;
                }

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

            $('#btnBulk').on('click', function () {
                $('#bulk_profil_bulan_id').val('');
                $('#bulk_karyawan_ids').val([]);
                $('#bulk_from').val('');
                $('#bulk_to').val('');
                $('#bulk_shift_id').val('');
                $('#bulk_source').val('bulk');
                $('#bulk_notes').val('');
                $('#bulk_date_ranges').val('');
                $('#bulk_dates').val('');
                $('#bulk_overwrite').prop('checked', true);
                bulkModal.show();
            });

            const downloadTemplate = (profilId) => {
                if (!profilId) {
                    Swal.fire('Warning', 'Pilih profil bulan terlebih dulu.', 'warning');
                    return;
                }
                const params = new URLSearchParams({ profil_bulan_id: profilId });
                const dateFrom = ($('#template_date_from').val() || '').trim();
                const dateTo = ($('#template_date_to').val() || '').trim();
                const karyawanIds = $('#template_karyawan_ids').val() || [];
                if (dateFrom !== '') params.set('date_from', dateFrom);
                if (dateTo !== '') params.set('date_to', dateTo);
                (karyawanIds || []).forEach((id) => params.append('karyawan_ids[]', id));
                window.open(`{{ route('master_shift_schedule.template') }}?${params.toString()}`, '_blank');
            };

            $('#btnDownloadTemplate').on('click', function () {
                downloadTemplate($('#fProfil').val() || '');
            });

            $('#btnImport').on('click', function () {
                $('#import_profil_bulan_id').val($('#fProfil').val() || '').trigger('change');
                $('#import_file').val('');
                $('#import_overwrite').prop('checked', true);
                $('#template_karyawan_ids').val($('#fKaryawan').val() ? [$('#fKaryawan').val()] : []).trigger('change');
                importModal.show();
            });

            $('#btnDownloadTemplateFromModal').on('click', function () {
                downloadTemplate($('#import_profil_bulan_id').val() || '');
            });

            $('#bulkForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    profil_bulan_id: $('#bulk_profil_bulan_id').val() || '',
                    karyawan_ids: ($('#bulk_karyawan_ids').val() || []).map(Number),
                    date_from: $('#bulk_from').val(),
                    date_to: $('#bulk_to').val(),
                    date_ranges: ($('#bulk_date_ranges').val() || '').toString(),
                    dates: ($('#bulk_dates').val() || '').toString(),
                    profil_jam_kerja_id: $('#bulk_shift_id').val(),
                    source: ($('#bulk_source').val() || 'bulk').toString(),
                    notes: ($('#bulk_notes').val() || '').toString(),
                    overwrite: $('#bulk_overwrite').is(':checked') ? 1 : 0,
                };
                const hasMainRange = !!payload.date_from && !!payload.date_to;
                const hasRanges = payload.date_ranges.trim() !== '';
                const hasDates = payload.dates.trim() !== '';
                if (!payload.karyawan_ids.length || !payload.profil_jam_kerja_id || (!hasMainRange && !hasRanges && !hasDates)) {
                    Swal.fire('Warning', 'Isi karyawan, shift, dan minimal 1 target tanggal (range utama / multiple range / multiple date)', 'warning');
                    return;
                }
                $.ajax({
                    url: `{{ route('master_shift_schedule.bulk') }}`,
                    type: 'POST',
                    traditional: true,
                    data: payload,
                }).done((resp) => {
                    bulkModal.hide();
                    loadData();
                    Swal.fire('Success', `${resp?.message || 'Bulk saved'}\nInserted: ${resp?.inserted || 0}, Updated: ${resp?.updated || 0}, Skipped: ${resp?.skipped || 0}`, 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk save failed', 'error'));
            });

            $('#importForm').on('submit', function (e) {
                e.preventDefault();
                const profilId = $('#import_profil_bulan_id').val() || '';
                const fileInput = document.getElementById('import_file');
                if (!profilId || !fileInput.files.length) {
                    Swal.fire('Warning', 'Pilih profil bulan dan file import.', 'warning');
                    return;
                }

                const formData = new FormData();
                formData.append('profil_bulan_id', profilId);
                formData.append('overwrite', $('#import_overwrite').is(':checked') ? '1' : '0');
                formData.append('file', fileInput.files[0]);

                $.ajax({
                    url: `{{ route('master_shift_schedule.import') }}`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    importModal.hide();
                    loadData();
                    const warningLines = Array.isArray(resp?.warnings) ? resp.warnings.filter(Boolean) : [];
                    const warningText = warningLines.length ? `\n\nWarning:\n${warningLines.join('\n')}` : '';
                    Swal.fire('Success', `${resp?.message || 'Import selesai'}\nInserted: ${resp?.inserted || 0}, Updated: ${resp?.updated || 0}, Skipped: ${resp?.skipped || 0}${warningText}`, warningLines.length ? 'warning' : 'success');
                }).fail((xhr) => {
                    const baseMessage = xhr.responseJSON?.message || 'Import gagal';
                    const detailErrors = Array.isArray(xhr.responseJSON?.errors) ? xhr.responseJSON.errors.filter(Boolean) : [];
                    const detailText = detailErrors.length ? `\n\n${detailErrors.slice(0, 8).join('\n')}` : '';
                    Swal.fire('Error', `${baseMessage}${detailText}`, 'error');
                });
            });

            loadRefs().then(() => {
                loadData();
                setViewMode('table');
            });

            // =========================================================================
            // Requests Tab
            // =========================================================================
            const reqTable = $('#tblRequests').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, orderable: false, className: 'text-center', render: (d) => '<input type="checkbox" class="req-check" data-id="' + d.id + '" />' },
                    { data: 'target_work_date' },
                    { data: null, render: (d) => (d.employee_code || '') + ' - ' + (d.employee_name || '') },
                    { data: null, render: (d) => '<strong>' + escapeHtml(d.shift_code || '') + '</strong> ' + escapeHtml(d.shift_name || '') + '<br><small class="text-muted">' + escapeHtml(d.shift_start || '') + ' - ' + escapeHtml(d.shift_end || '') + '</small>' },
                    { data: 'reason', render: (d) => '<span title="' + escapeHtml(d || '') + '">' + escapeHtml((d || '').substring(0, 60)) + ((d || '').length > 60 ? '...' : '') + '</span>' },
                    { data: 'status', render: (d) => '<span class="req-status-badge ' + d + '">' + d.toUpperCase() + '</span>' },
                    { data: null, render: (d) => d.status === 'pending' ? '<span class="text-muted">-</span>' : escapeHtml(d.reviewer_name || '-') },
                    { data: 'review_notes', render: (d) => d ? '<small>' + escapeHtml(d) + '</small>' : '<span class="text-muted">-</span>' },
                    { data: null, orderable: false, render: (d) => d.status === 'pending' ? '<button class="btn btn-sm btn-outline-success btn-req-approve" data-id="' + d.id + '" title="Approve"><i class="fas fa-check"></i></button> <button class="btn btn-sm btn-outline-danger btn-req-reject" data-id="' + d.id + '" title="Reject"><i class="fas fa-times"></i></button>' : (d.status === 'revoked' ? '<span class="text-muted" style="font-size:11px;">Dibatalkan</span>' : '<span class="text-muted">-</span>') },
                ],
                order: [[1, 'desc']],
                language: { emptyTable: 'Tidak ada request jadwal' },
            });

            const loadRequests = () => {
                const status = $('#reqStatusFilter').val();
                const search = $('#reqSearch').val();
                const dateFrom = $('#reqDateFrom').val();
                const dateTo = $('#reqDateTo').val();
                const params = new URLSearchParams();
                if (status && status !== 'all') params.set('status', status);
                if (search) params.set('search', search);
                if (dateFrom) params.set('date_from', dateFrom);
                if (dateTo) params.set('date_to', dateTo);

                $.getJSON(`{{ route('master_shift_schedule.requests.data') }}?${params.toString()}`).done((resp) => {
                    const rows = resp.data || [];
                    reqTable.clear().rows.add(rows).draw();
                    const pendingCount = resp.pending_count || 0;
                    $('#pendingBadge').text(pendingCount).toggleClass('d-none', pendingCount === 0);
                    $('#reqSummary').text('Total: ' + rows.length + ' | Pending: ' + pendingCount);
                });
            };

            const refreshPendingCount = () => {
                $.getJSON(`{{ route('master_shift_schedule.requests.pending_count') }}`).done((resp) => {
                    const c = resp.pending_count || 0;
                    $('#pendingBadge').text(c).toggleClass('d-none', c === 0);
                });
            };

            $('#tabBtnRequests').on('shown.bs.tab', loadRequests);
            $('#btnReqFilter').on('click', loadRequests);
            $('#reqSearch').on('keydown', (e) => { if (e.key === 'Enter') loadRequests(); });
            $('#reqStatusFilter, #reqDateFrom, #reqDateTo').on('change', loadRequests);

            $('#checkAllRequests').on('change', function () {
                const checked = $(this).is(':checked');
                $('#tblRequests .req-check').prop('checked', checked);
            });

            const getSelectedRequestIds = () => {
                return [...$('#tblRequests .req-check:checked')].map(el => Number($(el).data('id')));
            };

            $('#btnReqApprove').on('click', function () {
                const ids = getSelectedRequestIds();
                if (!ids.length) return Swal.fire('Warning', 'Pilih minimal 1 request', 'warning');
                Swal.fire({ title: 'Approve Selected?', input: 'text', inputPlaceholder: 'Catatan (opsional)', showCancelButton: true, confirmButtonText: 'Approve' }).then(res => {
                    if (!res.isConfirmed) return;
                    $.ajax({ url: `{{ route('master_shift_schedule.requests.approve') }}`, type: 'POST', data: { ids, notes: res.value || '' } })
                        .done((r) => { Swal.fire('Success', r.message || 'Approved', 'success'); loadRequests(); refreshPendingCount(); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal', 'error'));
                });
            });

            $('#btnReqReject').on('click', function () {
                const ids = getSelectedRequestIds();
                if (!ids.length) return Swal.fire('Warning', 'Pilih minimal 1 request', 'warning');
                Swal.fire({ title: 'Reject Selected?', input: 'text', inputPlaceholder: 'Alasan reject (wajib)', inputValidator: (v) => !v ? 'Alasan wajib diisi' : null, showCancelButton: true, confirmButtonText: 'Reject' }).then(res => {
                    if (!res.isConfirmed) return;
                    $.ajax({ url: `{{ route('master_shift_schedule.requests.reject') }}`, type: 'POST', data: { ids, notes: res.value } })
                        .done((r) => { Swal.fire('Success', r.message || 'Rejected', 'success'); loadRequests(); refreshPendingCount(); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal', 'error'));
                });
            });

            $('#tblRequests').on('click', '.btn-req-approve', function () {
                const id = Number($(this).data('id'));
                Swal.fire({ title: 'Approve Request?', input: 'text', inputPlaceholder: 'Catatan (opsional)', showCancelButton: true, confirmButtonText: 'Approve' }).then(res => {
                    if (!res.isConfirmed) return;
                    $.ajax({ url: `{{ route('master_shift_schedule.requests.approve') }}`, type: 'POST', data: { ids: [id], notes: res.value || '' } })
                        .done((r) => { Swal.fire('Success', 'Approved', 'success'); loadRequests(); refreshPendingCount(); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal', 'error'));
                });
            });

            $('#tblRequests').on('click', '.btn-req-reject', function () {
                const id = Number($(this).data('id'));
                Swal.fire({ title: 'Reject Request?', input: 'text', inputPlaceholder: 'Alasan reject (wajib)', inputValidator: (v) => !v ? 'Alasan wajib diisi' : null, showCancelButton: true, confirmButtonText: 'Reject' }).then(res => {
                    if (!res.isConfirmed) return;
                    $.ajax({ url: `{{ route('master_shift_schedule.requests.reject') }}`, type: 'POST', data: { ids: [id], notes: res.value } })
                        .done((r) => { Swal.fire('Success', 'Rejected', 'success'); loadRequests(); refreshPendingCount(); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal', 'error'));
                });
            });

            // Auto refresh pending count
            setInterval(refreshPendingCount, 30000);
            refreshPendingCount();

        });
    </script>
@endpush