MINI MINI MANI MO

Path : /var/www/html/sistemas/spid/resources/views/sistemaVotos/
File Upload :
Current File : /var/www/html/sistemas/spid/resources/views/sistemaVotos/proyeccionC.blade.php

<style>
    .main {
        width: 100%;
        color: #000000 !important;
        column-count:3;
        column-rule: 1px solid #bbb;
        column-width: auto;
        margin: 1px   1px   1px   1px !important;
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
        font-size:  10px!important;
        font-family: "Roboto", sans-serif!important;
        font-weight: 700!important;
        font-style:normal!important;
    }
    td, th {
        padding: 1px 1px !important;
        font-size: 27px!important;
        text-align: left;
    }
    body {
        font-family: Arial, sans-serif;
        background-color: #0b0b0b !important; ;
        color: white;
        margin: 0;
    }

    .container {
        display: flex;
        top: 0;
        justify-content: space-between;
        align-items: center;
        /*position: relative; !* Se usa para controlar la posición del logo *!*/
        /*padding-top: 50px; !* Espacio para que el logo no encime el texto *!*/
    }

    .curved-container {
        width: 120px;
        height: 120px;
        background-color: white;
        border-radius: 0px 0px 35px 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: absolute;
        top: 0; /* Pegado arriba */
        left: 0; /* Pegado a la izquierda */
    }

    .curved-container img {
        width: 95%;
        height: auto;
        object-fit: contain;
    }

    .left {
        max-width: 100%;
        font-size: 20px;
        padding-left: 140px; /* Espacio para que el logo no encime el texto */

    }

    .right {
        background-color: white;
        color: black;
        padding: 15px;
        border-radius: 15px;
        text-align: center;
        width: 300px;
        position: relative;
    }

    .curved {
        position: absolute;
        top: -50px;
        left: -15px;
        width: 350px;
        height: 100px;
        background: white;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        z-index: -1;
    }

    .time {
        color: red;
        font-size: 30px;
        font-weight: bold;
    }

    .votes {
        font-size: 18px;
    }
    .row .col
    {
        padding: 0rem !important;
    }
    .container
    {
        padding: 0rem !important;
    }
    .card
    {
        margin: 0rem 0 0rem 0 !important;
    }
    .card
    {
        margin: .0rem 0 0rem 0 !important;
    }
    .section
    {
        padding: .0rem 0 !important;
    }
    .section
    {
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }
    span{
        position:relative;
    }
    span::before{
        position:absolute;
        content: '';
        height:1rem;
        width:100%;
        background-color:yellow !important;
        z-index:-1;
    }

    .favor { color: green; }
    .contra { color: red; }
    .abstencion { color: yellow; }
</style>
@extends('layoutPr')
@section('title')
    Iniciar Asistencia
