<?php
session_start();
include('db_connection.php');

// Fetch classes from database
$classes_query = "SELECT class_id, class_name FROM classes";
$classes = $conn->query($classes_query);

// Fetch parents from database
$parents_query = "SELECT parent_id, name FROM parents";
$parents = $conn->query($parents_query);

// Check if queries were successful
if (!$classes) {
    die("Error fetching classes: " . $conn->error);
}

if (!$parents) {
    die("Error fetching parents: " . $conn->error);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Student</title>

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

    <style>
        :root {
            --primary: #3498db;
            --success: #2ecc71;
            --danger: #e74c3c;
            --dark: #2c3e50;
            --bg: #f4f6f9;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 850px;
            margin: auto;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        /* HEADER */
        .header {
            background: linear-gradient(135deg, var(--dark), var(--primary));
            color: white;
            text-align: center;
            padding: 25px;
        }

        .header h2 {
            font-weight: 400;
        }

        /* FORM */
        .form-body {
            padding: 30px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .full {
            grid-column: 1 / -1;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--dark);
        }

        input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 10px;
            outline: none;
            transition: 0.3s;
        }

        input:focus, select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 5px rgba(52,152,219,0.3);
        }

        /* FILE INPUT */
        .file-box {
            border: 2px dashed #ccc;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
        }

        /* BUTTON */
        .btn {
            background: linear-gradient(135deg, var(--success), #27ae60);
            color: white;
            padding: 15px;
            width: 100%;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 20px;
            transition: 0.3s;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        /* MESSAGES */
        .msg-success {
            background: var(--success);
            color: white;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 8px;
        }

        .msg-error {
            background: var(--danger);
            color: white;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 8px;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

<?php include 'header.php'; ?>

<div class="container">

    <div class="header">
        <h2><i class="fas fa-user-graduate"></i> Add New Student</h2>
        <p>Fill in student details below</p>
    </div>

    <div class="form-body">

        <!-- Messages -->
        <?php if (isset($_SESSION['message'])): ?>
            <div class="msg-success">
                <?php echo $_SESSION['message']; unset($_SESSION['message']); ?>
            </div>
        <?php endif; ?>

        <?php if (isset($_SESSION['error'])): ?>
            <div class="msg-error">
                <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
            </div>
        <?php endif; ?>

        <form method="post" action="process_add_student.php" enctype="multipart/form-data">

            <div class="grid">

                <!-- Student Info -->
                <div>
                    <label>Student Name</label>
                    <input type="text" name="name" required>
                </div>

                <div>
                    <label>Registration Number</label>
                    <input type="text" name="regNumber" required>
                </div>

                <div>
                    <label>Date of Birth</label>
                    <input type="date" name="dob" required>
                </div>

                <div>
                    <label>Email</label>
                    <input type="email" name="email" required>
                </div>

                <div>
                    <label>Phone</label>
                    <input type="text" name="phone" required>
                </div>

                <div class="full">
                    <label>Address</label>
                    <input type="text" name="address" required>
                </div>

                <!-- Class -->
                <div>
                    <label>Class</label>
                    <select name="class_id" required>
                        <option value="">Select Class</option>
                        <?php while ($row = $classes->fetch_assoc()): ?>
                            <option value="<?php echo $row['class_id']; ?>">
                                <?php echo $row['class_name']; ?>
                            </option>
                        <?php endwhile; ?>
                    </select>
                </div>

                <!-- Parent -->
                <div>
                    <label>Parent</label>
                    <select name="parent_id" required>
                        <option value="">Select Parent</option>
                        <?php while ($row = $parents->fetch_assoc()): ?>
                            <option value="<?php echo $row['parent_id']; ?>">
                                <?php echo $row['name']; ?>
                            </option>
                        <?php endwhile; ?>
                    </select>
                </div>

                <!-- Fees -->
                <div>
                    <label>Fees Paid</label>
                    <input type="number" name="fees_paid" step="0.01" required>
                </div>

                <div>
                    <label>Fees Outstanding</label>
                    <input type="number" name="fees_outstanding" step="0.01" required>
                </div>

                <!-- File -->
                <div class="full">
                    <label>Profile Picture</label>
                    <input type="file" name="profile_picture" required>
                </div>

                <!-- Login -->
                <div>
                    <label>Username</label>
                    <input type="text" name="username" required>
                </div>

                <div>
                    <label>Password</label>
                    <input type="password" name="password" required>
                </div>

            </div>

            <button class="btn" type="submit">
                <i class="fas fa-user-plus"></i> Add Student
            </button>

        </form>
    </div>
</div>
<script>
document.querySelector('input[type="file"]').addEventListener('change', function () {
    const fileName = this.files[0]?.name || "Choose file";
    console.log(fileName);
});
</script>

</body>
</html>