<link href="libs/webcodecamjs-master/css/style.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Verificación de Colaborador
                </h3>
            </div>
            <div class="panel-body">
                <div class="col-md-12" style="text-align: center;  display: none;" id="scanner">
                    <div id="espacio"></div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-6">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="cedulaEmpleado">Identificación Colaborador:</label>
                            <div class="input-group">
                                <input type="number" class="form-control cedulaEmpleado" name="cedulaEmpleado" id="cedulaEmpleado" placeholder="Identifiación" style="height: 35px !important;">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="btnCedulaEmpleado" type="button" style="height: 35px !important;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                                </span>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="btnEscanear" type="button" style="height: 35px !important;"><span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span></button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="nombreEmpleado">Nombre Colaborador:</label>
                            <input type="text" class="form-control datosColaborador" id="nombreEmpleado" name="nombreEmpleado" placeholder="Nombre del Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div>  
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="tipoEmpleado">Tipo de Colaborador:</label>
                            <input type="text" class="form-control datosColaborador" id="tipoEmpleado" name="tipoEmpleado" placeholder="Tipo de Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div> 
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="correoEmpleado">Correo Colaborador:</label>
                            <input type="email" class="form-control datosColaborador" id="correoEmpleado" name="correoEmpleado" placeholder="Correo del Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div> 
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="celularEmpleado">Celular Colaborador:</label>
                            <input type="number" class="form-control datosColaborador" id="celularEmpleado" name="celularEmpleado" placeholder="Celular del Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div> 
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="estadoEmpleado">Estado Colaborador:</label>
                            <input type="text" class="form-control datosColaborador" id="estadoEmpleado" name="estadoEmpleado" placeholder="Estado del Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div> 
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="cargoEmpleado">Cargo:</label>
                            <input type="text" class="form-control datosColaborador" id="cargoEmpleado" name="cargoEmpleado" placeholder="Cargo del Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="unidadEmpleado">Dirección / División:</label>
                            <input type="text" class="form-control datosColaborador" id="unidadEmpleado" name="unidadEmpleado" 
                                   placeholder="División Colaborador" disabled style="height: 35px !important;">
                        </div>
                    </div>
                </div>
                <div  class="col-xs-12 col-sm-8 col-md-6">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="jefenombreEmpleado">Jefe Inmediato del Colaborador:</label>
                            <input type="text" class="form-control datosColaborador" id="jefenombreEmpleado" name="jefenombreEmpleado" placeholder="Cargo Colaborador" disabled required style="height: 35px !important;">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="jefecoreoEmpleado">Correo del Jefe Inmediato:</label>
                            <input type="text" class="form-control datosColaborador" id="jefecoreoEmpleado" name="jefecoreoEmpleado" placeholder="Cargo Colaborador" disabled required style="height: 35px !important;">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="jefeCelular">Celular Jefe Immediato:</label>
                            <input type="text" class="form-control datosColaborador" id="jefeCelular" name="jefeCelular" 
                                   placeholder="Celular Jefe Immediato" disabled style="height: 35px !important;">
                        </div>
                    </div>
                    <div class="col-md-12" style="text-align: center;">
                        <h2 for="fotoColaborador">Foto del Colaborador:</h2>  
                        <img src="" class="img-thumbnail" id="fotoColaborador" name="fotoColaborador" alt="Foto Colaborador" width="200" height="200"> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--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 () {
       
    });

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

</script-->

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

<script type="text/javascript" >

    $("#btnCedulaEmpleado").click(function () {
        verificarIdentificacionColaborador($("#cedulaEmpleado").val(), actualizarDatosColaborador);
    });
    
    
    $("#btnEscanear").click(function () {
        if( $('#scanner').is(":visible") ){
            $('#scanner').hide();
            detenerCamara();
        }else{
            $('#scanner').show();
            cargarDivision("espacio", "tienda-apps", "validarColaborador", "webcam");
        }
       
    });

    function actualizarDatosColaborador(datos) {
        if (datos!=null) {
            var Colaborador = datos.Colaborador;
            $("#cedulaEmpleado").val(Colaborador.personaIDENTIFICACION);
            $("#nombreEmpleado").val(Colaborador.personaNOMBRES + " " + Colaborador.personaAPELLIDOS);
            $("#tipoEmpleado").val(Colaborador.tipoColaboradorTITULO);
            $("#correoEmpleado").val(Colaborador.colaboradorEMAIL);
            $("#celularEmpleado").val(Colaborador.colaboradorCELULAR);
            $("#estadoEmpleado").val(Colaborador.colaboradorESTADO);
            $("#cargoEmpleado").val(Colaborador.cargoTITULO);
            $("#unidadEmpleado").val(Colaborador.unidadTITULO);
            $("#jefenombreEmpleado").val(Colaborador.jefeInmediatoNOMBRES + " " + Colaborador.jefeInmediatoAPELLIDOS);
            $("#jefecoreoEmpleado").val(Colaborador.jefeInmediatoColaboradorEMAIL);
            $("#jefeCelular").val(Colaborador.jefeInmediatoColaboradorCELULAR);
            $("#fotoColaborador").attr("src","https://sicam32-jpllinas.c9users.io/sicam/"+Colaborador.colaboradorFOTO);
            $("#cargarDatos").html("");
        } else {
            $(".datosColaborador").val("Verifique la cedula. No se ha podido identificar al colaborador.");
            $("#fotoColaborador").attr("src", "http://hcym.biz/wp-content/uploads/2014/02/aromaterapia.jpg");
        }
        
    }
</script>