<?php
	/* Info de librería de gráficos
	* https://www.chartjs.org/docs/latest/getting-started/
	*/
?>
<ul class="list-group">
  <li class="list-group-item">
    <?php
      $data['a'] = 'u';
      $data['ua'] = 'en';
      $this->load->view('ventas/navigation', $data);
    ?>
  </li>
  <li class="list-group-item graficos-envios">
    <div class="row">
      <h3 class="col-12">Envíos <?php echo mtt($periodo);?></h3>
      <div class="col-12 col-sm-6 col-xl-3">
          <div class="kpi">
              <h4>Envíos Totales</h4>
              <p class="kpi-value"><?= $enviosTotales; ?></p>
          </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
          <div class="kpi">
              <h4>Envíos RM</h4>
              <p class="kpi-value"><?= $enviosRM; ?></p>
          </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
          <div class="kpi">
              <h4>Envíos Regiones</h4>
              <p class="kpi-value"><?= $enviosTotales - $enviosRM; ?></p>
          </div>
      </div>
      <?php 
        $enviosRecibelo = ($enviosTransportistas[18] ?? 0) + ($enviosTransportistas[19] ?? 0);
        $enviosFazt = ($enviosTransportistas[24] ?? 0) + ($enviosTransportistas[25] ?? 0);
      
        if ($enviosRecibelo > 0) { ?>
          <div class="col-12 col-sm-6 col-xl-3">
              <div class="kpi">
                  <h4>Envíos Recíbelo</h4>
                  <p class="kpi-value"><?= $enviosRecibelo?></p>
              </div>
          </div>
        <?php }
        if ($enviosFazt > 0) { ?>
          <div class="col-12 col-sm-6 col-xl-3">
              <div class="kpi">
                  <h4>Envíos Fazt</h4>
                  <p class="kpi-value"><?= $enviosFazt?></p>
              </div>
          </div>
        <?php } ?>
    </div>
    <div class="row">
      <div class="col-12 col-xl-6">
        <div class="kpi">
          <h4>Envíos por Comuna</h4>
          <div class="rm-container">
            <canvas id="RM"></canvas>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-6">
        <div class="kpi">
          <h4>Envíos por Regiones</h4>
          <div class="regiones-container">
            <canvas id="regiones"></canvas>
          </div>
        </div>
        <div class="kpi">
          <h4>Envíos por Transportista</h4>
          <div class="transportistas-container">
            <canvas id="transportistas"></canvas>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/Chart.min.css">
<script src="<?php echo base_url(); ?>js/Chart.min.js"></script>

<script>
var ctxRegiones = document.getElementById('regiones').getContext('2d');
var chart = new Chart(ctxRegiones, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
    grouped: true,
    labels: [<?php echo '"' . implode('", "', $nombresRegiones) . '"'; ?>],//fecha del día
    datasets: [
      {
        axys: 'y',
        label: 'Cantidad de Envíos',
        data: [<?php echo implode(', ', $enviosRegiones); ?>],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1
      },
    ]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
  }
});


var ctxComunas = document.getElementById('RM').getContext('2d');
var chart = new Chart(ctxComunas, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
    grouped: true,
    labels: [<?php echo '"' . implode('", "', $nombresComunas) . '"'; ?>],
    datasets: [
      {
        axys: 'y',
        label: 'Cantidad de Envíos',
        data: [<?php echo implode(', ', $enviosComunas); ?>],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1
      },
    ]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
  }
});


var ctxTransportistas = document.getElementById('transportistas').getContext('2d');
var chart = new Chart(ctxTransportistas, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
    grouped: true,
    labels: [<?php echo '"' . implode('", "', $nombresTransportistas) . '"'; ?>],
    datasets: [
      {
        axys: 'y',
        label: 'Cantidad de Envíos',
        data: [<?php echo implode(', ', $enviosTransportistas); ?>],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1
      },
    ]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
  }
});
</script>