{% 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>Entidad Contratista</th>
                                <th>Número de Contrato</th>
                                <th>Valor del Contrato</th>
                                <th>Beneficio</th>
                                <th>Estado</th>
                                <th>Ver detallado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="pagos.length == 0">
                                <tr>
                                    <td colspan="7" style="text-align: center;">No hay liquidaciones</td>
                                </tr>
                            </template>

                            <template v-for="pago in pagos">
                                <!-- Fila principal -->
                                <tr style="text-align: center;">
                                    <td v-text="pago.departamento"></td>
                                    <td>
                                        <template v-if="pago.nombre_entidad">
                                            {{ pago.nombre_entidad }}
                                        </template>
                                        <template v-else>
                                            No presenta entidad
                                        </template>
                                    </td>
                                    <td v-text="pago.numero_contrato"></td>
                                    <td v-text="'$'+Number(pago.valor).toLocaleString()"></td>
                                    <td>
                                        <div v-if="pago.beneficio == '1'"><b>SI</b></div>
                                        <div v-else-if="pago.beneficio == '2'"><b>NO</b></div>
                                    </td>
                                    <td>
                                        <div v-if="pago.estado == 1">
                                            <span class="badge badge-primary">Liquidado sin Pago</span>
                                        </div>
                                        <div v-else-if="pago.estado == 2">
                                            <span class="badge badge-warning">Legalizado</span>
                                        </div>
                                        <div v-else-if="pago.estado == 5">
                                            <span class="badge badge-secondary">Liquidado</span>
                                        </div>
                                        <div v-else-if="pago.estado == 6">
                                            <span class="badge badge-danger">Anulado</span>
                                        </div>
                                        <div v-else-if="pago.estado == 7">
                                            <span class="badge badge-success">Liquidado con Pago</span>
                                        </div>
                                    </td>
                                    <td>
                                    <button style=" border-radius: 5px; background-color: #3a4275; color: #e3f2ff;border-color: #533f38;" onclick="visualizarDetallado(this)">
                                        <i class="fas fa-eye"></i>
                                     </button>
                                    </td>
                                </tr>

                                <!-- Fila secundaria con tabla de estampillas -->
                                <tr class="estampillaver" style="display: none;">
                                    <td colspan="7">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr style="text-align: center;">
                                                    <th>Estampilla</th>
                                                    <th>Porcentaje</th>
                                                    <th>Fecha Pago</th>
                                                    <th>Valor Estampillas</th>
                                                    <th>Valor Pagado</th>
                                                    <th>Estado Pago</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="estampillas in pago.arrayEstampillas">
                                                    <td v-text="estampillas.estampilla"></td>
                                                    <td v-text="estampillas.porcentaje"></td>
                                                    <td v-text="estampillas.fecha_pago"></td>
                                                    <td v-text="estampillas.valor_estampilla"></td>
                                                    <td v-text="estampillas.valor_pagado"></td>
                                                    <td v-text="estampillas.estado_pago"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>    

                </div>
                <div class="spinner-border" id="spinnerpago" 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;">Trámites</h5>
                </div>
                <br>
                <div class="table-responsive">
                    <table class="my-0 table table-striped">
                        <thead>
                            <tr style="text-align: center;">
                                <th>Departamento</th>
                                <th>Trámite</th>
                                <th>Tramitador</th>
                                <th>Fecha de liquidación</th>
                                <th>Observaciones</th>
                                <th>Estado</th>
                                <th>Ver detallado   </th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="nopagos.length==0">
                                <tr>
                                    <td colspan="6" style="text-align: center;">No hay trámites</td>
                                </tr>
                            </template>
                            <template v-for="nopago in nopagos">
                                <tr  style="text-align: center;">
                                    <td v-text="nopago.departamento"></td>
                                    <td v-text="nopago.tramite"></td>
                                    <td v-text="nopago.tramitador"></td>
                                    <td v-text="nopago.fecha"></td>
                                    <td v-text="nopago.observaciones"></td>
                                    <td>
                                        <div v-if="nopago.estado == 0">
                                            <span class="badge badge-danger ">Sin liquidar</span>
                                        </div>
                                        <div v-if="nopago.estado == 1">
                                            <span class="badge badge-warning ">Liquidado sin pago</span>
                                        </div>
                                        <div v-else-if="nopago.estado == 2">
                                            <span class="badge badge-success ">Legalizado</span>
                                        </div>
                                    </td>
                                    <td>
                                        <button style=" border-radius: 5px; background-color: #3a4275; color: #e3f2ff;border-color: #533f38;" onclick="visualizarTramites(this)">
                                        <i class="fas fa-eye"></i>
                                     </button>
                                    </td>
                                </tr>

                                    <tr class="tramitever" style="display: none;">
                                        <td colspan="7">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr style="text-align: center;">
                                                        <th>Estampilla</th>
                                                        <th>Porcentaje</th>
                                                        <th>Fecha Pago</th>
                                                        <th>Valor Estampillas</th>
                                                        <th>Valor Pagado</th>
                                                        <th>Estado Pago</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="tramites in nopago.arrayTramites">
                                                        <td v-text="tramites.estampilla"></td>
                                                        <td v-text="tramites.porcentaje"></td>
                                                        <td v-text="tramites.fecha_pago"></td>
                                                        <td v-text="tramites.valor_estampilla"></td>
                                                        <td v-text="tramites.valor_pagado"></td>
                                                        <td v-text="tramites.estado_pago"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </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;">Valor de contratos</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,
            depto: '{{ depto }}',

        },
        methods: {
            noPagosSiverd(estado, idDepto) {
                var url = `/estampillaspagos/${this.depto}/consultarTramitesEstampillas/${this.depto}/`;
                var me = this;
                axios.get(url)
                    .then(response => {
                        if (response.data == null) {
                            this.nopagos = [];
                        }
                        else {
                            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 url = `/estampillaspagos/${this.depto}/consultarLiquidacionesEstampillas/${this.depto}/`;
                var vigencia = [];
                var valor = [];
                var valorConcat = [];
                var departamentos = [];
                var impuesto = [];
                var todos = [];
                var me = this;
                $('#spinnerpago').css('display', 'block');
                axios.get(url)
                    .then(response => {
                        $('#spinnerpago').css('display', 'none');

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



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

            }
        },


        mounted() {
            this.listarDatos();
            this.noPagosSiverd();
        }
    });


    function visualizarDetallado(button) {
        const detalleRow = $(button).closest('tr').next('.estampillaver');
        const icon = $(button).find('i');

        // Si ya está visible, ocultamos
        if (detalleRow.is(':visible')) {
            detalleRow.hide();
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            // Ocultamos todas las demás
            $('.estampillaver').hide();
            $('button .fa-eye-slash').removeClass('fa-eye-slash').addClass('fa-eye');

            // Mostramos esta
            detalleRow.show();
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        }
    }


    function visualizarTramites(button) {
        const detalleRow = $(button).closest('tr').next('.tramitever');
        const icon = $(button).find('i');

        // Si ya está visible, ocultamos
        if (detalleRow.is(':visible')) {
            detalleRow.hide();
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            // Ocultamos todas las demás
            $('.tramitever').hide();
            $('button .fa-eye-slash').removeClass('fa-eye-slash').addClass('fa-eye');

            // Mostramos esta
            detalleRow.show();
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        }
    }


    
</script>

{% endblock %}