@extends('layouts.admin')


@section('style')
@endSection

@section('script')


    <script>
        $(function () {

            var t = $('#voucher_series_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! route('admin.ajax_get_list_users') !!}',
                },
                scrollX: true,
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'user_uid', name: 'user_uid'},
                    {data: 'name', name: 'name'},
                    {data: 'email', name: 'email'},
                    {data: 'mobile', name: 'mobile'},
                    {data: 'address', name: 'address'},
                    {data: 'user_last_active_timestamp', name: 'user_last_active_timestamp'},
                    {data: 'completed_card', name: 'completed_card'},
                    {data: 'completed_grid', name: 'completed_grid'},
                    {data: 'rewards', name: 'rewards'},
                ],
                columnDefs: [{
                    targets: [0,1,2,3,4,5,6,7,8],
                    searchable: false,
                    orderable: false,
                    className: 'dt-center'
                }],
                autoWidth: false

            });

        });

    </script>

@endSection

@section('content')

    @component('admin.components.tabs')
        <table id="voucher_series_table" class="table table-bordered table-hover dataTable">
            <thead>
            <tr>
                <th>No.</th>
                <th>User uid</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile Number</th>
                <th>Address</th>
                <th>Last Active Date</th>
                <th>Completed Card</th>
                <th>Completed Grid</th>
                <th>Rewards</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    @endcomponent

@endsection