<!DOCTYPE html>
<html lang="en">
<?php 
include "dbconfig.php";
include "head.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>

      <style>

#name-list{float:left;list-style:none;margin:0;padding:0;width:250px;}
#name-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;width:250px;}
#name-list li:hover{ background-color:#0A68C0; cursor:pointer;width:250px;}
#search-name{padding: 10px;border:#000000 1px solid;width:250px;}

#new_company .modal-dialog
{
  width: 70%;
}
</style>
<script>
  $(document).ready(
      function () {
      $('#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'
      });
      }
    
    );
    
    $(document).ready(
      function () {
      $('#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 () {
      $('#payment_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: 'yy-mm-dd'
      });
      }
    
    );
      $(document).ready(function(){
         
      });
     $(document).ready(function () {
  //called when key is pressed in textbox
  $(".numeric").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
    });
});


  </script>
      <div class="container-fluid">

    <form name="new_order_form" id="new_order_form" method="post" action="ajax/create_new_order.php">
    <input type="hidden" name="new_order_form">
    <div class="container-fluid">
   <div class="clearfix"></div>
    <br>
    
    <div class="row">
       <div class="col-md-12">
            <div class="col-md-1"></div>
                <div class="col-md-8">
                 
                 <div class="panel" style="background-color: #e9e9e9;box-shadow: 5px 5px 5px;">
                    <div class="panel-primary">
                     <div class="panel-heading"><center>Company Details Section</center></div>
                     </div>
                     <div class="panel-body">
                    
                     <div class="frmSearch" id="search_name">
                     <label for="full_name">Select a Company</label>
<input type="text" id="search-name" class="form-control" placeholder="Customer Name" tabindex="1" onBlur="checkTextField(this);" autocomplete="off" onKeyUp="checkTextField(this);" /> 
<input type="hidden" name="old_customer_id" id="old_customer_id" placeholder="xxx" />

<div id="suggesstion-box"></div>
</div>

