<!DOCTYPE html>
<html lang="en">
  <?php include "head.php";
  
  include "dbconfig.php";
  date_default_timezone_set ("Europe/London");
  ?>
  
  <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>
 <style>

.empty_field_warning {

	 border: solid 2px #FF0000;
	
}
  
</style>
   <body>

  <div class="container-fluid">
  <div class="col-md-3"></div>
    <div class="panel col-md-6" style="background-color: #ffff;box-shadow: 5px 5px 5px #033182;">
                    
                     <div class="panel-body">
                    
                  
                     <form method="post" name="new_booking_form" id="new_booking_form" action="">
                     
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        
                          <h2>New Booking Form</h2>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                              <!--div class="form-group">
                                 <label for="ad">AD &nbsp; </label>
								 <input type="radio" name="ad_invoice" id="ad" value="0" checked="checked" >
							 </div-->
							 
                             <div class="form-group">
                                 <label for="first_name">*Customer Name</label>
                                 
                                 <input type="text" id="company_name" name="company_name" required placeholder="Enter Full Name" class="form-control"  tabindex="1" autocomplete="off" >
                                 <div style="color:#F40A0E; font-size:16px;" id="errorwarn"></div>
                                 <input type="hidden" name="old_customer_id" id="old_customer_id" required placeholder="xxx" />
									<div id="suggesstion-box"></div>
                              </div>
                              <div class="form-group">
                                 <label for="phone">Phone</label>
                                 <input type="text" id="phone" name="phone" placeholder="Phone" class="form-control radius" tabindex="3" />
                              </div>
                              <div class="form-group">
                                 <label for="email">Email Address</label>
                                 <input type="text" id="email" name="email" placeholder="Email Address" class="form-control radius" tabindex="5" />
                              </div>
							  <div class="form-group">
                                 <label for="client_reference">Client Reference</label>
                                 <input type="text" id="client_reference" name="client_reference" placeholder="Client Reference" class="form-control radius" tabindex="7" />
                              </div>
                             </legend>
                           </div>
                           <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						      <!--div class="form-group">	 
								 <label for="non_ad">Non-AD &nbsp; </label>
								 <input type="radio" name="ad_invoice" id="non_ad" value="1">
							</div-->	
                              <div class="form-group">
                                 <label for="address">Address</label>
                                 <input type="text" id="customer_address1" name="customer_address1" placeholder="Enter Address" class="form-control"  tabindex="2" >
                              </div>
                              <div class="form-group">
                                 <label for="post_code">Post Code</label>
                                 <input type="text" id="post_code" name="post_code" placeholder="Post Code" class="form-control radius" tabindex="4" />
                              </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" tabindex="6" />
                              </div>

                           </div>

                        </div>
                        <div class="col-md-12">
                        
                           <h2>Passenger Details</h2>
                      
                              <div class="form-group col-md-4">
                                 <label for="pco_number">*Passenger Name</label>
                                <input type="text" required placeholder="Passenger Name" name="passenger_name" id="passenger_name" class="form-control" autocomplete="off" tabindex="7" >
                                <input type="hidden" name="contact_id" id="contact_id" required placeholder="xxx" />
									<div id="passenger-suggesstion-box"></div>
                              </div>
                             
                              <div class="form-group col-md-4">
                                 <label for="d_l_number">Phone Number</label>
                                 <input type="text" placeholder="078-xxxx-xxxx" name="contact_mobile" id="contact_mobile" class="form-control" tabindex="8" >
                              </div>
                           
                          

                              <div class="form-group col-md-4">
                                 <label for="uplaod">Email</label>
                                 <input type="text" placeholder="abc@outlook" name="contact_email" id="contact_email" class="form-control" tabindex="9" >
                              </div>  
							   </div>
    				  <div class="col-md-12" >
             
							   <div class="form-group col-md-4">
                                 <label for="no_of_passengers">No. of Passengers</label>
                                 <input type="text" placeholder="No. of Passengers" name="passengers" id="passengers" class="form-control" tabindex="9" >
                              </div>  
							  
							  
							   <div class="form-group col-md-4">
                                 <label for="no_of_bags">No. of Bags</label>
                                 <input type="text" placeholder="No. of Bags" name="bags" id="bags" class="form-control" tabindex="9" >
                              </div>  
							    
        				 </div>
    				  <div class="col-md-12" >
             
             			<!-- show a loader when click on submit button -->
                        <div id="loader"><img src="images/image_loader.gif"></div>
                    
                        
                           <h2>Pickup Details</h2>
              <div class="col-md-4"> <label for="area">Pickup Date</label>
   <?php
					 $end_date = date('Y-m-d',(strtotime('21 day', time())));
					 $pickup_date = date("d/m/Y", strtotime('0 day', time()));
					  //$pickup_date = date("Y/m/d", strtotime('0 day', time()));
  					?>
                       
  <input required type="text" style="width:100%;" value="<?php echo $pickup_date;?>" class="form-control" required placeholder="Select a Date" name="pickup_date" id="pickup_date"  tabindex="10" >
                      </div>
                        <div class="col-md-2"> <label for="area">Hours</label>
   <select required id="hours" name="hours" class="form-control" tabindex="11" >
                            <option value="01">01</option>
                            <option value="02">02</option>
							 <option value="03">03</option>
                            <option value="04">04</option>
							 <option value="05">05</option>
                            <option value="06">06</option>
							 <option value="07">07</option>
                            <option value="08">08</option>
							 <option value="09">09</option>
                            <option value="10">10</option>
							 <option value="11">11</option>
                            <option value="12">12</option>
							 <option value="13">13</option>
                            <option value="14">14</option>
							 <option value="15">15</option>
                            <option value="16">16</option>
							 <option value="17">17</option>
                            <option value="18">18</option>
							 <option value="19">19</option>
                            <option value="20">20</option>
							 <option value="21">21</option>
                            <option value="22">22</option>
							 <option value="23">23</option>
                            <option value="00">00</option>
                          </select></div>
                          <div class="col-md-2">
                          <label for="area">Minutes</label>
                          <select required style="width:100%;" id="mins" name="mins" class="form-control" tabindex="12" >
                            <option value="00">00</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
							 <option value="03">03</option>
                            <option value="04">04</option>
							 <option value="05">05</option>
                            <option value="06">06</option>
							 <option value="07">07</option>
                            <option value="08">08</option>
							 <option value="09">09</option>
                            <option value="10">10</option>
							 <option value="11">11</option>
                            <option value="12">12</option>
							 <option value="13">13</option>
                            <option value="14">14</option>
							 <option value="15">15</option>
                            <option value="16">16</option>
							 <option value="17">17</option>
                            <option value="18">18</option>
							 <option value="19">19</option>
                            <option value="20">20</option>
							 <option value="21">21</option>
                            <option value="22">22</option>
							 <option value="23">23</option>
                            <option value="24">24</option>
							 <option value="25">25</option>
                            <option value="26">26</option>
							 <option value="27">27</option>
                            <option value="28">28</option>
							 <option value="29">29</option>
                            <option value="30">30</option>
							 <option value="31">31</option>
                            <option value="32">32</option>
							  <option value="33">33</option>
                            <option value="34">34</option>
							 <option value="35">35</option>
                            <option value="36">36</option>
							 <option value="37">37</option>
                            <option value="38">38</option>
							 <option value="39">39</option>
                            <option value="40">40</option>
							 <option value="41">41</option>
                            <option value="42">42</option>
							 <option value="43">43</option>
                            <option value="44">44</option>
							 <option value="45">45</option>
                            <option value="46">46</option>
							 <option value="47">47</option>
                            <option value="48">48</option>
							 <option value="49">49</option>
                            <option value="50">50</option>
							 <option value="51">51</option>
                            <option value="52">52</option>
							 <option value="53">53</option>
                            <option value="54">54</option>
							 <option value="55">55</option>
                            <option value="56">56</option>
							 <option value="57">57</option>
                            <option value="58">58</option>
							 <option value="59">59</option>
                            <option value="60">60</option>
							
						   
                          </select>
                          
                          </div>
						  <div class="form-group col-md-4">
                                 <label for="uplaod">Flight No.</label>
                                 <input type="text" placeholder="Sg123" name="flight_no" id="flight_no" class="form-control" tabindex="13" >
                              </div> 
                      <div class="clearfix"></div>
               <div class="col-md-6" style="margin-top:10px;"> <label for="area">Pickup Address</label>
                       
                         <input name="pickup_address" autocomplete="on" id="pickup_address" type="text" id="drop_address" value="LHR" required placeholder="Enter Address" class="form-control"  tabindex="13" >
                         
                   </div>
                
        <div class="col-md-6" style="margin-top:10px;"> <label for="area">Pickup Postcode</label>
        <input name="pickup_post_code" id="pickup_post_code" autocomplete="on" type="text" id="drop_post_code" placeholder="12G 45D" class="form-control"   tabindex="14" >
        </div>
       	</div>

			<div class="col-md-12" >
             
             
                        
                           <h2>Drop off Details</h2>

									 <div class="col-md-6"> <label for="area">Address</label>
        <input name="drop_address" autocomplete="on" type="text" id="drop_address" required placeholder="Enter Address" class="form-control"  tabindex="15" >
        </div>
 <div class="col-md-6"> <label for="area">Postcode</label>
        <input name="drop_post_code" autocomplete="on" type="text" id="drop_post_code" placeholder="12G 45D" class="form-control"  tabindex="16" >
        </div>
			 
             
            
         </div>
            
                    <div class="col-md-12" >
                    <h2>Booking Details</h2>
                    <div class="col-md-3"> <label for="area">Start Date</label>
   <?php
					 $start_date = date('Y-m-d',(strtotime('21 day', time())));
					 $start_date = date("d/m/Y", strtotime('0 day', time()));
  					?>
                       
  <input required type="text" style="width:100%;" value="<?php echo $pickup_date;?>" class="form-control" required placeholder="Select a Date" name="start_date" id="start_date" onchange="cal()"  tabindex="17" >
                      </div>
                      
                        <div class="col-md-3"> <label for="area">End Date</label>
   <?php
					 $end_date = date('Y-m-d',(strtotime('21 day', time())));
					 $end_date = date("d/m/Y", strtotime('0 day', time()));
  					?>
                       
  <input required type="text" style="width:100%;" value="<?php echo $pickup_date;?>" class="form-control" required placeholder="Select a Date" name="end_date" id="end_date" onchange="cal()"  tabindex="18" >
                      </div>
                      <div class="col-md-2"> <label for="area">Days</label>
            <input name="days" type="text" id="days" value="" class="form-control" >
            </div>
            <div class="col-md-4"> 
            Vehicle 
            <select name="vehicle" style="width:100%;background-color:#053DD4; color:#ffffff;" id="vehicle" class="form-control" tabindex="19" >
                               <?php
                 
                  $skip_sql="SELECT * 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;" <?php if($vehicle['id']==5){echo 'selected';}?> value="<?php echo $vehicle['id']; ?>">
     <?php echo $vehicle['make']; ?>
    </option>
            <?php
            
            }
            ?>
                                </select>
            </div>
            		</div>	 
    
     <div class="col-md-12" >
            			 <h2>Additional Details</h2>
	<div class="form-group col-md-4">
						 <label for="area">Job Type</label>
						  <select class="form-control" name="job_type" tabindex="20" >
						  <option value="Account">Account</option>
						  <option value="Cash">Cash</option>
						  <!--option value="Paid">Paid</option-->
						  
						  </select>
						</div>		
						
 
     <div class="form-group col-md-4">
  <label for="area">Rate</label>
  	<input type="text" class="form-control pull-right" placeholder="450.00" value="" name="rate" tabindex="21" >
    
     </div>  
	 <div class="form-group col-md-4">
  <label for="area">Supplier Cost</label>
  	<input type="text" class="form-control pull-right" placeholder="300.00" value="" name="supp_cost" tabindex="22" >
    
     </div>  <div class="form-group col-md-12">
  <label for="area">Comments</label>
  	<input type="text" class="form-control pull-right" placeholder="Any Comments" value="" name="comments" tabindex="23" >
    
     </div>  
     
                       
				  </div>
                 <div class="col-md-12" style="margin:20px;"> 
 
   <input type="submit" class="btn btn-success pull-right" value="Save Booking" tabindex="24" ></button>
  					
             
                    </div>  
						</form>
                       
				  </div>
                </div> 
              </div>
