@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
{{-- @include('plugins.datatables.fixedColumns') --}}
@include('plugins.moment')
{{-- @include('plugins.datepicker') --}}
{{-- @include('plugins.daterangepicker') --}}
@include('plugins.highcharts.default')
@include('plugins.highcharts.export')
@include('plugins.highcharts.more')
@include('plugins.highcharts.solid-gauge')
@include('plugins.highcharts.themes.dark-unica')

@push('page-js')
    <script>
        const page = {
            load() {
                this.getData();
            },
            getData() {
                let $updateAll = $('#update-all');

                $.ajax({
                    url: '{{ route('incident.alert.index') }}',
                    type: 'POST',
                    beforeSend: () => {
                        helper.startLoading();
                        $updateAll.attr('data-original-title', 'Atualizando...')
                            .find('i').addClass('fa-spin');
                    },
                    success: function(res) {
                        const data = res.data;
                        builder.table(data.table);

                        builder.data_alerts = data.alerts;
                        builder.alerts();
                    },
                    complete: function() {
                        helper.stopLoading();
                        $updateAll.attr('data-original-title', moment().format('[Atualizado às] HH:mm'))
                            .find('i').removeClass('fa-spin text-danger');
                    },
                    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 builder = {
            data_alerts: undefined,

            table(data) {
                const $table = $('#table');

                if ($.fn.DataTable.isDataTable($table)) {
                    $table.DataTable().destroy();
                }

                $table.DataTable({
                    lengthChange: false,
                    data: data,
                    responsive: true,
                    scrollY: '45vh',
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    // aaSorting: [],
                    // ordering: false,
                    dom: 'Bfrtip',
                    buttons: [],
                    columns: [
                        {data: 'tipo_incidente', title: 'Tipos de Incidentes'},
                        {data: 'dt_ini', title: 'Data Início'},
                        {data: 'dt_fim', title: 'Data Fim'},
                        {data: 'duracao', title: 'Duração'},
                        {data: 'sistema', title: 'Sistema'},
                        {data: 'impacto', title: 'Impacto Negócio'},
                        {data: 'gravidade', title: 'Gravidade', render: builder.gravidade_format},
                        {data: 'fornecedor', title: 'Fornecedor'},
                        {data: 'clientes_impactados', title: 'Clientes Impactados'},
                        {data: 'rechamadas', title: 'Rechamadas (Pós Incidente)'},
                        {data: 'reincidencia', title: 'Reincidência (Mês)'},
                    ],
                    /*buttons: [{
                            extend: 'copy',
                            className: 'btn-sm',
                            text: 'Copiar'
                        },
                        {
                            extend: 'excel',
                            className: 'btn-sm',
                            filename: filename,
                            exportOptions: {
                                format: {
                                    body: function(data, row, column, node) {

                                        if (data.toString().indexOf('.') !== -1 && data.toString()
                                            .indexOf('%') === -1) {
                                            return "\0" + data;
                                            // return data.replace(/[\.]/g, '');
                                        }

                                        if (data == '') {
                                            return '0';
                                        }

                                        return data;
                                    }
                                }
                            }
                        },
                    ],*/
                    // fixedColumns: {
                    //     leftColumns: 2
                    // },
                    columnDefs: [
                        {
                            targets: [0, 4, 5],
                            className: 'text-left'
                        },
                        // {
                        //     targets: [1,2],
                        //     render: $.fn.dataTable.render.datetime('DD/MM/YYYY'),
                        //     className: 'text-center'
                        // },
                        {
                            targets: '_all',
                            className: 'text-center'
                        }
                    ],
                    /*rowCallback: function(row, data, index) {
                        const aDataGravidade = data.gravidade;
                        const gravidadeColor = {
                            'Baixo':'bg-info text-dark',
                            'Médio':'bg-warning text-dark',
                            'Alto':'bg-danger text-dark',
                        };

                        $(row).addClass(gravidadeColor[aDataGravidade] || 'bg-light');
                    },*/
                    initComplete: function(settings, json) {
                        $('.dataTables_scrollBody').addClass('overflow-y overflow-x');
                    }
                });
            },
            gravidade_format (data, type, row) {
                if (data == "" || data == null) {
                    return '-';
                }

                const gravidadeColor = {
                    'Baixo':'#38a4f8',
                    'Médio':'#F8B425',
                    'Alto':'#EC4561',
                };

                return `
                    <span class="d-flex flex-row-reverse justify-content-between">
                        <i class="mdi mdi-circle" style="color: ${gravidadeColor[data] || '#fff'}"></i>
                        ${data}
                    </span>
                `;
            },

            alerts() {
                const data = this.data_alerts;
                this.chartConsolidadoIndisponibilidadeSistemica(data['consolidado-indisponibilidade-sistemica']);
                this.chartConsolidadoIndisponibilidadeFornecedor(data['consolidado-indisponibilidade-fornecedor']);
                this.chartAlertaImpactoNegocio(data['alerta-impacto-negocio']['value']);
                this.chartAlertaTempoExcedido(data['alerta-tempo-excedido']['value']);
                this.chartAlertaLiberarUra(data['alerta-liberar-ura']['value']);
                this.chartAlertaFormSemEncerramento(data['alerta-form-sem-encerramento']['value']);

                this.listAlertaImpactoNegocio(data['alerta-impacto-negocio']['items']);
                this.listAlertaTempoExcedido(data['alerta-tempo-excedido']['items']);
                this.listAlertaLiberarUra(data['alerta-liberar-ura']['items']);
                this.listAlertaFormSemEncerramento(data['alerta-form-sem-encerramento']['items']);
            },

            chartConsolidadoIndisponibilidadeSistemica(data) {
                Highcharts.chart('chart-consolidado-indisponibilidade-sistemica', Highcharts.merge(Highcharts.themeDarkUnica, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Consolidado histórico indisponibilidade sistemica',
                        style: { 'fontSize': '12px' }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    xAxis: {
                        categories: data.categories,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: null
                        },
                        // labels: {
                            // formatter: function() {
                                // return `${this.value}%`;
                            // }
                        // }
                    },
                    // tooltip: {
                        // valueSuffix: '%'
                    // },
                    series: [{
                        name: 'Tempo',
                        data: data.data
                    }]
                }));
            },
            chartConsolidadoIndisponibilidadeFornecedor(data) {
                Highcharts.chart('chart-consolidado-indisponibilidade-fornecedor', Highcharts.merge(Highcharts.themeDarkUnica, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Consolidado indisponibilidade por fornecedor',
                        style: { 'fontSize': '12px' }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    xAxis: {
                        categories: data.categories,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: null
                        },
                        // labels: {
                            // formatter: function() {
                                // return `${this.value}%`;
                            // }
                        // }
                    },
                    tooltip: {
                        shared: true
                        // valueSuffix: '%'
                    },
                    series: [{
                        type: 'column',
                        name: 'Tempo',
                        data: data.data_time
                    }, {
                        type: 'spline',
                        name: 'Média',
                        data: data.data_media
                    }]
                }));
            },
            chartAlertaTempoExcedido(value) {
                const data = {
                    title: 'Tempo excedido de incidente',
                    series: {
                        name: 'Quantidade incidente',
                        dataLabel: 'Tempo',
                        data: value,
                    }
                };
                this.chartSolidGauge(data, 'chart-alerta-tempo-excedido');
            },
            chartAlertaImpactoNegocio(value) {
                const data = {
                    title: 'Impacto de Negócio',
                    series: {
                        name: 'Impacto de Negócio',
                        dataLabel: 'Rechamada',
                        data: value,
                    }
                };
                this.chartSolidGauge(data, 'chart-alerta-impacto-negocio');
            },
            chartAlertaLiberarUra(value) {
                const data = {
                    title: 'Liberar fraseologia na Ura',
                    series: {
                        name: 'Quantidade incidente',
                        dataLabel: 'Quantidade',
                        data: value,
                    }
                };
                this.chartSolidGauge(data, 'chart-alerta-liberar-ura');
            },
            chartAlertaFormSemEncerramento(value) {
                const data = {
                    title: 'Incidente sem encerramento formulário',
                    series: {
                        name: 'Quantidade incidente',
                        dataLabel: 'Formulários',
                        data: value,
                    }
                };
                this.chartSolidGauge(data, 'chart-alerta-form-sem-encerramento');
            },
            chartSolidGauge(data, chart_id) {
                Highcharts.chart(chart_id, Highcharts.merge(Highcharts.themeDarkUnica, {
                    chart: {
                        type: 'solidgauge'
                    },
                    title: {
                        text: data.title || null,
                        style: { 'fontSize': '12px' }
                    },
                    legend: {
                        enabled: false
                    },
                    pane: {
                        center: ['50%', '85%'],
                        size: '140%',
                        startAngle: -90,
                        endAngle: 90,
                        background: {
                            backgroundColor: '#353d53',
                            innerRadius: '100%', // value default 60%
                            outerRadius: '100%',
                            shape: 'arc'
                        }
                    },
                    exporting: {
                        enabled: false
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 5,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    },

                    // the value axis
                    yAxis: {
                        stops: [
                            [0.1, '#55BF3B'], // green
                            [0.3, '#DDDF0D'], // yellow
                            [0.7, '#DF5353'] // red
                        ],
                        lineWidth: 0,
                        tickWidth: 0,
                        minorTickInterval: null,
                        tickAmount: 2,
                        title: {
                            y: -90
                        },
                        labels: {
                            y: 16
                        },

                        // diff
                        min: 0,
                        max: 200,
                        title: {
                            text: null
                        }
                    },

                    series: [{
                        name: data.series.name,
                        data: [data.series.data],
                        dataLabels: {
                            format:
                                '<div style="text-align:center">' +
                                '<span style="font-size:25px">{y}</span><br/>' +
                                '<span style="font-size:12px;opacity:0.4">' + data.series.dataLabel + '</span>' +
                                '</div>'
                        },
                        tooltip: {
                            valueSuffix: ' h'
                        }
                    }]
                }));
            },

            listAlertaImpactoNegocio(data) {
                const $el = $('#items-alerta-impacto-negocio').find('ul');
                const items = this.createListItems(data, 'alerta-impacto-negocio', 'impacto');
                $el.html(items);
            },
            listAlertaTempoExcedido(data) {
                const $el = $('#items-alerta-tempo-excedido').find('ul');
                const items = this.createListItems(data, 'alerta-tempo-excedido', 'tipo_incidente');
                $el.html(items);
            },
            listAlertaLiberarUra(data) {
                const $el = $('#items-alerta-liberar-ura').find('ul');
                const items = this.createListItems(data, 'alerta-liberar-ura', 'tipo_incidente');
                $el.html(items);
            },
            listAlertaFormSemEncerramento(data) {
                const $el = $('#items-alerta-form-sem-encerramento').find('ul');
                const items = this.createListItems(data, 'alerta-form-sem-encerramento', 'tipo_incidente');
                $el.html(items);
            },
            createListItems(items, id, column) {
                let list = [];
                for ([key, value] of Object.entries(items)) {
                    list.push(`
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            ${value[column]}
                            <a href="javascript:;" class="show-item-incident" data-key="${key}" data-alert="${id}">
                                <i class="fa fa-eye"></i>
                            </a>
                        </li>
                    `);
                }
                return list.join('');
            },
        };

        $(document).on('click', '.show-item-incident', function (e) {
            e.preventDefault();
            const modal = $('#modal-show-incident');
            const $this = $(this);
            const $el = $('#content-show-incident');

            const item = builder.data_alerts[$this.data('alert')].items[$this.data('key')];

            $el.empty();

            $el.html(`
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Tipo de Incidente</span>
                    <span class="">${item.tipo_incidente}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Data Início</span>
                    <span class="">${item.dt_ini}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Data Fim</span>
                    <span class="">${item.dt_fim}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Duração</span>
                    <span class="">${item.duracao}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Sistema</span>
                    <span class="">${item.sistema}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Impacto Negócio</span>
                    <span class="">${item.impacto}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Gravidade</span>
                    <span class="">${item.gravidade}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Fornecedor</span>
                    <span class="">${item.fornecedor}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Clientes Impactados</span>
                    <span class="">${item.clientes_impactados}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Rechamadas (Pós Incidente)</span>
                    <span class="">${item.rechamadas}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-warning">Reincidência (Mês)</span>
                    <span class="">${item.reincidencia}</span>
                </li>
            `);

            modal.modal('show');
        });

        $('#update-all').on('click', function () {
            page.load();
        });

        $(document).ready(function() {
            page.load();
        });
    </script>
@endpush