</div>
</div>                 <br>
              
     </div>
            <div class="col-md-2"></div>
            </div>
    </div>
    <div class="row" id="delivery_address">
       
       
       
        <div class="col-md-12">
           <div class="col-md-1"></div>
                       <div class="col-md-8">
                        <div id="clearfix"></div>
                         
                           
                           
                  <div class="panel" style="background-color: #e9e9e9;box-shadow: 5px 5px 5px;">
                    <div class="panel-primary">
                   <div class="panel-heading"><center>Contact Name Details</center></div>
                     </div>
                     <div class="panel-body">
                     <div class="col-md-6">
                           <label for="select_contact_name">Select Contact Name</label>
                           <select name="delivery_address" id="customer_delivery_address" class="form-control">
                           
                           
                           </select>
                           
                          </div>  
                           <div id="new_delivery_address">
                           <!-- for new delivery address -->
                           <div class="form-group col-md-12">
                           <div class="clearfix">&nbsp;</div>
                  <div id="contact_name" class="panel" style="background-color: #e9e9e9;box-shadow: 5px 5px 5px 5px;">
                    <div class="panel-success">
                     <div class="panel-heading" style="background-color:#05629E;"><center>New Contact Name</center></div>
                     </div>
                     <div class="panel-body">
                  
                            
                            <label for="jobtype"></label>
                           <div id="delivery_address1"></div>
                          
                   <div class="col-md-12">
                                 
                       <div class="col-md-4">
                           <label>Name</label>
                           <input type="text" placeholder="Name" name="contact_name" id="name" class="form-control col-md-4">                           
                           </div>
                        <div class="col-md-4">   
                              <label>Mobile</label>
                           <input type="number" placeholder="07x-xxxx-xxxx" name="contact_mobile" id="mobile" class="form-control col-md-4">
                           
                          </div>   
                          <div class="col-md-4">   
                                    <label>Email</label>
                           <input type="text" placeholder="abc@outlook" name="contact_email" class="form-control col-md-4">
                          </div>
                         </div>
                         
                           </div></div>
                           
                            </div> </div>
                  <div class="col-md-8" id="customer_details"></div>
                  <div class="col-md-8" id="delivery"></div>
                           
                    
                         <div class="col-md-6"></div>
                        </div>
                            </div> </div>
                  <div class="col-md-8" id="customer_details"></div>
                  <div class="col-md-8" id="delivery"></div>
                           
                    
                         <div class="col-md-6"></div>
                        </div>
                        </div>
                        
                        <div class="col-md-1"></div>
                  
             </div>
         <div class="col-md-2"></div>
                       </div>
          
                 </div>
       
       
    </div>
    
        <div class="col-md-12" >
             <div class="col-md-1"></div>
             <div class="col-md-8">
                <div class="panel job-details">
                   <div class="panel-primary" style="box-shadow: 5px 5px 5px;">
                     <div class="panel-heading"><center>Enter Job Details</center></div>
                   </div>
                   <div class="panel-body" style="background-color: #e9e9e9;box-shadow: 5px 5px 5px;">
                   <div class="col-md-6">
  <legend> <span class="glyphicon glyphicon-th-list">  </span> Pickup Details </legend>
  <div class="col-md-12">
   <div class="col-md-6">
   <label for="area">Pickup Address</label>
                       <div class="input-group">
                         <input name="pickup_address" id="pickup_address" type="text" id="drop_address" placeholder="Enter Address" class="form-control"  tabindex="4" >
                         
                      </div>    </div>
   					<div class="col-md-4">
			<label for="postcode">Postcode </label>
                       <div class="input-group">
                         <input name="pickup_post_code" id="pickup_post_code" type="text" id="drop_post_code" placeholder="12G 45D" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                 
                    <i class="glyphicon glyphicon-envelope"></i>
                 
                </span></div>
				       	</div>
  <div class="col-md-6">
   <label for="area">Pickup Date</label>
   <?php
					 $end_date = date('Y-m-d',(strtotime('21 day', time())));
					 $start_date = date("d/m/Y", strtotime('0 day', time()));
  					?>
                       <div class="input-group">
  <input type="text" style="width:100%;" value="<?php echo $start_date;?>" name="pickup_date" class="form-control" placeholder="Select a Date" name="booking_date" id="start_date"  tabindex="7" >
                      </div>    </div>
   					<div class="col-md-6">
			<label for="number_of_passanger">Number of Passengers </label>
                       <div class="input-group col-md-9">
                         <input name="passengers" type="number" id="passengers" value="5" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-user"></i>
                  </span>  
                </span></div>
				       	</div>
               <div class="form-group" style="margin-left:-5px;">
                  <div class="col-md-6">						
                     <label for="hours">Hours</label>
						<select id="hours" name="hours" class="form-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
							 <option value="3">3</option>
                            <option value="4">4</option>
							 <option value="5">5</option>
                            <option value="6">6</option>
							 <option value="7">7</option>
                            <option value="8">8</option>
							 <option value="9">9</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-6">
                            <label for="minutes">Minutes</label>
							<select id="mins" name="mins" style="width:70%;" class="form-control">
                            <option value="00">00</option>
                            <option value="1">01</option>
                            <option value="2">02</option>
							 <option value="3">03</option>
                            <option value="4">04</option>
							 <option value="5">05</option>
                            <option value="6">06</option>
							 <option value="7">07</option>
                            <option value="8">08</option>
							 <option value="9">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>   
                     
						
                       
				  </div>
                        </div> 
                        <div class="col-md-6">
<legend> <span class="glyphicon glyphicon-th-list">  </span> Drop Address </legend>

									 <div class="col-md-6">

			<label for="address1">Address </label>
                       <div class="input-group">
                         <input name="drop_address" type="text" id="drop_address" placeholder="Enter Address" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span></div>
                       </div><br>
       <div class="clearfix"> </div>
                       
					   						 <div class="col-md-6">

					    <label for="postcode">Postcode </label>
                       <div class="input-group">
                         <input name="drop_post_code" type="text" id="drop_post_code" placeholder="12G 45D" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-envelope"></i>
                  </span>  
                </span></div>
                       </div><br>
				
       <div class="clearfix"> </div>
				
										 <div class="col-md-6">

				 
                       </div><br>
				
                  </div>
						 
						 <div class="clearfix"> </div>
						 
						 <div class="col-md-12">
						                         <legend> <span class="glyphicon glyphicon-th-list">  </span>&nbsp; More Details</legend>