<script type="text/javascript">
 function GetDays(){
 
 //var d = new Date(document.getElementById("end_date").value);
//var c = new Date(document.getElementById("start_date").value);
var sdate = document.getElementById("start_date").value;
var sdatearray = sdate.split("/");

var snewdate = sdatearray[1] + '/' + sdatearray[0] + '/' + sdatearray[2];
//alert(snewdate);

var edate = document.getElementById("end_date").value;
var edatearray = edate.split("/");

var enewdate = edatearray[1] + '/' + edatearray[0] + '/' + edatearray[2];
//alert(enewdate);
//alert(formatDate(c));
//alert(formatDate(d));
/*
function formatDate(d)
{
    var month = d.getMonth();
    var day = d.getDate();
    month = month + 1;

    month = month + "";

    if (month.length == 1)
    {
        month = "0" + month;
    }

    day = day + "";

    if (day.length == 1)
    {
        day = "0" + day;
    }

    return day + '-' + month + '-' + d.getFullYear();
}*/
 
 
 
                var dropdt = new Date(enewdate);//document.getElementById("end_date").value);
                var pickdt = new Date(snewdate);//document.getElementById("start_date").value);
                
				daycal=parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
				daycal=daycal+1;
				return daycal;
        }

        function cal(){
        if(document.getElementById("end_date")){
		if(GetDays()<1)
		{
		alert("Select proper date");
		}
		else
		{
            document.getElementById("days").value=GetDays();
		}
			
        }  
		}
 $(document).ready(
 
 
 
      function () {
      $('#pickup_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'
      });
	  $('#start_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'
      });
	  
	  $('#end_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'
      });
      }
    
    );
	
	
