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

    <div class="row">
        <div class="d-flex col-xxl-12 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="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;">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>
                            <th>Departamento</th>
                            <th>Valor Impuesto</th>
                            <th>Número Declaración</th>
                            <th>Valor Total</th>
                            <th>Vigencia</th>
                            <th>Estado Declaración</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <template v-if="searchUser.length==0">
                            <tr>
                                <td colspan="6" style="text-align: center;">Sin declaraciones</td>
                            </tr>
                        </template> -->
                        <template>
                            <tr v-for="pago in pagos">
                                <td>{{depto}}</td>
                                <td v-text="'$'+Number(pago.valor_impuesto).toLocaleString()"></td>
                                <td v-text="pago.num_declaracion"></td>
                                <td v-text="'$'+Number(pago.valor_total).toLocaleString()"></td>
                                <td v-text="pago.mes+'-'+ pago.anio"></td>
                                <td v-text="pago.estado_declaracion"></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: {
        

            //Funcion para separar miles y colocar signo de pesos
            /*formatPrice(value){
                return  "$"+value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')+" pesos";
                var prueba = this.formatPrice(100000000000);
                console.log(prueba);
            },*/

            listarDatos(estado, idDepto){
                var vigencia = [];
                var valor = [];
                var valorConcat = [];
                var departamentos = [];
                var impuesto = [];
                var todos = [];
                var me = this;
                var url = `/loteriapagos/${this.depto}/consultarLoteria/${this.depto}/`;

                axios.get(url)
                    .then(response => {                       
                       this.pagos = response.data;
                       const resumen = this.pagos.reduce((p,c)=>{ // <-- primero agrupamos 
							p[c.anio] = (p[c.anio]  || 0)+c.valor_total;
							return p;
						},{})

						const resultado = Object.keys(resumen).map(e=>{ // <-- después transformamos el formato
							const o = {};
							o.anio = e;
							o.valor_total = resumen[e];
							return o;
						})


						for(var i in resultado){
                            //console.log(todos[i].departamento);
                            vigencia.push(resultado[i].anio);
                            valor.push(resultado[i].valor_total);
                        }
						
						
							$('#spinnerpago').css('display', 'none');

                            response.data.forEach(function (value, index) {
								me.totalPagos = me.totalPagos + value.valor_total;
							})
							// console.log(vigencia);
							total = [me.totalPagos];
							
							this.crearGraficas(vigencia, valor);
                    })                
            },

            crearGraficas(vigencia, valor){
                //grafica vigencia/precio
                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'
                    },
                     xaxis: {
                    categories: vigencia
                        },
                        
                    };
                var chart = new ApexCharts(document.querySelector("#chart-container"), options);
                chart.render();

               
            }
        },

        
        
        mounted(){
            this.listarDatos();
            this.noPagosLoteria();    
        }
    });
</script>

{% endblock %}