<style>
    .modal-dialog {
        max-width: 50% !important;
    }
</style>


<div class="col-md-12 px-2">
    
   <!-- div for the wallet summarary  -->
   
   
   <div class="d-flex py-2 justify-content-between align-item-center">
      
      <h3 class="text-center py-3 m-0">Manage Booking</h3>

    </div>

    </div>
    <br>   
      
     <br>
     <?php 
	$success=$this->session->flashdata('success');
	$error=$this->session->flashdata('error');
	
	if(!empty($success)) { ?>

	<div class="alert alert-success">
	<strong>Success!</strong> <?php echo $this->session->flashdata('success'); ?>
	</div>

	<?php } ?>
	<?php if(!empty($error)) { ?>

	<div class="alert alert-danger">
	<strong>Error!</strong> <?php echo $this->session->flashdata('error'); ?>
	</div>

	<?php } ?> 
  
    <div class="row divdata"> 
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="tab-content" id="pills-tabContent">
         <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <caption >
               <div class="row justify-content-end col-12">
                   <div class="col-lg-9 row px-0 py-1">
                      <div class="col-lg-5">
                         <div class="d-flex justify-content-end align-items-center gap-2 ">
                            <i class="fa fa-filter text-primary fw-bolder" aria-hidden="true"></i>
                            <label class="fw-bolder">Filter</label>
                            <input type="text" name="daterange" id="daterange" class="form-control" value="" placeholder="Select Date" autocomplete="off">
                         </div>
                      </div>
                         
                      <div class="d-flex gap-2 col-lg-7"> 
                        <select class="form-control" id="fltstatus" name="fltstatus" onchange="loadData()">
                           <option selected="selected" value="%">All</option>
                           <option value="0">Pending</option>
                           <option value="3">Cancelled</option>
                           <option value="1">Start</option>
                           <option value="2">Completed</option>
                            </select>
                         <input type="text" name="search_filter" id="search_filter" class="form-control" value="" placeholder="Search data" autocomplete="off">
                         <button class="btn btn-primary searchBtn">Search</button>
                         <a href="javascript:void(0)" class="btn btn-warning " onclick="resetfilter()">Reset</a>   
                      </div>
                   </div>
              </div>

                
             
            </caption>

            <!-- //////////// -->
         </div>
        
      </div>
    
   
   
       <div class="border rounded-2 p-3 bg-white " id="w-sum">
    
          <!-- ==========tab=========== -->
          <ul class="nav nav-pills mb-3 walletsummary" id="pills-tab" role="tablist">
             <li class="nav-item d-none" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-val="all" data-title-name="all" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">All</button>
             </li>               
          </ul>
       
    
          <!-- ====Admin========== -->
          <div class="tab-content" id="pills-tabContent">
            
                <div class="table-responsive bg-white p-2">
                   <table class="table align-center table-hover " id="add-table" style="width:100% !important">
                   </table>
                </div>
                <!-- //////////// -->
            
          </div>
       </div>
    </div>
   </div>


<div id="details" class="modal fade"  data-toggle="modal" data-target="#myModal">
 <div class="modal-dialog" style="max-width: 80%;" role="document">
    <div class="modal-content">
       <div class="modal-header">
          <h4 class="modal-title">Booking Details</h4>
       </div>
       <div class="modal-body">
       </div>
    </div>
    <!-- /.modal-content -->
 </div>
 <!-- /.modal-dialog -->
</div>

