@extends('layouts.adminlte')

@section('title', 'Izin Telat')
@section('page_title', 'Izin Telat')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <style>
        .late-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
        .late-summary-card { border:1px solid #dbe3ee; border-left:5px solid var(--tone,#2563eb); border-radius:8px; padding:12px; background:#fff; }
        .late-summary-card .label { font-size:11px; font-weight:800; color:#64748b; text-transform:uppercase; }
        .late-summary-card .value { font-size:28px; font-weight:900; color:#0f172a; line-height:1; }
        .late-filter-grid { display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:8px; align-items:end; }
        .late-status-badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; }
        .late-status-none { background:#fee2e2; color:#991b1b; }
        .late-status-submitted { background:#fef3c7; color:#92400e; }
        .late-status-approved { background:#dcfce7; color:#166534; }
        .late-status-rejected { background:#e2e8f0; color:#334155; }
        .late-table th { white-space:nowrap; }
        .late-table td { vertical-align:middle; }
        .late-view-tabs .btn { border-radius:999px; font-weight:800; }
        .late-matrix-wrap { max-height:70vh; overflow:auto; border:1px solid #dbe3ee; border-radius:8px; }
        .late-matrix { min-width:1100px; margin-bottom:0; }
        .late-matrix th { position:sticky; top:0; z-index:3; background:#f8fafc; white-space:nowrap; }
        .late-matrix .sticky-col { position:sticky; left:0; z-index:2; background:#fff; min-width:230px; box-shadow:1px 0 0 #e5e7eb; }
        .late-matrix th.sticky-col { z-index:4; background:#f8fafc; }
        .late-matrix-cell { min-width:96px; border-radius:8px; padding:6px; font-size:11px; line-height:1.25; font-weight:800; }
        .late-matrix-empty { color:#94a3b8; text-align:center; }
        .late-cell-none { background:#fee2e2; color:#991b1b; }
        .late-cell-submitted { background:#fef3c7; color:#92400e; }
        .late-cell-approved { background:#dcfce7; color:#166534; }
        .late-cell-rejected { background:#e2e8f0; color:#334155; }
        .late-cell-late { background:#fef3c7; color:#92400e; }
        .late-cell-alpha { background:#fee2e2; color:#991b1b; outline:2px solid rgba(127,29,29,.2); }
        .late-matrix-reason { min-width:260px; max-width:360px; white-space:pre-line; font-size:12px; }
        .late-matrix-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
        @media (max-width: 1200px) {
            .late-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .late-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <h3 class="card-title mb-0">Izin Telat</h3>
                <div class="text-muted small">Report telat terencana/urgensi. Approved bisa dipakai untuk bebas punishment.</div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnLateSetting"><i class="fas fa-sliders me-1"></i>Setting</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnAddLatePermission"><i class="fas fa-plus me-1"></i>Tambah Izin</button>
            </div>
        </div>
        <div class="card-body">
            <div class="late-summary-grid mb-3">
                <div class="late-summary-card" style="--tone:#0ea5e9"><div class="label">Telat Total</div><div class="value" data-sum="late_total">0</div></div>
                <div class="late-summary-card" style="--tone:#ef4444"><div class="label">Tanpa Izin</div><div class="value" data-sum="without_permission">0</div></div>
                <div class="late-summary-card" style="--tone:#22c55e"><div class="label">Approved</div><div class="value" data-sum="approved">0</div></div>
                <div class="late-summary-card" style="--tone:#f59e0b"><div class="label">Waiting</div><div class="value" data-sum="submitted">0</div></div>
                <div class="late-summary-card" style="--tone:#64748b"><div class="label">Rejected</div><div class="value" data-sum="rejected">0</div></div>
                <div class="late-summary-card" style="--tone:#7f1d1d"><div class="label">Alpha Punishment</div><div class="value" data-sum="alpha_punishment">0</div></div>
            </div>

            <div class="late-filter-grid mb-3">
                <div>
                    <label class="form-label small fw-bold">Dari</label>
                    <input type="date" class="form-control form-control-sm" id="filterDateFrom" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div>
                    <label class="form-label small fw-bold">Sampai</label>
                    <input type="date" class="form-control form-control-sm" id="filterDateTo" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div>
                    <label class="form-label small fw-bold">Profil Bulan</label>
                    <select class="form-select form-select-sm" id="filterProfil"><option value="">Semua</option></select>
                </div>
                <div>
                    <label class="form-label small fw-bold">Status</label>
                    <select class="form-select form-select-sm" id="filterStatus">
                        <option value="all">Semua</option>
                        <option value="none">Tanpa Izin</option>
                        <option value="submitted">Waiting</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <div>
                    <label class="form-label small fw-bold">Tipe</label>
                    <select class="form-select form-select-sm" id="filterType">
                        <option value="all">Semua</option>
                        <option value="before_work">Sebelum Masuk</option>
                        <option value="urgent">Urgensi</option>
                    </select>
                </div>
                <div>
                    <label class="form-label small fw-bold">Source</label>
                    <select class="form-select form-select-sm" id="filterSource">
                        <option value="all">Semua</option>
                        <option value="web">Web</option>
                        <option value="android">Android</option>
                    </select>
                </div>
                <div>
                    <label class="form-label small fw-bold">Min Telat</label>
                    <input type="number" min="1" class="form-control form-control-sm" id="filterMinLate" value="1">
                </div>
            </div>

            <div class="late-view-tabs d-flex flex-wrap gap-2 mb-3">
                <button type="button" class="btn btn-primary btn-sm" data-late-view="list"><i class="fas fa-list me-1"></i>List Request</button>
                <button type="button" class="btn btn-outline-primary btn-sm" data-late-view="matrix"><i class="fas fa-table-cells me-1"></i>Matrix Periode</button>
            </div>

            <div class="table-responsive" id="lateListPanel">
                <table class="table table-sm table-striped table-hover late-table w-100" id="lateTable">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Karyawan</th>
                            <th>Jabatan</th>
                            <th>Area</th>
                            <th>Profil</th>
                            <th>Plan</th>
                            <th>Actual</th>
                            <th class="text-end">Telat</th>
                            <th>Izin</th>
                            <th>Estimasi</th>
                            <th>Source</th>
                            <th>Alasan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="d-none" id="lateMatrixPanel">
                <div class="late-matrix-pager mb-2">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <input type="search" class="form-control form-control-sm" id="matrixSearch" placeholder="Cari karyawan / alasan..." style="width:260px">
                        <select class="form-select form-select-sm" id="matrixPerPage" style="width:90px">
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-sm" id="btnReloadMatrix"><i class="fas fa-rotate me-1"></i>Tampilkan</button>
                        <button type="button" class="btn btn-success btn-sm" id="btnExportMatrix"><i class="fas fa-file-excel me-1"></i>Export Excel</button>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnMatrixPrev"><i class="fas fa-chevron-left"></i></button>
                        <span class="small fw-bold" id="matrixPageInfo">Halaman 1/1</span>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnMatrixNext"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                <div class="late-matrix-wrap">
                    <table class="table table-sm table-bordered late-matrix" id="lateMatrixTable"></table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="lateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <form class="modal-content" id="lateForm">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Izin Telat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Karyawan</label>
                            <select class="form-select" name="karyawan_id" id="lateEmployee" required></select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tanggal</label>
                            <input type="date" class="form-control" name="work_date" value="{{ now()->format('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Estimasi Masuk</label>
                            <input type="time" class="form-control" name="estimated_checkin_time" value="11:00" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipe</label>
                            <select class="form-select" name="permission_type" required>
                                <option value="before_work">Sebelum masuk kerja</option>
                                <option value="urgent">Urgensi mendadak</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Lampiran</label>
                            <input type="file" class="form-control" name="attachment" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Alasan</label>
                            <textarea class="form-control" name="reason" rows="3" required placeholder="Contoh: Mengantar anak ke dokter"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="btnSaveLate"><i class="fas fa-save me-1"></i>Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="lateSettingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" id="lateSettingForm">
                <div class="modal-header">
                    <h5 class="modal-title">Setting Izin Telat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Mode Approval</label>
                        <select class="form-select" name="approval_mode" id="settingApprovalMode">
                            <option value="auto" @selected($approvalMode === 'auto')>Auto approved</option>
                            <option value="manual" @selected($approvalMode === 'manual')>Manual approval</option>
                        </select>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="ignore_punishment_when_approved" id="settingIgnorePunishment" value="1" @checked($ignorePunishment)>
                        <label class="form-check-label" for="settingIgnorePunishment">Approved tidak kena punishment telat</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Setting</button>
                </div>
            </form>
        </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>
        $(function () {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrf } });
            const lateModal = new bootstrap.Modal(document.getElementById('lateModal'));
            const settingModal = new bootstrap.Modal(document.getElementById('lateSettingModal'));
            const esc = (v) => $('<div>').text(v ?? '').html();
            const badge = (status) => {
                const map = {
                    none: ['late-status-none', 'Tanpa Izin'],
                    submitted: ['late-status-submitted', 'Waiting'],
                    approved: ['late-status-approved', 'Approved'],
                    rejected: ['late-status-rejected', 'Rejected'],
                };
                const item = map[status] || map.none;
                return `<span class="late-status-badge ${item[0]}">${item[1]}</span>`;
            };
            const reloadSummary = (summary) => {
                Object.entries(summary || {}).forEach(([key, value]) => {
                    $(`[data-sum="${key}"]`).text(Number(value || 0).toLocaleString('id-ID'));
                });
            };
            let activeLateView = 'list';
            let matrixPage = 1;
            let matrixLastPage = 1;
            const statusLabel = (status) => ({
                none: 'Tanpa izin',
                submitted: 'Waiting',
                approved: 'Approved',
                rejected: 'Rejected',
            }[status] || 'Tanpa izin');
            const lateDuration = (minutes) => {
                const total = Number(minutes || 0);
                const hours = Math.floor(total / 60);
                const mins = total % 60;
                return hours > 0 ? `${hours}j ${mins}m` : `${mins}m`;
            };
            const cellClass = (cell) => cell?.kind === 'late'
                ? 'late-cell-late'
                : `late-cell-${cell?.status || 'none'} ${cell?.kind === 'alpha' ? 'late-cell-alpha' : ''}`;
            const renderMatrixCell = (cell) => {
                if (!cell) return '<div class="late-matrix-empty">-</div>';
                const title = cell.kind === 'alpha'
                    ? 'A Alpha'
                    : `Masuk ${esc(cell.actual || '-')}`;
                const time = cell.kind === 'alpha'
                    ? `Plan ${esc(cell.planned || '-')}`
                    : `Plan ${esc(cell.planned || '-')} | Telat ${lateDuration(cell.late_minutes)}`;
                return `<div class="late-matrix-cell ${cellClass(cell)}">
                    <div>${esc(title)}</div>
                    <div>${time}</div>
                    <div>${esc(statusLabel(cell.status))}</div>
                    ${cell.estimated && cell.estimated !== '-' ? `<div>Est ${esc(cell.estimated)}</div>` : ''}
                </div>`;
            };
            const renderMatrix = (resp) => {
                const dates = resp?.dates || [];
                const rows = resp?.data || [];
                const meta = resp?.meta || {};
                matrixPage = Number(meta.page || 1);
                matrixLastPage = Number(meta.last_page || 1);
                $('#matrixPageInfo').text(`Halaman ${matrixPage}/${matrixLastPage} | ${Number(meta.total || 0).toLocaleString('id-ID')} karyawan`);
                $('#btnMatrixPrev').prop('disabled', matrixPage <= 1);
                $('#btnMatrixNext').prop('disabled', matrixPage >= matrixLastPage);

                const headDates = dates.map((d) => `<th class="text-center">${esc(String(d).slice(8, 10))}<div class="small text-muted">${esc(String(d).slice(5, 10))}</div></th>`).join('');
                const body = rows.length
                    ? rows.map((r, idx) => {
                        const cells = dates.map((d) => `<td class="text-center">${renderMatrixCell(r.cells?.[d] || null)}</td>`).join('');
                        const total = r.total || {};
                        return `<tr>
                            <td class="sticky-col">
                                <div class="fw-bold">${esc(r.full_name)}</div>
                                <div class="small text-muted">${esc(r.employee_code)} | ${esc(r.finger_id)} | ${esc(r.jabatan)}</div>
                            </td>
                            ${cells}
                            <td class="late-matrix-reason">${esc(r.reason_summary || '-')}</td>
                            <td class="text-nowrap">
                                <span class="badge text-bg-warning">Telat Tanpa Izin ${Number(total.late_without_permission || 0)}</span>
                                <span class="badge text-bg-danger">Alpha Tanpa Izin ${Number(total.alpha_without_permission || 0)}</span>
                            </td>
                        </tr>`;
                    }).join('')
                    : `<tr><td colspan="${dates.length + 3}" class="text-center text-muted py-4">Tidak ada data.</td></tr>`;
                $('#lateMatrixTable').html(`<thead><tr>
                    <th class="sticky-col">Karyawan</th>
                    ${headDates}
                    <th>Reason telat / alpha</th>
                    <th>Total</th>
                </tr></thead><tbody>${body}</tbody>`);
            };
            const loadMatrix = () => {
                const btn = $('#btnReloadMatrix').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Memuat');
                $.getJSON('{{ route('attendance_late_permission.matrix') }}', {
                    date_from: $('#filterDateFrom').val(),
                    date_to: $('#filterDateTo').val(),
                    profil_bulan_id: $('#filterProfil').val(),
                    status: $('#filterStatus').val(),
                    permission_type: $('#filterType').val(),
                    source: $('#filterSource').val(),
                    min_late_minutes: $('#filterMinLate').val(),
                    search: $('#matrixSearch').val(),
                    page: matrixPage,
                    per_page: $('#matrixPerPage').val(),
                }).done(renderMatrix)
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Matrix gagal dimuat', 'error'))
                    .always(() => btn.prop('disabled', false).html('<i class="fas fa-rotate me-1"></i>Tampilkan'));
            };

            $.getJSON('{{ route('attendance_late_permission.refs') }}').done((resp) => {
                $('#filterProfil').append((resp.profiles || []).map((x) => `<option value="${x.id}">${esc(x.text)}</option>`).join(''));
                $('#lateEmployee').html((resp.employees || []).map((x) => `<option value="${x.id}">${esc(x.text)}</option>`).join(''));
            });

            const table = $('#lateTable').DataTable({
                serverSide: true,
                processing: true,
                pageLength: 25,
                ajax: {
                    url: '{{ route('attendance_late_permission.data') }}',
                    data: function (d) {
                        d.date_from = $('#filterDateFrom').val();
                        d.date_to = $('#filterDateTo').val();
                        d.profil_bulan_id = $('#filterProfil').val();
                        d.status = $('#filterStatus').val();
                        d.permission_type = $('#filterType').val();
                        d.source = $('#filterSource').val();
                        d.min_late_minutes = $('#filterMinLate').val();
                    },
                    dataSrc: function (json) {
                        reloadSummary(json.summary || {});
                        return json.data || [];
                    }
                },
                columns: [
                    { data: 'work_date' },
                    { data: null, render: (r) => `<strong>${esc(r.full_name)}</strong><div class="small text-muted">${esc(r.employee_code)} | ${esc(r.finger_id)}</div>` },
                    { data: 'jabatan' },
                    { data: 'area' },
                    { data: 'profil' },
                    { data: 'planned_time' },
                    { data: 'actual_time' },
                    { data: 'late_minutes', className: 'text-end', render: (v) => `${lateDuration(v)}<div class="small text-muted">${Number(v || 0).toLocaleString('id-ID')} mnt</div>` },
                    { data: 'status', render: (v, t, r) => `${badge(v)}<div class="small text-muted">${esc(r.permission_type || '-')} ${r.approval_mode ? '| ' + esc(r.approval_mode) : ''}</div>` },
                    { data: 'estimated_checkin_time' },
                    { data: 'source' },
                    { data: null, render: (r) => {
                        const file = r.attachment_url ? `<div><a href="${r.attachment_url}" target="_blank">Lampiran</a></div>` : '';
                        return `<div style="min-width:220px">${esc(r.reason || '-')}</div>${file}`;
                    }},
                    { data: null, orderable: false, searchable: false, render: (r) => {
                        if (!r.permission_id) return '<span class="text-muted small">Belum ada izin</span>';
                        const approve = r.status !== 'approved' ? `<button class="btn btn-success btn-sm btn-approve" data-id="${r.permission_id}"><i class="fas fa-check"></i></button>` : '';
                        const reject = r.status !== 'rejected' ? `<button class="btn btn-warning btn-sm btn-reject" data-id="${r.permission_id}"><i class="fas fa-times"></i></button>` : '';
                        return `<div class="d-flex gap-1">${approve}${reject}<button class="btn btn-danger btn-sm btn-delete" data-id="${r.permission_id}"><i class="fas fa-trash"></i></button></div>`;
                    }},
                ]
            });

            $('#filterDateFrom,#filterDateTo,#filterProfil,#filterStatus,#filterType,#filterSource,#filterMinLate').on('change', () => {
                if (activeLateView === 'matrix') {
                    matrixPage = 1;
                    loadMatrix();
                    return;
                }
                table.ajax.reload();
            });
            $('[data-late-view]').on('click', function () {
                activeLateView = String($(this).data('late-view') || 'list');
                $('[data-late-view]').removeClass('btn-primary').addClass('btn-outline-primary');
                $(this).removeClass('btn-outline-primary').addClass('btn-primary');
                $('#lateListPanel').toggleClass('d-none', activeLateView !== 'list');
                $('#lateMatrixPanel').toggleClass('d-none', activeLateView !== 'matrix');
                if (activeLateView === 'matrix') loadMatrix();
            });
            $('#btnReloadMatrix').on('click', () => { matrixPage = 1; loadMatrix(); });
            $('#matrixSearch').on('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    matrixPage = 1;
                    loadMatrix();
                }
            });
            $('#matrixPerPage').on('change', () => { matrixPage = 1; loadMatrix(); });
            $('#btnMatrixPrev').on('click', () => { if (matrixPage > 1) { matrixPage--; loadMatrix(); } });
            $('#btnMatrixNext').on('click', () => { if (matrixPage < matrixLastPage) { matrixPage++; loadMatrix(); } });
            $('#btnExportMatrix').on('click', () => {
                const params = new URLSearchParams({
                    date_from: $('#filterDateFrom').val() || '',
                    date_to: $('#filterDateTo').val() || '',
                    profil_bulan_id: $('#filterProfil').val() || '',
                    status: $('#filterStatus').val() || 'all',
                    permission_type: $('#filterType').val() || 'all',
                    source: $('#filterSource').val() || 'all',
                    min_late_minutes: $('#filterMinLate').val() || '1',
                    search: $('#matrixSearch').val() || '',
                });
                window.location.href = `{{ route('attendance_late_permission.matrix_export') }}?${params.toString()}`;
            });
            $('#btnAddLatePermission').on('click', () => {
                document.getElementById('lateForm').reset();
                lateModal.show();
            });
            $('#btnLateSetting').on('click', () => settingModal.show());

            $('#lateForm').on('submit', function (e) {
                e.preventDefault();
                const btn = $('#btnSaveLate').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan');
                $.ajax({
                    url: '{{ route('attendance_late_permission.store') }}',
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    lateModal.hide();
                    table.ajax.reload(null, false);
                    Swal.fire('Success', resp.message || 'Tersimpan', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan', 'error'))
                    .always(() => btn.prop('disabled', false).html('<i class="fas fa-save me-1"></i>Simpan'));
            });

            $('#lateSettingForm').on('submit', function (e) {
                e.preventDefault();
                $.post('{{ route('attendance_late_permission.settings') }}', {
                    approval_mode: $('#settingApprovalMode').val(),
                    ignore_punishment_when_approved: $('#settingIgnorePunishment').is(':checked') ? 1 : 0,
                }).done((resp) => {
                    settingModal.hide();
                    Swal.fire('Success', resp.message || 'Setting tersimpan', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan setting', 'error'));
            });

            $('#lateTable').on('click', '.btn-approve', function () {
                $.post(`{{ url('/attendance-late-permission') }}/${$(this).data('id')}/approve`)
                    .done(() => table.ajax.reload(null, false));
            });
            $('#lateTable').on('click', '.btn-reject', function () {
                Swal.fire({ title: 'Reject izin?', input: 'text', inputPlaceholder: 'Alasan reject', showCancelButton: true })
                    .then((res) => {
                        if (!res.isConfirmed) return;
                        $.post(`{{ url('/attendance-late-permission') }}/${$(this).data('id')}/reject`, { reason: res.value || '' })
                            .done(() => table.ajax.reload(null, false));
                    });
            });
            $('#lateTable').on('click', '.btn-delete', function () {
                Swal.fire({ title: 'Hapus izin telat?', icon: 'warning', showCancelButton: true })
                    .then((res) => {
                        if (!res.isConfirmed) return;
                        $.ajax({ url: `{{ url('/attendance-late-permission') }}/${$(this).data('id')}`, method: 'DELETE' })
                            .done(() => table.ajax.reload(null, false));
                    });
            });
        });
    </script>
@endpush