@extends('adminlte.app')

@section('content')

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            --info-gradient: linear-gradient(135deg, #3494E6 0%, #EC6EAD 100%);
            --warning-gradient: linear-gradient(135deg, #fce38a 0%, #f38181 100%);
            --dark-gradient: linear-gradient(135deg, #232526 0%, #414345 100%);
            --card-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.15);
            --hover-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 10px 10px rgba(0,0,0,0.18);
        }

        /* Animação de Entrada */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes fadeInUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

        /* Modern Cards */
        .modern-card {
            background: #fff;
            border: none;
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .modern-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }

        .modern-card-header {
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 20px;
            font-weight: 700;
            color: #555;
            border-radius: 15px 15px 0 0;
        }

        /* KPI Cards (Small Boxes) */
        .kpi-card {
            border-radius: 20px;
            color: white;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .kpi-card:hover {
            transform: scale(1.03);
        }

        .kpi-title { font-size: 0.9rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
        .kpi-value { font-size: 1.8rem; font-weight: 800; margin: 5px 0; }
        .kpi-sub { font-size: 0.85rem; opacity: 0.8; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; display: inline-block; }
        .kpi-icon { position: absolute; right: -10px; bottom: -10px; font-size: 5rem; opacity: 0.2; transform: rotate(-15deg); }

        /* Gradients */
        .bg-gradient-dark-custom { background: var(--dark-gradient); }
        .bg-gradient-blue-custom { background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); } /* Tfuel - Verde/Azul */
        .bg-gradient-success-custom { background: var(--success-gradient); } /* IM */
        .bg-gradient-primary-custom { background: var(--primary-gradient); } /* GC */
        .bg-gradient-lime-custom { background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); } /* Postos */

        /* Filtros Bonitos */
        .filter-section {
            background: white;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 10px 30px;
        }

        /* Tables */
        .table-modern thead th {
            background-color: #f8f9fa;
            color: #6c757d;
            border: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
        }
        .table-modern tbody tr {
            transition: background 0.2s;
        }
        .table-modern tbody tr:hover {
            background-color: #f1f7ff !important;
        }
        .table-modern td {
            vertical-align: middle !important;
            border-top: 1px solid #f0f0f0;
        }

        /* Input Styling */
        .form-control-modern {
            border-radius: 20px;
            border: 1px solid #e0e0e0;
            background-color: #f9f9f9;
            transition: all 0.3s;
        }
        .form-control-modern:focus {
            background-color: #fff;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
    </style>

    <div class="content-wrapper pb-5" style="background-color: #f4f6f9;">

        <div class="content-header fade-in-up">
            <div class="container-fluid">
                <div class="row mb-2 align-items-center">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark" style="font-weight: 800; letter-spacing: -1px;">Dashboard de Vendas</h1>
                        <p class="text-muted">Análise de performance e KPIs em tempo real</p>
                    </div>
                    <div class="col-sm-6 text-right">
                        @if($permissao->criar_clientes)
                            <a href="/vendas/importar" class="btn btn-dark rounded-pill px-4 shadow-sm">
                                <i class="fas fa-file-upload mr-2"></i> Importar CSV
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        @if ($message = Session::get('success'))
            <div class="alert alert-success rounded-pill mx-3 shadow-sm fade-in-up">
                <i class="fas fa-check-circle mr-2"></i> {{ $message }}
            </div>
        @endif
        @if ($message = Session::get('danger'))
            <div class="alert alert-danger rounded-pill mx-3 shadow-sm fade-in-up">
                <i class="fas fa-exclamation-circle mr-2"></i> {{ $message }}
            </div>
        @endif

        <div class="mx-3 mt-3 fade-in-up delay-1">
            <div class="modern-card p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0 text-primary font-weight-bold"><i class="fas fa-filter mr-2"></i>Filtros Inteligentes</h5>
                    <button class="btn btn-light btn-sm rounded-circle" type="button" data-toggle="collapse" data-target="#filtroVendas" aria-expanded="true" aria-controls="filtroVendas">
                        <i class="fas fa-minus text-muted"></i>
                    </button>
                </div>

                <form action="{{ route('vendas_dashboard') }}" id="form_filtrar" method="GET">
                    <div class="collapse show" id="filtroVendas">
                        <div class="row">
                            <div class="col-md-3 mb-2">
                                <label class="text-muted small font-weight-bold">INÍCIO</label>
                                <input type="date" name="data_suporte" value ="{{ old('data_suporte', date('Y-m-d', strtotime($filtros['data_inicio'])) ) }}" class="form-control form-control-modern" required>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="text-muted small font-weight-bold">FIM</label>
                                <input type="date" name="data_suporte_fim" value="{{ old('data_suporte_fim', date('Y-m-d', strtotime($filtros['data_fim'])) ) }}" class="form-control form-control-modern" required>
                            </div>

                            @if($permissao->visualizar_todas_vendas)
                                <div class="col-md-3 mb-2">
                                    <label class="text-muted small font-weight-bold">GESTOR</label>
                                    <select name="gestor" class="form-control form-control-modern">
                                        <option value="">Todos os Gestores</option>
                                        @foreach ($gestores as $gestor)
                                            <option @if($filtros['gestor'] == $gestor->id ) selected @endif value="{{ $gestor->id }}">{{ $gestor->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            <div class="col-md-3 mb-2">
                                <label class="text-muted small font-weight-bold">CLIENTE</label>
                                <div class="input-group">
                                    <input type="text" name="nome_cliente" value="{{ old('nome_cliente', $filtros['nome_cliente']) }}" class="form-control form-control-modern" placeholder="Buscar por nome...">
                                    <div class="input-group-append ml-2">
                                        <button class="btn btn-primary rounded-pill px-4 shadow" type="submit">Filtrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mx-2 fade-in-up delay-2">
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="kpi-card bg-gradient-dark-custom">
                    <div>
                        <div class="kpi-title">Global</div>
                        <div class="kpi-value count-up" data-value="{{$totaisLitros}}">0</div>
                        <div class="kpi-sub">Obj: {{number_format($porcObjs,2,',','.')}} %</div>
                    </div>
                    <i class="fas fa-globe kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="kpi-card bg-gradient-blue-custom">
                    <div>
                        <div class="kpi-title">Tfuel</div>
                        <div class="kpi-value count-up" data-value="{{$totaisLitrosTfuel}}">0</div>
                        <div class="kpi-sub">Obj: {{number_format($porcObjsTfuel,2,',','.')}} %</div>
                    </div>
                    <i class="fas fa-gas-pump kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="kpi-card bg-gradient-success-custom">
                    <div>
                        <div class="kpi-title">IM</div>
                        <div class="kpi-value count-up" data-value="{{$totaisLitrosIM}}">0</div>
                        <div class="kpi-sub">Obj: {{number_format($porcObjsIM,2,',','.')}} %</div>
                    </div>
                    <i class="fas fa-industry kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="kpi-card bg-gradient-primary-custom">
                    <div>
                        <div class="kpi-title">Grandes Contas</div>
                        <div class="kpi-value count-up" data-value="{{$totaisLitrosGC}}">0</div>
                        <div class="kpi-sub">Obj: {{number_format($porcObjsGC,2,',','.')}} %</div>
                    </div>
                    <i class="fas fa-building kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="kpi-card bg-gradient-lime-custom">
                    <div>
                        <div class="kpi-title">Postos</div>
                        <div class="kpi-value count-up" data-value="{{$totaisLitrosPostos}}">0</div>
                        <div class="kpi-sub">Obj: {{number_format($porcObjsPostos,2,',','.')}} %</div>
                    </div>
                    <i class="fas fa-store-alt kpi-icon"></i>
                </div>
            </div>
        </div>

        <div class="row mx-2 fade-in-up delay-3">
            <div class="col-12">
                <div class="modern-card p-2">
                    <x-dashboardvendas.vend-grafico-vendas-por-mes :vendas-totais="$vendasTotais" :vendas-por-mes="$vendasPorMes" :filtros="$filtros" :vendas-por-mes-passado="$vendasPorMesPassado" />
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-2 fade-in-up delay-3">
            <div class="col-lg-6 col-12">
                <div class="modern-card">
                    <div class="modern-card-header text-danger">
                        <i class="fas fa-history mr-2"></i> Histórico: {{  date('Y', strtotime($filtros['data_inicio'])) -1 }}
                    </div>
                    <div class="table-responsive p-0">
                        <table class="table table-modern table-striped tabelashow5 mb-0">
                            <thead>
                            <tr>
                                <th>Mês</th>
                                <th>Total Litros</th>
                                @foreach ($vendasTotais as $key => $vendaTotal)
                                    <th>{{ $vendaTotal['canalAbr'] }}</th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($vendasPorMesPassado as $venda)
                                <tr>
                                    <td class="font-weight-bold text-muted">@if($venda->mes < 10){{0}}@endif{{$venda->mes}}/{{ $venda->ano}}</td>
                                    <td class="font-weight-bold">{{ $venda->litros}}</td>
                                    @foreach ($vendasTotais as $key => $vendaTotal )
                                        @foreach ($vendaTotal['vendasPorMesPassado'] as $vpmpt)
                                            @if ($vpmpt->mes && $vpmpt->mes == $venda->mes)
                                                <td>{{ $vpmpt->litros }}</td>
                                            @endif
                                        @endforeach
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-12">
                <div class="modern-card">
                    <div class="modern-card-header text-success">
                        <i class="fas fa-calendar-check mr-2"></i> Performance: {{  date('Y', strtotime($filtros['data_inicio']))}}
                    </div>
                    <div class="table-responsive p-0">
                        <table class="table table-modern table-striped tabelashow5 mb-0">
                            <thead>
                            <tr>
                                <th>Mês</th>
                                <th>Total Litros</th>
                                @foreach ($vendasTotais as $key => $vendas)
                                    <th>{{ $vendas['canalAbr'] }}</th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($vendasPorMes as $venda)
                                <tr>
                                    <td class="font-weight-bold text-muted">@if($venda->mes < 10){{0}}@endif{{$venda->mes}}/{{ $venda->ano}}</td>
                                    <td class="font-weight-bold text-success">{{ $venda->litros}}</td>
                                    @foreach ($vendasTotais as $key => $vendaTotal )
                                        <td>
                                            @php
                                                $valorFinal = 0;
                                                foreach ($vendaTotal['vendasPorMes'] as $vpmt) {
                                                    if ($vpmt->mes && $vpmt->mes == $venda->mes){
                                                        $valorFinal = $vpmt->litros;
                                                    }
                                                }
                                            @endphp
                                            {{ $valorFinal }}
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-4 fade-in-up delay-4 align-items-stretch">
            <div class="col-lg-6 col-12">
                <div class="modern-card h-100 p-2">
                    <div class="modern-card-header border-0"><i class="fas fa-list mr-2"></i> Detalhe por Canal</div>
                    <x-dashboardvendas.tabela-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="litros" :vendas-totais="$vendasTotais"/>
                </div>
            </div>
            <div class="col-lg-6 col-12">
                <div class="modern-card h-100 p-2">
                    <div class="modern-card-header border-0"><i class="fas fa-chart-bar mr-2"></i> Visualização por Canal</div>
                    <x-dashboardvendas.grafico-barra-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="litros" cor="rgba(102, 126, 234, 0.9)"/>
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-4 fade-in-up delay-4">
            <div class="col-12">
                <div class="modern-card">
                    <div class="modern-card-header bg-white"><i class="fas fa-users mr-2"></i> Top Clientes</div>
                    <x-dashboardvendas.tabela-clientes :vendas-totais="$vendasTotais" :euros-por-cliente="$eurosPorCliente" :filtros="$filtros"/>
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-4 fade-in-up delay-4 align-items-start">
            <div class="col-lg-4 col-12">
                <div class="modern-card">
                    <div class="modern-card-header"><i class="fas fa-table mr-2"></i> Dados de Produtos</div>
                    <div class="table-responsive">
                        <table class="tabelashow2 table table-modern table-valign-middle">
                            <thead>
                            <tr>
                                @foreach ($produtos['headers'] as $header )
                                    <th>{{ $header }}</th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($produtos['vendas'] as $venda)
                                <tr>
                                    @foreach ($produtos['headers'] as $header )
                                        <td>{{ $venda[$produtos['headers']['h' . $loop->iteration]] }}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-12">
                <div class="modern-card">
                    <div class="modern-card-header d-flex justify-content-between">
                        <span><i class="fas fa-chart-pie mr-2"></i> Distribuição Litros por Produto</span>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="donutChart" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-4 fade-in-up delay-4 align-items-start">
            <div class="col-lg-4 col-12">
                <div class="modern-card">
                    <div class="modern-card-header"><i class="fas fa-euro-sign mr-2"></i> Rentabilidade Produtos</div>
                    <div class="table-responsive">
                        <table class="tabelashow3 table table-modern table-valign-middle">
                            <thead>
                            <tr>
                                @foreach ($eurosPorProdutos['headers'] as $header )
                                    <th>{{ $header }}</th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($eurosPorProdutos['vendas'] as $venda)
                                <tr>
                                    @foreach ($eurosPorProdutos['headers'] as $header )
                                        <td>{{ $venda[$eurosPorProdutos['headers']['h' . $loop->iteration]] }}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-12">
                <div class="modern-card">
                    <div class="modern-card-header d-flex justify-content-between">
                        <span><i class="fas fa-chart-pie mr-2"></i> Distribuição Valor por Produto</span>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="donutChartValor" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mx-2 mt-4 mb-5">
            <div class="col-12">
                <x-dashboardvendas.tabela-consumo-zero :vendas-totais="$vendasTotais" :filtros="$filtros" :clientes-zero="$clientes_zero"/>
            </div>
        </div>

    </div>

    <script src="../../plugins/chart.js/Chart.min.js"></script>

    <script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}></script>
    <script src={{ asset('/plugins/jszip/jszip.min.js') }}></script>
    <script src={{ asset('/plugins/pdfmake/pdfmake.min.js') }}></script>
    <script src={{ asset('/plugins/pdfmake/vfs_fonts.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.html5.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.print.min.js') }}></script>
    <script src={{ asset('/plugins/datatables-buttons/js/buttons.colVis.min.js') }}></script>

    <script>
        // Função para Animar os Números (Count Up Effect)
        $(document).ready(function() {
            $('.count-up').each(function () {
                var $this = $(this);
                // Remove formatação (pontos e vírgulas) para calcular
                var finalValueStr = $this.attr('data-value'); // Valor bruto do PHP se possível, ou limpar string
                var finalValue = parseFloat(String(finalValueStr).replace(/\./g, '').replace(',', '.'));

                // Se não for um número válido, pule
                if(isNaN(finalValue)) return;

                $({ Counter: 0 }).animate({ Counter: finalValue }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function () {
                        // Formata de volta para Português enquanto conta
                        $this.text(Math.ceil(this.Counter).toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    },
                    complete: function(){
                        $this.text(finalValue.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                    }
                });
            });
        });

        // Configuração Genérica para DataTables (Design Limpo)
        function initDataTable(selector, options) {
            let defaultOptions = {
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "order": [[0, "asc"]],
                "buttons": ["csv", "excel", "pdf", { "extend": "print", "text": "Impr." }],
                "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Todos"]],
                "pageLength": 5,
                "dom": 'Bfrtip',
                "language": {
                    "sProcessing": "A processar...",
                    "sZeroRecords": "Não foram encontrados resultados",
                    "sInfo": "De _START_ a _END_ de _TOTAL_",
                    "sInfoEmpty": "0 de 0",
                    "sInfoFiltered": "",
                    "oPaginate": { "sFirst": "Prim", "sPrevious": "Ant", "sNext": "Seg", "sLast": "Últ" }
                }
            };

            let settings = $.extend(true, defaultOptions, options);
            let table = $(selector).DataTable(settings);

            // Estilizar os botões para ficarem bonitos
            table.buttons().container().appendTo($(selector).closest('.dataTables_wrapper').find('.col-md-6:eq(0)'));
            $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-outline-primary btn-sm mb-2');
        }

        // Inicialização das Tabelas
        $(function () {
            initDataTable('.tabelashow2', {
                columnDefs: [{ targets: 2, render: $.fn.dataTable.render.number('.', ',', 0) }]
            });

            initDataTable('.tabelashow3', {
                columnDefs: [{ targets: 2, render: $.fn.dataTable.render.number('.', ',', 2) }]
            });

            initDataTable('.tabelashow5', {
                columnDefs: [
                    { targets: [1,2,3,4,5], render: $.fn.dataTable.render.number('.', ',', 0) }
                ],
                buttons: ["excel", "pdf"]
            });
        });

        // Gráficos Pizza (Donut) com Cores Modernas
        $(function () {
            // Paleta de cores moderna (Vivid)
            var modernColors = [
                '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
                '#858796', '#5a5c69', '#6610f2', '#e83e8c', '#fd7e14',
                '#20c997', '#007bff', '#6f42c1', '#17a2b8'
            ];

            function getChartConfig(labels, data, tooltipPrefix) {
                return {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: data,
                            backgroundColor: modernColors.slice(0, data.length),
                            hoverBackgroundColor: modernColors.slice(0, data.length),
                            hoverBorderColor: "rgba(234, 236, 244, 1)",
                            borderWidth: 5
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        responsive: true,
                        cutoutPercentage: 70, // Faz o donut ficar mais fino e elegante
                        legend: {
                            position: 'right',
                            labels: { padding: 20, boxWidth: 12, fontSize: 11 }
                        },
                        tooltips: {
                            backgroundColor: "rgb(255,255,255)",
                            bodyFontColor: "#858796",
                            borderColor: '#dddfeb',
                            borderWidth: 1,
                            xPadding: 15,
                            yPadding: 15,
                            displayColors: false,
                            caretPadding: 10,
                        },
                    }
                };
            }

            // Dados Gráfico 1 (Litros)
            var labelsLitros = [
                @foreach ($produtos['vendas'] as $venda)
                    '{{ $venda[$produtos['headers']['h1']] }}',
                @endforeach
            ];
            var dataLitros = [
                @foreach ($produtos['vendas'] as $venda)
                        {{ str_replace(".", "",$venda[$produtos['headers']['h3']]) }},
                @endforeach
            ];

            var ctxLitros = document.getElementById("donutChart").getContext('2d');
            new Chart(ctxLitros, getChartConfig(labelsLitros, dataLitros));

            // Dados Gráfico 2 (Valor)
            var labelsValor = [
                @foreach ($eurosPorProdutos['vendas'] as $venda)
                    '{{ $venda[$eurosPorProdutos['headers']['h1']] }}',
                @endforeach
            ];
            var dataValor = [
                @foreach ($eurosPorProdutos['vendas'] as $venda)
                        {{ str_replace(",", ".",str_replace(".", "",$venda[$eurosPorProdutos['headers']['h3']])) }},
                @endforeach
            ];

            var ctxValor = document.getElementById("donutChartValor").getContext('2d');
            new Chart(ctxValor, getChartConfig(labelsValor, dataValor));
        });
    </script>

@endsection