@include('plugins.moment')
@include('plugins.daterangepicker')
@include('plugins.jquery-ui.sortable')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')
@push('page-js')
    <script>
        const page_options = {
            run: function () {
                if (boxes.auto_update) {
                    boxes.selfUpdate();
                }
                if (boxes.expanded) {
                    $('.callflow-body').show(0);
                }
                if (cookie.get('callflow_slide') == 'enable') {
                    slide.enable();
                }
                $('div[role="tooltip"]').remove();
            }
        };

        var dateGeneral = '';

        function reloadPage() {
            let $updateAll = $('#update-all'),
            eps = '';
            epsA = [];

            let count = 0;
            let callcenter = $("input[name='callcenter[]']:checked");

            callcenter.each(function () {
                if ( callcenter.length > 1) {
                    epsA.push($(this).val());
                    count ++;
                }else {
                    eps = $(this).val();
                }

            });

            epsA = epsA[0] + ',' + epsA[1];

            $.ajax({
                type: 'POST',
                url: '{{ route('realtime.callflow.index') }}',
                data: {
                    _token: '{{csrf_token()}}',
                    eps: count > 1 ? epsA : eps,
                    date: dateGeneral,
                },
                beforeSend: () => {
                    loading();
                    $updateAll.attr('data-original-title', 'Atualizando...')
                        .find('i').addClass('fa-spin');
                },
                complete: function () {
                    hideLoading();
                },
                success: response => {
                    slide.index = $('#callflow-carousel .active').index();
                        $('#cards').html(response.view);
                        $('.cards_tooltip').each(function () {
                            let el = $(this).attr('data-title');
                            $(this).tooltip({
                                html: true,
                                title: $(el).html(),
                                container: '#fullscreen-content-page'
                            });
                        });

                        $updateAll.attr('data-original-title', moment().format('[Atualizado às] HH:mm'))
                            .find('i').removeClass('fa-spin text-danger');

                        page_options.run();
                        refreshLabelLastUpdate(`<span class="float-left">Último Intervalo:</span> ${response.lastInterval}`);
                },
                error: response => {
                    if (response.statusText != 'abort') {
                        $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os itens!");
                    }
                    $updateAll.attr('data-original-title', 'Atualização falhou!')
                        .find('i').addClass('text-danger').removeClass('fa-spin');
                }
            });
        }

        const orderBox = {
            target: '#orderbox',
            cards: '.callflow',
            cookieName: 'boxes_order',
            boxes: [],
            listBoxes: function () {
                orderBox.boxes = [];
                $(orderBox.cards).each(function () {
                    orderBox.boxes.push($(this).prop('id'));
                });
            },
            build: function () {
                orderBox.listBoxes();
                let checked_arr = cookie.get('boxes_show') !== undefined ? cookie.get('boxes_show').split(',') : [];
                let i = 0;
                $(orderBox.target).html('');
                orderBox.boxes.forEach(id => {
                    let checked = checked_arr[i] == "false" ? '' : 'checked', $callflow = $('#' + id),
                        _style = $callflow.find('.card-header').attr('style');

                    let _html = $('<h4></h4>');
                    _html.text($callflow.find('.card-header-label').text());
                    _html.prepend('<i class="ion ion-md-move">');
                    _html.append('<input type="checkbox" class="float-right show_card" ' + checked + '/>');
                    $(orderBox.target).append($('<li>', {id: id, html: _html, style: _style}));
                    i++;
                });
                $(orderBox.target).sortable({
                    cursor: 'grabbing'
                });
            },
            save: function () {
                let cards = [];
                let showing = [];
                let notShow = [];
                $(orderBox.target).find('li').each(function () {
                    showing.push($(this).find('.show_card').is(':checked'));
                    if ($(this).find('.show_card').is(':checked')) {
                        cards.push($(this).prop('id'));
                    } else {
                        notShow.push($(this).prop('id'));
                    }
                });
                cards = cards.concat(notShow);
                showing = showing.sort().reverse();
                cookie.set(orderBox.cookieName, cards);
                cookie.set('boxes_show', showing);
                boxes.reload();
            }
        };

        const slide = {
            cookieName: 'callflow_slide',
            interval: cookie.get('callflow_slide_seconds') || 5,
            index: null,
            play: function () {
                $('#callflow-carousel').carousel({
                    interval: slide.interval * 1000,
                    cycle: true
                });
            },
            start: function () {
                if (slide.index >= 0) {
                    $('#callflow-carousel .active').removeClass('active');
                    $('#callflow-carousel .carousel-item').eq(slide.index).addClass('active');
                    slide.index = null;
                }
                slide.play();
                if ($('[data-slide="pause"]').hasClass('d-none')) {
                    $('#callflow-carousel').carousel('pause');
                }
            },
            enable: function () {
                cookie.set(slide.cookieName, 'enable');
                $('.carousel-item-disable').addClass('carousel-item').removeClass('carousel-item-disable');
                $('.slide-controls').show();
                slide.start();
            },
            disable: function () {
                cookie.set(slide.cookieName, 'disable');
                $('.carousel-item').addClass('carousel-item-disable').removeClass('carousel-item');
                $('.slide-controls').hide();
                $('#callflow-carousel').carousel('dispose');
            }
        };

        const boxes = {
            date: moment(),
            auto_update: true,
            auto_update_interval: 5 * 60 * 1000,
            expanded: false,
            fntimeout: undefined,
            xhr: null,
            xhrActive: function () {
                return boxes.xhr != null && boxes.xhr.readyState == 1;
            },
            selfUpdate: function () {
                boxes.fntimeout = setTimeout(() => {
                    boxes.reload();
                }, boxes.auto_update_interval);
            },
            reload: function () {
                let $updateAll = $('#update-all');
                clearTimeout(boxes.fntimeout);
                if (boxes.xhrActive()) {
                    boxes.xhr.abort();
                }
                $updateAll.attr('data-original-title', 'Atualizando...').find('i').addClass('fa-spin');
                dateGeneral = boxes.date.isBefore(moment(), 'day') ? boxes.date.format('YYYY-MM-DD') : null;
                boxes.xhr = $.ajax({
                    type: 'POST',
                    url: '{{ route('realtime.callflow.index') }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        date: boxes.date.isBefore(moment(), 'day') ? boxes.date.format('YYYY-MM-DD') : null,
                        eps: '',
                    },
                    beforeSend: function () {
                    },
                    complete: function () {
                    },
                    success: function (response) {
                        slide.index = $('#callflow-carousel .active').index();
                        $('#cards').html(response.view);
                        $('.cards_tooltip').each(function () {
                            let el = $(this).attr('data-title');
                            $(this).tooltip({
                                html: true,
                                title: $(el).html(),
                                container: '#fullscreen-content-page'
                            });
                        });

                        $updateAll.attr('data-original-title', moment().format('[Atualizado às] HH:mm'))
                            .find('i').removeClass('fa-spin text-danger');

                        page_options.run();
                        refreshLabelLastUpdate(`<span class="float-left">Último Intervalo:</span> ${response.lastInterval}`);
                    },
                    error: function (response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os itens!");
                        }

                        $('#update-all').attr('data-original-title', 'Atualização falhou!')
                            .find('i').addClass('text-danger').removeClass('fa-spin');

                        setTimeout(() => {
                            boxes.reload();
                        }, boxes.auto_update_interval);
                    }
                });
            },
            init: function () {
                setTimeout(() => {
                    boxes.reload()
                }, 1000);
            },
        };

        const timeline = {
            xhr: null,
            series: null,
            categories: null,
            xhrActive: function () {
                return timeline.xhr != null && timeline.xhr.readyState == 1;
            },
            chart: function (categories, series, title = null, data = null, prefix = '', interval = null, max_y = null) {
                Highcharts.chart('modal-timeline-content', Highcharts.merge({
                    chart: {type: 'spline',},
                    title: {text: title,},
                    subtitle: {text: data},
                    xAxis: {
                        categories: categories,
                        crosshair: true,
                        labels: {
                            formatter: function () {
                                return this.value.toString().substring(0, 5);
                            }
                        }
                    },
                    plotOptions: {spline: {marker: {enabled: false}}},
                    yAxis: {
                        max: max_y,
                        tickInterval: interval,
                        title: {text: false},
                        labels: {
                            formatter: function () {
                                return this.value + ' ' + prefix;
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return this.points.reduce(function (s, point) {
                                return s + '<br/>' + point.series.name + ': ' +
                                    point.y + ' ' + prefix;
                            }, '<b>' + this.x + '</b>');
                        },
                        shared: true
                    },
                    series: series
                }, Highcharts.themeDarkUnica));

            },
            drawGraph: function () {
                let data = [];
                let $kpi = $('input[name="var_view"]:checked');
                let prefix = $kpi.data('prefix');
                let max_interval = $kpi.data('max') || null;
                let interval = $kpi.data('interval') || null;
                let mode = $('input[name="modo_eps"]:checked').val();
                let title = $kpi.closest('div').find('label').text();
                let date = boxes.date.format('DD/MM/YYYY');

                data = timeline.series[$kpi.val()].filter(obj => {
                    return mode == 'por_eps' ? obj.name != 'Total' : obj.name == 'Total';
                }).map(obj => {
                    return $.extend(true, {}, obj)
                });

                timeline.chart(timeline.categories, data, title, date, prefix, interval, max_interval);
            },
            ajax: function (area) {
                timeline.xhr = $.ajax({
                    type: 'POST',
                    url: '{{ route('realtime.callflow.timeline') }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        area: area,
                        date: boxes.date.format('YYYY-MM-DD')
                    },
                    success(response) {
                        timeline.categories = response.categories;
                        timeline.series = response.series;
                        timeline.drawGraph();
                        refreshLabelLastUpdate();
                    },
                    error(response) {
                        if (response.status != 0) {
                            $.Notification.notify('error', 'top center', 'Atenção', "Falha ao buscar os dados!");
                        }
                    }
                });
            }
        };

        $(document).ready(function () {
            let $reportRange = $('#reportrange');
            if (cookie.get('callflow_slide') == 'enable') {
                $('.slide-controls').show();
                slide.enable();
            }
            boxes.init();

            $('#modal-timeline').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget), label = button.data('label'), modal = $(this);
                timeline.ajax(label);
                modal.find('.modal-title').text(label);
            });

            $('#order-box-modal-button').click(function () {
                orderBox.build();
                $('#order-boxes-modal').modal('show', {
                    keyboard: false,
                    backdrop: 'static',
                });
            });

            $('#order-box-save').click(function () {
                orderBox.save();
                $('#order-boxes-modal').modal('hide');
            });

            $('#cards').delegate('[data-toggle="collapse-callflow"]', 'click', function () {
                let _self = $(this);
                _self.closest('.callflow').find('.callflow-body').slideToggle('fast', function () {
                    _self.find('i').toggleClass('ion-md-add ion-md-remove');
                });
            });

            $('#toggle-expand-all').click(function () {
                let $callflowBody = $('.callflow-body');

                if (boxes.expanded) {
                    $callflowBody.slideUp('fast');
                } else {
                    $callflowBody.slideDown('fast');
                }

                $('#cards').find('[data-toggle="collapse-callflow"] i')
                    .toggleClass('ion-md-add', boxes.expanded)
                    .toggleClass('ion-md-remove', !boxes.expanded);
                $(this).find('i')
                    .toggleClass('ion-md-add', boxes.expanded)
                    .toggleClass('ion-md-remove', !boxes.expanded);
                boxes.expanded = !boxes.expanded;
            });

            $('#update-all').click(function () {
                let $reportRange = $('#reportrange');
                boxes.date = moment();
                boxes.auto_update = true;
                boxes.reload();
                $reportRange.data('daterangepicker').setStartDate(moment());
                $reportRange.data('daterangepicker').setEndDate(moment());
                cb(moment());
                refreshLabelLastUpdate();
            });

            $('[data-slide="enable"]').click(function () {
                if (cookie.get('callflow_slide') == 'enable') {
                    slide.disable();
                } else {
                    slide.enable();
                }
            });

            $('.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');
                }
            });

            $('#box-max-view').keyup(function (e) {
                if (e.which == 13) {
                    cookie.set('callflow_total_cards', $(this).val());
                    boxes.reload();
                }
            });

            $('#box-time-view').keyup(function (e) {
                if (e.which == 13) {
                    cookie.set('callflow_slide_seconds', $(this).val());
                    slide.interval = $(this).val();
                    $('#callflow-carousel').carousel('dispose');
                    slide.play();
                }
            });

            $('.modal-option').change(function () {
                if (timeline.xhr != null && timeline.xhr.readyState == 1) {
                    return false;
                }
                timeline.drawGraph();
            });

            cb(moment());
            $reportRange.daterangepicker({
                singleDatePicker: true,
                startDate: moment(),
                maxDate: moment(),
            }, function (time) {
                cb(time);
                boxes.date = time;
                reloadPage.date = time;
                boxes.auto_update = false;
                boxes.reload();
            });

            $('#modal-timeline').on('hide.bs.modal', function () {
                if (timeline.xhrActive()) {
                    timeline.xhr.abort();
                }
            });

            $('#check_all').on('change', function () {
                let $this = $(this), $checks = $('.show_card');
                $checks.each(function () {
                    $(this).prop('checked', $this.is(':checked'));
                });
            });

            $("#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');
                }

                $(".shared-filter").slideUp('fast');
                reloadPage();
            });
        });

        function cb(start) {
            $('#reportrange span').html(start.format('D [de] MMMM, YYYY'));
        }
    </script>
@endpush