@extends('admin.main')

@section('content')
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                         <div class="card-header">
                            <h4 class="card-title">Staff
                            @can('create.staff')
                              <a href="{{ route('staff.create') }}" class="btn btn-primary float-right">Create Staff</a>
                            @endcan
                          </h4>
                        </div>
                        <div class="card-body sales_new_table">
                          @include('admin.msg')
                             <div class="table-responsive">
                                    <table class="display table-striped table table-bordered" id="staff_table" width="100%">
                                        <thead class="">
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                                <th>Role</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#staff_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('get-staff') }}",
                type: "POST",
                data: function (data) {
                    data._token = "{{ csrf_token() }}";
                    data.search = $('input[type="search"]').val();
                },
                complete: function (xhr, status) {
                    $('[data-toggle="tooltip"]').tooltip();
                }
            },
            order: [['0', 'DESC']],
            pageLength: 10,
            searching: true,
            columns: [
                { data: 'index' }, { data: 'name' }, { data: 'email' }, { data: 'phone' }, { data: 'role' }, { data: 'status' }, { data: 'action' }
            ]
        });
    });
</script>
@endsection