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


<div class="col-md-12 px-2">
    
   <!-- div for the wallet summarary  -->
   
   <?php if($this->session->flashdata('message_name')): ?>
      <p  class="py-2 text-success text-center ">
         <?php echo $this->session->flashdata('message_name');?>
      </p>
       <?php endif; ?>
   <div class="d-flex py-2 justify-content-between align-item-center">
      
      <h3 class="text-center py-3 m-0">All Driver List</h3>

      <span class="py-3">  
      
      
      <!--<a href="<?=base_url()?>Admin/add_driver" role="button"-->
      <!--class="btn btn-primary text-white text-decoration-none"  >Add Driver</a>-->
      
      <button type="button" class="btn btn-primary text-white text-decoration-none" data-bs-toggle="modal" data-bs-target="#addDriverModal">
            Add Driver
        </button>
      
      
   </span>
    </div>

    </div>
    <br>   
      
     <br>
   
  
    <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-between align-items-center col-12">
                  <div class="col-md-4 d-flex gap-2">
                     <a href="<?=base_url()?>Admin/driver_list" role="button" 
                     class="btn btn-success text-white text-decoration-none">Pending/Rejected Driver List</a>
                      <a href="<?=base_url()?>Admin/active_driver_list" role="button" 
                      class="btn btn-primary text-white text-decoration-none">Active Driver List</a>
                  </div>
                   
                   <div class="col-lg-7 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"> 
                         <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>

   
<!--modal for edit -->

<!-- Modal -->
<div class="modal fade" id="editDriverModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Driver Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div> 
      <form action ="<?=base_url()?>index.php/Admin/update_pendriver" method="POST" enctype="multipart/form-data" > 
      <div class="modal-body">
        <div class="row  mx-auto p-2 bg-white py-3 gy-3">
						<div class="form-group  col-md-6">
							<label for="input_first_name" class=" control-label">Driver Name<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_first_name" placeholder="First Name" name="first_name" type="text" onkeypress="return /[a-zA-Z ]/i.test(event.key)" pattern="^[a-zA-Z ]+$" required="" fdprocessedid="1o44yf">
								
							</div>
						</div>
					
						<div class="form-group  col-md-6">
							<label for="input_email" class="col-sm-3 control-label">Email<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_email" placeholder="Email" name="email" type="email" required="" fdprocessedid="ru5ee">
							
							</div>
						</div>
						
						<div class="form-group  col-md-6">
							<label for="input_password" class="col-sm-3 control-label">Password<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_password" placeholder="Password" name="password" type="text" required="" fdprocessedid="6pb3gm">
								
							</div>
						</div>
					
					
						<div class="form-group  col-md-6 ">
							<label for="input_status" class=" control-label">Mobile Number <em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="mobile_number" placeholder="Mobile Number" name="mobile_number" type="text" pattern="[6789][0-9]{9}" title="Please enter valid phone number" maxlength="10" required="required" fdprocessedid="0zs0p9">
							
							</div>
						</div>
					
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">Address </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="address_line1" placeholder="Address Line 1" name="address" type="text" required="" fdprocessedid="bb3bta">
								<span class="text-danger"></span>
							</div>
						</div>
					
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">City </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="c_ity" placeholder="City" name="city" type="text" required="" >
								<span class="text-danger"></span>
							</div>
						</div>
								<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">Pin Code </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="postal_code" placeholder="Postal Code" name="pin_code" type="number" onkeypress="return onlyNumberKey(event)" maxlength="6" required="required" fdprocessedid="mw6p7j">
								<span class="text-danger"></span>
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">State</label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="state" placeholder="State" name="state" type="text" required="" fdprocessedid="vycpa">
								<span class="text-danger"></span>
							</div>
						</div>
						
				
				            <div class="col-md-6 ">
							    	<label class=" control-label ng-binding">Driving Profile Photo <em class="text-danger">*</em></label>
								<input type="file" name="driver_photo" class="form-control" >
							 <img src="" class="hidden " id="driver_profile"  style="margin-top:10px" width="70px" height="70px">
							</div>
							
					<input type="hidden" name="edit_id" id="driver_autoide">
						
						<div class="col-sm-6 ">
							<label class="control-label ng-binding"> Driver  Status<em class="text-danger">*</em></label>
							<div class=" col-sm-offset-1">
								<select class="form-control" name="status" id="d_sts" required="" >
							
									<option value="0" selected="selected" >Pending</option>
									<option value="1">Approved</option>
									<option value="2">Rejected</option>
								
								</select>
							</div>
						</div>
				
			
				
				
		
					</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
      </form>  
    </div>
  </div>
</div>

<!--Add driver modal-->

