@extends('backend.school_admin.layout_app')

@section('page_cs')

<style type="text/css">
	* {margin: 0; padding: 0;}
	html {
		height: 100%;
		/*Image only BG fallback*/
		
		/*background = gradient + image pattern combo*/
		background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
	}
	label{
		font-weight: 0px;
		padding-top: 7px;
		padding-left: 10px;
	}
	#message label{
		font-weight: 0px;
		padding-top: 7px;
		padding-left: 10px;
		color: red;	
	}
	#sdtForm {
		width: 100%;
		padding: 10px;
		text-align: center;
		position: relative;
	}
	#sdtForm fieldset {
		background: white;
		border: 0 none;
		border-radius: 3px;
		box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
		padding: 0px 30px;
		box-sizing: border-box;
		width: 95%;
		margin: 0% 2%;
		
		/*stacking fieldsets above each other*/
		position: inherit;
	}
	/*Hide all except first fieldset*/
	#sdtForm fieldset:not(:first-of-type) {
		display: none;
	}
	/*inputs*/
	#sdtForm input, #sdtForm textarea {
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-bottom: 10px;
		width: 100%;
		box-sizing: border-box;
		color: #2C3E50;
		font-size: 13px;
	}
	/*buttons*/
	.button {
		width: 100px;
		background: #605CA8;
		font-weight: bold;
		color: white;
		border: 0 none;
		border-radius: 1px;
		cursor: pointer;
		padding: 10px 5px;
		margin: 15px 5px;
		}
	u, ins {
	    text-decoration: underline;
	}
	select {
		padding: 15px;
	    border: 1px solid #ccc;
	    border-radius: 3px;
	    margin-bottom: 10px;
	    width: 100%;
	    box-sizing: border-box;
	    font-family: montserrat;
	    color: #2C3E50;
	    font-size: 13px;
	    -webkit-appearance: textfield;
	    background-color: white;
	    -webkit-rtl-ordering: logical;
	    user-select: text;
	    cursor: auto;
	}
	.form-control {
	    display: block;
	    width: 100%;
	    height: 45px;
	    padding: 4px 12px;
	    font-size: 13px;
	    line-height: 1.42857143;
	    color: #555;
	    background-color: #fff;
	    background-image: none;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
	.content-wrapper{
		min-height: 1050px !important;
	}
	table th{
		text-align: center;
	}
	optgroup { font-size:14px; }
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	  
	   font-size: 11pt; 
	}
	::-moz-placeholder { /* Firefox 19+ */
	  
	   font-size: 11pt; 
	}
	:-ms-input-placeholder { /* IE 10+ */

	   font-size: 11pt; 
	}
	:-moz-placeholder { /* Firefox 18- */

	   font-size: 11pt;
	}
	messages{
		color:red;
	}
