@extends('layouts.app')

@section('css')
<link href="{{URL::asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
@endsection

@section('page-header')
<div class="page-header mt-5-7">
    <div class="page-leftheader">
        <h4 class="page-title mb-0">{{ __('Users') }}</h4>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{ route('admin.user.list') }}"><i class="mdi mdi-account-multiple mr-2 fs-12"></i>{{ __('Admin') }}</a></li>
            <li class="breadcrumb-item active">{{ __('User List') }}</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="card border-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped" id="userTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ __('Avatar') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Email') }}</th>
                        <th>{{ __('Role') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Available Minutes') }}</th>
                        <th>{{ __('Created') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{URL::asset('plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>
<script>
$(function () {
    $('#userTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.user.list') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false},
            {data: 'avatar', name: 'avatar', searchable: false, orderable: false},
            {data: 'name', name: 'name'},
            {data: 'custom-email', name: 'custom-email'},
            {data: 'custom-group', name: 'custom-group'},
            {data: 'custom-status', name: 'custom-status'},
            {data: 'custom-minutes', name: 'custom-minutes'},
            {data: 'created-on', name: 'created-on'},
            {data: 'actions', name: 'actions', searchable: false, orderable: false},
        ],
        order: [[7, 'desc']]
    });
});
</script>
@endsection