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/sistemaPleno.blade.php

<style>
    /*.main {*/
    /*    width: 100%;*/
    /*    color: #000000 !important;*/
    /*    font-weight: bold;*/
    /*    column-count:2;*/
    /*    column-rule: 1px solid #bbb;*/
    /*    column-width: auto;*/
    /*    margin: 1px   1px   1px   1px !important;*/
    /*}*/
    td, th {
        padding: 3px 3px !important;
    }
     #loadingBack {
         display:none;
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color:#88898c90;
         z-index: 1;
         text-align: center;
         padding-top: 300px;
         padding-left: 22px;
     }

    #centrado {
        text-align: center !important;

    }

    #jutificado {
        text-align: justify !important;
    }

    .grid-container {
        display: grid;
    }

    .grid-container--fill {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .grid-container--fill--a {
        grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
    }

    .grid-container--fill--buton {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .grid-container--fit {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .grid-container--fill--imagen {
        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
        align-content: center !important;

    }

    .grid-element-buton {
        /*color: #fff;*/
        /*border: 1px solid #fff;*/
        padding: 5px;
    }

    .grid-element-imagen {
        padding: 0px;
    }

    .grid-element {
        /*background-color: #DDDDDD;*/

        /*border: 1px solid #fff;*/

    }


    #row {
        margin: auto;
    }

    .btn-favor {
        background-color: #257025!important;
        color: white;
        font-weight: 800;
    }

    .btn-contra {
        background-color: #BB163F!important;
        color: white;
        font-weight: 800;
    }

    .btn-abs {
        background-color: #E8D231!important;
        color: white;
        font-weight: 800;
    }

    .btn-sr {
        background-color: #DDDDDD!important;
        color: black;
        font-weight: 800;
    }

    body {
        /*font-family: Arial, Helvetica, sans-serif  !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: 2rem!important;
        font-family: "Roboto", sans-serif!important;
        font-weight: 900!important;
        font-style:normal!important;
    }
    #textovoto{
    @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: 2rem!important;
        font-family: "Roboto", sans-serif!important;
        font-weight: 900!important;
        font-style:normal!important;
        text-align: center;
    }

    #tituloVoto{
        font-size: 2rem!important;
        font-family: "Roboto", sans-serif!important;
        font-weight: 900!important;
        font-style:normal!important;
        text-align: justify-all;
    }

    @media screen and (max-width: 768px) and (min-width: 320px) {
        .grid-container--fill--buton {
            grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        }
        body {
            /*font-family: Arial, Helvetica, sans-serif  !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: 2rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
        }
        .grid-container--fill {
            grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        }
        #tituloVoto{
            font-size: 1.5rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: justify-all;
        }
        #textovoto{
        @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: 1.3rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: center;
        }
    }
    @media screen and (max-width: 768px) and (min-width: 320px) and (orientation: portrait) {
        .grid-container--fill--buton {
            grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        }
        body {
            /*font-family: Arial, Helvetica, sans-serif  !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: 2rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
        }
        .grid-container--fill {
            grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        }
        #tituloVoto{
            font-size: 1rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: justify-all;
        }
        #textovoto{
        @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: 1.3rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: center;
        }
    }
    @media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
        .grid-container--fill--buton {
            grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        }
        body {
            /*font-family: Arial, Helvetica, sans-serif  !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: 2rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
        }
        .grid-container--fill {
            grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        }
        #tituloVoto{
            font-size: 2rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: justify-all;
        }
        #textovoto{
        @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: 1.7rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: center;
        }
    }
    @media screen and (min-width: 1366px) and (max-width: 1920px) {
        .grid-container--fill--buton {
            grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
        }
        .grid-container--fill {
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        }

        body {
            /*font-family: Arial, Helvetica, sans-serif  !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: 2rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
        }
        #textovoto{
        @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: 1.5rem!important;
            font-family: "Roboto", sans-serif!important;
            font-weight: 900!important;
            font-style:normal!important;
            text-align: center;
        }
    }
    .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;
    }
    html, body {
        height: 100%;
        margin: 0;
    }
    .full-height {
        min-height: 100vh;
    }

    #nada {
        background-color: white;
        min-height: 100vh;
        width: 100%;
    }

    .card-content.modo-blanco {
        background-color: white !important;
    }
</style>

<meta name="csrf-token" content="{{ csrf_token() }}">
@extends('layoutPr')
@section('title')
    SPID
@endsection
@section('content')
    <div class="container">
        <div class="section">
            <div class="card">
{{--                <div class="card-content" style='background-image: url("{{asset('spid/images/logo/fondo_pleno.png')}}"); background-repeat: no-repeat; background-size: cover; '>--}}
{{--                <div class="card-content" style='background-color: #0b0b0b ; background-repeat: no-repeat; background-size: cover; padding: 12px 12px!important; '>--}}
                <div class="card-content full-height" style="background-color: #0b0b0b;">

                    <div class="container">
                        <div class="height-30vh">
                            <center>
    {{--                            <img src="{{asset('spid/images/logo/congreso.svg')}}" alt="materialize"/>--}}
                                <img src="{{asset('spid/images/logo/congreso_blanco.png')}}"
    {{--                                 srcset="{{asset('spid/images/logo/congreso.svg')}} 480w, {{asset('spid/images/logo/congreso.svg')}} 768w, {{asset('spid/images/logo/congreso.svg')}} 1024w"--}}
    {{--                                 sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 50vw"--}}
                                     alt="Imagen ajustada"
                                     style="width:426px; height:auto;">
                            </center><br><br>
                        </div>
                        <div id="votos"  style="display: none;">
                            <div class="row justify-content-md-center" id="justificado">
                                <div class="col s12">
                                    <div id ="tituloVoto" style="color: white !important; font-weight: 800 !important; ">
                                        VOTO: @if(count($votacion)) {{$votacion[0]->temaVoto->votacion}} @endif
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div id ="totalesVotos" class="row" >
                                <div class="row">
                                    <div class="grid-container grid-container--fill">
                                        {{--                                    <div id ="textovoto" class="grid-element" id="centrado" style="color: #000000 !important; font-weight: 800; ">--}}
                                        {{--                                        TIEMPO: <div id="countdown"></div>--}}
                                        {{--                                       --}}
                                        {{--                                    </div>--}}
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: #257025 !important; font-weight: 800 !important; "  >
                                            <input type='hidden' name='tiempo' id='tiempo'>
                                            {{--                                    FAVOR <br><span id="consenso1">{{$favor}}</span>--}}
                                            <span style="display: inline-block; width: 22px; height: 22px; background-color:#4CAF50; border-radius: 90%; margin-right: 5px;"></span>
                                            <span style="color: white; font-size: 32px; line-height: 1;" >FAVOR: {{$favor}} </span>
                                        </div>
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: #BB163F !important; font-weight: 800; ">
                                            {{--                                    CONTRA <br><span id="disenso1">{{$contra}}</span>--}}
                                            <span style="display: inline-block; width: 22px; height: 22px; background-color:#DC3545; border-radius: 90%; margin-right: 5px;"></span>
                                            <span style="color: white; font-size: 32px; line-height: 1;" >CONTRA: {{$contra}}</span>
                                        </div>
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: #E8D231 !important; font-weight: 800; ">
                                            {{--                                    ABSTENCIÓN<br> <span id="abstencion1">{{$abstencion}}</span>--}}
                                            <span style="display: inline-block; width: 22px; height: 22px; background-color:#e9af00; border-radius: 90%; margin-right: 5px;"></span>
                                            <span style="color: white;font-size: 32px; line-height: 1; text-stroke: 1px red!important;" >ABSTENCIÓN: {{$abstencion}} </span>
                                        </div>
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: #000000 !important; font-weight: 800; ">
                                            {{--                                    TOTAL<br> <span id="totalv1">{{$totalVotos}}</span>--}}
                                            <span style="font-size: 32px;color: white; line-height: 1;" >TOTAL: {{$totalVotos}} </span>
                                        </div>
                                    </div>
                                </div>
                                <div  id="barraVotos">
                                    <div class="grid-container grid-container--fill--buton">
                                        <div class="grid-element-buton" id="centrado">
                                            <button type="button" class="btn btn-favor" onclick="favor();">Favor</button>
                                        </div>
                                        <div class="grid-element-buton" id="centrado">
                                            <button type="button" class="btn btn-contra"  onclick="contra();">Contra</button>
                                        </div>
                                        <div class="grid-element-buton" id="centrado">
                                            <button type="button" class="btn btn-abs" onclick="abstencion();">Abst.</button>
                                        </div>
                                        <div class="grid-element-buton" id="centrado">
                                            <button type="button" class="btn btn-sr" onclick="sinRegistro();">S/R</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="aistencia" style="display: none; height: 300px!important;">
                            <br>
                            <div class="row">
                                <div class="grid-container grid-container--fill--a">
                                    <div id ="textovoto" class="grid-element" id="centrado" style="color: #000000 !important; font-weight: 800; ">
                                        {{--                                        TIEMPO: <div id="countdownA"></div>--}}
                                        {{--                                        <input type='hidden' name='tiempoA' id='tiempoA' value='@if(count($asistencias)){{$asistencias[0]->tiempoVotacion}}@endif'>--}}
                                        <input type='hidden' name='tiempoA' id='tiempoA'>
                                    </div>
                                    <div id ="textovoto" class="grid-element" id="centrado" style="color: white!important; font-weight: 800 !important; ">
                                        TOTAL ASISTENCIAS <br><span id="totalAsistencias23">{{$totalAsistencias}}</span>
                                    </div>
                                    <div id ="textovoto" class="grid-element" id="centrado" style="color: white!important; font-weight: 800; ">
                                        {{--                                        CONTRA <br><span id="disenso1">{{$contra}}</span>--}}
                                        <div id="barraAsistencia">
                                            <a onclick="asistencia();" class='btn' style="background-color: #4CAF50; text-align: left"><strong>ASISTENCIA </strong></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="nada" style="display: none;">
                                <div class="grid-container grid-container--fill--imagen">
                                    <div class="grid-element-imagen" id="centrado">
                                        <a href="{{route('getActasPleno')}}">
                                            {{--                                    <img src="{{asset('spid/images/logo/acta_2.png')}}" alt="materialize" />--}}
                                            <img src="{{asset('spid/images/logo/acta_2.png')}}"
                                                 srcset="{{asset('spid/images/logo/CACTA.png')}} 480w, {{asset('spid/images/logo/acta_2.png')}} 768w, {{asset('spid/images/logo/acta_2.png')}} 1024w"
                                                 sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                                 alt="Imagen ajustada">
                                        </a>
                                    </div>
                                    <div class="grid-element-imagen" id="centrado">
                                        <a href="{{route('getAsuntosPleno')}}">
                                            {{--                                    <img src="{{asset('spid/images/logo/asuntos_orden_2.png')}}" alt="materialize"/>--}}
                                            <img src="{{asset('spid/images/logo/asuntos_orden_2.png')}}"
                                                 srcset="{{asset('spid/images/logo/CASUNTOS.png')}} 480w, {{asset('spid/images/logo/asuntos_orden_2.png')}} 768w, {{asset('spid/images/logo/asuntos_orden_2.png')}} 1024w"
                                                 sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                                 alt="Imagen ajustada">
                                        </a>
                                    </div>
                                    <div class="grid-element-imagen" id="centrado">
                                        <a href="{{route('getOrdenPleno')}}">
                                            {{--                                    <img src="{{asset('spid/images/logo/orden_2.png')}}" alt="materialize"/>--}}
                                            <img src="{{asset('spid/images/logo/orden_2.png')}}"
                                                 srcset="{{asset('spid/images/logo/CORDEN.png')}} 480w, {{asset('spid/images/logo/orden_2.png')}} 768w, {{asset('spid/images/logo/orden_2.png')}} 1024w"
                                                 sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                                 alt="Imagen ajustada">
                                        </a>
                                    </div>
                                    <div class="grid-element-imagen" id="centrado">
                                        <a href="{{route('getMarco')}}">
                                            {{--                                    <img src="{{asset('spid/images/logo/marco_2.png')}}" alt="materialize"/>--}}
                                            <img src="{{asset('spid/images/logo/marco_2.png')}}"
                                                 srcset="{{asset('spid/images/logo/CMARCO.png')}} 480w, {{asset('spid/images/logo/marco_2.png')}} 768w, {{asset('spid/images/logo/marco_2.png')}} 1024w"
                                                 sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                                 alt="Imagen ajustada">
                                        </a>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col s10" ></div>
                                    <div class="col s2">
                                        <img src="{{asset('spid/images/logo/spid.png')}}"
                                             srcset="{{asset('spid/images/logo/spid.png')}} 480w, {{asset('spid/images/logo/spid.png')}} 768w, {{asset('spid/images/logo/spid.png')}} 1024w"
                                             sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 50vw"
                                             alt="Imagen ajustada">
                                    </div>
                                </div>
                            </div>
                        <div class="row">
                                <div class="col s12">
                                    <center>
                                        <select class ="form-control browser-default" id="readersDropDown" name="readersDropDown" style="display: none;">
                                        </select><br>
                                        <div id="imagediv" style="width: 330px;height: 330px;overflow: hidden;border: 1px solid rgba(51, 122, 183, 0.39); display: none;"></div>
                                        <div id="content-capture" style="display : none;"></div>
                                        <input type="hidden" id="tipoBoton" name="tipoBoton">
                                    </center>
                                </div>
                            </div>
                            <div id="loadingBack">
                                <p><img src="{{asset('spid/images/logo/logo_62.png')}}" /></p>
                                <div class="preloader-wrapper big active">
                                    <div class="spinner-layer spinner-red-only">
                                        <div class="circle-clipper left">
                                            <div class="circle"></div>
                                        </div><div class="gap-patch">
                                            <div class="circle"></div>
                                        </div><div class="circle-clipper right">
                                            <div class="circle"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="aistencia" style="display: none;">
                            <br>
                                <div class="row">
                                    <div class="grid-container grid-container--fill--a">
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: #000000 !important; font-weight: 800; ">
    {{--                                        TIEMPO: <div id="countdownA"></div>--}}
    {{--                                        <input type='hidden' name='tiempoA' id='tiempoA' value='@if(count($asistencias)){{$asistencias[0]->tiempoVotacion}}@endif'>--}}
                                            <input type='hidden' name='tiempoA' id='tiempoA'>
                                        </div>
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color:red!important; font-weight: 800 !important; ">
                                            TOTAL ASISTENCIAS <br><span id="totalAsistencias23">{{$totalAsistencias}}</span>
                                        </div>
                                        <div id ="textovoto" class="grid-element" id="centrado" style="color: white!important; font-weight: 800; ">
    {{--                                        CONTRA <br><span id="disenso1">{{$contra}}</span>--}}
                                            <div id="barraAsistencia">
                                                <a onclick="asistencia();" class='btn' style="background-color: #4CAF50; text-align: left"><strong>ASISTENCIA </strong></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div id="nada" style="display: none;">
                        <div class="grid-container grid-container--fill--imagen">
                            <div class="grid-element-imagen" id="centrado">
{{--                                <a href="{{route('getActasPleno')}}">--}}
                                <a href="">
{{--                                    <img src="{{asset('spid/images/logo/acta_2.png')}}" alt="materialize" />--}}
                                    <img src="{{asset('spid/images/logo/acta_2.png')}}"
                                         srcset="{{asset('spid/images/logo/CACTA.png')}} 480w, {{asset('spid/images/logo/acta_2.png')}} 768w, {{asset('spid/images/logo/acta_2.png')}} 1024w"
                                         sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                         alt="Imagen ajustada">
                                </a>
                            </div>
                            <div class="grid-element-imagen" id="centrado">
{{--                                <a href="{{route('getAsuntosPleno')}}">--}}
                                <a href="">
{{--                                    <img src="{{asset('spid/images/logo/asuntos_orden_2.png')}}" alt="materialize"/>--}}
                                    <img src="{{asset('spid/images/logo/asuntos_orden_2.png')}}"
                                         srcset="{{asset('spid/images/logo/CASUNTOS.png')}} 480w, {{asset('spid/images/logo/asuntos_orden_2.png')}} 768w, {{asset('spid/images/logo/asuntos_orden_2.png')}} 1024w"
                                         sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                         alt="Imagen ajustada">
                                </a>
                            </div>
                            <div class="grid-element-imagen" id="centrado">
{{--                                <a href="{{route('getOrdenPleno')}}">--}}
                                <a href="">
{{--                                    <img src="{{asset('spid/images/logo/orden_2.png')}}" alt="materialize"/>--}}
                                    <img src="{{asset('spid/images/logo/orden_2.png')}}"
                                         srcset="{{asset('spid/images/logo/CORDEN.png')}} 480w, {{asset('spid/images/logo/orden_2.png')}} 768w, {{asset('spid/images/logo/orden_2.png')}} 1024w"
                                         sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                         alt="Imagen ajustada">
                                </a>
                            </div>
                            <div class="grid-element-imagen" id="centrado">
{{--                                <a href="{{route('getMarco')}}">--}}
                                <a href="">
{{--                                    <img src="{{asset('spid/images/logo/marco_2.png')}}" alt="materialize"/>--}}
                                    <img src="{{asset('spid/images/logo/marco_2.png')}}"
                                         srcset="{{asset('spid/images/logo/CMARCO.png')}} 480w, {{asset('spid/images/logo/marco_2.png')}} 768w, {{asset('spid/images/logo/marco_2.png')}} 1024w"
                                         sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 80vw"
                                         alt="Imagen ajustada">
                                </a>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s10" ></div>
                            <div class="col s2">
                                <img src="{{asset('spid/images/logo/spid.png')}}"
                                     srcset="{{asset('spid/images/logo/spid.png')}} 480w, {{asset('spid/images/logo/spid.png')}} 768w, {{asset('spid/images/logo/spid.png')}} 1024w"
                                     sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 50vw"
                                     alt="Imagen ajustada">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <center>
                                <select class ="form-control browser-default" id="readersDropDown" name="readersDropDown" style="display: none;">
                                </select><br>
                                <div id="imagediv" style="width: 330px;height: 330px;overflow: hidden;border: 1px solid rgba(51, 122, 183, 0.39); display: none;"></div>
                                <div id="content-capture" style="display : none;"></div>
                                <input type="hidden" id="tipoBoton" name="tipoBoton">
                            </center>
                        </div>
                    </div>
                    <div id="loadingBack">
                        <p><img src="{{asset('spid/images/logo/logo_62.png')}}" /></p>
                        <div class="preloader-wrapper big active">
                            <div class="spinner-layer spinner-red-only">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div><div class="gap-patch">
                                    <div class="circle"></div>
                                </div><div class="circle-clipper right">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script src="{{'spid/js/scripts/fingerprint.sdk.min.js'}}"></script>
    <script src="{{'spid/js/scripts/es6-shim.js'}}"></script>
    <script src="{{'spid/js/scripts/websdk.client.bundle.min.js'}}"></script>

    <script type="text/javascript">
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;



        $(document).ready(function() {
            function validaEventos() {
                $.ajax({
                    type: 'GET',
                    data: {},
                    url: "{{ url('validaEventosPleno') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        if (json[0].evento == '0') {
                            window.location.href = window.location.origin + '/sistemaVotos';
                        } else {
                            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.querySelector(".card-content").classList.add("modo-blanco");
                            } 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.querySelector(".card-content").classList.remove("modo-blanco");
                                // actualizaAs();
                                actasistot();
                            } 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.querySelector(".card-content").classList.remove("modo-blanco");

                                actualizaTotalesVotos();
                                // actualizaListaVotacion();
                            }
                        }
                    }, error: function (xhr, status, error) {
                    }
                });
            }setInterval(validaEventos,3000);
        });

            function actasistot(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('totalAsisPleno') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        document.getElementById("totalAsistencias23").innerHTML= '';
                        $('#tiempoA').val('');

                        document.getElementById("totalAsistencias23").innerHTML= json[0].asistenciast;
                        $('#tiempoA').val(json[0].tiempo);
                        showRemaining();
                    },error: function(xhr, status, error) {
                    }
                });
            }


            function actualizaTotalesVotos(){
                $.ajax({
                    type: 'GET',
                    data :{},
                    url :   "{{ url('totalVotosPleno') }}",
                    success: function (response) {
                        var json = $.parseJSON(response);
                        document.getElementById("consenso1").innerHTML= '';
                        document.getElementById("disenso1").innerHTML= '';
                        document.getElementById("abstencion1").innerHTML= '';
                        document.getElementById("totalv1").innerHTML= '';
                        $('#tiempo').val('');


                        document.getElementById("consenso1").innerHTML=json[0].votacionFavor;
                        document.getElementById("disenso1").innerHTML=json[0].votacionContra ;
                        document.getElementById("abstencion1").innerHTML=json[0].votacionAbsten;
                        document.getElementById("totalv1").innerHTML=json[0].totalVotos;
                        $('#tiempo').val(json[0].tiempo);
                        showRemainingV
                    },error: function(xhr, status, error) {
                    }
                });
            }

        function favor(){
            $("#tipoBoton").val('favor');
            activarSensor();
            swal({
                title: "¡Atención!",
                text: "Escanear huella",
                icon: 'warning',
                dangerMode: false,
                buttons: false,
                timer:1000,
            });
        }

        function contra(){
            $("#tipoBoton").val('contra');
            activarSensor();
            swal({
                title: "¡Atención!",
                text: "Escanear huella",
                icon: 'warning',
                dangerMode: false,
                buttons: false,
                timer:1000,
            });
        }

        function abstencion(){
            $("#tipoBoton").val('abstencion');
            activarSensor();
            swal({
                title: "¡Atención!",
                text: "Escanear huella",
                icon: 'warning',
                dangerMode: false,
                buttons: false,
                timer:1000,
            });
        }

        function sinRegistro(){
            $("#tipoBoton").val('sinregistro');
            activarSensor();
            swal({
                title: "¡Atención!",
                text: "Escanear huella",
                icon: 'warning',
                dangerMode: false,
                buttons: false,
                timer:1000,
            });
        }

        function asistencia(){
            $("#tipoBoton").val('asistencia');
            activarSensor();
            swal({
                title: "¡Atención!",
                text: "Escanear huella",
                icon: 'warning',
                dangerMode: false,
                buttons: false,
                timer:1000,
            });
        }

        $(document).ready(function() {
            showRemainingV();
            showRemaining();
        });


            function showRemainingV() {
                var end1 = document.getElementById('tiempo').value;
                if (end1){
                    var end = new Date(end1);
                    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 = '00:00';
                        return;
                    }else{
                        document.getElementById("barraVotos").style = "display: block";
                    }
                    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 + ':' + seconds;
                }
            }timer = setInterval(showRemainingV, 1000);

            function showRemaining() {
                var endA = document.getElementById('tiempoA').value;
                var endA = new Date(endA);
                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';
                    document.getElementById('barraAsistencia').style.display="none";
                    return;
                } else if (distance == "NaN") {
                    clearInterval(timer);
                    // document.getElementById('countdownA').innerHTML = '00:00';
                    return;
                }else{
                    document.getElementById('barraAsistencia').style.display="block";
                }

                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, 900);


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        var test = null;

        var state = document.getElementById('content-capture');
        var myVal = ""; // Drop down selected value of reader
        var disabled = true;
        var startEnroll = false;

        var currentFormat = Fingerprint.SampleFormat.PngImage;
        var deviceTechn = {
            0: "Unknown",
            1: "Optical",
            2: "Capacitive",
            3: "Thermal",
            4: "Pressure"
        }

        var deviceModality = {
            0: "Unknown",
            1: "Swipe",
            2: "Area",
            3: "AreaMultifinger"
        }

        var deviceUidType = {
            0: "Persistent",
            1: "Volatile"
        }


        var FingerprintSdkTest = (function () {
            function FingerprintSdkTest() {
                var _instance = this;
                this.operationToRestart = null;
                this.acquisitionStarted = false;
                this.sdk = new Fingerprint.WebApi;


                this.sdk.onDeviceConnected = function (e) {
                    console.log('Escanear huella');
                };
                this.sdk.onDeviceDisconnected = function (e) {
                    console.log('Lector desconectaado');
                };
                this.sdk.onCommunicationFailed = function (e) {
                    console.log('Fallo la cominicación');
                };
                this.sdk.onSamplesAcquired = function (s) {
                    // Sample acquired event triggers this function
                    sampleAcquired(s);
                };
                this.sdk.onQualityReported = function (e) {
                    // Quality of sample aquired - Function triggered on every sample acquired
                    // document.getElementById("qualityInputBox").value = Fingerprint.QualityCode[(e.quality)];
                }

            }

            FingerprintSdkTest.prototype.startCapture = function () {
                if (this.acquisitionStarted) // Monitoring if already started capturing
                    return;
                var _instance = this;
                showMessage("");
                this.operationToRestart = this.startCapture;
                this.sdk.startAcquisition(currentFormat, myVal).then(function () {
                    _instance.acquisitionStarted = true;
                }, function (error) {
                    showMessage(error.message);
                });

            }

            FingerprintSdkTest.prototype.stopCapture = function () {
                if (!this.acquisitionStarted) //Monitor if already stopped capturing
                    return;
                var _instance = this;
                showMessage("");
                this.sdk.stopAcquisition().then(function () {
                    _instance.acquisitionStarted = false;

                    //Disabling stop once stoped
                    disableEnableStartStop();

                }, function (error) {
                    showMessage(error.message);
                });
            };

            // FingerprintSdkTest.prototype.getInfo = function () {
            FingerprintSdkTest.prototype.getInfo = function () {
                var _instance = this;
                return this.sdk.enumerateDevices();
            };

            FingerprintSdkTest.prototype.getDeviceInfoWithID = function (uid) {
                var _instance = this;
                return  this.sdk.getDeviceInfo(uid);
            };
            return FingerprintSdkTest;
        })();

        $(document).ready(function() {
            localStorage.clear();
            test = new FingerprintSdkTest();
            var allReaders = test.getInfo();
            allReaders.then(function (sucessObj) {
                var readersDropDownElement = document.getElementById("readersDropDown");
                readersDropDownElement.innerHTML ="";
                var option = document.createElement("option");
                option.selected = "selected";
                option.value =  sucessObj[0];
                option.text =  sucessObj[0];
                readersDropDownElement.add(option);
            });
        });

        function activarSensor(){
            var readersDropDownElement = document.getElementById("readersDropDown");
            myVal = readersDropDownElement.options[readersDropDownElement.selectedIndex].value;
            test.startCapture();
        }

        function showMessage(message){
            var _instance = this;
            var statusWindow = document.getElementById("status");
            x = state.querySelectorAll("#status");
            if(x.length != 0){
                x[0].innerHTML = message;
            }
        }

        function sampleAcquired(s){
            localStorage.setItem("imageSrc", "");
            var samples = JSON.parse(s.samples);
            localStorage.setItem("imageSrc", "data:image/png;base64," + Fingerprint.b64UrlTo64(samples[0]));
            if(state == document.getElementById("content-capture")){
                var vDiv = document.getElementById('imagediv');
                vDiv.innerHTML = "";
                var image = document.createElement("img");
                image.id = "image";
                image.className = "img-thumbnail";
                image.src = localStorage.getItem("imageSrc");
                vDiv.appendChild(image);

                let img = localStorage.getItem("imageSrc");

                $.ajax({
                    url: "/comprobarHuellaPleno",
                    type: 'POST',
                    data: {
                        'imagen' : img
                    },
                    beforeSend: function() {
                        showLoading()
                    },
                    success: function (response) {
                        hideLoading()
                        if (response != 0) {
                            var idDip = response;
                            var tipoBoton = $("#tipoBoton").val();
                            $.ajax({
                                url: "{{ url('accionHuella') }}",
                                type: 'GET',
                                data: {
                                    'idDip' : idDip,
                                    'tipoBoton' : tipoBoton,
                                },
                                success: function (response) {
                                    if (response == 1){
                                        swal({
                                            text: "",
                                            text: "Asistecia registrada",
                                            icon: 'success',
                                            dangerMode: false,
                                            buttons: false,
                                            timer:2000,
                                        }).then(function (){
                                            showRemaining();
                                            actasistot();
                                        })
                                    }else if (response == 2){
                                        swal({
                                            text: "",
                                            text: "Voto registrado",
                                            icon: 'success',
                                            dangerMode: false,
                                            buttons: false,
                                            timer:2000,
                                        }).then(function (){
                                            actualizaTotalesVotos();
                                            showRemainingV();
                                        })
                                    }else{
                                        swal({
                                            text: "¡Atención!",
                                            text: "Huella no reconocida, intente nuevamente",
                                            icon: 'warning',
                                            dangerMode: false,
                                            buttons: false,
                                            timer:2000,
                                        });
                                    }
                                }
                            });
                        }else{
                            swal({
                                text: "¡Atención!",
                                text: "Huella no reconocida, intente nuevamente",
                                icon: 'warning',
                                dangerMode: false,
                                buttons: false,
                                timer:2000,
                            });
                        }

                    }
                });
            }
        }

        function showLoading() {
            $("#loadingBack").show();
        }

        function hideLoading() {
            $("#loadingBack").hide();
        }
    </script>
@endpush

OHA YOOOO