<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pilih Kelas | Tatib 5</title>

    <link rel="icon" type="image/png" href="<?= base_url('logo.png') ?>">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: #f5f7fb;
        }

        /* HEADER */

        .top-header {
            background: linear-gradient(135deg, #1E3A8A, #2563EB);
            color: #fff;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 10px 25px rgba(37, 99, 235, .25);
        }

        .btn-back {
            color: white;
            text-decoration: none;
            font-weight: 600;
        }

        .btn-back:hover {
            color: #FFD54F;
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-header {
            width: 60px;
        }

        .header-title h4 {
            margin: 0;
            font-weight: 700;
        }

        .header-title small {
            opacity: .9;
        }

        /* CARD */

        .login-card {
            max-width: 450px;
            margin: 70px auto;
            border: none;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        }

        .card-header {
            background: #2563EB;
            color: white;
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            padding: 18px;
        }

        .card-body {
            padding: 35px;
        }

        label {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-control {
            height: 48px;
            border-radius: 12px;
        }

        .btn-login {
            width: 100%;
            background: #2563EB;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 12px;
            font-weight: 600;
            transition: .3s;
        }

        .btn-login:hover {
            background: #1E40AF;
        }

        .back-home {
            display: block;
            text-align: center;
            margin-top: 20px;
            text-decoration: none;
            color: #2563EB;
            font-weight: 600;
        }

        .back-home:hover {
            color: #1E3A8A;
        }

        footer {
            margin-top: 80px;
            background: #FFD54F;
            padding: 20px 30px;
            color: #1E3A8A;
        }

        footer h5 {
            color: #1E3A8A;
            font-weight: 700;
            margin-bottom: 5px;
        }

        footer small {
            color: #1E3A8A;
            font-weight: 600;
            line-height: 1.7;
        }

        .footer-link {
            color: #1E3A8A;
            text-decoration: none;
            font-weight: 700;
            margin-left: 25px;
        }

        .footer-link i {
            margin-right: 6px;
            font-size: 18px;
        }

        .footer-link:hover {
            color: #0f172a;
        }

        .kelas-card {
            border-radius: 20px;
            padding: 22px;
            text-align: center;
            transition: .3s;
            cursor: pointer;
            color: #fff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        }

        .kelas-card i {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .kelas-card h5 {
            margin: 0;
            font-weight: 700;
        }

        .kelas-card:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 0, 0, .18);
        }

        /* VII */
        .kelas7 {
            background: linear-gradient(135deg, #34D399, #10B981);
        }

        /* VIII */
        .kelas8 {
            background: linear-gradient(135deg, #60A5FA, #2563EB);
        }

        /* IX */
        .kelas9 {
            background: linear-gradient(135deg, #C084FC, #8B5CF6);
        }

        /* Judul */
        .text-purple {
            color: #8B5CF6;
        }

        .logout-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff20;
            color: #fff;
            padding: 10px 18px;
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: .3s;
            backdrop-filter: blur(10px);
        }

        .logout-pill:hover {
            background: #ef4444;
            border-color: #ef4444;
            color: #fff;
            transform: translateY(-2px);
        }

        .user-card {
            background: #fff;
            border-radius: 18px;
            padding: 18px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
            transition: .3s;
            height: 100%;
        }

        .user-card:hover {
            transform: translateY(-4px);
        }

        .user-card i {
            font-size: 28px;
            color: #2563EB;
            margin-bottom: 10px;
        }

        .user-card small {
            display: block;
            color: #6B7280;
            font-weight: 600;
        }

        .user-card h6 {
            margin: 5px 0 0;
            font-weight: 700;
            color: #1E3A8A;
        }
    </style>

</head>

<body>
    <div class="top-header">

        <a href="<?= base_url('Logout') ?>" class="logout-pill">
            <i class="fa-solid fa-right-from-bracket"></i>
            <span>Logout</span>
        </a>

        <div class="header-title">

            <img src="<?= base_url('logo.png') ?>" class="logo-header">

            <div>
                <h4>TIM TATIB 5</h4>
                <small>SMP Negeri 5 Bandung</small>
            </div>

        </div>

    </div>

    <div class="container my-5">

        <?php
        $role = match (session('role')) {
            'guru'      => 'Guru',
            'gurubk'    => 'Guru Bimbingan Konseling',
            'kesiswaan' => 'Kesiswaan',
            default     => '-'
        };
        ?>

        <div class="container my-5">

            <!-- Judul -->
            <div class="text-center mb-5">
                <h2 class="fw-bold text-primary">
                    <i class="fa-solid fa-school me-2"></i>
                    PILIH KELAS
                </h2>
                <p class="text-muted">Silakan pilih kelas yang akan dikelola</p>
            </div>

            <!-- Kartu Informasi -->
            <div class="row g-3 mb-5">

                <div class="col-md-4">
                    <div class="user-card">
                        <i class="fa-solid fa-id-card"></i>
                        <small>NIP</small>
                        <h6><?= session('nip'); ?></h6>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="user-card">
                        <i class="fa-solid fa-user"></i>
                        <small>Nama</small>
                        <h6><?= session('nama'); ?></h6>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="user-card">
                        <i class="fa-solid fa-user-shield"></i>
                        <small>Sebagai</small>
                        <h6><?= $role; ?></h6>
                    </div>
                </div>

            </div>

            <!-- Button Kelas -->
            <div class="row g-3">
                <?php foreach ($kelas as $k):

                    if (substr($k['nama_kelas'], 0, 3) == 'VII')
                        $warna = 'kelas7';
                    elseif (substr($k['nama_kelas'], 0, 4) == 'VIII')
                        $warna = 'kelas8';
                    else
                        $warna = 'kelas9';

                ?>
                    <div class="col-lg-2 col-md-3 col-6">
                        <a href="<?= base_url('RekapPelanggaran/' . $k['id_kelas']) ?>"
                            class="text-decoration-none">
                            <div class="kelas-card <?= $warna ?>">
                                <i class="fa-solid fa-users"></i>
                                <h5><?= $k['nama_kelas']; ?></h5>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="card mt-4 shadow-sm">
            <div class="card-header bg-primary text-white">
                <i class="fas fa-chart-bar"></i>
                Akumulasi Skor Perkelas
            </div>

            <div class="card-body">

                <div class="table-responsive">

                    <table id="tblRekapKelas" class="table table-bordered table-striped table-hover">

                        <thead class="table-light">

                            <tr>
                                <th>No</th>
                                <th>Kelas</th>
                                <th>Wali Kelas</th>
                                <th>Skor Pelanggaran</th>
                                <th>Skor Penghargaan</th>
                            </tr>

                        </thead>

                        <tbody>

                            <?php $no = 1; ?>

                            <?php foreach ($rekapKelas as $r): ?>
                                <tr>
                                    <td><?= $no++; ?></td>
                                    <td><?= $r['nama_kelas']; ?></td>
                                    <td><?= $r['wali_kelas'] ?? '-'; ?></td>
                                    <td class="text-center">
                                        <span class="badge bg-danger">
                                            <?= $r['skor_pelanggaran']; ?>
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="badge bg-success">
                                            <?= $r['skor_prestasi']; ?>
                                        </span>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>

                </div>

            </div>

        </div>
    </div>


    <footer>

        <div class="container">

            <div class="row align-items-center">

                <div class="col-md-6">

                    <h5>SMP Negeri 5 Bandung</h5>

                    <small>

                        Jl. Sumatra No.40 Bandung<br>

                        Sistem Informasi Tata Tertib © 2026

                    </small>

                </div>

                <div class="col-md-6 text-end">

                    <a href="https://instagram.com/bdg.smpn5" class="footer-link">

                        <i class="fab fa-instagram"></i>

                        @bdg.smpn5

                    </a>

                    <a href="#" class="footer-link">

                        <i class="fab fa-youtube"></i>

                        SMP Negeri 5 Bandung

                    </a>

                </div>

            </div>

        </div>

    </footer>
    <script>
        $(function() {

            $('#tblRekapKelas').DataTable({

                order: [
                    [3, 'desc']
                ],

                pageLength: 10,

                responsive: true,

                columnDefs: [{
                    targets: [4],
                    orderable: true
                }],

                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                    zeroRecords: "Data tidak ditemukan",
                    infoEmpty: "Tidak ada data",
                    paginate: {
                        previous: "Sebelumnya",
                        next: "Berikutnya"
                    }
                }

            });

        });
    </script>

</body>

</html>