<?php
$kelas = isset($_GET['kelas']) ? $_GET['kelas'] : '';
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Daftar MTCNA</title>

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

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

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            height: 100vh;
        }

        .card-form {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            padding: 30px;
            background: #fff;
            animation: fadeIn 0.8s ease;
        }

        .form-control {
            border-radius: 10px;
            padding-left: 40px;
        }

        .input-group-text {
            border-radius: 10px 0 0 10px;
            background: #4facfe;
            color: #fff;
            border: none;
        }

        .btn-modern {
            background: linear-gradient(135deg, #4facfe, #00c6ff);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-modern:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        h2 {
            font-weight: 600;
            color: #333;
        }

        @keyframes fadeIn {
            from {opacity: 0; transform: translateY(20px);}
            to {opacity: 1; transform: translateY(0);}
        }
    </style>
</head>
<body>

<div class="d-flex justify-content-center align-items-center vh-100">
    <div class="col-md-5">
        <div class="card-form">

            <h2 class="text-center mb-4">
                <i class="bi bi-person-plus-fill"></i> Daftar MTCNA
            </h2>

            <form action="proses_daftar.php" method="POST">

                <!-- Nama -->
                <div class="mb-3 input-group">
                    <span class="input-group-text">
                        <i class="bi bi-person"></i>
                    </span>
                    <input type="text" name="nama" class="form-control" placeholder="Masukkan Nama" required>
                </div>

                <!-- Email -->
                <div class="mb-3 input-group">
                    <span class="input-group-text">
                        <i class="bi bi-envelope"></i>
                    </span>
                    <input type="email" name="email" class="form-control" placeholder="Masukkan Email" required>
                </div>

                <!-- No HP -->
                <div class="mb-3 input-group">
                    <span class="input-group-text">
                        <i class="bi bi-phone"></i>
                    </span>
                    <input type="text" name="no_hp" class="form-control" placeholder="Masukkan No HP" required>
                </div>

                <!-- Hidden kelas -->
                <input type="hidden" name="kelas" value="<?= $kelas ?>">

                <!-- Button -->
                <button type="submit" class="btn btn-modern w-100">
                    <i class="bi bi-send-fill"></i> Daftar Sekarang
                </button>

            </form>

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

</body>
</html>