@extends ('layouts.admin')
@section ('title')
sisVentas | Inicio
@endsection
@section ('contenido')
<?php 
foreach ($totales as $total)
{
  ?>
  <!-- start page title -->
  <div class="row">
    <div class="col-12">
      <div class="page-title-box">
        <div class="page-title-right">
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <!-- Portlet card -->
    <div class="card bg-primary text-white mb-md-0 mb-3">
      <div class="card-body">
        <div class="card-widgets">
          <strong>
            <?php 
            $mytime = Carbon\Carbon::now();
            echo $mytime->format('F Y');
            ?>
          </strong>
        </div>
        <h5 class="card-title mb-0">Estadisticas</h5>
      </div>
    </div> <!-- end card-->
  </div><!-- end col -->
  <br>
  <!-- end page title -->

  <div class="row">
    <div class="col-sm-3">
      <div class="card tilebox-one">
        <div class="card-body">
          <i class="mdi mdi-cart-arrow-right float-end text-muted" style="font-size: 48px;"></i>
          <h6 class="text-muted text-uppercase mt-0">TOTAL COMPRAS</h6>
          <h2 class="m-b-20"><?php echo $total->totalingreso;?></h2>
          <span class="text-muted"><a href="compras/ingreso" class="text-muted ms-1"> Ver compras </a></span>
        </div> <!-- end card-body-->
      </div> <!--end card-->
    </div><!-- end col -->

    <div class="col-sm-3">
      <div class="card tilebox-one">
        <div class="card-body">
          <i class="mdi mdi-cart-arrow-up float-end text-muted" style="font-size: 48px;"></i>
          <h6 class="text-muted text-uppercase mt-0">TOTAL VENTAS</h6>
          <h2 class="m-b-20">$<span><?php echo $total->totalventa;?></span></h2>
        </span> 
        <span class="text-muted"><a href="ventas/venta" class="text-muted ms-1"> Ver ventas</a></span>
      </div> <!-- end card-body-->
    </div> <!--end card-->
  </div><!-- end col -->

  <div class="col-sm-3">
    <div class="card tilebox-one">
      <div class="card-body">
        <i class="mdi mdi-cash-usd-outline float-end text-muted" style="font-size: 48px;"></i>
        <h6 class="text-muted text-uppercase mt-0">CAJA ACTUAL</h6>
        <h2 class="m-b-20"><?php echo $total->totalventa;?></h2>
      </span> 
      <span class="text-muted"><a href="ventas/venta" class="text-muted ms-1"> Ver caja actual</a></span>
    </div> <!-- end card-body-->
  </div> <!--end card-->
</div><!-- end col -->

<div class="col-sm-3">
  <div class="card tilebox-one">
    <div class="card-body">
      <i class="mdi mdi-account-group float-end text-muted" style="font-size: 48px;"></i>
      <h6 class="text-muted text-uppercase mt-0">TOTAL CLIENTES</h6>
      <h2 class="count m-b-20"><?php echo $total->cliente;?></h2>
      <span class="text-muted"><a href="ventas/cliente" class="text-muted ms-1"> Ver clientes</a></span>
    </div> <!-- end card-body-->
  </div> <!--end card-->
</div><!-- end col -->
</div>
<!-- end row -->

<?php }?>

<!-- Estadísticas gráficos -->
<div class="row">
  <div class="col-xl-6">
    <div class="card">
      <div class="card-body">
        <h4 class="header-title mb-4">Compras - Meses</h4>

        <div dir="ltr">
          <div class="mt-3 chartjs-chart" style="height: 320px;">
            <canvas id="areaChart"></canvas>
          </div>
        </div>
      </div> <!-- end card body-->
    </div> <!-- end card -->
  </div><!-- end col-->

  <div class="col-xl-6">
    <div class="card">
      <div class="card-body">
        <h4 class="header-title mb-4">Ventas - Meses</h4>

        <div dir="ltr">
          <div class="mt-3 chartjs-chart" style="height: 320px;">
            <canvas id="lineChart"></canvas>
          </div>
        </div>

      </div> <!-- end card body-->
    </div> <!-- end card -->
  </div><!-- end col-->
