<div class="container-fluid">
        <!--  Row 1 -->
      
        <div class="row">
       
          <div class="col-lg-12 d-flex align-items-stretch">
            <div class="card w-100">
              <div class="card-body p-4">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <h2 class="mb-4">List</h2>
                 <a href="<?= site_url('/admin/videos/create') ?>"><button type="button" class="btn btn-primary">Create+</button></a> 
              </div>
                
                <div class="table-responsive mt-3 ">
                  <table id="example" class="table text-nowrap  text-center">
                    <thead class="text-dark fs-4">
                      <tr>
                    
                        <th class="border-bottom-0">
                           # 
                        </th>
                        
                        <th class="border-bottom-0">
                           Link 
                        </th>
                        
                        <th class="border-bottom-0">
                           Target Count 
                        </th>

                        <th class="border-bottom-0">
                             Buffered Count 
                        </th>

                        <th class="border-bottom-0">
                             Remaining Count 
                        </th>

                        <th class="border-bottom-0">
                           Completed Count 
                        </th>

                        <th class="border-bottom-0">
                           Date  
                        </th>
                      
                        <th class="border-bottom-0">
                           Action  
                        </th>
                      
                      </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      


      
<script>
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
  });


  var table = $('#example').DataTable({
    ajax: {
      url: '<?= site_url() ?>/admin/videos/datatable',
      type: 'POST',
      data: function(d) {
        // d.order = [{
        //   column: 0, // Specify the column index for sorting (0 represents the first column)
        //   dir: 'desc' // Set the sorting direction to 'desc' for descending order
        // }];
      },
    },
    processing: true,
    serverSide: true,
    order: [[0, 'desc']], 
  });


  $(document).on('click', '.delete-video', function() {
        var videoId = $(this).data('id');
        if (confirm('Are you sure you want to delete this video?')) {
            $.ajax({
            url: '<?= site_url() ?>/admin/videos/delete_video',
            type: 'POST',
            data: { id: videoId },
            dataType: 'json',
            success: function(response) {
                if (response.status) {
                success(response.message);
                table.ajax.reload(); // Reload DataTable after deletion
                } else {
                error(response.message);
                }
            }
            });
        }
        });
</script>