<div class="col-md-4"><label for="nos">Job Paid</label>
                               <div class="form-group">
                               <select style="height:40px;width: 40%;" name="payment_type" id="job_paid"  class="form-payment_type" style="font-size:13px; cursor:pointer;">
                                <option style="padding:10px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;"value="1" selected>Paid</option>
                                <option style="padding:10px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;"value="2" selected>Not Paid</option>
                                <option style="padding:10px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;"value="3" selected>COD</option>
                                <option style="padding:10px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;"value="4" selected>Account Job</option>
                              
                        </select>
                             
                              </div>
						 </div>
                         <!--
						 <div class="col-md-4"><label for="amount">Price Given</label>
                             <div id="gross_payment" class="form-group">
                                <input type="text" style="width:30%; height:40px;" name="amount" id="amount" value="0.00" class="form-control numeric" tabindex="11">                                    <div style="color:red;" id="errmsg"></div>
                           </div></div>
						 -->
                         <div class="col-md-4"><label for="skiptype" class="collection"> Vehicle </label>
                           <select name="vehicle" style="width:70%;background-color:#053DD4; color:#ffffff;" id="vehicle" class="form-control">
                               <?php
                 
                  $skip_sql="SELECT * from vehicles order by make 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']."-".$vehicle['passengers']." Seater"; ?>
    </option>
            <?php
            
            }
            ?>
                                </select></div>
						 
                         <div class="col-md-12">
						
						<div class="row col-md-8">
                             Comments
                             <textarea class="form-control pull-right" name="comments">No Comments</textarea>
                    </div>
                            <div class="col-md-4"> 
                            <div class="clearfix"></div>
                            <input type="submit" style="cursor: pointer; font-family:Montserrat;margin-top:30px;"  class="btn btn-success btn-lg pull-right" value="Save Job"> 
                            </div> 
						 </div>
                      
                   </div>
                  
						 						 
						 </div>
						 
						 
						 
						 </div>
						 
                     
                          </div>  </div>
             
              <div class="col-md-2"></div>
     
    </form>
   <div class="modal fade modal-lg" id="new_company" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                              <div class="modal-content">
                              <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="modal-title" id="myModalLabel">Add New Record</h4>
                              </div>
                              <div class="modal-body">
                              <form id="new_company_form" method="post"> 
                              <legend> <span class="glyphicon glyphicon-th-list">  </span> Company Deatils </legend>
                              <div class="col-md-12">
                        <div class="col-md-4">
                        <label for="full_name">Full Name</label>
                        <div class="input-group">
                          <input type="text" id="company_name" name="company_name" placeholder="Enter Full Name" class="form-control"  tabindex="2" >
                          <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-user"></i>
                  </span>  
                </span>
                       </div><br>
                       
                        <label for="post_code">Post Code</label>
                  <div class="input-group">
                    <input type="text" id="customer_post_code" name="post_code" placeholder="Enter Post Code" class="form-control"  tabindex="5" >
                    <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                  </div><br>
                      
                     </div>
                     <div class="col-md-4">
                        
                        
               <label for="phone">Phone</label>
                  <div class="input-group">
                    <input type="text" id="phone" name="phone" placeholder="Enter Phone Number" class="form-control"  tabindex="3" >
                    <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-phone"></i>
                  </span>  
                </span>
                  </div><br>
            
                   <label for="city">Town</label>
                       <div class="input-group">
                         <input name="city" type="text" id="customer_city" placeholder="Enter City" class="form-control"  tabindex="6" >
                          <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                      </div><br> 
                       
                  </div>
    <div class="col-md-4">
                        
                        
              <label for="address1">Address </label>
                       <div class="input-group">
                         <input type="text" name="customer_address1" placeholder="Enter Address" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-map-marker"></i>
                  </span>  
                </span>
                       </div><br>
                       </div>
                    <div class="col-md-4">   
					    <label for="email">Email </label>
                       <div class="input-group">
                         <input name="company_email" type="text" id="company_email" placeholder="abc@outlook.com" class="form-control"  tabindex="4" >
                         <span class="input-group-btn">
                  <span class="btn btn-default pull-right"> 
                    <i class="glyphicon glyphicon-envelope"></i>
                  </span>  
                </span>
                       </div>
                             
                              </div>
                              </div>
                 
                         <div class="clearfix"></div>
                         
                              <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                              <button type="button" class="btn btn-primary" data-dismiss="modal" onClick="addRecord()">Add Record</button>
                              </div>
                              </div>
                              </div>
                              </div>
</div>
      
      </div>
     <script>
function addRecord() {
      var form=$('#new_company_form');
      var url11 = 'ajax/create_company.php?'+new Date().getTime();
                $.ajax({
                    type: "POST",
                    url: url11,
              data: form.serialize(),
                    success: function(data) {
                     //console.log(data); 
		   
                }
            });
}

