{% 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>
											<span class="badge badge-info" style="background-color:  rgb(12 131 221);">Inicial</span>
										</div>
									</td>
									<td v-text="pago.periodo"></td>
								    <td v-text="pago.declaracion"></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>
			</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>
					</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,
				pagos: [],
				depa: '',
				
			},
			methods: {
				listarDatos(estado, idDepto) {
					var url = '/sobretasa/consultaSobretasa';
					$('.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();
			}
		});
	</script>
	{% endblock %}