</style>
@endsection
@section('content')
<form id="sdtForm" name="sdtForm" action="{{ url('/') }}/schoolAdmin/manageStudent/store" method="POST" enctype="multipart/form-data">
{!! csrf_field() !!}  
  <!-- progressbar -->

  <!-- fieldsets -->
	<fieldset>
		<h3 class="fs-title" style="color:#605CA8;"><strong>Basic Information</strong> </h3>
	    <div class="tab-pane active" id="tab1" style="margin-bottom: 0">
	        <div class="form-body">
	        	<div class="row">
	        	
	        		<div class="col-md-2">
	        			<label >Name</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="text" name="student_name" required />
	        		</div>

	        		<div class="col-md-2">
	        			<label >Name (বাংলা)</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="text" name="student_name_bangla" />
	        		</div>
	        		
	        	</div>
	        	<input type="hidden" name="school_row_id" value="1" />
	        	<div class="row">
	        		<div class="col-md-2">
	        			<label >Student Institution</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="text" required="required" name="institute_name" />
                    </div>

	        		<div class="col-md-2">
	        			<label >Class</label>
	        		</div>
	        		<div class="col-md-4">
	        			<select class="form-control classes" name="academic_class" required>
                            <option value="0">Select Class</option>
                            @foreach($data['class_list'] as $class)
                                <option value="{{ $class->class_row_id }}">{{ $class->class_name }}</option>
                            @endforeach
                        </select>
	        		</div>
	        		
	        	</div>
	        	
	        	<div class="row">
	        		<div class="col-md-2">
	        			<label >Section</label>
	        		</div>
	        		<div class="col-md-4">
	        			<select class="form-control sections" name="academic_section">
                            
                        </select>
	        		</div>

	        		<div class="col-md-2">
	        			<label >Contact No</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="text" name="student_phone"/>
	        		</div>

	        	</div>
			    
			    <div class="row">
			    	<div class="col-md-2">
	        			<label >Blood Group</label>
	        		</div>
	        		<div class="col-md-4">
	        			<select class="form-control" name="student_blood_group">
                            @foreach($data['blood_group'] as $key=>$val)
                                <option value="{{ $key }}">{{ $val }}</option>
                            @endforeach
                        </select>
	        		</div>

			    	<div class="col-md-2">
	        			<label >Gender</label>
	        		</div>
	        		<div class="col-md-4">
	        			<select id="gender" class="form-control select2 student_gender" name="student_gender" required="required">
			            	<option value="">Select</option>
						    <option value="1">Male</option>
						    <option value="2">Female</option>
						</select>
	        		</div>
	        	</div>

	        	<div class="row">
			    	<div class="col-md-2">
		    			<label >Father's Name</label>
		    		</div>
					<div class="col-md-4">
						<input type="text" name="father_name" />
					</div>
					<div class="col-md-2">
		    			<label >Mother's Name</label>
		    		</div>
					<div class="col-md-4">
						<input type="text" name="mother_name"/>
					</div>
				</div>

			   
			    <div class="row">
			    	<div class="col-md-2">
	        			<label >Religion</label>
	        		</div>
	        		<div class="col-md-4">
	        			<select class="form-control" name="student_religion">
                            @foreach($data['religion'] as $key=>$val)
                                <option value="{{ $key }}">{{ $val }}</option>
                            @endforeach
                        </select>
	        		</div>
			    	<div class="col-md-2">
	        			<label >Nationality</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="text" name="nationality" value="Bangladeshi"/>
	        		</div>
	        	</div>

			    <div class="row">
			    	<div class="col-md-2">
	        			<label >Date Of Birth</label>
	        		</div>
	        		<div class="col-md-4">
	        			 <div class="form-group">
			                <div class="input-group date">
			                  <div class="input-group-addon">
			                    <i class="fa fa-calendar"></i>
			                  </div>
			                  <input type="text" class="form-control pull-right" name="dob" id="datepicker" placeholder="Select" style="margin-bottom: 0px;">
			                </div>
			                <!-- /.input group -->
			              </div>
	        		</div>

	        		<div class="col-md-2">
	        			<label >Date Of Admission</label>
	        		</div>
	        		<div class="col-md-4">
	        			<div class="form-group">
			                <div class="input-group date">
				                <div class="input-group-addon">
				                	<i class="fa fa-calendar"></i>
				                </div>
			                	<input type="text" class="form-control pull-right" name="admission_date" id="datepicker2" style="margin-bottom: 0px;" required>
			                </div>
			                <!-- /.input group -->
			            </div>
	        		</div>

	        		
	        	</div>

				<div class="row">
	        		<div class="col-md-2">
	        			<label >Student photo</label>
	        		</div>
	        		<div class="col-md-4">
	        			<input type="file" id="exampleInputFile" name="student_photo">
	                    <div class="clearfix margin-top-10" style="margin-bottom: 10px;">
							<span class="label label-danger">NOTE!</span> Image size 300x300 preferable. 
						</div>
	        		</div>

	        		<div class="col-md-2">
		    			<label >Email</label>
		    		</div>
					<div class="col-md-4">
						<input type="text" name="student_email" placeholder="Email" />
					</div>						
	        	</div>

				<div class="row">
			    	<div class="col-md-2">
		    			<label >Password</label>
		    		</div>
					<div class="col-md-4">
						<input type="password" class="form-control" name="student_password" id="student_password" placeholder="Password"/>
					</div>

				</div>

	        </div>
	    </div>
	    
		<button type="submit" class="button">Submit</button>
	</fieldset>