@endsection
@section('content')
    <div class="container" >
        <div class="section">
            <div class="card">
                <div class="card-content" style='background-color: #0b0b0b ; background-repeat: no-repeat; background-size: cover; padding: 12px 12px!important; '>
                    <div class="container">
                        <!-- Logo alineado arriba a la izquierda -->
                    {{--                        <div class="curved-container">--}}
                    {{--                            <img src="{{asset('spid/images/logo/Sin título-2_Mesa de trabajo 1.png')}}" alt="Senado de la República">--}}
                    {{--                        </div>--}}

                    <!-- Contenido principal alineado sin encimarse -->
                        <div id="actualizaTema" style="font-size: 27px !important; display: none">
                            <br>
                            {{--                            <p style="font-size: 24px !important;"></p>--}}
                            <p style="font-size: 27px !important;" id="temaVotoN"><strong></strong></p>
                            {{--                                <table>--}}
                            {{--                                    <tr>--}}
                            {{--                                        <td width="20px"><p style="font-size: 20px; text-align: left;"><b>Voto: </b></p></td>--}}
                            {{--                                        <td ></td>--}}
                            {{--                                    </tr>--}}
                            {{--                                </table>--}}
                            <br>
                        </div>

                        <!-- Bloque de tiempo -->
                    {{--                        <div>--}}
                    {{--                            <p class="time">01:41</p>--}}
                    {{--                        </div>--}}

                    <!-- Información de votación alineada a la derecha -->
                        {{--                        <div class="right">--}}
                        {{--                            <div class="curved"></div>--}}
                        {{--                            <p>27 de marzo de 2025, 11:31:36</p>--}}
                        {{--                            <p class="votes favor">Favor: 70</p>--}}
                        {{--                            <p class="votes contra">Contra: 0</p>--}}
                        {{--                            <p class="votes abstencion">Abstención: 0</p>--}}
                        {{--                            <p><strong>Total de votos: 70</strong></p>--}}
                        {{--                        </div>--}}
                    </div>
                    <div id="votos" style="display: none;">
                        <div id ="totalesVotos" class="row" >
                            <center>
                                <table style=" table-layout: fixed; width: 100%; align-items: left; background-color: dimgrey;">
                                    <tr>
                                        <td style="background-color: #dddddd; color: white; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="consenso1">
                                            <span style="color: #4CAF50; font-size: 32px; line-height: 1;" >FAVOR: {{$favor}} </span>
                                        </td>
                                        <td style="background-color: #dddddd; color: white; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="abstencion1">
                                            <span style="color: #e9af00;font-size: 32px; line-height: 1; text-stroke: 1px red!important;" >ABSTENCIÓN: {{$abstencion}} </span>
                                        </td>
                                        <td style="background-color: #dddddd; color: white; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="disenso1">
                                            <span style="color: #DC3545; font-size: 32px; line-height: 1;" >CONTRA: {{$contra}}</span>
                                        </td>
                                        <td style="background-color: #dddddd; color: white; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="totalv1">
                                            <span style="font-size: 32px; line-height: 1;" >TOTAL: {{$totalVotos}} </span>
                                        </td>
                                        <td style="background-color: #dddddd; color: white; width:18px; word-wrap: break-word; font-weight: bold; text-align: center; padding: 0px 0px!important;">
                                            <div style="text-align: center !important; padding-top: 0px!important;" >
                                                <h3><span style="color: black; font-size: 32px !important; line-height: 1;" id="countdown"></span></h3>
                                                <input type='hidden' name='tiempo' id='tiempo' value=' @if(count($temaVotos)){{$temaVotos[0]->tiempoVotacion}}@endif'>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </center><br>
                        </div>
{{--                        <div class="row">--}}
                            {{--                            <form class="col s9" >--}}
                            {{--                            </form>--}}
{{--                            <div style="text-align: right !important;" >--}}
{{--                                <h3><p style="font-size: 24px !important;" id="countdown"></p></h3>--}}
{{--                            </div>--}}
{{--                            <input type='hidden' name='tiempo' id='tiempo' value=' @if(count($temaVotos)){{$temaVotos[0]->tiempoVotacion}}@endif'>--}}
{{--                            <form class="col s9">--}}
{{--                            </form>--}}
{{--                        </div>--}}
                        <div class="main">
                            <table width='100%' border="0" id="tablaEstatusvotos">
                                @foreach($votacion as $voto)
                                    <tr>
                                        @if($voto->mensaje == 'FAVOR')
                                            <?php $style = "background-color:#4CAF50;"; ?>
                                        @elseif($voto->mensaje == 'CONTRA')
                                            <?php $style = "background-color:#DC3545;"; ?>
                                        @elseif($voto->mensaje == 'ABSTENCION')
                                            <?php $style = "background-color:#e9af00;"; ?>
                                        @elseif($voto->mensaje == 'SIN REGISTRO')
                                            <?php $style = "background-color:#DDDDDD;"; ?>
                                        @endif
                                        <td style="display: flex; align-items: center;">
                                            <span style="display: inline-block; width: 18px; height: 18px; background-color: {{ $style }}; border-radius: 50%; margin-right: 5px;"></span>
                                            <span style="color: {{ $style }}; font-size: 12px;">
                                                {{ mb_strtoupper($voto->parlamentario->nombre) }} {{ mb_strtoupper($voto->parlamentario->ap_pat) }} {{ mb_strtoupper($voto->parlamentario->ap_mat) }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                    <div id="aistencia" style="display: none;">
                        <div class="row">
{{--                            <form class="col s12">--}}
                                <table id="tablatvotos" style=" table-layout: fixed; width: 100%; align-items: left;">
                                    <tr>
                                        <td style="background-color: #DDDDDD; color: white; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;">
                                            <span style="color: #e9af00; text-stroke: 1px red!important;" >
                                                <h3>
                                                    <span style="color: black; font-size: 52px !important;text-align: center !important; padding-top: 1px; line-height: 1;" id="countdownA"></span>
                                                    <input type='hidden' name='tiempoA' id='tiempoA' value=' @if(count($asistencias)){{$asistencias[0]->tiempoVotacion}}@endif'>
                                                </h3>
                                            </span>
                                        </td>

                                        <td style="background-color: #DDDDDD; color: white; width:18px; word-wrap: break-word; font-weight: bold; text-align: center;padding: 0px 0px!important;" id="totalAsistencias23">
                                            <span style="color: #DC3545; font-size: 52px; font-weight: bold; text-align: center; line-height: 1;" >TOTAL ASISTENCIAS:   {{$totalAsistencias}}</span>
{{--                                            <span style="color: #4CAF50;font-weight: bold; text-align: center; font-size: 27px " >  </span>--}}
                                        </td>
                                    </tr>
                                </table>



{{--                                <table id="tablatvotos">--}}
{{--                                    <tr>--}}
{{--                                        <td width="33%" style="text-align: right; color: black;"><h3>TIEMPO</h3></td>--}}

{{--                                        <td width="33%">--}}
{{--                                            <form class="col s3" style="background-color: #DDDDDD;">--}}
{{--                                                <h3 style=" color: black;"><div id="countdownA"></div></h3>--}}
{{--                                            </form>--}}
{{--                                            <input type='hidden' name='tiempoA' id='tiempoA' value=' @if(count($asistencias)){{$asistencias[0]->tiempoVotacion}}@endif'></td>--}}
{{--                                        <td style="background-color: #DDDDDD; color: black; width:50px; word-wrap: break-word; font-weight: bold; font-size: 20px;" id="totalAsistencias23" width="33%"><strong>TOTAL ASISTENCIAS:</strong> {{$totalAsistencias}}</td>--}}
{{--                                        --}}{{-- <td align="left"><button type='submit' class='btn btn-success' name='boton' style="background-color: #DDDDDD;"><strong></strong></button> </td> --}}
{{--                                    </tr>--}}
{{--                                </table>--}}
{{--                            </form>--}}
                        </div>

{{--                        <div class="row">--}}
{{--                            <form class="col s3">--}}
{{--                                <table style="display: none">--}}
{{--                                    <tr>--}}
{{--                                        <td><button type='submit' class='btn btn-success' name='boton' STYLE="background-color: #97194B;"><strong>Levantar mano </strong></button> </td>--}}
{{--                                        <td><button type='submit' class='btn btn-success' name='boton' style="background-color: #97194B;"><strong>Bajar mano </strong></button> </td>--}}
{{--                                    </tr>--}}
{{--                                </table>--}}
{{--                            </form>--}}
{{--                            <form class="col s4">--}}
{{--                            </form>--}}
{{--                            --}}{{-- <form class="col s5">--}}
{{--                                <table>--}}
{{--                                    <tr>--}}
{{--                                        <td><a onclick="asistencia(1);" class='btn btn-success' style="background-color: #4CAF50;"><strong>ASISTENCIA </strong></a></td>--}}
{{--                                    </tr>--}}
{{--                                </table>--}}
{{--                            </form> --}}
{{--                        </div>--}}
                        <div class="main">
                            <table width='100%' border="0" id="tablaAsistencia23">
                                @foreach($asistencias as $asistencia)
                                    <tr>
                                        @if($asistencia->mensaje == 'ASISTENCIA')
                                            <?php $style = "background-color:#4CAF50;"; ?>
                                        @elseif($asistencia->mensaje == 'PENDIENTE')
                                            <?php $style = "background-color:#DDDDDD;"; ?>
                                        @endif
{{--                                        <td style="{{$style}}">--}}
{{--                                            <p style="color:black; font-size: 16px!important;">{{mb_strtoupper($asistencia->parlamentario->nombre)}} {{mb_strtoupper($asistencia->parlamentario->ap_pat)}} {{mb_strtoupper($asistencia->parlamentario->ap_mat)}} </p>--}}
{{--                                        </td>--}}
                                        <td style="display: flex; align-items: center;">
                                            <span style="display: inline-block; width: 18px; height: 18px; background-color: {{ $style }}; border-radius: 50%; margin-right: 5px;"></span>
                                            <span style="color: {{ $style }}; font-size: 12px;">
                                                {{ mb_strtoupper($asistencia->parlamentario->nombre) }} {{ mb_strtoupper($asistencia->parlamentario->ap_pat) }} {{ mb_strtoupper($asistencia->parlamentario->ap_mat) }}
                                            </span>
                                        </td>
{{--                                        <td style="display: flex; align-items: center;">--}}
{{--                                            <span style="display: inline-block; width: 18px; height: 18px; background-color: {{ $style }}; border-radius: 50%; margin-right: 5px;"></span>--}}
{{--                                            <span style="color: black; font-size: 12px;">--}}
{{--                                                {{ mb_strtoupper($asistencia->parlamentario->nombre) }} {{ mb_strtoupper($asistencia->parlamentario->ap_pat) }} {{ mb_strtoupper($asistencia->parlamentario->ap_mat) }}--}}
{{--                                            </span>--}}
{{--                                        </td>--}}
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                        {{-- @endif --}}
                    </div>
                    <div id="nada" style="display: none;">

{{--                        <div style="text-align:center;">--}}
                            <img src="{{asset('spid/images/logo/congreso_blanco.png')}}"
                                 style="position: absolute;
                                    bottom: -350px;
                                    right: -1700px;
                                    width: 750px;
                                    z-index: 9999;" />
{{--                        </div>--}}



                        <img src="{{asset('spid/images/logo/spid.png')}}"
                             style="position: absolute;
                                    bottom: -1340px;
                                    width: 320px;
                                    z-index: 9999;"
                        >
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">




        // $(document).ready(function() {
        //     function actualizar(){location.reload(true);}
        //     setInterval("actualizaTotalesVotos()",10000);
        //     $.ajaxSetup({ cache: false });
        // });

        // $(document).ready(function() {
        //     function actualizar(){location.reload(true);}
        //     setInterval("actualizaListaVotacion()",10000);
        //     $.ajaxSetup({ cache: false });
        // });

        // $(document).ready(function() {
        //     function actualizar(){location.reload(true);}
        //     setInterval("actualizaAs()",10000);
        //     $.ajaxSetup({ cache: false });
        // });

        //   $(document).ready(function() {
        //     function actualizar(){location.reload(true);}
        //     setInterval("actasistot()",10000);
        //     $.ajaxSetup({ cache: false });
        // });

        // $(document).ready(function() {
        // function actualizar(){location.reload(true);}
        // setInterval("validaEventos()",10000);
        // $.ajaxSetup({ cache: false });
        // });
        // $(document).ready(function() {
        // function actualizar(){location.reload(true);}
        // setInterval("oconse2()",10000);
        // $.ajaxSetup({ cache: false });
        // });


        /*     $(document).ready(function() {
             function actualizar(){location.reload(true);}
             setInterval("odise2()",10000);
             $.ajaxSetup({ cache: false });
             });
     */
        //window.onload = validaEventos;

        $(document).ready(function() {

            function oconse2(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('levantaCon2') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        if(json[0].status=='vacio'){
                            $("#ocons2").empty();
                        }else{
                            $("#ocons2").empty();
                            $.each(json, function(i, item) {
                                $('#ocons2').append('<TR><td>'+item.nombre.toUpperCase() + ' '+item.ap_pat.toUpperCase()+  ' ' + item.ap_mat.toUpperCase() + ' / ' + ' '+ item.creado+'</td></TR>');
                            });
                        }

                    },error: function(xhr, status, error) {
                    }
                });
            }
            function odise2(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('levantaDis2') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        if(json[0].status=='vacio'){
                            $("#odis2").empty();
                        }else{
                            $("#odis2").empty();
                            $.each(json, function(i, item) {
                                $('#odis2').append('<TR><td>'+item.nombre.toUpperCase() + ' '+item.ap_pat.toUpperCase()+  ' ' + item.ap_mat.toUpperCase() + ' / ' + ' '+ item.creado+'</td></TR>');
                            });
                        }

                    },error: function(xhr, status, error) {
                    }
                });
            }


            function validaEventos(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('validaEventosActivos2') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        if(json[0].asistencias == '0' && json[0].votacion == '0'){
                            document.getElementById("votos").style= "display: none";
                            document.getElementById("aistencia").style= "display: none";
                            document.getElementById("nada").style= "display: block";
                            document.getElementById("actualizaTema").style= "display: none";
                            oconse2();
                        }else if(json[0].asistencias > '0' && json[0].votacion == '0'){
                            document.getElementById("nada").style= "display: none";
                            document.getElementById("votos").style= "display: none";
                            document.getElementById("aistencia").style= "display: block";
                            document.getElementById('actualizaTema').style= "display: none";

                            actasistot();
                            actualizaAs();
                        }else if(json[0].votacion > '0' && json[0].asistencias == '0'){
                            document.getElementById("nada").style= "display: none";
                            document.getElementById("aistencia").style= "display: none";
                            document.getElementById("votos").style= "display: block";
                            document.getElementById('actualizaTema').style= "display: block";
                            actualizaListaVotacion();
                            actualizaTotalesVotos();
                            actualizaTemaF();
                            //atualiza
                        }
                    },error: function(xhr, status, error) {
                    }
                });
            }

            function actasistot(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('actasistot') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        $('#totalAsistencias23').replaceWith(' <td style="background-color: #DDDDDD; color: black; width:50px; word-wrap: break-word; font-weight: bold; font-size: 20px;" id="totalAsistencias23" xmlns="http://www.w3.org/1999/html">' +
                            '<span style="color: black;font-weight: bold; text-align: center; font-size: 52px " > TOTAL ASISTENCIAS: ' + json[0].asistenciast + '</span>' +
                            '</td>');
                    },error: function(xhr, status, error) {
                    }
                });
            }


            function actualizaAs(){

                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('actualizaAsistencias') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);

                        $("#tablaAsistencia23").empty();
                        $.each(json, function(i, item) {
                            if(item.mensaje == 'ASISTENCIA'){
                                var style = "#4CAF50;";
                            }else{
                                var style = "#DDDDDD;";
                            }
                            $('#tablaAsistencia23').append('<tr>' +
                                '<td style="display: flex; align-items: center;">' +
                                '<span style="display: inline-block; width: 18.5px; height: 18.5px; background-color:'+style+'; border-radius: 90%; margin-right: 5px;"></span>' +
                                '<span style="color:'+style+'; font-size: 32px; line-height: 0.9; text-align: left;"><p style="color:'+style+'; font-size: 32px; line-height: 1; text-align: left;">'+
                                    item.name.toUpperCase() + ' ' +item.ap_pat.toUpperCase()+  ' ' + item.ap_mat.toUpperCase()
                                +'</p></span>' +
                                '</td>' +
                                '</tr>');

                        });
                    },error: function(xhr, status, error) {
                    }
                });
            }
            function actualizaTotalesVotos(){

                // totalesVotos
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('actualizaTotalesVotos') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        $('#consenso1').replaceWith(' <td style="background-color: #dddddd; color: black; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="consenso1">' +
                            '<span style="display: inline-block; width: 22px; height: 22px; background-color:#4CAF50; border-radius: 90%; margin-right: 5px;"></span>' +
                            '<span style="font-size: 32px; line-height: 1;" >FAVOR: '+ json[0].votacionFavor + ' </span>' +
                            '</td>');
                        $('#disenso1').replaceWith(' <td style="background-color: #dddddd; color: black; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="disenso1">' +
                            '<span style="display: inline-block; width: 22px; height: 22px; background-color:#DC3545; border-radius: 90%; margin-right: 5px;"></span>' +
                            '<span style="font-size: 32px; line-height: 1;" > CONTRA: ' + json[0].votacionContra + '</span>' +
                            '</td>');
                        $('#abstencion1').replaceWith(' <td style="background-color: #dddddd; color: black; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="abstencion1">' +
                            '<span style="display: inline-block; width: 22px; height: 22px; background-color:#e9af00; border-radius: 90%; margin-right: 5px;"></span>' +
                            '<span style="font-size: 32px; line-height: 1;" > ABSTENCIÓN: ' + json[0].votacionAbsten + '</span>' +
                            '</td>');
                        $('#totalv1').replaceWith(' <td style="background-color: #dddddd; color: black; width:50px; word-wrap: break-word; font-weight: bold; text-align: center!important; padding: 0px 0px!important;" id="totalv1">' +
                            '<span style="font-size: 32px; line-height: 1;" > TOTAL: ' + json[0].totalVotos + '</span></td>');

                    },error: function(xhr, status, error) {
                    }
                });
            }
            //gis
            function actualizaTemaF(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('actualizaTemaVotos') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        $('#temaVotoN').replaceWith('<p style="font-size: 27px !important; margin-left: 22px;" id="temaVotoN"><b style="background-color: white !important; color: black !important; ">REGISTRO DE VOTACIÓN:</b><b>&nbsp;</b><b>'+ json[0].temaV + '</b></p></td>');
                    },error: function(xhr, status, error) {
                    }
                });
            }

            function actualizaListaVotacion(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('actualizaListaVotacion') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);

                        $("#tablaEstatusvotos").empty();
                        $.each(json, function(i, item) {
                            var style = "";
                            if(item.mensaje == 'FAVOR'){
                                style = "#4CAF50";
                            }else if(item.mensaje == 'CONTRA'){
                                style = "#DC3545";
                            }else if(item.mensaje == 'ABSTENCION'){
                                style = "#e9af00";
                            }else if(item.mensaje == 'SIN REGISTRO'){
                                style = "#DDDDDD";
                            }

                            $('#tablaEstatusvotos').append('<tr><td style="display: flex; align-items: center;">' +
                                '<span style="display: inline-block; width: 18.5px; height: 18.5px; background-color:' + style + '; border-radius: 90%; margin-right: 5px;"></span>' +
                                '<span style="color:'+style+'; font-size: 32px; line-height: 0.89; text-align: left;"><p style="color:'+style+'; font-size: 32px; line-height: 1; text-align: left;">' +
                                item.name.toUpperCase() + ' ' + item.ap_pat.toUpperCase() + ' ' + item.ap_mat.toUpperCase() +
                                '</p></span></td></tr>');
                        });
                    },error: function(xhr, status, error) {
                    }
                });
            }
            setInterval(validaEventos,1000);
        });

        function favor(id){
            var id = id;
            $.ajax({
                type: 'GET',
                data :{id},
                url :   "{{ url('consensoU') }}",
                success: function (response) {
                    location.reload();
                },error: function(xhr, status, error) {
                }
            });
        }

        function contra(id){
            var id = id;
            $.ajax({
                type: 'GET',
                data :{id},
                url :   "{{ url('disensoU') }}",
                success: function (response) {
                    location.reload();
                },error: function(xhr, status, error) {
                }
            });
        }

        function abstencion(id){
            var id = id;
            $.ajax({
                type: 'GET',
                data :{id},
                url :   "{{ url('abstencionU') }}",
                success: function (response) {
                    location.reload();
                },error: function(xhr, status, error) {
                }
            });
        }

        function sinRegistro(id){
            var id = id;
            $.ajax({
                type: 'GET',
                data :{id},
                url :   "{{ url('sinRegistroU') }}",
                success: function (response) {
                    location.reload();
                },error: function(xhr, status, error) {
                }
            });
        }

        function asistencia(id){
            var id = id;
            $.ajax({
                type: 'GET',
                data :{id},
                url :   "{{ url('asistenciaU') }}",
                success: function (response) {
                    location.reload();
                },error: function(xhr, status, error) {
                }
            });
        }
        $(document).ready(function() {
            var end1 = document.getElementById('tiempo').value;
            var end = new Date(end1);
            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemainingV() {
                var now = new Date();

                if(end < now){
                    var distance = 0;
                }else{
                    var distance = end - now;
                }

                if (distance <= 0)  {
                    clearInterval(timer);
                    document.getElementById('countdown').innerHTML = '00:00';
                    //document.getElementById('barraVotos').style.display="none";

                    return;
                } else if (distance == "NaN") {
                    clearInterval(timer);
                    document.getElementById('countdown').innerHTML = '';
                    return;
                }

                var minutes = Math.floor((distance % _hour) / _minute);
                var seconds = Math.floor((distance % _minute) / _second);
                if (seconds < 10) {
                    seconds = '0' + seconds;
                }

                document.getElementById('countdown').innerHTML = minutes + ':';
                document.getElementById('countdown').innerHTML += seconds;
            }
            timer = setInterval(showRemainingV, 1000);

            var endA = document.getElementById('tiempoA').value;
            var endA = new Date(endA);
            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemaining() {
                var now = new Date();

                if(endA < now){
                    var distance = 0;
                }else{
                    var distance = endA - now;
                }

                if (distance <= 0)  {
                    clearInterval(timer);
                    document.getElementById('countdownA').innerHTML = '00:00';
                    return;
                } else if (distance == "NaN") {
                    clearInterval(timer);
                    document.getElementById('countdownA').innerHTML = '';
                    return;
                }

                var minutes = Math.floor((distance % _hour) / _minute);
                var seconds = Math.floor((distance % _minute) / _second);
                if (seconds < 10) {
                    seconds = '0' + seconds;
                }

                document.getElementById('countdownA').innerHTML = minutes + ':';
                document.getElementById('countdownA').innerHTML += seconds;
            }
            timer = setInterval(showRemaining, 1000);
        });
    </script>
@endpush

OHA YOOOO