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

@section('page_toolbar')
&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

<div class="card card-custom">
    <div class="card-body">
        <div class="row">
            <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label ">Search </label>
                {!! Form::text('keyword', '', ['class' => 'form-control ', 'placeholder'=>'Search by Keyword']) !!}
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group row">
                    <label class="col-form-label font-weight-bolder">&nbsp;</label>
                    <div class="col-sm-12 text-right">
                        <button type="button" class="btn btn-light-primary font-weight-bold filterSubmit">Filter
                        </button>
                        <button type="button" class="btn btn-light-success font-weight-bold" id="filterClear">Clear
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-hover display" id="dataTables"  style="width:100%">
            <thead>
                <tr>
                     <th>Student Name</th>
                     <th>User Name</th>
                     <th>Email</th>
                     <th>User type</th>
                     <th>Subscription Plan</th>
                     <th>Start Date</th>
                     <th>Expiry Date</th>
                     <th>Status</th>
                     <th>Price paid</th>    
{{--                     <th width="10%">Action</th>--}}
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@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;
    $(function () {
        //Generate List
        table = $('#dataTables').DataTable({
            searching: false,
            pagination: true,
            // pageLength: 10,
            responsive: true,
            searchDelay: 500,
            processing: !0,
            serverSide: !0,
            "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
            "pageLength": 50,
            // deferLoading: 0,
            ajax: {
                url: '{{ url('admin/subscriptions/students/lists') }}',
                data: search
            },
            columns: [
                {data: 0, name: 'student'},
                {data: 1, name: 'plan'},
                {data: 2, name: 'start_date'},
                {data: 3, name: 'expiry_date'},
                // {data: 4, name: 'action', orderable: !1, searchable: !1, "width": "15%"}
            ]
        });
        $(".search").keyup(function () {
            table.draw();
        });
        $(document).on('click', '.filterSubmit', function () {
            table.ajax.reload();
        });
        $("#filterClear").click(function (e) {
        
            $('input[name=keyword]').val('');
            table.draw();
        });
        

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

 @endsection