<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">Gradient</h3>

   <!--   <span class="py-3">  <a href="<?=base_url()?>Admin/add_fare" role="button" -->
   <!--   class="btn btn-primary text-white text-decoration-none"  >Add Fare</a>-->
   <!--</span>-->
   
    </div>

   
 
   
  
    <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="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>

   </div>






<!-- Modal for edit fare -->
<div class="modal fade" id="editFareModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Fare</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="<?=base_url()?>index.php/Admin/add_gradient" method="POST">
      <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_status" class="control-label">Start color </label>
    							<div class="col-sm-offset-1">
    								<input class="form-control" id="start_color" placeholder="Start color" name="start_color" 
    								type="text" required="" >
    								<span class="text-danger"></span>
    							</div>
						    </div>
						    
						<div class="form-group  col-md-6">
							<label for="input_password" class="control-label">Center Color<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="center_color" placeholder="Center Color" 
								name="center_color" type="text" required="" >
								
							</div>
						</div>
						
						<div class="form-group  col-md-6">
							<label for="input_password" class="control-label">End Color<em class="text-danger">*</em></label>
							<div class="col-sm-offset-1">
								<input class="form-control" id="end_color" placeholder="End Color" 
								name="end_color" type="text" required="" >
								
							</div>
						</div>
              
				        <input type="hidden" name="auto_id" id="auto_ide">
					</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>


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

        'columns': [
         { title:'Sr.No',data: 'i' },
         { title:'Date',data: 'date' },
         { title:'Start color',data: 'start_color' },         
         { title:'Center color',data: 'center_color' }, 
         { title:'End color',data: 'end_color' }, 
        { 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();
      }
   
</script>



<script>
       	//edit driver
	function edit_fare(id)
	{
	    
	    
	     $('#editFareModal').modal('show');
		
		$.ajax({
			url:  "<?php echo base_url()?>Admin/edit_gradient", 
			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)
			   {
			       
			        $('#auto_ide').val(resultdata.id);
			        $('#start_color').val(resultdata.start_color);
			        $('#center_color').val(resultdata.center_color);
			        $('#end_color').val(resultdata.end_color);
			   } 
			}
		}); 
	}
    
    
     function toggleDivVisibility() {

  const optionSelect = document.getElementById('night_fared');
  
  const hiddenDiv = document.getElementById('night_fare_div');

  
    if (optionSelect.value === '1') {
      hiddenDiv.style.display = 'block';
    } else {
      hiddenDiv.style.display = 'none';
    }
}
    
    
</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>