<?php include "config/koneksi.php"; ?>
<!DOCTYPE html>
<html>
<head>
    <title>Jadwal MTCNA</title>

    <!-- Bootstrap + Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        body {
            background: #f4f6f9;
            font-family: 'Segoe UI', sans-serif;
        }

        h2 {
            color: #2c3e50;
        }

        .card {
            border: none;
            border-radius: 20px;
            transition: 0.3s;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .card-header {
            border-radius: 20px 20px 0 0;
            background: linear-gradient(135deg, #0d6efd, #00c6ff);
            color: white;
            font-weight: bold;
        }

        .btn-modern {
            border-radius: 50px;
            padding: 5px 15px;
        }

        .badge-status {
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 20px;
        }

        .modal-content {
            border-radius: 20px;
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <h2 class="text-center fw-bold mb-4">Jadwal Training MTCNA</h2>

    <div class="row">

    <?php
    $data = mysqli_query($conn, "SELECT * FROM jadwal ORDER BY tanggal ASC");
    while($d = mysqli_fetch_array($data)){
    ?>

    <div class="col-md-4">
        <div class="card shadow-sm mb-4">

            <div class="card-header text-center">
                <?= $d['nama_kelas'] ?>
            </div>

            <div class="card-body text-center">
                <p><i class="bi bi-calendar-event"></i> <?= $d['tanggal'] ?></p>
                <p><i class="bi bi-clock"></i> <?= $d['durasi'] ?></p>
                <p><i class="bi bi-people"></i> Kuota: <?= $d['kuota'] ?></p>

                <span class="badge bg-success badge-status">
                    <?= $d['status'] ?>
                </span>

                <br><br>

                <!-- Tombol Popup -->
                <button class="btn btn-outline-primary btn-modern btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#modal<?= $d['id'] ?>">
                    Detail
                </button>

                <a href="daftar.php?kelas=<?= urlencode($d['nama_kelas']) ?>"
                   class="btn btn-primary btn-modern btn-sm">
                   Daftar
                </a>
            </div>
        </div>
    </div>

    <!-- MODAL POPUP -->
    <div class="modal fade" id="modal<?= $d['id'] ?>" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><?= $d['nama_kelas'] ?></h5>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p><strong>Tanggal:</strong> <?= $d['tanggal'] ?></p>
                    <p><strong>Durasi:</strong> <?= $d['durasi'] ?></p>
                    <p><strong>Kuota:</strong> <?= $d['kuota'] ?></p>
                    <p><strong>Status:</strong> <?= $d['status'] ?></p>

                    <hr>
                    <p style="font-size:14px;color:#666;">
                        Training MTCNA ini dirancang untuk meningkatkan skill jaringan siswa
                        agar siap masuk dunia kerja industri.
                    </p>
                </div>

                <div class="modal-footer">
                    <a href="daftar.php?kelas=<?= urlencode($d['nama_kelas']) ?>"
                       class="btn btn-success">
                        Daftar Sekarang
                    </a>
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>

            </div>
        </div>
    </div>

    <?php } ?>

    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>