<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="shortcut icon" type="image/x-icon" href="/sigse/favicon.ico">
        <title>SIGSE</title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

        <?php echo $this->element('css'); ?><!--ARCHIVOS CSS-->
        <style>   
            .td-nivel-5 {background: #9C9C9C !important;color:black !important;}
        </style> 
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
        <div class="wrapper">

            <?php echo $this->element('header'); ?><!--CABECERA PRINCIPAL-->
            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <section class="content-header">
                    <h1>Cambiar Contraseña</h1>
                    <ol class="breadcrumb">
                        <li><a href="/sigse/"><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="/sigse/users/cambiarpas" method="post" accept-charset="utf-8" class="form-horizontal">
                            <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="data[User][password]" autocomplete="off">
                                    </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="data[User][password1]" 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="/sigse/" class="btn btn-default"><i class='fa fa-close'></i> Cancelar</a>
                                <button type="submit" id="btn-guardar" class="btn btn-primary" disabled="">Guardar</button>
                            </div><!-- /.box-footer -->
                        </form>                            
                    </div><!-- /.box-body -->
                </section>   
            </div>             
    </div><!-- /.content-wrapper -->

    <?php echo $this->element('footer'); ?><!--ARCHIVOS JS-->

</div><!-- ./wrapper -->

<?php echo $this->element('js'); ?><!--ARCHIVOS JS-->
<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> 
<div id="IrArriba">
    <div align="left">
        <span id="arriba"><a href='#Ancla'></a></span>
    </div>
</div>
</body>
</html>
