@extends('layouts.app')
@section('title', 'Home')
@push('styles')
<style type="text/css">
	#imageUpload
	{
	    display: none;
	}

	#profileImage
	{
	    cursor: pointer;
	}

	#profile-container {
	    width: 150px;
	    height: 150px;
	    overflow: hidden;
	}

	#profile-container img {
	    width: 150px;
	    height: 150px;
	}
</style>
@endpush
@section('content')

	<div class="pmd-card pmd-card-default pmd-z-depth">
	    <div class="pmd-card-title">
	    	<h2 class="pmd-card-title-text text-center text-uppercase">Government Mankunwar Bai Arts & Commerce Autonomus College for Women, Jabalpur</h2>
	    	<div class="text-center">(NAAC ACCREDITED 'A' GRADE)</div>
	    	<div class="text-center"><strong >EXAM FORM</strong></div>
	    </div>
	     <div class="pmd-card-body">
	        <div class="pmd-section">
	        	
                <h3 class="text-center"> GENERAL INFORMATION </h3>
                
                <div class="row">
	                <div class="col-md-6 col-xs-6 col-sm-6">
	        			<div class="form-group row">
	        	            <label class="control-label col-4">TYPE OF STUDEN</label>
	        	            <div class="col-4"> 
	        	            	<select name="type_of_student" class="form-control">
	        	            		<option value="">Choose...</option>
	        	            		<option value="REG">REGULAR</option>
	        	            		<option value="ATKT">ATKT</option>
	        	            		<option value="EX">EX STUDENT</option>
	        	            	</select>
	        	            </div>
	        	        </div> 
	                </div>

	                <div class="col-md-6 col-xs-6 col-sm-6">
	                	<div id="profile-container">
	                	   <img id="profileImage" src="https://via.placeholder.com/150" />
	                	</div>
	                	<input id="imageUpload" type="file" 
	                	       name="profile_photo" placeholder="Photo" required="" capture>

	                </div>
	            </div>

                <div class="row">
                	<div class="col-md-6 col-xs-6 col-sm-6">1</div>
                	<div class="col-md-6 col-xs-6 col-sm-6">2</div>
                </div>
	        </div>
	    </div>
	</div>

@endsection

@push('scripts')
<script type="text/javascript">
	$("#profileImage").click(function(e) {
	    $("#imageUpload").click();
	});

	function fasterPreview( uploader ) {
	    if ( uploader.files && uploader.files[0] ){
	          $('#profileImage').attr('src', 
	             window.URL.createObjectURL(uploader.files[0]) );
	    }
	}

	$("#imageUpload").change(function(){
	    fasterPreview( this );
	});
</script>
@endpush