{% 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: 50%;
        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;
    }
</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 Diputados</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
                        Diputados</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

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

<hr>

<section class="content">

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

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


        empresa = "{{empresa}}";
        tipo = "{{tipo}}";



        function actualizarResultados() {
            $.ajax({
                url: "{% url 'dataGraficosResultadosCandidatos' %}",
                method: "POST",
                data: {
                    tipo: tipo,  // Puedes cambiar dinámicamente este valor
                    csrfmiddlewaretoken: csrfToken
                },
                dataType: "json",
                success: function (response) {
                    var data = response.data;
                    var contenedor = $("#contenedor-resultados");
                    contenedor.empty(); // Limpiar contenido anterior

                    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>${item.total_votos} votos</b></p>
                            </div>
                        `;
                        contenedor.append(card);
                    });
                }
            });
        }

        // Cargar resultados al inicio
        actualizarResultados();

        // Botón para actualizar manualmente
        $("#actualizarResultados").click(function () {
            actualizarResultados();
        });

        // Auto-actualización cada 30 segundos
        setInterval(actualizarResultados, 30000);



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