@extends('layouts.admin_default')
@section('title', 'Manage Users')
@section('page', 'Users / List')
@section('content')

@section('content')
    <style type="text/css">
        .w-content {
            display: flex;
            justify-content: space-between;
        }

        .w-info {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 600;
        }

        .w-info h6 {
            padding: 6px 20px;
            font-weight: bold;
        }

        .w-icon {
            width: 40px;
            padding: 8px;
            border-radius: 50%;
            color: #fff;
        }
    </style>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div id="delete_bd_ms"></div>
                    @if (session()->has('message'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            <strong>{{ session()->get('message') }}</strong>
                        </div>
                    @endif

                    <div class="content pt-0">
                        <div class="card mt-4">
                            <div class="card-header">
                                <h5 class="card-title">Dashboard / Manage Users</h5>
                            </div>
                            <div class="text-right" style="margin-right:38px;">
                                <a href="{{ url('add-user') }}" class="btn btn-primary mb-4">Add +</a>
                            </div>
                            <div class="table-responsive">
                                <table id="multi-column-ordering" class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Mobile</th>
                                            <th>Role</th>
                                            <th>Created Date</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableItem">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

@endsection

@section('footer')

    <script type="text/javascript">
        $(document).ready(function() {

            // DataTable
            $('#multi-column-ordering').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('getUserList') }}",
                columns: [{
                        data: 'name'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'mobile'
                    },
                    {
                        data: 'role'
                    },

                    {
                        data: 'created_at'
                    },
                    {
                        data: 'status'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallback: function(settings) {

                    var response = settings.json;
                    $('#totalRecords').text(response.totalRecords);
                    $('#activeRecords').text(response.activeRecords);
                    $('#inactiveRecords').text(response.inactiveRecords);
                    $('#deletedRecords').text(response.deletedRecords);
                    console.log(response);
                    updateIcon()

                },
            });
        });
    </script>

    <!-- footer script if required -->
@endsection