@extends('admin.layouts.nav-footer')
@section('css-plugins')
<link rel="stylesheet"
    href="{{ asset('admin-assets/vendors/datatables/media/css/jquery.dataTables.css') }}" />
@endsection
@section('js-plugins')
<!-- page plugins js -->
<script src="{{ asset('admin-assets/vendors/datatables/media/js/jquery.dataTables.js') }}">
</script>
<script src="{{ asset('admin-assets/js/table/user-table.js') }}">
</script>

<!-- page js -->
<script>
    function renderActions(data, type, row, meta) {
	actions='<div class="mrg-top-10 text-center dropdown "></div>'
	actions+='<button class="btn btn-icon btn-flat btn-rounded dropdown-toggle" data-toggle="dropdown" aria-expanded="false">'
	actions+='<i class="ti-more-alt"></i></button>'
    actions+='<ul class="dropdown-menu">'
    @can('user-edit')
	actions+='<li>'
	actions+='<a href="'+window.location+'/'+row.id+'/edit">';
	actions+='<i class="ei-save-edit pdd-top-10 pdd-right-10"></i><span>Edit</span></a></li>'
    actions+='<li role="separator" class="divider"></li>'
    @endcan

    @can('user-delete')
	actions+='<li><form action="'+window.location+'/'+row.id+'" method="post" class="delete-form">'
	actions+='<input type="hidden" name="_method" value="delete" />'
	actions+=csrf
	actions+='<button class="btn-delete" type="submit"><i class="ei-delete pdd-right-10"></i>'
    actions+='<span>Delete</span></button></form>'
    @endcan
	
	return actions
}
    $(function () {
        $('#user-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('user.data') !!}',
            columns: [{
                    data: 'id',
                    render: renderuser
                },
                {
                    data: 'email',
                    render: renderEmail
                },
                {
                    data: 'created_at',
                    render: renderDate
                },
                {
                    data: 'status',
                    render: renderStatus
                },
                @if(Auth()->user()->hasPermissionTo('user-edit') || Auth()->user()->hasPermissionTo('user-delete'))
                {
                    render: renderActions
                }
                @endif
            ],
            columnDefs: [
                { orderable: false, targets: -1 }
            ]
        });
    });
</script>
@endsection
@section('content')
<!-- Content Wrapper START -->
<div class="main-content">
    <div class="container-fluid">
        @if($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
        @can('user-create')
            <a href="{{ route('user.create') }}" class="btn btn-primary float-right btn-sm">
            <i class="ti-plus pdd-right-5"></i>
            <span>Add user</span>
        </a>
        @endcan
        
        <div class="page-title">
            <h4>Users</h4>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-block">
                        <div class="table-overflow">
                            <table id="user-table" class="table table-lg table-hover">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Created at</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Content Wrapper END -->
@endsection