<link href="libs/webcodecamjs-master/css/style.css" rel="stylesheet">
<form id="form-marcacion" class="list " onsubmit="return false;">
<div class="container">
    <div class="row ">
        <div class="col-lg-6 col-lg-offset-3 col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1 col-xs-12">
            <div class="spacer" style="width: 100%; height: 60px;"></div>
            <div style="width: 100%;margin: auto;">
                <h1 style="text-align: center;font-weight: bold;">CONTROL DE ASISTENCIA</h1>
                <h4 style="text-align: center;" class="pulse animated infinite">Tiempo Actual: <span id="marcacion-tiempousuario"></span></h4>                    
                <script type="text/javascript">
                    var tiempoArranque = new Date();
                    function definirRelojAsistencia(divMuestra){
                        ejecutarOperacionOculta( "sistema", "sicam", "fechaSistema", "",
                                function (respuesta) {
                                    var momentoActual = new Date();
                                    tiempoArranque =  new Date(
                                        momentoActual.getFullYear(), momentoActual.getMonth(), momentoActual.getDate(), 
                                        respuesta.tiempo.hours, respuesta.tiempo.minutes, respuesta.tiempo.seconds 
                                    );
                                    arrancarReloj(divMuestra, tiempoArranque);
                                }
                        );
                    }
                    function arrancarReloj(divMuestra, tiempoArranque){
                        setInterval(function(){
                            var tiempoMarcadoMsec = tiempoArranque.getTime();
                            tiempoArranque.setTime( (tiempoMarcadoMsec+1000) );
                            $("#"+divMuestra).html(
                                tiempoArranque.getHours() + ":" + tiempoArranque.getMinutes() + ":" +  tiempoArranque.getSeconds() 
                            );
                        },1000);
                    }
                </script>
                <div id="QR-Code" class="container" style=" width:auto;">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="botones hidden">
                                <button id="play" data-toggle="tooltip" title="Scannear" type="button" class="btn btn-success btn-sm">
                                    <ul class="bars"><li></li><li></li><li></li><li></li></ul><div class="scannericon"></div></button>
                                <select class="form-control hidden" id="camera-select"></select>
                            </div>       
                            <div id="btn-login"></div>
                        </div>
                        <div class="panel-body">
                            <div class="col-md-12" title="Marcacion" style="padding-bottom: 30px; padding-top: 20px;">
                                <?php Vistas::mostrarApps("asistencia", "btn-sentidos"); ?>                                    
                            </div>
                            <div class="col-md-12" style="text-align: center;">
                                <?php Vistas::mostrarApps("asistencia", "qr-webcam"); ?>  
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-6" style="text-align: center;">    
                                    <h5>Nombre:</h5>
                                    <input type="text" class="form-control" id="nombre" style="text-align: center;" name="nombre" disabled="" readonly="" placeholder="Identificando al colaborador..." 
                                    value="<?php if (Cliente::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?><?= Cliente::nombre(); ?><?php endif; ?>">
                                </div>
                                <div class="col-md-6" style="text-align: center;">    
                                    <h5>Cédula:</h5>
                                    <input type="number" class="form-control"  id="identificacion" style="text-align: center;" name="num_cedula" <?php if (Cliente::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?> readonly=""<?php endif; ?> placeholder="Escribe tu cedula" 
                                    value="<?= Cliente::cedula(); ?>" required="">
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="text-align: center;" id="marcacion-list-item-container3">
                            <button  id="btn-marcacion" type="submit" class="btn btn-primary">Aceptar</button>
                            <p>Solo es necesario presionar el botón una sola vez, y esperar a que el sistema responda; Si no sucede nada luego de presionar el botón, debe reportarlo a <a href="mailto:soporte.tics@ccsm.org.co">soporte.tics@ccsm.org.co</a>.</p>
             
                        </div>
                        <input type="hidden" id="carnet" name="carnet" value="NO"/>
                        <input type="hidden" id="tiempo" name="tiempo"/>
                        <input type="hidden" id="longitud" name="longitud"  />
                        <input type="hidden" id="latitud" name="latitud"  />
                    </div>
                </div>
            </div>
            <div class="spacer" style="width: 100%; height: 60px;">                    
            </div>
            <script> cargarLogin('btn-login'); </script>
        </div>
    </div>
</div>
</form>

<script type="text/javascript" src="vistas/asistencia/js/Geolocalizacion.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
    localize();
    definirRelojAsistencia("marcacion-tiempousuario");
    $("#form-marcacion").submit(function (evt) {
        esperaCapturarImagen();
        evt.preventDefault();
    });
});
function registrarTiempoAsistencia() {
    $("#btn-marcacion").click();
}



</script>
<script type="text/javascript" >
var tiempoInactivo = 0;
var tiempoInactividad = 300;
var controlRecarga = setInterval(function () {
    tiempoInactivo++;
    if (tiempoInactivo === tiempoInactividad) {
        detenerCamara();
        cargarVistaApps("asistencia", "inactividad");
    }
}, 1000);
$(document).mousemove(function (event) {
    pararRecarga();
}).keydown(function (event) {
    pararRecarga();
});
$("#identificacion").keyup(function () {
    $("#carnet").val("NO");
    esperaEnviarIdentificacion(identificacion.value);
});


function pararRecarga() {
    //console.log('parar');
    //clearTimeout(controlRecarga);
    tiempoInactivo = 0;
}

var timerVerificar = null;
function esperaEnviarIdentificacion(identificacionColaborador) {
    clearTimeout(timerVerificar);
    timerVerificar = setTimeout(function () {
        verificarIdentificacionColaborador(identificacionColaborador, verificarCedulaAsistencia);
    }, 1000);
}
function verificarCedulaAsistencia(datosColaborador) {
    if (datosColaborador !== null) {
        datosColaborador = datosColaborador.Colaborador;
        $("#nombre").val(datosColaborador.personaNOMBRES + " " + datosColaborador.personaAPELLIDOS);
        $("#identificacion").val(datosColaborador.personaIDENTIFICACION);
        registrarTiempoAsistencia();
    } else {
        $("#nombre").val("Verifique la cedula. No se ha podido identificar al colaborador.");
    }
}
</script>