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

<!-- Header -->
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-4 d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-3">
                    <a href="/bk/violations" class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
                        <i class="bi bi-arrow-left"></i>
                    </a>
                    <div>
                        <h5 class="fw-bold text-dark mb-1">Kelas Binaan: <?= esc($classroom['name']) ?></h5>
                        <small class="text-muted">Kelola poin pelanggaran aktif siswa di kelas ini pada semester <?= esc($activePeriod['semester']) ?> <?= esc($activePeriod['year_name']) ?>.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Students List with Accordion of Violations -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-4">
                <?php if (empty($students)): ?>
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-people-fill fs-1 mb-2 opacity-50"></i>
                        <p class="mb-0 small">Belum ada siswa terdaftar di kelas ini.</p>
                    </div>
                <?php else: ?>
                    <div class="accordion accordion-flush" id="studentsViolationsAccordion">
                        <?php foreach ($students as $stu): ?>
                            <?php
                            $cardId = 'stuCollapse_' . $stu['id'];
                            $points = $stu['total_points'];
                            
                            $pointsBadge = 'bg-success bg-opacity-10 text-success';
                            if ($points >= 100) $pointsBadge = 'bg-dark text-white';
                            elseif ($points >= 75) $pointsBadge = 'bg-danger text-white';
                            elseif ($points >= 50) $pointsBadge = 'bg-danger bg-opacity-10 text-danger';
                            elseif ($points >= 25) $pointsBadge = 'bg-warning bg-opacity-10 text-warning';
                            ?>
                            
                            <div class="accordion-item border-bottom mb-2 bg-light rounded" style="overflow: hidden;">
                                <h2 class="accordion-header" id="heading_<?= $stu['id'] ?>">
                                    <div class="accordion-button collapsed px-3 py-3 bg-light d-flex align-items-center justify-content-between flex-wrap gap-2" 
                                         type="button" data-bs-toggle="collapse" data-bs-target="#<?= $cardId ?>" aria-expanded="false" style="box-shadow: none;">
                                        
                                        <!-- Student Profile & Points -->
                                        <div class="d-flex align-items-center gap-3 flex-grow-1">
                                            <div class="bg-primary bg-opacity-10 text-primary p-2 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                <i class="bi bi-person fs-5"></i>
                                            </div>
                                            <div>
                                                <strong class="text-dark d-block"><?= esc($stu['full_name']) ?></strong>
                                                <small class="text-muted" style="font-size: 0.72rem;">NIS: <?= esc($stu['nis']) ?> / NISN: <?= esc($stu['nisn'] ?: '-') ?></small>
                                            </div>
                                        </div>

                                        <!-- Badge Status & Points -->
                                        <div class="d-flex align-items-center gap-2 me-3 flex-shrink-0">
                                            <!-- Sanksi -->
                                            <?php
                                            $sanc = $stu['sanction'];
                                            $sancClass = 'bg-secondary bg-opacity-10 text-secondary';
                                            if (str_contains($sanc, 'SP 3') || str_contains($sanc, 'Keluar')) $sancClass = 'bg-dark text-white';
                                            elseif (str_contains($sanc, 'SP 2') || str_contains($sanc, 'Skorsing')) $sancClass = 'bg-danger text-white';
                                            elseif (str_contains($sanc, 'SP 1')) $sancClass = 'bg-warning bg-opacity-10 text-warning';
                                            elseif ($sanc === 'Aman') $sancClass = 'bg-success bg-opacity-10 text-success';
                                            ?>
                                            <span class="badge <?= $sancClass ?> px-2 py-1.5 rounded small fw-semibold"><?= esc($sanc) ?></span>

                                            <!-- Points -->
                                            <span class="badge <?= $pointsBadge ?> px-3 py-1.5 rounded-pill fs-6 fw-bold">
                                                <?= $points ?> Poin
                                            </span>
                                        </div>

                                    </div>
                                </h2>
                                
                                <div id="<?= $cardId ?>" class="accordion-collapse collapse" data-bs-parent="#studentsViolationsAccordion">
                                    <div class="accordion-body bg-white border-top p-4">
                                        
                                        <!-- Actions -->
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-clock-history me-1"></i>Riwayat Pelanggaran Semester Ini</h6>
                                            <button class="btn btn-primary btn-sm rounded-pill px-3" onclick="openViolationModal(<?= $stu['id'] ?>, '<?= esc($stu['full_name'], 'js') ?>')">
                                                <i class="bi bi-plus-circle me-1"></i>Catat Pelanggaran
                                            </button>
                                        </div>

                                        <!-- Log Table -->
                                        <div class="table-responsive">
                                            <table class="table table-hover align-middle table-sm border-light mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th style="width: 120px">Tanggal</th>
                                                        <th style="width: 100px">Kode</th>
                                                        <th>Aturan Pelanggaran</th>
                                                        <th style="width: 110px" class="text-center">Severity</th>
                                                        <th style="width: 80px" class="text-center">Poin</th>
                                                        <th>Keterangan BK</th>
                                                        <th style="width: 120px">Petugas</th>
                                                        <th style="width: 60px" class="text-center">Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php if (empty($stu['violations'])): ?>
                                                        <tr>
                                                            <td colspan="8" class="text-center py-4 text-muted small">
                                                                <i class="bi bi-emoji-smile me-1 text-success"></i>Siswa bersih, tidak memiliki catatan pelanggaran semester ini.
                                                            </td>
                                                        </tr>
                                                    <?php else: ?>
                                                        <?php foreach ($stu['violations'] as $v): ?>
                                                            <tr>
                                                                <td class="small text-dark"><?= date('d-m-Y', strtotime($v['date'])) ?></td>
                                                                <td><span class="badge bg-secondary bg-opacity-10 text-secondary"><?= esc($v['code']) ?></span></td>
                                                                <td class="small fw-semibold text-dark"><?= esc($v['description']) ?></td>
                                                                <td class="text-center">
                                                                    <?php
                                                                    $sev = $v['severity'];
                                                                    $badgeC = 'bg-success bg-opacity-10 text-success';
                                                                    if ($sev === 'Khusus') $badgeC = 'bg-dark text-white';
                                                                    elseif ($sev === 'Berat') $badgeC = 'bg-danger bg-opacity-10 text-danger';
                                                                    elseif ($sev === 'Sedang') $badgeC = 'bg-warning bg-opacity-10 text-warning';
                                                                    ?>
                                                                    <span class="badge <?= $badgeC ?> rounded-pill small"><?= esc($sev) ?></span>
                                                                </td>
                                                                <td class="text-center text-danger fw-bold"><?= esc($v['points']) ?></td>
                                                                <td class="small text-secondary"><?= esc($v['notes'] ?: '-') ?></td>
                                                                <td class="small text-muted"><?= esc($v['recorder_name'] ?: 'Sistem') ?></td>
                                                                <td class="text-center">
                                                                    <a href="/bk/violations/delete/<?= $v['id'] ?>" class="btn btn-outline-danger btn-xs" onclick="return confirm('Hapus catatan pelanggaran ini?')">
                                                                        <i class="bi bi-trash"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        <?php endforeach; ?>
                                                    <?php endif; ?>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- ────────────────────────────────────────────────────────────────
     MODAL TO RECORD INFRACTION
     ──────────────────────────────────────────────────────────────── -->
