<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>

<ul class="list-group">
	<li class="list-group-item">
		<div class="row ">
			<div class="col-12 dashboard-market">
				<h2><?= $linkActivo['section']; ?></h2>
				<div class="row">
					<h3 class="col-12">Ventas</h3>
					<div class="col-12 col-sm-6 col-xl-3">
						<div class="kpi">
							<h4>Ventas 30 días</h4>
							<p class="kpi-value"><?= $market['ventas30']; ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-xl-3">
						<div class="kpi">
							<h4>Facturado 30 días</h4>
							<p class="kpi-value">$<?= clp($market['facturado30']); ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-xl-3">
						<div class="kpi">
							<h4>Ventas 60 días</h4>
							<p class="kpi-value"><?= $market['ventas60']; ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-xl-3">
						<div class="kpi">
							<h4>Facturado 60 días</h4>
							<p class="kpi-value">$<?= clp($market['facturado60']); ?></p>
						</div>
					</div>
					<div class="col-12 col-xl-4">
						<div class="kpi">
							<h4>Facturado por Semana</h4>
							<div class="top-container">
								<canvas id="ventas-semanas" class="kpi-value"></canvas>
							</div>
						</div>
					</div>
					<div class="col-12 col-lg-6 col-xl-4">
						<div class="kpi">
							<h4>Top 10 Productos 30 días</h4>
							<div class="top-container">
								<?php 
									foreach($market['top_productos'] as $name => $val) {
										echo '<div class="top-name tt" title="' . $name . '">' . $name . '</div>';
										echo '<div class="top-value">$' . clp($val) . '</div>';
									}
								?>
							</div>
						</div>
					</div>
					<div class="col-12 col-lg-6 col-xl-4">
						<div class="kpi">
							<h4>Top 10 Categorías 30 días</h4>
							<div class="top-container">
								<?php 
									foreach($market['top_categorias'] as $name => $val) {
										echo '<div class="top-name tt" title="' . $name . '">' . $name . '</div>';
										echo '<div class="top-value">$' . clp($val) . '</div>';
									}
								?>
							</div>
						</div>
					</div>
					<h2 class="col-12">Productos</h2>
					<div class="col-12 col-sm-6 col-lg-3">
						<div class="kpi">
							<h4>Disponibles</h4>
							<p class="kpi-value"><?= $market['disponibles']; ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-lg-3">
						<div class="kpi">
							<h4>Sin publicar</h4>
							<p class="kpi-value"><?= $market['sin_publicar']; ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-lg-3">
						<div class="kpi">
							<h4>No recargados</h4>
							<p class="kpi-value"><?= $market['sin_recargar']; ?></p>
						</div>
					</div>
					<div class="col-12 col-sm-6 col-lg-3">
						<div class="kpi">
							<h4>Sin Remover</h4>
							<p class="kpi-value"><?= $market['sin_remover']; ?></p>
						</div>
					</div>
					<div class="col-12 col-xl-6">
						<div class="kpi">
							<h4>Publicados por semana</h4>
							<div class="publicados-semana">
								<canvas id="publicados-semanas" class="kpi-value"></canvas>
							</div>
						</div>
					</div>
					<div class="col-12 col-xl-6">
						<div class="kpi">
							<h4>Disponibles por categoría</h4>
							<div class="pie-categorias">
								<canvas id="disponibles-categorias" class="kpi-value" height="450"></canvas>
							</div>
						</div>
					</div>
				</div>
			
			</div>
		</div>
	
	</li>
</ul>



<script>

var ctxSemanas = document.getElementById('ventas-semanas').getContext('2d');
var chart = new Chart(ctxSemanas, {
  type: 'bar',
  data: {
	labels: [<?php echo '"' . implode('", "', array_keys($market['semanas'])) . '"'; ?>],
	datasets: [{
		label: 'Monto vendido',
		backgroundColor: 'rgb(99, 132, 255)',
		borderColor: 'rgb(99, 132, 255)',
		data: [<?php echo '"' . implode('", "', $market['semanas']) . '"'; ?>]
	}],
  },
  options: {
	responsive: true,
	maintainAspectRatio: false
  }
});


var ctxPubSemanas = document.getElementById('publicados-semanas').getContext('2d');
var chart = new Chart(ctxPubSemanas, {
  type: 'bar',
  data: {
	  labels: [<?php echo '"' . implode('", "', array_keys($market['publicados_semanas'])) . '"'; ?>],
	  datasets: [{
		  label: 'Publicados',
		  backgroundColor: 'rgb(99, 132, 255)',
		  borderColor: 'rgb(99, 132, 255)',
		  data: [<?php echo '"' . implode('", "', $market['publicados_semanas']) . '"'; ?>]
	  }]
  },
	options: {
	responsive: true,
	maintainAspectRatio: false
  }
});

var ctxPubCategorias = document.getElementById('disponibles-categorias').getContext('2d');
var chart = new Chart(ctxPubCategorias, {
  type: 'pie',
  data: {
	  labels: [<?php echo '"' . implode('", "', array_keys($market['disponibles_categorias'])) . '"'; ?>],
	  datasets: [{
		  label: 'Disponibles',
		  backgroundColor: [<?php echo '"' . implode('", "', $market['colores_categorias']) . '"'; ?>],
		  borderColor: [<?php echo '"' . implode('", "', $market['colores_categorias']) . '"'; ?>],
		  data: [<?php echo '"' . implode('", "', $market['disponibles_categorias']) . '"'; ?>]
	  }]
  }
});

</script>