@include('plugins.moment')
@include('plugins.daterangepicker')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.select2')
@push('page-js')
    <script>
        let currentTable, currentDate;
        const avlBalls = {
            'ball-yellow': '<span class="ball ball-xs ball-yellow" title="" data-original-title="Abaixo da Meta"></span>',
            'ball-green': '<span class="ball ball-xs ball-green" title="" data-original-title="Dentro da Meta"></span>',
            'ball-red': '<span class="ball ball-xs ball-red" title="" data-original-title="Crítico"></span>'
        };

        const filters = data => {
            let $filterTierSelected = $("#select_operation option:selected");
            data._token = `{{ csrf_token() }}`;
            if (currentDate) {
                data.Str_DateIni = currentDate.start.format('YYYY-MM-DD');
                data.Str_DateEnd = currentDate.end.format('YYYY-MM-DD');
            }

            data.Str_OperationID = $filterTierSelected.val();
            data.Str_SegmentID = [];
            $.each($(".segments-item input[name='segment[]']:checked"), function() {
                data.Str_SegmentID.push($(this).val());
            });

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

            @if (isset($showClassificationFilter))
                data.Str_FilterID = [];
                $.each($("input[name='classification[]']:checked"), function () {
                data.Str_FilterID.push($(this).val());
                });
            @endif
        };

        const tables = {
            builder: conf => {
                // Pra não bugar o thead após alterar a visão entre hora / dia / mês
                $(conf.table).empty();
                return $(conf.table).DataTable({
                    scrollY: $('html').innerHeight() - 475,
                    scrollX: true,
                    scrollCollapse: true,
                    fixedColumns: true,
                    ajax: {
                        url: document.URL + '&Type=' + conf.interval,
                        data: filters,
                        type: 'POST',
                        complete: function(response) {
                            $('#update i').removeClass('fa-spin');
                            hideLoading();
                            refreshLabelLastUpdate(
                                `<span class="float-left">Último Intervalo:</span>${response.responseJSON.lastinterval}`);
                            let groupAlias = $('#select_operation option:selected').text();
                            $('.area_alias_text').html(`- ${groupAlias}`);
                        },
                        error: function() {
                        }
                    },
                    dom: 'Bfrtip',
                    buttons: [
                        'copy',
                        {
                            extend: 'excelHtml5',
                            exportOptions: {
                                format: {
                                    body: function(data, row, column, node) {
                                        return $('<div>').html(data.replace(/\./g, '').replace(',',
                                            '.')).text();
                                    }
                                },
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',
                        }
                    ],
                    paging: false,
                    searching: true,
                    info: true,
                    order: [
                        [0, 'asc']
                    ],
                    columns: conf.columns,
                    ordering: conf.ordering,
                    initComplete: function() {
                        $('.buttons-copy').text('Copiar');
                        let t2 = document.getElementsByClassName('buttons-copy');

                        $(t2).click(function() {
                            setTranslate();
                        });
                        niceScrollTo('.dataTables_scrollBody');
                        $(`[data-toggle="tooltip"]`).tooltip();
                        this.api().columns.adjust();
                    }
                });
            },
            render: {
                sla: function(sla, color) {
                    return `<div class="ball-div">${parseFloat(sla).toFixed(2).replace('.', ',')} % ${avlBalls[color] || ''}</div>`;
                },
                abandono: function(data, type, row) {
                    if (type != 'display' || data == null) {
                        return data || '-';
                    }

                    let ball = avlBalls['ball-red'],
                        abandono = parseFloat(data).toFixed(2);
                    if (abandono <= 5) {
                        ball = avlBalls['ball-green'];
                    }

                    if ((abandono > 5 && abandono < 20)) {
                        ball = avlBalls['ball-yellow'];
                    }
                    return `<div class="ball-div">${abandono.toLocaleString().replace('.', ',')} % ${ball}</div>`;
                },
                var_vol: function(data, type, row) {
                    if (type != 'display' || data == null) {
                        return data || '-';
                    }

                    data = parseFloat(data);

                    let ball = avlBalls[row['ballVariacao']];

                    return `${parseFloat(data).toFixed(2).replace('.', ',')} %${ball !== undefined ? ball : ''}`;
                },
                var_tma: function(data, type, row) {
                    if (type != 'display' || data == null) {
                        return data || '-';
                    }

                    data = parseFloat(data);
                    let ball = avlBalls['red'];
                    if (data >= -5 && data <= 5) {
                        ball = avlBalls['green'];
                    }

                    if ((data > 5 && data < 10) || (data < -5 && data > -10)) {
                        ball = avlBalls['yellow'];
                    }

                    return `${parseFloat(data).toFixed(2).replace('.', ',')} %`;

                    // Pendente regra do farol
                    // return `${parseFloat(data).toFixed(2).replace('.', ',')} % ${ball}`;
                },
                percentual: function(data, type, row) {
                    if (data == null) {
                        return '-';
                    }
                    return parseFloat(data).toFixed(2).replace('.', ',') + ' %';
                },
                format: function(data, type, row) {
                    if (data == null) {
                        return '-';
                    }
                    return Math.round(parseFloat(data)).toLocaleString();
                },
                formatString: function(data, type, row) {
                    if (data == null) {
                        return '-';
                    }
                    return data;
                },
                fc_volume: function(data, type, row) {
                    if (type != 'display' || data == null) {
                        return data || '-';
                    }
                    data = parseFloat(data);
                    return data.toLocaleString();
                },
            }
        };

        $('#select_operation').change(function() {
            let tier = '.tier-' + $(this).val();
            $('#Segments .segments-item').hide().find('input').prop('checked', false);
            $('#Classification .classification-item').hide().find('input').prop('checked', false);
            $('.list-group-item-operation').hide();
            if ($(this).val()) {
                $('#Segments ' + tier).show().find('input').prop('checked', true);
                $('#Classification ' + tier).show().find('input').prop('checked', true);
            } else {
                $('#Segments .segments-item').show().find('input').prop('checked', true);
                $('#Classification .classification-item').show().find('input').prop('checked', true);
                $('.list-group-item-operation').show();
            }
        });

        $(document).ready(function() {
            $('.select2').select2();
            let $updateAll = $('#update');
            currentTable = tables.builder(table_hour);

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

                currentTable.ajax.reload();
                refreshLabelLastUpdate();
                $(".shared-filter").slideUp('fast');
            });

            $('#select_operation').change();

            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                currentTable.rows().remove().destroy();
                switch (e.target.getAttribute('href')) {
                    case '#table-hour':
                        currentTable = tables.builder(table_hour);
                        break;
                    case '#table-day':
                        currentTable = tables.builder(table_day);
                        break;
                    case '#table-month':
                        currentTable = tables.builder(table_month);
                        break;
                }
            });

            $('#reportrange').daterangepicker({
                alwaysShowCalendars: true,
                maxDate: moment(),
                minDate: '01/01/2017',
                showDropdowns: true,
                showWeekNumbers: false,
                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: daterangepicker.locales['pt-br'],
            }, function(start, end, label) {
                currentDate = {
                    start,
                    end
                };
                currentTable.ajax.reload();
                refreshLabelLastUpdate();
                $('#reportrange span').html(' ' + start.format('DD/MM/YYYY') + ' - ' + end.format(
                    'DD/MM/YYYY'));
            });

            $updateAll.on('click', function() {
                currentTable.ajax.reload();
                refreshLabelLastUpdate();
            });
        });

        function setTranslate() {
            $('#datatables_buttons_info').find('h2').text('Copiado para aréa de transferência');
        }
    </script>
@endpush
@php
$area = request()->get('area', '');
$grouping = request()->get('grouping', '');
$operation = request()->get('operation', '');

@endphp
@includeFirst([
"operations.master-table.scripts.config.{$area}-{$grouping}-{$operation}",
"operations.master-table.scripts.config.{$area}-{$grouping}-all",
"operations.master-table.scripts.config.default"
])