
<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="">Tiempo Actual: <span id="marcacion-tiempousuario"></span></h4>                    
                    <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>
                            <div class="panel-body">


                                <div class="col-md-12" title="Marcacion" style="padding-bottom: 30px; padding-top: 20px;">
                                    <?php Vistas::mostrar("asistencia", "btn-sentidos"); ?>                                    
                                </div>

                                <div class="col-md-12" style="text-align: center;">
                                    <div style="text-align: center;">
                                        <div >
                                            <div class="" style="position: relative;display: inline-block;">
                                                <canvas width="320" height="320" id="webcodecam-canvas" style="width: 100%;"></canvas>
                                                <div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
                                                <div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
                                                <div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
                                                <div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
                                            </div>                                            
                                        </div>                                        
                                    </div>

                                </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 (Visitante::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?><?= Visitante::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 (Visitante::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?> readonly=""<?php endif; ?> placeholder="Escribe tu cedula" value="<?= Visitante::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>
                <div id="btn-login"></div>
            </div>
        </div>
    </div>
</form>

<script>
    cargarLogin('btn-login');
</script>

<script type="text/javascript" src="libs/webcodecamjs-master/js/filereader.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/qrcodelib.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/webcodecamjquery.js"></script>
<!--<script type="text/javascript" src="/libs/webcodecamjs-master/js/mainjquery.js"></script>-->
<!--<script type="text/javascript" src="/vistas/asistencia/js/asistenciasqr.js"></script>-->
<script type="text/javascript" >
    var decoder;
    var canvasData;
    var scannedQR = $("#scanned-QR");
    var grabImg = $("#btn-marcacion");
    var scannedImg = $("#scanned-img");
    var scannerLaser = $(".scanner-laser");
    $(document).ready(function () {
        var args = {
            zoom: 3,
            flipHorizontal: true,
            autoBrightnessValue: 100,
            width: 500,
            height: 500,
            resultFunction: function (res) {
                [].forEach.call(scannerLaser, function (el) {
                    $(el).fadeOut(300, function () {
                        $(el).fadeIn(300);
                    });
                });
                procesarResultadoQR(res);
            },
            getDevicesError: function (error) {
                var p, message = "getdDevicerError detected with the following parameters:\n";
                for (p in error) {
                    message += (p + ": " + error[p] + "\n");
                }
                alert(message + error.toLocaleString());
            },
            getUserMediaError: function (error) {
                var p, message = "getUserError detected with the following parameters:\n";
                for (p in error) {
                    message += (p + ": " + error[p] + "\n");
                }
                alert(message + error.toLocaleString());
            },
            cameraError: function (error) {
                var p, message = "CameraError detected with the following parameters:\n";
                if (error.name == "NotSupportedError") {
                    var ans = confirm("Your browser does not support getUserMedia via HTTP!\n(see: https://goo.gl/Y0ZkNV).\n You want to see github demo page in a new window?");
                    if (ans) {
                        window.open("https://andrastoth.github.io/webcodecamjs/");
                    }
                } else {
                    for (p in error) {
                        message += p + ": " + error[p] + "\n";
                    }
                    cargarVista("asistencia", "sinpermisos", 'error=ErrorCamara');
                    //alert(message + error.toLocaleString());
                }
            },
            cameraSuccess: function () {
                grabImg.removeClass("disabled");
            }
        };
        decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;
        decoder.buildSelectMenu("#camera-select", "environment|back").init();

        scannedQR.text("Escaneando ...");
        grabImg.removeClass("disabled");
        decoder.play();

        grabImg.on("click", function () {
            //esperaCapturarImagen();
        });

    });


    var timerCapturar = null;
    function esperaCapturarImagen() {
        decoder.options.zoom = 1;
        clearTimeout(timerCapturar);
        timerCapturar = setTimeout(function () {
            //scannedImg.attr("src", decoder.getLastImageSrc());
            canvasData = decoder.getLastImageSrc();
            decoder.options.zoom = 3;
            ejecutarOperacion(
                    "asistencia", "registroTiempoMarcacion", $("#form-marcacion").serialize() + "&imgData=" + canvasData,
                    function (datos) {
                        alert(datos);
                        datos = JSON.parse(datos);
                        if (datos.RESPUESTA === 'EXITO') {
                            cargarVista('asistencia', 'confirmarMarcacion', 'idAsistencia=' + datos.IDASISTENCIA);
                        } else {
                            alert(datos.MENSAJE);
                        }
                    }
            );
            //guardarImagen();

        }, 300);
    }

    function detenerCamara() {
        decoder = $("#webcodecam-canvas").WebCodeCamJQuery().data().plugin_WebCodeCamJQuery;
        decoder.stop();
    }

    function procesarResultadoQR(res) {
        identificacionColaborador = res.code.replace("https://validar.apps.ccsm.org.co/?colaborador=", "");
        verificaridentificacion(identificacionColaborador, registrarTiempoAsistencia);
        $("#carnet").val("SI");
    }

</script>

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

<script type="text/javascript" >

    var tiempoInactivo = 0;
    var tiempoInactividad = 300;
    var controlRecarga = setInterval(function () {

        ejecutarOperacionOculta( "tienda-apps", "asistencia", "controlTiempoMarcacion", "",
        function (datos) {
                    datos = JSON.parse(datos);
                    $("#marcacion-tiempousuario").html(
                            datos.tiempo.hours + ":" + datos.tiempo.minutes + ":" + datos.tiempo.seconds
                            );
                    $("#tiempo").val(
                            datos.tiempo.hours + ":" + datos.tiempo.minutes + ":" + datos.tiempo.seconds
                            );
                }
        );

        tiempoInactivo++;
//console.log('t:'+tiempoInactivo);
        if (tiempoInactivo === tiempoInactividad) {
            detenerCamara();
            cargarVista("asistencia", "inactividad");
        }
    }, 1000);

    $(document).mousemove(function (event) {
        pararRecarga();
    }).keydown(function (event) {
        pararRecarga();
    });

    $("#identificacion").keyup(function () {
        $("#carnet").val("NO");
        esperaEnviarIdentificacion(identificacion.value);
    });

    var timerVerificar = null;
    function esperaEnviarIdentificacion(identificacionColaborador) {
        clearTimeout(timerVerificar);
        timerVerificar = setTimeout(function () {
            verificaridentificacion(identificacionColaborador, null);
        }, 1000);
    }

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

    function verificaridentificacion(identificacionColaborador, functionRegistrar) {
        //var identificacionColaborador = $("#identificacion").val();
        ejecutarOperacionOculta(
                "asistencia", "datosColaborador", "identificacion=" + identificacionColaborador,
                function (datos) {
                    console.log(datos);
                    datos = JSON.parse(datos);
                    if (datos.Colaborador !== null) {
                        $("#nombre").val(datos.Colaborador.personaNOMBRES + " " + datos.Colaborador.personaAPELLIDOS);
                        $("#identificacion").val(datos.Colaborador.personaIDENTIFICACION);

                        if (functionRegistrar !== null) {
                            functionRegistrar(datos);
                        }

                    } else {
                        $("#nombre").val("Verifique la cedula. No se ha podido identificar al colaborador.");
                    }
                }
        );
    }

    /**
     * Registra el tiempo de la marcacion
     */
    function registrarTiempoAsistencia() {
        $("#btn-marcacion").click();
    }


</script>

