@extends('layouts.dashboardnew')

@section('content')


{{-- filtro por fecha --}}
@include('usuario.componentes.filtroPorFecha', ['ruta' => 'reporte-paises', 'form' => ''])

<div class="container-fluid">
    <div class="row">
        
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                
                   <div id="pieChart"></div>
                   
                </div>
            </div>
        </div>
        
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                
                   <div id="areaChart"></div>
                   
                </div>
            </div>
        </div>
        
    </div>
</div>



<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <table class="table table-striped table-bordered zero-configuration">
                        <thead>
                            <th class="text-center">País</th>
                            <th class="text-center">Cantidad de Ventas</th>
                        </thead>
                        <tbody>
                            @foreach ($graficas as $graf)
                                <tr>
                                  <td class="text-center">{{ $graf->paises->nombre }}</td>
                                  <td class="text-center">{{ $graf->totales }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    
                </div>
            </div>
        </div>
    </div>
</div>    

@endsection

@include('usuario.componentes.scripBotones') 

@push('script')

<script src ="{{ asset('plugins/apexcharts/apexcharts.js') }}"></script>

<script type="text/javascript">
    
       var options = {
          series: [@foreach($graficas as $graf) '{{$graf->totales}}', @endforeach],
          labels: [@foreach($graficas as $graf) '{{$graf->paises->nombre}}', @endforeach],
         
          chart: {
          width: '100%',     
          height: '230',
          type: 'donut',
        },
        plotOptions: {
          pie: {
            startAngle: -90,
            endAngle: 270
          }
        },
        dataLabels: {
          enabled: false,
        },
        
        legend: {
          position: 'top',
          
          labels: {
             colors: '#333',
             useSeriesColors: false
            },
            
          formatter: function(val, opts) {
            return val + " - " + opts.w.globals.series[opts.seriesIndex]
          }
        },
        
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: '100%',
              
            },
            legend: {
              position: 'top',
              width: '100%',
            }
          }
        }]
        
        };

        var chart = new ApexCharts(document.querySelector("#pieChart"), options);
        chart.render();
        
        
        
        
        
        var options = {
        series: [{
          name: 'Total Compras',
          data: [@foreach($graficas as $graf) '{{$graf->totales}}', @endforeach]
        }],
          
        chart: {
          width: '100%',
          height: '220',
          type: 'bar'
        },
        plotOptions: {
          bar: {
            borderRadius: 10,
            columnWidth: '50%',
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          width: 2
        },
        
        grid: {
          row: {
            colors: ['#fff', '#fff']
          }
        },
        xaxis: {
          labels: {
            rotate: -45
          },
          categories: [@foreach($graficas as $graf) '{{$graf->paises->nombre}}', @endforeach
          ],
        },
        
        fill: {
          type: 'gradient',
          gradient: {
            shade: 'light',
            type: "horizontal",
            shadeIntensity: 0.25,
            gradientToColors: undefined,
            inverseColors: true,
            opacityFrom: 0.85,
            opacityTo: 0.85,
            stops: [50, 0, 100]
          },
        }
        };

        var chart = new ApexCharts(document.querySelector("#areaChart"), options);
        chart.render();
        
</script>
@endpush