{% 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">
                    Estampillas
                </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;">Liquidaciones</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>Número</th>
							<th style="width: 10%;">Fecha Liquidacion</th>
                            <th>Objeto</th>
                            <th>Valor</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-if="searchUser.length==0">
                            <tr>
                                <td colspan="6" style="text-align: center;">No hay liquidaciones</td>
                            </tr>
                        </template>
                        <template>
        
                            <tr v-for="pago in searchUser" style="text-align: center;">
                                <td v-text="pago.departamento"></td>
                                <td v-text="pago.numero_contrato"></td></td>
                                <td v-text="pago.fecha"></td>
                                <td v-text="pago.objeto"></td>
                                <td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
                                <td>
                                    <div v-if="pago.estado == 1">
                                        <span class="badge badge-primary ">Activo</span>
                                    </div>
                                    <div v-else-if="pago.estado == 5">
                                        <span class="badge badge-success ">Liquidado</span>
                                    </div>
                                </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 Liquidaciones</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: [],
            depa: '',
            total: 0,
        },
        methods: {
           
            listarDatos(estado, idDepto){
                var url = '/estampillaspagos/consultarLiquidacionesEstampillasPagos';
                var vigencia = [];
                var valor = [];
                var valorConcat = [];
                var departamentos = [];
                var impuesto = [];
                var todos = [];
                var me = this;
				
                axios.get(url)
						.then(response => {
						
							this.pagos = response.data;
                            console.log(this.pagos);
			

						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);
                        }
						
						

							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, 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();
        }
    });
</script>

{% endblock %}