@extends('layouts.admin')
@section('content')
@parent


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>List of Sliders</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
              <li class="breadcrumb-item active">List of Sliders</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-list"></i>
                  List of Sliders
                </h3>
              </div>



                    <div class="card-body">

                          <div class="row">   
                            <div class="px-1">
                              <button type="button" class="btn btn-default btn-block btn-sm" onclick="window.location.href='{{ route('sliders.create') }}'"><i class="fa fa-edit"></i> Add New Slider</button>
                            </div>  
                          </div> 
                        <br>

                    </div>

                    <div class="card-body">    
 
                        <table  id="employee-grid" class="display compact custom" cellspacing="0" style="width:100%">
                            <thead>
                            <tr>
                                <th>Action</th>
                                <th>File Name</th>
                                <th>Title</th>
                                <th>Type</th>
                                <th>Validity</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Duration</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>  
                    </div>                      



            </div>
            <!-- /.card -->

          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 
<!-- Bootstrap 4 -->
<script src="{{ asset('admin/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- overlayScrollbars -->
<script src="{{ asset('admin/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>


<link rel="stylesheet" type="text/css" href="{{ asset('admin/mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('admin/mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('admin/mylib/js/buttons.colVis.min.js') }}"></script> 

<!-- AdminLTE App -->
<script src="{{ asset('admin/dist/js/adminlte.min.js') }}"></script>

<!-- AdminLTE for demo purposes -->
<script src="{{ asset('admin/dist/js/demo.js') }}"></script>

<script>
$(document).ready(function(){

    fill_datatable();


    function fill_datatable()
    {
        var dataTable = $('#employee-grid').DataTable({
            //scrollY:        "300px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
            columnDefs: [
                  { targets: [0, 1], className: "text-center" },
            ],
            fixedColumns: true,

            processing: true,
            serverSide: true,
        dom: 'Blfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },            
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            
            'colvis'
        ], 
            "lengthMenu": [[10, 20, 30, 40, 50, 100 - 1], [10, 20, 30, 40, 50, 100, "All"]],
            "pageLength": 10,                  

            ajax:{
                url: "{{ route('sliders.index') }}",

            },
            columns: [
                {data: 'action', name: 'action', orderable: false, searchable: false},
                {
                    data:'filename',
                    name:'filename'
                },
                {
                    data:'title',
                    name:'title'
                },
                {
                    data:'type',
                    name:'type'
                },
                {
                    data:'validity',
                    name:'validity'
                },                
                 {
                    data:'start',
                    name:'start'
                },
                {
                    data:'end',
                    name:'end'
                },
                {
                    data:'duration',
                    name:'duration'
                }
                
                

            ]
        });
    }



});
</script>


@endsection