<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row g-3">
    <!-- Header -->
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);">
            <div class="card-body p-4 text-white">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-white bg-opacity-20 p-3 rounded-circle text-white" style="font-size: 2rem; line-height: 1;">
                            <i class="bi bi-chat-right-text-fill"></i>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-1">Rekap Layanan Pengaduan & E-Konseling</h4>
                            <p class="mb-0 text-white-50">Monitoring seluruh sesi konseling siswa dengan Guru BK/Wali Kelas dan keluhan sarana prasarana sekolah.</p>
                        </div>
                    </div>
                    <!-- Export Report -->
                    <a href="/admin/counseling/export-recap?period_id=<?= $selectedPeriodId ?>&type=<?= $typeFilter ?>&status=<?= $statusFilter ?>&category=<?= $categoryFilter ?>" target="_blank" class="btn btn-white text-dark fw-bold px-4 py-2" style="border-radius: 8px; background-color: #fff; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                        <i class="bi bi-printer me-2"></i>Cetak Laporan Lengkap
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Badges -->
    <div class="col-12">
        <div class="row g-3">
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm p-3" style="border-radius: 12px; border-left: 4px solid #4f46e5;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Total Kasus</small>
                            <h3 class="fw-bold text-dark mb-0 mt-1"><?= $stats['total'] ?></h3>
                        </div>
                        <div class="bg-indigo bg-opacity-10 text-indigo p-2.5 rounded-circle" style="font-size: 1.5rem; line-height: 1; color: #4f46e5; background-color: rgba(79, 70, 229, 0.1);">
                            <i class="bi bi-folder-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm p-3" style="border-radius: 12px; border-left: 4px solid #22c55e;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Sesi Aktif</small>
                            <h3 class="fw-bold text-dark mb-0 mt-1"><?= $stats['open'] ?></h3>
                        </div>
                        <div class="bg-success bg-opacity-10 text-success p-2.5 rounded-circle" style="font-size: 1.5rem; line-height: 1;">
                            <i class="bi bi-chat-left-dots-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm p-3" style="border-radius: 12px; border-left: 4px solid #6b7280;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Selesai (Closed)</small>
                            <h3 class="fw-bold text-dark mb-0 mt-1"><?= $stats['closed'] ?></h3>
                        </div>
                        <div class="bg-secondary bg-opacity-10 text-secondary p-2.5 rounded-circle" style="font-size: 1.5rem; line-height: 1;">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm p-3" style="border-radius: 12px; border-left: 4px solid #ef4444;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Laporan Anonim</small>
                            <h3 class="fw-bold text-dark mb-0 mt-1"><?= $stats['anonymous'] ?></h3>
                        </div>
                        <div class="bg-danger bg-opacity-10 text-danger p-2.5 rounded-circle" style="font-size: 1.5rem; line-height: 1;">
                            <i class="bi bi-eye-slash-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-3">
                <form action="/admin/counseling" method="GET" class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label small fw-bold text-muted">Periode Akademik</label>
                        <select name="period_id" class="form-select form-select-sm" onchange="this.form.submit()">
                            <?php foreach ($periods as $p): ?>
                                <option value="<?= $p['id'] ?>" <?= $selectedPeriodId == $p['id'] ? 'selected' : '' ?>>
                                    <?= esc($p['year_name']) ?> - <?= esc($p['semester']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-bold text-muted">Kategori</label>
                        <select name="category" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Semua Kategori</option>
                            <option value="pribadi" <?= $categoryFilter === 'pribadi' ? 'selected' : '' ?>>Pribadi</option>
                            <option value="akademik" <?= $categoryFilter === 'akademik' ? 'selected' : '' ?>>Akademik</option>
                            <option value="sarpras" <?= $categoryFilter === 'sarpras' ? 'selected' : '' ?>>Sarana Prasarana</option>
                            <option value="bullying" <?= $categoryFilter === 'bullying' ? 'selected' : '' ?>>Keamanan/Bullying</option>
                            <option value="karir" <?= $categoryFilter === 'karir' ? 'selected' : '' ?>>Pendidikan Selanjutnya</option>
                            <option value="lainnya" <?= $categoryFilter === 'lainnya' ? 'selected' : '' ?>>Lainnya</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-bold text-muted">Tipe</label>
                        <select name="type" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Semua</option>
                            <option value="konseling" <?= $typeFilter === 'konseling' ? 'selected' : '' ?>>Konseling</option>
                            <option value="pengaduan" <?= $typeFilter === 'pengaduan' ? 'selected' : '' ?>>Pengaduan</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-bold text-muted">Status</label>
                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Semua</option>
                            <option value="open" <?= $statusFilter === 'open' ? 'selected' : '' ?>>Aktif (Open)</option>
                            <option value="closed" <?= $statusFilter === 'closed' ? 'selected' : '' ?>>Selesai (Closed)</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <a href="/admin/counseling" class="btn btn-secondary btn-sm w-100 fw-bold">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset Filter
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <div class="col-12 mt-1">
        <ul class="nav nav-pills gap-2 mb-1" id="counselingTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active fw-bold px-4 py-2 border-0" id="log-tab" data-bs-toggle="tab" data-bs-target="#log-pane" type="button" role="tab" aria-controls="log-pane" aria-selected="true" style="border-radius: 8px;">
                    <i class="bi bi-list-task me-1.5"></i>Log Kasus & Pengaduan
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold px-4 py-2 border-0" id="executive-tab" data-bs-toggle="tab" data-bs-target="#executive-pane" type="button" role="tab" aria-controls="executive-pane" aria-selected="false" style="border-radius: 8px;">
                    <i class="bi bi-shield-check me-1.5"></i>Laporan Eksekutif Real-Time
                </button>
            </li>
        </ul>
    </div>

    <div class="col-12">
        <div class="tab-content" id="counselingTabsContent">
            <!-- TAB 1: LOG KASUS PANE -->
            <div class="tab-pane fade show active" id="log-pane" role="tabpanel" aria-labelledby="log-tab">
                <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-4" style="width: 70px">No</th>
                                        <th>Siswa Pengirim</th>
                                        <th>Guru Penerima</th>
                                        <th>Topik & Kategori</th>
                                        <th class="text-center">Sifat</th>
                                        <th class="text-center">Tipe</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Tanggal Dibuat</th>
                                        <th class="pe-4 text-center" style="width: 110px">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (empty($tickets)): ?>
                                        <tr>
                                            <td colspan="9" class="text-center py-5 text-muted">
                                                <i class="bi bi-folder2-open fs-2 mb-2 opacity-50 d-block"></i>
                                                Tidak ada data pengaduan atau konseling bimbingan ditemukan.
                                            </td>
                                        </tr>
                                    <?php else: ?>
                                        <?php $no = 1; foreach ($tickets as $t): ?>
                                            <tr>
                                                <td class="ps-4 text-muted small"><?= $no++ ?></td>
                                                <td>
                                                    <?php if ((int)$t['is_anonymous'] === 1): ?>
                                                        <strong class="text-dark d-block"><?= esc($t['student_real_name']) ?> <span class="badge bg-danger ms-1" style="font-size: 0.65rem;">Anonim ke Guru</span></strong>
                                                        <small class="text-muted" style="font-size: 0.72rem;">Kelas: <?= esc($t['classroom_name'] ?: '-') ?></small>
                                                    <?php else: ?>
                                                        <strong class="text-dark d-block"><?= esc($t['student_real_name']) ?></strong>
                                                        <small class="text-muted" style="font-size: 0.72rem;">Kelas: <?= esc($t['classroom_name'] ?: '-') ?></small>
                                                    <?php endif; ?>
                                                </td>
                                                <td>
                                                    <strong class="text-dark d-block"><?= esc($t['teacher_name']) ?></strong>
                                                    <small class="text-muted" style="font-size: 0.72rem;">Guru Pembimbing</small>
                                                </td>
                                                <td>
                                                    <strong class="text-dark d-block text-truncate" style="max-width: 250px;"><?= esc($t['subject']) ?></strong>
                                                    <span class="badge bg-secondary bg-opacity-10 text-secondary" style="font-size: 0.68rem;"><?= esc(get_counseling_category_label($t['category'])) ?></span>
                                                </td>
                                                <td class="text-center">
                                                    <?= (int)$t['is_anonymous'] === 1 ? '<span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-2.5">Anonim</span>' : '<span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2.5">Terbuka</span>' ?>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-primary text-uppercase" style="font-size: 0.7rem; font-weight: 700;"><?= esc($t['type']) ?></span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge px-3 py-1.5 rounded-pill <?= $t['status'] === 'open' ? 'bg-success bg-opacity-10 text-success' : 'bg-secondary bg-opacity-10 text-secondary' ?>" style="font-size: 0.75rem;">
                                                        <?= $t['status'] === 'open' ? 'Aktif' : 'Selesai' ?>
                                                    </span>
                                                </td>
                                                <td class="text-center text-muted small">
                                                    <?= date('d M Y, H:i', strtotime($t['created_at'])) ?>
                                                </td>
                                                <td class="pe-4 text-center">
                                                    <button class="btn btn-sm btn-outline-primary py-1 px-2.5 btn-detail" data-id="<?= $t['id'] ?>" style="border-radius: 6px;">
                                                        <i class="bi bi-search me-1"></i> Detail
                                                    </button>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: LAPORAN EKSEKUTIF PANE -->
            <div class="tab-pane fade" id="executive-pane" role="tabpanel" aria-labelledby="executive-tab">
                <div class="row g-3">
                    <!-- KPI Row -->
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm p-4 bg-white" style="border-radius: 12px;">
                            <div class="d-flex align-items-center gap-3">
                                <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-circle" style="font-size: 1.8rem; line-height: 1; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-lightning-charge-fill"></i>
                                </div>
                                <div>
                                    <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Kecepatan Respon Guru</small>
                                    <h4 class="fw-bold text-dark mb-0 mt-1"><?= $avgResponseHours > 0 ? $avgResponseHours . ' Jam' : 'Instan / Sedang Menunggu' ?></h4>
                                    <small class="text-muted" style="font-size: 0.75rem;">Rata-rata waktu tanggapan pesan pertama oleh guru pengampu.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm p-4 bg-white" style="border-radius: 12px;">
                            <div class="d-flex align-items-center gap-3">
                                <div class="bg-success bg-opacity-10 text-success p-3 rounded-circle" style="font-size: 1.8rem; line-height: 1; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                                <div>
                                    <small class="text-muted fw-bold d-block text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.5px;">Tingkat Penyelesaian (Rasio Resolusi)</small>
                                    <h4 class="fw-bold text-dark mb-0 mt-1"><?= $resolutionRate ?>%</h4>
                                    <small class="text-muted" style="font-size: 0.75rem;">Persentase kasus selesai dari total aduan terdaftar.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Executive Summary Table -->
                    <div class="col-12">
                        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                            <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                                <h6 class="fw-bold text-dark mb-1"><i class="bi bi-file-earmark-medical-fill text-primary me-2"></i>Rangkuman Tindak Lanjut Kasus & Resolusi</h6>
                                <p class="text-muted small mb-0">Rangkuman hasil analisis klinis dan tindakan nyata dari guru untuk setiap aduan.</p>
                            </div>
                            <div class="card-body p-0 pt-3">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0 text-dark" style="font-size: 0.88rem;">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="ps-4" style="width: 70px">No</th>
                                                <th>Siswa (Kelas)</th>
                                                <th>Masalah & Kategori</th>
                                                <th>Guru Pengampu</th>
                                                <th class="text-center">Status</th>
                                                <th class="pe-4" style="width: 45%;">Hasil Analisis & Tindak Lanjut Guru (Rahasia)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php if (empty($tickets)): ?>
                                                <tr>
                                                    <td colspan="6" class="text-center py-5 text-muted">Belum ada aduan terdaftar.</td>
                                                </tr>
                                            <?php else: ?>
                                                <?php $no = 1; foreach ($tickets as $t): ?>
                                                    <tr>
                                                        <td class="ps-4 text-muted small"><?= $no++ ?></td>
                                                        <td>
                                                            <strong class="text-dark d-block"><?= esc($t['student_real_name']) ?></strong>
                                                            <small class="text-muted" style="font-size: 0.72rem;">Kelas: <?= esc($t['classroom_name'] ?: '-') ?></small>
                                                        </td>
                                                        <td>
                                                            <strong class="text-dark d-block text-truncate" style="max-width: 220px;"><?= esc($t['subject']) ?></strong>
                                                            <span class="badge bg-secondary bg-opacity-10 text-secondary" style="font-size: 0.68rem;"><?= esc(get_counseling_category_label($t['category'])) ?></span>
                                                        </td>
                                                        <td>
                                                            <strong class="text-dark d-block"><?= esc($t['teacher_name']) ?></strong>
                                                            <small class="text-muted" style="font-size: 0.72rem;">Pembimbing</small>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="badge px-3 py-1.5 rounded-pill <?= $t['status'] === 'open' ? 'bg-success bg-opacity-10 text-success' : 'bg-secondary bg-opacity-10 text-secondary' ?>" style="font-size: 0.75rem;">
                                                                <?= $t['status'] === 'open' ? 'Aktif' : 'Selesai' ?>
                                                            </span>
                                                        </td>
                                                        <td class="pe-4 py-3">
                                                            <?php if ($t['internal_notes'] && trim($t['internal_notes']) !== ''): ?>
                                                                <div class="p-2.5 rounded bg-warning bg-opacity-10 text-dark border border-warning border-opacity-10 small" style="line-height: 1.45; font-size: 0.8rem; border-radius: 8px !important;">
                                                                    <?= nl2br(esc($t['internal_notes'])) ?>
                                                                </div>
                                                            <?php else: ?>
                                                                <span class="text-muted small"><i class="bi bi-clock me-1"></i>Belum ada catatan tindak lanjut diinput guru</span>
                                                            <?php endif; ?>
                                                        </td>
                                                    </tr>
                                                <?php endforeach; ?>
                                            <?php endif; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Tiket -->
<div class="modal fade" id="modalDetail" tabindex="-1" aria-labelledby="modalDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 16px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-dark" id="modalDetailLabel"><i class="bi bi-chat-left-dots text-primary me-2"></i>Detail Sesi Bimbingan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Info Grid -->
                <div class="row g-3 mb-4 bg-light p-3 rounded-4 border">
                    <div class="col-md-6">
                        <small class="text-muted d-block small">Siswa Pengirim</small>
                        <strong class="text-dark d-block" id="detailStudent"></strong>
                    </div>
                    <div class="col-md-6">
                        <small class="text-muted d-block small">Guru Penerima</small>
                        <strong class="text-dark d-block" id="detailTeacher"></strong>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block small">Kategori Layanan</small>
                        <strong class="text-dark d-block text-capitalize" id="detailCategory"></strong>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block small">Tipe Layanan</small>
                        <div><span class="badge bg-primary text-uppercase mt-1" id="detailType"></span></div>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block small">Status Sesi</small>
                        <div><span class="badge rounded-pill mt-1" id="detailStatus"></span></div>
                    </div>
                </div>

                <!-- Catatan Kasus Internal (BK / Guru) -->
                <div class="card bg-warning bg-opacity-10 border-0 mb-4" id="internalNotesSection" style="border-radius: 12px; display: none;">
                    <div class="card-body p-3.5">
                        <h6 class="fw-bold text-warning-emphasis mb-1.5 d-flex align-items-center" style="font-size: 0.95rem;">
                            <i class="bi bi-shield-lock-fill fs-5 text-warning me-2"></i>Catatan Internal Kasus & Tindak Lanjut (Rahasia)
                        </h6>
                        <p class="mb-0 text-dark small" id="detailInternalNotes" style="line-height: 1.5; font-size: 0.85rem;"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary px-4" style="border-radius: 10px;" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Tangani klik tombol detail
    const detailButtons = document.querySelectorAll('.btn-detail');
    detailButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const ticketId = this.getAttribute('data-id');
            
            // Show loading state
            this.disabled = true;
            const originalHTML = this.innerHTML;
            this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>...';

            fetch(`/admin/counseling/detail/${ticketId}`)
                .then(response => response.json())
                .then(res => {
                    // Reset button loading
                    this.disabled = false;
                    this.innerHTML = originalHTML;

                    if (!res.success) {
                        alert(res.message || 'Gagal memuat detail.');
                        return;
                    }

                    const t = res.ticket;

                    // Set header/info values
                    document.getElementById('detailStudent').innerText = t.student_real_name + (parseInt(t.is_anonymous) === 1 ? ' [Anonim ke Guru]' : '');
                    document.getElementById('detailTeacher').innerText = t.teacher_name;
                    document.getElementById('detailCategory').innerText = getCategoryLabel(t.category);
                    
                    const typeBadge = document.getElementById('detailType');
                    typeBadge.innerText = t.type.toUpperCase();

                    const statusBadge = document.getElementById('detailStatus');
                    if (t.status === 'open') {
                        statusBadge.innerText = 'AKTIF';
                        statusBadge.className = 'badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-1.5';
                    } else {
                        statusBadge.innerText = 'SELESAI';
                        statusBadge.className = 'badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 py-1.5';
                    }

                    // Handle internal notes
                    const notesSection = document.getElementById('internalNotesSection');
                    const notesContent = document.getElementById('detailInternalNotes');
                    if (t.internal_notes && t.internal_notes.trim() !== '') {
                        notesContent.innerHTML = nl2br(escapeHTML(t.internal_notes));
                        notesSection.style.display = 'block';
                    } else {
                        notesContent.innerText = '';
                        notesSection.style.display = 'none';
                    }

                    // Open the bootstrap modal
                    const myModal = new bootstrap.Modal(document.getElementById('modalDetail'));
                    myModal.show();
                })
                .catch(err => {
                    this.disabled = false;
                    this.innerHTML = originalHTML;
                    alert('Gagal mengambil data dari server.');
                    console.error(err);
                });
        });
    });

    // Helper functions
    function escapeHTML(str) {
        if (!str) return '';
        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }

    function nl2br(str) {
        if (!str) return '';
        return str.replace(/\n/g, '<br>');
    }

    function getCategoryLabel(cat) {
        const cats = {
            'pribadi': 'Pribadi',
            'akademik': 'Akademik',
            'sarpras': 'Sarana Prasarana',
            'bullying': 'Keamanan / Bullying',
            'karir': 'Pendidikan Selanjutnya',
            'lainnya': 'Lainnya'
        };
        return cats[cat] || cat;
    }

    function formatDate(dateStr) {
        const d = new Date(dateStr);
        return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
    }
});
</script>

<?= $this->endSection() ?>
