<!-- Tabel Siswa Terdaftar (partial) -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-light border-0 py-3 d-flex align-items-center justify-content-between">
        <div class="fw-bold">
            <i class="bi bi-people text-success me-2"></i>Siswa Terdaftar
        </div>
        <span class="badge bg-success" id="enrolledBadge"><?= count($enrolledStudents) ?></span>
    </div>

    <?php if (empty($enrolledStudents)): ?>
    <div class="card-body text-center text-muted py-5">
        <i class="bi bi-person-plus fs-1 d-block mb-2 opacity-25"></i>
        Belum ada siswa terdaftar.<br>
        <small class="text-muted">
            Gunakan tab pemilihan di sebelah kiri untuk menambahkan siswa.
        </small>
    </div>
    <?php else: ?>

    <!-- Filter & Info -->
    <div class="card-body pb-0 pt-2">
        <input type="text" id="filterEnrolled" class="form-control form-control-sm mb-2"
               placeholder="🔍 Filter nama atau NIS...">
    </div>

    <div style="max-height: 520px; overflow-y: auto;">
        <table class="table table-sm table-hover align-middle mb-0">
            <thead class="table-light sticky-top" style="top:0;">
                <tr>
                    <th style="width:40px;">#</th>
                    <th>Nama</th>
                    <th>NIS</th>
                    <th>Kelas</th>
                    <th class="text-center" style="width:40px;">L/P</th>
                    <th class="text-center" style="width:50px;">Aksi</th>
                </tr>
            </thead>
            <tbody id="enrolledTbody">
                <?php foreach ($enrolledStudents as $i => $st): ?>
                <tr class="enrolled-row" data-search="<?= strtolower(esc($st['full_name'])) ?> <?= esc($st['nis']) ?>">
                    <td class="text-muted small"><?= $i + 1 ?></td>
                    <td class="fw-semibold small"><?= esc($st['full_name']) ?></td>
                    <td class="text-muted small"><?= esc($st['nis']) ?></td>
                    <td class="text-muted small"><?= esc($st['classroom_name'] ?? '—') ?></td>
                    <td class="text-center">
                        <span class="badge bg-opacity-10
                            <?= $st['gender'] === 'L' ? 'bg-primary text-primary' : 'bg-danger text-danger' ?>">
                            <?= $st['gender'] ?>
                        </span>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-xs btn-outline-danger btn-toggle-siswa py-0 px-1"
                                data-id="<?= $st['id'] ?>" data-enrolled="1" title="Hapus dari program">
                            <i class="bi bi-dash-circle"></i>
                        </button>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <script>
    document.getElementById('filterEnrolled')?.addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('.enrolled-row').forEach(row => {
            row.style.display = row.dataset.search.includes(q) ? '' : 'none';
        });
    });
    </script>

    <?php endif; ?>
</div>
