@extends('layouts.adminlte')

@section('title', 'SUMMARY ABSENSI')
@section('page_title', 'SUMMARY ABSENSI')

@push('styles')
<style>
    #summaryMatrixWrap { overflow: auto; max-height: 70vh; border: 1px solid #e5e7eb; border-radius: 8px; }
    #summaryMatrix th, #summaryMatrix td { white-space: nowrap; font-size: 12px; vertical-align: top; }
    #summaryMatrix thead th { position: sticky; top: 0; background: #fff; z-index: 4; }
    #summaryMatrix .sticky-col { position: sticky; left: 0; background: #fff; z-index: 5; min-width: 210px; }
    .date-red { color: #dc2626; font-weight: 700; }
    .date-weekend { color: #1d4ed8; font-weight: 700; }
    .date-workday { color: #047857; font-weight: 700; }
    #summaryMatrix thead th.date-red { background: #fee2e2; }
    #summaryMatrix thead th.date-weekend { background: #eff6ff; }
    #summaryMatrix thead th.date-workday { background: #ecfdf5; }
    .day-total { font-size: 10px; line-height: 1.2; color: #475569; }
    .day-name { font-size: 10px; line-height: 1.2; color: #334155; }
    .day-event { font-size: 9px; line-height: 1.1; color: #6b7280; }
    .tag-cell { min-width: 72px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 6px; line-height: 1.2; text-align: center; }
    .tag-pay { background: #ecfdf5; border-color: #86efac; }
    .tag-nopay { background: #fef2f2; border-color: #fca5a5; }
    .tag-off { background: #f8fafc; color: #64748b; }
    .tag-cuti-yellow { background: #fef9c3; border-color: #facc15; }
    .tag-tpc-special { background: #dcfce7; border-color: #22c55e; }
    .tag-weekend-nopay { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; }
    .tag-holiday-pay { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
    .star-yellow { color: #eab308; font-size: 11px; margin-left: 4px; }
    .legend-badge { border: 1px solid #d1d5db; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
    .user-total-line { font-size: 10px; color: #475569; line-height: 1.25; margin-top: 2px; }
    .sum-alpha-priority { border-width: 2px !important; border-color: #ef4444 !important; background: #fee2e2; }
    .sum-alpha-priority .value { color: #b91c1c; font-size: 2rem; font-weight: 800; line-height: 1; }
    #alphaRankingTable th, #alphaRankingTable td { font-size: 12px; }
</style>
@endpush

@section('content')
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Filter Summary Absensi</h3>
        <a href="{{ route('attendance_review.index') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left me-1"></i>Kembali Review</a>
    </div>
    <div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-5">
                <label class="form-label">Profil Bulan</label>
                <select id="profilBulanId" class="form-select"></select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Dari Tanggal</label>
                <input type="date" id="dateFrom" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">Sampai Tanggal</label>
                <input type="date" id="dateTo" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">Search Karyawan</label>
                <input type="text" id="searchQ" class="form-control" placeholder="kode / nama karyawan">
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary" id="btnLoad"><i class="fas fa-filter me-1"></i>Tampilkan</button>
                <button class="btn btn-outline-secondary" id="btnResetFilter"><i class="fas fa-undo me-1"></i>Reset</button>
                <button class="btn btn-outline-success" id="btnExportExcel"><i class="fas fa-file-excel me-1"></i>Excel</button>
                <button class="btn btn-outline-danger" id="btnExportPdf"><i class="fas fa-file-pdf me-1"></i>PDF</button>
            </div>
            <div class="col-md-12">
                <div class="d-flex flex-wrap gap-2">
                    <span class="legend-badge">H: Hadir</span>
                    <span class="legend-badge">T: Telat</span>
                    <span class="legend-badge">PC: Pulang Cepat</span>
                    <span class="legend-badge">TPC: Telat+Pulang Cepat &#9733;</span>
                    <span class="legend-badge">S: Sakit</span>
                    <span class="legend-badge">C: Cuti</span>
                    <span class="legend-badge">A: Alpha</span>
                    <span class="legend-badge">W: Weekend No Pay</span>
                    <span class="legend-badge">HL/HH: Holiday Pay</span>
                    <span class="legend-badge">BK: Belum Kontrak</span>
                    <span class="legend-badge">KS: Kontrak Selesai</span>
                    <span class="legend-badge">Lembur: SPL approved</span>
                    <span class="legend-badge">-: Libur</span>
                </div>
            </div>
            @if(($is_administrator ?? false))
                <div class="col-md-12">
                    <div class="border rounded p-2 bg-light">
                        <div class="fw-bold mb-2">Setting Template Nomor SP</div>
                        <div class="d-flex flex-wrap gap-2 align-items-end">
                            <div class="flex-grow-1" style="min-width: 380px">
                                <label class="form-label mb-1">Template</label>
                                <input type="text" id="spNoTemplate" class="form-control form-control-sm" value="{{ $sp_no_template ?? '' }}">
                                <div class="text-muted small mt-1">
                                    Placeholder: <code>{sp_level}</code> <code>{sequence}</code> <code>{sequence_padded}</code> <code>{month_roman}</code> <code>{month}</code> <code>{year}</code> <code>{employee_code}</code>
                                </div>
                            </div>
                            <div style="width:110px">
                                <label class="form-label mb-1">Pad</label>
                                <input type="number" id="spNoPad" class="form-control form-control-sm" min="1" max="10" value="{{ (int) ($sp_no_pad ?? 4) }}">
                            </div>
                            <div style="width:160px">
                                <label class="form-label mb-1">Masa Berlaku (hari)</label>
                                <input type="number" id="spValidDays" class="form-control form-control-sm" min="1" max="3650" value="{{ (int) ($sp_valid_days ?? 90) }}">
                            </div>
                            <div>
                                <button class="btn btn-sm btn-outline-primary" id="btnSaveSpSetting">Simpan</button>
                                <button class="btn btn-sm btn-outline-secondary" id="btnResetSpSetting">Default</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="mt-2 text-muted small" id="summaryMeta">-</div>
    </div>
</div>

<div class="row g-2 mb-3">
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Karyawan</div><div id="sumEmployees" class="fw-bold fs-5">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Hadir</div><div id="sumHadir" class="fw-bold fs-5">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Izin Sakit</div><div id="sumSick" class="fw-bold fs-5">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Cuti</div><div id="sumCuti" class="fw-bold fs-5">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Alpha</div><div id="sumAlpha" class="fw-bold fs-5">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Telat</div><div id="sumTelat" class="fw-bold fs-5 text-warning">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Weekend No Pay</div><div id="sumWeekendNoPay" class="fw-bold fs-5 text-primary">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Holiday Pay</div><div id="sumHolidayPay" class="fw-bold fs-5 text-danger">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Belum Kontrak</div><div id="sumBelumKontrak" class="fw-bold fs-5 text-secondary">0</div></div></div>
    <div class="col-md-2"><div class="border rounded p-2"><div class="text-muted small">Kontrak Selesai</div><div id="sumKontrakSelesai" class="fw-bold fs-5 text-secondary">0</div></div></div>
    <div class="col-md-1"><div class="border rounded p-2 bg-success-subtle"><div class="text-muted small">Pay</div><div id="sumPay" class="fw-bold fs-5 text-success">0</div></div></div>
    <div class="col-md-1"><div class="border rounded p-2 bg-danger-subtle"><div class="text-muted small">No Pay</div><div id="sumNoPay" class="fw-bold fs-5 text-danger">0</div></div></div>
    <div class="col-md-2">
        <div class="border rounded p-2 sum-alpha-priority">
            <div class="text-muted small">Alpha x3 (Prioritas)</div>
            <div id="sumAlphaWeighted" class="value">0</div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title m-0">Matriks Summary Absensi (Tanggal Menyamping)</h3></div>
    <div class="card-body p-2">
        <div id="summaryMatrixWrap">
            <table class="table table-bordered table-sm mb-0" id="summaryMatrix">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header"><h3 class="card-title m-0">Ranking Pelanggaran Alpha (x3)</h3></div>
    <div class="card-body p-2">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0" id="alphaRankingTable">
                <thead>
                <tr>
                    <th style="width:70px">Rank</th>
                    <th>Karyawan</th>
                    <th style="width:120px">Alpha</th>
                    <th style="width:150px">Skor Alpha x3</th>
                </tr>
                </thead>
                <tbody>
                <tr><td colspan="4" class="text-center text-muted">Belum ada data</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header"><h3 class="card-title m-0">Ranking Skor Pelanggaran (Alpha + Telat)</h3></div>
    <div class="card-body p-2">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0" id="violationRankingTable">
                <thead>
                <tr>
                    <th style="width:70px">Rank</th>
                    <th>Karyawan</th>
                    <th style="width:110px">Alpha</th>
                    <th style="width:110px">Telat</th>
                    <th style="width:160px">Skor (A*3 + T)</th>
                    <th style="width:220px">Aksi</th>
                </tr>
                </thead>
                <tbody>
                <tr><td colspan="6" class="text-center text-muted">Belum ada data</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header"><h3 class="card-title m-0">Ranking Teladan (Datang Cepat + Kehadiran Penuh)</h3></div>
    <div class="card-body p-2">
        <div class="table-responsive">
            <table class="table table-bordered table-sm mb-0" id="teladanRankingTable">
                <thead>
                <tr>
                    <th style="width:70px">Rank</th>
                    <th>Karyawan</th>
                    <th style="width:140px">Rata2 Jam Datang</th>
                    <th style="width:110px">Hadir</th>
                    <th style="width:150px">Pay/Expected</th>
                    <th style="width:140px">Full Attendance</th>
                </tr>
                </thead>
                <tbody>
                <tr><td colspan="6" class="text-center text-muted">Belum ada data</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(function () {
        const csrfToken = '{{ csrf_token() }}';
        const canAdmin = @json((bool) ($is_administrator ?? false));
        let refs = { profil_bulans: [] };
        let matrixDates = [];
        let matrixRows = [];
        let holidayMap = {};
        let weekendMap = {};
        let workdayMap = {};
        let perDayTotals = {};

        const renderMatrix = () => {
            const thead = $('#summaryMatrix thead');
            const tbody = $('#summaryMatrix tbody');
            const calcUserLembur = (daily) => {
                let n = 0;
                Object.values(daily || {}).forEach((c) => {
                    if (c && c.is_lembur) n++;
                });
                return n;
            };
            const headCols = matrixDates.map((d) => {
                const txt = (typeof d === 'string' && d.length >= 10) ? `${d.substring(8, 10)}/${d.substring(5, 7)}` : d;
                const holidayName = holidayMap[d] || '';
                const weekendName = weekendMap[d] || '';
                const workdayName = workdayMap[d] || '';
                const isWeekend = !!weekendName;
                const isHoliday = !!holidayName;
                const isWorkday = !!workdayName && !isWeekend && !isHoliday;
                const eventName = holidayName || weekendName || workdayName || '';
                const dt = (typeof d === 'string' && d.length >= 10) ? new Date(`${d}T00:00:00`) : null;
                const dow = dt ? dt.getDay() : null;
                const dayNames = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
                const dayLabel = (dow === null || dow === undefined) ? '' : (dayNames[dow] || '');
                const totals = perDayTotals[d] || { hadir: 0, alpha: 0, leave: 0, lembur: 0 };
                const cls = isHoliday ? 'date-red' : (isWeekend ? 'date-weekend' : (isWorkday ? 'date-workday' : ''));
                const title = eventName ? `title="${String(eventName).replaceAll('\"', '')}"` : '';
                const eventHtml = eventName ? `<div class="day-event">${eventName}</div>` : '';
                return `<th class="text-center ${cls}" ${title}>
                    ${txt}
                    <div class="day-name">${dayLabel}</div>
                    ${eventHtml}
                    <div class="day-total">H:${totals.hadir} A:${totals.alpha} L:${totals.leave} O:${totals.lembur}</div>
                </th>`;
            }).join('');
            thead.html(`<tr><th class="sticky-col">Karyawan</th>${headCols}</tr>`);

            let html = '';
            matrixRows.forEach((r) => {
                const karyawanId = Number(r.karyawan_id || 0);
                const wlCount = Number(r.warning_letter_issued_count || 0);
                const lemburUser = calcUserLembur(r.daily || {});
                const leaveUser = Number(r.izin_sakit || 0) + Number(r.cuti || 0);
                const grandDays = Number(r.pay_days || 0) + Number(r.no_pay_days || 0);
                const historyBtn = (karyawanId > 0 && wlCount > 0)
                    ? `<div class="mt-1">
                        <button class="btn btn-xs btn-outline-danger btn-sp-history" data-karyawan-id="${karyawanId}">Riwayat SP</button>
                    </div>`
                    : '';
                const left = `<td class="sticky-col">
                    <b>${r.employee_code || '-'}</b><br>${r.employee_name || '-'}
                    ${historyBtn}
                    <div class="user-total-line">
                        H:${Number(r.hadir_total || 0)} | L:${leaveUser} | A:${Number(r.alpha || 0)} | O:${lemburUser}
                    </div>
                    <div class="user-total-line">
                        Pay:${Number(r.pay_days || 0)} | NoPay:${Number(r.no_pay_days || 0)} | Grand:${grandDays}
                    </div>
                </td>`;
                const cells = matrixDates.map((d) => {
                    const c = (r.daily || {})[d] || { code: '-', label: 'Libur', pay: null };
                    let cls = c.pay === 1 ? 'tag-pay' : (c.pay === 0 ? 'tag-nopay' : 'tag-off');
                    let extra = '';
                    if ((c.code || '') === 'TPC') {
                        cls += ' tag-tpc-special';
                        extra = '<span class="star-yellow">&#9733;</span>';
                    }
                    if ((c.code || '') === 'C') {
                        cls += ' tag-cuti-yellow';
                    }
                    if ((c.code || '') === 'W') {
                        cls += ' tag-weekend-nopay';
                    }
                    if ((c.code || '') === 'HL' || (c.code || '') === 'HH') {
                        cls += ' tag-holiday-pay';
                    }
                    const payText = c.pay === 1 ? 'Pay' : (c.pay === 0 ? 'No Pay' : '-');
                    return `<td><div class="tag-cell ${cls}" title="${c.label || '-'}">${c.code || '-'}${extra}<br><small>${payText}</small></div></td>`;
                }).join('');
                html += `<tr>${left}${cells}</tr>`;
            });
            tbody.html(html);
        };

        const renderAlphaRanking = (items) => {
            const tbody = $('#alphaRankingTable tbody');
            if (!Array.isArray(items) || !items.length) {
                tbody.html('<tr><td colspan="4" class="text-center text-muted">Tidak ada pelanggaran alpha</td></tr>');
                return;
            }
            const html = items.map((r) => {
                const emp = `${r.employee_code || '-'} - ${r.employee_name || '-'}`;
                return `<tr>
                    <td class="text-center fw-bold">${r.rank || '-'}</td>
                    <td>${emp}</td>
                    <td class="text-center">${r.alpha || 0}</td>
                    <td class="text-center text-danger fw-bold">${r.alpha_weighted || 0}</td>
                </tr>`;
            }).join('');
            tbody.html(html);
        };
        const renderViolationRanking = (items) => {
            const tbody = $('#violationRankingTable tbody');
            if (!Array.isArray(items) || !items.length) {
                tbody.html('<tr><td colspan="6" class="text-center text-muted">Tidak ada pelanggaran</td></tr>');
                return;
            }
            const html = items.map((r) => {
                const emp = `${r.employee_code || '-'} - ${r.employee_name || '-'}`;
                const karyawanId = Number(r.karyawan_id || 0);
                const disabledAttr = karyawanId > 0 ? '' : 'disabled';
                return `<tr>
                    <td class="text-center fw-bold">${r.rank || '-'}</td>
                    <td>${emp}</td>
                    <td class="text-center">${r.alpha || 0}</td>
                    <td class="text-center">${r.telat || 0}</td>
                    <td class="text-center text-danger fw-bold">${r.score || 0}</td>
                    <td class="text-center">
                        <button class="btn btn-xs btn-outline-primary btn-check-profile" data-karyawan-id="${karyawanId}" data-employee="${emp}" ${disabledAttr}>Cek Profil</button>
                        <button class="btn btn-xs btn-outline-danger btn-issue-sp" data-karyawan-id="${karyawanId}" data-employee="${emp}" ${disabledAttr}>Terbitkan SP</button>
                    </td>
                </tr>`;
            }).join('');
            tbody.html(html);
        };

        const currentFilterPayload = () => ({
            _token: csrfToken,
            profil_bulan_id: $('#profilBulanId').val(),
            date_from: $('#dateFrom').val(),
            date_to: $('#dateTo').val(),
        });
        let lastDisciplineKaryawanId = null;

        const renderDisciplineEvalHtml = (d) => {
            const employee = `${d.employee_code || '-'} - ${d.employee_name || '-'}`;
            const lastPdf = d.last_letter && d.last_letter.pdf_url ? ` <a href="${d.last_letter.pdf_url}" target="_blank" rel="noopener">PDF</a>` : '';
            const last = d.last_letter
                ? `SP${d.last_letter.sp_level || '-'} | ${d.last_letter.letter_no || '-'} | ${d.last_letter.period_start || '-'} s/d ${d.last_letter.period_end || '-'}${d.last_letter.valid_until ? ` | Berlaku s/d <b>${d.last_letter.valid_until}</b>` : ''}${lastPdf}`
                : 'Belum ada SP';
            const threshold = d.threshold || {};
            const hist = Array.isArray(d.history) && d.history.length
                ? d.history.map((h) => {
                    const pdf = h.pdf_url ? ` <a href="${h.pdf_url}" target="_blank" rel="noopener">PDF</a>` : '';
                    const status = (h.status || '-').toString().toUpperCase();
                    const valid = h.valid_until ? ` | berlaku s/d ${h.valid_until}` : '';
                    const revokeBtn = (canAdmin && (h.status === 'issued')) ? ` <button class="btn btn-xs btn-outline-dark btn-revoke-sp" data-id="${h.id}" data-letter="${(h.letter_no||'').toString()}">Batal Terbitkan</button>` : '';
                    return `SP${h.sp_level} - ${h.letter_no || '-'} (${h.period_start || '-'} s/d ${h.period_end || '-'})${valid} <span class="badge text-bg-secondary">${status}</span>${pdf}${revokeBtn}`;
                }).join('<br>')
                : 'Belum ada riwayat';
            return `
                <div class="text-start">
                    <div><b>${employee}</b></div>
                    <div class="mt-2">Periode evaluasi: <b>${d.period_start || '-'} s/d ${d.period_end || '-'}</b></div>
                    <div class="mt-2">Alpha: <b>${d.alpha || 0}</b> | Telat: <b>${d.telat || 0}</b> | Skor: <b>${d.violation_score || 0}</b></div>
                    <div>Target SP${d.next_sp_level || '-'}: score >= <b>${threshold.score || 0}</b> atau alpha >= <b>${threshold.alpha || 0}</b></div>
                    <div class="mt-2">Status: ${d.can_issue ? '<span class="badge text-bg-success">Bisa Terbitkan</span>' : '<span class="badge text-bg-secondary">Belum Bisa</span>'}</div>
                    <div class="mt-1 text-muted">${d.reason || '-'}</div>
                    <hr>
                    <div><b>SP Terakhir:</b> ${last}</div>
                    <div class="mt-1"><b>Riwayat:</b><br>${hist}</div>
                </div>
            `;
        };

        const doCheckDisciplineProfile = (karyawanId) => {
            lastDisciplineKaryawanId = Number(karyawanId || 0) || null;
            const payload = { ...currentFilterPayload(), karyawan_id: karyawanId };
            $.post('{{ route('attendance_review.discipline.check_profile') }}', payload)
                .done((resp) => {
                    const d = resp?.data || {};
                    Swal.fire({
                        title: 'Evaluasi Profil Pelanggaran',
                        html: renderDisciplineEvalHtml(d),
                        width: 760,
                        confirmButtonText: 'Tutup'
                    });
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal cek profil pelanggaran', 'error'));
        };

        const doIssueWarningLetter = (karyawanId, employeeLabel) => {
            lastDisciplineKaryawanId = Number(karyawanId || 0) || null;
            const payload = { ...currentFilterPayload(), karyawan_id: karyawanId };
            $.post('{{ route('attendance_review.discipline.check_profile') }}', payload)
                .done(async (resp) => {
                    const d = resp?.data || {};
                    if (!d.can_issue) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Belum Bisa Terbitkan SP',
                            html: renderDisciplineEvalHtml(d),
                            width: 760,
                        });
                        return;
                    }

                    const ask = await Swal.fire({
                        title: `Terbitkan SP${d.next_sp_level || ''}?`,
                        html: `<div class="text-start mb-2"><b>${employeeLabel || '-'}</b><br>${d.reason || ''}</div>`,
                        input: 'textarea',
                        inputPlaceholder: 'Catatan penerbitan (opsional)',
                        showCancelButton: true,
                        confirmButtonText: 'Terbitkan',
                        cancelButtonText: 'Batal',
                    });
                    if (!ask.isConfirmed) return;

                    $.post('{{ route('attendance_review.discipline.issue_warning_letter') }}', {
                        ...payload,
                        notes: ask.value || ''
                    })
                        .done((issueResp) => {
                            const row = issueResp?.data || {};
                            const pdfUrl = String(row.pdf_url || '').trim();
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: `SP${row.sp_level || ''} terbit. No: ${row.letter_no || '-'}`,
                                showCancelButton: !!pdfUrl,
                                confirmButtonText: 'Tutup',
                                cancelButtonText: 'Buka PDF',
                            }).then((res) => {
                                if (res.dismiss === Swal.DismissReason.cancel && pdfUrl) {
                                    window.open(pdfUrl, '_blank');
                                }
                            });
                            loadData();
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal terbitkan SP', 'error'));
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal cek profil pelanggaran', 'error'));
        };

        $(document).on('click', '.btn-revoke-sp', function (e) {
            e.preventDefault();
            if (!canAdmin) return;
            const id = Number($(this).data('id') || 0);
            const letter = String($(this).data('letter') || '-');
            if (id <= 0) return;

            Swal.fire({
                title: 'Batalkan Terbitkan SP?',
                html: `Nomor: <b>${letter}</b><br>SP akan diubah status menjadi <b>revoked</b> dan tidak dihitung untuk level berikutnya.`,
                input: 'text',
                inputLabel: 'Alasan pembatalan (wajib)',
                inputPlaceholder: 'Mis. salah periode, salah karyawan, dll',
                inputValidator: (v) => (!v || !String(v).trim() ? 'Alasan wajib diisi' : null),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Batalkan',
                cancelButtonText: 'Tutup'
            }).then((res) => {
                if (!res.isConfirmed) return;
                const reason = String(res.value || '').trim();
                $.post(`{{ url('/attendance-review/discipline/warning-letter') }}/${id}/revoke`, {
                    _token: csrfToken,
                    reason
                })
                    .done((resp) => {
                        Swal.fire('OK', resp?.message || 'SP dibatalkan', 'success');
                        loadData();
                        if (lastDisciplineKaryawanId) {
                            setTimeout(() => doCheckDisciplineProfile(lastDisciplineKaryawanId), 300);
                        }
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal membatalkan SP', 'error'));
            });
        });
        const renderTeladanRanking = (items) => {
            const tbody = $('#teladanRankingTable tbody');
            if (!Array.isArray(items) || !items.length) {
                tbody.html('<tr><td colspan="6" class="text-center text-muted">Tidak ada data teladan</td></tr>');
                return;
            }
            const html = items.map((r) => {
                const emp = `${r.employee_code || '-'} - ${r.employee_name || '-'}`;
                const full = r.full_attendance ? '<span class="badge text-bg-success">Ya</span>' : '<span class="badge text-bg-secondary">Tidak</span>';
                return `<tr>
                    <td class="text-center fw-bold">${r.rank || '-'}</td>
                    <td>${emp}</td>
                    <td class="text-center">${r.avg_checkin_time || '-'}</td>
                    <td class="text-center">${r.hadir_total || 0}</td>
                    <td class="text-center">${r.pay_days || 0}/${r.expected_days || 0}</td>
                    <td class="text-center">${full}</td>
                </tr>`;
            }).join('');
            tbody.html(html);
        };

        const loadRefs = () => $.getJSON('{{ route('attendance_review.refs') }}')
            .done((resp) => {
                refs = resp.data || refs;
                const opts = (refs.profil_bulans || []).map((p) => `<option value="${p.id}">${p.code} - ${p.name}</option>`);
                $('#profilBulanId').html(opts.join(''));
            })
            .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load referensi', 'error'));

        const loadData = () => {
            const profilId = $('#profilBulanId').val();
            if (!profilId) return;
            $.getJSON('{{ route('attendance_review.summary.data') }}', {
                profil_bulan_id: profilId,
                date_from: $('#dateFrom').val(),
                date_to: $('#dateTo').val(),
                q: $('#searchQ').val(),
            })
                .done((resp) => {
                    matrixRows = resp.data || [];
                    matrixDates = resp.meta?.dates || [];
                    holidayMap = resp.meta?.holiday_map || {};
                    weekendMap = resp.meta?.weekend_map || {};
                    workdayMap = resp.meta?.workday_map || {};
                    perDayTotals = resp.meta?.per_day_totals || {};
                    renderMatrix();

                    const meta = resp.meta || {};
                    const sum = meta.summary || {};
                    const profil = meta.profil || {};
                    $('#summaryMeta').text(`Periode Profil ${profil.start_date || '-'} s/d ${profil.end_date || '-'} | Ditampilkan ${profil.selected_start_date || '-'} s/d ${profil.selected_end_date || '-'} | Profil ${profil.code || '-'} - ${profil.name || '-'}`);
                    $('#sumEmployees').text(sum.employees || 0);
                    $('#sumHadir').text(sum.hadir_total || 0);
                    $('#sumSick').text(sum.sick_total || 0);
                    $('#sumCuti').text(sum.cuti_total || 0);
                    $('#sumAlpha').text(sum.alpha_total || 0);
                    $('#sumTelat').text(sum.telat_total || 0);
                    $('#sumWeekendNoPay').text(sum.weekend_nopay_total || 0);
                    $('#sumHolidayPay').text(sum.holiday_pay_total || 0);
                    $('#sumBelumKontrak').text(sum.belum_kontrak_total || 0);
                    $('#sumKontrakSelesai').text(sum.kontrak_selesai_total || 0);
                    $('#sumPay').text(sum.pay_days || 0);
                    $('#sumNoPay').text(sum.no_pay_days || 0);
                    $('#sumAlphaWeighted').text(sum.alpha_weighted_total || 0);
                    renderAlphaRanking(meta.alpha_ranking || []);
                    renderViolationRanking(meta.violation_ranking || []);
                    renderTeladanRanking(meta.teladan_ranking || []);
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load summary', 'error'));
        };

        const applyProfileDates = () => {
            const profilId = $('#profilBulanId').val();
            const p = refs.profil_bulans?.find((x) => String(x.id) === String(profilId));
            if (!p) return;
            $('#dateFrom').val(p?.start_date || '');
            $('#dateTo').val(p?.end_date || '');
        };

        const currentFilterQuery = () => ({
            profil_bulan_id: $('#profilBulanId').val(),
            date_from: $('#dateFrom').val(),
            date_to: $('#dateTo').val(),
            q: $('#searchQ').val(),
        });

        $('#btnLoad').on('click', loadData);
        $('#btnResetFilter').on('click', function () {
            $('#searchQ').val('');
            applyProfileDates();
            loadData();
        });
        $('#btnExportExcel').on('click', function () {
            const qs = $.param(currentFilterQuery());
            const url = '{{ route('attendance_review.summary.export_excel') }}' + (qs ? `?${qs}` : '');
            window.open(url, '_blank');
        });
        $('#btnExportPdf').on('click', function () {
            const qs = $.param(currentFilterQuery());
            const url = '{{ route('attendance_review.summary.export_pdf') }}' + (qs ? `?${qs}` : '');
            window.open(url, '_blank');
        });
        $('#profilBulanId').on('change', function () {
            applyProfileDates();
            loadData();
        });
        $('#searchQ').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                loadData();
            }
        });
        $('#dateFrom,#dateTo').on('change', loadData);
        $('#violationRankingTable').on('click', '.btn-check-profile', function () {
            const karyawanId = Number($(this).data('karyawan-id') || 0);
            if (karyawanId <= 0) return;
            doCheckDisciplineProfile(karyawanId);
        });
        $('#violationRankingTable').on('click', '.btn-issue-sp', function () {
            const karyawanId = Number($(this).data('karyawan-id') || 0);
            const employeeLabel = String($(this).data('employee') || '-');
            if (karyawanId <= 0) return;
            doIssueWarningLetter(karyawanId, employeeLabel);
        });
        $('#summaryMatrix').on('click', '.btn-sp-history', function () {
            const karyawanId = Number($(this).data('karyawan-id') || 0);
            if (karyawanId <= 0) return;
            doCheckDisciplineProfile(karyawanId);
        });

        @if(($is_administrator ?? false))
        $('#btnResetSpSetting').on('click', function () {
            $('#spNoTemplate').val('{{ $sp_no_template_default ?? '' }}');
            $('#spNoPad').val('{{ (int) ($sp_no_pad ?? 4) }}');
            $('#spValidDays').val('{{ (int) ($sp_valid_days ?? 90) }}');
        });
        $('#btnSaveSpSetting').on('click', function () {
            $.post('{{ route('attendance_review.discipline.settings.update') }}', {
                _token: csrfToken,
                warning_letter_no_template: $('#spNoTemplate').val(),
                warning_letter_no_sequence_pad: $('#spNoPad').val(),
                warning_letter_valid_days: $('#spValidDays').val(),
            })
                .done((resp) => Swal.fire('OK', resp.message || 'Setting tersimpan', 'success'))
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan setting', 'error'));
        });
        @endif

        $.when(loadRefs()).always(() => {
            applyProfileDates();
            loadData();
        });
    });
</script>
@endpush