@extends('adminlte.app')

@section('content')
   
    <div class="content-wrapper">
           <!-- 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">Bem Vindo {{auth()->user()->name}}</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

 <div class="border-0 card mx-3 mt-3 bg-transparent shadow-none mb-0">
    {{-- <div class="card-header pb-3 pt-3">
      Dashboard

    </div> --}}
    <div class="card-body p-0">
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box" style="background-color: rgb(110,210, 225);">
                <div class="inner text-center">

                  <strong> <p class="mb-2" style="color: white">Novos Clientes</p></strong>
                  <p class="mb-0" style="font-size: 12pt; color: white"> {{date('m/y')}}  - <strong><i class="fas fa-user"></i> {{$clientesMes->count()}} </strong> | {{date('m')}}/{{date('y')-1}} - <strong><i class="fas fa-user"></i> {{$clientesMesAnoPassado->count()}} </strong></p>
                  <p class="mb-1" style="font-size: 12pt; color: white"> {{date('Y')}} -  <strong><i class="fas fa-user"></i> {{$clientesAno->count()}}  </strong>| {{date('Y')-1}} -  <strong><i class="fas fa-user"></i> {{$clientesAnoPassado->count()}} </strong></p>
                </div>
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                {{-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> --}}
               </div>
            </div>

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box" style="background-color: rgb(110 225 140);">
                <div class="inner text-center">

                      <strong> <p class="mb-2" style="color: white">Vendas</p></strong>
                      <p title="Análise mensal em metros cúbicos: " class="mb-0" style="font-size: 12pt; color: white" > {{date('m/y')}}  - <strong><i class="fa fa-tint"  ></i> {{number_format($vendasMes->sum('quantidade')/1000,0,',','.')}} m³ </strong> | {{date('m')}}/{{date('y')-1}} - <strong><i class="fa fa-tint" ></i> {{number_format($vendasMesAnoPassado->sum('quantidade')/1000,0,',','.')}} m³ </strong></p>
                      <p title="Análise anual em milhões de metros cúbicos:" class="mb-1" style="font-size: 12pt; color: white" > {{date('Y')}} -  <strong><i class="fa fa-tint" ></i> {{number_format($vendasAno->sum('quantidade')/1000000,0,',','.')}}M m³  </strong>| {{date('Y')-1}} -  <strong><i class="fa fa-tint" ></i> {{number_format($vendasAnoPassado->sum('quantidade')/1000000,0,',','.')}}M m³ </strong></p>
                </div>
                  <div class="icon">
                      <i class="fa fa-tint"></i>
                  </div>
                  {{-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box bg-warning" style="background-color: rgb(110 225 140);">
                <div class="inner text-center">
                      <strong> <p class="mb-2" style="color: white">Status BD</p></strong>
                      <div class="row mb-1 text-left">
                        <div class="col">
                            <p title="Última atualização Pendentes TFUEL: " class="mb-0" style="font-size: 12pt; color: white"><strong>TFUEL</strong> {{ $ultimaAtualizacaoTFUEL->updated_at->format('d/m/Y H:i:s') }}</p>
                            <p title="Última atualização Pendentes IM: " class="mb-0" style="font-size: 12pt; color: white"><strong>IM</strong> {{ $ultimaAtualizacaoIM->updated_at->format('d/m/Y H:i:s') }}</p>
                            <p title="Última atualização VENDAS: " class="mb-0" style="font-size: 12pt; color: white"><strong>VENDAS</strong> {{ $ultimaAtualizacaoVendas->updated_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                    </div>
                </div>
                  <div class="icon">
                    <i class="fas fa-sync-alt"></i>
                  </div>
                  {{-- <a href="#" class="small-box-footer" style="color: white !important">More info <i class="fas fa-arrow-circle-right"></i></a> --}}
              </div>
            </div>

          </div>

          <div class="row">
            <div class="col-md-12 card card-primary shadow">
              <div class="card-header  ">
                <h3 class="card-title">Recebimentos do dia</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">
                {{-- <a href="/home?dias=dia"> <button class="btn btn-primary mt-3" @if($dias=="dia") style="background-color: #a55312" @endif  type="button">Dia</button>    </a> --}}
                {{-- <a href="/home?dias=semana"> <button class="btn btn-primary mt-3" @if($dias=="semana") style="background-color: #a55312" @endif type="button">Semana</button>    </a> --}}
                {{-- <a href="/home?dias=mes"> <button class="btn btn-primary mt-3" @if($dias=="mes") style="background-color: #a55312" @endif type="button">Mês</button>    </a> --}}
                <div class="row my-4">
                  <div class="col-md-3">
                    <label for="recebimento_dia">Data</label>
                    <form id="formRecebimentoDia" action="{{ route('home') }}">
                      <input name="recebimento_dia" id="recebimento_dia" type="date" class="form-control" value="{{ isset($recebimento_dia) ? date('Y-m-d', strtotime($recebimento_dia)) : '' }}" >
                      <script>
                        var recebimento_dia = "{{  date('Y-m-d', strtotime($recebimento_dia)) }}";

                        $('#recebimento_dia').change(function(){

                          if($(this).val() != recebimento_dia){
                            const params = new Proxy(new URLSearchParams(window.location.search), {
                              get: (searchParams, prop) => searchParams.get(prop),
                            });

                            var pagina = '';

                            if (params.pagina != null) {
                              let value = params.pagina;
                              pagina = `&pagina=${value}`;
                            }
                            window.location.href = `/home?recebimento_dia=${$(this).val()}${pagina}` ;
                          }
                        })
                      </script>
                    </form>
                  </div>
                </div>
                <div id="tabelaFaturasDia"> 
                  <div class="table-responsive">    
                    <table id="tabelaRecebimento" style="width:100%"  class="tabelashow table table-striped table-bordered table-hover">
                      <thead>
                          <tr style="text-align: center;">
                            <th>Canal</th>
                            <th>Cliente</th>
                            <th>Fatura</th>
                            <th>Valor</th>
                            <th>Emissão</th>
                            <th>Vencimento</th>
                            <th>Vencido</th>
                            <th>Status</th>
                            @if($permissao->exibir_todas_faturas)
                                <th class="">Gestor</th>
                            @endif
                          </tr>
                      </thead>
                      <tbody>
                          @foreach($faturasDia as $item)
                            <tr style="text-align: center;" >
                              <td>{{ $item->canal->nome_canal }}</td>
                                @if($item->origem == "IM" and isset($item->cliente_im->nome))
                                  <td>{{ $item->cliente_im->nome }}</td>
                                @elseif($item->origem =="TFUEL"  and isset($item->cliente_tfuel->nome))
                                  <td>{{ $item->cliente_tfuel->nome }}</td>
                                @else
                                  <td>Cliente Não encontrado</td>
                                @endif
                                <td>{{ $item->num_documento }}</td>
                                <td>{{ number_format($item->valor_total, 2, ',', '.') }}</td>
                                <td>{{ date('d/m/Y', strtotime($item->dt_emissao)) }}</td>
                                <td>{{ date('d/m/Y', strtotime($item->dt_vencimento)) }}</td>
                                @if ($item->status == "Pendente")
                                  @if($item->dt_vencimento < \Carbon\Carbon::now()) 
                                    <td class="bg-danger ">
                                      Sim
                                    </td>
                                  @else
                                    <td class="">
                                      Não
                                    </td>
                                  @endif
                                @else
                                  <td class=""></td>
                                @endif
                                @if ($item->sinistro == "Sim")
                                  <td>
                                    Sinistrado
                                  </td>
                                @else
                                  <td @if ($item->status == "Paga") class="bg-success" @elseif ($item->status == "PPago") style="background-color: #ffc000;" @elseif($item->status == "Promessa de PagamentoV") class="bg-danger"  @endif>
                                    {{ $item->status }}
                                  </td>
                                @endif
                                @if($permissao->exibir_todas_faturas)
                                  @if($item->origem == "IM" and isset($item->cliente_im->gestor_user->name))
                                    <td class="">{{ $item->cliente_im->gestor_user->name }}</td>
                                  @elseif($item->origem =="TFUEL"  and isset($item->cliente_tfuel->gestor_user->name))
                                    <td class="">{{ $item->cliente_tfuel->gestor_user->name }}</td>
                                  @else
                                    <td class=""></td>
                                  @endif
                                @endif
                            </tr>
                          @endforeach
                      </tbody>
                    </table>  
                  </div>
                </div> 
  
                {{-- <a href="/clientes/agenda?dias={{$dias}}"> <button class="btn btn-primary mt-3" type="button">Ver Todas</button>    </a> --}}
              </div>
              <!-- /.card-body -->
            </div>
          </div>

          <div class="row">
            
            <div class="col-12">
              <!-- small box -->
              <div class="small-box bg-orange">
                <div class="inner text-center">

                  <strong> <p class="mb-2" style="color: white">Total Recebido do Mês</p></strong>
                  {{-- <h3 style="color: white" >€ @if(isset($total_mes->total)) {{number_format($total_mes->total,2,",",".")}} @else 0,00 @endif</h3> --}}
                  <h3 style="color: white" >€ @if(isset($total_mes)) {{number_format($total_mes->sum('total'), 2, ",", ".")}} @else 0,00 @endif</h3>
                 
                  
                </div>
  
                  
              </div>
            </div>

          </div>

          <div class="row">

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box bg-danger">
                <div class="inner text-center">

                  <h3>€ {{number_format($vermelho_total,2,",",".")}}</h3>


                  <p class="mb-2 " style="font-size: 12pt"> <i class="fas fa-user"></i> {{$vermelho_cliente_quantidade}} clientes - <i class="fas fa-barcode"></i> {{$vermelho_fatura_quantidade}} documentos</p>
                  <p class="mb-2">Risco de Bloqueio e/ou Sinistro</p>

                </div>
                <div class="icon">
                  <i class="fas fa-barcode"></i>
                </div>
                    {{-- <a href="/detalhe?cor_escolhida=vermelho" class="small-box-footer">Mais Info<i class="fas fa-arrow-circle-right"></i></a> --}}

              </div>
            </div>
            <!-- ./col -->

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box bg-warning" >
                <div class="inner text-center">

                  <h3 style="color: white">€ {{number_format($amarelo_total,2,",",".")}}</h3>

                  <p class="mb-2" style="font-size: 12pt; color: white"> <i class="fas fa-user"></i> {{$amarelo_cliente_quantidade}} clientes - <i class="fas fa-barcode"></i> {{$amarelo_fatura_quantidade}} documentos</p>
                  <p class="mb-2" style="color: white">Em Incumprimento</p>
                </div>
                <div class="icon">
                  <i class="fas fa-barcode"></i>
                </div>

                  {{-- <a href="/detalhe?cor_escolhida=amarelo"  class="small-box-footer"><span style="color: white"> Mais Info<i class="fas fa-arrow-circle-right"></i> </span></a> --}}
       
              </div>
            </div>
            <!-- ./col -->

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box bg-success">
                <div class="inner text-center">
 
                  <h3>€ {{number_format($verde_total,2,",",".")}}</h3>
             
                  
                  <p class="mb-2" style="font-size: 12pt"> <i class="fas fa-user"></i> {{$verde_cliente_quantidade}} clientes - <i class="fas fa-barcode"></i> {{$verde_fatura_quantidade}} documentos</p>
                  <p class="mb-2" >Documentos não vencidos</p>
                </div>
                <div class="icon">
                  <i class="fas fa-barcode"></i>
                </div>
    
                  {{-- <a href="/detalhe?cor_escolhida=verde" class="small-box-footer">Mais Info<i class="fas fa-arrow-circle-right"></i></a> --}}
           
              </div>
            </div>
            <!-- ./col -->

            <div class="col-lg-3 col-12">
              <!-- small box -->
              <div class="small-box bg-dark ">
                <div class="inner text-center">

                  <h3>€ {{number_format($preto_total,2,",",".")}}</h3>

                  
                  <p class="mb-2" style="font-size: 12pt"> <i class="fas fa-user"></i> {{$preto_cliente_quantidade}} clientes - <i class="fas fa-barcode"></i> {{$preto_fatura_quantidade}} documentos</p>
                  <p class="mb-2">Clientes Sinistrados</p>
                </div>
                <div class="icon">
                  <i class="fas fa-barcode"></i>
                </div>

                  {{-- <a href="/detalhe-preto" class="small-box-footer">Mais Info<i class="fas fa-arrow-circle-right"></i></a> --}}

              </div>
            </div>
            <!-- ./col -->


          </div>

          <div class="row mx-2">
            <div class="col-lg-3 col-12">
            <!-- 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">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-3 col-12">
            <!-- 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">Objetivos Tfuel</p></strong>
                    <p class="mb-0" style="font-size: 12pt; color: white"> <strong> {{number_format($porcObjsTfuel,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-3 col-12">
            <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner text-center">

                    <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-3 col-12">
                <!-- small box -->
                    <div class="small-box bg-primary">
                        <div class="inner text-center">

                        <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>

          <div class="row ml-2">
            

              {{-- Vendas Por mês --}}

              <section class="col-lg-12 connectedSortable">

                <div class="card card-primary shadow">
                    <div class="card-header bg-dark text-white">
                        <h3 class="card-title">Vendas por Mês</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="LineChartVendas" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
        
        
        
                
              </section>
              {{-- Fim Vendas Por Mês --}}
          </div>

          <x-home.tabela-pvp :chk-precos-minimos="$chk_precos_minimos" :pvps-produtos="$pvps_produtos" :pvps-precos="$pvps_precos" :ultimo-preco-pvp="$ultimoPrecoPvp" :pvp-preco-check="$pvpPrecoCheck" :pvp-preco-semana="$pvpPrecoSemana" :precos-minimos="$precos_minimos" :pagina="$pagina" :recebimento-dia="$recebimento_dia"/>

          <div class="row">
            <div class="col-md-12 card card-primary shadow">
              <div class="card-header  ">
                <h3 class="card-title">Oportunidades</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">
                {{-- <a href="/home?dias=dia"> <button class="btn btn-primary mt-3" @if($dias=="dia") style="background-color: #a55312" @endif  type="button">Dia</button>    </a> --}}
                {{-- <a href="/home?dias=semana"> <button class="btn btn-primary mt-3" @if($dias=="semana") style="background-color: #a55312" @endif type="button">Semana</button>    </a> --}}
                {{-- <a href="/home?dias=mes"> <button class="btn btn-primary mt-3" @if($dias=="mes") style="background-color: #a55312" @endif type="button">Mês</button>    </a> --}}
                <div class="form-group row mb-0" id="preOportunidades">
                  <div class="col-md-1">
                  </div>
                  <div class="col-md-10 ">
                    <button id="carregarOportunidades" type="button" class="btn btn-primary btn-lg btn-block">
                      Carregar Oportunidades
                    </button>
                  </div>
                </div>
                <div id="tabelaOportunidades" class=""> 
                  <div class="table-responsive">    
                    <table id="tabelashow-oportunidades" style="width:100%" class=" table responsive table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th style="width: 80px" class ="text-center">Ações</th>
                                <th><div style="width:200px;">Cliente</div></th>
                                <th class="text-center">Produto</th>
                                <th><div style="width:200px;">Gestor</div></th>
                                <th>Data da última compra</th>
                                <th>Data estimada da próxima compra</th>
                                <th>Média de LT comprados</th>
                            </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                    </table>
                  </div>
                </div> 
  
                {{-- <a href="/clientes/agenda?dias={{$dias}}"> <button class="btn btn-primary mt-3" type="button">Ver Todas</button>    </a> --}}
              </div>
              <!-- /.card-body -->
            </div>
          </div>

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

 </div>

</div>



<!-- ChartJS -->
<script src="../../plugins/chart.js/Chart.min.js"></script>
<script src="../../plugins/moment/moment-with-locales.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>
<!-- DataTables  & Plugins -->

<!-- Page specific script -->
<script>
$('.tabelashow').DataTable( {
    
      "paging": true,
      "lengthChange": true,
      "searching": false,
      "ordering": true,
      "info": false,
      "autoWidth": false,
      "responsive": true,
      "order": [[ 1, "desc" ]],
      // "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
      "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                "bJQueryUI": true,
                "oLanguage": {
                    "sProcessing":   "Processando...",
                    "sLengthMenu":   "Registros _MENU_ ",
                    "sZeroRecords":  "Não foram encontrados resultados",
                    "sInfo":         " _START_ até _END_ de _TOTAL_ ",
                    "sInfoEmpty":    " 0 até 0 de 0 ",
                    "sInfoFiltered": "",
                    "sInfoPostFix":  "",
                    "sSearch":       "Buscar:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Primeiro",
                        "sPrevious": "Anterior",
                        "sNext":     "Seguinte",
                        "sLast":     "Último"
                    }
                }

} ).buttons().container().appendTo('.tabelashow_wrapper .col-md-6:eq(0)');
</script>

<script>
    $(function () {
      //-------------
      //- LINE CHART -
      //--------------
      var lineChartCanvas = $('#LineChartVendas').get(0).getContext('2d')
      var lineChartData ={
        labels  : [
          @foreach($vendasPorMes as $venda)
              @if($venda->mes ==1)
                  'Janeiro',
              @elseif($venda->mes ==2)
                  'Fevereiro',
              @elseif($venda->mes ==3)
                  'Março',  
              @elseif($venda->mes ==4)
                  'Abril',   
              @elseif($venda->mes ==5)
                  'Maio',  
              @elseif($venda->mes ==6)
                  'Junho',  
              @elseif($venda->mes ==7)
                  'Julho',  
              @elseif($venda->mes ==8)
                    'Agosto',  
              @elseif($venda->mes ==9)
                  'Setembro',  
              @elseif($venda->mes ==10)
                  'Outubro',  
              @elseif($venda->mes ==11)
                  'Novembro',  
              @elseif($venda->mes ==12)
                  'Dezembro',
              @endif

          //    'Mês{{ $venda->mes}}', 
            
          @endforeach
        ],
        datasets: [
          {
            label               : 'Litros -{{  date('Y', strtotime($filtros['data_inicio'])) }} ',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(60,141,188,0.8)',
            pointRadius          : false,
            fill                 : false,

            pointColor          : '#3b8bba',
            pointStrokeColor    : 'rgba(60,141,188,1)',
            pointHighlightFill  : '#fff',
            pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMes as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },

          {
            label               : 'Litros - {{  date('Y', strtotime($filtros['data_inicio'])) -1 }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(230,149,30,0.8)',
            pointRadius          : false,
            fill                 : false,

            pointColor          : '#3b8bba',
            pointStrokeColor    : 'rgba(60,141,188,1)',
            pointHighlightFill  : '#fff',
            pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesPassado as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
          {
            label               : 'TFUEL - {{  date('Y', strtotime($filtros['data_inicio']))  }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(110, 210, 225,0.8)',
            pointRadius          : false,
            fill                 : false,

          //   pointColor          : '#3b8bba',
          //   pointStrokeColor    : 'rgba(60,141,188,1)',
          //   pointHighlightFill  : '#fff',
          //   pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesTfuel as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
          {
            label               : 'IM - {{  date('Y', strtotime($filtros['data_inicio']))  }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(40, 167, 69, 1)',
            pointRadius          : false,
            fill                 : false,
          //   pointColor          : '#3b8bba',
          //   pointStrokeColor    : 'rgba(60,141,188,1)',
          //   pointHighlightFill  : '#fff',
          //   pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesIM as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
          {
            label               : 'GC - {{  date('Y', strtotime($filtros['data_inicio']))  }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(239, 107, 1, 1)',
            pointRadius          : false,
            fill                 : false,
          //   pointColor          : '#3b8bba',
          //   pointStrokeColor    : 'rgba(60,141,188,1)',
          //   pointHighlightFill  : '#fff',
          //   pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesGC as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
          {
            label               : 'Postos - {{  date('Y', strtotime($filtros['data_inicio']))  }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(237, 53, 40, 1)',
            pointRadius          : false,
            fill                 : false,
          //   pointColor          : '#3b8bba',
          //   pointStrokeColor    : 'rgba(60,141,188,1)',
          //   pointHighlightFill  : '#fff',
          //   pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesPostos as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
          {
            label               : 'HP - {{  date('Y', strtotime($filtros['data_inicio']))  }}',
            // backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(98, 40, 237, 1)',
            pointRadius          : false,
            fill                 : false,
          //   pointColor          : '#3b8bba',
          //   pointStrokeColor    : 'rgba(60,141,188,1)',
          //   pointHighlightFill  : '#fff',
          //   pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : [
              @foreach($vendasPorMesHP as $venda)
                {{ str_replace(",", ".",str_replace(".", "",$venda->litros))}},
            
            @endforeach

            ]
          },
        ]
      }
      var lineChartOptions = {
        responsive              : true,
        maintainAspectRatio     : false,
        datasetFill             : false,
        showAllTooltips: true,
        animation: {
          onComplete: () => {
              delayed = true;
          },
          delay: (context) => {
              let delay = 0;
              if (context.type === 'data' && context.mode === 'default' && !delayed) {
              delay = context.dataIndex * 300 + context.datasetIndex * 100;
              }
              return delay;
          },
          },
      }

      var lineChart = new Chart(lineChartCanvas, {
        type: 'line',
        data: lineChartData,
        options: lineChartOptions
      })
  
    })
</script>

<script>
          $(document).ready(function(){
            $('#carregarOportunidades').click(function(e){

                e.preventDefault();
    
    
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
    
    
                $.ajax({
                    type: 'GET',
                    url: '{{ route('get_oportunidades') }}',
                    cache:false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    beforeSend: function() {
                      $('#carregarOportunidades').html('Carregando').prop('disabled', true);
                    },
                    success: function(result) {
                      // var percentVal = 'Concluído';
                      // bar.width(percentVal)
                      // percent.html(percentVal);
                      // $('#formAnexarComprovante').append('<input id="documentextra3" type="hidden" name="documentextra3" value="' + result.nome_imagens[result.index] + '">');
                      // $('#controle_anexo_extra3').val(1);
                      // $('#limpar_anexo_extra3').removeClass('d-none');
                      // $('#carregar_extra3').addClass('d-none');
                      // $('#fileanexo_extra3').addClass('d-none');
                      // $('#fileanexo_extra3').val(null);

                      $('#tabelashow-oportunidades tbody tr:last').remove();

                      
                      for(var i = 0; i < result.count; i++){
                        var ultimavenda = new Date(result.oportunidades[i].ultimavenda);
                        var proxvendaestimada = new Date(result.oportunidades[i].proxvendaestimada);
                        var mediacompraltarred = result.oportunidades[i].mediacompraltarred;
                        if(mediacompraltarred < 500){
                          mediacompraltarred = 500;
                        }
                        $('#tabelashow-oportunidades tbody').append('<tr></tr>');
                        $('#tabelashow-oportunidades tbody tr:last').append('<td class="d-flex justify-content-around" align="center"><a href="/ficha-cliente/' + result.oportunidades[i].id +'/edit" title="Exibir Ficha Cliente" class="ml-1"> <button class="btn btn-primary  btn-sm" type="submit"><i class="fa fa-eye"  aria-hidden="true"></i></button></a></td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td>' + result.oportunidades[i].nome + '</td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td>'+ result.oportunidades[i].ultimoproduto +'</td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td>'+ result.oportunidades[i].gestor_user.name +'</td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td><span style="display:none;">'+ result.oportunidades[i].ultimavenda + ' - </span> '+ result.oportunidades[i].ultimavenda_tratada + '</td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td><span style="display:none;">'+ result.oportunidades[i].proxvendaestimada + ' - </span> '+ result.oportunidades[i].proxvendaestimada_tratada + '</td>')
                        // $('#tabelashow-oportunidades tbody tr:last').append('<td>'+ proxvendaestimada.toLocaleString('pt-PT') + '</td>')
                        $('#tabelashow-oportunidades tbody tr:last').append('<td>'+ mediacompraltarred + '</td>')
                      }


                      $('#preOportunidades').addClass('d-none')
                      $('#tabelaOportunidades').removeClass('d-none')
                    },
                    complete: function(xhr) {
                      var table = $('#tabelashow-oportunidades').DataTable( {

                        "destroy": false,
                        "paging": true,
                        "lengthChange": false,
                        "searching": false,
                        "ordering": true,
                        "info": false,
                        "autoWidth": false,
                        "responsive": true,
                        "order": [[ 1, "desc" ]],
                        // "buttons": [ "csv", "excel", "pdf", {"extend":"print","text":"Imprimir"}, {"extend":"colvis","text":"Colunas"}],
                        "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                        // "columnDefs":
                        // [
                        //     {
                        //         targets: 4,
                        //         render: $.fn.dataTable.render.moment('Do MMM YYYY' )
                        //     },
                        
                        // ],
                        "bJQueryUI": true,
                        "oLanguage": {
                            "sProcessing":   "Processando...",
                            "sLengthMenu":   "Registros _MENU_ ",
                            "sZeroRecords":  "Não foram encontrados resultados",
                            "sInfo":         " _START_ até _END_ de _TOTAL_ ",
                            "sInfoEmpty":    " 0 até 0 de 0 ",
                            "sInfoFiltered": "",
                            "sInfoPostFix":  "",
                            "sSearch":       "Buscar:",
                            "sUrl":          "",
                            "oPaginate": {
                                "sFirst":    "Primeiro",
                                "sPrevious": "Anterior",
                                "sNext":     "Seguinte",
                                "sLast":     "Último"
                            }
                        }
                      } ).buttons().container().appendTo('#tabelashow-oportunidades_wrapper .col-md-6:eq(0)');
                    }
                });
    
            });
        })
</script>

@endsection