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

<div class="row g-3">
    <!-- Header info -->
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #00b894 0%, #0984e3 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-left-dots-fill"></i>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-1">E-Konseling & Pengaduan Masuk</h4>
                            <p class="mb-0 text-white-50">Kelola dan tanggapi laporan aduan fasilitas, bimbingan akademik, atau curhat tertutup dari siswa.</p>
                        </div>
                    </div>
                    <!-- Export button -->
                    <a href="/guru/counseling/export-recap?period_id=<?= $selectedPeriodId ?>&type=<?= $typeFilter ?>&status=<?= $statusFilter ?>" 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 Rekap Laporan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-3">
                <form action="/guru/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">Tipe Layanan</label>
                        <select name="type" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Semua Tipe</option>
                            <option value="konseling" <?= $typeFilter === 'konseling' ? 'selected' : '' ?>>Konseling / Curhat</option>
                            <option value="pengaduan" <?= $typeFilter === 'pengaduan' ? 'selected' : '' ?>>Pengaduan / Laporan</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <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="open" <?= $statusFilter === 'open' ? 'selected' : '' ?>>Aktif (Open)</option>
                            <option value="closed" <?= $statusFilter === 'closed' ? 'selected' : '' ?>>Selesai (Closed)</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <a href="/guru/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>

    <!-- Tickets Table -->
    <div class="col-12">
        <?php if (session()->getFlashdata('success')): ?>
            <div class="alert alert-success border-0 shadow-sm" style="border-radius: 8px;">
                <i class="bi bi-check-circle-fill me-2"></i><?= session()->getFlashdata('success') ?>
            </div>
        <?php endif; ?>

        <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>Subjek & Kategori</th>
                                <th class="text-center">Sifat</th>
                                <th class="text-center">Tipe</th>
                                <th>Tanggal Diperbarui</th>
                                <th class="text-center pe-4" style="width: 150px">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($tickets)): ?>
                                <tr>
                                    <td colspan="7" class="text-center py-5 text-muted">
                                        <i class="bi bi-chat-square-text fs-2 mb-2 opacity-50 d-block"></i>
                                        Belum ada data aduan atau konseling masuk untuk kriteria filter ini.
                                    </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): ?>
                                                <span class="text-danger fw-bold"><i class="bi bi-eye-slash-fill me-1"></i>Siswa Anonim (Rahasia)</span>
                                                <small class="text-muted d-block" style="font-size: 0.72rem;">Nama disembunyikan oleh sistem</small>
                                            <?php else: ?>
                                                <strong class="text-dark d-block"><?= esc($t['student_real_name']) ?></strong>
                                                <small class="text-muted" style="font-size: 0.72rem;">NISN: <?= esc($t['student_nisn'] ?: '-') ?></small>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <strong class="text-dark d-block text-truncate" style="max-width: 320px;"><?= 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>
                                            <?= date('d M Y, H:i', strtotime($t['updated_at'])) ?>
                                        </td>
                                        <td class="text-center pe-4">
                                            <a href="/guru/counseling/chat/<?= $t['id'] ?>" class="btn btn-primary btn-sm fw-bold px-3" style="border-radius: 6px;">
                                                <i class="bi bi-chat-text-fill me-1"></i>Buka Sesi
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

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