<div class='page-title'>
    <div>
        <h1><i class='fa fa-laptop'></i> Student Management</h1>
        <p>Add New Student</p>
    </div>
</div>

<div class='card'>
    <form action='' method='POST' enctype='multipart/form-data'>
        <div class='panel panel-primary ch'>
            <div class='panel-heading'>
                <h4 class='text-center'>Student Online Registration</h4>
            </div>
            <div class='panel-body'>

                <!-- Profile Image Upload with Preview -->
                <div class='form-group text-center'>
                    <label for='uploadImage'><b>Student Upload Image</b></label><br>
                    <img id='preview' src='../uploads/students/none.jpg' class='img-thumbnail rounded-circle mb-2' width='150' height='150' alt='Profile Preview'>
                    <input type='file' name='file' id='uploadImage' class='form-control-file d-block mx-auto' onchange="previewImage(event)" required>
                </div>

                <!-- Registration Form Table -->
                <table class='table table-striped'>
                    <!-- Class -->
                    <tr>
                        <td><b>Class</b></td>
                        <td>
                            <select name='reg_student_tc' class='form-control' required>
                                <option>Select Class</option>
                                <?php
                                $query = "SELECT * FROM `classes`";
                                $run_query = mysqli_query($connection, $query);
                                if (mysqli_num_rows($run_query) > 0) {
                                    while ($result = mysqli_fetch_assoc($run_query)) {
                                        $publish_result_classes = $result['classes'];
                                        echo "<option>{$publish_result_classes}</option>";
                                    }
                                }
                                ?>
                            </select>
                        </td>
                    </tr>

                    <!-- Other Fields -->
                    <tr>
                        <td><b>Admission Number</b></td>
                        <td><input type='text' name='reg_number' class='form-control' value='<?php echo $school_initial; ?>' required></td>
                    </tr>
                    <tr>
                        <td><b>First Name</b></td>
                        <td><input type='text' name='reg_student_firstname' class='form-control' required></td>
                    </tr>
                    <tr>
                        <td><b>Middle Name</b></td>
                        <td><input type='text' name='reg_student_othername' class='form-control'></td>
                    </tr>
                    <tr>
                        <td><b>Last Name</b></td>
                        <td><input type='text' name='reg_student_lastname' class='form-control' required></td>
                    </tr>
                    <tr>
                        <td><b>Sex</b></td>
                        <td>
                            <select name='reg_student_gender' class='form-control' required>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Height</b></td>
                        <td><input type='text' name='height' class='form-control' required></td>
                    </tr>
                    <tr>
                        <td><b>Weight</b></td>
                        <td><input type='text' name='weight' class='form-control' required></td>
                    </tr>

                    <!-- Date of Birth -->                    
					<tr>
                        <td><b>Date of Birth</b></td>
                        <td><input type='text' name='reg_student_dob' class='form-control datepicker' required></td>
                    </tr>
                    <!-- More Fields -->
                    <tr>
                        <td><b>Health Conditions</b></td>
                        <td><input type='text' name='health_conditions' class='form-control' required></td>
                    </tr>
                    <tr>
                        <td><b>Club</b></td>
                        <td><input type='text' name='club' class='form-control' required></td>
                    </tr>
                    <tr>
                        <td><b>Nationality</b></td>
                        <td>
                            <select name='reg_student_nationality' class='form-control'>
                                <option>Country</option>
                                <?php foreach (["Nigerian", "Ghananian"] as $country) echo "<option>$country</option>"; ?>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><b>State</b></td>
                        <td>
                            <select name="reg_student_state" id="state" class="form-control" onchange="toggleLGA(this);">
                                <option value="">- Select -</option>
                                <?php
                                $states = ["Abia", "Adamawa", "AkwaIbom", "Anambra", "Bauchi", "Bayelsa", "Benue", "Borno",
                                    "Cross River", "Delta", "Ebonyi", "Edo", "Ekiti", "Enugu", "FCT", "Gombe", "Imo",
                                    "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa",
                                    "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba",
                                    "Yobe", "Zamfara"];
                                foreach ($states as $state) echo "<option value='$state'>$state</option>";
                                ?>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><b>LGA</b></td>
                        <td>
                            <select name="reg_student_lga" id="lga" class="form-control select-lga" required></select>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Student Address</b></td>
                        <td><input type='text' name='reg_student_address' class='form-control' required></td>
                    </tr>

                    <!-- Guardian Info -->
                    <tr>
                        <td><b>Guardian's Details</b></td>
                        <td>
                            <div class='form-row'>
                                <div class='col'>
                                    <input type='text' name='guardian_name' class='form-control' placeholder='Guardian Name'>
                                </div>
                                <div class='col'>
                                    <input type='text' name='guardian_occupation' class='form-control' placeholder='Occupation'>
                                </div>
                                <div class='col'>
                                    <input type='text' name='guardian_phone' pattern='[0-9]+' class='form-control' placeholder='Phone Number'>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>

                <!-- Submit Button -->
                <div class='text-right'>
                    <button class='btn btn-primary' style='border-radius:10px;' name='student_reg_btn' type='submit'>
                        Submit Registration
                    </button>
                </div>

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