@extends('layouts.app')

@section('content')
    <div class="container-fluid d-block">
        <div id="all-users-page-container" class="py-4">
            <div class="card">
                <div class="card-header">
                    {{ $page_title }}
                </div>
                <div class="card-body">
                    <!-------- Filter Modal ------->
                    @include('pages.includes.filter_forms.main_filter_form')
                    <!----------------------------->
                    <div class="table-responsive mt-4">
                        <div class="processing_container">Processing...</div>
                        <table id="all-users-table" class="table table-striped table-bordered dt-responsive nowrap" width="100%">
                            <thead>
                                <th>User ID</th>
                                <th>Employee ID</th>
                                <th>Name</th>
                                <th>Nickname</th>
                                <th>Email</th>
                                <th>Contact No</th>
                                <th>Gender</th>
                                <th>Position</th>
                                <th>Group</th>
                                <th>Department</th>
                                <th>Section</th>
                                <th>Created</th>
                                {{-- @if ($user['role_id'] == 1)
                                    <th class="text-center">Action</th>
                                @endif --}}
                                @can('manage-users')
                                    <th class="text-center">Action</th>
                                @endcan
                            </thead>
                            <tbody>
                                @if($user_list->responseCode == 800)
                                   <!--  -->
                                @else
                                     <tr>
                                        <td class="text-center" colspan="9">No data yet.</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @include('pages.includes.footer')
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $.csrf_token        =   $('meta[name="csrf-token"]').attr('content');
        $.backoffice_url    =   "{{ env('BACKOFFICE_URL') }}";
        $.manage_users    =   {{ $manage_users }};

        if($.user_role_id != 0) {
            $('.grp_class').addClass('d-none');
            $('#group').trigger('onchange');
        }

        generalUseFunctions.onLoadLinks();

        $('#all-users-table').DataTable({
            dom: 'Bfrtip',
            bInfo: false,
            bFilter: false,
            aaSorting: [],
            buttons: [{
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-download"></i> Download All',
                className: 'btn btn-success btn-sm',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                }
            }],

            order: [[ 0, "desc" ]],
            "columnDefs": [{
                "targets": [7, 3], //Comma separated values
                "visible": false,
                "searchable": false }
            ],
        });
        $('.buttons-excel.buttons-html5').removeClass('dt-button');

        // generalUseFunctions.initializeDataTable('all-users-table');
        generalUseFunctions.initializeSelectPicker();
        if( $('#group').val()){
            generalUseFunctions.selectFilter('group', $('#group').val(), null, null);
        }else{
            generalUseFunctions.filterFunction('/all-users');
        }

        // generalUseFunctions.initializeDatePicker();
    </script>
@endsection