<?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">
		<ul class="nav nav-pills alt-pills float-right mini-labels">
			<form method="get">
				<li class="nav-item float-left mr-3">
					<label>Canal de Venta</label>
						<select name ="canal" class="form-control select-canal" onchange="this.form.submit()">
						<?php
						echo '<option value="0">Todos</option>';
						foreach ($canales as $k => $v) {
							$selected = '';
							if (!empty($_GET['canal'])) {
								if ($_GET['canal'] == $k) {
									$selected =' selected="selected"';
								}
							}
							echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
						}
						?>
					</select>
				</li>
				<li class="nav-item float-left mr-3">
					<label>Periodo</label>
					<select name ="periodo" class="form-control select-periodo" onchange="this.form.submit()">
						<?php
						if (in_array($a, ['tienda_cite_italia', 'tienda_italia_1601', 'tienda_los_dominicos', 'tienda_drugstore', 'feria'])) {
							$selected = '';
							if (!empty($_GET['periodo'])) {
								$selected = $_GET['periodo'] == 'hoy' ?  'selected="selected"' : '';
							}
							echo '<option value="hoy"' . $selected . '>Hoy</option>';
							if (!empty($_GET['periodo'])) {
								$selected = $_GET['periodo'] == 'semana' ?  'selected="selected"' : '';
							}
							echo '<option value="semana"' . $selected . '>Semana Actual</option>';
						}
						foreach ($meses_ventas as $k => $v) {
							$selected = '';
							if (!empty($_GET['periodo'])) {
								if ($_GET['periodo'] == $v) {
									$selected =' selected="selected"';
								}
							}
							echo '<option value="' . $v . '"' . $selected . '>' . mtt($v) . '</option>';
						}
						?>
					</select>
				</li>
			</form>
		</ul>
	</li>


    <li class="list-group-item li-cards">
        <div class="row fx-cards">
            <div class="card-container col-12 col-md-6 col-lg-2">
                <div class="fx-card">
                    <p class="header">Total Ventas</p>
                    <p class="principal tt" title="<?php echo $mensual['detalle_total']; ?>">$<?php echo clp($mensual['total']); ?></p>
                    <div class="fx-progress-container">
                        <div class="fx-progressbar" style="width:<?php echo $mensual['porcentaje']['total'] < 100 ? $mensual['porcentaje']['total'] : 100; ?>%"></div>
                    </div>
                    <p class="footer"><?php echo $mensual['porcentaje']['total']; ?>% de la meta de <strong>$<?php echo clp($mensual['meta']); ?></strong></p>
                </div>
            </div>

			<?php
			foreach($canales_destacados as $key => $nombre) {
				?>
				<div class="card-container col-12 col-md-6 col-lg-2">
					<div class="fx-card">
						<p class="header"><?php echo $nombre; ?></p>
						<p class="principal">$<?php echo clp($mensual['canal'][$key] ?? 0); ?></p>
						<div class="fx-progress-container">
							<div class="fx-progressbar" style="width:<?php echo ($mensual['porcentaje']['canal'][$key] ?? 0) < 100 ? ($mensual['porcentaje']['canal'][$key] ?? 0) : 100; ?>%"></div>
						</div>
						<p class="footer"><?php echo ($mensual['porcentaje']['canal'][$key] ?? 0); ?>% del total de ventas</strong></p>
					</div>
				</div>
			<?php
			}
			?>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row">
            <div class="big-chart text-center">
                <h4>Grafico Ventas Acumuladas</h4>
                <canvas id="mensual-acumulado"></canvas>
            </div>
            <div class="big-chart text-center">
                <h4>Grafico Ventas Diarias</h4>
                <canvas id="mensual-diario"></canvas>
            </div>
			<div class="big-chart text-center">
                <h4>Ventas Por Canal</h4>
                <canvas id="mensual-canal"></canvas>
            </div>
			<div class="big-chart text-center">
                <h4>Ventas Por Categoría</h4>
                <canvas id="mensual-categoria"></canvas>
            </div>
			<div class="big-chart text-center">
                <h4>Ventas Por Proveedor</h4>
                <canvas id="mensual-proveedor"></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>
<?php

