@extends('layouts.admin')
@section('content')
<section class="content-header">
	<h1>Add User</h1>
</section>
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box box-primary">
				<div class="box-body" style='padding:0px;!important;'>
					<div class="card wizard-card" data-color="azzure" id="wizard">
					   <form role="form" method="POST" action="{{url('admin/users/add/')}}" enctype="multipart/form-data" id="add_wizard_form">
						{{ csrf_field() }}
							<div class="wizard-navigation">
								<ul>
									<!--<li><a href="#details" data-toggle="tab">Personal Details</a></li>-->
									<li><a href="#offence" data-toggle="tab">Offence Details </a></li>
									<li><a href="#photos" data-toggle="tab">Photos </a></li>
									<li><a href="#victims" data-toggle="tab">Victims </a></li>
									<li><a href="#relatives" data-toggle="tab">Relatives </a></li>
									<li><a href="#criminal_affiliates" data-toggle="tab">Criminal Affiliates  </a></li>
									<li><a href="#gang1_affiliates" data-toggle="tab">Gang Affiliates  </a></li>
									
								</ul>
							</div>
							<div class="tab-content">
								<!--<div class="tab-pane" id="details">
									<div class="row">
										<div class="col-sm-6">
											<div class="form-group">
												<label>First Name <small>(required)</small></label>
												<input name="firstname" type="text" class="form-control" placeholder="First Name" >
											</div>
											<div class="form-group">
												<label>Last Name <small>(required)</small></label>
												<input name="lastname" type="text" class="form-control" placeholder="Last Name" >
											</div>
										</div>
										<div class="col-sm-4 col-sm">
										 <div class="picture-container">
											  <div class="picture">
												  <img src="{{asset('/img/placeholder.png')}}" class="picture-src" id="wizardPicturePreview" title=""/>
												  <input type="file" id="wizard-picture" multiple='multiple' name='offender_image'>
											  </div>
											  <h6>Choose Picture</h6>
										  </div>
										</div>
										<div class="col-sm-6">
										  <div class="form-group">
											<label>Middle Name</label>
											<input name="middle_name" type="text" class="form-control" id="middle_name" placeholder="Middle Name">
										  </div>
										</div>
                                  
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Date of Birth</label>
												<input type="text" class="form-control" id="from_date" name="dob" placeholder="Date Of Birth">
										  </div>
										</div>
										<div class="col-sm-6">
										  <div class="form-group">
											<label>Email Address <small>(required)</small></label>
											<input name="email_address" type="email" class="form-control" id="email_address" placeholder="Email Address" required=true>
										  </div>
										</div>
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Password</label>
												<input  type="password" class="form-control" id="password" name="dpasswordb" placeholder="Password" required=true>
										  </div>
										</div>
										<div class="col-sm-6">
										  <div class="form-group">
											  <label>Race</label>
												<select class="form-control" name='race'>
												<option disabled="" selected="">- Please Select -</option>
												<option>Asian </option>
												<option>Black</option>
												<option>Hispanic </option>
												<option>Native American </option>
												<option>Pacific Islander  </option>
												<option>White  </option>
											</select>
										  </div>
										</div>
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Officer</label>
												<select class="form-control" name='office_user_id' required=true>
												<option disabled="" selected="">- Please Select -</option>
												@foreach ($newOfficerSelect as $officer_key => $officers_val)
													<option value="{{$officer_key}}">{{$officers_val}}</option>
												@endforeach
											</select>
										  </div>
										</div>
										<div class="col-sm-6">
										  <div class="form-group">
											  <label>Address </label>
												<input type="text" class="form-control" id="address" name="address" placeholder="address">
										  </div>
										</div>
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Mobile Number. 1 </label>
												<input type="number" class="form-control" id="mobile_number" name="mobile_number1" placeholder="Mobile Number. 1" maxlength="12">
										  </div>
										</div>

										<div class="col-sm-6">
										  <div class="form-group">
											  <label>Mobile Number. 2 </label>
												<input type="number" class="form-control" id="mobile_number2" name="mobile_number2" placeholder="Mobile Numner 2" maxlength="12">
										  </div>
										</div>
								  
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Offender  Number</label>
												<input type="number" class="form-control" id="offender_number" name="offender_number" placeholder="Offender Number" maxlength="12">
										  </div>
										</div>

										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											<label>Blood Group</label>
											<select name="blood_group" id="blood_group" class="form-control">
												<option>- Please Select - </option>
												<option>O-</option>
												<option>O+</option>
												<option>A-</option>
												<option>A+</option>
												<option>B-</option>
												<option>B+</option>
												<option>AB-</option>
												<option>AB+</option>
												
											</select>
											
										  </div>
										</div>
										
										
										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Mother Name </label>
												<input type="text" class="form-control" id="mother_name" name="mother_name" placeholder="Mother Name">
										  </div>
										</div>

										<div class="col-sm-6 col-sm">
										  <div class="form-group">
											  <label>Father Name</label>
												<input type="text" class="form-control" id="father_name" name="father_name" placeholder="Father Name">
										  </div>
										</div>
										<div class="col-sm-6">
										  <div class="form-group">
											<label>Gender</label>
											</br>
												Male
											  <input type="radio" class="" name="gender" value="male" checked='true' >
											  Female
											  <input type="radio" class="" name="gender" value="female">
										   </div>
										</div>
									
									</div>
								</div> -->
								
								
								
								<div class="tab-pane" id="offence">
									 <div class="col-sm-6 col-sm">
										  <div class="form-group">
											<label>Code Section</label>
											<input name="code_section" type="text" class="form-control" id="code_section" placeholder="Code Section">
										  </div>
									  </div>
								  
									  <div class="col-sm-6">
										  <div class="form-group">
											<label>Social Security No</label>
											<input name="s_s_no" type="text" class="form-control" id="social_security_no" placeholder="Social Security No">
										  </div>
									  </div>
								  
									   <div class="col-sm-6">
										  <div class="form-group">
											<label>Incarceration No</label>
											<input name="incarceration_no" type="text" class="form-control" id="incarceration" placeholder="Incarceration No">
										  </div>
									  </div>
								  
									   <div class="col-sm-6">
										  <div class="form-group">
											<label>Case Number </label>
											<input name="case_number" type="text" class="form-control" id="case_number" placeholder="Case Number">
										  </div>
									  </div>
								  
									  <div class="col-sm-6">
										  <div class="form-group">
											<label>Offence </label>
											<input name="offence" type="text" class="form-control" id="offence" placeholder="Offence">
										  </div>
									  </div>
								  
									  <div class="col-sm-6">
										  <div class="form-group">
											<label>Imprisonment Start </label>
											<input name="imprisonment_start" type="text" class="form-control" id="imprisonment_start" placeholder="Imprisonment Start">
										  </div>
									  </div>
								  
									  <div class="col-sm-6">
										  <div class="form-group">
											<label>Imprisonment  End </label>
											<input name="imprisonment_end" type="text" class="form-control" id="imprisonment_end" placeholder="Imprisonment End">
										  </div>
									  </div>
                                
								</div>
							
								 <div class="tab-pane" id="photos">
									<div class="row" style="position:relative;">
										<h4 class="info-text" style="margin:0;margin-bottom:20px;"> You can add more Image  </h4>
										<input id="file_input" type="file" name="files[]" style="position: absolute; top: 0;left: 36px;">
											
									</div>
								</div>
								
								<div  class="tab-pane" id="victims">
									<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add</button>
									
									
									<!-- Modal -->
									  <div class="modal fade" id="myModal" role="dialog">
										<div class="modal-dialog">
										
										  <!-- Modal content-->
										  <div class="modal-content">
											<div class="modal-header">
											  <button type="button" class="close" data-dismiss="modal">&times;</button>
											  <h4 class="modal-title">Add More Victims</h4>
											</div>
											<div class="modal-body">
												<form class="form-inline" action="javascript:void(0);" id="first_form" onsubmit="return(validateasdsad());" enctype="multipart/form-data">
												 
													<div class="form-group">
														<label for="victims_name">Name:</label>
														<input type="text" class="form-control" id="victims_name">
													</div>
													<div class="form-group">
														<label for="victims_file">Profile Image:</label>
														
														<input type='file' accept='image/*' onchange='openFile(event)'><br>
														<img id='output' name="victims_file[]" ,id='victims_file'>
													</div>
													<div class="form-group">
														<label for="victims_m_number">Mobile Number :</label>
														<input type="text" class="form-control" id="victims_m_number" name="victims_m_number">
													</div>													
													<div class="form-group">
														<label for="victims_email">Email address:</label>
														<input type="email" class="form-control" id="victims_email" name="victims_email">
													</div>
													<div class="form-group">
														<label for="victims_address">Address :</label>
														<input type="text" class="form-control" id="victims_address">
													</div>
												 
												  <button type="button" class="btn btn-default first_form">Submit</button>
												</form>
											</div>
											<div class="modal-footer">
											  <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
											</div>
										  </div>
										  
											<script>
											  var openFile = function(event) {
												var input = event.target;

												var reader = new FileReader();
												reader.onload = function(){
												  var dataURL = reader.result;
												  var output = document.getElementById('output');
												  output.src = dataURL;
												};
												reader.readAsDataURL(input.files[0]);
											  };
											</script>
										</div>
									  </div>
									  <div id="add_victims_ajax_demo">
										<table id="add_victims_ajax" width='100%' cellpadding="2" cellspaing="2" border='1' style='margin-top:20px;'>
											<tr>	
												<td>Profile Image </td>
												<td>Name </td>
												<td>Mobile  Number </td>
												<td>Email Address </td>
												<td>Address </td>
												
											</tr>
										</table>
										</div>
									
									
									
									
								</div>
							
								<div class="tab-pane" id="relatives">
									<div class="row">
										<div class="col-sm-6">
											<div class="form-group">
												<label>First Name <small>(required)</small></label>
												<input name="firstname" type="text" class="form-control" placeholder="First Name" value="asdsadsad">
											</div>
											<div class="form-group">
												<label>Last Name <small>(required)</small></label>
												<input name="lastname" type="text" class="form-control" placeholder="Last Name" value="sadsadsadd">
											</div>
										</div>
									</div>
								</div>
								
								
								<div class="tab-pane" id="criminal_affiliates">
									<div class="row">
										<div class="col-sm-6">
											<div class="form-group">
												<label>First Name <small>(required)</small></label>
												<input name="firstname" type="text" class="form-control" placeholder="First Name" value="asdsadsad">
											</div>
											<div class="form-group">
												<label>Last Name <small>(required)</small></label>
												<input name="lastname" type="text" class="form-control" placeholder="Last Name" value="sadsadsadd">
											</div>
										</div>
									</div>
								</div>
								
								<div class="tab-pane" id="gang1_affiliates">
									<div class="row">
										<div class="col-sm-6">
											<div class="form-group">
												<label>First Name <small>(required)</small></label>
												<input name="firstname" type="text" class="form-control" placeholder="First Name" value="asdsadsad">
											</div>
											<div class="form-group">
												<label>Last Name <small>(required)</small></label>
												<input name="lastname" type="text" class="form-control" placeholder="Last Name" value="sadsadsadd">
											</div>
										</div>
									</div>
								</div>
							
							
							
							</div>
							
							
							
							
							<div class="wizard-footer">
								<div class="pull-right">
									<input type='button' class='btn btn-next btn-fill btn-info btn-wd btn-sm' name='next' value='Next' />
									<input type='submit' class='btn btn-finish btn-fill btn-info btn-wd btn-sm final_form' name='finish' value='Finish' />
								</div>
								<div class="pull-left">
									<input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Previous' />
								</div>
								<div class="clearfix"></div>
							</div>
							
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/css/gsdk-bootstrap-wizard.css') }}" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="{{ asset('assets/css/demo.css') }}" rel="stylesheet" />

