{% extends "cliente/base.php" %}
{% block body %}
<style>
    .rotate {
        -webkit-animation: spin 2s linear infinite;
        /* Safari */
        animation: spin 2s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .input-group-addon {
        border: none !important;
    }

    .btn-light {
        background-color: rgb(255, 255, 255);
        border: none;
        color: #000000;
    }

    .wrapper .border-light {
        border: none;
    }

    .card-header {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        padding: 1.5rem;
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        border-radius: 15px 15px 0 0 !important;
    }

    .card {
        border-radius: 15px;
        box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.05);
        margin-bottom: 1.5rem !important;
        border: none;
        border-bottom: 15px solid #585EA8;
    }

    .card-body {
        padding: 1.5rem;
        background-color: #F2F2F2;
    }

    .daterangepicker .ranges li.active {
        background-color: #2FB649 !important;
        color: #fff;
    }

    .theme-primary .ranges li:hover,
    .theme-primary .ranges li:active,
    .theme-primary .ranges li.active {
        border: none;
    }

    .theme-primary .daterangepicker td.active {
        background-color: #2FB649 !important;
    }

    .daterangepicker td.in-range {
        background-color: #c2efcb;
        border-color: transparent;
        color: #000;
        border-radius: 0;
    }

    .theme-primary .btn-primary {
        background-color: #2FB649;
        border-color: #2FB649;
        color: #ffffff;
    }

    .theme-primary .btn-primary:hover,
    .theme-primary .btn-primary:active,
    .theme-primary .btn-primary:focus,
    .theme-primary .btn-primary.active {
        background-color: #1b9c35 !important;
        border-color: #1b9c35 !important;
        color: #ffffff !important;
    }

    @media (max-width: 768px) {
        .fixed .content-wrapper {
            margin-top: 75px !important;
        }
    }

    .fixed .content-wrapper {
        margin-top: 0px;
    }

    .icon {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin: 0 auto 15px;
        font-size: 28px;
    }

    .icon i {
        margin-right: 0px !important;
    }

    .btn-outline-primary {
        background-color: #e3e3e3;
        color: #585EA8;
        font-weight: bold;
    }

    .btn-outline-primary.active,
    .btn-outline-primary:focus,
    .btn-outline-primary:hover {
        background-color: #585EA8;
        color: white;
        border-color: #585EA8;
        font-weight: bold;
    }

    .m-card-iniciado {
        margin-top: -20px;
    }

    @media (max-width: 768px) {
        .m-card-iniciado {
            margin-top: 0px;
        }
    }
</style>


