@extends('index')

@section('content')
	<div class="container krik-lead" id="krik-options-categories">
		<div class="row">
			<div class="col-md-12">
				<a href="{{ getenv('APP_URL') }}/admin/users/create">
        			<button type="button" class="btn krik-btn-new-leads krik-btn-new-leads-import pull-right"><i class="fa fa-plus-square-o krik-btn-space"></i>Add New User</button>
      			</a>
			</div>
		</div>
		
		<div class="row">
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-left">
                                <h3 class="panel-title">All Users</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="panel-body table-responsive">
                            <table class="table table-striped" id="krik-leads-table" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th style="max-width: 10px !important;">#</th>
                                        <th style="max-width: 50px !important;" class="text-center">Actions</th>
                                        <th>Name</th>
                                        <th>E-mail</th>
                                        <th>Role</th>
                                        <th>Permission</th>
                                        <th>Created at</th>
                                        <th>Updated at</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th><input type="text" class="table-filter" placeholder="Name"></th>
                                        <th><input type="text" class="table-filter" placeholder="E-mail"></th>
                                        <th><input type="text" class="table-filter" placeholder="Role"></th>
                                        <th><input type="text" class="table-filter" placeholder="Permission"></th>
                                        <th><input type="text" class="table-filter" placeholder="Created at"></th>
                                        <th><input type="text" class="table-filter" placeholder="Updated at"></th>
                                    </tr>
                                </tfoot>
                            </table>

                            <script>
                                $(function() {
                                    var table = $('#krik-leads-table').DataTable({
                                        processing: true,
                                        serverSide: false,
                                        ajax: {
                                            url: '{!! route('allUsers.data') !!}',
                                            type: 'POST',
                                            headers: {
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            }
                                        },
                                        scrollCollapse: true,
                                        searching: true,
                                        info: false,
                                        bSort: true,
                                        autoWidth: true,
                                        order: [[ 2, "asc"]],
                                        orderClasses: false,
                                        stateSave: false,
                                        deferRender: true,
                                        colReorder: true,
                                        columns: [
                                            {
                                                orderable: false,
                                                searchable: false,
                                                className: 'no-reorder',
                                                render: function() { return ''; }
                                            },
                                            { className: 'text-center no-selecting', data: 'action', name: 'action', orderable: false, searchable: false },
                                            { data: 'name'},
                                            { data: 'email' },
                                            { data: 'role' },
                                            { data: 'permissions', name: 'permissions' },
                                            { data: 'created_at' },
                                            { data: 'updated_at' }
                                        ],
                                        language: {
                                            search: "_INPUT_",
                                            searchPlaceholder: "Search",
                                            lengthMenu: "_MENU_",
                                            processing: "Loading data, please wait...",
                                            zeroRecords: "No data to display",
                                            buttons: {
                                                colvis: 'Columns'
                                            }
                                        },
                                        pageLength: 10,
                                        lengthMenu: [[ 10, 20, 50, 100, -1 ], [ 10, 20, 50, 100, 'All' ]],
                                        paging: true,
                                        pagingType: 'simple_numbers',
                                        select: {
                                            style: 'multi',
                                            selector: 'td:not(.no-selecting)'
                                        },
                                        dom: 'Bfrtilp',
                                        bInfo: true,
                                        buttons: [
                                            {
                                                extend: 'collection',
                                                text: 'Export',
                                                buttons: [
                                                {
                                                    extend: 'copyHtml5',
                                                    text: 'Copy (all entries from current page)'
                                                },
                                                {
                                                    extend: 'copyHtml5',
                                                    text: 'Copy (selected entries from current page)',
                                                    exportOptions: {
                                                    modifier: {
                                                        selected: true
                                                    }
                                                    }
                                                },
                                                {
                                                    extend: 'print',
                                                    text: 'Print (all entries from current page)'
                                                },
                                                {
                                                    extend: 'print',
                                                    text: 'Print (selected entries from current page)',
                                                    exportOptions: {
                                                    modifier: {
                                                        selected: true
                                                    }
                                                    }
                                                },
                                                {
                                                    extend: 'excelHtml5',
                                                    text: 'Excel (all entries from current page)'
                                                },
                                                {
                                                    extend: 'excelHtml5',
                                                    text: 'Excel (selected entries from current page)',
                                                    exportOptions: {
                                                        modifier: {
                                                            selected: true
                                                        }
                                                    }
                                                },
                                                {
                                                    extend: 'csvHtml5',
                                                    text: 'CSV (all entries from current page)'
                                                },
                                                {
                                                    extend: 'csvHtml5',
                                                    text: 'CSV (selected entries from current page)',
                                                    exportOptions: {
                                                        modifier: {
                                                            selected: true
                                                        }
                                                    }
                                                }
                                            ]
                                        },
                                        'colvis'
                                        ],
                                        initComplete: function(settings, json) {
                                            $('[data-info="tooltip"]').tooltip();
                                        },
                                        createdRow: function () {
                                            table.column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) { cell.innerHTML = table.page.len() * table.page.info().page + 1 + i; });
                                        }
                                    });
                                    
                                    table.on('column-reorder', function () {
                                        table.column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) { cell.innerHTML = table.page.len() * table.page.info().page + 1 + i; });
                                    });
                                    
                                    table.columns().every(function () {
                                        let that = this;
                                        $('input', this.footer()).on('keyup change', function () {
                                            if (that.search() !== this.value) {
                                                that.search(this.value).draw();
                                            }
                                        })
                                    })
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
		</div>

        <div class="modal krik-delete-user animated fadeIn" tabindex="0" role="dialog" aria-hidden="true" style="display: none;">
            <div class="bs-example-modal krik-delete-modal">
                <div class="modal modal-danger">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times krik-delete-modal-close"></i></button>
                                <h4 class="modal-title">Please confirm delete</h4>
                            </div>
                            <div class="modal-body">
                                <p>This action can not be undone.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default krik-modal-inline" data-dismiss="modal">Cancel</button>
                                {{ Form::open(array('url' => getenv('APP_URL') . '/admin/users', 'method' => 'delete', 'class' => 'krik-modal-inline')) }}
                                    <input type="hidden" name="id" value="">
                                    <button type="submit" class="btn btn-danger" id="krik-delete-user">Delete user</button>
                                {{ Form::close() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
@endsection