<!DOCTYPE html>
<html lang="en">
  <?php include "head.php";
  
  include "dbconfig.php";
  ?>
  
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


   <body>

  <div class="container-fluid">
  <div class="col-md-3"></div>
    <div class="panel col-md-6" style="background-color:#ffffff; border-color:#047703; box-shadow: 5px 5px 5px #53A003;">
                    
                     <div class="panel-body">
                    
                  
                     <form method="post" id="driver_form" action="" enctype="multipart/form-data">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                           <h2>Driver Personal Details</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                             <div class="form-group">
                                 <label for="first_name">Driver Name</label>
                                 *<input type="text" id="first_name" name="first_name" required placeholder="Driver Name" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="phone">Phone</label>
                                * <input type="number" id="phone" name="phone" required placeholder="Phone" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="email">Email Address</label>
                                 *<input type="text" id="email" name="email" required placeholder="Email Address" class="form-control radius" />
                              </div> 
                              <div class="form-group">
                                 <label for="uplaod">Uplaod Photo</label>
                                 <input type="file" name="driver[]" id="post_code" placeholder="Post Code" class="form-control radius" />
                                 <div id="loader"><img src="images/image_loader.gif"/></div>
                              </div>
                           </div>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						    <div class="form-group">
                                 <label>Date of Birth</label>
                                  *<input type="text" id="dob" name="dob" placeholder="Date of Birth" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="address">Address</label>
                                 *<input type="text" id="address" name="address" required placeholder="Address" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="post_code">Post Code</label>
                                 *<input type="text" id="post_code" name="post_code" required placeholder="Post Code" class="form-control radius" />
                              </div>

                                <div class="form-group">
                                 <label for="post_code">Opening Balance</label>
                                 <input type="number" id="balance" name="balance" placeholder="0" class="form-control radius" />
                              </div>
                           </div>

                        </div>
                        <div id="error"></div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        
                           <h2>Driving Details</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
							  
                                 <label for="pco_number">PCO Badge Number</label>
                               *<input type="text" id="pco_number" name="pco_number" required placeholder="PCO Badge Number" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="post_code">PCO Plate Number</label>
                                * <input type="text" id="post_code" name="reg" value="" required placeholder="JS89 XYZ" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label for="reg_plate">Reg Plate</label>
                                 <input type="text" id="reg_plate" name="reg_plate" placeholder="Reg Plate" value="" class="form-control radius required" />
                              </div>
							  </div>
							   <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
							   <div class="form-group">
                                 <label for="d_l_number">PCO Badge Expiry Date</label>
                                 *<input type="text" id="pco_expiry" name="pco_expiry" required placeholder="PCO Badge Exp. Date" class="form-control radius" />
                              </div>
                               <div class="form-group">
                                 <label for="insurance_date">PCO Plate Expiry Date</label>
                                 <input type="text" id="tfl_expiry" name="tfl_expiry" placeholder="PCO Plate Expiry Date" value="" class="form-control radius required" />
                              </div>
							  
							   <div class="form-group">
                                 <label for="n_i_number">N. I. Number</label>
                                 <input type="text" id="n_i_number" name="n_i_number" placeholder="N. I. Number" class="form-control radius" />
                              </div>
                              
							  
                           </div>
						   
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                              <!--div class="form-group">
                                 <label for="uplaod">Badge Number</label>
                                  <input type="text" id="badge_number" name="badge_number" placeholder="Badge Number" class="form-control radius" />
                              </div>
                              <div class="form-group">
                                 <label>Badge Expiry Date</label>
                                  <input type="text" id="badge_expiry" name="badge_expiry" placeholder="Badge Number" class="form-control radius" />
                              </div-->
                             
                            
                 
               
            </div>
         </div>
      </div>


                        <div class="col-md-12">
                           <h2>Car Details</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                          
                              <div class="form-group">
                                 <label for="phone">Car Make</label>
                                 *<div class="form-group">
                                  <select name="make" style="width:70%;background-color:#053DD4; color:#ffffff; font-size:12px;" id="make" class="form-control">
                               <?php
                 
                  $skip_sql="SELECT id,make from vehicle_make order by id ASC";
				  
                  $t_result=mysqli_query($con,$skip_sql);
                  while($vehicle=mysqli_fetch_assoc($t_result))
                  {
                  ?>
                  
  <option style="padding:10px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;" value="<?php echo $vehicle['id']; ?>">
     <?php echo $vehicle['make'];?>
    </option>
            <?php
            
            }
            ?>
                                </select>
                              </div>
                              </div>
                              <div class="form-group">
                                 <label for="mot_date">MOT Expiry Date</label>
                                 *<input type="text" id="mot_date" name="mot_date" required placeholder="MOT Expiry Date" class="form-control radius" />
                              </div>
                             
                          
                           </div>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <div class="form-group">
                                 <label for="address">Color</label>
                                 <input type="text" id="address" name="color" placeholder="Black RED White" value="Black" class="form-control radius req" />
                              </div>
                               <div class="form-group">
                                 <label for="insurance_date">Insurance Expiry Date</label>
                                 <input type="text" id="insurance_date" name="insurance_date" placeholder="Insurance Expiry Date" value="" class="form-control radius required" />
                              </div>
                              
                              <!--div class="form-group">
                                 <label for="post_code">Passengers</label>
                                 <input type="text" id="passengers" name="passengers" placeholder="4" value="" class="form-control radius req" />
                              </div-->
 						</div>
                              
               <div class="form-group pull-right">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  <input type="submit" class="btn btn-primary" value="Add Driver" />
               </div> 
               </div>
               </form>
           
     
    </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
	$('#loader').hide();
});


// function to post data
$(document).ready(function (e) {
	 
	
	$("#driver_form").on('submit',(function(e) {
		//$('#driver_form').validate();
		e.preventDefault();
		$('#loader').show();
		var url11 = 'ajax/create_driver.php?'+new Date().getTime();
		$.ajax({
			
        	url: url11,
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    { 
			//alert(data);
			if(data=='success'){
		alert("Driver Added");
		$('#loader').delay(500).fadeOut("slow");
		var url1 = 'list_drivers.php?'+new Date().getTime();
		window.location.replace(url1);
			}else{
				alert("Driver Was not Added");
				$('#loader').delay(500).fadeOut("slow");
				}
					
				
			//$("#gallery").html(data);
			
				
				
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
function addcar() {
      var form=$('#new_car_form');
      var url11 = 'ajax/create_car.php?'+new Date().getTime();
                $.ajax({
                    type: "POST",
                    url: url11,
              data: form.serialize(),
                    success: function(data) {
						
                     alert("Car Added");
		   			
                }
            });
}
	
 $(document).ready(
 
 
 
      function () {
	   $('#mot_date').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
	   $('#insurance_date').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
	   $('#pco_expiry').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
      $('#tfl_expiry').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
	  $('#badge_expiry').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
	  
	  $('#dob').datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true, //this option for allowing user to select from year range
        dateFormat: 'dd/mm/yy'
      });
      }
    
    );		
		
</script>
   </body>
</html>
