@push('js-inside')
    <script>
        @php
            $helper = [];
            foreach (
                $content['data']->groupBy([
                    'Callcenter',
                    function ($row) {
                        return strtotime($row['HistoryDate'] ?? $row['HistoryMonth']);
                    },
                ])
                as $callcenter => $days
            ) {
                $helper[$callcenter] = $days->map(function ($intraDay) {
                    $row = [];
                    foreach (array_keys($intraDay->toArray()[0]) as $column) {
                        try {
                            $ignore = ['HistoryDate', 'Callcenter'];
                            if (in_array($column, $ignore)) {
                                continue;
                            }
                            $row[$column] = $intraDay->sum($column);
                        } catch (\Exception $e) {
                        }
                    }
                    return $row;
                });
            }
        @endphp
        var data{{ $type }} = @php echo json_encode($helper); @endphp

        var formatDateByType = (type, unix) => {
            switch (type) {
                case 'mensal':
                    return moment(unix * 1000).format('MM/YY');
                case 'diario':
                    return moment(unix * 1000).format('DD/MM');
                default:
                    return unix;
            }
        }

        function filterProps(obj, prop) {
            if (!obj) return;

            const filtered = Object.keys(obj)
                .filter(key => prop.includes(key))
                .reduce((obj2, key) => {
                    obj2[key] = obj[key];
                    return obj2;
                }, {});

            return filtered;
        }

        function prepareDataToTooltip(eps, timestamp, type, isDigital = false) {
            var content = eval("data" + type)[eps][timestamp];

            if (isDigital) {
                content = filterProps(content, ['Atendidas', 'QtdContatos',  'Recebidas', 'callcenterID', 'QtdRecontatosDigital', 'percRecontatoDigital']);
            } else if (!$('#type_nps').is(":checked")) {
                content = filterProps(content, ['Atendidas', 'QtdContatos',  'Recebidas', 'callcenterID', 'QtdRecontatos', 'qtdRecontatos', 'percRecontato']);
            }

            var adjustFormat = (key, value) => {
                switch (key) {
                    case 'percRecontato':
                    case 'percNPS':
                        value = value.toFixed(2) + "%";
                        break;
                    default:
                        let isRecontato = key.toLowerCase() === 'qtdrecontatos';
                        let isRecontatoDigital = key === 'QtdRecontatosDigital' ? key : '';

                        if (/^N\d+|(^(Promotor|Detrator|SemNota|Neutro)$)$/.test(key) || isRecontato) {
                            let percentValue = content[`perc${isRecontato ? 'Recontato' : key.replace('Total', '')}`];
                            value = number_formatter(value) + ` (${number_formatter(percentValue)} %)`
                        } else if (isRecontatoDigital) {
                            let percentValue = content[`percRecontatoDigital`];
                            value = number_formatter(value) + ` (${number_formatter(percentValue)} %)`
                        } else {
                            value = number_formatter(value);
                        }

                        break;
                }

                return value;
            };

            var adjustKey = (key) => {
                switch (key) {
                    case 'percNPS':
                        key = '% NPS';
                        break;
                    case 'TotalNPS':
                        key = 'Total NPS';
                        break;
                    case 'percRecontato':
                        key = '% Recontato';
                        break;
                    case 'qtdRecontatos':
                        key = 'Recontatos';
                        break;
                    case 'QtdRecontatos':
                        key = 'Recontatos';
                        break;
                    case 'qtdContatos':
                        key = 'Contatos';
                        break;
                    case 'QtdContatos':
                        key = 'Contatos';
                        break;
                    case 'SemNota':
                        key = 'Sem Nota';
                        break;
                    case 'QtdRecontatosDigital':
                        key = 'Recontatos > 30';
                        break;
                    default:
                        key = key.replace("perc", "");
                        break;
                }

                return key;
            };

            var $helperTemplate = $(`<div class="d-inline-block" style="width: 180px;"><b>- ${eps}</b><br></div>`);
            for ([key, value] of Object.entries(content || {})) {
                if (['callcenterID', 'areaID', 'operationID'].indexOf(key) !== -1) {
                    continue;
                }

                if (/^perc/.test(key)) {
                    continue;
                }

                $helperTemplate.append(`<span>${adjustKey(key)}: ${adjustFormat(key, value)}<br></span>`)
            }

            return $helperTemplate[0].outerHTML;
        };

        Highcharts.chart('chart-{{ $type }}', Highcharts.merge({
            chart: {
                type: 'areaspline',
                spacingTop: 30
            },
            title: {
                text: null,
            },
            time: {
                useUTC: false
            },
            xAxis: {
                type: 'datetime',
                crosshair: true,
                labels: {
                    formatter(value) {
                        return formatDateByType(`{{ $type }}`, this.value);
                    }
                },
                tickPositions: @json($content['series'][0]['data'] ?? []).map(item => item['x']),
            },
            plotOptions: {
                areaspline: {
                    marker: {
                        enabled: false
                    },
                    fillOpacity: 0.5
                },
            },
            yAxis: [{
                gridLineColor: 'transparent',
                labels: {
                    style: {
                        color: '#98a6ad'
                    }
                },
                tickWidth: 1,
                title: {
                    text: 'Quantidade de Chamadas',
                    style: {
                        color: '#98a6ad'
                    }
                }
            }],
            tooltip: {
                formatter: function() {
                    let innerHTML = [];

                    for (const [key, point] of Object.entries(this.points)) {
                        innerHTML.push(prepareDataToTooltip(point.series.name, point.x,
                            '{{ $type }}'));
                    }

                    return `<h6 class="text-center my-0">${formatDateByType(`{{ $type }}`, this.x)}</h6><div class="d-flex" style="width: ${this.points.length * 202}px; font-size: 11px;">${innerHTML.join('')}</div>`;
                },
                shared: true,
                useHTML: true,
            },
            series: @json($content['series'])
        }, Highcharts.themeDarkUnica));

        Highcharts.chart('chart-{{ $type }}-30', Highcharts.merge({
            chart: {
                type: 'areaspline',
                spacingTop: 30
            },
            title: {
                text: 'DIGITAL',
            },
            time: {
                useUTC: false
            },
            xAxis: {
                type: 'datetime',
                crosshair: true,
                labels: {
                    formatter(value) {
                        return formatDateByType(`{{ $type }}`, this.value);
                    }
                },
                tickPositions: @json($content['series'][0]['data'] ?? []).map(item => item['x']),
            },
            plotOptions: {
                areaspline: {
                    marker: {
                        enabled: false
                    },
                    fillOpacity: 0.5
                },
            },
            yAxis: [{
                gridLineColor: 'transparent',
                labels: {
                    style: {
                        color: '#98a6ad'
                    }
                },
                tickWidth: 1,
                title: {
                    text: 'Quantidade de Chamadas',
                    style: {
                        color: '#98a6ad'
                    }
                }
            }],
            tooltip: {
                formatter: function() {
                    let innerHTML = [];

                    for (const [key, point] of Object.entries(this.points)) {
                        innerHTML.push(prepareDataToTooltip(point.series.name, point.x,
                            '{{ $type }}', true));
                    }

                    return `<h6 class="text-center my-0">${formatDateByType(`{{ $type }}`, this.x)}</h6><div class="d-flex" style="width: ${this.points.length * 202}px; font-size: 11px;">${innerHTML.join('')}</div>`;
                },
                shared: true,
                useHTML: true,
            },
            series: @json($content['series'])
        }, Highcharts.themeDarkUnica), function() {
            let showDigital = true;

            $('input[name="operation[]"]:checked').each(function() {
                let fname = $(this).parent().data('name');

                if (fname != 'CHAT / WHATS' && fname != 'VIC CHAT') {
                    showDigital = false;
                }
            });

            if (showDigital)
                $('.box-recontato-30').show();
            else
                $('.box-recontato-30').hide();
        });
    </script>
@endpush