<!-- Modal -->
<div class="modal fade" id="addDriverModal" tabindex="-1" aria-labelledby="addDriverModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDriverModalLabel">Add Driver</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/registration_driver" method="post"  enctype="multipart/form-data" >
					<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">First Name<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_first_name" placeholder="First Name" name="first_name" type="text"  onkeypress="return /[a-zA-Z ]/i.test(event.key)" pattern="^[a-zA-Z ]+$" required>
								
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_last_name" class="col-sm-3 control-label">Last Name<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_last_name" placeholder="Last Name" name="last_name" type="text" fdprocessedid="kilry">
							
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_email" class="col-sm-3 control-label">Email<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="email" placeholder="Email" name="email" type="email" required>
							
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="gender" class="col-sm-3 control-label">Gender <em class="text-danger">*</em></label>
						<select class="form-control" name="gender" required >
						    <option>Choose Gender</option>
						    <option>Male</option>
						     <option>Female</option>
						</select>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_password" class="col-sm-3 control-label">Password<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="input_password" placeholder="Password" name="password" type="text" required>
								
							</div>
						</div>
					
					
						<div class="form-group  col-md-6 ">
							<label for="input_status" class=" control-label">Mobile Number <em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="phone" placeholder="Mobile Number" name="mobile_number" type="number" pattern="[6789][0-9]{9}" title="Please enter valid phone number" maxlength="10"  required="required">
							
							</div>
							<span id="error-message" style="color:red;"></span>
						</div>
						
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">Address </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="address_line1" placeholder="Address Line 1" name="address" type="text" required>
								<span class="text-danger"></span>
							</div>
						</div>
					
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">City </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="city" placeholder="City" name="city" type="text" required>
								<span class="text-danger"></span>
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">Pin Code </label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="postal_code" placeholder="Postal Code" name="pin_code" type="text" onkeypress="return onlyNumberKey(event)" maxlength="6" required="required">
								<span class="text-danger"></span>
							</div>
						</div>
						<div class="form-group  col-md-6">
							<label for="input_status" class="col-sm-3 control-label">State</label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="state" placeholder="State" name="state" type="text" required>
								<span class="text-danger"></span>
							</div>
						</div>
				
				        <div class="col-md-6 ">
							    	<label class=" control-label ng-binding">Driving Profile Photo <em class="text-danger">*</em></label>
								<input type="file" name="driver_photo" class="form-control" required>
							
							</div>
					    <div class="col-md-6 ">
							    	<label class=" control-label ng-binding">Driving License <em class="text-danger">*</em></label>
								<input type="file" name="driver_file" class="form-control" required>
							
							</div>
							
						<div class="col-sm-6 ">
						<label class="col-sm-3 control-label ng-scope" ng-if="doc.expiry_required=='1'">Expire Date <em class="text-danger">*</em></label>
						<div class=" col-sm-offset-1 ng-scope" ng-if="doc.expiry_required=='1'">
								<input type="date" min="2024-04-09" name="expired_date_1" required class="form-control document_expired" placeholder="Expire date" autocomplete="off" fdprocessedid="3qp1a7">
								<span class="text-danger ng-binding"></span>
							</div>
						</div>
						<div class="col-sm-6 ">
							<label class="control-label ng-binding"> Driving License Status<em class="text-danger">*</em></label>
							<div class=" col-sm-offset-1">
								<select class="form-control" name="driving_license_status" required >
								<option  selected="selected">Select the Driving License Status</option>
									<option value="0"  selected="selected">Pending</option>
									<option value="1" >Approved</option>
									<option value="2" >Rejected</option>
								</select>
							</div>
						</div>
				
        			    <div class="py-3 text-end">
        			    <button type="submit" class="btn btn-primary"  id="continue">Add Driver</button>
        			</div>
        		  </div>
					
					
					
					</form>
                
                
            </div>
        </div>
    </div>
</div>












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

        'columns': [
         { title:'Sr.No',data: 'i' },
         { title:'Date',data: 'date' },
         { title:'Driver Name',data: 'name' },         
         { title:'Driver Id',data: 'driver_id' }, 
         { title:'Gender',data: 'gendr' }, 
         { title:'Email',data: 'email' },        
           { title:'Mobile No.',data: 'mob' }, 
         { title:'Address',data: 'add' }, 
         { title:'Status',data: 'sts' }, 
    { title:'Action',data: 'act' }
       
        ]
       });
       
       }
       
       $('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();
      }
      
      
      	//edit driver
	function edit_driver(id)
	{
	    
	     $('#editDriverModal').modal('show');
	    
	    
	    
	    
		
		$.ajax({
			url:  "<?php echo base_url()?>Admin/edit_driver_data", 
			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)
			   {
			        $('#driver_autoide').val(resultdata.id);
			        $('#input_first_name').val(resultdata.name);
			        $('#input_email').val(resultdata.email);
			        $('#d_sts').val(resultdata.sts);
			        $('#state').val(resultdata.state);
			        $('#postal_code').val(resultdata.pin);
			        $('#gender').val(resultdata.gen);
			        
			        $('#c_ity').val(resultdata.city);
			        $('#address_line1').val(resultdata.add);
			        $('#mobile_number').val(resultdata.mob);
			        $('#input_password').val(resultdata.pass);
			       
			        $('#driver_profile').attr('src',"../"+resultdata.profile);
            		$('#driver_profile').removeClass('hidden');
            	
			       
				
			   } 
			}
		}); 
	}
</script>

<script>
        $(document).ready(function () {
            $('#phone').on('input', function () {
                const phone = $(this).val();
                const errorMessage = $('#error-message');
                const sendOtpButton = $('#continue');

                // Check if the input is exactly 10 digits
                if (phone.length === 10) {
                    errorMessage.text(''); 
                    sendOtpButton.prop('disabled', false); 
                } else {
                    errorMessage.text('Mobile number must be exactly 10 digits.');
                    sendOtpButton.prop('disabled', true); 
                }
               
                if (phone.length > 10) {
                    $(this).val(phone.slice(0, 10)); 
                }
            });

  });
</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>