<script src="{{ asset('assets/js/jquery.bootstrap.wizard.js') }}" type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="{{asset('assets/js/gsdk-bootstrap-wizard.js')}}"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>


<script type="text/javascript">
   $(document).ready(function(){
		
		$('.final_form').click(function(){
			
			$("#add_wizard_form").submit();
		});
	
		$('.first_form').click(function(){
			victims_name = $('#victims_name').val();
			victims_m_number = $('#victims_m_number').val();
			victims_email = $('#victims_email').val();
			victims_address = $('#victims_address').val();
			profile_image = $('#output').attr('src');
			
			var html = "<tr>";
			html +="<td><img width='100' height='100' id='output' src='"+profile_image+"'><input type='text' name='v_files[]' value='"+profile_image+"'></td>"; 
			html +="<td>"+victims_name+"<input type='text' name='v_name[]' value='"+victims_name+"'></td>";
			html +="<td>"+victims_m_number+"<input type='text' name='v_number[]' value='"+victims_m_number+"'></td>";
			html +="<td>"+victims_email+"<input type='text' name='v_email[]' value='"+victims_email+"'></td>";
			html +="<td>"+victims_address+"<input type='text' name='v_address[]' value='"+victims_address+"'></td>";
			html +="</tr>";
			
			$('#add_victims_ajax').append(html);
			return false;
		});   
   });
</script>
@endsection