<?php
  $ruta="../../";
  include_once($ruta."class/cobro.php");
  $cobro=new cobro;
  include_once($ruta."funciones/funciones.php");
  //session_start();
  extract($_GET);

 // $lblcode=ecUrl($idus);  
  //$mesAnteriorInicio= date("Y-m-01",strtotime($fecha_actual."- 1 month"));
  $mesInicio= date("Y-m-01");
  $mesFin= date("Y-m-d");
 $anio=dcUrl($lblcode2); 
   

  //TOTAL COBROS
 $sumatotal=0;
  $consultatotal="SELECT Fecha, sum(monto) as montototal, anio, mes
                                    from(SELECT MONTO, CONCAT(YEAR(fechacreacion), '-', MONTH(fechacreacion)) as Fecha, YEAR(fechacreacion) as anio, MONTH(fechacreacion) as mes
                                    FROM cobro
                                    where fechacreacion BETWEEN '$fechaini' and '$fechafin' ORDER BY fechacreacion ASC) consultas
                                    group by Fecha ORDER BY anio ASC, mes ASC";            
  foreach($cobro->sql($consultatotal) as $f3) 
  {
    $sumatotal=$sumatotal+$f3['montototal'];
  }           
  switch ($tipo) {
  case '1':
     $tipograf='bar';
      break;
  
  case '2':
     $tipograf='line';
      break;
 }            
?>
<!doctype html>
<html>

<head>
    <title>MESES</title>
    <script src="utils.js"></script>
    <script src="<?php echo $ruta ?>recursos/graphics/js/2.6.0/Chart.bundle.js"></script>
    <script src="<?php echo $ruta ?>recursos/graphics/js/2.6.0/Chart.bundle.min.js"></script>
    <script src="<?php echo $ruta ?>recursos/graphics/js/2.6.0/Chart.js"></script>
    <script src="<?php echo $ruta ?>recursos/graphics/js/2.6.0/Chart.min.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas> 
        <div style="text-align: center;"><p>SUMATORIAL TOTAL DE COBROS Bs. <?php echo number_format($sumatotal, 2, '.', '') ?></p></div>
    </div>
    <script>
        var MONTHS = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
        var color = Chart.helpers.color;
        var barChartData = {
            labels: [
                      <?php 
                       $consultaNombres="SELECT Fecha, sum(monto) as montototal, anio, mes
                                    from(SELECT MONTO, CONCAT(YEAR(fechacreacion), '-', MONTH(fechacreacion)) as Fecha, YEAR(fechacreacion) as anio, MONTH(fechacreacion) as mes
                                    FROM cobro
                                    where fechacreacion BETWEEN '$fechaini' and '$fechafin' ORDER BY fechacreacion ASC) consultas
                                    group by Fecha ORDER BY anio ASC, mes ASC";
                           foreach($cobro->sql($consultaNombres) as $f2)
                           {
                            $mesTexto=mes($f2['mes']);
                            $textoCompleto= "'".$mesTexto.' '.$f2['anio']."'";
                            echo $textoCompleto;
                            ?>
                               , 
                            <?php
                           } 
                       ?>
                    ],
            datasets: [{
                label: 'COBROS Bs.',
                backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                borderColor: window.chartColors.green,
                borderWidth: 1,
                data: [
                    <?php 
                        $consultameses="SELECT Fecha, sum(monto) as montototal, anio, mes
                                    from(SELECT MONTO, CONCAT(YEAR(fechacreacion), '-', MONTH(fechacreacion)) as Fecha, YEAR(fechacreacion) as anio, MONTH(fechacreacion) as mes
                                    FROM cobro
                                    where fechacreacion BETWEEN '$fechaini' and '$fechafin' ORDER BY fechacreacion ASC) consultas
                                    group by Fecha ORDER BY anio ASC, mes ASC";
                           foreach($cobro->sql($consultameses) as $f)
                            {                                            
                             
                            echo number_format($f['montototal'], 2, '.', '') ;
                            ?>
                               , 
                            <?php 
                            }                                
                            ?>
                ]
            }, ]

        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: '<?php echo $tipograf ?>',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'REPORTE ESTADISTICO DE COBROS <?php echo $fechaini ?> a <?php echo $fechafin ?>'
                    }
                }
            });

        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            var zero = Math.random() < 0.2 ? true : false;
            barChartData.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return zero ? 0.0 : randomScalingFactor();
                });

            });
            window.myBar.update();
        });

        var colorNames = Object.keys(window.chartColors);
        document.getElementById('addDataset').addEventListener('click', function() {
            var colorName = colorNames[barChartData.datasets.length % colorNames.length];;
            var dsColor = window.chartColors[colorName];
            var newDataset = {
                label: 'Dataset ' + barChartData.datasets.length,
                backgroundColor: color(dsColor).alpha(0.5).rgbString(),
                borderColor: dsColor,
                borderWidth: 1,
                data: []
            };

            for (var index = 0; index < barChartData.labels.length; ++index) {
                newDataset.data.push(randomScalingFactor());
            }

            barChartData.datasets.push(newDataset);
            window.myBar.update();
        });

        document.getElementById('addData').addEventListener('click', function() {
            if (barChartData.datasets.length > 0) {
                var month = MONTHS[barChartData.labels.length % MONTHS.length];
                barChartData.labels.push(month);

                for (var index = 0; index < barChartData.datasets.length; ++index) {
                    //window.myBar.addData(randomScalingFactor(), index);
                    barChartData.datasets[index].data.push(randomScalingFactor());
                }

                window.myBar.update();
            }
        });

        document.getElementById('removeDataset').addEventListener('click', function() {
            barChartData.datasets.splice(0, 1);
            window.myBar.update();
        });

        document.getElementById('removeData').addEventListener('click', function() {
            barChartData.labels.splice(-1, 1); // remove the label first

            barChartData.datasets.forEach(function(dataset, datasetIndex) {
                dataset.data.pop();
            });

            window.myBar.update();
        });
    </script>
</body>

</html>
