@extends('layouts.app')

@push('css')
@endpush

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Users</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">Manage Users</li>
                        <!-- <li class="breadcrumb-item active">Dashboard v1</li> -->
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">User List</h3>
                            @if(auth()->user()->isAbleTo('add', \App\Model\Modules::USERS))
                                <a href="{{ route('users.create') }}" class="btn btn-primary float-right" title="Add New User"><i class="fa fa-plus" aria-hidden="true"></i> Add User</a> 
                            @endif                                
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="userlisttbl" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone Number</th>
                                            <th>User Role</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('script')
@if(session()->has('message'))
    <script type="text/javascript">
        Toast.fire({
            icon: "{{ session()->get('icon') }}",
            //type: "{{ session()->get('type') }}",
            title: "{{ session()->get('message') }}",
        });
    </script>
@endif
<script type="text/javascript">
    var user_list_table;
    $(document).ready(function() {
        intializeUserTable();
    });

    function intializeUserTable()
    {
        user_list_table = $('#userlisttbl').DataTable({
            dom: 'lBfrtip<"actions">',
                buttons: [],
                "destroy"   : true,
                "processing": true,
                "serverSide": true,
                'searching' : true,
                "pageLength": 10,
                "ajax":{
                    "url"     : "{{ route('users.index')}}",
                    "dataType": "json",
                    "type"    : "GET",
                    "data"    :{ _token: "{{csrf_token()}}"}
                },
                "columns": [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    { "data": "name"},
                    { "data": "email"},
                    { "data": "phone_no"},
                    { "data": "role_name"},
                    { "data": "action",orderable: false, searchable: false, className: "text-center" }
                ],
        });
    }

    function deleteUser(id)
    {
        Swal.fire({
            text: "Are you sure you want to delete this user ?",
            icon: 'warning',
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Delete'
        }).then((result) => {
            if (result.value) {
                //send request to server
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type:'DELETE',
                    url:"{{ url('users')}}"+'/'+id,
                    success:function(data){
                        Swal.fire(
                            data['title'],
                            data['message'],
                            data['type']
                        ).then((result) => {
                            user_list_table.ajax.reload();
                        });
                    }
                });
            }
        })
    }
</script>
@endpush