@include('plugins.moment')
@include('plugins.bootstrap-select')
@include('plugins.daterangepicker')
@include('plugins.owlcarousel')
@include('plugins.chartjs')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.datatables.fixedColumns')
@include('plugins.flotchart-updated')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')

@push('page-js')
    <script>
        let currentDate, graphsData, currentArea = 'Cartões';

        const filters = data => {
            data._token = `{{ csrf_token() }}`;
            if (currentDate) {
                data.dtInicio = currentDate.start.format('YYYY-MM-DD');
                data.dtFim = currentDate.end.format('YYYY-MM-DD');
            }

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

            return data;
        };

        const slide = {
            cookieName: 'maximized_slide',
            interval: cookie.get('maximized_slide_seconds') || 15,
            index: null,
            play() {
                let _this = this;
                $('#maximized-graphs-carousel').carousel({
                    interval: _this.interval * 1000,
                    cycle: true
                });
            },
            start() {
                if (slide.index >= 0) {
                    $('#maximized-graphs-carousel .active').removeClass('active');
                    $('#maximized-graphs-carousel .carousel-item').eq(slide.index).addClass('active');
                    slide.index = null;
                }
                slide.play();
                if ($('[data-slide="pause"]').hasClass('d-none')) {
                    $('#maximized-graphs-carousel').carousel('pause');
                }
            }
        };

        const ajax = {
            xhr: undefined,
            checkXhr() {
                if (this.xhr !== undefined && this.xhr.readyState === -1) {
                    this.xhr.abort();
                }
            },
            request(data = {}) {
                this.checkXhr();
                this.xhr = $.ajax({
                    url: document.URL,
                    data: filters(data),
                    method: 'POST',
                    success(response) {
                        charts.refreshDropdown(response.data);
                        graphsData = response.graphs;
                        charts.init();
                        // $('.dropdown-item.graphtype.selectorchange.type-voz:first').click();

                        if (!data.onlyGraphs) {
                            let $tabFullContent = $('#tab-full-content');
                            $tabFullContent.find('.table-responsive').getNiceScroll().remove();
                            $tabFullContent.html(response.table).promise().done(function() {
                                page.changeTabAfterContentLoaded();
                            });
                            niceScrollTo($tabFullContent.find('.table-responsive'));
                        }
                        refreshLabelLastUpdate(
                            `<span class="float-left">Último Intervalo:</span> ${response.lastInterval}`);
                    },
                });
            },
            requestPeriod(data = {}) {
                this.checkXhr();
                this.xhr = $.ajax({
                    url: document.URL,
                    data: filters(data),
                    method: 'POST',
                    success(response) {
                        graphsData = response.graphs;
                        charts.init();

                        if (!data.onlyGraphs) {
                            let $tabFullContent = $('#tab-full-content');
                            $tabFullContent.find('.table-responsive').getNiceScroll().remove();
                            $tabFullContent.html(response.table).promise().done(function() {
                                page.changeTabAfterContentLoaded();
                            });
                            niceScrollTo($tabFullContent.find('.table-responsive'));
                        }
                        refreshLabelLastUpdate(
                            `<span class="float-left">Último Intervalo:</span> ${response.lastInterval}`);
                    },
                });
            }
        };

        const charts = {
            currentCharts: [],
            kpisSettings: [{
                    selector: 'Volumetria',
                    meta: 'VolumeForecast',
                    real: 'Oferecidas',
                    suffix: ''
                },
                {
                    selector: 'Abandono',
                    meta: 'MetaAbandono',
                    real: 'percAband',
                    suffix: ' %'
                },
                {
                    selector: 'Nível de Serviço',
                    meta: 'MetaSLA',
                    real: 'percSLA',
                    suffix: ' %'
                },
                {
                    selector: 'TMA',
                    meta: 'MetaTMA',
                    real: 'TMA',
                    suffix: ''
                },
                {
                    selector: 'TME',
                    meta: 'MetaTME',
                    real: 'TME',
                    suffix: ''
                },
                {
                    selector: 'Recontato',
                    meta: 'MetaRecontato',
                    real: 'mediaRecontato',
                    suffix: ' %'
                },
                {
                    selector: 'Recontato > 30',
                    meta: 'MetaRecontatoDigital',
                    real: 'mediaRecontatoDigital',
                    suffix: ' %'
                },
                {
                    selector: 'NPS',
                    meta: 'MetaNPS',
                    real: 'mediaNPS',
                    suffix: ' %'
                },
            ],
            graphsExpanded: false,
            graphsCurrent: null,
            refreshDropdown(data) {
                let $dropdown = $(`#area-select`).empty();

                if (!data) return;

                data.Voz = data.Voz ? data.Voz : {};
                data.Digital = data.Digital ? data.Digital : {};

                for (const [key, value] of Object.entries(data.Voz)) {
                    $dropdown.append(
                        `<option class="dropdown-item graphtype selectorchange type-voz ${key === 0 ? 'selected' : ''}" value="${value.area}">${value.area}</option>`
                    );
                }

                for (const [key, value] of Object.entries(data.Digital)) {
                    $dropdown.append(
                        `<option class="dropdown-item graphtype selectorchange type-digital" value="${value.area}">${value.area}</option>`
                    );
                }
            },
            maximize(pos) {
                const carouselContainer = $('#maximized-graphs-container');
                const carouselCarousel = $('#maximized-graphs-carousel');
                charts.checkCarouselItemsVisibility(carouselCarousel);
                carouselContainer.removeClass('d-none');
                carouselCarousel.carousel(pos);
                charts.graphsExpanded = true;
                charts.graphsCurrent = pos;
            },
            checkCarouselItemsVisibility(carousel) {
                if (!carousel.find('.carousel-item.active').length) {
                    $(carousel.find('.carousel-item')[0]).addClass('active');
                }
            },
            minimize() {
                $('#maximized-graphs-container').addClass('d-none');
                charts.graphsExpanded = false
            },
            init() {
                charts.clearAllGraphs();

                if (graphsData[page.getValidCurrentTab()] === undefined) {
                    return;
                }

                $.map(charts.kpisSettings, function(settings, i) {
                    charts.prepareGraph(settings);
                });

                if (!charts.graphsExpanded) {
                    $('#maximized-graphs-container').addClass('d-none');
                }
            },
            clearAllGraphs() {
                this.currentCharts.map(item => {
                    item.destroy();
                });
                this.currentCharts = [];
            },
            reloadByFilter(type, period = '') {
                if (period == 'period') {
                    ajax.requestPeriod({
                        onlyGraphs: true,
                        str_type: type
                    });
                    return;
                }

                ajax.request({
                    onlyGraphs: true,
                    str_type: type
                })
            },
            getCurrentData() {
                return graphsData[page.getValidCurrentTab()][currentArea] || {};
            },
            getColumnsLine() {
                let xAxis = [];
                const dateColumns = charts.getTooltipGraphsDateFormatByFilter()['column'];
                const dateFormats = charts.getTooltipGraphsDateFormatByFilter();
                for (const [key, value] of Object.entries(charts.getCurrentData())) {
                    let data = $.isArray(dateColumns) ? value[dateColumns[0]] + ' ' + value[dateColumns[1]] : value[
                        dateColumns];
                    xAxis.push(moment(data, dateFormats.parse).format(dateFormats.display));
                }
                return xAxis;
            },
            getDateByPositionOnSeriesData(position) {
                return charts.getColumnsLine()[position][1];
            },
            prepareDataToTooltip(settings, data) {
                if (!data) {
                    return '~';
                }

                switch (settings.selector) {
                    case 'Abandono':
                    case 'Recontato':
                    case 'Recontato > 30':
                    case 'NPS':
                        return `${data} %`;
                    default:
                        return Math.round((+data + Number.EPSILON) * 100) / 100;
                }
            },
            getTooltipGraphsDateFormatByFilter() {
                let type = $('[data-type].active').data('type');
                switch (type) {
                    case 'day':
                        return {
                            parse: 'YYYY-MM-DD HH:mm', display: 'HH:mm', column: ['historydate', 'defaulttime'], type:
                                'day'
                        };
                    case 'month':
                        return {
                            parse: 'YYYY-MM-DD', display: 'DD/MM/YY', column: 'historydate', type: 'month'
                        };
                    case 'year':
                        return {
                            parse: 'YYYY-MM', display: 'MM/YY', column: 'period', type: 'year'
                        };
                }
            },
            getSeriesData(type) {
                let data = [];
                for (const [key, value] of Object.entries(charts.getCurrentData())) {
                    if (value[type] == undefined) value[type] = '0,0';
                    data.push(parseFloat(value[type].replace(',', '.') || 0));
                }

                return data;
            },
            prepareGraph(settings) {
                let meta = charts.getSeriesData(settings.meta),
                    real = charts.getSeriesData(settings.real);

                this.currentCharts.push(charts.create(`minigraph-${settings.selector}`, meta, real, false, settings
                    .suffix));
                this.currentCharts.push(charts.create(`graph-${settings.selector}`, meta, real, true, settings.suffix));
            },
            create(id, meta, real, big = false, suffix) {
                return Highcharts.chart(id, Highcharts.merge({
                    chart: {
                        type: 'areaspline',
                        height: big ? '200px' : '100px',
                    },
                    xAxis: {
                        categories: charts.getColumnsLine(),
                        visible: big,
                    },
                    yAxis: {
                        title: {
                            text: null,
                        },
                        visible: big,
                    },
                    title: {
                        text: null,
                    },
                    legend: {
                        enabled: false
                    },
                    series: [{
                            name: 'Real',
                            color: '#ff7043',
                            data: real
                        },
                        {
                            name: 'Meta',
                            color: '#3bafda',
                            data: meta,
                            fillOpacity: 0
                        }
                    ],
                    tooltip: {
                        shared: true,
                        valueSuffix: $('#period-filter-graph .selectorchange.active').data('type') !==
                            'day' ? suffix : ''
                    },
                    plotOptions: {
                        areaspline: {
                            marker: {
                                enabled: real.length <= 1,
                            },
                            fillOpacity: 0.2,
                        }
                    }
                }, Highcharts.themeDarkUnica), function() {
                    if (page.currentTab != '#tab-digital' && (id == 'minigraph-Recontato > 30' ||
                            'graph-Recontato > 30')) {
                        setTimeout(() => {
                            $('.kpiDigital').parent().hide();
                        }, 1000);
                    } else if (page.currentTab == '#tab-digital') {
                        $('.kpiDigital').parent().show();
                    }
                });
            },
        };

        const page = {
            currentTab: '#tab-voz',
            getValidCurrentTab() {
                return page.currentTab === '#tab-voz' ? 'Voz' : 'Digital';
            },
            bindTabs() {
                $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                    $(page.currentTab + ' .table-responsive').getNiceScroll().remove();
                    niceScrollTo(page.currentTab + ' .table-responsive');
                    page.currentTab = $(e.target).attr('href');
                    setTimeout(function() {
                        $(page.currentTab + ' .table-responsive').getNiceScroll().resize();
                        page.adjustAreasFilters();
                    }, 150);
                });
            },
            changeTabAfterContentLoaded() {
                let bkpCurrentTab = page.currentTab;
                $(`.nav-pills a[href="#tab-voz"]`).click();
                $(`.nav-pills a[href="${bkpCurrentTab}"]`).click();
            },
            adjustAreasFilters() {
                if (page.getValidCurrentTab() === 'Digital') {
                    $('.type-voz').addClass('d-none');
                    $('.type-digital').removeClass('d-none').click();
                } else {
                    $('.type-voz').removeClass('d-none').click();
                    $('.type-digital').addClass('d-none');
                }
            }
        };

        $(function() {
            ajax.request();
            page.bindTabs();
            $('#reportrange span').html(' ' + moment().format('DD/MM/YYYY') + ' - ' + moment().format(
                'DD/MM/YYYY'));

            $('.maximizeGraph').click(function() {
                charts.maximize($(this).data('pos'));
            });

            $('.minimizeGraph').click(function() {
                charts.minimize();
            });

            $('#tabs').on("click", "li", function(event) {
                setTimeout(() => {
                    if ($(this).children().attr('href') == '#tab-voz')
                        $('#area-select').val($('#area-select > option.type-voz:first').val())
                        .change();
                    else if ($(this).children().attr('href') == '#tab-digital')
                        $('#area-select').val($('#area-select > option.type-digital:first').val())
                        .change();
                }, 500);
            });

            $('#area-select').on('change', function() {
                let type = $(this).find(':selected').html();

                if ($(this).find(':selected').hasClass('graphtype')) {
                    currentArea = type;
                    charts.init();
                } else {
                    charts.reloadByFilter($(this).find(':selected').data('type'));
                }
            });

            $(document).on('focus', '.selectorchange', function() {
                if ($(this).hasClass('active')) {
                    return;
                }

                $(this).parent().find('.active').removeClass('active');
                $(this).addClass('active');
                let type = $(this).html();
                $(this).parent().parent().find('.text-filtered').html($(this).html());

                if ($(this).hasClass('graphtype')) {
                    currentArea = type;
                    charts.init();
                    $(this).addClass('active');
                } else {
                    charts.reloadByFilter($(this).data('type'), 'period');
                }
            });

            $(document).on('click', '.show-row-detail', function() {
                $(window).resize();
                $(this).toggleClass('fa-eye-slash');
                $(`span[data-group="${$(this).data('group')}"][data-row-detail="${$(this).data('row-detail')}"]`)
                    .toggle();
                setTimeout(function() {
                    $('.table-responsive').getNiceScroll().resize();
                }, 50)
            });

            $('#update-all, #apply_callcenter_filter').on('click', function() {
                ajax.request({
                    str_type: $('#period-filter-graph .selectorchange.active').data('type')
                });
                $(".shared-filter").slideUp('fast');
            });

            $('#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
                };
                $('#reportrange span').html(' ' + start.format('DD/MM/YYYY') + ' - ' + end.format(
                    'DD/MM/YYYY'));
                ajax.request({
                    str_type: $('#period-filter-graph .selectorchange.active').data('type')
                });
                $(".shared-filter").slideUp('fast');
            });

            let $boxTimeView = $('#box-time-view');

            $('[data-slide="enable"]').click(function() {
                $('.slide-controls').toggle();
            });

            $('.carousel-top-control[data-slide]').click(function(e) {
                if ($(this).attr('data-slide') == 'cycle' || $(this).attr('data-slide') == 'pause') {
                    $('.carousel-top-control[data-slide="cycle"], .carousel-top-control[data-slide="pause"]')
                        .toggleClass('d-none');
                }
            });

            $boxTimeView.keyup(function(e) {
                if (e.which == 13) {
                    cookie.set('maximized_slide_seconds', $(this).val());
                    slide.interval = $(this).val();
                    $('#maximized-graphs-carousel').carousel('dispose');
                    slide.play();
                }
            });

            $boxTimeView.focusout(function(e) {
                cookie.set('maximized_slide_seconds', $(this).val());
                slide.interval = $(this).val();
                $('#maximized-graphs-carousel').carousel('dispose');
                slide.play();
            });

            $('.carousel').on('slide.bs.carousel slid.bs.carousel', function() {
                $(window).resize();
            });

            $boxTimeView.trigger('focusout');

            $('#export-all').click(function(e) {
                window.open(document.URL + '/export?' + $.param(filters({})), '_blank');
            });
        });

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', '#fullscreen-content-page',
            function() {
                $(page.currentTab + ' .table-responsive').getNiceScroll().remove();
                niceScrollTo(page.currentTab + ' .table-responsive');
            });
    </script>
@endpush