<div class="content-wrapper bg-light">
    <div class="container-full ">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="p-3" style="min-height: 80vh;">
                        <div class="row g-2 mb-4 justify-content-end">
                            <div class="col-9">
                                <div class="me-auto text-start">
                                    <h4 class="page-title fw-bold text-purple">KPI's Atendimento</h4>
                                </div>
                            </div>

                            <div class="col-3 ">
                                <div class="input-group shadow-sm">
                                    <div class="input-group-addon bg-purple border-light">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                    <select id="meusNumeros" class="selectpicker form-control form-control-sm bg-white border-light" title="Selecione um número" style="letter-spacing: 1px !important;">
                                        <option value="" style="letter-spacing: 1px !important;" selected>Todos os números</option>
                                        {% for n in numeros %}
                                        <option value="{{n.idNumeros}}" style="letter-spacing: 1px !important;">{{n.descricao}} ({{n.numero}})</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div class="row g-0" style="margin-top: 3rem!important;">
                            <div class="box-body no-padding">
                                <div class="row g-0">

                                    <div class="col-12 col-md-4">
                                        <div class="box p-40 text-center">
                                            <div class="stat-card">
                                                <div class="icon bg-success-subtle" style="background:rgba(88, 93, 168, 0.30);">
                                                    <i class="fa-solid fa-clipboard-check text-purple"></i>
                                                </div>
                                                <h2 class="fw-bold text-purple" id="totalEncerrados">18</h2>
                                                <p class="text-muted fw-bold">Total de atendimentos Encerrado.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="box box-shadowed m-card-iniciado box-round text-center py-60 px-40 bg-white" style="background: #6cbd7730 !important;">
                                            <div class="stat-card">
                                                <div class="icon bg-success-subtle" style="background:rgba(96, 184, 108, 0.3);">
                                                    <i class="fa-solid fa-headset" style="color: #60b86c!important;"></i>
                                                </div>
                                                <h2 class="fw-bold text-green-manager2" id="totalIniciados">10</h2>
                                                <p class="text-muted fw-bold">Total de Atendimentos Iniciados.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4">
                                        <div class="box p-40 text-center">
                                            <div class="stat-card">
                                                <div class="icon bg-success-subtle" style="background:rgba(255, 170, 0, 0.3);">
                                                    <i class="fa-solid fa-x text-warning"></i>
                                                </div>
                                                <h2 class="fw-bold text-warning" id="totalPendentes">10</h2>
                                                <p class="text-muted fw-bold">Aguardando Atendimento.</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="btn-group" role="group" aria-label="Período">
                                            <button type="button" class="btn btn-outline-primary period-filter active" data-period="7">Últimos 7 dias</button>
                                            <button type="button" class="btn btn-outline-primary period-filter" data-period="30">Últimas Semanas</button>
                                            <button type="button" class="btn btn-outline-primary period-filter" data-period="180">Últimos 6 meses</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Pendentes</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosPendentes" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Pendentes por Departamento</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosPendentesDepartamentos" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Pendentes por Atendente</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosPendentesAtendente" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Iniciados</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentoIniciados" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Iniciados por Departamento</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentoIniciadosDepartamento" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Iniciados por Atendente</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentoIniciadosAtendente" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Encerrados</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosEncerrados" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Encerrados por Departamento</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosEncerradosDepartamento" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box-body no-padding">
                                    <div class="card">
                                        <div class="card-header bg-purple rounded-4 with-border p-3">
                                            <h5 class="card-title fw-bold">Atendimentos Encerrados por Atendente</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
                                                <canvas id="atendimentosEncerradosAtendente" style="max-height: 300px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
</div>