</div>
<div class="row">
  <div class="col-xl-6">
    <div class="card">
      <div class="card-body">
        <h4 class="header-title mb-4">Más Vendidos</h4>

        <div dir="ltr">
          <div class="mt-3 chartjs-chart" style="height: 320px;">
            <canvas id="pieChart"></canvas>
          </div>
        </div>

      </div> <!-- end card body-->
    </div> <!-- end card -->
  </div><!-- end col-->

  <div class="col-xl-6">
    <div class="card">
      <div class="card-body">
        <h4 class="header-title mb-4">Ventas - Días</h4>

        <div dir="ltr">
          <div class="mt-3 chartjs-chart" style="height: 320px;">
            <canvas id="barChart"></canvas>
          </div>
        </div>

      </div> <!-- end card body-->
    </div> <!-- end card -->
  </div><!-- end col-->
</div>
<!-- end row-->

@push ('scripts')

<script src="{{asset('js/Chart.js')}}"></script> 
<script>
  $(function () {
        /* ChartJS
         * -------
         * Here we will create a few charts using ChartJS
         */

        //--------------
        //- AREA CHART -
        //--------------

        // Get context with jQuery - using jQuery's .get() method.
    var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
        // This will get the first returned node in the jQuery collection.
    var areaChart = new Chart(areaChartCanvas);

    var ComprasMes = {
      labels: [<?php foreach ($comprasmes as $reg)
        {echo '"'. $reg->mes.'",';} ?>],
      datasets: [
      {
        label: "Electronics",
        fillColor: "rgba(210, 214, 222, 1)",
        strokeColor: "rgba(210, 214, 222, 1)",
        pointColor: "rgba(210, 214, 222, 1)",
        pointStrokeColor: "#2C8EF8",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: []
      },
      {
        label: "Digital Goods",
        fillColor: "rgba(44, 142, 248 ,0.9)",
        strokeColor: "rgba(44, 142, 248 ,0.8)",
        pointColor: "#2C8EF8",
        pointStrokeColor: "rgba(44, 142, 248 ,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(44, 142, 248 ,1)",
        data: [<?php foreach ($comprasmes as $reg)
          {echo ''. $reg->totalmes.',';} ?>]
      }
      ]
    };

    var VentasMes = {
      labels: [<?php foreach ($ventasmes as $reg)
        {echo '"'. $reg->mes.'",';} ?>],
      datasets: [
      {
        label: "Electronics",
        fillColor: "rgba(210, 214, 222, 1)",
        strokeColor: "rgba(210, 214, 222, 1)",
        pointColor: "rgba(210, 214, 222, 1)",
        pointStrokeColor: "#c1c7d1",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: []
      },
      {
        label: "Digital Goods",
        fillColor: "rgba(104, 131, 163,0.9)",
        strokeColor: "rgba(104, 131, 163,0.8)",
        pointColor: "#6883A3",
        pointStrokeColor: "rgba(104, 131, 163,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(104, 131, 163,1)",
        data: [<?php foreach ($ventasmes as $reg)
          {echo ''. $reg->totalmes.',';} ?>]
      }
      ]
    };

    var VentasDias = {
      labels: [<?php foreach ($ventasdia as $reg)
        {echo '"'. $reg->dia.'",';} ?>],
      datasets: [
      {
        label: "Electronics",
        fillColor: "rgba(210, 214, 222, 1)",
        strokeColor: "rgba(210, 214, 222, 1)",
        pointColor: "rgba(210, 214, 222, 1)",
        pointStrokeColor: "#c1c7d1",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: []
      },
      {
        label: "Digital Goods",
        fillColor: "rgba(60,141,188,0.9)",
        strokeColor: "rgba(60,141,188,0.8)",
        pointColor: "#3b8bba",
        pointStrokeColor: "rgba(60,141,188,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(60,141,188,1)",
        data: [<?php foreach ($ventasdia as $reg)
          {echo ''. $reg->totaldia.',';} ?>]
      }
      ]
    };

    var areaChartOptions = {
          //Boolean - If we should show the scale at all
      showScale: true,
          //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines: false,
          //String - Colour of the grid lines
      scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
      scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines: true,
          //Boolean - Whether the line is curved between points
      bezierCurve: true,
          //Number - Tension of the bezier curve between points
      bezierCurveTension: 0.3,
          //Boolean - Whether to show a dot for each point
      pointDot: false,
          //Number - Radius of each point dot in pixels
      pointDotRadius: 4,
          //Number - Pixel width of point dot stroke
      pointDotStrokeWidth: 1,
          //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius: 20,
          //Boolean - Whether to show a stroke for datasets
      datasetStroke: true,
          //Number - Pixel width of dataset stroke
      datasetStrokeWidth: 2,
          //Boolean - Whether to fill the dataset with a color
      datasetFill: true,

          //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio: true,
          //Boolean - whether to make the chart responsive to window resizing
      responsive: true
    };

        //Create the line chart
    areaChart.Line(ComprasMes, areaChartOptions);

        //-------------
        //- LINE CHART -
        //--------------
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas);
    var lineChartOptions = areaChartOptions;
    lineChartOptions.datasetFill = false;
    lineChart.Line(VentasMes, lineChartOptions);

        //-------------
        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = [
      <?php 
      $cont=1;
      $cadena='';

      foreach ($productosvendidos as $reg)
      {
        $cadena=$cadena.'{ value:'.$reg->cantidad.',color:"';
        switch($cont)
        {
          case 1:
          $color='#2c8ef8';
          break;
          case 2:
          $color='#727cf5';
          break;
          case 3:
          $color='#6b5eae';
          break;
          case 4:
          $color='#ff679b';
          break;
          case 5:
          $color='#fa5c7c';
          break;
          case 6:
          $color='#ffbc00';
          break;
          case 7:
          $color='#02a8b5';
          break;
          case 8:
          $color='#98a6ad';
          break;
          case 9:
          $color='#6c757d';
          break;
          case 10:
          $color='#343a40';
          break;
        }

        $cadena=$cadena.$color;
        $cadena=$cadena.'",highlight: "';
        $cadena=$cadena.$color.'",label: "'.$reg->articulo.'" },';
        $cont=$cont+1;
      }
      echo $cadena;?>
      ];
    var pieOptions = {
          //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke: true,
          //String - The colour of each segment stroke
      segmentStrokeColor: "#fff",
          //Number - The width of each segment stroke
      segmentStrokeWidth: 2,
          //Number - The percentage of the chart that we cut out of the middle
          percentageInnerCutout: 50, // This is 0 for Pie charts
          //Number - Amount of animation steps
          animationSteps: 100,
          //String - Animation easing effect
          animationEasing: "easeOutBounce",
          //Boolean - Whether we animate the rotation of the Doughnut
          animateRotate: true,
          //Boolean - Whether we animate scaling the Doughnut from the centre
          animateScale: false,
          //Boolean - whether to make the chart responsive to window resizing
          responsive: true,
          // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
          maintainAspectRatio: true,
        };
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions);

        //-------------
        //- BAR CHART -
        //-------------
        var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = VentasDias;
        barChartData.datasets[1].fillColor = "#2c8ef8";
        barChartData.datasets[1].strokeColor = "#2c8ef8";
        barChartData.datasets[1].pointColor = "#2c8ef8";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      });

    </script>

    <script>
      $('#aHome').addClass("active");
    </script>
    @endpush
    @endsection
