{% extends 'base.html' %}

	{% block content %}
	{% load static %}
	<div class="container-fluid" id="app">
		{% csrf_token %}
		<div class="header">
			<h1 class="header-title">Graficas</h1>
			<nav class="" aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="">Aplicativo</a>
					</li>
					<li class="active breadcrumb-item" aria-current="page">
						TTI-CONSUMO
					</li>
				</ol>
			</nav>
		</div>
		<div>

			
		</div>	
		<div class="row">
			
			<div class="d-flex col-xxl-6 col-xl-6">
				<div class="flex-fill w-100 card">
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Declaraciones Nacionales</h5>
					</div>
					<div class="py-3 card-body">
						<div id="chart-container">

						</div>
					</div>
				</div>
			</div>
			
			<div class="d-flex col-xxl-6 col-xl-6">
				<div class="flex-fill w-100 card">
					<div class="card-header">                    
						<h5 class="mb-0 card-title" style="text-align: center; font-size: 17px;">Declaraciones Importadas</h5>
					</div>
					<div class="py-3 card-body">
						<div id="chart-container">
	
						</div>
					</div>
				</div>
			</div>
		

			<div class="col-xxl-9 d-flex col-lg-8">
				
				<div class="flex-fill w-100 card">
					<div class="card-header">
						<h5 class="mb-0 card-title" style="font-size: 18px;">Nacionales</h5>
						
					</div>
					<div style="background: #f4f7fc;">
						&nbsp				
						<br>
					</div>
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Licores</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Año</th>
									<th>Mes</th>
									<th>Quincena</th>
									<th>Fecha</th>
									<th>Valor</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="licor in nacionales_licores" style="text-align: center;">
										<td v-text="licor.departamento"></td>
										<td v-text="licor.declaracion"></td>
										<td v-text="licor.anho"></td>
										<td v-text="licor.mes"></td>
										<td v-text="licor.quincena"></td>
										<td v-text="licor.fecha"></td>
										<td v-text="'$'+Number(licor.valor).toLocaleString()"></td>
										
									</tr>
							</template>
							</tbody>
						</table>
					</div>
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Cervezas</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Año</th>
									<th>Mes</th>
									<th>Fecha</th>
									<th>Valor</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="cerveza in nacionales_cervezas" style="text-align: center;">
										<td v-text="cerveza.departamento"></td>
										<td v-text="cerveza.declaracion"></td>
										<td v-text="cerveza.anho"></td>
										<td v-text="cerveza.mes"></td>
										<td v-text="cerveza.fecha"></td>
										<td v-text="'$'+Number(cerveza.valor).toLocaleString()"></td>
										
									</tr>
							</template>
							</tbody>
						</table>
					</div>

					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Cigarrillos</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Año</th>
									<th>Mes</th>
									<th>Quincena</th>
									<th>Fecha</th>
									<th>Valor</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="cigarrillo in nacionales_cigarrillos" style="text-align: center;">
										<td v-text="cigarrillo.departamento"></td>
										<td v-text="cigarrillo.declaracion"></td>
										<td v-text="cigarrillo.anho"></td>
										<td v-text="cigarrillo.mes"></td>
										<td v-text="cigarrillo.quincena"></td>
										<td v-text="cigarrillo.fecha"></td>
										<td v-text="'$'+Number(cigarrillo.valor).toLocaleString()"></td>
										
									</tr>
							</template>
							</tbody>
						</table>
					</div>

					<div class="spinner-border" id="spinnerpago" role="status" style="margin-left: 48%; display: none;">
						<span class="sr-only"></span>
					</div>
					<div style="background: #f4f7fc;">
						&nbsp				
						<br>
					</div>
				
					<div class="card-header">
						<h5 class="mb-0 card-title" style="font-size: 18px;">Importados</h5>
						
					</div>
					<div style="background: #f4f7fc;">
						&nbsp				
						<br>
					</div>
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Licores</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Fecha</th>
									<th>Impuesto</th>
									<th>Participacion</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="im_licor in importados_licores" style="text-align: center;">
										<td v-text="im_licor.departamento"></td>
										<td v-text="im_licor.declaracion"></td>
										<td v-text="im_licor.fecha"></td>
										<td v-text="'$'+Number(im_licor.timpuesto).toLocaleString()"></td>
										<td v-text="'$'+Number(im_licor.tparticipacion).toLocaleString()"></td>
									</tr>
							</template>
							</tbody>
						</table>
					</div>
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Cervezas</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Fecha</th>
									<th>Consumo</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="im_cerveza in importados_cervezas" style="text-align: center;">
										<td v-text="im_cerveza.departamento"></td>
										<td v-text="im_cerveza.declaracion"></td>
										<td v-text="im_cerveza.fecha"></td>
										<td v-text="'$'+Number(im_cerveza.iconsumo).toLocaleString()"></td>
									</tr>
							</template>
							</tbody>
						</table>
					</div>

					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Cigarrillos</h5>
						
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Declaración </th>
									<th>Fecha</th>
									<th>Total</th>
									<th>Total R</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="im_cigarrillo in importados_cigarrillos" style="text-align: center;">
										<td v-text="im_cigarrillo.departamento"></td>
										<td v-text="im_cigarrillo.declaracion"></td>
										<td v-text="im_cigarrillo.fecha"></td>
										<td v-text="'$'+Number(im_cigarrillo.total).toLocaleString()"></td>
										<td v-text="'$'+Number(im_cigarrillo.totalr).toLocaleString()"></td>
									</tr>
							</template>
							</tbody>
						</table>
					</div>

					<div class="spinner-border" id="spinnerpago" role="status" style="margin-left: 48%; display: none;">
						<span class="sr-only"></span>
					</div>
					<div style="background: #f4f7fc;">
						&nbsp				
						<br>
					</div>
					<br>
					<!-- <a  href="https://aplicativosenlinea.net/sivervtolima/liquidacionweb/primeraa.php" >
						<img style="width: 4%; margin-left: 47%;" src="https://i.postimg.cc/9Fh5ws8K/Grupo-44.png" />
					</a> -->

					<br>
				</div>
			</div>

			<div class="d-flex col-xxl-3 col-lg-4">
				<div class="w-100">
					<div class="row">
						<div class="col-sm-12">
							<div class="card">
								<div class="card-body">
									<div class="row">
										<div class="mt-0 col">
											<h5 class="card-title" style="font-size: 16px;">Total Nacionales</h5>
										</div>
										<div class="col-auto col">
											<div class="avatar">
												<div class="avatar-title rounded-circle total">
													<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather align-middle">
														<line x1="12" y1="1" x2="12" y2="23">
														</line>
														<path 
															d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6">
														</path>
													</svg>
												</div>
											</div>
										</div>
									</div>
									<h1 class="display-5 mt-1 mb-3" v-text="'$'+Number(totalPagos).toLocaleString()"></h1>
									<div class="mb-0">
										
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-body">
									<div class="row">
										<div class="mt-0 col">
											<h5 class="card-title" style="font-size: 16px;">Total Importadas</h5>
										</div>
										<div class="col-auto col">
											<div class="avatar">
												<div class="avatar-title rounded-circle total">
													<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather align-middle">
														<line x1="12" y1="1" x2="12" y2="23">
														</line>
														<path 
															d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6">
														</path>
													</svg>
												</div>
											</div>
										</div>
									</div>
									<h1 class="display-5 mt-1 mb-3" v-text="'$'+Number(pagosPendientes).toLocaleString()"></h1>
									<div class="mb-0">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% endblock %}

	{% block scripts %}
	<script type="text/javascript">

		Vue.http.headers.common['X-CSRFToken'] = "{{ csrf_token }}";
		const headers = {
			"X-CSRFTOKEN": Vue.http.headers.common['X-CSRFToken']
		}

		new Vue({
			el: '#app',
			delimiters: ['${', '}'],
			data: {
				totalPagos: 0,
				page: 0,
				pagosPendientes: 0,
				nacionales_licores: [],
				nacionales_cervezas: [],
				nacionales_cigarrillos: [],
				importados_licores: [],
				importados_cervezas: [],
				importados_cigarrillos: [],
				nopagos: [],
				depto: '{{ depto }}',
				depa: '',
				
			},
			methods: {
				
				listarDatos(estado, idDepto) {
					var url = `/tticonsumo/${this.depto}/consultarDatos/${this.depto}/`;
						$('#spinnerpago').css('display', 'block');
					var vigencia = [];
					var valor = [];
					var valorConcat = [];
					var departamentos = [];
					var todos = [];
					var total  = [];
					var departamento1 = [];
					var me = this;

					axios.get(url)
						.then(response => {
						
							this.nacionales_licores = response.data.nacionales_licores;
							this.nacionales_cervezas = response.data.nacionales_cervezas;
							this.nacionales_cigarrillos = response.data.nacionales_cigarrillos;
							this.importados_licores = response.data.importados_licores;
							this.importados_cervezas = response.data.importados_cervezas;
							this.importados_cigarrillos = response.data.importados_cigarrillos;

						// const resumen = this.pagos.reduce((p,c)=>{ // <-- primero agrupamos 
						// 	p[c.vigencia] = (p[c.vigencia]  || 0)+c.valor;
						// 	return p;
						// },{})

						// const resultado = Object.keys(resumen).map(e=>{ // <-- después transformamos el formato
						// 	const o = {};
						// 	o.vigencia = e;
						// 	o.valor = resumen[e];
						// 	return o;
						// })


						// for(var i in resultado){
                        //     //console.log(todos[i].departamento);
                        //     vigencia.push(resultado[i].vigencia);
                        //     valor.push(resultado[i].valor);
                        // }
						
						
							$('#spinnerpago').css('display', 'none');


						// 	response.data.forEach(function (value, index) {
						// 		departamentos.push(value.departamento);
						// 		me.totalPagos = me.totalPagos + value.valor;
						// 	})
						// 	// console.log(vigencia);
						// 	total = [me.totalPagos];
						// 	departamento1 = departamentos.slice(-1);
							
						// 	this.crearGraficos(vigencia, valor, total, departamento1);
						})
				},
				crearGraficos(vigencia, valor, total, departamento1) {
					//Area
					var options = {
						series: [{
							name: 'Valor',
							data: valor
						}],
						chart: {
							height: 350,
							type: 'area',
							zoom: {
								enabled: false
							}
						},
						colors:['#7FB3D5'],
						dataLabels: {
							enabled: true,
							formatter: function (value) {
							if (isNaN(value)) {
								return value;
							} else {
								var Formatter = new Intl.NumberFormat('es-CO', {
									style: 'currency',
									currency: 'COP'
								});

								return Formatter.format(value);
							}
						}
						},
						stroke: {
							curve: 'smooth'
						},
						title: {
							align: 'left'
						},
						grid: {
							row: {
								colors: ['#f3f3f3',
								'transparent'], // takes an array which will be repeated on columns
								opacity: 0.5
							},
						},
						xaxis: {
							categories: vigencia,
						}
					};

					var chart = new ApexCharts(document.querySelector("#chart-container"), options);
					chart.render();

					//Torta
					var options = {
						series: total,
						chart: {
						width: 500,
						type: 'pie',
						},
						labels: departamento1,
						responsive: [{
						breakpoint: 480,
						options: {
							chart: {
							width: 200
							},
							legend: {
							position: 'bottom'
							}
						}
						}]
					};
					var chart = new ApexCharts(document.querySelector("#chart-barras"), options);
					chart.render();
				}
			},
			

			mounted() { // Se llama el Metodo de listar para que se renderice cada vez que se cargue el componente
				this.listarDatos();
			}
		});
	</script>
	{% endblock %}