</form>
@endsection
@section('page_js')
<script src="{{ url('/')}}/public/js/jquery.easing.1.3.js"></script>
<script src="{{ url('/')}}/public/js/bootstrap-datepicker.min.js"></script>	
<script src="{{ url('/')}}/public/js/jquery.validate.min.js"></script>	
<script type="text/javascript">

</script>
<script type="text/javascript">
	$("#datepicker").datepicker({format: 'yyyy-mm-dd'});
	$("#datepicker2").datepicker({format: 'yyyy-mm-dd'});
	 
</script>


<script type="text/javascript">
$(document).ready(function() {
	$('.classes').change(function(){
        $('.sections').empty();
        var classid = $(this).val();

        $.ajax({
            url: "{{ url('getSections/') }}"+ '/'+ classid,
            type: "GET",
            dataType: "html",
            success: function(data){
                $('.sections').append(data);
            }
        });
    });
});
</script>
<div class="daterangepicker dropdown-menu ltr show-calendar opensleft"><div class="calendar left"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_start" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time" style="display: none;"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="calendar right"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_end" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time" style="display: none;"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="ranges"><div class="range_inputs"><button class="applyBtn btn btn-sm btn-success" disabled="disabled" type="button">Apply</button> <button class="cancelBtn btn btn-sm btn-default" type="button">Cancel</button></div></div></div><div class="daterangepicker dropdown-menu ltr show-calendar opensleft"><div class="calendar left"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_start" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="calendar right"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_end" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="ranges"><div class="range_inputs"><button class="applyBtn btn btn-sm btn-success" disabled="disabled" type="button">Apply</button> <button class="cancelBtn btn btn-sm btn-default" type="button">Cancel</button></div></div></div><div class="daterangepicker dropdown-menu ltr opensleft"><div class="calendar left"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_start" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time" style="display: none;"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="calendar right"><div class="daterangepicker_input"><input class="input-mini form-control" type="text" name="daterangepicker_end" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i><div class="calendar-time" style="display: none;"><div></div><i class="fa fa-clock-o glyphicon glyphicon-time"></i></div></div><div class="calendar-table"></div></div><div class="ranges"><ul><li data-range-key="Today">Today</li><li data-range-key="Yesterday">Yesterday</li><li data-range-key="Last 7 Days">Last 7 Days</li><li data-range-key="Last 30 Days">Last 30 Days</li><li data-range-key="This Month">This Month</li><li data-range-key="Last Month">Last Month</li><li data-range-key="Custom Range">Custom Range</li></ul><div class="range_inputs"><button class="applyBtn btn btn-sm btn-success" disabled="disabled" type="button">Apply</button> <button class="cancelBtn btn btn-sm btn-default" type="button">Cancel</button></div></div></div><div class="colorpicker dropdown-menu colorpicker-hidden colorpicker-with-alpha colorpicker-right"><div class="colorpicker-saturation"><i><b></b></i></div><div class="colorpicker-hue"><i></i></div><div class="colorpicker-alpha"><i></i></div><div class="colorpicker-color"><div></div></div><div class="colorpicker-selectors"></div></div><div class="colorpicker dropdown-menu colorpicker-hidden colorpicker-with-alpha colorpicker-right"><div class="colorpicker-saturation"><i><b></b></i></div><div class="colorpicker-hue"><i></i></div><div class="colorpicker-alpha"><i></i></div><div class="colorpicker-color"><div></div></div><div class="colorpicker-selectors"></div></div></body></html>

</script>

@endsection