@extends('admin.master2')
@section('main')
    <main id="js-page-content" role="main" class="page-content">
        <ol class="breadcrumb page-breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
            <li class="breadcrumb-item">Productivity</li>
            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
        </ol>
        <div class="row">


            <div class="col-xl-12">
                <div id="panel-5" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Productivity Stats
                        </h2>
                        <div class="panel-toolbar">
                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                            <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
                            <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
                        </div>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab"><i class="fal fa-user mr-1"></i>Users Activity Log </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab"><i class="fal fa-file-alt mr-1"></i>Cases Status</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3" role="tab"><i class="fal fa-user mr-1"></i>Agents Productivity</a>
                                </li>
                            </ul>
                            <div class="tab-content border border-top-0 p-3">
                                <br>
                                <div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
                                    <div class="input-group col-lg-3">
                                    <label for="user-activity-log">Date Range</label>
                                    </div>
                                    <div class="input-group col-lg-3">
                                        <input type="text" class="form-control date-picker-range-selector" placeholder="Select date" id="user-activity-log">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="col-lg-12">
                                        <table id="dt_user_activity_log" class="table table-striped table-bordered table-hover" width="100%">
                                            <thead>
                                            <tr>
                                                <th>Date/Time</th>
                                                <th>User</th>
                                                <th>IP</th>
                                                <th>Action</th>
                                                <th>Case ID</th>
                                            </tr>
                                            </thead>
                                            <tfoot>
                                            <tr>
                                                <th>Date/Time</th>
                                                <th>User</th>
                                                <th>IP</th>
                                                <th>Action</th>
                                                <th>Case ID</th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
                                    <div class="col-lg-3">
                                        <label for="cases-status">Date Range</label>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="input-group">
                                            <input type="text" class="form-control date-picker-range-selector" placeholder="Select date" id="cases-status">
                                            <div class="input-group-append">
                                                <span class="input-group-text fs-xl">
                                                    <i class="fal fa-calendar"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <table id="dt_cases_status" class="table table-striped table-bordered table-hover" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Draft</th>
                                            <th>Waiting File Submission</th>
                                            <th>New</th>
                                            <th>IA Awaiting Claimant</th>
                                            <th>Awaiting Respondent</th>
                                            <th>Awaiting Claimant’s Final Comments</th>
                                            <th>Claimant Final Comments Published</th>
                                            <th>Awaiting Respondent’s Final Comments</th>
                                            <th>Awaiting Case Handler Selection</th>
                                            <th>Awaiting Determination</th>
                                            <th>Determination Published</th>
                                            <th>Determination in Progress</th>
                                            <th>Determination Review</th>
                                            <th>Closed</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel">
                                    <div class="col-lg-3">
                                        <label for="agents-productivity">Date Range</label>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="input-group">
                                            <input type="text" class="form-control date-picker-range-selector" placeholder="Select date" id="agents-productivity">
                                            <div class="input-group-append">
                                                <span class="input-group-text fs-xl">
                                                    <i class="fal fa-calendar"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <table id="dt_agents_productivity" class="table table-striped table-bordered table-hover" width="100%">
                                        <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Agent Name</th>
                                            <th>Agents unread messages (total)</th>
                                            <th>Agents unread messages over 24 hours</th>
                                            <th>Waiting customer reply</th>
                                            <th>Waiting respondent reply</th>
                                            <th>Messages from respondent</th>
                                            <th>Message sent</th>
                                            <th>Cases moved</th>
                                            <th>Overdue cases (next action)</th>
                                        </tr>
                                        </thead>
                                        <tfoot>
                                        <tr>
                                            <th>Date</th>
                                            <th>Agent Name</th>
                                            <th>Agents unread messages (total)</th>
                                            <th>Agents unread messages over 24 hours</th>
                                            <th>Waiting customer reply</th>
                                            <th>Waiting respondent reply</th>
                                            <th>Messages from respondent</th>
                                            <th>Message sent</th>
                                            <th>Cases moved</th>
                                            <th>Overdue cases (next action)</th>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script src="{{ asset ("js/moment/2.18.1/moment.min.js") }}"></script>
    <script src="{{ asset ("js/daterangepicker/3.14.1/daterangepicker.min.js") }}"></script>
    <script>

        $(document).ready(function() {

            $('#productivity').addClass('active');

            $('#user-activity-log, #agents-productivity, #cases-status').daterangepicker(
                {
                    opens: 'left',
                    locale:
                        {
                            format: 'DD/MM/YY'
                        },
                },
                function(start, end, label)
                {
                    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                });



            var dt_cases_status = $('#dt_cases_status').DataTable({
                dom: "Bfrtip",
                'processing': true,
                'serverMethod': 'post',
                'searching': true,
                'ajax': {
                    'url': `${public_path}/admin/productivity/cases-status`,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    'data': function (data) {// Read values

                        var dataPickerSelector = $('#cases-status');
                        var startDate = dataPickerSelector.data('daterangepicker').startDate.format("YYYY-MM-DD");
                        var endDate = dataPickerSelector.data('daterangepicker').endDate.format("YYYY-MM-DD");
                        // Append to data
                        data.startDate = startDate;
                        data.endDate = endDate;
                    }
                },
                columns: [
                    { data: "Date" },
                    { data: "Draft" },
                    { data: "Waiting File Submission" },
                    { data: "New" },
                    { data: "IA Awaiting Claimant" },
                    { data: "Awaiting Respondent" },
                    { data: "Awaiting Claimant’s Final Comments" },
                    { data: "Claimant Final Comments Published" },
                    { data: "Awaiting Respondent’s Final Comments" },
                    { data: "Awaiting Case Handler Selection" },
                    { data: "Awaiting Determination" },
                    { data: "Determination Published" },
                    { data: "Determination in Progress" },
                    { data: "Determination Review" },
                    { data: "Closed" },
                ]
            } );

            var dt_agents_productivity = $('#dt_agents_productivity').DataTable({
                dom: "Bfrtip",
                'processing': true,
                'serverMethod': 'post',
                'searching': true,
                'ajax': {
                    'url': `${public_path}/admin/productivity/agents-productivity`,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    'data': function (data) {// Read values

                        var dataPickerSelector = $('#agents-productivity');
                        var startDate = dataPickerSelector.data('daterangepicker').startDate.format("YYYY-MM-DD");
                        var endDate = dataPickerSelector.data('daterangepicker').endDate.format("YYYY-MM-DD");
                        // Append to data
                        data.startDate = startDate;
                        data.endDate = endDate;
                    }
                },
                columns: [
                    { data: "Date" },
                    { data: "agent_name" },
                    { data: "unread_messages_total" },
                    { data: "unread_messages_over_24_hours" },
                    { data: "waiting_customer_reply" },
                    { data: "waiting_respondent_reply"},
                    { data: "messages_from_respondent"},
                    { data: "message_sent"},
                    { data: "cases_moved"},
                    { data: "overdue_cases"}
                ]
            } );

            var  dt_user_activity_log = $('#dt_user_activity_log').DataTable({
                dom: "Bfrtip",
                'processing': true,
                'serverMethod': 'post',
                'searching': true,
                'ajax': {
                    'url': `${public_path}/admin/productivity/user-activity-log`,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    'data': function (data) {// Read values

                        var dataPickerSelector = $('#user-activity-log');
                        var startDate = dataPickerSelector.data('daterangepicker').startDate.format("YYYY-MM-DD");
                        var endDate = dataPickerSelector.data('daterangepicker').endDate.format("YYYY-MM-DD");
                        // Append to data
                        data.startDate = startDate;
                        data.endDate = endDate;
                    }
                },
                columns: [
                    { data: "date" },
                    { data: "user" },
                    { data: "ip" },
                    { data: "action" },
                    { data: "case_id" },
                ]
            } );

            $(".date-picker-range-selector").click(function ( event ){
                var table  = $(this).attr('id');
                var date_range =$(this).val();
                $(".applyBtn").click( function ( ) {
                    switch (table) {
                        case 'cases-status' :
                        dt_cases_status.ajax.reload();
                        break;
                        case 'agents-productivity' :
                            dt_agents_productivity.ajax.reload();
                            break;
                        case 'user-activity-log' :
                            dt_user_activity_log.ajax.reload();
                    }
                    $(".applyBtn").unbind("click");
                } );
            });


        });
    </script>
@stop
@section ('css')
    <link rel="stylesheet" href="{{ asset ("css/daterangepicker/3.14.1/daterangepicker.css") }}">
@stop