{% 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">
                    Degüello
                </li>
            </ol>
        </nav>
    </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;">Impuesto por departamento</h5>
                </div>
                <div class="py-3 card-body">
                    <div id="chart-barras">

                    </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>Valor Impuesto</th>
                            <th>Codigo Declaracion</th>
                            <th>Valor Total</th>
                            <th>Vigencia</th>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-if="searchUser.length==0">
                            <tr>
                                <td colspan="6" style="text-align: center;">No hay pagos</td>
                            </tr>
                        </template>
                        <template>
                            <tr v-for="pago in searchUser">
                                <td v-text="pago.departamento"></td>
                                <td v-text="'$'+Number(pago.valorImpuesto).toLocaleString()"></td>
                                <td v-text="pago.formulario"></td>
                                <td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
                                <td v-text="pago.vigencia"></td>
                                <td v-text="pago.fecha"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </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>
							<th>Departamento</th>
                            <th>Valor Impuesto</th>
                            <th >Codigo Declaracion</th>
                            <th>Valor Total</th>
							<th>Vigencia</th>
							<th>Estado</th>
						</tr>
					</thead>
					<tbody>
						<template v-if="nopagos.length==0">
							<tr>
								<td colspan="6" style="text-align: center;">No hay deudas</td>
							</tr>
						</template>
						<template v-else="">
							<tr v-for="nopago in nopagos">
								<td v-text="nopago.departamento"></td>
								<td v-text="'$'+Number(nopago.valorImpuesto).toLocaleString()"></td>
								<td v-text="nopago.formulario"></td>
								<td v-text="'$'+Number(nopago.valor).toLocaleString()"></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: {
            noPagosDeguello(estado, idDepto) 
            {
                var url = '/deguellopagos/noPagosDeguello';
                var me = this;
                axios.get(url)
					.then(response => {
                        this.nopagos = response.data;
                        response.data.forEach(function(value, index){
                            me.pagosPendientes = me.pagosPendientes + value.valor;
                        })
					})
                    
			},


            //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 = '/deguellopagos/consultarDeguello';

                axios.get(url)
                    .then(response => {                       
                       this.pagos = response.data;
                        //console.log(this.pagos.length);
                        for (i = 0; i < me.pagos.length; i++) {

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

                            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.valorImpuesto) + todos[segundo.departamento].impuesto,
                                                                        'departamento': segundo.departamento, 'vigencia': segundo.vigencia,'valor':Number(segundo.valor)+todos[segundo.departamento].valor};
                                                                        
                                                                        
                                    }else{
                                        todos[segundo.departamento] = {'impuesto': Number(segundo.valorImpuesto),
                                                                        'departamento': segundo.departamento, 'vigencia': segundo.vigencia, 'valor':Number(segundo.valor)};
                                    }
                                    
                                }
                            }
                                
                        }

                        for(var i in todos){ 
                            //console.log(todos[i].departamento);
                            departamentos.push(todos[i].departamento);
                            impuesto.push(todos[i].impuesto);
                            vigencia.push(todos[i].vigencia);
                            valor.push(todos[i].valor);
                        }
                
                    //   todos.forEach(function(value, index){
                    //         departamentos.push(value.departamento);
                    //         vigencia.push(value.vigencia);
                    //         valor.push(value.valor);
                    //         impuesto.push(value.impuesto);
                    //         me.totalPagos = me.totalPagos + value.valor;
                    //         console.log(value);
                    //     })
    
     

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

                //grafica impuesto/departamento
                var options = {
          			series: [{
					 name: 'Impuesto',
         			 data: impuesto,
        		}],
                    chart: {
                    height: 350,
                    type: 'bar',
                    events: {
                        click: function(chart, w, e) {
              // console.log(chart, w, e)
                        }
                    }
                },
				colors:  ['#EC7063','#EB984E','#D98880'],
                plotOptions: {
                    bar: {
                        columnWidth: '45%',
                        distributed: true,
                    }
                },
                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);
                        }
                    }
                },
                legend: {
                    show: false
                },
                xaxis: {
                    categories:  departamentos,
                labels: {
					show:true,

                    style: {
                        colors: ['#000000'],
                            fontSize: '12px'
                        }

                    }
                }
            };

                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(){
            this.listarDatos();
            this.noPagosDeguello();    
        }
    });
</script>

{% endblock %}