@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') --}}
                        @include('pages.tagging_requests.filter')
                    <!----------------------------->
                    <div class="table-responsive mt-4">
                        <!-- <div class="processing_container">Processing...</div> -->
                        <table id="all-tag-requests-table" class="table table-striped table-bordered dt-responsive nowrap" width="100%">
                            <thead>
                                <th>Tag ID</th>
                                <!-- <th>Coach Employee Id</th> -->
                                <th>Coach</th>
                                <th>Coachee</th>
                                <th>Request Type</th>
                                <th>Effective Date</th>
                                <th>Coach Request Date</th>
                                <th>Reason</th>
                                <th>Created</th>
                                <th>Status</th>
                                <th class="text-center">Action</th>
                                <!-- th><Coachee Employee Id</th>
                                 -->
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center" colspan="10">No data yet.</td>
                                </tr>
                            </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') }}";
        $.parameters  =   JSON.parse('{!! json_encode($parameters) !!}')
        $('#tag-requests-link').addClass('active');
        // generalUseFunctions.initDataTable('all-tag-requests-table');
        $('#all-tag-requests-table').DataTable({
            /* dom: 'Bfrtip', */
            bFilter: false,
            "order": [7, 'desc'],
            processing: true,
            serverSide: true,
            "ajax": {
                url: $.api_url + "/get_tag_requests",
                data:function(d){
                    for(var key in $.parameters){
                        d[key] = $.parameters[key]
                    }
                }
            },
            "columns": [
                { "data": "request_id" },
                /* { "data": "coach_user_role_id" }, */
                { "data": "coach_user_role_id", 
                    "render": function ( data, type, row, meta ) {
                    return '<a href="#" id="filter_btn" onclick="generalUseFunctions.triggerFilter(\'coach_user_id\', ' +row.coach_user_role_id+');">'
                        + row.coach_first_name+' '+row.coach_last_name 
                        +'</a>';
                    }
                },
                { "data": "coachee_user_role_id", 
                    "render": function ( data, type, row, meta ) {
                    return '<a href="#" id="filter_btn" onclick="generalUseFunctions.triggerFilter(\'coachee_user_id\', ' +row.coachee_user_role_id+');">'
                        + row.first_name+' '+row.last_name 
                        +'</a>';
                    }
                },
                { "data": "action" },
                { "data": "effective_date",
                    render: function(data){
                        return moment(data).isValid() ? moment(data).format("LLL") : null
                    }
                },
                { "data": "coach_request_date",
                    render: function(data){
                        return moment(data).isValid() ? moment(data).format("LLL") : null
                    }},
                { "data": "request_reason"},
                { "data": "created_at",
                    render: function(data){
                        return moment(data).isValid() ? moment(data).format("LLL") : null
                    }},
                { "data": "status",
                    "render": function ( data, type, row, meta ) {
                        return '<span class="alert alert-' + (row.status == 'APPROVED' ? 'success' : (row.status == 'REJECTED' ? 'danger' : 'warning')) +'"> '+row.status+'</td>'
                    }
                },
                { "data": "status",
                    "render": function ( data, type, row, meta ) {
                        var ret ='<div class="text-center action_btns">'
                            +'<a class="text-primary" href="#" title="View Request" data-id="2" href="#" title="Reject Request" data-toggle="modal" data-target="#tagging_request_view_modal" onclick="taggingRequestsPageFunctions.openViewTagRequestModal(\''+escape(JSON.stringify(row))+'\');">'
                            +   '<i class="fa fa-eye"></i> View'
                            +'</a>'


                        if(row.status == 'PENDING'){
                            ret += '<a class="text-success" data-id="2" href="#" title="Approve Request" data-toggle="modal" data-target="#tagging_approve_reject_modal" onclick="taggingRequestsPageFunctions.openApproveOrRejectModal(\'APPROVED\', \''+escape(JSON.stringify(row))+'\')">'
                            +     '<i class="fa fa-check"></i> Approve'
                            + '</a>'
                            + '<a class="text-danger" data-id="2" href="#" title="Reject Request" data-toggle="modal" data-target="#tagging_approve_reject_modal" onclick="taggingRequestsPageFunctions.openApproveOrRejectModal(\'REJECTED\', \''+escape(JSON.stringify(row))+'\');">'
                            + '    <i class="fa fa-ban"></i> Reject'
                            + '</a>'
                        }

                        return ret + '</div>'
                    }
                },
            ],
            /* buttons : [{
					extend: 'excelHtml5',
					text: '<i class="fas fa-file-download"></i> Download All',
					className: 'btn btn-success btn-sm',
					exportOptions: {
						columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
					}
                }], */
                /* columnDefs : [{ 
					"targets": [1,3], //Comma separated values
					"visible": false,
					"searchable": false }
				] */
        });
        $('.buttons-excel.buttons-html5').removeClass('dt-button');
        $('.buttons-excel.buttons-html5').removeClass('dt-button');
    </script>
@endsection