@include('plugins.moment')
@include('plugins.bootstrap-select')
@include('plugins.daterangepicker')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')
@include('plugins.jquery-mask')

@push('page-js')
    <script>
        var chatChart, phoneChat, chatChartP, phoneChatP;
        var currentDate = {
            start: moment().startOf('month'),
            end: moment()
        };

        function enumerateDaysBetweenDates(startDate, endDate) {
            let date = []
            while (moment(startDate) <= moment(endDate)) {
                date.push(startDate);
                startDate = moment(startDate).add(1, 'days').format("YYYY-MM-DD");
            }
            return date;
        }

        const phone = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            fetchPhoneChart() {
                this.check_xhr();

                let option = $('input[name=vision_check]:checked').val() == 'day' ? 6 : 10;
                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'graphs',
                        filters: {
                            option: option,
                            data_inicio: currentDate.start.format('YYYY-MM-DD'),
                            data_fim: currentDate.end.format('YYYY-MM-DD')
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        let data = res.data;
                        phone.drawPhoneChart(data);
                        phone.fetchPhoneChartProjecao();
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            },

            drawPhoneChart(data) {
                let yAxisChart = data.map(a =>
                    $('input[name=vision_check]:checked').val() == 'day' ?
                    moment(a.Data).format('DD/MM/YYYY') : moment(a.Data + '-01').format('MM/YYYY'));

                console.log(data);

                let barData = data.map(a => parseInt(a.ATH));
                let lineData = data.map(a => parseInt(a.Recebidas));

                let barColor = $('#switch_theme').is(':checked') ? '#67508B' : '#fa6300';
                let lineColor = $('#switch_theme').is(':checked') ? '#fa6300' : '#67508B';

                chatChart = Highcharts.chart('chart-phone', Highcharts.merge({
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Contatos no Telefone',
                    },
                    time: {
                        useUTC: false
                    },
                    xAxis: {
                        categories: yAxisChart,
                        crosshair: true
                    },
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: 'gray'
                            }
                        },
                        title: {
                            text: 'Ligações Totais',
                            style: {
                                color: 'gray'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Humano',
                            style: {
                                color: 'gray'
                            }
                        },
                        labels: {
                            format: '{value}',
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        floating: true
                    },
                    series: [{
                        name: 'Humano',
                        type: 'column',
                        color: barColor,
                        data: barData,
                        tooltip: {
                            valueSuffix: ''
                        }

                    }, {
                        name: 'Ligações Totais',
                        type: 'spline',
                        color: lineColor,
                        data: lineData,
                        tooltip: {
                            valueSuffix: ''
                        }
                    }]
                }, Highcharts.themeDarkUnica));
            },

            fetchPhoneChartProjecao() {
                this.check_xhr();

                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'graphs',
                        filters: {
                            option: 11
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        let data = res.data;
                        phone.drawPhoneChartProjecao(data);
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            },

            drawPhoneChartProjecao(data) {
                let remainingDays = 0;

                if ($('input[name=vision_check]:checked').val() == 'day') {
                    const d = moment();
                    const currentDay = d.get("date");
                    const daysInMonth = d.daysInMonth();
                    remainingDays = daysInMonth - currentDay;
                }

                let yAxisChart = $('input[name=vision_check]:checked').val() == 'day' ? [
                    `Restam ${remainingDays} Dias`
                ] : [
                    'Próximo Mês'
                ];

                let lineData = data.map(a => parseInt(a.MediaRecebidas));
                let barData = data.map(a => parseInt(a.MediaATH));

                let barColor = $('#switch_theme').is(':checked') ? '#fa6300' : '#67508B';
                let lineColor = $('#switch_theme').is(':checked') ? '#67508B' : '#fa6300';

                phoneChartP = Highcharts.chart('chart-phone-projecao', Highcharts.merge({
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Contatos no Telefone',
                    },
                    time: {
                        useUTC: false
                    },
                    xAxis: {
                        categories: yAxisChart,
                        crosshair: true
                    },
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: 'gray'
                            }
                        },
                        title: {
                            text: 'Ligações Totais',
                            style: {
                                color: 'gray'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Humano',
                            style: {
                                color: 'gray'
                            }
                        },
                        labels: {
                            format: '{value}',
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        floating: false
                    },
                    series: [{
                        name: 'Projeção ATH',
                        type: 'column',
                        color: barColor,
                        data: barData,
                        tooltip: {
                            valueSuffix: ''
                        }

                    }, {
                        name: 'Projeção Recebidas',
                        type: 'spline',
                        color: lineColor,
                        data: lineData,
                        tooltip: {
                            valueSuffix: ''
                        }
                    }]
                }, Highcharts.themeDarkUnica));
            },
        };

        const chat = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            fetchChatChart() {
                this.check_xhr();

                let option = $('input[name=vision_check]:checked').val() == 'day' ? 7 : 9;

                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'graphs',
                        filters: {
                            option: option,
                            data_inicio: currentDate.start.format('YYYY-MM-DD'),
                            data_fim: currentDate.end.format('YYYY-MM-DD')
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        let data = res.data;
                        chat.drawChatChart(data);
                        chat.fetchChatChartProjecao();
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            },

            drawChatChart(data) {
                let yAxisChart = data.map(a =>
                    $('input[name=vision_check]:checked').val() == 'day' ?
                    moment(a.Data).format('DD/MM/YYYY') : moment(a.Data).format('MM/YYYY'));
                let barData = data.map(a => parseInt(a.ATH));
                let lineData = data.map(a => parseInt(a.Recebidas));

                let barColor = $('#switch_theme').is(':checked') ? '#67508B' : '#fa6300';
                let lineColor = $('#switch_theme').is(':checked') ? '#fa6300' : '#67508B';

                phoneChart = Highcharts.chart('chart-chat', Highcharts.merge({
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Contatos no Chat',
                    },
                    time: {
                        useUTC: false
                    },
                    xAxis: {
                        categories: yAxisChart,
                        crosshair: true
                    },
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: 'gray'
                            }
                        },
                        title: {
                            text: 'Ligações Totais',
                            style: {
                                color: 'gray'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Humano',
                            style: {
                                color: 'gray'
                            }
                        },
                        labels: {
                            format: '{value}',
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        floating: true
                    },
                    series: [{
                        name: 'Humano',
                        type: 'column',
                        color: barColor,
                        data: barData,
                        tooltip: {
                            valueSuffix: ''
                        }

                    }, {
                        name: 'Ligações Totais',
                        type: 'spline',
                        color: lineColor,
                        data: lineData,
                        tooltip: {
                            valueSuffix: ''
                        }
                    }]
                }, Highcharts.themeDarkUnica));
            },

            fetchChatChartProjecao() {
                this.check_xhr();

                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'graphs',
                        filters: {
                            option: 12
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        let data = res.data;
                        chat.drawChatChartProjecao(data);
                        hideLoading();
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            },

            drawChatChartProjecao(data) {
                let remainingDays = 0;

                if ($('input[name=vision_check]:checked').val() == 'day') {
                    const d = moment();
                    const currentDay = d.get("date");
                    const daysInMonth = d.daysInMonth();
                    remainingDays = daysInMonth - currentDay;
                }

                let yAxisChart = $('input[name=vision_check]:checked').val() == 'day' ? [
                    `Restam ${remainingDays} Dias`
                ] : [
                    'Próximo Mês'
                ];

                let lineData = data.map(a => parseInt(a.MediaRecebidas));
                let barData = data.map(a => parseInt(a.MediaATH));

                let barColor = $('#switch_theme').is(':checked') ? '#fa6300' : '#67508B';
                let lineColor = $('#switch_theme').is(':checked') ? '#67508B' : '#fa6300';

                chatChartP = Highcharts.chart('chart-chat-projecao', Highcharts.merge({
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Projeção',
                    },
                    time: {
                        useUTC: false
                    },
                    xAxis: {
                        categories: yAxisChart,
                        crosshair: true
                    },
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: 'gray'
                            }
                        },
                        title: {
                            text: 'Ligações Totais',
                            style: {
                                color: 'gray'
                            }
                        }
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        floating: false
                    },
                    series: [{
                            name: 'Projeção ATH',
                            data: barData,
                            type: 'column',
                            color: barColor
                        },
                        {
                            name: 'Projeção Recebidas',
                            type: 'spline',
                            color: lineColor,
                            data: lineData,
                            tooltip: {
                                valueSuffix: ''
                            }
                        }
                    ]
                }, Highcharts.themeDarkUnica));
            },
        }

        const pie = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            fetchPieChart() {
                this.check_xhr();
                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'graphs',
                        filters: {
                            option: "8",
                            data_inicio: currentDate.start.format('YYYY-MM-DD'),
                            data_fim: currentDate.end.format('YYYY-MM-DD')
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        let data = res.data;
                        pie.drawPieChart(data);
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            },


            drawPieChart(data) {
                let colors = [
                    '#f58220',
                    '#67508B',
                    '#028b81',
                    '#007bff',
                    '#64E572',
                    '#6AF9C4'
                ];

                let series = data.map((a, idx) => ({
                    name: a.Canal,
                    y: a.Recebidas != '.00' && a.Recebidas ? parseInt(a.Recebidas) : 0,
                    retidas: a.Percentual_Gap ? parseFloat(a.Percentual_Gap).toFixed(2) : 0,
                    color: colors[idx],
                    dataLabels: {
                        x: a.Canal == 'App' ? 13 : 0,
                        y: a.Canal == 'App' ? -15 : 0,
                    }
                }));

                Highcharts.chart('pie-chart', Highcharts.merge({
                    chart: {
                        type: 'pie'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%'
                        }
                    },
                    title: {
                        text: 'Representatividade de Volume'
                    },
                    tooltip: {
                        enabled: false,
                        useHTML: true,
                        pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b><br>Retidas: <b>{point.retidas}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                useHTML: true,
                                format: '{point.name} <br/> <b>Representatividade:</b> {y} % <br/> <b>Retidas:</b> {point.retidas} %'
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: 'Representatividade',
                        colorByPoint: true,
                        innerSize: '75%',
                        data: series
                    }]
                }, Highcharts.themeDarkUnica));
            }
        }

        const tableMonth = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            fetchTableData() {
                this.check_xhr();
                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'monthTable',
                        filters: {
                            option: "3",
                            data_inicio: currentDate.start.format('YYYY-MM-DD'),
                            data_fim: currentDate.end.format('YYYY-MM-DD')
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        $('#tab-month').html(res.table);
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            }
        }

        const tableDay = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            fetchTableData() {
                this.check_xhr();
                this.xhr = $.ajax({
                    url: '{{ route('selfservices.generalRetention') }}',
                    type: 'POST',
                    data: {
                        view: 'dayTable',
                        filters: {
                            option: "2",
                            data_inicio: currentDate.start.format('YYYY-MM-DD'),
                            data_fim: currentDate.end.format('YYYY-MM-DD')
                        }
                    },
                    beforeSend: () => {

                    },
                    success: function(res) {
                        $('#tab-month').html(res.table);
                        hideLoading();
                    },
                    complete: function() {

                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    }
                });
            }
        }

        const page = {
            xhr: undefined,

            check_xhr() {
                if (this.xhr !== undefined && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }
            },

            load() {

            },

            firstLoad() {
                loading();
                phone.fetchPhoneChart();
                chat.fetchChatChart();
                pie.fetchPieChart();

                $('input[name=vision_check]:checked').val() == 'day' ? tableDay.fetchTableData() : tableMonth
                    .fetchTableData();
            }
        };


        $(document).ready(function() {
            $('#update-all, #apply_filters').on('click', function() {
                page.firstLoad();
            });

            $("#btn-import-file").on("click", function(e) {
                e.preventDefault();
                var extension = $('#input-upload-csv').val().split('.').pop().toLowerCase();
                if ($.inArray(extension, ['csv', 'xls', 'xlsx']) == -1) {
                    alert('Please choose file csv/xls/xlsx!');
                } else {
                    var file_data = $('#input-upload-csv').prop('files')[0];
                    var form_data = new FormData();
                    form_data.append('file', file_data);

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        url: "{{ route('selfservices.generalRetention.upload-file') }}",
                        data: form_data,
                        type: 'POST',
                        contentType: false,
                        cache: false,
                        processData: false,
                        success: function(response) {
                            /* if (response.status == 442) {
                                $('#importform_errList').show();
                                $('#importform_errList').html('');
                                $('#importform_errList').addClass('alert alert-danger');
                                $('#importform_errList').append('<li>' + response.message + '</li>');
                            } */
                            $.Notification.notify('success', 'top center', 'Pronto!',
                                "Arquivo enviado com sucesso!");

                            $('#importCSVModal').toggle();
                            page.firstLoad();
                            /* $('#importExcel').modal('hide');
                            tampil_table(); */
                        },
                        error(res) {
                            $.Notification.notify('error', 'top center', 'Atenção',
                                "Falha ao atualizar os itens de indicadores!");
                        }
                    });
                }
            });

            $('#reportrange span').html(' ' + moment().startOf('month').format('DD/MM/YYYY') + ' - ' + moment()
                .subtract(1, "days")
                .format(
                    'DD/MM/YYYY'));

            $('#switch_theme').on('change', function() {
                let barColor = $('#switch_theme').is(':checked') ? '#67508B' : '#fa6300';
                let lineColor = $('#switch_theme').is(':checked') ? '#fa6300' : '#67508B';

                phoneChart.series[0].update({
                    color: barColor
                });

                phoneChart.series[1].update({
                    color: lineColor
                });

                chatChart.series[0].update({
                    color: barColor
                });

                chatChart.series[1].update({
                    color: lineColor
                });

                chatChartP.series[0].update({
                    color: lineColor
                });

                chatChartP.series[1].update({
                    color: barColor
                });

                phoneChartP.series[0].update({
                    color: lineColor
                });

                phoneChartP.series[1].update({
                    color: barColor
                });
            });

            $('#reportrange').daterangepicker({
                alwaysShowCalendars: true,
                "autoApply": true,
                timePickerIncrement: 60,
                startDate: moment().startOf('month').format('DD/MM/YYYY'),
                endDate: moment().subtract(1, "days").hours(23).minutes(0).format('DD/MM/YYYY'),
                maxDate: moment(),
                minDate: '01/01/2017',
                showDropdowns: true,
                showWeekNumbers: false,
                ranges: {
                    'Hoje': [moment().hours(0).minutes(0), moment()],
                    'Ontem': [moment().subtract(1, 'days').hours(0).minutes(0), moment().subtract(1,
                            'days')
                        .hours(23).minutes(0)
                    ],
                    'Últimos 7 dias': [moment().subtract(6, 'days').hours(0).minutes(0), moment().hours(
                            23)
                        .minutes(0)
                    ],
                    'Últimos 30 dias': [moment().subtract(29, 'days').hours(0).minutes(0), moment()
                        .hours(
                            23).minutes(0)
                    ],
                    'Este mês': [moment().startOf('month').hours(0).minutes(0), moment().endOf(
                        'month')],
                    'Último mês': [moment().subtract(1, 'month').startOf('month').hours(0).minutes(0),
                        moment().subtract(1,
                            'month').endOf('month').hours(23).minutes(0)
                    ]
                },
                opens: 'left',
                drops: 'down',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-bmg-primary',
                cancelClass: 'btn-secondary',
                locale: {
                    format: 'DD/MM/YYYY',
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "customRangeLabel": "Customizado"
                }
            }, function(start, end, label) {
                currentDate = {
                    start,
                    end
                };

                $('#reportrange span').html(' ' + start.format('DD/MM/YYYY') + ' - ' + end.format(
                    'DD/MM/YYYY'));
                $(".shared-filter").slideUp('fast');
            });

            page.firstLoad();
        });
    </script>
@endpush