$(document).ready(function(){
	$('.modal-lg').css('width', '1750px');
	$("#search-name").keyup(function(){
		//$("#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(){
			$("#search-name").css("background","#F5C211");
		},
		success: function(data){
			$("#suggesstion-box").show();
			$("#suggesstion-box").html(data);
			$("#search-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];
	//alert(id);
	$('#new_customer').hide();
	//now show the delivery div as well
	$("#delivery_address").show();
	$("#search-name").val(name);
	$("#old_customer_id").val(id);
    $('#pickup_address').val(address);
	$('#pickup_post_code').val(post_code);
 var url11 = 'ajax/find_address.php?'+new Date().getTime();
//now fetch data based on this id 
 $.ajax({
		type: "POST",
		url: url11,
		data:'customer='+id,
		
		success: function(data){
			$("#customer_delivery_address").html(data);
			$("#delivery_address").show();
			 $("#frmSearch").hide();

			
		}
		});
		
$("#suggesstion-box").hide();
$('.job-details').show();
}
</script>

    <script type="text/javascript">
 
 $( document ).ready(function() {
  $('#delivery_details').hide();
  $('#payment_label').hide();
  $('#payment_recieved').hide();
  $('#gross_label').hide();
  $('#gross').val('');
  $('#save_order').hide();
  $('#vat_details').hide();
  $('#find_gross').hide();
  $('#pay_date').hide();
  $('#exchange_with').hide();
  $('#new_delivery_address').hide();
  $('#new_customer').hide();
  $("#delivery_address").hide();
  $('.job-details').hide();
  
  });
 
   
    $('#skip_id').change(function(){
              var selected_skip = $(this).val();
         var dataString = 'selected_skip=' + selected_skip;
		 var url11 = 'new_order.php?'+new Date().getTime();
              // alert(dataString);
        $(this).css('background-color', '#F0E10F');
                $.ajax({
                    type: "POST",
                    url: url11,
                    data: dataString,
                    success: function(data) {
                     //console.log(data); 
          
           $('#skip_stock').html(data); 
           //$('#delivery_address').hide();
                }
            });
  });
        
    
    
     $('#customer_id').change(function(){
              var customer_id = $(this).val();
          //$('#delivery_check').show();
        
        var get_customer_address=$(this).val();
                var dataString = 'customer_id=' + customer_id+'&get_customer_address=' + get_customer_address;
              // alert(dataString);
			   var url11 = 'ajax/create_order.php?'+new Date().getTime();
        $(this).css('background-color', '#F0E10F');
                $.ajax({
                    type: "POST",
                    url: url11,
                    data: dataString,
                    success: function(data) {
                     //console.log(data); 
          
           $('#customer_details').html(data); 
           //$('#delivery_address').hide();
                }
            });
        });
    $('#customer_id').keyup(function(){
               var customer_id = $(this).val();
          //$('#delivery_check').show();
        
        var get_customer_address=$(this).val();
                var dataString = 'customer_id=' + customer_id+'&get_customer_address=' + get_customer_address;
              // alert(dataString);
			   var url11 = 'ajax/create_order.php?'+new Date().getTime();
        $(this).css('background-color', '#F0E10F');
                $.ajax({
                    type: "POST",
                    url: url11,
                    data: dataString,
                    success: function(data) {
                     //console.log(data); 
          
           $('#customer_details').html(data); 
           //$('#delivery_address').hide();
                }
            });
        });
    
   
  $('#payment_type').click(function(){
    
  $('#save_order').show();
  });
  


$('#customer_delivery_address').click(function(){
	//if no address was found
	var delivery_address = $('#customer_delivery_address').val();
	if(delivery_address=='0'){
					 $('#delivery').hide();
	$('#new_delivery_address').show();
	}
});




$('#customer_delivery_address').change(function(){
	
	
	var delivery_address = $('#customer_delivery_address').val();
			  	
                var dataString = 'delivery_address=' + delivery_address;
				//alert(dataString);
				if(delivery_address=='0'){
					 $('#delivery').hide();
	$('#new_delivery_address').show();
	}
       else{$('#new_delivery_address').hide();
	   
	   		$(this).css('background-color','#57F019');
                
	   
	   }       
});

$('.start_date').datepicker({
	
    	onSelect: function() {
			
			$( ".start_date" ).datepicker( "option", "dateFormat","dd/mm/yy");
		}
		});
 function checkTextField(field) {
    if (field.value == '') {
        alert("Field left Blank.");
		this.focus();
    }
}
// check if name text box is empty then hide job details div
function checkTextField(field) {
    if (field.value == '') {
        $('.job-details').hide();
    }
}

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