{% 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">
						Sobretasa
					</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;">Pagos por vigencia</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;">Pagos por departamento</h5>
					</div>
					<div class="py-3 card-body">
						<div id="chart-barras" style="margin-left: 25%;">

						</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;">Listado de Declaraciones</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>Tipo de Declaración</th>
									<th>Periodo</th>
									<th>Numero de Declaracion</th>
									<th>Valor Total</th>
									<th>Fecha Declaracion</th>
									<th>Fecha Pago </th>
									<th>Año</th>
								</tr>
							</thead>
							
							<tbody>
								<template>
									<tr v-for="pago in searchUser" style="text-align: center;">
										<td v-text="pago.departamento"></td>
										<td>
											<div v-if="pago.estado == 0">
												<span class="badge badge-success">Corregida</span>
											</div>
											<div v-else-if="pago.estado == 1">
												<span class="badge badge-info" style="background-color:  rgb(12 131 221);												;">Inicial</span>
											</div>
											<div v-else-if="pago.estado == 2">
												<span class="badge badge-danger">Corrección</span>
											</div>
										</td>
										<td v-text="pago.periodo"></td>
										<td v-text="pago.formulario"></td>
										<td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
										<td v-text="pago.fecha_declaracion"></td>
										<td v-text="pago.fecha_pago"></td>
										<td v-text="pago.vigencia"></td>
									</tr>
							</template>
							</tbody>
						</table>
					</div>


					<div class="spinner-border" 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>Tipo de Declaración</th>
									<th>Periodo</th>
									<th>Numero de Declaracion</th>
									<th>Valor Total</th>
									<th>Fecha Declaracion</th>
									<th>Año</th>
									<th>Estado</th>
								</tr>
							</thead>
							<tbody>
								<template v-if="nopagos.length==0">
									<tr>
										<td colspan="8" style="text-align: center;">No hay deudas</td>
									</tr>
								</template>
								<template v-else="">
									<tr v-for="nopago in nopagos" style="text-align: center;">
										<td v-text="nopago.departamento"></td>
										<td>
											<div v-if="nopago.estado == 0">
												<span class="badge badge-success">Corregida</span>
											</div>
											<div v-else-if="nopago.estado == 1">
												<span class="badge badge-info" style="background-color:  rgb(12 131 221);">Inicial</span>
											</div>
											<div v-else-if="nopago.estado == 2">
												<span class="badge badge-danger">Corrección</span>
											</div>
										</td>
										<td v-text="nopago.periodo"></td>
										<td v-text="nopago.formulario"></td>
										<td v-text="'$'+Number(nopago.valor).toLocaleString()"></td>
										 <td v-text="nopago.fecha_declaracion"></td>
										<td v-text="nopago.vigencia"></td>
										<td><span class="badge badge-danger ">Sin Pago</span></td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>	
				</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: [],
				depa: '',
				
			},
			methods: {
				noPagosSobretasa(estado, idDepto) 
				{
					var url = '/sobretasapagos/consultaNoPagosSobretasa';
					var me = this;
					axios.get(url)
						.then(response => {
							this.nopagos = response.data;
							response.data.forEach(function(value, index){
								me.pagosPendientes = me.pagosPendientes + value.valor;
							})
						})
						
				},

			
				listarDatos(estado, idDepto) {
					var url = '/sobretasapagos/consultaPagosSobretasa';
					$('.spinner-border').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;
							
							
							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);
							}

							$('.spinner-border').css('display', 'none');

							response.data.forEach(function (value, index) {
								departamentos.push(value.departamento);
								me.totalPagos = me.totalPagos + value.valor;
							})
							
							
							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.noPagosSobretasa();
			}
		});
	</script>
	{% endblock %}