{% endblock %}
{% block scripts %}

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
    $('body').addClass('sidebar-collapse');

    var colors = [];
    var colorsLight = [];
    var classesColors = ['warning'];

    $(document).ready(function() {
        $('.dropdown-toggle').css('min-height', '34px');
        $('.dropdown-toggle').css('font-size', '14px');
        $('#meusNumeros').selectpicker();

        moment.locale('pt-br');

        $('.period-filter').on('click', function() {
            $('.period-filter').removeClass('active');
            $(this).addClass('active');

            const period = $(this).data('period');
            let startDate, endDate;

            if (period === 7) {
                startDate = moment().subtract(6, 'days').format('YYYY-MM-DD');
                endDate = moment().format('YYYY-MM-DD');
            } else if (period === 30) {
                startDate = moment().subtract(29, 'days').format('YYYY-MM-DD');
                endDate = moment().format('YYYY-MM-DD');
            } else if (period === 180) {
                startDate = moment().subtract(179, 'days').format('YYYY-MM-DD');
                endDate = moment().format('YYYY-MM-DD');
            }

            buscarConversas(startDate, endDate);
        });

        const startDate = moment().subtract(6, 'days').format('YYYY-MM-DD');
        const endDate = moment().format('YYYY-MM-DD');
        buscarConversas(startDate, endDate);
    });

    document.getElementById('meusNumeros').addEventListener('change', function() {
        const startDate = moment().subtract(6, 'days').format('YYYY-MM-DD');
        const endDate = moment().format('YYYY-MM-DD');

        buscarConversas(startDate, endDate);
    });

    $.each(classesColors, function(index, color) {
        $('body').append('<div id="generateJsColor" class="bg-' + color + ' d-none"></div>');
        colors.push($('#generateJsColor').css("backgroundColor"));
        $('#generateJsColor').remove();

        $('body').append('<div id="generateJsColor" class="bg-' + color + '-light d-none"></div>');
        colorsLight.push($('#generateJsColor').css("backgroundColor"));
        $('#generateJsColor').remove();
    });

    function buscarConversas(startDate, endDate, buscarTodos = false) {
        Swal.fire({
            title: 'Buscando conversas...',
            allowOutsideClick: false,
            scrollbarPadding: false
        });
        Swal.showLoading();

        const numeroSelecionado = buscarTodos ? '' : document.getElementById('meusNumeros').value;

        const bodyData = `inicio=${startDate}&final=${endDate}` +
            (numeroSelecionado ? `&numero=${numeroSelecionado}` : '');

        fetch('buscarConversasPorData', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: bodyData
            })
            .then(res => res.json())
            .then(res => {
                console.log('Resposta da API:', res);

                if (res.Success === 'Success' && Array.isArray(res.conversas) && res.conversas.length > 0) {
                    const dadosPendentes = {};
                    const dadosPorAtendentePendentes = {};
                    const dadosPorDepartamentoPendentes = {};

                    const dadosIniciados = {};
                    const dadosPorAtendenteIniciados = {};
                    const dadosPorDepartamentoIniciados = {};

                    const dadosEncerrados = {};
                    const dadosPorAtendenteEncerrados = {};
                    const dadosPorDepartamentoEncerrados = {};

                    res.conversas.forEach(conversa => {
                        const diasDeDiferenca = moment(endDate).diff(moment(startDate), 'days');
                        const dataFormatada = diasDeDiferenca <= 7 ?
                            moment(conversa.data).format('DD/MM') :
                            moment(conversa.data).format('MMM/YYYY');

                        if (conversa.status === "AGUARDANDO ATENDENTE" || conversa.status === "ATENDIMENTO CHATBOT") {
                            if (!dadosPendentes[dataFormatada]) {
                                dadosPendentes[dataFormatada] = 0;
                            }
                            dadosPendentes[dataFormatada] += conversa.totalConversas;

                            if (conversa.atendente) {
                                if (!dadosPorAtendentePendentes[conversa.atendente]) {
                                    dadosPorAtendentePendentes[conversa.atendente] = 0;
                                }
                                dadosPorAtendentePendentes[conversa.atendente] += conversa.totalConversas;
                            }

                            if (conversa.departamento) {
                                if (!dadosPorDepartamentoPendentes[conversa.departamento]) {
                                    dadosPorDepartamentoPendentes[conversa.departamento] = 0;
                                }
                                dadosPorDepartamentoPendentes[conversa.departamento] += conversa.totalConversas;
                            }
                        }

                        if (conversa.status === "ATENDIMENTO INICIADO") {
                            if (!dadosIniciados[dataFormatada]) {
                                dadosIniciados[dataFormatada] = 0;
                            }
                            dadosIniciados[dataFormatada] += conversa.totalConversas;

                            if (conversa.atendente) {
                                if (!dadosPorAtendenteIniciados[conversa.atendente]) {
                                    dadosPorAtendenteIniciados[conversa.atendente] = 0;
                                }
                                dadosPorAtendenteIniciados[conversa.atendente] += conversa.totalConversas;
                            }

                            if (conversa.departamento) {
                                if (!dadosPorDepartamentoIniciados[conversa.departamento]) {
                                    dadosPorDepartamentoIniciados[conversa.departamento] = 0;
                                }
                                dadosPorDepartamentoIniciados[conversa.departamento] += conversa.totalConversas;
                            }
                        }

                        if (conversa.status === "ENCERRADO") {
                            if (!dadosEncerrados[dataFormatada]) {
                                dadosEncerrados[dataFormatada] = 0;
                            }
                            dadosEncerrados[dataFormatada] += conversa.totalConversas;

                            if (conversa.atendente) {
                                if (!dadosPorAtendenteEncerrados[conversa.atendente]) {
                                    dadosPorAtendenteEncerrados[conversa.atendente] = 0;
                                }
                                dadosPorAtendenteEncerrados[conversa.atendente] += conversa.totalConversas;
                            }

                            if (conversa.departamento) {
                                if (!dadosPorDepartamentoEncerrados[conversa.departamento]) {
                                    dadosPorDepartamentoEncerrados[conversa.departamento] = 0;
                                }
                                dadosPorDepartamentoEncerrados[conversa.departamento] += conversa.totalConversas;
                            }
                        }
                    });

                    atualizarGrafico("atendimentosPendentes", dadosPendentes, 0);
                    atualizarGrafico("atendimentosPendentesAtendente", dadosPorAtendentePendentes, 1);
                    atualizarGrafico("atendimentosPendentesDepartamentos", dadosPorDepartamentoPendentes, 2);

                    atualizarGrafico("atendimentoIniciados", dadosIniciados, 3);
                    atualizarGrafico("atendimentoIniciadosAtendente", dadosPorAtendenteIniciados, 4);
                    atualizarGrafico("atendimentoIniciadosDepartamento", dadosPorDepartamentoIniciados, 5);

                    atualizarGrafico("atendimentosEncerrados", dadosEncerrados, 6);
                    atualizarGrafico("atendimentosEncerradosAtendente", dadosPorAtendenteEncerrados, 7);
                    atualizarGrafico("atendimentosEncerradosDepartamento", dadosPorDepartamentoEncerrados, 8);

                    const totalPendentes = Object.values(dadosPendentes).reduce((acc, val) => acc + val, 0);
                    const totalIniciados = Object.values(dadosIniciados).reduce((acc, val) => acc + val, 0);
                    const totalEncerrados = Object.values(dadosEncerrados).reduce((acc, val) => acc + val, 0);

                    document.getElementById('totalPendentes').textContent = totalPendentes;
                    document.getElementById('totalIniciados').textContent = totalIniciados;
                    document.getElementById('totalEncerrados').textContent = totalEncerrados;

                    Swal.close();
                } else {
                    atualizarGrafico("atendimentosPendentes", {
                        "Sem conversas nesse período": 0
                    }, 0);
                    atualizarGrafico("atendimentosPendentesAtendente", {
                        "Sem conversas nesse período": 0
                    }, 1);
                    atualizarGrafico("atendimentosPendentesDepartamentos", {
                        "Sem conversas nesse período": 0
                    }, 2);

                    atualizarGrafico("atendimentoIniciados", {
                        "Sem conversas nesse período": 0
                    }, 3);
                    atualizarGrafico("atendimentoIniciadosAtendente", {
                        "Sem conversas nesse período": 0
                    }, 4);
                    atualizarGrafico("atendimentoIniciadosDepartamento", {
                        "Sem conversas nesse período": 0
                    }, 5);

                    atualizarGrafico("atendimentosEncerrados", {
                        "Sem conversas nesse período": 0
                    }, 6);
                    atualizarGrafico("atendimentosEncerradosAtendente", {
                        "Sem conversas nesse período": 0
                    }, 7);
                    atualizarGrafico("atendimentosEncerradosDepartamento", {
                        "Sem conversas nesse período": 0
                    }, 8);

                    document.getElementById('totalPendentes').textContent = 0;
                    document.getElementById('totalIniciados').textContent = 0;
                    document.getElementById('totalEncerrados').textContent = 0;

                    Swal.close();
                }
            })
            .catch(error => {
                Swal.fire({
                    title: 'Erro',
                    text: 'Ocorreu um erro ao buscar conversas.',
                    scrollbarPadding: false,
                    icon: 'error',
                    confirmButtonColor: 'var(--bs-info)'
                });
                console.error('Erro na requisição:', error);
            });
    }

    function atualizarGrafico(elementId, dados, colorIndex) {
        const chartEl = document.getElementById(elementId);
        if (chartEl) {
            const ctx = chartEl.getContext("2d");

            if (window[elementId] instanceof Chart) {
                window[elementId].destroy();
            }

            const colorMap = {
                "atendimentoIniciados": "#60b86c",
                "atendimentoIniciadosAtendente": "#60b86c",
                "atendimentoIniciadosDepartamento": "#60b86c",
                "atendimentosEncerrados": "#585EA8",
                "atendimentosEncerradosAtendente": "#585EA8",
                "atendimentosEncerradosDepartamento": "#585EA8",
            };

            const labelMap = {
                "atendimentoIniciados": "Atendimentos Iniciados",
                "atendimentoIniciadosAtendente": "Atendimentos Iniciados por Atendente",
                "atendimentoIniciadosDepartamento": "Atendimentos Iniciados por Departamento",
                "atendimentosEncerrados": "Atendimentos Encerrados",
                "atendimentosEncerradosAtendente": "Atendimentos Encerrados por Atendente",
                "atendimentosEncerradosDepartamento": "Atendimentos Encerrados por Departamento",
                "atendimentosPendentes": "Atendimentos Pendentes",
                "atendimentosPendentesAtendente": "Atendimentos Pendentes por Atendente",
                "atendimentosPendentesDepartamentos": "Atendimentos Pendentes por Departamento",
            };

            const customColors = colorMap[elementId] || colors[colorIndex % colors.length];
            const customHoverColors = colorMap[elementId] || colorsLight[colorIndex % colorsLight.length];

            const labels = Object.keys(dados);
            const values = Object.values(dados);
            const trendline = calcularLinhaDeTendencia(values);

            const includeTrendline = ["atendimentosPendentes", "atendimentoIniciados", "atendimentosEncerrados"].includes(elementId);

            const datasets = [{
                label: labelMap[elementId] || "Dados",
                data: values,
                backgroundColor: customColors,
                borderColor: customColors,
                hoverBackgroundColor: customHoverColors,
                borderWidth: 0.6,
            }, ];

            if (includeTrendline) {
                datasets.push({
                    label: "Linha de Tendência",
                    data: trendline,
                    type: "line",
                    borderColor: "#FF5733",
                    borderWidth: 2,
                    fill: false,
                    pointRadius: 0,
                    tension: 0.4,
                    borderDash: [5, 5],
                });
            }

            window[elementId] = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: labels,
                    datasets: datasets,
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                        },
                        tooltip: {
                            enabled: true,
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false,
                            },
                        },
                        y: {
                            beginAtZero: true,
                        },
                    },
                },
            });
        }
    }

    function calcularLinhaDeTendencia(values) {
        const n = values.length;
        const x = Array.from({
            length: n
        }, (_, i) => i + 1);
        const sumX = x.reduce((a, b) => a + b, 0);
        const sumY = values.reduce((a, b) => a + b, 0);
        const sumXY = x.reduce((sum, xi, i) => sum + xi * values[i], 0);
        const sumX2 = x.reduce((sum, xi) => sum + xi * xi, 0);

        const m = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
        const b = values[n - 1] - m * n;

        return x.map(xi => m * xi + b);
    }

    function formatarDadosParaGrafico(dados, periodo) {
        let labels = [];
        let totals = {};

        if (periodo <= 30) {
            Object.keys(dados).forEach(data => {
                let dataFormatada = moment(data, 'DD/MM').format('DD/MM/YYYY');
                if (!totals[dataFormatada]) totals[dataFormatada] = 0;
                totals[dataFormatada] += dados[data];
            });

        } else if (periodo <= 90) {
            Object.keys(dados).forEach(data => {
                let semana = `Semana ${moment(data, 'DD/MM').week()} - ${moment(data, 'DD/MM').year()}`;
                if (!totals[semana]) totals[semana] = 0;
                totals[semana] += dados[data];
            });

        } else {
            Object.keys(dados).forEach(data => {
                let mesAno = moment(data, 'DD/MM').format('MMM/YYYY');
                if (!totals[mesAno]) totals[mesAno] = 0;
                totals[mesAno] += dados[data];
            });
        }

        labels = Object.keys(totals).sort((a, b) => {
            return moment(a, ['DD/MM/YYYY', 'MMM/YYYY']) - moment(b, ['DD/MM/YYYY', 'MMM/YYYY']);
        });

        return {
            labels,
            totals: labels.map(label => totals[label])
        };
    }
</script>
{% endblock %}