?>
<script>
var ctxAcumulado = document.getElementById('mensual-acumulado').getContext('2d');
var chart = new Chart(ctxAcumulado, {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: {
        
        labels: [<?php echo '"' .implode('", "', $mensual['fechas']).'"'; ?>],//fecha del día
        //labels: ['a', 'b', 'c'],
        
        datasets: [
        <?php
        foreach($mensual['acumulados'] as $k => $canal) {
        ?>
            {
                label: '<?php echo $canales[$k]; ?>',
                backgroundColor: '<?php echo $canales_colores[$k]; ?>',
                borderColor: '<?php echo $canales_colores[$k]; ?>',
                data: [<?php echo implode(', ', $canal); ?>]//Total por día
            },
        <?php
        }
        ?>
        ]
    },
});

var ctxDiario = document.getElementById('mensual-diario').getContext('2d');
var chart = new Chart(ctxDiario, {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: {
        
        labels: [<?php echo '"' .implode('", "', $mensual['fechas']).'"'; ?>],//fecha del día
        //labels: ['a', 'b', 'c'],
        
        datasets: [
        <?php
        foreach($mensual['diarios'] as $k => $diario) {
        ?>
            {
                label: '<?php echo $canales[$k]; ?>',
                backgroundColor: '<?php echo $canales_colores[$k]; ?>',
                borderColor: '<?php echo $canales_colores[$k]; ?>',
                data: [<?php echo implode(', ', $diario); ?>]//Total por día
            },
        <?php
        }
        ?>
        ]
    },
});


<?php
	foreach($mensual['canales_activos'] as $key => $val) {
		$totales[] = $mensual['canal'][$key];
		$colores[] = $canales_colores[$key];
	}
	$dataTotales = '"' . implode('", "', $totales) . '"';
	$dataColores = '"' . implode('", "', $colores) . '"';
?>


var ctxCanal = document.getElementById('mensual-canal').getContext('2d');
var chart = new Chart(ctxCanal, {
  type: 'bar',
  data: {
	labels: [<?php echo '"' .implode('", "', $mensual['canales_activos']).'"'; ?>],
	datasets: [{
	label: 'Ventas <?php echo mtt($periodo); ?>',
	data: [<?php echo $dataTotales; ?>],
		backgroundColor: [<?php echo $dataColores; ?>],
		borderRadius: 4,
		borderSkipped: false
	}]
  },

  options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: (context) => {
                        let value = context.parsed.y;
                        return value.toLocaleString('es-CL');
                    }
                }
            }
        }
    }
});

// === GRÁFICO: VENTAS POR CATEGORÍA ===
var totalVentas = <?php echo $mensual['total']; ?>;
var ctxCategoria = document.getElementById('mensual-categoria').getContext('2d');
var chartCategoria = new Chart(ctxCategoria, {
	type: 'bar',
	data: {
		labels: [<?php echo '"' . implode('", "', $mensual['labelsCategorias']) . '"'; ?>],
		datasets: [{
			label: 'Ventas por Categoría',
			data: [<?php echo implode(', ', $mensual['dataCategorias']); ?>],
			backgroundColor: '#4e73df',
			borderRadius: 4,
			borderSkipped: false
		}]
	},
	options: {
		responsive: true,
		plugins: {
			legend: { display: false },
			tooltip: {
			callbacks: {
				label: (context) => {
					let value = context.parsed.y;
					let porcentaje = ((value / totalVentas) * 100).toFixed(2);
					return '$' + value.toLocaleString('es-CL') + ' (' + porcentaje + '%)';
				}
			}
		}
		},
	}
});

// === GRÁFICO: VENTAS POR Proveedor ===
var ctxProveedor = document.getElementById('mensual-proveedor').getContext('2d');
var chartProveedor = new Chart(ctxProveedor, {
	type: 'bar',
	data: {
		labels: [<?php echo '"' . implode('", "', $mensual['labelsProveedores']) . '"'; ?>],
		datasets: [{
			label: 'Ventas por Proveedor',
			data: [<?php echo implode(', ', $mensual['dataProveedores']); ?>],
			backgroundColor: '#1cc88a',
			borderRadius: 4,
			borderSkipped: false
		}]
	},
	options: {
		responsive: true,
		plugins: {
			legend: { display: false },
			tooltip: {
				callbacks: {
					label: (context) => {
						let value = context.parsed.y;
						let porcentaje = ((value / totalVentas) * 100).toFixed(2);
						return '$' + value.toLocaleString('es-CL') + ' (' + porcentaje + '%)';
					}
				}
			}
		},
	}
});


    $(document).ready(function(){
        $('.select-meses-ventas').change(function(){
            window.location.href = $(this).val();
        });
    });
</script>