@extends('main_layout')
@section('content')

    
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Cambiar Contraseña</h1>
            <div class="account-wall">
                <!-- <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> -->
                
                {{ Form::open(array('url' => 'change_password', 'class' => 'form-signin', 'id' => 'target') ) }}

                    {{ Form::label('password', 'Contraseña') }}
                	{{ Form::password('password', array('class' => 'form-control', 'placeholder' => 'Contraseña', 'required')) }}
                
                    {{ Form::label('new_password', 'Contraseña Nueva') }}
                    {{ Form::password('new_password', array('class' => 'form-control', 'placeholder' => 'Contraseña Nueva', 'required')) }}

                    {{ Form::label('new_password_confirmation', 'Confirmar Contraseña') }}
                    {{ Form::password('new_password_confirmation', array('class' => 'form-control', 'placeholder' => 'Confirmar Contraseña', 'required')) }}

                    {{ Form::submit('Cambiar Contraseña', ['class' => 'btn btn-lg btn-primary btn-block']) }}
                    
                {{ Form::close() }}

            </div>
            <div id="pswd_info">
                <h4>La contraseña debe tener los siguientes requerimientos:</h4>
                <ul>
                    <li id="letter" class="invalid">Almenos <strong>cinco letras</strong></li>
                    <li id="capital" class="invalid">Almenos <strong>una mayuscula</strong></li>
                    <li id="number" class="invalid">Almenos <strong>dos numeros</strong></li>
                    <li id="length" class="invalid">Almenos <strong>ocho caracteres</strong></li>
                </ul>
            </div>    
        </div>
    </div>

    
   
@stop
@section ('scripts')
<script type="text/javascript">
    var cont = 0;

    $(document).ready(function() {
    
    //Evento keyup porque el keydown no reconoce el caracter recien ingresado
    $('#new_password').keyup(function() { 
        
        // set la variable password
        var pswd = $(this).val();
        
        //Valida el tamaño de la contraseña
        if ( pswd.length < 8 ) {
            
            $('#length').removeClass('valid').addClass('invalid');
        } else {
            
            $('#length').removeClass('invalid').addClass('valid');
        }
        
        //Valida la cantidad de letras
        if ( pswd.match(/[a-z]{5}/) ) {
            
            $('#letter').removeClass('invalid').addClass('valid');
        } else {
            
            $('#letter').removeClass('valid').addClass('invalid');
        }
        
        //valida la cantidad de mayusculas
        if ( pswd.match(/[A-Z]{1}/) ) {
            
            $('#capital').removeClass('invalid').addClass('valid');
        } else {
            
            $('#capital').removeClass('valid').addClass('invalid');
        }
        
        //valida la cantidad de numeros
        if ( pswd.match(/\d{2}/) ) {
           
            $('#number').removeClass('invalid').addClass('valid');
        } else {
          
            $('#number').removeClass('valid').addClass('invalid');
        }
        
    }).focus(function() {
        $('#pswd_info').show();
    }).blur(function() {
        $('#pswd_info').hide();
    });

    $( "#target" ).submit(function( event ) {
        $("#pswd_info").find(".valid").each(function(){
            cont++;
        });
                       
        if (cont == 4) {
            
            cont = 0;
            
        } else {
           
            cont = 0;
            event.preventDefault();
            $('#new_password').focus();
        }    
    });
    
});
</script>
@stop