{% extends 'base.html' %}

{% block content %}
<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">
                    Registro
                </li>
            </ol>
        </nav>
    </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>
                            <th>Departamento</th>
                            <th>Vigencia</th>
                            <th>Codigo Recibo</th>
                            <th>Número de documento</th>
                            <th>Fecha de Documento</th>
                            <th>Procedencia</th>
                            <th>Ciudad  de Procedencia</th>
                            <th>Valor Total</th>
                            <th>Fecha</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <template>
                                       
                            <tr v-for="pago in searchUser">
                                <td v-text="pago.departamento"></td>
                                <td v-text="pago.vigencia"></td>
                                <td v-text="pago.formulario"></td>
                                <td v-text="pago.numero_documento"></td>
                                <td v-text="pago.fecha_documento"></td>
                                <td v-text="pago.procedencia"></td>
                                <td v-text="pago.ciudad_procedencia"></td>
                                <td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
                                <td v-text="pago.fecha"></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;">Liquidadas sin pago</h5>
                </div>
                <br>
                <div class="table-responsive">
                 <table class="my-0 table table-striped">
                    <thead>
                        <tr>
                            <th>Departamento</th>
                            <th>Vigencia</th>
                            <th>Codigo Recibo</th>
                            <th>Número de documento</th>
                            <th>Fecha de Documento</th>
                            <th>Procedencia</th>
                            <th>Ciudad  de Procedencia</th>
                            <th>Valor Total</th>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-if="nopagos.length==0">
							<tr>
								<td colspan="6" style="text-align: center;">No hay sin pago</td>
							</tr>
						</template>
						<template v-else="">
                            <tr v-for="nopago in nopagos">
                                <td v-text="nopago.departamento"></td>
                                <td v-text="nopago.vigencia"></td>
                                <td v-text="nopago.formulario"></td>
                                <td v-text="nopago.numero_documento"></td>
                                <td v-text="nopago.fecha_documento"></td>
                                <td v-text="nopago.procedencia"></td>
                                <td v-text="nopago.ciudad_procedencia"></td>
                                <td v-text="'$'+Number(nopago.valor).toLocaleString()"></td>
                                <td v-text="nopago.fecha"></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>
                </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: {
            noPagosSiverr(estado, idDepto)
            {
				var url = `/siverrpagos/${this.depto}/noPagosSiverr/${this.depto}/`;
                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 = `/siverrpagos/${this.depto}/consultarSiverr/${this.depto}/`;
				$('.spinner-border').css('display', 'block');
                var vigencia = [];
                var valor = [];
                var valorConcat = [];
                var departamentos = [];
                var impuesto = [];
                var todos = [];
                var me = this;

                axios.get(url)
                    .then(response => {
                        this.pagos = response.data;
						$('.spinner-border').css('display', 'none');


                        for (i = 0; i < me.pagos.length; i++) {

                            var segundo = me.pagos[i];
                            me.totalPagos += Number(me.pagos[i].impuesto);

                            for(f = 0; f < 1; f++){

                                if(me.pagos[i].departamento == segundo.departamento){
                                    //console.log(segundo.departamento);
        
                                    if(todos[segundo.departamento]){
                                        todos[segundo.departamento] = {'impuesto': Number(segundo.impuesto) + todos[segundo.departamento].impuesto,
                                            'departamento': segundo.departamento};
                                            
                                            
                                    }else{
                                        todos[segundo.departamento] = {'impuesto': Number(segundo.impuesto),
                                            'departamento': segundo.departamento};
                                    }
        
                                }
                            }
                        }

                        const resumen = this.pagos.reduce((p,c)=>{ // <-- primero agrupamos 
							p[c.vigencia] = (p[c.vigencia]  || 0)+c.impuesto;
							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);
                        }

                        for(var i in todos){
                        
                            departamentos.push(todos[i].departamento);
                            impuesto.push(todos[i].impuesto);
                        }

                        this.crearGraficas(vigencia, valor, departamentos, impuesto);   
                    })
            },  

            crearGraficas(vigencia, valor, departamentos, impuesto){
                //grafica vigencia/precio
                var options = {
                        series: [{
                        name: 'Valor departamento',
                        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'
                    },
                     xaxis: {
                    categories: vigencia
                        },
                        
                    };
                var chart = new ApexCharts(document.querySelector("#chart-container"), 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(){
            this.listarDatos();
            this.noPagosSiverr();
            
        }
    });

</script>
{% endblock %}