@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.select2')
@include('plugins.moment')
@include('plugins.daterangepicker')

@push('page-js')
    <script>
        const avl_balls = {
            'ball-yellow': '<span class="ball ball-xs ball-yellow" data-toggle="tooltip" title="Abaixo da Meta"></span>',
            'ball-green': '<span class="ball ball-xs ball-green" data-toggle="tooltip" title="Dentro da Meta"></span>',
            'ball-red': '<span class="ball ball-xs ball-red" data-toggle="tooltip" title="Crítico"></span>',
            'ball-purple': '<span class="ball ball-xs ball-purple" data-toggle="tooltip" title="Crítico"></span>'
        };

        const datatable = {
            element: null,
            init: options => {
                let rules = {
                    exportOptions: {
                        format: options.exportRules,
                    }
                };
                this.element = $(options.table).DataTable({
                    autoWidth: true,
                    processing: true,
                    scrollX: true,
                    language: {
                        loadingRecords: '&nbsp;',
                        processing: '<div class="spinner"></div>'
                    },
                    initComplete: () => {
                        $('#master-table-loader').hide();
                        $('#datatable-volumetry').show();
                    },
                    ajax: {
                        type: 'GET',
                        url: 'volumetry',
                        data: () => {
                            let operationsID = [],
                                callcentersID = [];

                            $.each($("input[name='operation[]']:checked"), function() {
                                operationsID.push($(this).val());
                            });

                            $.each($("input[name='callcenter[]']:checked"), function() {
                                callcentersID.push($(this).val());
                            });

                            return {
                                areaID: $('#filter-area').val(),
                                operationsID: operationsID,
                                callcentersID: callcentersID,
                                str_dateIni: $('input[name="daterangepicker_start"]').val(),
                                str_dateEnd: $('input[name="daterangepicker_end"]').val(),
                            }
                        },
                        beforeSend: () => $('#update').find('i').addClass('fa-spin'),
                        complete: response => {
                            $(window).resize();
                            $('#update').find('i').removeClass('fa-spin');
                            // console.log(response);
                            if (response.responseJSON != undefined) {
                                refreshLabelLastUpdate(`<span class="float-left">Último Intervalo:</span>${response.responseJSON.lastinterval}`);
                            }
                        }
                    },
                    dom: 'Bfrtip',
                    buttons: ['copy',
                        $.extend(true, {}, rules, {
                            extend: 'excelHtml5'
                        }),
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape'
                        }
                    ],
                    searching: true,
                    info: true,
                    columns: options.columns,
                    columnDefs: options.columnDefs
                });
            },
            reload: () => {
                this.element.ajax.reload();
            }
        };

        function datepickerLabel(start, end) {
            $('#reportrange span').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
        }

        function initDatepicker(element) {
            let datepickerOptions = {
                alwaysShowCalendars: true,
                changeMonth: false,
                stepMonths: 0,
                ranges: {
                    'Hoje': [moment(), moment()],
                    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
                    'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
                    'Este mês': [moment().startOf('month'), moment().endOf('month')],
                    'Último mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                opens: 'left',
                drops: 'down',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-bmg-primary',
                cancelClass: 'btn-secondary',
                locale: {
                    format: 'DD/MM/YYYY',
                    applyLabel: 'Aplicar',
                    cancelLabel: 'Cancelar'
                }
            };

            element.daterangepicker(datepickerOptions, (start, end) => {
                datepickerLabel(start, end);
                $('input[name="filter_dateIni"]').val(start.format('YYYY-MM-DD'));
                $('input[name="filter_dateEnd"]').val(end.format('YYYY-MM-DD'));
                datatable.reload();
            });

            $('#reportrange').on('apply.daterangepicker', (e, picker) => {
                datatable.reload();
            });
        }

        function initMasterTable() {
            datatable.init({
                table: '#datatable-volumetry',
                columns: [
                    {
                        data: 'historydate',
                        title: 'Data',
                        render: data => moment(data, 'YYYY-MM-DD').format('DD/MMM/YYYY')
                    },
                    {
                        data: 'Canal',
                        title: 'Canal'
                    },
                    {
                        data: 'Agrupamento',
                        title: 'Agrupamento'
                    },
                    {
                        data: 'Skill',
                        title: 'Skill',
                        render: (data, type, row) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return data; // + ' - ' + row.skillDescription
                            }
                        }
                    },
                    {
                        data: 'skillDescription',
                        title: 'Skill Descrição',
                        render: (data, type, row) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return data;
                            }
                        }
                    },
                    {
                        data: 'Recebidas',
                        title: 'Recebidas',
                        render: (data) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return parseInt(data).toLocaleString()
                            }
                        }
                    },
                    {
                        data: 'Atendidas',
                        title: 'Atendidas',
                        render: (data) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return parseInt(data).toLocaleString()
                            }
                        }
                    },
                    {
                        data: 'perAbandonadas',
                        title: '% Abandono',
                        render: (data, type, row) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                const ball = avl_balls[row.farolAbandonadas]
                                return `${parseFloat(data).toFixed(2).replace('.', ',')} % ${ball}`;
                            }
                        }
                    },
                    {
                        data: 'AtendidasSLA',
                        title: 'Atendidas SLA',
                        render: (data) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return parseInt(data).toLocaleString()
                            }
                        }
                    },
                    {
                        data: 'perAtendidasSLA',
                        title: 'SLA',
                        render: (data, type, row) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                const ball = avl_balls[row.farolSLA]
                                return `${parseFloat(data).toFixed(2).replace('.', ',')} % ${ball}`;
                            }
                        }
                    },
                    {
                        data: 'TMA',
                        title: 'TMA',
                        render: (data) => {
                            if (data == null) {
                                return ' - '
                            } else {
                                return parseInt(data).toLocaleString()
                            }
                        }
                    },
                    {
                        data: 'TME',
                        title: 'TME',
                        render: helper.datatables.seconds_to_time
                    },
                ],
                columnDefs:  [
                    {targets: '_all', className: 'text-center'},
                ],
                exportRules: {
                    body: function(data, row, column, node) {
                        switch (column) {
                            case 5:
                            case 6:
                            case 8:
                            case 10:
                                return data.toString().replace('.', '');
                            case 7:
                            case 9:
                                return $('<div>').html(data.replace(/\./g, '')).text();
                            default:
                                return data;
                        }
                    }
                }
            });
        }

        function clearFilters() {
            let areaFirst = $('#filter-area').find("option:first-child").val(),
                optionFirst = $('#filter-tier-area-' + areaFirst).find("option:first-child").val();

            $('#filter-area').val(areaFirst);
            $('#filter-tier-area-' + areaFirst).val(optionFirst);
            $('#filter-area').change();
            $(".filters-filters").slideUp('fast');
            datepickerLabel(moment(), moment());
        }

        function handleFilters() {
            $("#apply_filter, #update, #apply_callcenter_filter").on('click', function() {

                if ($("input[name='callcenter[]']:checked").length <= 0) {
                    return $.Notification.notify('warning', 'top right', 'Atenção', 'Selecione ao menos uma EPS');
                }

                datatable.reload();
                $("#page-filters").slideUp('fast');
                $(".shared-filter").slideUp('fast');
            });
        }

        function initPage() {
            // datepickerLabel(moment().startOf('month'), moment().endOf('month'));
            initDatepicker($('#reportrange'));
            initMasterTable();
            handleFilters();
        }

        initPage();

        $(document).ready(function() {
            $('.select2').select2();
            $('.btn-show-filter-row').trigger('click');

            // refreshLabelLastUpdate();
        });
    </script>
@endpush