<?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'] = 'g';
      $this->load->view('ventas/navigation', $data);
    ?>
  </li>

  <li class="list-group-item">
    <canvas id="diario"></canvas>
  </li>

  <li class="list-group-item">
    <canvas id="mensual"></canvas>
  </li>

  <li class="list-group-item">
    <canvas id="canal"></canvas>
  </li>

  <li class="list-group-item">
    <div class="row">
      <div class="col-12 col-lg-4">
        <canvas id="canal-mensual-1"></canvas>
      </div>
      <div class="col-12 col-lg-4">
        <canvas id="canal-mensual-2"></canvas>
      </div>
      <div class="col-12 col-lg-4">
        <canvas id="canal-mensual-3"></canvas>
      </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 ctxDiario = document.getElementById('diario').getContext('2d');
var chart = new Chart(ctxDiario, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
      labels: [<?php echo '"' .implode('", "', $fechas_diario).'"'; ?>],//fecha del día
      datasets: [{
          label: 'Diario',
          backgroundColor: 'rgb(99, 132, 255)',
          borderColor: 'rgb(99, 132, 255)',
          data: [<?php echo implode(', ', $totales_diario); ?>]//Total por día
      }]
  },

  // Configuration options go here
  options: {
    scales: {
      yAxes: [{
          ticks: {
              // Include a dollar sign in the ticks
              callback: function(value, index, values) {
                  return '$' + value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
              }
          }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
            return label;
        }
      }
    }
  }
});

var ctxMensual = document.getElementById('mensual').getContext('2d');
var chart = new Chart(ctxMensual, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
      labels: [<?php echo '"' .implode('", "', $fechas_mensual).'"'; ?>],//fecha del día
      datasets: [{
          label: 'Mensual',
          backgroundColor: 'rgb(99, 132, 255)',
          borderColor: 'rgb(99, 132, 255)',
          data: [<?php echo implode(', ', $totales_mensual); ?>]//Total por día
      }]
  },

  // Configuration options go here
  options: {
    scales: {
      yAxes: [{
          ticks: {
              // Include a dollar sign in the ticks
              callback: function(value, index, values) {
                  return '$' + value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
              }
          }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
            return label;
        }
      }
    }
  }
});

var ctxChannels = document.getElementById('canal').getContext('2d');
var chart = new Chart(ctxChannels, {
  // The type of chart we want to create
  type: 'bar',
  // The data for our dataset
  data: {
    grouped: true,
    labels: [<?php echo '"' .implode('", "', $canales_dias).'"'; ?>],//fecha del día
    datasets: [
      <?php foreach($canales_totales as $k => $canal) {
        ?>
        {
          label: '<?php echo $canales[$k] ?? 'Sin Canal'; ?>',
          backgroundColor: '<?php echo $canales_colores[$k] ?? '#000000'; ?>',
          borderColor: '<?php echo $canales_colores[$k] ?? '#000000'; ?>',
          data: [<?php echo implode(', ', $canal); ?>]//Total por día
        },
        <?php
      } ?>
    ]
  },

  // Configuration options go here
  options: {
    scales: {
      yAxes: [{
          ticks: {
              // Include a dollar sign in the ticks
              callback: function(value, index, values) {
                  return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
              }
          }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
            return label;
        }
      }
    }
  }
});

<?php
  $key = 1;
  foreach ($canales_mensual['meses'] as $mesKey => $mesNombre) {
    ?>
    var ctxChannelsMonth<?php echo $key;?> = document.getElementById('canal-mensual-<?php echo $key;?>').getContext('2d');
    var chart = new Chart(ctxChannelsMonth<?php echo $key;?>, {
      type: 'pie',
      data: {
        labels: ["<?php echo implode('", "', $canales); ?>"],
        datasets: [
          {
            label: 'Ventas',
            backgroundColor: ["<?php echo implode('", "', $canales_colores); ?>"],
            data: [<?php 
              $canal_mes = [];
              foreach($canales_mensual['totales'] as $canalKey => $canal) {
                $canal_mes[] =  $canales_mensual['totales'][$canalKey][$mesKey];
              }
              echo implode(', ', $canal_mes);
            ?>]
          }
        ]
      },

      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Ventas <?php echo $mesNombre; ?>'
          }
        }
      }
    });
    <?php
    $key++;
  }
?>

</script>