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

{% block title %}Conteo Votos Diputados{% endblock %}
{% block content %}

<style>
    #contenedor-resultados {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .card {
        width: 200px;
        padding: 15px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        position: relative;
    }

    .card img {
        width: 100px;
        height: 100px;
        border-radius: 10%;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .card h3 {
        font-size: 16px;
        margin: 5px 0;
    }

    .card .votos {
        font-size: 18px;
        font-weight: bold;
    }

    .card .movimiento {
        font-size: 14px;
        color: gray;
    }

    .card .barra {
        height: 10px;
        border-radius: 5px;
        margin-top: 5px;
    }

    .graphModalSize {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: 100%;
    }


    .graphModalContent {
        height: 100vh;
    }

    .graphModalBody {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        /* Scroll horizontal si es necesario */
    }
</style>

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="nav-icon fas fa-vote-yea mr-1"></i> Conteo Votos {{tipoText}}</h1>
            </div>
            <div class="col-sm-6">
                <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-vote-yea mr-1"></i> Conteo Votos
                        {{tipoText}}</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<p class="text-danger fs-3 p-2"><b>Los datos se Actualizan cada 30 seg.</b></p>

<div class="text-right p-2">
    <button id="btnGrafico" class="btn btn-warning text-dark">
        <i class="fas fa-chart-bar"></i> Ver Gráfico Barras
    </button>
</div>


{% if tipo == 4 %}

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label>Municipio:</label>
            <select id="municipio" class="form-select form-select-sm">
                {% for r in regionesData %}
                <option value="{{r.pk_region}}">{{r.nombre}}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</div>

<hr>

{% endif %}

<section class="content">

    <div id="contenedor-resultados"></div>

</section>


<div class="modal fade" id="modalGrafico" tabindex="-1" role="dialog" aria-labelledby="modalGraficoLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-fullscreen graphModalSize" role="document">
        <div class="modal-content graphModalContent">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-chart-bar"></i> Gráfico de Resultados</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body graphModalBody">
                <canvas id="graficoVotos">

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


{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        let dollarUSLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        let intergerLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });


        var empresa = "{{empresa}}";
        var tipo = "{{tipo}}";
        var municipio = "{{municipio}}" || null; // Si es vacío, poner null
        var modalAbierto = false;
        var chartInstance = null;

        // Asegurar que municipio solo se usa si el tipo es 4 (Alcaldes)
        if (tipo != 4) {
            municipio = null;
        }

        // Aplicar el valor inicial si es tipo 4
        if (tipo == 4 && municipio) {
            $('#municipio').val(municipio).change();
        }

        // Detectar cambios en el select del municipio
        $('#municipio').change(function (e) {
            e.preventDefault();
            municipio = $('#municipio').val() || null;

            actualizarResultados(municipio);
        });


        function actualizarResultados(municipioValue = null) {
            console.log("Enviando petición con municipio:", municipioValue);

            $.ajax({
                url: "{% url 'dataGraficosResultadosCandidatos' %}",
                method: "POST",
                data: {
                    tipo: tipo,
                    municipio: tipo == 4 ? municipioValue : null,
                    csrfmiddlewaretoken: csrfToken
                },
                dataType: "json",
                success: function (response) {
                    var data = response.data;
                    if (modalAbierto) {
                        actualizarGrafico(data);
                    } else {
                        actualizarCards(data);
                    }
                }
            });
        }

        // Función para actualizar los resultados
        function actualizarResultados(municipioValue = null) {
            console.log("Enviando petición con municipio:", municipioValue);

            $.ajax({
                url: "{% url 'dataGraficosResultadosCandidatos' %}",
                method: "POST",
                data: {
                    tipo: tipo,
                    municipio: tipo == 4 ? municipioValue : null,
                    csrfmiddlewaretoken: csrfToken
                },
                dataType: "json",
                success: function (response) {
                    var data = response.data;
                    if (modalAbierto) {
                        actualizarGrafico(data);
                    } else {
                        actualizarCards(data);
                    }
                }
            });
        }


        function actualizarCards(data) {
            var contenedor = $("#contenedor-resultados");
            contenedor.empty();

            data.forEach(item => {
                var card = `
                    <div class="card" style="border-top: 10px solid ${item.hex_color}">
                        <img src="${item.url_foto_papeleta}" alt="${item.nombre_candidato}">
                        <h3>${item.posicion + ' | ' + item.nombre_candidato}</h3>
                        <p class="movimiento">${item.nombre_movimiento}</p>
                        <p class="votos"><b>${dollarUSLocale.format(item.porcentaje_votos)} %</b></p>
                        <p class="votos"><b>${intergerLocale.format(item.total_votos)} votos</b></p>
                    </div>
                `;
                contenedor.append(card);
            });
        }

        function actualizarGrafico(data) {
            var ctx = document.getElementById("graficoVotos").getContext("2d");

            var nombres = data.map(item => `${item.posicion} | ${item.nombre_candidato}`);
            var votos = data.map(item => item.total_votos);
            var colores = data.map(item => item.hex_color);

            if (chartInstance) {
                chartInstance.destroy();
            }

            chartInstance = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: nombres,
                    datasets: [{
                        label: "Votos",
                        data: votos,
                        backgroundColor: colores,
                        borderColor: colores,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            ticks: {
                                autoSkip: false,
                                maxRotation: 45,
                                minRotation: 45
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: { display: false },
                        datalabels: {  // 💡 Aquí activamos las etiquetas en las barras
                            anchor: "end",
                            align: "top",
                            formatter: function (value, context) {
                                return intergerLocale.format(value); // Formato con comas en los números
                            },
                            color: "#000",
                            font: {
                                weight: "bold",
                                size: 12
                            }
                        }
                    }
                },
                plugins: [ChartDataLabels]  // 💡 Aquí activamos el plugin
            });

        }

        $("#btnGrafico").click(function () {
            modalAbierto = true;
            actualizarResultados(municipio);
            $("#modalGrafico").modal("show");
        });

        $("#modalGrafico").on("hidden.bs.modal", function () {
            modalAbierto = false;
            actualizarResultados(municipio);
        });

        // Cargar resultados al inicio sin enviar `municipio` si no es tipo 4
        actualizarResultados(municipio);

        // Botón de actualización manual
        $("#actualizarResultados").click(function () {
            actualizarResultados(municipio);
        });

        // Auto-actualización cada 30 segundos
        setInterval(() => {
            actualizarResultados(municipio);
        }, 30000);

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