<div class="modal fade" id="modalResumenDia" data-backdrop="static" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
	<div class="modal-content">
	  <div class="modal-wait">
		<div class="modal-header">
		  <h5 class="modal-title" id="titleResumenDia">Resumen</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			<div class="table-responsive">
				<table class="table table-striped tabla-resumen-dia">
					<thead>
						<tr>
							<th>Medio de Pago</th>
							<th class="text-center">Ventas</th>
							<th class="text-right">Total</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
			<div style="height:300px;">
				<canvas id="ventas-dia"></canvas>
			</div>
			<div class="table-responsive">
				<table class="table table-striped tabla-resumen-horas">
					<thead>
						<tr>
							<th>Hora</th>
							<th class="text-center">Ventas</th>
							<th class="text-right">Total</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
		</div>
	  </div>
	</div>
  </div>
</div>

<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>
	let $graficoVentasDiarias = null;

	$(document).ready(function () {

		iniciarGraficoVentasDiarias();

		// Mostrar modal con resumen de ventas del día
		$('#modalResumenDia').on('show.bs.modal', function (event) {
			$('.modal-wait').hide();
			let button = $(event.relatedTarget)
			let modal = $(this);
			let dia_texto = button.data('dia-texto');
			modal.find('.tabla-resumen-dia tbody').html('');
			modal.find('.tabla-resumen-horas tbody').html('');

			//modal.find('#editarVenta').removeAttr('disabled');
			if (button.data('dia') > 0) {
				var dia = button.data('dia');
				var idCanal = button.data('id-canal');

				$.ajax({
					url:   '/ventas/resumen_dia/' + dia + '/' + idCanal,
					beforeSend: function () {
					},
					success:  function (response) {
						//foreach producto
						if (typeof response.medios_pagos != "undefined") {
							for (let mp of response.medios_pagos) {
								modal.find('#titleResumenDia').html('Resumen ' + dia_texto);

								let html = '<tr><td>' + mp.medio_pago;
								if (mp.id_punto_venta > 0) {
									html += ' (' + mp.punto_venta + ')';
								}
								
								html += '</td>';
								html += '<td class="text-center">' + mp.cantidad + '</td>';
								html += '<td class="text-right">' + clp(mp.total) + '</td></tr>';

								modal.find('.tabla-resumen-dia tbody').append(html);
							}
						}

						if (typeof response.horas != "undefined") {
							for (let h of response.horas) {
								let html = '<tr><td>' + h.hora + '</td>';
								html += '<td class="text-center">' + h.cantidad + '</td>';
								html += '<td class="text-right">' + clp(h.total) + '</td></tr>';

								modal.find('.tabla-resumen-horas tbody').append(html);
							}
							$('.modal-wait').show();
						}

						actualizarGraficoVentasDiarias(response.horas);
					}
				});
			}
		});

	});

	function iniciarGraficoVentasDiarias()
	{
		const $ctx = document.getElementById('ventas-dia');

		$graficoVentasDiarias = new Chart($ctx, {
			type: 'bar',
			data: {
				labels: [],
				datasets: [
					{
						label: 'Total Vendido',
						type: 'bar',
						backgroundColor: '#ffc107',
						borderColor: '#ffc107',
						yAxisID: 'yTotal',
						order: 2
					},
					{
						label: 'Cantidad Ventas',
						type: 'line',
						borderColor: 'rgba(0, 123, 255, 1)', // azul
						pointBackgroundColor: 'rgba(0, 123, 255, 1)',
						yAxisID: 'yCantidad',
						order: 1,
						tension: 0.3
					}
				]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				interaction: {
					mode: 'index',
					intersect: false
				},
				scales: {
					yCantidad: {
						type: 'linear',
						position: 'left',
						beginAtZero: true
					},
					yTotal: {
						type: 'linear',
						position: 'right',
						beginAtZero: true,
						grid: {
							drawOnChartArea: false
						}
					}
				}
			}
		});
	}

	function actualizarGraficoVentasDiarias($horas)
	{
		const $labels = [];
		const $cantidad = [];
		const $totales = [];

		$horas.forEach(function($fila) {

			$labels.push($fila.hora + ':00');

			$cantidad.push(parseInt($fila.cantidad));

			$totales.push(parseInt($fila.total));
		});

		$graficoVentasDiarias.data.labels = $labels;

		$graficoVentasDiarias.data.datasets[1].data = $cantidad;

		$graficoVentasDiarias.data.datasets[0].data = $totales;

		$graficoVentasDiarias.update();
	}
</script>