<?php
global $Visitante;
$ipValidas = array(
    '186.1.183.226',
    '186.1.183.227',
    '186.1.183.228',
    '186.1.183.229',
    '190.90.87.114',
    '190.90.87.66',
    '190.90.87.90',
);
?>

<style type="text/css">
    .scanner-laser{
        position: absolute;
        margin: 40px;
        height: 30px;
        width: 30px;
    }
    .laser-leftTop{
        top: 0;
        left: 0;
        border-top: solid red 5px;
        border-left: solid red 5px; 
    }
    .laser-leftBottom{
        bottom: 0;
        left: 0;
        border-bottom: solid red 5px;
        border-left: solid red 5px; 
    }
    .laser-rightTop{
        top: 0;
        right: 0;
        border-top: solid red 5px;
        border-right: solid red 5px;    
    }
    .laser-rightBottom{
        bottom: 0;
        right: 0;
        border-bottom: solid red 5px;
        border-right: solid red 5px;    
    }
</style>



<form id="marcacion-form1" 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: 987px; height: 60px;"></div>
                <div style="width: 100%;margin: auto;">
                    <div>
                        <h1 id="marcacion-heading1" style="color:#000000;text-align:center; font-weight: bold;" class=" ">CONTROL DE ASISTENCIA</h1>
                        <h4 style="color:#000000;text-align:center;" class=" ">Tiempo Actual: <span id="marcacion-tiempousuario" ></span></h4>
                        <h5 style="color:#000000;text-align:center;" class=" ">Marcando desde <span id="marcacion-ipusuario" ></span></h5>
                    </div>
                    <div id="QR-Code" class="container" style=" width:auto;">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <div class="botones">
                                    <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>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div class="col-md-12" style="border-top: 1px solid #337ab7; border-right: 1px solid #337ab7; border-bottom: 1px solid #337ab7; border-left: 1px solid #337ab7; text-align: center;">

                                    <div style="position: relative;display: inline-block;">
                                        <canvas id="qr-canvas" width="320" height="240"></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 class="col-md-12" style="text-align: center;">
                                    <h5 >Resultado del Scanner</h5>
                                    <p id="scanned-QR" style="color: #337ab7;"></p>
                                </div>
                                <div class="col-md-12" title="Marcacion" style="padding-bottom: 30px; padding-top: 20px;">
                                    <div class="col-sm-6" style="text-align: center;">
                                        <input type="radio" name="sentido" value="ENTRADA">Entrar
                                    </div>
                                    <div class="col-sm-6" style="text-align: center;">
                                        <input type="radio" name="sentido" value="SALIDA">Salir
                                    </div>
                                </div>
                                <?php foreach ($usuario as $user): ?>
                                <?php endforeach; ?>
                                <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="" value="<?=
                                        Visitante::nombre();
                                        echo($usuario->personaNOMBRES);
                                        echo" ";
                                        echo($usuario->personaAPELLIDOS);
                                        ?>">
                                    </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();
                                        echo $usuario->personaIDENTIFICACION;
                                        ?>">
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer" style="text-align: center;" id="marcacion-list-item-container3">
                                <button  id="marcacion-button1" 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 jpllinas@ccsm.org.co.</p>
                            </div>
                            <input type="hidden" id="latitud" name="latitud"  />
                            <input type="hidden" id="longitud" name="longitud"  />
                            <input type="hidden" id="foto" name="foto" />
                            <div style="text-align: center;display: none">
                                <canvas id="canvas" width="320" height="240"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript" src="vistas/asistencia/js/qrcodelib.js"></script>
<script type="text/javascript" src="vistas/asistencia/js/WebCodeCam.js"></script>

<script type="text/javascript">

    var decoder = $('#qr-canvas'),
            sl = $('.scanner-laser'),
            pl = $('#play'),
            si = $('#scanned-img'),
            sQ = $('#scanned-QR'),
            sv = $('#save'),
            sp = $('#stop'),
            spAll = $('#stopAll'),
            co = $('#contrast'),
            cov = $('#contrast-value'),
            zo = $('#zoom'),
            zov = $('#zoom-value'),
            br = $('#brightness'),
            brv = $('#brightness-value'),
            tr = $('#threshold'),
            trv = $('#threshold-value'),
            sh = $('#sharpness'),
            shv = $('#sharpness-value'),
            gr = $('#grayscale'),
            grv = $('#grayscale-value');

    //  defalut-settings
    $('#qr-canvas').WebCodeCam({
        ReadQRCode: true, // false or true
        ReadBarecode: true, // false or true
        width: 320,
        height: 240,
        videoSource: {
            id: true, //default Videosource
            maxWidth: 640, //max Videosource resolution width
            maxHeight: 480 //max Videosource resolution height
        },
        beep: "libs/media/beep.mp3", // string, audio file location
        resultFunction: function (text, imgSrc) {
            alert(text);
            alert(imgSrc);
//            si.attr('src', imgSrc);
//            sQ.text(text);
//            alert('Codigo Escaneado');
//            ejecutarOperacion(
//                    "asistencia",
//                    "verificarColaborador",
//                    "identificacion=" + text,
//                    function (datos) {
//                        alert(datos)
//                    }
//            );
        },
        getUserMediaError: function () {
            alert('Sorry, the browser you are using doesn\'t support getUserMedia');
        },
        cameraError: function (error) {
            var p, message = 'Error detected with the following parameters:\n';
            for (p in error) {
                message += p + ': ' + error[p] + '\n';
            }
            alert(message);
        }
    });
</script>

<script type="text/javascript" >

    var tiempoInactivo = 0;
    var tiempoInactividad = 300;

    ejecutarOperacionOculta("asistencia", "controlIpMarcacion", "",
            function (datos) {
                datos = JSON.parse(datos);
                $("#marcacion-ipusuario").html(datos.ipVisitante);
            }
    );

    var controlRecarga = setInterval(function () {

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

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

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

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

