@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('content')
    <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="m-subheader__title ">Lead</h3>
                </div>
                <div>
                    <a href="#" id="new-client" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom"><span><i class="la la-plus"></i><span>Lead</span></span></a>
                </div>
            </div>
        </div>
        <!-- END: Subheader -->
        <div class="m-content">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__body">
                    <table class="table table-striped- table-bordered table-hover table-checkable" id="clients-list">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Country</th>
                                <th>Last Login</th>
                                <th>Registration Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    (function($){
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            reload_datatable();

            function reload_datatable(){
            // dt.fnDraw();
			// $('#clients-list').each(function() {
                table = $('#clients-list').DataTable({
					'responsive':!0,
					'searchDelay':500,
					'processing':!0,
					"serverSide": true,
                    "stateSave": true,
					"ajax": {
						"url": base_url+"/clientDataTable",
						"type": "GET"
					},
					"order": [[ 0, "desc" ]],
					"aoColumns": [
						{ data: 'id', name: 'id', bSearchable: false, bVisible: false },
						{ data: 'name', name: 'name'},
						{ data: 'email', name: 'email'},
						{ data: 'country', name: 'country'},
                        { data: 'last_login', name: 'last_login'},
						{ data: 'created_at', name: 'created_at'},
                        { data: 'active', name: 'active'},
						{ data: 'action', name: 'action', bSearchable: false },
					]
				});
                // otable.fnDraw();
			}


        });
    })(jQuery);
    // $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
</script>
@endsection