@extends('layout.default')
@section('page_toolbar')


<a class="btn btn-info px-2 font-weight-bold btn-sm quiz-export" href="{{ url('admin/most_watched_video/export') }}" >
    <i class="fas fa-download" aria-hidden="true"></i> Export Data
</a>
&nbsp;
<a class="btn btn-success px-2 font-weight-bold btn-sm"  href="{{ URL::previous() }}">
    <i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
</a>
@endsection
@section('content')
<!--begin::Content-->
<div class="card card-custom">
    <div class="card-body">
        <!-- filter end -->
        <table class="table table-hover display" id="dataTables"  style="width:100%">
            <thead>
                <tr>
                    <th width="20%">Rank</th>
                    <th>Unit Name</th>
                    <th width="20%">Watched Time</th>
                </tr>
            </thead>
            <tbody>
              
            </tbody>
        </table>
    </div>
</div>
<!--end::Content-->


@endsection
@section('styles')
<link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('scripts')
    <script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>

    <script>
        var table;   
        table = $('#dataTables').DataTable({
            
            bSearchable: true,
            pagination: true,
            pageLength: 10,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            initComplete: function (settings, json) {  
                $("#dataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");},
            ajax: {
                url: "{{ url('admin/most_watched_video/lists') }}",
                data: search
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'watched_time', name: 'watched_time', orderable: false, searchable: false},
               
            ]
        });

        $(".searchs").keyup(function () {
            table.draw();
        });

        function search(value) {
            value.search_name = $('input[name=name]').val();
        }
   
    </script>
@endsection