$(document).ready(function () {
	$('#loader').hide();
});
$(document).ready(function(){
	
	$("#company_name").keyup(function(){
		$('#old_customer_id').val('');
		
		//$("#delivery_address").hide();
		//if any other div are open close them or hide them
		var url11 = 'ajax/find_customer.php?'+new Date().getTime();
		$.ajax({
		type: "POST",
		url: url11,
		data:'keyword='+$(this).val(),
		beforeSend: function(){
			$("#company_name").css("background","#F5C211");
		},
		success: function(data){
			$("#suggesstion-box").show();
			$("#suggesstion-box").html(data);
			$("#company_name").css("background","#green");
		}
		});
	});
});
	
	function selectCustomer(val) {
	var data=val;
	 var data = data.split('-');
	var id=data[0];
	var name=data[1];
	var address=data[2];
	var post_code=data[3];
	var phone=data[4];
	var email=data[5];
	//var client_reference=data[6];
	//alert(id);
	$('#new_customer').hide();
	//now show the delivery div as well
	
	$("#company_name").val(name);
	$("#old_customer_id").val(id);
    $('#customer_address1').val(address);
	$('#post_code').val(post_code);
	$('#phone').val(phone);
	$('#email').val(email);
	//$('#client_reference').val(client_reference);
	$("#suggesstion-box").hide();
	}
	// Now Select Passenger
	$(document).ready(function(){
	
	$("#passenger_name").keyup(function(){
		$('#contact_id').val('');
		//$("#delivery_address").hide();
		//if any other div are open close them or hide them
		var url11 = 'ajax/find_passenger.php?'+new Date().getTime();
		$.ajax({
		type: "POST",
		url: url11,
		data:'keyword='+$(this).val(),
		beforeSend: function(){
			$("#passenger_name").css("background","#F5C211");
		},
		success: function(data){
			$("#passenger-suggesstion-box").show();
			$("#passenger-suggesstion-box").html(data);
			$("#passenger_name").css("background","#green");
		}
		});
	});
});
	
	function selectPassenger(val) {
	var data=val;
	 var data = data.split('-');
	var id=data[0];
	var name=data[1];
	var mobile=data[2];
	var email=data[3];
	
	//alert(data);
	//$('#new_customer').hide();
	//now show the delivery div as well
	
	
	$("#contact_id").val(id);
	$("#passenger_name").val(name);
	$('#contact_mobile').val(mobile);
	$('#contact_email').val(email);
	$("#passenger-suggesstion-box").hide();
	}
	
	/////////////// Now Submit this Form ////////////////////////////
	$("#new_booking_form").on('submit',(function(e) {
		///////////////////// Validate Data First
  /*
  var errors = 0;
  $("#new_booking_form :input").map(function() {
    if (!$(this).val()) {
      $(this).addClass('empty_field_warning');
      errors++;
    } else if ($(this).val()) {
      $(this).removeClass('empty_field_warning');
    }
  });
  if (errors > 0) {
    $('#errorwarn').text("All fields are required");
    return false;
  }
  */
 /////////////////Validation Ends //////////////////////
		e.preventDefault();
		$('#loader').show();
		var url11 = 'ajax/create_new_order.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("A New Book has been Added");
		$('#loader').delay(500).fadeOut("slow");
		var url1 = 'list_bookings.php?'+new Date().getTime();
		window.location.replace(url1);
			}else{
				alert("Booking Was Not Added");
				$('#loader').delay(500).fadeOut("slow");
				}
					
				
			//$("#gallery").html(data);
			
				
				
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));



	
</script>
   </body>
</html>
