@extends('layouts.app')

@section('content')
    <div class="container-fluid d-block">
        <div id="all-coaches-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-coaches-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>Contact No</th>
                                <th>Gender</th>
                                <th>Position</th>
                                <th>Group</th>
                                <th>Division</th>
                                <th>Department</th>
                                <th>Created</th>
                                <th class="text-center">Action</th>
                            </thead>
                            <tbody>
                                @if ($coaches->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') }}";

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

        generalUseFunctions.onLoadLinks();
        // generalUseFunctions.initializeDataTable('all-coaches-table');
        $('#all-coaches-table').DataTable({
            dom: 'Bfrtip',
            bInfo: false,
            bFilter: false,
            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 ,11]
                }
            }],
            "columnDefs": [{
                "targets": [3], //Comma separated values
                "visible": false,
                "searchable": false }
            ],
            order: [[ 0, "desc" ]]
        });
        if( $('#group').val()){
            generalUseFunctions.selectFilter('group', $('#group').val(), null, null);
        }else{
            generalUseFunctions.filterFunction('/all-coaches');
        }

        $('.buttons-excel.buttons-html5').removeClass('dt-button');
    </script>
@endsection