<?php  include('js.php') ?>
<script>
    function resetdata()
    {
        $("label").remove(".error");
    	$("#VehicleManageForm").trigger("reset");
    	$('#formevent').val('submit');
    	$('#btnadd').val('Submit');
    	$('#id').val(0);
        $('.insuranceimg').addClass('hidden');
    }
    
       
    function getmodel()
    {
        $.ajax({
			url:  "<?php echo base_url()?>Vehicle/makewise_model", 
			data: {make_id:$('#make_id').val()},
			type: "POST", 
			success: function (data) {
			    $('#model_id').html(data);
			}
		}); 
    }
   /*****************start for admin***************/
   $('body').on('click','.walletsummary .nav-link',function(){
       	$('#add-table').DataTable().destroy();
       	loadData();
   });
   
   $('body').on('change','#fltstatus',function(){
       	$('#add-table').DataTable().destroy();
       	loadData();
   });
   
   $('#daterange').daterangepicker({
       locale: {
       format: 'DD/MM/YYYY'
       },
       maxDate: new Date(),
       
   });
   
    $('input[name="daterange"]').val('');
    loadData();
   function loadData()
   {
      var searchvalue = $('#search_filter').val();
      
       var table = 'add-table' ;
        $('#'+table).DataTable({
         "ordering": false,
       'order': [[0, 'desc']], 
       'retrieve': true,
        'processing': true,
        'serverSide': true,
        'searching': false,
        //'serverMethod': 'post',
        'ajax': {
         'url':'<?php echo base_url();?>Admin/list',
          "type": "POST",
          "data": {
       		"daterange": $('#daterange').val(),
       		'searchvalue':searchvalue,
       		'fltstatus':$('#fltstatus').val()
       	}
        },

        'columns': [
         { title:'Sr.No',data: 'i' },
         { title:'Date',data: 'entry_date' },
         { title:'Book Id',data: 'book' },
         { title:'Driver Name',data: 'driver_name' }, 
         { title:'Driver ID',data: 'driver_id' }, 
         { title:'Vehicle Type',data: 'type' },   
            
         { title:'Vehicle Number'    ,data: 'number' }, 
        { title:'Pick-Up Location',data: 'pick' }, 
         { title:'Drop Location',data: 'drop' }, 
         { title:'Total Fare' ,data: 'fare' }, 
         { title:'Distance' ,data: 'dist' }, 
         { title:'Collect Cash' ,data: 'collect_total_cash' },
         { title:'Payment Type' ,data: 'payment_type' },
         { title:'Status' ,data: 'status' },
         { title:'Action',data: 'action' },        
          
        ]
       });
       
       }
       
       $('body').on('click','.applyBtn',function(){
       $('#add-table').DataTable().destroy();
       loadData();
       });

       $('body').on('click','.searchBtn',function(){
         $('#add-table').DataTable().destroy();
         loadData();
         });

       
       $('body').on('click','.cancelBtn',function(){
            $('#daterange').val('');
            $('#daterange').daterangepicker({
       		locale: {
       			format: 'DD/MM/YYYY'
       		 },
       		 maxDate: new Date(),
            });
           
       
       	$('#add-table').DataTable().destroy();
       	loadData();
       });
   
       function resetfilter()
      {
            $('input[name="daterange"]').val('');
            $('input[name="search_filter"]').val('');
             $('#add-table').DataTable().destroy();
           loadData();
      }
   
    function deletedata(id,name)
	{
		swal({
		  title: "Are you sure?",
		  text: "",
		  icon: "warning",
		  buttons: true,
		  dangerMode: true,
		})
		.then((willDelete) => {
			if(willDelete)
			{
				 window.location.href="<?php echo base_url() ?>Vehicle/delete_vehicle/"+id;
			}
		});
	}
	
	//edit data
	function editdata(id)
	{
		$.ajax({
			url:  "<?php echo base_url()?>Vehicle/edit", 
			data: {id:id},
			type: "POST", 
			dataType: 'json',
			success: function (data) {
			   var json = JSON.stringify(data);
			   var resultdata=JSON.parse(json);
			   if(resultdata.status==0)
			   {
				  //alertify.error(resultdata.message);
			   }
			   else if(resultdata.status==1)
			   {
			        $('#id').val(resultdata.id);
			        $('#driver_id').val(resultdata.driver_id);
			        $('#status').val(resultdata.status);
			        
			        $('#make_id').val(resultdata.make_id);
			        
			        if(resultdata.handicap=='yes')
			        {
			            $('#handicap_yes').attr('checked','checked');
			        }
			        else
			        {
			            $('#handicap_no').attr('checked','checked');
			        }
			        
			        
			        if(resultdata.childseat=='yes')
			        {
			            $('#childseat_yes').attr('checked','checked');
			        }
			        else
			        {
			            $('#childseat_no').attr('checked','checked');
			        }
			        
			        $('.vehicle_type').prop('checked',false);
			        
			        if(resultdata.type.length > 0)
			        {
			            for(var i in resultdata.type)
			            {
			                $('#vehicle_type'+resultdata.type[i].type_id).prop('checked',true);
			            }
			        }
			        
			        $.ajax({
            			url:  "<?php echo base_url()?>Vehicle/makewise_model", 
            			data: {make_id:resultdata.make_id},
            			type: "POST", 
            			success: function (data) {
            			    $('#model_id').html(data);
            			    $('#model_id').val(resultdata.model_id);
            			}
            		}); 
            		
			        $('#vehicle_number').val(resultdata.number);
			        $('#vehicle_color').val(resultdata.color);
			        $('#vehicle_year').val(resultdata.year);
			         
			        
			        
			        $('.insuranceimg').attr('src',"../"+resultdata.insurance_image);
            		$('.insuranceimg').removeClass('hidden');
            		
            		$('#insurance_status').val(resultdata.insurance_status);
            		
			        showhidediv('divform','divdata','divbtngo','divbtnadd');
            		$('#formevent').val('update');
            		$('#btnadd').val('Update');
				
			   } 
			}
		}); 
	}
	
	function view_detail(id)
	{
		$.ajax({
			url:  "<?php echo base_url()?>Admin/view", 
			data: {id:id},
			type: "POST", 
			success: function (data) {
			   $('#details .modal-body').html(data);
			   $('#details').modal('show');
			}
		}); 
	}
	
	function collectcash(id)
	{
	    $.ajax({
			url:  "<?php echo base_url()?>Admin/collectcash", 
			data: {id:id},
			type: "POST", 
			success: function (data) {
			   loadData();
			}
		}); 
	}
</script>

