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

{% block title %}Resultados por Candidatos{% 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 DIPUTADOS</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 DIPUTADOS por Movimiento</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row mb-2" id="movimientos">

    </div>

    <div class="row">
        <div class="col">
            <!-- Gráfico de Barras para DIPUTADO -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><b data-movimiento_nombre></b> - CANTIDAD DE VOTOS</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputadoBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <!-- Gráfico de Pastel para DIPUTADO -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><b data-movimiento_nombre></b> - RESULTADOS DEL MOVIMIENTO</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputadoPieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <!-- Gráfico de Pastel para DIPUTADO -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><b>PUESTO EN EL RANKING GENERAL</b></h3>
                </div>
                <div class="card-body">
                    <b>DIPUTADOS ELECTOS: <span id="cantidad_electos"></span></b>
                    <ul class="list-group" id="ranking">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.content -->
{% endblock %}

{% block modals %}
<div class="modal fade" id="general">
    <div class="modal-dialog modal-xl rounded-3">
        <div class="modal-content">
            <!-- <div class="modal-header bg-success">
                <h5 class="modal-title"><b>DIPUTADOS RESULTADOS GENERALES</b> - <span>CANTIDAD VOTOS</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div> -->
            <div class="modal-body p-0">
                <div class="row">
                    <div class="col">
                        <!-- Gráfico para Candidatos (sin tipo candidato) -->
                        <div class="card rounded-0 mb-0">
                            <div class="card-header bg-success rounded-0">
                                <h3 class="card-title"><b>DIPUTADOS RESULTADOS GENERALES</b> - <span>TOP 9 DIPUTADOS PARA EL DEPARTAMENTO DE CHOLUTECA</span></h3>
                            </div>
                            <div class="card-body">
                                <div class="chart">
                                    <canvas id="barChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <!-- Gráfico para Candidatos (sin tipo candidato) -->
                        <div class="card rounded-0">
                            <div class="card-header bg-success rounded-0">
                                <h3 class="card-title"><b>DIPUTADOS RESULTADOS GENERALES</b> - RESULTADOS EN EL DEPARTAMENTO DE CHOLUTECA</h3>
                            </div>
                            <div class="card-body">
                                <div class="chart">
                                    <canvas id="pieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-end">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{% 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_movimiento = new URLSearchParams(location.search).get('pk_movimiento') || PK_MOVIMIENTO_DEFAULT;
    let movimientos = null;

    AJAX_REQUEST('{% url "list_movimientos" %}', 'GET', {}, function (response) {
        movimientos = response.result;
        movimientos.forEach((item, index) => {
            $('#movimientos').append(`<div class="col-sm mb-1">
                <a href="${BASE_URL}?pk_movimiento=${item.pk_movimiento}"
                style="background-color: ${item.hex_color};"
                class="btn ${COLOR_CONTRAST(item.hex_color)} text-bold w-100"
                type="button"
                onmouseover="this.style.backgroundColor='${COLOR_DARKER(item.hex_color, 10)}'" 
                onmouseout="this.style.backgroundColor='${item.hex_color}'">
                ${item.nombre}
                </a>
            </div>`);
        });
        $('#movimientos').append(`
        <div class="col-sm mb-1">
            <button onclick="$('#general').modal('show')" class="btn btn-primary text-white text-bold w-100" type="button">
                <i class="fas fa-info-circle mr-1"></i> RESULTADOS GENERALES
            </button>
        </div>
        `);
        // <div class="col-sm-4 mb-2">
        //     <button onclick="$('#ranking_completo').modal('show')" class="btn bg-maroon text-white text-bold w-100" type="button">
        //         <i class="fas fa-info-circle mr-1"></i> VER RANKING GENERAL
        //     </button>
        // </div>

        let movimiento = movimientos.filter(mov => mov.pk_movimiento == pk_movimiento)[0];
        $('[data-movimiento_nombre]').html(movimiento.nombre);
        $('section.content .card').find('.card-header').addClass(COLOR_CONTRAST(movimiento.hex_color)).css('background-color', movimiento.hex_color);
    })

    document.addEventListener("DOMContentLoaded", function () {
        // Petición AJAX para obtener datos sin tipo de candidato
        AJAX_REQUEST('{% url "dataGraficosVotosCandidatos" %}', 'GET', {
            pk_tipo: TIPO_DIPUTADO,
            pk_movimiento: undefined,
            pk_partido: PK_PARTIDO_DEFAULT,
            pk_region: DEPARTAMENTO_CHOLUTECA,
            top_cantidad: 9
        }, function (data) {
            data = data.result;

            // Extraemos las etiquetas y los datos del JSON recibido
            let labels = data.map(item => `${FIRST_WORD(item.candidato_nombres)} ${FIRST_WORD(item.candidato_apellidos)}`);  // Movimientos
            let votes = data.map(item => item.votos);  // Total de votos
            let backgroundColors = data.map((item, index) => item.hex_color);
            let hoverColors = backgroundColors.map(color => COLOR_DARKER(color, 3));  // Oscurece un 20%

            let ctx = document.getElementById('barChart').getContext('2d');

            // Gráfico de barras para mostrar la competencia de movimientos
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,  // Movimientos
                    datasets: [{
                        label: 'Votos de los Diputados',
                        data: votes,
                        backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                        borderColor: backgroundColors, // Usar el mismo color para los bordes
                        borderWidth: 1,
                        hoverBackgroundColor: hoverColors,  // Cambia el color del hover
                        hoverBorderColor: hoverColors  // Cambia el borde al hacer hover
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                // stepSize: 1000 // Asegurar que los pasos sean de 1000
                            }
                        }]
                    },
                    legend: {
                        display: true,
                        labels: {
                            fontSize: 14, // Tamaño del texto
                            // padding: 40,
                            generateLabels: function (chart) {
                                return movimientos.map(movimiento => ({
                                    text: movimiento.nombre,
                                    fillStyle: movimiento.hex_color.trim()  // Asegurarse de eliminar cualquier espacio extra
                                }));
                            }
                        }
                    },
                    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
                            }
                        }
                    }
                }
            });

            // Agrupar votos por movimiento
            const votosPorMovimiento = data.reduce((acc, item) => {
                if (!acc[item.movimiento_nombre]) {
                    acc[item.movimiento_nombre] = 0;
                }
                acc[item.movimiento_nombre] += item.votos;
                return acc;
            }, {});

            // Obtener el total de votos de todos los movimientos
            const totalVotos = Object.values(votosPorMovimiento).reduce((sum, votos) => sum + votos, 0);

            // Mapear los movimientos con su porcentaje de votos
            labels = Object.keys(votosPorMovimiento);  // Movimientos
            votes = Object.values(votosPorMovimiento).map(votos => (votos / totalVotos) * 100);  // Porcentaje de votos
            backgroundColors = labels.map((_, index) => data[index]?.hex_color || "#000000");
            hoverColors = backgroundColors.map(color => COLOR_DARKER(color, 3));  // Oscurece el color


            // Gráfico de Pastel
            let ctxPie = document.getElementById(`pieChart`).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,
                        hoverBackgroundColor: hoverColors,  // Cambia el color del hover
                        hoverBorderColor: hoverColors  // Cambia el borde al hacer hover
                    }]
                },
                options: {
                    legend: {
                        position: "left", // Coloca la leyenda a la izquierda
                        // boxWidth: 20, // Tamaño del cuadro de color
                        // padding: 15, // Espaciado entre elementos de la leyenda
                        display: true,
                        labels: {
                            fontSize: 14, // Tamaño del texto
                            // padding: 40,
                            generateLabels: function (chart) {
                                return movimientos.map(movimiento => ({
                                    text: movimiento.nombre,
                                    fillStyle: movimiento.hex_color.trim()  // Asegurarse de eliminar cualquier espacio extra
                                }));
                            }
                        }
                    },
                    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}`;
                            }
                        }
                    },

                }
            });
        });




        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 + 15;
            }
        };

        AJAX_REQUEST('{% url "dataGraficosVotosCandidatos" %}', 'GET', {
            pk_tipo: TIPO_DIPUTADO,
            pk_movimiento: pk_movimiento,
            pk_partido: undefined,
            pk_region: DEPARTAMENTO_CHOLUTECA,
            top_cantidad: 9
        }, 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, index) => colors[index % colors.length]);

            // Gráfico de Barras
            let ctxBar = document.getElementById(`diputadoBarChart`).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
                            }
                        }
                    }
                }
            });

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

            // Gráfico de Pastel
            let ctxPie = document.getElementById(`diputadoPieChart`).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: {
                        position: legendPosition, // 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 cantidad_electo = 0;
            data.forEach((item) => {
                let electo = item.ranking_general <= 9;
                cantidad_electo += electo ? 1 : 0;

                $('#ranking').append(`<li class="list-group-item text-white p-2 ${electo ? 'bg-primary' : 'bg-danger'}">
                #${item.ranking_general} - ${FIRST_WORD(item.candidato_nombres)} ${FIRST_WORD(item.candidato_apellidos)}    
                </li>`)
            });
            $('#cantidad_electos').html(cantidad_electo);

        });
    });
</script>
{% endblock %}