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

    .active-btn5{
        background-color: #9cf198;
        color: #68e365;
        padding: 0.5rem;
        border-radius: 0.2rem;
    }
</style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> 

<div class="col-md-12 px-2">
    <h3 class="text-center py-3">Driver Location List</h3>
   <!-- div for the wallet summarary  -->
   
   <button type="button" class="btn btn-primary text-white text-decoration-none" data-bs-toggle="modal" 
   data-bs-target="#addDriverModal" style="margin-left: 89%;">
            Add Location
        </button>
   
    <br>
     <br>
     
     
     <?php 
	$success=$this->session->flashdata('message_name');
	$error=$this->session->flashdata('error');
	
	if(!empty($success)) { ?>

	<div class="alert alert-success col-md-6 mx-auto py-1 rounded-0 mb-3">
	<strong>Success!</strong> <?php echo $this->session->flashdata('message_name'); ?>
	</div>

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

	<div class="alert alert-danger col-md-6 mx-auto py-1 rounded-0 mb-3">
	<strong>Error!</strong> <?php echo $this->session->flashdata('error'); ?>
	</div>

	<?php } ?>
     
   
   
    <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-7 row px-0">
                      <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"> 
                         <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" role="presentation" style="display:hidden !important;">
            <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>
   
   
   <!-- Modal -->
<div class="modal fade" id="addDriverModal" tabindex="-1" aria-labelledby="addDriverModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDriverModalLabel">Add Driver Location</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Place your form here -->
                <form action="<?=base_url()?>Admin/add_driver_location" method="post">
					<div class="row col-md-9 mx-auto p-2 bg-white py-3 gy-3">
						<div class="form-group  col-md-6">
							<label for="input_first_name" class="col-sm-3 control-label">Driver Id<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="driver_id" placeholder="Driver Id" name="driver_idss" type="text" required>
								<input class="form-control" id="driver_autoid" placeholder="Driver Id" name="driver_id" type="hidden" required>
								
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_last_name" class="col-sm-3 control-label">Driver Name<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="driver_name" placeholder="Driver Name" name="driver_name" type="text" required>
							
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_email" class="col-sm-3 control-label">Curr Lat<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control"  placeholder="Curr Lat" name="curr_lat" type="text" required>
							
							</div>
						</div>
						
						<div class="form-group  col-md-6">
							<label for="input_password" class="col-sm-3 control-label">Curr long<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control"  placeholder="Curr Long" name="curr_long" type="text" required>
								
							</div>
						</div>
				
        			    <div class="py-3 text-end">
        			    <button type="submit" class="btn btn-primary"  id="continue">Add Location</button>
        			</div>
        		  </div>
					
					
					
				</form>
                
                
            </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">Edit Details</h4>
           </div>
           <div class="modal-body">
           </div>
        </div>
        <!-- /.modal-content -->
     </div>
     <!-- /.modal-dialog -->
    </div>
  
  <script>
   
   $(document).ready(function () {
    $('#driver_id').on('input', function () {
        let driverId = $(this).val(); // Get the value of driver_id
        
        if (driverId) { // Ensure driver_id is not empty
            $.ajax({
                url: '<?php echo base_url();?>Admin/find_driver', 
                type: 'POST',
                data: { driver_id: driverId },
                success: function (response) {
                    // console.log(response);
                    // return false;
                    
                    let data = typeof response === "string" ? JSON.parse(response) : response;
                   
                    if (data.driver_name) {
                        $('#driver_name').val(data.driver_name); 
                        $('#driver_autoid').val(data.id); 
                        $('#continue').prop('disabled', false);
                    } else {
                        $('#driver_name')
                        .val('Driver not found') 
                        .css('color', 'red');
                        
                        $('#continue').prop('disabled', true);
                    }
                },
                error: function () {
                    $('#driver_name').val('Error fetching driver name'); 
                }
            });
        } else {
            $('#driver_name').val(''); 
        }
    });
});

 </script>  

<script>
   /*****************start for admin***************/
   $('body').on('click','.walletsummary .nav-link',function(){
       	$('#add-table').DataTable().destroy();
       	loadData();
   });
   
   $('#daterange').daterangepicker({
       locale: {
       format: 'DD/MM/YYYY'
       },
       maxDate: new Date(),
       
   });
   
    $('input[name="daterange"]').val('');
    loadData();
   function loadData()
   {
       var data_type=$('.walletsummary .nav-link.active').attr('data-val');   

       $('#print_All').data('data-type', data_type);       
       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/get_driver_location',
          "type": "POST",
          "data": {
       		"daterange": $('#daterange').val(),
       		"data_type":data_type,
            'searchvalue':searchvalue,
       	}
        },

        'columns': [
         { title:'Sr.No',data: 'i' },
         { title:'Created Date',data: 'date' },
          { title:'Driver id',data: 'driver_id' },
          { title:'Driver name',data: 'driver_name' }, 
         { title:'Curr lat',data: 'curr_lat' },        
         { title:'Curr long',data: 'curr_long' },
         { 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 view_detail(id)
	{
		$.ajax({
			url:  "<?php echo base_url()?>Admin/update_driverlocation", 
			data: {id:id},
			type: "POST", 
			success: function (data) {
			   $('#details .modal-body').html(data);
			   $('#details').modal('show');
			}
		}); 
	}
      
   
</script>



  <script>            
      $('#print_All').on('click', function () {                
          var data_type = $(this).data('data-type');
          if (typeof data_type === 'undefined' || data_type === null || data_type.trim() === '') {
            data_type = 'all';
          }               
          var url = $(this).data('base-url') + data_type;
          window.open(url, '_blank');
      });

   </script>