@extends('adminlte.app')

@section('content')

<div class="content-wrapper pb-3">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Dashboard de Vendas</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
            
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
    @if ($message = Session::get('danger'))
        <div class="alert alert-danger">
            <p>{{ $message }}</p>
        </div>
    @endif
    <div class="card mx-3 mt-3">
        <div class="card-header">
            <div class="row">
                <div class="col-md-4">
                    Filtros Relatórios
                </div>
                <div class="col-md-8 text-right">
                    
                    @if($permissao->criar_clientes)
                        <a  href="/vendas/importar"><button class="btn btn-primary rounded">Importar CSV</button></a>
                    @endif
                </div>   
            </div> 
        </div>
        
        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 bg-dark text-white d-print-none">
            <div class="col-sm-11">
                Filtros
             </div> 
             <div class="col-ms-1">
                 <button class="btn btn-primary btn-sm" data-toggle="collapse" href="#filtroVendas" role="button" aria-expanded="true" aria-controls="filtroVendas" title="Mostrar Filtros"><i class="fas fa-minus" title="Ocultar Filtros" aria-hidden="true"></i></button>
             </div>
         </div>
 
        <form action="{{ route('vendas_dashboard') }}" id="form_filtrar" method="GET" class="pt-4" >
            <div class="border p-3 ml-3 mr-3 mb-3 bg-light collapse show" id="filtroVendas">
    
                <div class="form-group row pd-3 ">

                    <div class="col-md-3">
                        <label for="data_suporte" class=" control-label my-auto mr-2">Início do Intervalo</label>
                        <input type="date" name="data_suporte" id="data_suporte" value ="{{ old('data_suporte', date('Y-m-d', strtotime($filtros['data_inicio'])) ) }}" class=" form-control " required>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="nome_cliente" class=" control-label my-auto mr-2">Fim do Intervalo</label>
                        <input type="date" name="data_suporte_fim" id="data_suporte_fim" value="{{ old('data_suporte_fim', date('Y-m-d', strtotime($filtros['data_fim'])) ) }}" class=" form-control " required>
                    </div>
                    @if($permissao->visualizar_todas_vendas )
                        <div class="col-md-3">
                            <label for="gestor" class=" control-label my-auto mr-2">Gestor</label>
                            <select name="gestor" id="gestor" class=" form-control" >
                                <option value="">Todos</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">
                        <label for="nome_cliente" class=" control-label my-auto mr-2">Nome Cliente</label>
                        <input type="text" name="nome_cliente" id="nome_cliente" value="{{ old('nome_cliente', $filtros['nome_cliente']) }}" class=" form-control ">
                    </div>
                 

                    <div class="col-sm-3 mt-4">
                        <button id="btn_filtrar" class="btn btn-primary" type="submit">Filtrar</button>
                    </div>
                    
                </div>

  
            </div>

        </form>

        <div class="row mx-2">
            <div class="col-lg-2 col-12 mr-4">
                <!-- small box -->
                <div class="small-box" style="background-color: rgba(100, 100, 100, 0.486);">
                    <div class="inner text-center">

                    <strong> <p class="mb-2" style="color: white">Litros Vendidos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($totaisLitros,2,',','.')}}</strong> </p>

                    <strong> <p class="mb-2" style="color: white">Objetivos Globais</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjs,2,',','.')}} %</strong> </p>
                    
                    {{-- <p> {{number_format($vendasTotal,2,',','.')}}</p> --}}
                    {{-- <p> {{number_format($objsTotal,2,',','.')}}</p> --}}
                    </div>
                    <div class="icon">
                        {{-- <i class="fas fa-user"></i> --}}
                    </div>
                    
                </div>
            </div>
            
            <div class="col-lg-2 col-12 mr-4">
                <!-- small box -->
                <div class="small-box" style="background-color: rgba(110, 210, 225);">
                    <div class="inner text-center">

                    <strong> <p class="mb-2" style="color: white">Litros Vendidos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($totaisLitrosTfuel,2,',','.')}}</strong> </p> 

                    <strong> <p class="mb-2" style="color: white">Objetivos Tfuel</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjsTfuel,2,',','.')}} %</strong> </p>

                    </strong> </p>
                    {{-- <p> {{number_format($vendasTotal,2,',','.')}}</p>
                    <p> {{number_format($objsTotal,2,',','.')}}</p> --}}
                    </div>
                    <div class="icon">
                        {{-- <i class="fas fa-user"></i> --}}
                    </div>
                    
                </div>
            </div>
            
            <div class="col-lg-2 col-12 mr-4">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner text-center">

                    <strong> <p class="mb-2" style="color: white">Litros Vendidos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($totaisLitrosIM,2,',','.')}}</strong> </p> 
                        
                    <strong> <p class="mb-2" style="color: white">Objetivos IM</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjsIM,2,',','.')}} %</strong> </p>
                    {{-- <p> {{number_format($vendasTotal,2,',','.')}}</p>
                    <p> {{number_format($objsTotal,2,',','.')}}</p> --}}
                    </div>
                    <div class="icon">
                        {{-- <i class="fas fa-user"></i> --}}
                    </div>
                    
                </div>
            </div>
            <div class="col-lg-2 col-12 mr-4">
                <!-- small box -->
                <div class="small-box bg-primary">
                    <div class="inner text-center">

                    <strong> <p class="mb-2" style="color: white">Litros Vendidos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($totaisLitrosGC,2,',','.')}}</strong> </p> 
                        

                    <strong> <p class="mb-2" style="color: white">Objetivos Grandes Contas</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjsGC,2,',','.')}} %</strong> </p>
                    {{-- <p> {{number_format($vendasTotal,2,',','.')}}</p>
                    <p> {{number_format($objsTotal,2,',','.')}}</p> --}}
                    </div>
                    <div class="icon">
                        {{-- <i class="fas fa-user"></i> --}}
                    </div>
                    
                </div>
            </div>

            <div class="col-lg-2 col-12 mr-4">
                <!-- small box -->
                <div class="small-box" style="background-color: rgba(144, 181, 36, 0.832);">
                    <div class="inner text-center">

                    <strong> <p class="mb-2" style="color: white">Litros Vendidos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($totaisLitrosPostos,2,',','.')}}</strong> </p> 

                    <strong> <p class="mb-2" style="color: white">Objetivos Postos</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjsPostos,2,',','.')}} %</strong> </p>

                    </strong> </p>
                    {{-- <p> {{number_format($vendasTotal,2,',','.')}}</p>
                    <p> {{number_format($objsTotal,2,',','.')}}</p> --}}
                    </div>
                    <div class="icon">
                        {{-- <i class="fas fa-user"></i> --}}
                    </div>
                    
                </div>
            </div>
            
        </div>

        <div class="row mx-2">
            <x-dashboardvendas.vend-grafico-vendas-por-mes :vendas-totais="$vendasTotais" :vendas-por-mes="$vendasPorMes" :filtros="$filtros" :vendas-por-mes-passado="$vendasPorMesPassado" />
        </div>

        <div class="row mx-2 mt-2">
            
            {{--  --}}

            <div class="col-lg-6 col-12 table-responsive">
                <table class="tabelashow5 table table-striped table-valign-middle">
                    <thead>
                        <tr class=" bg-dark text-white">
                            <th>Meses - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            <th>Litros - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            @foreach ($vendasTotais as $key => $vendaTotal)
                                <th>{{ $vendaTotal['canalAbr'] }} - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            @endforeach
                            {{-- <th>TFUEL - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            <th>IM - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            <th>GC - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            <th>Postos - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th>
                            <th>HP - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }} </th> --}}

                        </tr>
                    </thead>
                    <tbody style="background-color: #fffdfd">
                        @foreach($vendasPorMesPassado as $venda)
                            <tr>
                                <td>@if($venda->mes < 10){{0}}@endif{{$venda->mes}}/{{ $venda->ano}}</td>
                                <td>{{ $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 class="col-lg-6 col-12 table-responsive">
                <table class="tabelashow5 table table-striped table-valign-middle">
                    <thead>
                        <tr class=" bg-dark text-white">
                            <th>Meses - {{  date('Y', strtotime($filtros['data_inicio']))}} </th>
                            <th>Litros - {{  date('Y', strtotime($filtros['data_inicio']))}} </th>
                            @foreach ($vendasTotais as $key => $vendas)
                                <th>{{ $vendas['canalAbr'] }} - {{  date('Y', strtotime($filtros['data_inicio']))}}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody style="background-color: #fffdfd">

                        @foreach($vendasPorMes as $venda)
                            <tr>
                                <td>@if($venda->mes < 10){{0}}@endif{{$venda->mes}}/{{ $venda->ano}}</td>
                                <td>{{ $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 class="row mx-2 mt-2">
            <div class="col-lg-6 col-12">
                <x-dashboardvendas.tabela-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="litros"  :vendas-totais="$vendasTotais"/>
            </div>
            <div class="col-lg-6 col-12">
                <x-dashboardvendas.grafico-barra-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="litros" cor="rgba(60,141,188,0.9)"/>
            </div>
        </div>
        {{-- <div class="row mx-2 mt-2">
            <div class="col-lg-12 col-12">
                <x-dashboardvendas.grafico-linha :canais="$canais" col="litros" :vendas-totais="$vendasTotais" :vendas-por-mes="$vendasPorMes" :filtros="$filtros" :vendas-por-mes-passado="$vendasPorMesPassado" />
            </div>
        </div> --}}

        {{--  --}}
        {{-- <div class="row mx-2 mt-2">
            <div class="col-lg-5 col-12">
                <x-dashboardvendas.tabela-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="valor"/>
            </div>
            <div class="col-lg-7 col-12">
                <x-dashboardvendas.grafico-barra-totais-por-canal :canais="$canais" :sem-canal="$sem_canal" col="valor" cor="rgba(230,149,30,0.8)"/>
            </div>
        </div> --}}


        {{--  --}}
        <div class="row mx-2 mt-2">
            <x-dashboardvendas.tabela-clientes :vendas-totais="$vendasTotais" :euros-por-cliente="$eurosPorCliente" :filtros="$filtros"/>
        </div>

        <div class="row mx-2 mt-2">
            {{--  --}}
            <div class="col-lg-4 col-12">
                <table class="tabelashow2 table table-striped table-valign-middle">
                    <thead>
                        <tr class=" bg-dark text-white">
                            @foreach ($produtos['headers'] as $header )
                                <th>{{ $header }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody style="background-color: #fffdfd">
                        @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 class="col-lg-8 col-12 mt-2">
                <!-- PIE CHART -->
                <div class="card ">
                    <div class="card-header bg-dark text-white">
                        <h3 class="card-title">Litros por Produtos</h3>
        
                        <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: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

        </div>


        {{-- Produtos Valor --}}
        <div class="row mx-2 mt-2">

            {{--  --}}

            <div class="col-lg-4 col-12">
                <table class="tabelashow3 table table-striped table-valign-middle">
                    <thead>
                        <tr class=" bg-dark text-white">
                            @foreach ($eurosPorProdutos['headers'] as $header )
                                <th>{{ $header }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody style="background-color: #fffdfd">
                        @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 class="col-lg-8 col-12 mt-2">
                <!-- PIE CHART -->
                <div class="card ">
                    <div class="card-header bg-dark text-white">
                        <h3 class="card-title">Valor por Produtos</h3>
        
                        <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: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

        </div>
        {{-- Produtos Valor - FIM --}}

        {{-- Consumo Zero  --}}
        <div class="row mx-2 mt-2">
            
            <x-dashboardvendas.tabela-consumo-zero :vendas-totais="$vendasTotais" :filtros="$filtros" :clientes-zero="$clientes_zero"/>
        </div>
        {{-- Fim Consumo Zero --}}

     </div>
</div>

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

 <!-- DataTables  & Plugins -->
 <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>
        function divideRGBABy2(rgbaString) {
            // Extrair os valores numéricos da string 'rgba'
            const regex = /rgba\((\d+), (\d+), (\d+), ([0-9.]+)\)/;
            const match = rgbaString.match(regex);
            
            if (match) {
                // Converter os valores capturados em números
                const red = parseInt(match[1]);
                const green = parseInt(match[2]);
                const blue = parseInt(match[3]);
                const alpha = parseFloat(match[4]);
                
                // Dividir os valores RGB por 2
                const newRed = Math.round(red / 2);
                const newGreen = Math.round(green / 2);
                const newBlue = Math.round(blue / 2);
                
                // Construir a nova string com os valores atualizados
                const newRGBAString = `rgba(${newRed}, ${newGreen}, ${newBlue}, ${alpha})`;
                
                return newRGBAString;
            } else {
                // Caso não seja uma string 'rgba' válida, retornar a string original
                return rgbaString;
            }
        }

     $('.tabelashow2').DataTable( {
     
     "paging": true,
     "lengthChange": false,
     "searching": false,
     "ordering": true,
     "info": true,
     "autoWidth": false,
     "responsive": true,
     "order": [[0, "asc"]],
     "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
     "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
     "columnDefs":
        [
            {
                targets: 2,
                render: $.fn.dataTable.render.number('.', ',', 0)
            },
        ],
     "pageLength": 5,
               "bJQueryUI": true,
               "oLanguage": {
                   "sProcessing":   "Processando...",
                   "sLengthMenu":   "Registros _MENU_ ",
                   "sZeroRecords":  "Não foram encontrados resultados",
                   "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                   "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                   "sInfoFiltered": "",
                   "sInfoPostFix":  "",
                   "sSearch":       "Buscar:",
                   "sUrl":          "",
                   "oPaginate": {
                       "sFirst":    "Primeiro",
                       "sPrevious": "Anterior",
                       "sNext":     "Seguinte",
                       "sLast":     "Último"
                   }
               }

   } ).buttons().container().appendTo('#tabelashow2_wrapper .col-md-6:eq(0)');


   $('.tabelashow3').DataTable( {
     
     "paging": true,
     "lengthChange": false,
     "searching": false,
     "ordering": true,
     "info": true,
     "autoWidth": false,
     "responsive": true,
     "order": [[0, "asc"]],
     "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
     "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
     "columnDefs":
        [
            {
                targets: 2,
                render: $.fn.dataTable.render.number('.', ',', 2)
            },
        ],
     "pageLength": 5,
               "bJQueryUI": true,
               "oLanguage": {
                   "sProcessing":   "Processando...",
                   "sLengthMenu":   "Registros _MENU_ ",
                   "sZeroRecords":  "Não foram encontrados resultados",
                   "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                   "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                   "sInfoFiltered": "",
                   "sInfoPostFix":  "",
                   "sSearch":       "Buscar:",
                   "sUrl":          "",
                   "oPaginate": {
                       "sFirst":    "Primeiro",
                       "sPrevious": "Anterior",
                       "sNext":     "Seguinte",
                       "sLast":     "Último"
                   }
               }

   } ).buttons().container().appendTo('#tabelashow2_wrapper .col-md-6:eq(0)');


   $('.tabelashow5').DataTable( {
     
     "paging": true,
     "lengthChange": false,
     "searching": false,
     "ordering": true,
     "info": true,
     "autoWidth": false,
     "responsive": true,
     "order": [[0, "asc"]],
     "buttons": [ "excel", "pdf", {"extend":"print","text":"Impr."}],
     "lengthMenu": [[8, 10, 20, 25, 50, -1], [8, 10, 20, 25, 50, "All"]],
     "columnDefs":
      [
          {
              targets: 1,
              render: $.fn.dataTable.render.number('.', ',', 0)
          },
          {
              targets: 2,
              render: $.fn.dataTable.render.number('.', ',', 0)
          },
          {
              targets: 3,
              render: $.fn.dataTable.render.number('.', ',', 0)
          },
          {
              targets: 4,
              render: $.fn.dataTable.render.number('.', ',', 0)
          },
          {
              targets: 5,
              render: $.fn.dataTable.render.number('.', ',', 0)
          },
       
      ],
     "pageLength": 5,
               "bJQueryUI": true,
               "oLanguage": {
                   "sProcessing":   "Processando...",
                   "sLengthMenu":   "Registros _MENU_ ",
                   "sZeroRecords":  "Não foram encontrados resultados",
                   "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                   "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                   "sInfoFiltered": "",
                   "sInfoPostFix":  "",
                   "sSearch":       "Buscar:",
                   "sUrl":          "",
                   "oPaginate": {
                       "sFirst":    "Primeiro",
                       "sPrevious": "Anterior",
                       "sNext":     "Seguinte",
                       "sLast":     "Último"
                   }
               }

   } );
 
 </script>





<script>
    $(function () {
     




    //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.



    var coloR = [];

    var dynamicColors = function() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b + ")";
    };

    @foreach ($produtos['vendas'] as $venda)
        coloR.push(dynamicColors());
    @endforeach


    var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
    var donutData        = {
      labels: [
        @foreach ($produtos['vendas'] as $venda)
            '{{ $venda[$produtos['headers']['h1']] }}',
        @endforeach
      ],
      
      datasets: [
        {
          data: [
            @foreach ($produtos['vendas'] as $venda)  
                {{  str_replace(".", "",$venda[$produtos['headers']['h3']]) }},
            @endforeach
          ],
         backgroundColor :  coloR,
        }
      ]
    }
    var donutOptions     = {
      maintainAspectRatio : false,
      responsive : true,

    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(donutChartCanvas, {
      type: 'pie',
      data: donutData,
      options: donutOptions
    })


    //Pizza Valor Produtos

    var donutChartCanvasValor = $('#donutChartValor').get(0).getContext('2d')
    var donutDataValor        = {
      labels: [
        @foreach ($eurosPorProdutos['vendas'] as $venda)
            '{{ $venda[$eurosPorProdutos['headers']['h1']] }}',
        @endforeach
      ],
      
      datasets: [
        {
          data: [
            @foreach ($eurosPorProdutos['vendas'] as $venda)  
                {{   str_replace(",", ".",str_replace(".", "",$venda[$eurosPorProdutos['headers']['h3']])) }},
            @endforeach
          ],
         backgroundColor :  coloR,
        }
      ]
    }

    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(donutChartCanvasValor, {
      type: 'pie',
      data: donutDataValor,
      options: donutOptions
    })


    
       

    
  
    })
  </script>
  
@endsection