<div class='form-container container-fluid py-5'>
	
	<div class='row position-relative'>
		<div class='col-lg-7 col-xl-6 col-md-9 col-sm-11 mx-auto'>
			
			<div class='border rounded-3 shadow'>
				<div class='p-4 p-sm-5 m-1'>
					
					<?php events::exec('notice'); ?>
					
					<form method='POST' enctype='multipart/form-data'>
						
						<div class='mb-4'>
						
							<legend class='border-bottom mb-3'> Personal Info </legend>
							
							<div class='row'>
								<div class='col-sm-6 mb-3'>
									<label class='form-label'>First Name</label>
									<input type='text' class='form-control' name='bio[firstname]' <?php __input('bio', 'firstname'); ?> required>
								</div>
								<div class='col-sm-6 mb-3'>
									<label class='form-label'>Last Name</label>
									<input type='text' class='form-control' name='bio[lastname]' <?php __input('bio', 'lastname'); ?> required>
								</div>
							</div>
							
							<div class='row'>
								<div class='col-sm-6 mb-3'>
									<label class='form-label'>Date Of Birth</label>
									<input type='date' class='form-control' name='bio[dob]' <?php __input('bio', 'dob'); ?> required>
								</div>
								<div class='col-sm-6 mb-3'>
									<label class='form-label'>Gender</label>
									<select class='form-control form-select' name='bio[gender]' <?php __input('bio', 'gender'); ?> required>
										<option value='male'>Male</option>
										<option value='female'>Female</option>
									</select>
								</div>
							</div>
							
							<div class='row'>
								<div class='col-sm-12 mb-3'>
									<label class='form-label'>Enrollment Number</label>
									<input type='text' class='form-control text-light bg-secondary cursor-not-allowed' name='enrid' readonly <?php __input('enrid', null, substr(mt_rand(), 0, 10)); ?>>
								</div>
							</div>
							
							<div class='row'>
								<div class='col-sm-12 mb-3 position-relative'>
									<input type='file' class='invisible position-absolute w-100' name='avatar' data-uss-image-preview='#image' required>
									<div class='text-center mb-3'>
										<img src='' id='image' class='img-fluid' width='160px'>
									</div>
									<button class='btn btn-primary w-100' type='button' id='btn-link'>Upload Image</button>
									<script>
										document.querySelector('#btn-link').onclick = function() {
											document.querySelector("[data-uss-image-preview='#image']").click();
										};
									</script>
								</div>
							</div>
							
						</div>
						
						<div class='mb-4'>
						
							<legend class='mb-3 border-bottom'>Contact Info</legend>
							
							<div class='row'>
								<div class='col-12 mb-3'>
									<label class='form-label'>Email</label>
									<input type='email' class='form-control' name='user[email]' <?php __input('user', 'email'); ?> required>
								</div>
							</div>
							
							<div class='row'>
								<div class='col-12 mb-3'>
									<label class='form-label'>Phone</label>
									<input type='number' class='form-control' name='bio[phone]' <?php __input('bio', 'phone'); ?> required>
								</div>
							</div>
						
						</div>
						
						<div class='mb-4'>
							
							<legend class='mb-3 border-bottom'>Institution Info</legend>
							
							<div class='row'>
								<div class='col-12 mb-3'>
									<label class='form-label'>Department</label>
									<select class='form-control form-select' name='department' <?php __input('department'); ?> required>
										<option class=''>-- select --</option>
										<?php
											if( $departments->num_rows ) {
												while( $department = $departments->fetch_assoc() ):
										?>
											<option value='<?php echo $department['id']; ?>'><?php echo $department['name']; ?></option>
										<?php  	
												endwhile; 
											};
										?>
									</select>
								</div>
							</div>
						
						</div>
						
						<div class='mb-4'>
							
							<legend class='mb-3 border-bottom'>Security Info</legend>
							
							<div class='row'>
								<div class='col-12 mb-3'>
									<label class='form-label'>Password</label>
									<input type='password' class='form-control' name='user[password]' required>
								</div>
								<div class='col-12 mb-3'>
									<label class='form-label'>Confirm Password</label>
									<input type='password' class='form-control' name='user[password2]' required>
								</div>
							</div>
						
						</div>
						
						<div class='mb-3'>
							<button class='btn btn-success btn-lg w-100'>
								Enroll Now
							</button>
						</div>
						
						<div class='text-center'>
					    	<a class='lead' href="<?php echo core::url( ROOT_DIR ); ?>" >Back to Login</a>
						</div>
						
					</form>
					
				</div>
			</div>
		
		</div>
	</div>
	
</div>