{% extends 'base.html' %}{% load static %}
{% load static %}

{% block title %}Resultados de los Alcaldes{% endblock %}
{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-7">
                <h1><i class="nav-icon fas fa-user mr-1"></i> RESULTADOS DE LOS ALCALDES</h1>
            </div>
            <div class="col-sm-5">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard_votaciones' %}">Inicio</a></li>
                    <li class="breadcrumb-item active"><i class="nav-icon fas fa-user mr-1"></i> Resultados de ALCALDES por Movimiento</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="form-group d-flex align-items-center">
        <label for="pk_municipio" class="mb-0 mr-2">MUNICIPIO</label>
        <select class="form-control select2bs4 w-auto" id="pk_municipio" name="pk_municipio">
            <!-- Opciones -->
        </select>
    </div>


    <div class="row">
        <div class="col-sm-6">
            <!-- Gráfico de Barras para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title"><b>MUNICIPIO <span data-municipio_nombre></span></b> - CANTIDAD DE VOTOS</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="alcaldeBarChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <!-- Gráfico de Pastel para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title"><b>MUNICIPIO <span data-municipio_nombre></span></b> - RESULTADOS DEL MOVIMIENTO</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="alcaldePieChart" style="min-height: 350px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Ranking -->
    <div class="row">
        <div class="col-sm-6">
            <!-- Gráfico de Barras para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title"><b>RANKING GENERAL ALCALDÍAS GANADAS</b></h3>
                </div>
                <div class="card-body">
                    <div class="row mb-2" id="movimientos">

                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <!-- Gráfico de Pastel para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title"><b id="movimiento_nombre"></b> - ALCALDÍAS GANADAS</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-2" id="rankingMunicipios">

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.content -->
{% endblock %}

{% block scripts %}
<script>
    const colors = [
        '#FF5733', // Rojo
        '#FF8C33', // Naranja
        '#3357FF', // Azul
        '#FF33A1', // Rosa
        '#33FF57', // Verde
        '#8C33FF', // Morado
        '#33FFF6', // Aqua
        '#FFEB33', // Amarillo
        '#33FFB8'  // Verde claro
    ];

    let pk_municipio = new URLSearchParams(location.search).get('pk_municipio') || MUNICIPIO_CHOLUTECA;

    SELECT2_REGIONES_SIMPLE('pk_municipio', pk_municipio, { pk_region_mayor: DEPARTAMENTO_CHOLUTECA }, undefined, false);

    AJAX_REQUEST('{% url "list_catalogo_regiones" %}', 'GET', { id: pk_municipio }, function (response) {
        $('[data-municipio_nombre]').html(response.result[0].nombre);
    });

    $('#pk_municipio').on('change', function () {
        location.href = BASE_URL + '?pk_municipio=' + $(this).val();
    });

    document.addEventListener("DOMContentLoaded", function () {
        Chart.Legend.prototype.afterFit = function () {
            // Verifica si el gráfico es un gráfico de tipo 'pie'
            if (this.chart.config.type === 'pie') {
                this.height = this.height + 25;
            }

            // Verifica si el gráfico es un gráfico de tipo 'pie'
            if (this.chart.config.type === 'bar') {
                this.height = this.height + 25;
            }
        };

        AJAX_REQUEST('{% url "dataGraficosVotosCandidatos" %}', 'GET', {
            pk_tipo: TIPO_ALCALDE,
            pk_movimiento: undefined,
            pk_partido: PK_PARTIDO_DEFAULT,
            pk_region: pk_municipio,
            top_cantidad: 10
        }, function (data) {
            data = data.result;

            // Extraemos las etiquetas y los datos del JSON recibido
            const labels = data.map(item => `${FIRST_WORD(item.candidato_nombres)} ${FIRST_WORD(item.candidato_apellidos)}`);  // Candidatos
            const votes = data.map(item => item.votos);  // Total de votos
            const backgroundColors = data.map(item => item.hex_color.trim()); // Colores dinámicos

            // Gráfico de Barras
            let ctxBar = document.getElementById(`alcaldeBarChart`).getContext('2d');
            new Chart(ctxBar, {
                type: 'bar',
                data: {
                    labels: labels,  // Candidatos
                    datasets: [{
                        label: 'Votos del Candidato',
                        data: votes,
                        backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                        borderColor: backgroundColors, // Usar el mismo color para los bordes
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                // stepSize: 1000 // Asegurar que los pasos sean de 1000
                            }
                        }]
                    },
                    plugins: {
                        datalabels: {
                            color: '#333', // Cambia el color del porcentaje
                            font: {
                                weight: 'bold',
                                size: 12
                            },
                            formatter: (value, ctx) => {
                                return `${value.toLocaleString()}`; // Muestra "porcentaje (votos)"
                            },
                            align: 'end', // Mueve las etiquetas fuera de la gráfica
                            anchor: 'end' // Ancla las etiquetas fuera del segmento
                        }
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                let dataset = data.datasets[tooltipItem.datasetIndex];
                                let value = dataset.data[tooltipItem.index];
                                return ` Votos del Candidato: ${value.toLocaleString()}`; // Muestra solo el porcentaje
                            }
                        }
                    },
                    legend: {
                        display: true,
                        labels: {
                            // fontSize: 14, // Tamaño del texto
                            // padding: 40,
                            generateLabels: function (chart) {
                                return data.map(candidato => ({
                                    text: candidato.movimiento_nombre,
                                    fillStyle: candidato.hex_color.trim()  // Asegurarse de eliminar cualquier espacio extra
                                }));
                            }
                        }
                    },
                }
            });

            // let legendPosition = ($(window).width() < 576) ? "top" : "left"; // Si el tamaño es menor a 576px, pon la leyenda en 'top'
            if ($(window).width() < 576) {
                $('#alcaldePieChart').css({
                    'min-height': '400px',
                    'height': '400px',
                    'max-height': '400px',
                    'max-width': '100%'
                });
            }

            // Gráfico de Pastel
            let ctxPie = document.getElementById(`alcaldePieChart`).getContext('2d');
            // Creando un gráfico para cada tipo de candidato
            new Chart(ctxPie, {
                type: 'pie',
                data: {
                    labels: labels,  // Candidatos
                    datasets: [{
                        label: 'Votos del Candidato',
                        data: votes,  // Total de votos
                        backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                        borderColor: backgroundColors, // Usar el mismo color para los bordes
                        borderWidth: 1
                    }]
                },
                options: {

                    legend: {
                        labels: {
                            // fontSize: 14, // Tamaño del texto
                            // padding: 40,
                            generateLabels: function (chart) {
                                return data.map(candidato => ({
                                    text: candidato.movimiento_nombre,
                                    fillStyle: candidato.hex_color.trim()  // Asegurarse de eliminar cualquier espacio extra
                                }));
                            }
                        }
                        //     position: 'top', // Coloca la leyenda a la izquierda
                        //     labels: {
                        //         boxWidth: 20, // Tamaño del cuadro de color
                        //         padding: 15, // Espaciado entre elementos de la leyenda
                        //         font: {
                        //             size: 12 // Tamaño del texto
                        //         }
                        //     }
                    },
                    // layout: {
                    //     padding: {
                    //         bottom: 20,
                    //         top: 20
                    //     }
                    // },
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        datalabels: {
                            color: '#333', // Cambia el color del porcentaje
                            font: {
                                weight: 'bold',
                                size: 13
                            },
                            formatter: (value, ctx) => {
                                let total = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                                let percentage = ((value / total) * 100).toFixed(2) + "%";
                                return `${percentage}`; // Muestra "porcentaje (votos)"
                            },
                            align: 'end', // Mueve las etiquetas fuera de la gráfica
                            anchor: 'end' // Ancla las etiquetas fuera del segmento
                        }
                    },
                    tooltips: {
                        callbacks: {
                            // Título personalizado
                            title: function (tooltipItem, data) {
                                // Obtiene el nombre del movimiento
                                let candidato = data.labels[tooltipItem[0].index];
                                return `${candidato}`; // Muestra el nombre del movimiento como título
                            },
                            // Etiqueta personalizada
                            label: function (tooltipItem, data) {
                                let dataset = data.datasets[tooltipItem.datasetIndex];
                                let value = dataset.data[tooltipItem.index];

                                // Calcula el total de votos
                                let total = dataset.data.reduce((a, b) => a + b, 0);

                                // Calcula el porcentaje
                                let percentage = ((value / total) * 100).toFixed(2) + "%";

                                // Retorna el label con el valor y porcentaje
                                return ` Resultados: ${percentage}`;
                            }
                        }
                    },

                }
            });

        });
    });






    let movimientos = null;
    let dataMunicipios = null;

    function chargeRanking(pk_movimiento) {
        let movimiento = movimientos.filter(mov => mov.pk_movimiento == pk_movimiento)[0];
        $('#movimiento_nombre').html(movimiento.nombre);
        $('#movimiento_nombre')
            .closest('.card-header').removeClass('text-white text-dark').addClass(COLOR_CONTRAST(movimiento.hex_color))
            .closest('.card-header').css('background-color', movimiento.hex_color);
        // $('#movimientos')
        //     .closest('.card').find('.card-header').removeClass('text-white text-dark').addClass(COLOR_CONTRAST(movimiento.hex_color))
        //     .closest('.card').find('.card-header').css('background-color', movimiento.hex_color);
            
        // Añadir los movimientos al DOM
        $('#rankingMunicipios').html('');
        dataMunicipios.filter(item => item.pk_movimiento === pk_movimiento).forEach((item, index) => {
            // let alcaldias = alcaldiasPorMovimiento[item.pk_movimiento] || 0;

            $('#rankingMunicipios').append(`
                <div class="col-12 mb-2">
                    <a href="${BASE_URL}?pk_municipio=${item.pk_region}"
                        style="background-color: ${movimiento.hex_color};"
                        class="btn ${COLOR_CONTRAST(movimiento.hex_color)} w-100 text-left"
                        onmouseover="this.style.backgroundColor='${COLOR_DARKER(movimiento.hex_color, 10)}'" 
                        onmouseout="this.style.backgroundColor='${movimiento.hex_color}'">
                        <span class="text-bold">${item.nombre}</span> con ${item.votos.toLocaleString()} votos <span class="float-right">
                            <i class="fas fa-external-link-alt mr-2"> Ir</i>
                            </span>
                    </a>
                </div>
            `);
        });
    }

    // RANKING
    AJAX_REQUEST('{% url "dataGraficosVotosMunicipios" %}', 'GET', { pk_partido: PK_PARTIDO_DEFAULT }, function (response) {
        dataMunicipios = response.result;

        // Contar alcaldías por movimiento
        let alcaldiasPorMovimiento = {};

        // Contar las alcaldías de cada movimiento
        dataMunicipios.forEach((item) => {
            if (!alcaldiasPorMovimiento[item.pk_movimiento]) {
                alcaldiasPorMovimiento[item.pk_movimiento] = 0;
            }
            alcaldiasPorMovimiento[item.pk_movimiento]++;
        });


        AJAX_REQUEST('{% url "list_movimientos" %}', 'GET', {}, function (response) {
            movimientos = response.result;

            // Ordenar los movimientos por la cantidad de alcaldías
            movimientos.sort((a, b) => {
                let alcaldiasA = alcaldiasPorMovimiento[a.pk_movimiento] || 0;
                let alcaldiasB = alcaldiasPorMovimiento[b.pk_movimiento] || 0;
                return alcaldiasB - alcaldiasA; // Ordenar de mayor a menor
            });

            // Añadir los movimientos al DOM
            movimientos.forEach((item, index) => {
                let alcaldias = alcaldiasPorMovimiento[item.pk_movimiento] || 0;

                $('#movimientos').append(`
                    <div class="col-12 mb-2">
                        <button onclick="chargeRanking(${item.pk_movimiento})"
                            style="background-color: ${item.hex_color};"
                            class="btn ${COLOR_CONTRAST(item.hex_color)} text-bold w-100 text-left"
                            type="button"
                            onmouseover="this.style.backgroundColor='${COLOR_DARKER(item.hex_color, 10)}'" 
                            onmouseout="this.style.backgroundColor='${item.hex_color}'">
                            #${index+1}<i class="fas fa-info-circle mx-2"></i>${item.nombre} 
                            <span class="float-right">Alcaldías: <span>${alcaldias}</span></span>
                        </button>
                    </div>
                `);

            });
            chargeRanking(PK_MOVIMIENTO_DEFAULT);
        });

    });


</script>
{% endblock %}