@extends('admin.layouts.layout')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/admin/plugins/jsgrid/jsgrid.css') }}">
@endsection

@section('content')
    <div class="table-responsive">
        <div id="grid-table">

        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/admin/plugins/jsgrid/jsgrid.js') }}"></script>
    <script>
        $(function () {
            $("#grid-table").jsGrid({
                width: "100%",
                height: "100%",

                filtering: true,
                inserting: true,
                editing: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 10,
                pageButtonCount: 5,
                deleteConfirm: "Вы действительно хотите удалить данные?",
                fields: [
                    {name: "id", type: "hidden", css: 'd-none'},
                    {name: "name", type: "text", width: 150, validate: 'required'},
                    {name: "email", type: "text", width: 150, validate: 'required'},
                    {name: "roles", type: "text", width: 150},
                    {name: "permissions", type: "text", width: 150},
                    {type: "control"},
                ],
                controller: {
                    loadData: function (filter) {
                        return $.ajax({
                            type: "GET",
                            url: "{{ route('admin.filter') }}",
                            data: filter,
                            dataType: "JSON",
                            success: function(data){
                                console.log(data.filter);
                            },
                        });
                    },
                    insertItem: function (item){
                        return $.ajax({
                            type: "POST",
                            url: "{{ route('admin.filter') }}",
                            data:item,
                        });
                    }
                }
            });
        });
    </script>
@endsection