{% 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">
						Vehiculos
					</li>
				</ol>
			</nav>
		</div>
		<div>

			
		</div>	
		<div class="row">
			
			<div class="d-flex col-xxl-12 col-xl-12">
				<div class="flex-fill w-100 card">
					<div class="card-header">
						<h5 class="mb-0 card-title" style="text-align: center;font-size: 17px;">Pagos por vigencia</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="text-align: center;font-size: 17px;">Historial de pagos</h5>
						<!-- <div>
							<div class="input-group">
								<input id="campo" type="text" style=" border: 1px dotted #999;-webkit-appearance: none; border-radius: 4px;" placeholder="Departamento a buscar" oninput="validar2(this)" v-model="depa" autocomplete="off" >                                                      
							</div>
						</div> -->
					</div>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;">
									<th>Departamento</th>
									<th>Placa</th>
									<th>Código Formulario</th>
									<th>Valor Total</th>
									<th>Vigencia</th>
									<th>Fecha Pago</th>
									<th>Corrección</th>
									<th>Formulario de Corrección</th>
									<th>Fecha Corrección</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="pago in searchUser" style="text-align: center;">
										<td v-text="pago.departamento"></td>
										<td v-text="pago.adicional.placa"></td>
										<td v-text="pago.formulario"></td>
										<td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
										<td v-text="pago.vigencia"></td>
										<td v-text="pago.fecha_pago"></td>
										<td >
											<div v-if="pago.correcion == 1">
												Corrección
											</div>
											<div v-else-if="pago.correcion != 1">
												Sin corrección
											</div>
										</td>
										<td v-text="pago.formulario_correcion"></td>
										<td v-text="pago.fecha_correcion"></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="text-align: center; font-size: 17px;">Deuda</h5>					
					</div>
					<br>
					<div class="table-responsive">
						<table class="my-0 table table-striped">
							<thead>
								<tr style="text-align: center;"> 
									<th>Departamento</th>
									<th>Placa</th>
									<th>Valor Total</th>
									<th>Vigencia</th>
									<!-- <th>Pagar</th> -->
									<th>Estado</th>
								</tr>
							</thead>
							<tbody>
								<template >
									<tr v-for="nopago in nopagos" style="text-align: center;">
										<td v-text="nopago.departamento"></td>
										<td v-text="nopago.placa"></td>
										<td v-text="'$'+Number(nopago.valor).toLocaleString()"></td>
										<td v-text="nopago.vigencia"></td>
										<!-- <td>
											<a href="https://aplicativosenlinea.net/sivervtolima/redirect/" target="_blank" style="background-color: #01a540; border-color: #0a7a30; color: white; border-radius: 5px; padding: 5px;"> Pagar </a>
										</td> -->
										<td><span class="badge badge-danger">Sin Pago</span></td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>

					<div class="spinner-border" id="spinnerdeuda" 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 Pagos</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;">Pagos Pendientes</h5>
										</div>
										<div class="col-auto col">
											<div class="avatar">
												<div class="avatar-title rounded-circle deuda">
													<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">
														<circle cx="9" cy="21" r="1"></circle>
														<circle cx="20" cy="21" r="1"></circle>
														<path
															d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6">
														</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,
				pagos: [],
				nopagos: [],
				depto: '{{ depto }}',
				depa: '',
				
			},
			methods: {
				consultarNoPagos(estado, idDepto)
				{
					var url = `/vehiculospagos/${this.depto}/consultarNoPagos/${this.depto}/`;
					$('#spinnerdeuda').css('display', 'block');
					var me = this;

					axios.get(url)
						.then(response => {
							$('#spinnerdeuda').css('display', 'none');

							if(response.data == null){
								this.nopagos = [];
								
							}
							else{
								this.nopagos = response.data;
								response.data.forEach(function(value, index){
								me.pagosPendientes = me.pagosPendientes + value.valor;
								})
							}

						})
				},
				listarDatos(estado, idDepto) {
					var url = `/vehiculospagos/${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.pagos = response.data;
							// console.log(this.pagos.departamento);
			

						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();
				}
			},
			
			computed:{
			searchUser: function () {
				return this.pagos.filter((pago) => {  //retornar lista filtrada(cada elemento va tener un nombre)
					return pago.departamento.toLowerCase().includes(this.depa.toLowerCase()); //filtrar por departamento y compruebe que lo que tiene la propiedad name lo incluye el elemento de la lista
							
				});
			}
		},  

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