{% extends "app_elecciones/base.html" %}
{% load static %}
{% load widget_tweaks %}


{% block head %}
<script>
    $(document).ready(function()
    {
       $("#mostrarmodal").modal("show");
    });
</script>
{% endblock head %}


{% block cabecera %}

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="container">

        <div class="row align-items-center">
            <div class="col-3">
                <a href="/lista_mesas"> <img class="img-fluid" src="{% static 'img/elecciones/logo.png' %}" alt="logo"> </a>
            </div>
            
            <div class="col-6">
                <label id="lbl_votostotal" style="text-align: center; color: #333333; font-weight: bold; font-size: .85em;">{{ txt_total }}</label>

            </div>
            <div class="col-3">
                <img class="img-fluid" src="/static/img/elecciones/{{imagen}}" alt="Mesa">
            </div>
    </div>
    </div>

    </nav>
    
{% endblock cabecera %}
    
    

{% block contenido %}


<div class="container">

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/logopp.png' %}" alt="Logo PP" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votopp')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votopp" class="img-fluid" type="number" value="{{ votospp }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votopp')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>
    
    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/logopsoe.png' %}" alt="Logo PSOE" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votopsoe')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votopsoe" class="img-fluid" type="number" value="{{ votospsoe }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votopsoe')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/logocs.png' %}" alt="Logo Cuidadanos" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votocs')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votocs" class="img-fluid" type="number" value="{{ votoscs }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votocs')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/logovox.png' %}" alt="Logo VOX" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votovox')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votovox" class="img-fluid" type="number" value="{{ votosvox }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votovox')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/logoup.png' %}" alt="Logo Unidas Podemos" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votoup')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votoup" class="img-fluid" type="number" value="{{ votosup }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votoup')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/votoblanco.png' %}" alt="Logo Voto Blanco" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votoblanco')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votoblanco" class="img-fluid" type="number" value="{{ votosblanco }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votoblanco')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>

    <div class="row align-items-center" style="margin-top: 1em; border-top-color: #333333 ;">
        <div class="col-3" style="text-align: center;">
            <img class="img-fluid" src="{% static 'img/elecciones/votonulo.png' %}" alt="Logo Voto Nulo" style="width: 80%;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="resta('{{mesa}}', 'votonulo')" src="{% static 'img/elecciones/resta.png' %}" alt="Resta">
        </div>
        <div class="col-5" style="text-align: center;">
            <input id="n_votonulo" class="img-fluid" type="number" value="{{ votosnulo }}" disabled style="text-align: right;">
        </div>
        <div class="col-2" style="text-align: center;">
            <img class="img-fluid" onclick="suma('{{mesa}}','votonulo')" src="{% static 'img/elecciones/suma.png' %}" alt="Suma">
        </div>
    </div>
    
    
</div>

<div class="modal fade" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4>Introduce TODOS LOS VOTOS emitidos en esta Mesa de las Elecciones Municipales</h4>
         </div>
         <div class="modal-body">
         <p>Debes incluir los Votos por correo, lo de los interventores (si no son de esta mesa) y el de los miembros de la mesa</p>
         <label>Votos Totales</label>
        <input id="id_total" class="img-fluid" type="number" style="text-align: right;" min="1" placeholder="Valor actual {{ votos_totales }}">   
     </div>
         <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-info btn-sm" onclick="guardar('{{mesa}}')"><span style="font-size: .8em;">GUARDAR</span></button>
            <button type="button" data-dismiss="modal" class="btn btn-info btn-sm" onclick="cerrar('{{mesa}}')"><span style="font-size: .8em;">CERRAR</span></button>
         </div>
    </div>
 </div>
</div>



<script>

    function suma(mesa, voto){
        $.ajax({
				url: '/sumar_ajax/',
				data: {
					'mesa' : mesa,
					'voto': voto,
				},
				success: function(request){
                    var votos = request.data;
                    if(voto=='votopp'){
                        $('#n_votopp').val(votos);
                    }
                    if(voto=='votopsoe'){
                        $('#n_votopsoe').val(votos);
                    }
                    if(voto=='votocs'){
                        $('#n_votocs').val(votos);
                    }
                    if(voto=='votovox'){
                        $('#n_votovox').val(votos);
                    }
                    if(voto=='votoup'){
                        $('#n_votoup').val(votos);
                    }
                    if(voto=='votoblanco'){
                        $('#n_votoblanco').val(votos);
                    }
                    if(voto=='votonulo'){
                        $('#n_votonulo').val(votos);
                    }            
                }	
    		})
    }

    function resta(mesa, voto){
        $.ajax({
				url: '/restar_ajax/',
				data: {
					'mesa' : mesa,
					'voto': voto,
				},
				success: function(request){
                    var votos = request.data;
                    if(voto=='votopp'){
                        $('#n_votopp').val(votos);
                    }
                    if(voto=='votopsoe'){
                        $('#n_votopsoe').val(votos);
                    }
                    if(voto=='votocs'){
                        $('#n_votocs').val(votos);
                    }
                    if(voto=='votovox'){
                        $('#n_votovox').val(votos);
                    }
                    if(voto=='votoup'){
                        $('#n_votoup').val(votos);
                    }
                    if(voto=='votoblanco'){
                        $('#n_votoblanco').val(votos);
                    }
                    if(voto=='votonulo'){
                        $('#n_votonulo').val(votos);
                    }                  
                }	
    		})
    }

    function guardar(mesa){

        var total = $('#id_total').val();

        if(total == ''){
            total = 0;
        }else{
            var total = $('#id_total').val();
        }

        if(total <= 0){
            alert("Debes introducir el número TOTAL DE VOTOS");
        }else{
            $.ajax({
                url: '/guardar_ajax/',
                data: {
                    'mesa' : mesa,
                    'total': total,
                },
                success: function(request){
                    var votos = request.data;                
                    $("#lbl_votostotal").html('Votos emitidos ' + votos)
                }	
            })
            $("#mostrarmodal").modal("hide");

        }
        
    }

    function cerrar(){
        var txt_label = $("#lbl_votostotal").text();
        if(txt_label == '0'){
            alert("No se puede cerrar la pantalla debes introducir el TOTAL DE VOTOS")
        }else{
            $("#mostrarmodal").modal("hide");
        }
        
    }
</script>

{% endblock contenido %}