<div class="modal fade" id="recordViolationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/bk/violations/store" method="POST">
            <?= csrf_field() ?>
            <input type="hidden" name="student_id" id="modalStudentId">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-danger text-white py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-exclamation-octagon me-2"></i>Catat Pelanggaran</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Siswa</label>
                        <input type="text" id="modalStudentName" class="form-control bg-light border-0 fw-bold" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Tanggal Pelanggaran</label>
                        <input type="date" name="date" class="form-control border-danger" required value="<?= date('Y-m-d') ?>">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Jenis Pelanggaran & Poin</label>
                        <select name="rule_id" class="form-select border-danger" required>
                            <option value="">-- Pilih Jenis Pelanggaran --</option>
                            <?php foreach ($rules as $r): ?>
                            <option value="<?= $r['id'] ?>"><?= esc($r['code']) ?> - <?= esc($r['description']) ?> (<?= esc($r['points']) ?> Poin - <?= esc($r['severity']) ?>)</option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Keterangan / Kronologi Kejadian</label>
                        <textarea name="notes" class="form-control border-danger" rows="3" placeholder="Masukkan catatan tambahan jika ada..."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 py-3">
                    <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger btn-sm rounded-pill px-4">Simpan Catatan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function openViolationModal(studentId, studentName) {
        document.getElementById('modalStudentId').value = studentId;
        document.getElementById('modalStudentName').value = studentName;
        new bootstrap.Modal(document.getElementById('recordViolationModal')).show();
    }
</script>

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