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


<div class="col-md-12 px-2">
    <h3 class="text-center py-3">Main Banner list</h3>
   <!-- div for the wallet summarary  -->
   
   
   
    </div>
   


   

   <div class="border rounded-2 p-3 bg-white " id="w-sum">


<div class="text-end">
      
        
         <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add" type="button"><span>Upload Banner</span> </button>
     
    </div>
    
       </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-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>

      <!-- ==========tab=========== -->
      <ul class="nav nav-pills mb-3 walletsummary" id="pills-tab" role="tablist">
         <li class="nav-item" 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">Main Banner list</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 class="modal fade" id="add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Upload Banner</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
           <form method="POST" action="<?php echo base_url();?>Admin/Add_main_banner" class="form" enctype="multipart/form-data">
               <label for="file-img" class="form-label fs-6">Banner Name <span class="text-danger"> *</span></label>
                <input type="text"  class="form-control" name="banner_name" required="">
                
               <label for="file-img" class="form-label fs-6">URL for redirect <span class="text-danger"> *</span></label>
                <input type="text"  class="form-control" name="link" required="">
                
                 <label for="file-img" class="form-label fs-6">Upload APP Banner image <span class="text-danger"> *</span></label>
                <input type="file" id="filess" class="form-control" name="appbanner_image" onchange="validateappImage(this)" required="">
                <span class="text-danger">Image size 540 x 313, 44 KB </span><br>
                
                <label for="sub-name" class="form-label fs-6 mt-2"> Enter Date <span class="text-danger"> *</span></label>
                <input type="date" placeholder="Enter Date" class="form-control" name="date" required="">
                <label for="subject" class="form-label fs-6 mt-2"> Banner Status <span class="text-danger"> *</span></label>
                <select id="clases" class="form-control" name="status" required="">
                    <option>Select Status</option>
                    <option value="Active">Active</option>
                    <option value="InActive">InActive</option>
                </select>
                <div class="py-2 text-end">
                    <button type="submit"  class="btn btn-primary">Upload</button>
                  </div>
            </form>
         
        </div>
        
      </div>
    </div>
  </div>
  


<div class="modal" id="viewall">
           
</div>



<script>
    $(document).ready(function(){
       
        $(document).on('click', '.fa-edit', function(){
            var id = $(this).data('payid');
           
            $.ajax({
                'url':'<?php echo base_url();?>Admin/get_editdata',
                "type": "POST",
                data: {id: id},
                success: function(response){                   

                    $('#viewall').html(response);
                    $('#viewall').modal('show');
                },
                error: function(xhr, status, error){
                    // Handle errors
                    console.error(error);
                }
            });
        });
        
        
        $(document).on('click', '.fa-eye', function(){
            var id = $(this).data('payid');
           
            $.ajax({
                'url':'<?php echo base_url();?>Admin/view_bannerdata',
                "type": "POST",
                data: {id: id},
                success: function(response){                   

                    $('#viewall').html(response);
                    $('#viewall').modal('show');
                },
                error: function(xhr, status, error){
                    // Handle errors
                    console.error(error);
                }
            });
        });
        
        
        
        
        
        
        
    });

</script>


               
               
<script>

      function validateappImage(input) {
      var file = input.files[0];

      var img = new Image();
      img.onload = function() {
         if (this.width > 540  || this.height > 313) {
               alert('Image dimensions should not exceed 540 x 313.');
               input.value = ''; // Clear the input field
               return false;
         }
      };
      img.src = URL.createObjectURL(file);

      return true;
}
</script>


<script>

function validatewebImage(input) {
var file = input.files[0];

var img = new Image();
img.onload = function() {
   if (this.width > 1920  || this.height > 845) {
         alert('Image dimensions should not exceed 1920 x 845.');
         input.value = ''; // Clear the input field
         return false;
   }
};
img.src = URL.createObjectURL(file);

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

        'columns': [
         { title:'Sr.No',data: 'i' },
        //  { title:'Web Banner',data: 'webbanner' }, 
         { title:'App Banner',data: 'appbanner' },
         { title:'Banner Name',data: 'banner_name' },
         { title:'date',data: 'date' }, 
         { 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();
      }
   
</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>