<!DOCTYPE html>
<html lang="en">

<head>
	<title>Student Registration</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="assets/core/images/icons/favicon.ico" />
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/fonts/iconic/css/material-design-iconic-font.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/animate/animate.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/animsition/css/animsition.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/vendor/daterangepicker/daterangepicker.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="assets/core/css/util.css">
	<link rel="stylesheet" type="text/css" href="assets/core/css/main.css">
	<!--===============================================================================================-->

</head>

<body style="background: #f5f6fa;">

	<div class="limiter">
		<div class="container-login100" style="background-color:bisque;">
			<div class="wrap-login100">
				 <div style="display: flex">
			     <a href="/">
			        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-arrow-left" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                     </svg>
                 </a>
                 <?php if ($this->session->flashdata('user')) : ?>

                    <p style="color:white;font-size: 18px;margin-left:20px"><?= $this->session->flashdata('user') ?></p>

			    <?php endif ; ?>

			    
			    <?php if ($this->session->flashdata('failure')) : ?>

    			    <p style="color:white;font-size: 18px;margin-left:20px"><?= $this->session->flashdata('failure') ?></p>
    			

		    	<?php endif ; ?>
                 </div>

				<form action="<?= base_url('student_registration') ?>" class="login100-form validate-form" method="POST" enctype="multipart/form-data">
					<div class="login100-form-logo">


						<br>
						<label class="btn btn-default">
							<p><input type="file" accept="image/*" name="StudentImg" id="StudentImg" onchange="loadFile(event)" style="display: none;" required></p>
							<p><label for="file" style="cursor: pointer; margin-top: 0px;margin-left: -17px;">Upload Image</label></p>
							<p><img id="output" width="100" /></p>

							<script>
								var loadFile = function(event) {
									var image = document.getElementById('output');
									image.src = URL.createObjectURL(event.target.files[0]);
								};
							</script>

					</div>



					<span class="login100-form-title p-b-10 p-t-27">
						Research Merger
					</span>
					<span class="login100-form-title m-l--6 m-t-5 mb-3" style="font-family: Poppins-Regular;font-size: 20px;position: relative;">Student Registration Form</span>

					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="FirstName" id="FirstName" placeholder="First Name" required>

					</div>

					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="LastName" id="LastName" placeholder="Last Name" required>

					</div>


					<div class="wrap-input100 validate-input">
						<input class="input100" type="email" name="Email" id="Email" placeholder="Email Address" required>

					</div>
					<div class="wrap-input100 validate-input">
						<input class="input100" type="password" name="Password" id="Password" placeholder="Password" required>

					</div>

					<div class="wrap-input100 validate-input">
						<input class="input100" type="tel" name="PhoneNumber" id="PhoneNumber" placeholder="Contact Details" required>

					</div>
					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="Affiliate" id="Affiliate" placeholder="Affiliated to" required>

					</div>
					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="Course" id="Course" placeholder="Course of Study (With name of degree)" required>

					</div>
					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="Interest" id="Interest" placeholder="Research Interest" required>

					</div>
					<div class="wrap-input100 validate-input">
						<input class="input100" type="text" name="Link" id="Link" placeholder="Link to Research work (If any)" required>

					</div>


					<div class="container-login100-form-btn">
						<button type="submit" onclick="stud_reg()" class="login100-form-btn mr-2">
							Register
						</button>
						<a class="login100-form-btn ml-2" href="<?= base_url('login') ?>">
							Login
						</a>
					</div>


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


	<div id="dropDownSelect1"></div>
	<!--===============================================================================================-->
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<!--===============================================================================================-->
	<script src="/assets/core/vendor/jquery/jquery-3.2.1.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/vendor/animsition/js/animsition.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/vendor/bootstrap/js/popper.js"></script>
	<script src="assets/core/vendor/bootstrap/js/bootstrap.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/vendor/select2/select2.min.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/vendor/daterangepicker/moment.min.js"></script>
	<script src="assets/core/vendor/daterangepicker/daterangepicker.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/vendor/countdowntime/countdowntime.js"></script>
	<!--===============================================================================================-->
	<script src="assets/core/js/main.js"></script>
	<!--===============================================================================================-->
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	
<script>
		const stud_reg = () => {
			let image = document.getElementById("StudentImg").value
			
			if(!image) {
				document.getElementById("StudentImg").focus()
				swal("Warning", "Please upload profile picture", "warning");
				return 
			}
		}
	</script>


</body>

</html>