<!DOCTYPE html>
<html>

	<?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>
<form action="create_driver_invoice.php" method="post">
	<div class="container-fluid" style="margin-top:200x;">
				<div class="col-md-2"></div>
				<div class="panel col-md-8">
			       <div class="panel-primary"style="box-shadow: 5px 5px 5px;">
			       	   <div class="panel-heading"><center>Transaction History</center></div>
			       </div>
			       <div class="panel-body" style="background-color:#e9e9e9; box-shadow: 5px 5px 5px;">
			       	 
                       <div class="form-group col-md-6">
                        <select name="driver_id" id="customer" class="form-control">
			       	   	 <option style="padding:10px; background-color:#E7D91E; color:#F9F0F1; cursor:pointer;" value="">Select a Driver </option>
                               <?php
							   
							        $customers_sql="SELECT * from employees order by first_name ASC";
									$t_result=mysqli_query($con,$customers_sql);
									while($customer=mysqli_fetch_assoc($t_result))
									{
									
									?>
	<option style="padding:20px; background-color:#2977C9; color:#F9F0F1; cursor:pointer;" value="<?php echo $customer['id']; ?>">
	   <?php echo $customer['first_name']; ?>
    </option>
						<?php
						
						}
						?>
			       	   </select>
			       	   </div>
                      <div class="col-md-2">
         <div class="form-group">
                      
 <input type="text" name="from" class="from form-control" placeholder="Date From" id="from">
             
         </div>
        </div>
       <div class="col-md-2">
         <div class="form-group">
                      
 <input type="text"  name="to" class="to form-control" placeholder="Date To" id="to">
             
         </div>
        </div>
                       
                       <div class="col-md-2">
                       <input type="submit" class="btn btn-success" value="Generate Statement"></div>
			       	   
                       <!-- now retrieve the transactions of this customer -->
                   </div>
                   <div>&nbsp;</div>
				   <div id="customer_details"></div>
			       	    
			       </div>
			    </div>
</form>
<script>
//When user click on Start_date execute the filter
  $('.to').datepicker({
	
    	onSelect: function() {
			
			$( ".to" ).datepicker( "option", "dateFormat","dd/mm/yy");
		var to=$('#to').val();
                $( ".from" ).datepicker( "option", "dateFormat","dd/mm/yy");
		
    }
  
  });

	$('#name').keyup(function(){
	
});	
$('.from').datepicker({
	
    	onSelect: function() {
			
                $( ".from" ).datepicker( "option", "dateFormat","dd/mm/yy");
		
        }
        });
</script>
</body>
</html>