@extends('layouts.adminlte')

@section('title', 'MASTER KALENDER')
@section('page_title', 'MASTER KALENDER')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/fullcalendar/main.min.css') }}" />
    <style>
        /* Compact + clean FullCalendar styling (simple UI, easier to read). */
        #kalenderFullCalendar {
            min-height: 560px;
            border: 1px solid rgba(0, 0, 0, .06);
            border-radius: 12px;
            padding: 10px;
            background: linear-gradient(180deg, rgba(15, 99, 61, .03), rgba(255, 255, 255, 1));
        }
        .fc .fc-toolbar.fc-header-toolbar {
            margin-bottom: .35rem;
        }
        .fc .fc-toolbar-title {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: .2px;
        }
        .fc .fc-button {
            padding: .25rem .5rem;
            font-size: .82rem;
            border-radius: 10px;
        }
        .fc .fc-col-header-cell-cushion {
            font-size: .82rem;
            font-weight: 700;
            opacity: .85;
        }
        .fc .fc-daygrid-day-number {
            font-size: .82rem;
            opacity: .9;
        }
        .fc .fc-day-today {
            background: rgba(13, 110, 253, .06) !important;
        }
        .mk-legend .badge {
            font-weight: 700;
            letter-spacing: .2px;
        }
        .mk-event {
            border-radius: 10px;
            padding: 2px 6px;
            border: 1px solid rgba(0, 0, 0, .06) !important;
        }
        .mk-event.mk-holiday {
            background: linear-gradient(180deg, rgba(220, 53, 69, .90), rgba(220, 53, 69, .78)) !important;
            color: #fff !important;
        }
        .mk-event.mk-holiday-special {
            background: linear-gradient(180deg, rgba(249, 115, 22, .92), rgba(245, 158, 11, .80)) !important;
            color: #fff !important;
        }
        .mk-event.mk-workday {
            background: linear-gradient(180deg, rgba(25, 135, 84, .88), rgba(25, 135, 84, .72)) !important;
            color: #fff !important;
        }
        .mk-event.mk-inactive {
            filter: grayscale(1);
            opacity: .5;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Kalender</h3>
            <div class="d-flex gap-2 align-items-center">
                <div class="dropdown">
                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-wand-magic-sparkles me-1"></i>Tools
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                        <li>
                            <a href="{{ route('master_kalender.template') }}" class="dropdown-item">
                                <i class="fas fa-file-arrow-down me-2"></i>Template (XLSX)
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('master_kalender.export') }}" class="dropdown-item">
                                <i class="fas fa-file-excel me-2"></i>Export (XLSX)
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <button class="dropdown-item" type="button" id="btnImportKalender">
                                <i class="fas fa-file-import me-2"></i>Import (XLSX)
                            </button>
                        </li>
                        <li>
                            <button class="dropdown-item" type="button" id="btnSuggestKalenderApi">
                                <i class="fas fa-cloud-arrow-down me-2"></i>Suggest API ID
                            </button>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <button class="dropdown-item" type="button" id="btnBulkCurrentMonthHoliday">
                                <i class="fas fa-calendar-check me-2"></i>Bulk Holiday Bulan Ini
                            </button>
                        </li>
                        <li>
                            <button class="dropdown-item" type="button" id="btnBulkWeekdayHoliday">
                                <i class="fas fa-calendar-days me-2"></i>Bulk Libur Mingguan/Bulan
                            </button>
                        </li>
                    </ul>
                </div>
                <button class="btn btn-outline-primary btn-sm" id="btnWeekendHoliday">
                    <i class="fas fa-calendar-week me-1"></i>Weekend
                </button>
                <button class="btn btn-primary btn-sm" id="btnAddKalender">
                    <i class="fas fa-plus me-1"></i>Tambah Event
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
                <div class="mk-legend d-flex gap-2 align-items-center">
                    <span class="badge text-bg-warning text-dark">Holiday Special</span>
                    <span class="badge text-bg-danger">Holiday</span>
                    <span class="badge text-bg-success">Workday</span>
                    <span class="text-muted small">Klik tanggal untuk tambah event, klik event untuk edit.</span>
                </div>
            </div>
            <div id="kalenderFullCalendar" class="mb-4"></div>
            {{-- DataTable kalender dinonaktifkan, gunakan FullCalendar sebagai tampilan utama --}}
        </div>
    </div>

    <div class="modal fade" id="kalenderModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="kalenderModalTitle">Tambah Event Kalender</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="kalenderForm">
                    <div class="modal-body">
                        <input type="hidden" id="kalenderId" />
                        <div class="mb-3">
                            <label class="form-label">Nama Event</label>
                            <input type="text" class="form-control" id="kalenderName" maxlength="180" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Tipe</label>
                            <select class="form-select" id="kalenderType" required>
                                <option value="workday">Workday</option>
                                <option value="holiday">Holiday</option>
                                <option value="holiday_special">Holiday Special</option>
                                <option value="weekend">Weekend</option>
                            </select>
                            <small class="text-muted">Holiday Special dipakai untuk tanggal premium yang seluruh OT-nya langsung mengikuti rule khusus pada profil perkalian jam.</small>
                        </div>
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="kalenderStartDate" required />
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">End Date</label>
                                <input type="date" class="form-control" id="kalenderEndDate" required />
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="kalenderDescription" rows="3"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="kalenderActive" checked />
                            <label class="form-check-label" for="kalenderActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger me-auto d-none" id="btnDeleteKalender">
                            <i class="fas fa-trash me-1"></i>Delete
                        </button>
                        <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="importKalenderModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Master Kalender (XLSX)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="importKalenderForm">
                    <div class="modal-body">
                        <input type="file" class="form-control" id="kalenderImportFile" accept=".xlsx,.xls" required />
                        <small class="text-muted">Gunakan file template agar kolom sesuai.</small>
                    </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">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="suggestKalenderModal" 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">Suggest Kalender Indonesia (API)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Tahun</label>
                            <input type="number" class="form-control" id="suggestYear" min="2000" max="2100" value="{{ now()->year }}" />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Sumber API</label>
                            <select class="form-select" id="suggestSource">
                                <option value="auto">Auto / Fallback</option>
                                <option value="api-hari-libur">API Hari Libur</option>
                                <option value="libur-deno">Libur Deno</option>
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end gap-2">
                            <button type="button" class="btn btn-outline-primary" id="btnFetchSuggest">
                                <i class="fas fa-rotate me-1"></i>Ambil Data API
                            </button>
                            <small class="text-muted">Klik "Pakai" untuk isi form tambah event.</small>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle" id="suggestKalenderTable">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Nama</th>
                                    <th style="width:90px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulkWeekdayModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Tandai Libur per Bulan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkWeekdayForm">
                    <div class="modal-body">
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label">Tahun</label>
                                <input type="number" class="form-control" id="bulkYear" min="2000" max="2100" value="{{ now()->year }}" required />
                            </div>
                            <div class="col-6">
                                <label class="form-label">Bulan</label>
                                <input type="number" class="form-control" id="bulkMonth" min="1" max="12" value="{{ now()->month }}" required />
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Tandai Hari Sebagai Libur</label>
                            <div class="d-flex flex-wrap gap-2">
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="1"> Senin
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="2"> Selasa
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="3"> Rabu
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="4"> Kamis
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="5"> Jumat
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="6" checked> Sabtu
                                </label>
                                <label class="form-check-label border rounded px-2 py-1">
                                    <input class="form-check-input me-1 bulk-weekday" type="checkbox" value="0" checked> Minggu
                                </label>
                            </div>
                            <small class="text-muted">Contoh: Sabtu+Minggu, hanya Minggu, atau Jumat saja.</small>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Nama Event</label>
                            <input type="text" class="form-control" id="bulkEventName" value="Libur Mingguan" maxlength="180" />
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="bulkOverwrite" />
                            <label class="form-check-label" for="bulkOverwrite">Overwrite event existing di tanggal yang sama</label>
                        </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">Proses Bulk</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/fullcalendar/index.global.min.js') }}"></script>
    <script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
    <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>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const modal = new bootstrap.Modal(document.getElementById('kalenderModal'));
            const importModal = new bootstrap.Modal(document.getElementById('importKalenderModal'));
            const suggestModal = new bootstrap.Modal(document.getElementById('suggestKalenderModal'));
            const bulkWeekdayModal = new bootstrap.Modal(document.getElementById('bulkWeekdayModal'));
            let fullCalendar = null;
            const table = null; // DataTable nonaktif di halaman kalender

            let rowsCache = [];
            let suggestRows = [];

            const escapeHtml = (value) => String(value ?? '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');

            const normalizeCalendarType = (row) => {
                const displayType = String(row?.display_type || '').toLowerCase();
                if (displayType) {
                    return displayType;
                }
                if (row?.event_type === 'holiday' && row?.is_holiday_special) {
                    return 'holiday_special';
                }
                const nameLower = String(row?.name || '').toLowerCase();
                if (row?.event_type === 'holiday' && (nameLower.includes('weekend') || nameLower.includes('mingguan'))) {
                    return 'weekend';
                }
                return String(row?.event_type || 'workday').toLowerCase();
            };

            const buildCalendarPayload = (row, overrides = {}) => {
                const selectedType = String(overrides.type || normalizeCalendarType(row) || 'workday');
                let eventType = selectedType;
                let isHolidaySpecial = 0;

                if (selectedType === 'holiday_special') {
                    eventType = 'holiday';
                    isHolidaySpecial = 1;
                } else if (selectedType === 'weekend') {
                    eventType = 'holiday';
                }

                return {
                    name: (overrides.name ?? row?.name ?? '').toString().trim(),
                    event_type: eventType,
                    is_holiday_special: isHolidaySpecial,
                    start_date: overrides.start_date ?? row?.start_date ?? '',
                    end_date: overrides.end_date ?? row?.end_date ?? '',
                    description: (overrides.description ?? row?.description ?? '').toString().trim(),
                    is_active: overrides.is_active ?? (row?.is_active ? 1 : 0),
                };
            };

            const toCalendarEndExclusive = (endDate) => {
                if (!endDate) return null;
                const d = new Date(endDate + 'T00:00:00');
                d.setDate(d.getDate() + 1);
                return d.toISOString().slice(0, 10);
            };

            const renderFullCalendar = () => {
                const el = document.getElementById('kalenderFullCalendar');
                if (!el) return;

                const events = rowsCache.map((row) => ({
                    id: String(row.id),
                    title: row.name || '-',
                    start: row.start_date,
                    end: toCalendarEndExclusive(row.end_date || row.start_date),
                    allDay: true,
                    extendedProps: {
                        event_type: row.event_type,
                        display_type: normalizeCalendarType(row),
                        is_holiday_special: !!row.is_holiday_special,
                        description: row.description || '',
                        is_active: !!row.is_active
                    },
                    classNames: [
                        'mk-event',
                        normalizeCalendarType(row) === 'holiday_special'
                            ? 'mk-holiday-special'
                            : (normalizeCalendarType(row) === 'holiday' || normalizeCalendarType(row) === 'weekend' ? 'mk-holiday' : 'mk-workday'),
                        row.is_active ? '' : 'mk-inactive'
                    ].filter(Boolean)
                }));

                if (!fullCalendar) {
                    fullCalendar = new FullCalendar.Calendar(el, {
                        locale: 'id',
                        initialView: 'dayGridMonth',
                        headerToolbar: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,listMonth'
                        },
                        buttonText: {
                            today: 'Hari ini',
                            month: 'Bulan',
                            list: 'List'
                        },
                        selectable: true,
                        editable: true,
                        events,
                        dateClick: (info) => {
                            $('#kalenderModalTitle').text('Tambah Event Kalender');
                            $('#kalenderId').val('');
                            $('#kalenderName').val('');
                            $('#kalenderType').val('workday');
                            $('#kalenderStartDate').val(info.dateStr);
                            $('#kalenderEndDate').val(info.dateStr);
                            $('#kalenderDescription').val('');
                            $('#kalenderActive').prop('checked', true);
                            $('#btnDeleteKalender').addClass('d-none');
                            modal.show();
                        },
                        eventClick: (info) => {
                            const id = Number(info.event.id);
                            const row = rowsCache.find((item) => Number(item.id) === id);
                            if (!row) return;
                            $('#kalenderModalTitle').text('Edit Event Kalender');
                            $('#kalenderId').val(row.id);
                            $('#kalenderName').val(row.name || '');
                            $('#kalenderType').val(normalizeCalendarType(row) || 'workday');
                            $('#kalenderStartDate').val(row.start_date || '');
                            $('#kalenderEndDate').val(row.end_date || '');
                            $('#kalenderDescription').val(row.description || '');
                            $('#kalenderActive').prop('checked', !!row.is_active);
                            $('#btnDeleteKalender').removeClass('d-none');
                            modal.show();
                        },
                        eventDrop: async (info) => {
                            const id = Number(info.event.id);
                            const row = rowsCache.find((item) => Number(item.id) === id);
                            if (!row) return info.revert();
                            const start = info.event.startStr;
                            const endExclusive = info.event.endStr || start;
                            const endDateObj = new Date(endExclusive + 'T00:00:00');
                            endDateObj.setDate(endDateObj.getDate() - 1);
                            const end = endDateObj.toISOString().slice(0, 10);
                            const payload = buildCalendarPayload(row, {
                                start_date: start,
                                end_date: end,
                            });
                            try {
                                await $.ajax({
                                    url: `{{ url('/master-kalender') }}/${id}`,
                                    type: 'PUT',
                                    data: payload
                                });
                                loadData();
                            } catch (xhr) {
                                info.revert();
                                Swal.fire('Error', xhr.responseJSON?.message || 'Update tanggal gagal', 'error');
                            }
                        },
                        eventResize: async (info) => {
                            const id = Number(info.event.id);
                            const row = rowsCache.find((item) => Number(item.id) === id);
                            if (!row) return info.revert();
                            const start = info.event.startStr;
                            const endExclusive = info.event.endStr || start;
                            const endDateObj = new Date(endExclusive + 'T00:00:00');
                            endDateObj.setDate(endDateObj.getDate() - 1);
                            const end = endDateObj.toISOString().slice(0, 10);
                            const payload = buildCalendarPayload(row, {
                                start_date: start,
                                end_date: end,
                            });
                            try {
                                await $.ajax({
                                    url: `{{ url('/master-kalender') }}/${id}`,
                                    type: 'PUT',
                                    data: payload
                                });
                                loadData();
                            } catch (xhr) {
                                info.revert();
                                Swal.fire('Error', xhr.responseJSON?.message || 'Resize event gagal', 'error');
                            }
                        }
                    });
                    fullCalendar.render();
                } else {
                    fullCalendar.removeAllEvents();
                    fullCalendar.addEventSource(events);
                }
            };

            const loadData = () => {
                $.getJSON('{{ route('master_kalender.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        if (table) {
                            table.clear().rows.add(rowsCache).draw();
                        }
                        renderFullCalendar();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error');
                    });
            };

            $('#btnAddKalender').on('click', function () {
                $('#kalenderModalTitle').text('Tambah Event Kalender');
                $('#kalenderId').val('');
                $('#kalenderName').val('');
                $('#kalenderType').val('workday');
                $('#kalenderStartDate').val('');
                $('#kalenderEndDate').val('');
                $('#kalenderDescription').val('');
                $('#kalenderActive').prop('checked', true);
                $('#btnDeleteKalender').addClass('d-none');
                modal.show();
            });

            $('#btnImportKalender').on('click', function () {
                $('#kalenderImportFile').val('');
                importModal.show();
            });

            const renderSuggestRows = () => {
                const html = suggestRows.map((r, i) => `
                    <tr>
                        <td>${r.start_date || '-'}</td>
                        <td>${r.name || '-'}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-success btn-use-suggest" data-idx="${i}">Pakai</button>
                        </td>
                    </tr>
                `).join('');
                $('#suggestKalenderTable tbody').html(html || '<tr><td colspan="3" class="text-center text-muted">Belum ada data.</td></tr>');
            };

            $('#btnSuggestKalenderApi').on('click', function () {
                $('#suggestYear').val(new Date().getFullYear());
                $('#suggestSource').val('auto');
                suggestRows = [];
                renderSuggestRows();
                suggestModal.show();
            });

            $('#btnBulkWeekdayHoliday').on('click', function () {
                $('#bulkYear').val(new Date().getFullYear());
                $('#bulkMonth').val(new Date().getMonth() + 1);
                $('#bulkEventName').val('Libur Mingguan');
                $('#bulkOverwrite').prop('checked', false);
                $('.bulk-weekday').prop('checked', false);
                $('.bulk-weekday[value="6"], .bulk-weekday[value="0"]').prop('checked', true);
                bulkWeekdayModal.show();
            });
            $('#btnWeekendHoliday').on('click', function () {
                $('#bulkYear').val(new Date().getFullYear());
                $('#bulkMonth').val(new Date().getMonth() + 1);
                $('#bulkEventName').val('Libur Mingguan (Weekend)');
                $('#bulkOverwrite').prop('checked', false);
                $('.bulk-weekday').prop('checked', false);
                $('.bulk-weekday[value="6"], .bulk-weekday[value="0"]').prop('checked', true);
                bulkWeekdayModal.show();
            });

            $('#bulkWeekdayForm').on('submit', function (e) {
                e.preventDefault();
                const weekdays = $('.bulk-weekday:checked').map(function () { return Number($(this).val()); }).get();
                if (!weekdays.length) {
                    Swal.fire('Warning', 'Pilih minimal 1 hari', 'warning');
                    return;
                }
                const payload = {
                    year: Number($('#bulkYear').val() || 0),
                    month: Number($('#bulkMonth').val() || 0),
                    weekdays,
                    event_name: ($('#bulkEventName').val() || 'Libur Mingguan').toString().trim(),
                    overwrite_existing: $('#bulkOverwrite').is(':checked') ? 1 : 0
                };
                $.ajax({
                    url: '{{ route('master_kalender.bulk_mark_holiday') }}',
                    type: 'POST',
                    data: payload
                }).done((resp) => {
                    bulkWeekdayModal.hide();
                    loadData();
                    const d = resp?.data || {};
                    Swal.fire(
                        'Success',
                        `${resp?.message || 'Selesai'} Inserted: ${Number(d.inserted || 0)}, Updated: ${Number(d.updated || 0)}, Skipped: ${Number(d.skipped || 0)}`,
                        'success'
                    );
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Bulk mark holiday gagal', 'error');
                });
            });

            $('#btnBulkCurrentMonthHoliday').on('click', function () {
                Swal.fire({
                    title: 'Bulk holiday bulan ini?',
                    text: 'Sistem akan menambah event holiday bulan berjalan dari API kalender Indonesia.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Proses'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: '{{ route('master_kalender.bulk_current_month_holiday') }}',
                        type: 'POST'
                    }).done((resp) => {
                        loadData();
                        const d = resp?.data || {};
                        Swal.fire(
                            'Success',
                            `${resp?.message || 'Selesai'} Inserted: ${Number(d.inserted || 0)}, Skipped: ${Number(d.skipped || 0)}`,
                            'success'
                        );
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Bulk holiday gagal', 'error');
                    });
                });
            });

            $('#btnFetchSuggest').on('click', function () {
                const year = Number($('#suggestYear').val() || 0);
                if (year < 2000 || year > 2100) {
                    Swal.fire('Warning', 'Tahun harus 2000-2100', 'warning');
                    return;
                }
                $.getJSON('{{ route('master_kalender.suggest_api') }}', {
                    year,
                    source: $('#suggestSource').val() || 'auto'
                })
                    .done((resp) => {
                        suggestRows = resp.data || [];
                        renderSuggestRows();
                        if (!suggestRows.length) {
                            Swal.fire('Info', 'Data API kosong untuk tahun ini', 'info');
                        }
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal ambil data API', 'error');
                    });
            });

            $('#suggestKalenderTable').on('click', '.btn-use-suggest', function () {
                const idx = Number($(this).data('idx'));
                const row = suggestRows[idx];
                if (!row) return;

                $('#kalenderModalTitle').text('Tambah Event Kalender');
                $('#kalenderId').val('');
                $('#kalenderName').val(row.name || '');
                $('#kalenderType').val(normalizeCalendarType(row) || 'holiday');
                $('#kalenderStartDate').val(row.start_date || '');
                $('#kalenderEndDate').val(row.end_date || row.start_date || '');
                $('#kalenderDescription').val(row.description || 'Suggest API Kalender Indonesia');
                $('#kalenderActive').prop('checked', true);
                $('#btnDeleteKalender').addClass('d-none');

                suggestModal.hide();
                modal.show();
            });

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

                const id = $('#kalenderId').val();
                const selectedType = $('#kalenderType').val();
                let eventType = selectedType;
                let isHolidaySpecial = 0;
                if (selectedType === 'holiday_special') {
                    eventType = 'holiday';
                    isHolidaySpecial = 1;
                } else if (selectedType === 'weekend') {
                    eventType = 'holiday';
                    if (!($('#kalenderName').val() || '').toString().trim()) {
                        $('#kalenderName').val('Weekend');
                    }
                }
                const payload = {
                    name: ($('#kalenderName').val() || '').toString().trim(),
                    event_type: eventType,
                    is_holiday_special: isHolidaySpecial,
                    start_date: $('#kalenderStartDate').val(),
                    end_date: $('#kalenderEndDate').val(),
                    description: ($('#kalenderDescription').val() || '').toString().trim(),
                    is_active: $('#kalenderActive').is(':checked') ? 1 : 0
                };

                if (!payload.name || !payload.start_date || !payload.end_date) {
                    Swal.fire('Warning', 'Nama dan tanggal wajib diisi', 'warning');
                    return;
                }

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

            $('#btnDeleteKalender').on('click', function () {
                const id = $('#kalenderId').val();
                if (!id) return;

                const name = ($('#kalenderName').val() || '').toString().trim() || 'event ini';
                Swal.fire({
                    title: 'Delete event kalender?',
                    html: `Event <b>${escapeHtml(name)}</b> akan dihapus dari master kalender.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Delete',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc3545'
                }).then((res) => {
                    if (!res.isConfirmed) return;

                    $.ajax({
                        url: `{{ url('/master-kalender') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        modal.hide();
                        loadData();
                        Swal.fire('Success', resp?.message || 'Kalender deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            $('#importKalenderForm').on('submit', function (e) {
                e.preventDefault();
                const file = $('#kalenderImportFile')[0].files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: '{{ route('master_kalender.import') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    importModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Import completed', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import failed', 'error');
                });
            });

            loadData();
        });
    </script>
@endpush