<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <?php require '../../session.php';
        require '../../conexion.php';        
        require '../../menu/css_lte.ctp';
        ?>
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
        <div class="wrapper">
            <?php require '../../menu/cabecera.ctp'; ?><!--BARRA DE HERRAMIENTAS-->
            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <section class="content-header">
                    <h1>Cambiar Contraseña</h1>
                    <ol class="breadcrumb">
                        <li><a href="/farmmedi/menu.php"><i class="fa fa-home"></i> Inicio</a></li>
                        <li class="active">Cambiar Contraseña</li>                    
                    </ol>                  
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="box box-primary">
                        <form  action="usuarios_control.php" method="post" accept-charset="utf-8" class="form-horizontal">
                            <input type="hidden" name="idusuario" value="<?php echo $_SESSION['usu_cod'];?>">
                            <input type="hidden" name="idempleado" value="<?php echo $_SESSION['id_empleado'];?>">
                            <input type="hidden" name="codsuc" value="<?php echo $_SESSION['cod_suc'];?>">
                            <input type="hidden" name="accion"  value="4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-lg-2 control-label">Nueva Contraseña: </label>
                                    <div class="col-md-3 col-sm-3 col-lg-3">
                                        <input type="password" class="form-control" id="pass" placeholder="Nueva Contraseña" name="contra" autocomplete="off" autofocus="">
                                    </div>
                                </div>                     
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-lg-2 control-label">Repetir Contraseña: </label>
                                    <div class="col-md-3 col-sm-3 col-lg-3">
                                        <input type="password" class="form-control" id="pass1" placeholder="Repetir Contraseña" name="vclave" autocomplete="off">
                                    </div>
                                </div>                     
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-lg-2 control-label">Requisitos Contraseña: </label>
                                    <div class="col-md-3 col-sm-3 col-lg-3">
                                        <span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Un minimo de 8 car&aacute;cteres.<br>
                                        <span id="lcase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Una letra min&uacute;scula.<br>
                                        <span id="ucase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Una letra may&uacute;scula.<br>
                                        <span id="num" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Un n&uacute;mero.<br>
                                        <span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> La contraseñas coinciden.<br>
                                    </div>
                                </div>                                                     
                            </div>
                            <div class="box-footer">                        
                                <a href="/farmmedi/menu.php" class="btn btn-default"><i class='fa fa-close'></i> Cancelar</a>
                                <button type="submit" id="btn-guardar" class="btn btn-primary" disabled=""><i class="fa fa-floppy-o"></i> Guardar</button>
                            </div><!-- /.box-footer -->
                        </form>                            
                    </div><!-- /.box-body -->
                </section>   
            </div>             
    </div><!-- /.content-wrapper -->
    <?php require '../../menu/pie.ctp'; ?>
<?php require '../../menu/js_lte.ctp'; ?>
<script>
    $("input[type=password]").keyup(function () {
        var ucase = new RegExp("[A-Z]+");
        var lcase = new RegExp("[a-z]+");
        var num = new RegExp("[0-9]+");
        var valido = true;

        if ($("#pass").val().length >= 8) {
            $("#8char").removeClass("glyphicon-remove");
            $("#8char").addClass("glyphicon-ok");
            $("#8char").css("color", "#00A41E");
            valido = true;
        } else {
            $("#8char").removeClass("glyphicon-ok");
            $("#8char").addClass("glyphicon-remove");
            $("#8char").css("color", "#FF0004");
            valido = false;
        }

        if (ucase.test($("#pass").val())) {
            $("#ucase").removeClass("glyphicon-remove");
            $("#ucase").addClass("glyphicon-ok");
            $("#ucase").css("color", "#00A41E");
            valido = true;
        } else {
            $("#ucase").removeClass("glyphicon-ok");
            $("#ucase").addClass("glyphicon-remove");
            $("#ucase").css("color", "#FF0004");
            valido = false;
        }

        if (lcase.test($("#pass").val())) {
            $("#lcase").removeClass("glyphicon-remove");
            $("#lcase").addClass("glyphicon-ok");
            $("#lcase").css("color", "#00A41E");
            valido = true;
        } else {
            $("#lcase").removeClass("glyphicon-ok");
            $("#lcase").addClass("glyphicon-remove");
            $("#lcase").css("color", "#FF0004");
            valido = false;
        }

        if (num.test($("#pass").val())) {
            $("#num").removeClass("glyphicon-remove");
            $("#num").addClass("glyphicon-ok");
            $("#num").css("color", "#00A41E");
            valido = true;
        } else {
            $("#num").removeClass("glyphicon-ok");
            $("#num").addClass("glyphicon-remove");
            $("#num").css("color", "#FF0004");
            valido = false;
        }

        if (($("#pass").val() === $("#pass1").val()) && $("#pass").val().length>0) {
            $("#pwmatch").removeClass("glyphicon-remove");
            $("#pwmatch").addClass("glyphicon-ok");
            $("#pwmatch").css("color", "#00A41E");
            valido = true;
            
        } else {
            $("#pwmatch").removeClass("glyphicon-ok");
            $("#pwmatch").addClass("glyphicon-remove");
            $("#pwmatch").css("color", "#FF0004");
            valido = false;            
        }
        if(valido){
            $("#btn-guardar").prop("disabled", false);
        }else{
            $("#btn-guardar").prop("disabled", true);
        }
    });
</script> 
</body>
</html>