<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #d03f4d;
            --secondary-color: #3a506b;
            --light-color: #f5f7fa;
            --dark-color: #1c2541;
        }
        body { 
            font-family: 'Roboto', sans-serif; 
            background: var(--light-color); 
            color: #333;
        }
        .header {
            background: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card { 
            border-radius: 15px; 
            box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
            padding: 30px; 
            margin: 30px 0;
            border: none;
        }
        h2 { 
            color: var(--primary-color); 
            margin-bottom: 25px; 
            font-weight: 700; 
            text-align: center;
        }
        .form-control { 
            border-radius: 8px; 
            padding: 12px 15px;
            margin-bottom: 15px; 
            border: 1px solid #ddd;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(208, 63, 77, 0.2);
        }
        .form-label {
            font-weight: 500;
            margin-bottom: 5px;
            color: var(--secondary-color);
        }
        .btn-primary { 
            background: var(--primary-color); 
            border: none;
            border-radius: 8px; 
            padding: 12px; 
            font-weight: 600; 
            width: 100%; 
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background: #b02a37;
            transform: translateY(-2px);
        }
        .upload-container {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
            background: #f9f9f9;
            margin-bottom: 20px;
        }
        .upload-container:hover {
            border-color: var(--primary-color);
            background: #f0f0f0;
        }
        .upload-label { 
            display: block; 
            margin-bottom: 10px; 
            font-weight: 500; 
            color: var(--secondary-color);
        }
        .preview-img { 
            margin-top: 10px; 
            max-width: 120px; 
            height: 120px;
            border-radius: 50%; 
            border: 3px solid #ddd;
            object-fit: cover;
        }
        .section-title {
            color: var(--secondary-color);
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
            margin: 25px 0 15px;
            font-weight: 600;
        }
        .required-field::after {
            content: " *";
            color: var(--primary-color);
        }
        .form-note {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: -10px;
            margin-bottom: 15px;
        }
        .alert {
            border-radius: 8px;
            padding: 12px 15px;
        }
        .password-toggle {
            position: relative;
        }
        .password-toggle-icon {
            position: absolute;
            right: 15px;
            top: 42px;
            cursor: pointer;
            color: #6c757d;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="logo-container">
            <img src="logo.png" alt="" width="120">
        </div>
    </div>
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="card">
                <h2><i class="fas fa-user-graduate me-2"></i>Student Registration</h2>

           <?php
require __DIR__ . '/email/class.phpmailer.php';
require __DIR__ . '/email/class.smtp.php';
include "students/include/config.php";

$programs = $conn->query("SELECT id, program FROM programs");
$intakes  = $conn->query("SELECT id, intake FROM intake");

// Process form data when form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Collect and sanitize input values
    $studentname     = htmlspecialchars($_POST['studentname']);
    $studentid       = htmlspecialchars($_POST['studentid']);
    $parent_name     = htmlspecialchars($_POST['parent_name']);
    $parent_mobile   = htmlspecialchars($_POST['parent_mobile']);
    $parent_email    = htmlspecialchars($_POST['parent_email']);
    $parent_relation = htmlspecialchars($_POST['parent_relation']);
    $intake          = htmlspecialchars($_POST['intake']);
    $gender          = htmlspecialchars($_POST['gender']);
    $start_year      = htmlspecialchars($_POST['start_year']);
    $end_year        = htmlspecialchars($_POST['end_year']);
    $program         = htmlspecialchars($_POST['program']);
    $mobile          = htmlspecialchars($_POST['mobile']);
    $email           = htmlspecialchars($_POST['email']);
    $pass            = password_hash($_POST['pass'], PASSWORD_DEFAULT);
    $boarding_status = htmlspecialchars($_POST['boarding_status']);
    $hostel_name     = htmlspecialchars($_POST['hostel_name']);
    $room_number     = htmlspecialchars($_POST['room_number']);

    // Handle file upload
    $image = 'default.png';
    if (isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
        $target_dir     = "students/img/";
        $imageFileType  = strtolower(pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION));
        $image          = $studentid . "." . $imageFileType;
        $target_file    = $target_dir . $image;

        // Check if image file is valid
        $check = getimagesize($_FILES["image"]["tmp_name"]);
        if ($check !== false) {
            move_uploaded_file($_FILES["image"]["tmp_name"], $target_file);
        }
    }

    // Check if student ID already exists
    $check_sql = "SELECT id FROM students WHERE studentid = ?";
    $check_stmt = $conn->prepare($check_sql);
    $check_stmt->bind_param("s", $studentid);
    $check_stmt->execute();
    $check_result = $check_stmt->get_result();

    if ($check_result->num_rows > 0) {
        echo "<div class='alert alert-danger'><i class='fas fa-exclamation-circle me-2'></i>Error: Student ID already exists.</div>";
    } else {
        // Insert new student
        $stmt = $conn->prepare("INSERT INTO students 
            (image, studentid, studentname, parent_name, parent_mobile, parent_email, parent_relation, intake, gender, start_year, end_year, program, mobile, email, pass, boarding_status, hostel_name, room_number) 
            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");

        $stmt->bind_param(
            "ssssssssssssssssss",
            $image, $studentid, $studentname, $parent_name, $parent_mobile, $parent_email, 
            $parent_relation, $intake, $gender, $start_year, $end_year, $program, 
            $mobile, $email, $pass, $boarding_status, $hostel_name, $room_number
        );

        if ($stmt->execute()) {
            echo "<div class='alert alert-success'><i class='fas fa-check-circle me-2'></i>Registration successful! A confirmation email has been sent.</div>";

            // Send confirmation email
            $mail = new PHPMailer(true);
            try {
                    $mail->isSMTP();
                $mail->Host       = 'unicohsuniversity.com';
                $mail->SMTPAuth   = true;
                $mail->Username   = 'contact@unicohsuniversity.com';
                $mail->Password   = '@mypass1996';
                $mail->SMTPSecure = 'tls';
                $mail->Port       = 587;

                $mail->setFrom('contact@unicohsuniversity.com', 'Unicohs University');
                $mail->addAddress($email, $studentname);

                $mail->isHTML(true);
                $mail->Subject = 'Registration Successfully';
                $mail->Body    = "
                    <h3>Welcome to Unicohs University!</h3>
                    <p>Dear <strong>$studentname</strong>,</p>
                    <p>Your registration has been successfully received.</p>
                    <p><strong>Email:</strong> $email<br>
                    <strong>Student ID:</strong> $studentid</p>
                    <p><strong>Password:</strong> *******</p>
                    <p>Thank you for joining us.</p>
                ";
                $mail->send();
            } catch (Exception $e) {
                echo "<div class='alert alert-warning'>Email could not be sent. Mailer Error: {$mail->ErrorInfo}</div>";
            }
        } else {
            echo "<div class='alert alert-danger'><i class='fas fa-exclamation-circle me-2'></i>Error: " . $stmt->error . "</div>";
        }

        $stmt->close();
    }

    $check_stmt->close();
    $conn->close();
}
?>


                <form method="post" enctype="multipart/form-data">
                    <h4 class="section-title"><i class="fas fa-id-card me-2"></i>Personal Information</h4>
                    
                    <div class="text-center mb-4">
                        <label class="upload-container">
                            <span class="upload-label"><i class="fas fa-cloud-upload-alt me-2"></i>Upload Profile Image</span>
                            <img id="preview" class="preview-img" src="#" alt="Image Preview" style="display:none;">
                            <div class="mt-2">Click to upload or drag and drop</div>
                            <div class="form-note">Recommended: Square image, max 2MB</div>
                            <input hidden type="file" name="image" accept="image/*" class="form-control" onchange="previewImage(event)">
                        </label>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label required-field">Full Name</label>
                            <input type="text" name="studentname" placeholder="Enter your full name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required-field">Student ID</label>
                            <input type="text" name="studentid" placeholder="Enter student ID" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label required-field">Gender</label>
                            <select name="gender" class="form-control" required>
                                <option value="">-- Select Gender --</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required-field">Mobile Number</label>
                            <input type="text" name="mobile" placeholder="Enter mobile number" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <label class="form-label required-field">Email Address</label>
                            <input type="email" name="email" placeholder="Enter email address" class="form-control" required>
                        </div>
                    </div>

                    <h4 class="section-title"><i class="fas fa-graduation-cap me-2"></i>Academic Information</h4>
                    
                    <div class="row">
                       
                       <div class="col-6"> 
                    <label style="font-weight:bold;">Program</label>
                    <select name="program" required class="form-control">
                        <option value="">-- Select --</option>
                        <?php while($row = $programs->fetch_assoc()) { ?>
                            <option value="<?= $row['program']; ?>"><?= $row['program']; ?></option>
                        <?php } ?>
                    </select> 
                                    </div>            

                <!-- Intake -->
                <div class="col-6"> 
                    <label style="font-weight:bold;">Intake</label>
                    <select name="intake" required class="form-control">
                        <option value="">-- Select --</option>
                        <?php while($row = $intakes->fetch_assoc()) { ?>
                            <option value="<?= $row['intake']; ?>"><?= $row['intake']; ?></option>
                        <?php } ?>
                    </select>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label required-field">Start Year</label>
                            <input type="number" name="start_year" placeholder="Enter start year" min="2000" max="2100" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required-field">End Year</label>
                            <input type="number" name="end_year" placeholder="Enter end year" min="2000" max="2100" class="form-control" required>
                        </div>
                    </div>
                    
                    <h4 class="section-title"><i class="fas fa-bed me-2"></i>Boarding Information</h4>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Boarding Status</label>
                            <select name="boarding_status" class="form-control">
                                <option value="">-- Select Status --</option>
                                <option value="Campus BH">Campus BH</option>
                                <option value="Off Campus BH">Off Campus BH</option>
                            </select>
                        </div>
                       
                       
                            
                            <div class="col-md-6">
                            <label class="form-label">Hostel Name</label>
                            <input type="text" name="hostel_name" placeholder="Hostel Name" class="form-control">
                        </div>
                        
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Room Number</label>
                            <input type="text" name="room_number" placeholder="Enter room number" class="form-control">
                        </div>
                    </div>

                    <h4 class="section-title"><i class="fas fa-users me-2"></i>Parent/Guardian Information</h4>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label required-field">Parent/Guardian Name</label>
                            <input type="text" name="parent_name" placeholder="Enter full name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required-field">Relationship</label>
                            <select name="parent_relation" class="form-control" required>
                                <option value="">-- Select Relationship --</option>
                                <option value="Father">Father</option>
                                <option value="Mother">Mother</option>
                                <option value="Guardian">Guardian</option>
                                <option value="Wife">Wife</option>
                            <option value="Husband">Husband</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
<option value="other">other</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label required-field">Parent Mobile Number</label>
                            <input type="text" name="parent_mobile" placeholder="Enter mobile number" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required-field">Parent Email</label>
                            <input type="email" name="parent_email" placeholder="Enter email address" class="form-control"  placeholder="option">
                        </div>
                    </div>

                    <h4 class="section-title"><i class="fas fa-lock me-2"></i>Account Details</h4>
                    
                    <div class="row">
                        <div class="col-md-12 password-toggle">
                            <label class="form-label required-field">Password</label>
                            <input type="password" name="pass" id="password" placeholder="Create a secure password" class="form-control" required>
                            <span class="password-toggle-icon" onclick="togglePassword()">
                                <i class="fas fa-eye" id="toggleIcon"></i>
                            </span>
                            <div class="form-note">Use at least 8 characters with a mix of letters, numbers and symbols</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <label class="form-label required-field">Confirm Password</label>
                            <input type="password" name="confirm_pass" id="confirm_password" placeholder="Confirm your password" class="form-control" required>
                            <div class="form-note">Please re-enter your password to confirm</div>
                        </div>
                    </div>
                    
                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" id="terms" required>
                        <label class="form-check-label" for="terms">
                            I agree to the <a href="#">Terms and Conditions</a> and <a href="#">Privacy Policy</a>
                        </label>
                    </div>
                    
                    <button type="submit" name="register" class="btn btn-primary mt-4">
                        <i class="fas fa-user-plus me-2"></i>Complete Registration
                    </button>
                </form>
                
                <div class="text-center mt-3">
                    <p>Already have an account? <a href="students/login/index.php">Login here</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function() {
        const img = document.getElementById('preview');
        img.src = reader.result;
        img.style.display = 'block';
    }
    reader.readAsDataURL(event.target.files[0]);
}

function togglePassword() {
    const passwordInput = document.getElementById('password');
    const confirmInput = document.getElementById('confirm_password');
    const toggleIcon = document.getElementById('toggleIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        confirmInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        confirmInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Add form validation for password match
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        
        if (password !== confirmPassword) {
            e.preventDefault();
            alert('Passwords do not match. Please try again.');
            return false;
        }
    });
});

// Add drag and drop functionality for image upload
const uploadContainer = document.querySelector('.upload-container');
const fileInput = document.querySelector('input[type="file"]');

uploadContainer.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadContainer.style.borderColor = '#d03f4d';
    uploadContainer.style.backgroundColor = '#f0f0f0';
});

uploadContainer.addEventListener('dragleave', () => {
    uploadContainer.style.borderColor = '#ccc';
    uploadContainer.style.backgroundColor = '#f9f9f9';
});

uploadContainer.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadContainer.style.borderColor = '#ccc';
    uploadContainer.style.backgroundColor = '#f9f9f9';
    
    if (e.dataTransfer.files.length) {
        fileInput.files = e.dataTransfer.files;
        previewImage({ target: { files: e.dataTransfer.files } });
    }
});
</script>
</body>
</html>