@extends('layouts.master')
@section('title', 'Users : List')
@section('content')
    <div class="middle-part-wrap location-list-page-wrap list_view">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Users</h3>
            </div>
            <div id="errormsg" class="text-center animated fadeIn" style="display: none; color:red">
                <strong class="errormsg"></strong>
            </div>
            <div id="successMsg" class="text-center animated fadeIn" style="display: none; color:green">
                <strong class="successMsg"></strong>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <table id="list" class="table table-striped table-bordered viewdatatable dt-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Provider</th>
                                        <th>Firebase UID</th>
                                        <th>Uploads</th>
                                        <th>Points</th>
                                        <th>Thumbs Given</th>
                                        <th>Thumbs Received</th>
                                        <th>Created Date</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>

    <link rel="stylesheet" type="text/css" media="screen" href="{!! asset('plugin/datatable/dataTables.bootstrap5.css') !!}">
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.bootstrap5.js') !!}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(".alert-success, .alert-danger").delay(5000).fadeOut();     
            $('#usersClass').addClass('active'); 
            fill_datatable();
        });
       
        function fill_datatable(){
          var table = $('#list').DataTable({
                scrollX: true,
                lengthMenu: [
                    [10, 25, 50],
                    [10, 25, 50]
                ],
                "order": [[0, "desc"]],
                "columnDefs": [
                    {
                        "targets": [],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [],
                        "searchable": false
                    }
                ],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{url('admin/users/getList')}}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {'_token': "{{csrf_token()}}"}
                },
                "columns": [
                    {"data": "id", "sortable": false},
                    {"data": "name", "className": "text-center"},
                    {"data": "email", "className": "text-center"},
                    {"data": "provider", "className": "text-center"},
                    {"data": "firebase_UID", "className": "text-center"},
                    {"data": "uploads", "className": "text-center"},
                    {"data": "points", "className": "text-center"},
                    {"data": "thumbsgiven", "className": "text-center"},
                    {"data": "thumbsreceived", "className": "text-center"},
                    {"data": "createdate", "className": "text-center"}
                ]
            });
        }
    </script>
@stop