@extends('layouts.root', ['menu_activo' => 'ventas'])

@section('contenido')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Content Wrapper. Contains page 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 text-dark">Dashboard</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Dashboard</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">
                  Monto (Día)
                </h5>
              </div>
              <div class="card-body">
                
                <canvas id="historialPublicacionesEmpresa" width="100%" height="400px"></canvas>
                <script>
                    var ctx = document.getElementById("historialPublicacionesEmpresa").getContext('2d');
                    var taskChart = new Chart(ctx, {
                    type: 'line',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    },
                    data: {
                        labels: [
                          @for($i = 89; $i >=0 ; $i--)
                            "{{\Carbon\Carbon::now()->subDays($i)->format('d/m')}}",
                          @endfor
                            ],
                        datasets: [
                        @foreach($ventas as $venta)
                            {
                            label: "{{$venta['nombre']}}",
                            backgroundColor: "{{$venta['color']}}",
                            borderColor: "{{$venta['color']}}",                               
                            pointBorderColor: "{{$venta['color']}}",
                            pointBackgroundColor: "{{$venta['color']}}",
                            pointHoverBackgroundColor: "#fff",
                            pointHoverBorderColor: "{{$venta['color']}}",
                            pointBorderWidth: 1,
                            data: [
                                @foreach($venta['ventas_diarias'] as $venta)
                                    {{$venta['total']}},
                                @endforeach
                            ]
                            },
                        @endforeach
                      ]
                    },
                  });
                </script>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">
                  Monto (Mes)
                </h5>
              </div>
              <div class="card-body">
                
                <canvas id="historialPublicacionesEmpresa_mes" width="100%" height="400px"></canvas>
                <script>
                    var ctx = document.getElementById("historialPublicacionesEmpresa_mes").getContext('2d');
                    var taskChart = new Chart(ctx, {
                    type: 'line',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    },
                    data: {
                        labels: [
                          @for($i = 11; $i >=0 ; $i--)
                            "{{\Carbon\Carbon::now()->subMonth($i)->format('m/Y')}}",
                          @endfor
                            ],
                        datasets: [
                        @foreach($ventas as $venta)
                            {
                            label: "{{$venta['nombre']}}",
                            backgroundColor: "{{$venta['color']}}",
                            borderColor: "{{$venta['color']}}",                               
                            pointBorderColor: "{{$venta['color']}}",
                            pointBackgroundColor: "{{$venta['color']}}",
                            pointHoverBackgroundColor: "#fff",
                            pointHoverBorderColor: "{{$venta['color']}}",
                            pointBorderWidth: 1,
                            data: [
                                @foreach($venta['ventas_mensuales'] as $venta)
                                    {{$venta['total']}},
                                @endforeach
                            ]
                            },
                        @endforeach
                      ]
                    },
                  });
                </script>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">
                  Cantidad (Día)
                </h5>
              </div>
              <div class="card-body">
                
                <canvas id="cantidadDeVentasEmpresa" width="100%" height="400px"></canvas>
                <script>
                    var ctx = document.getElementById("cantidadDeVentasEmpresa").getContext('2d');
                    var taskChart = new Chart(ctx, {
                    type: 'line',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    },
                    data: {
                        labels: [
                          @for($i = 89; $i >=0 ; $i--)
                            "{{\Carbon\Carbon::now()->subDays($i)->format('d/m')}}",
                          @endfor
                            ],
                        datasets: [
                        @foreach($ventas as $venta)
                            {
                            label: "{{$venta['nombre']}}",
                            backgroundColor: "{{$venta['color']}}",
                            borderColor: "{{$venta['color']}}",                               
                            pointBorderColor: "{{$venta['color']}}",
                            pointBackgroundColor: "{{$venta['color']}}",
                            pointHoverBackgroundColor: "#fff",
                            pointHoverBorderColor: "{{$venta['color']}}",
                            pointBorderWidth: 1,
                            data: [
                                @foreach($venta['ventas_diarias'] as $venta)
                                    {{$venta['cantidad']}},
                                @endforeach
                            ]
                            },
                        @endforeach
                      ]
                    },
                  });
                </script>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">
                  Cantidad (Mensual)
                </h5>
              </div>
              <div class="card-body">
                
                <canvas id="cantidadDeVentasEmpresa_mes" width="100%" height="400px"></canvas>
                <script>
                    var ctx = document.getElementById("cantidadDeVentasEmpresa_mes").getContext('2d');
                    var taskChart = new Chart(ctx, {
                    type: 'line',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    },
                    data: {
                        labels: [
                          @for($i = 11; $i >=0 ; $i--)
                            "{{\Carbon\Carbon::now()->subMonth($i)->format('m/Y')}}",
                          @endfor
                            ],
                        datasets: [
                        @foreach($ventas as $venta)
                            {
                            label: "{{$venta['nombre']}}",
                            backgroundColor: "{{$venta['color']}}",
                            borderColor: "{{$venta['color']}}",                               
                            pointBorderColor: "{{$venta['color']}}",
                            pointBackgroundColor: "{{$venta['color']}}",
                            pointHoverBackgroundColor: "#fff",
                            pointHoverBorderColor: "{{$venta['color']}}",
                            pointBorderWidth: 1,
                            data: [
                                @foreach($venta['ventas_mensuales'] as $venta)
                                    {{$venta['cantidad']}},
                                @endforeach
                            ]
                            },
                        @endforeach
                      ]
                    },
                  });
                </script>
              </div>
            </div>
          </div>
      </div>
    </div>    
  </section>
</div>
@endsection