@extends('layout.masters')
@section('content')
	<div id="page-wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-12 col-md-6 col-md-offset-3">
					<div class="page-title">
						<h3>Change Password</h3>
					</div>
					
					<div class="form-container">
						<form action="{{url('submit-change-password')}}" method="POST" enctype="multipart/form-data" id="change-password-form">
							{{ csrf_field() }}
							<div class="form-group">
								<label for="dep_title">Password</label>
								<input type="password" name="password" class="form-control" id="password" placeholder="Password" onkeyup="showPasswordIndicators(this.value);">
								<p class="help-block red-text"><span id="password_yes_one">min 8 chars</span> <span id="password_yes_two">1 number</span> <span id="password_yes_three">1 CAPS</span></p>
								<p class="help-block red-text" id="passerrormsg">Please enter valid password</p>
								@if ($errors->has('password'))
								<div class="alert alert-danger">
									<span class="error">{{ $errors->first('password') }}</span>
								</div>
								@endif
							</div>
							<div class="form-group">
								<label for="dep_desc">Confirm Password</label>
								<input type="password" name="confirm_password" class="form-control cPassword" id="confirm-password" placeholder="Confirm Password">
								<p class="help-block red-text" id="confpasserrormsg">Must match the password</p>
								@if ($errors->has('confirm_password'))
								<div class="alert alert-danger">
									<span class="error">{{ $errors->first('confirm_password') }}</span>
								</div>
								@endif
							</div>
							<div class="buttons-container">
								<a class="btn btn-cancel" type="button" href="{{ url()->previous() }}">Cancel</a>
								<button class="btn btn-formSubmit" type="button" id="password-submit">Submit</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	$(document).ready(function(){
	 	// $("#password-success-alert").hide();
	 	$("#passerrormsg").hide();
	 	$("#confpasserrormsg").hide();
	});

	$('#password-submit').click(function(e) {
		var password = $("#password").val();
		// alert(password);
		var passwordResult = validPassword(password);
		// alert(passwordResult);
		if(password != ""){
			$("#passerrormsg").hide();
			if(passwordResult){
				var confirmPassword = $("#confirm-password").val();
				if(password == confirmPassword){
					$("#confpasserrormsg").hide();
					$("#change-password-form").submit();

				} else {
					$("#confpasserrormsg").show();
				}
			}
		} else {
			$("#passerrormsg").show();
		}
	});

	$(".cPassword").keyup(function (){
	  	var pass = $("#password").val();
	  	var conf_password = $("#confirm-password").val();
	  	if (pass == conf_password)
	  	{
	    	$("#confpasserrormsg").hide(); 		
	  	} 
	});

	function validPassword(element) {
	  	if (element.length > 0) {
	    	var pattern_pass = new RegExp(/^(?=.*?[A-Z])(?=.*?[0-9]).{8,}$/);            
	    	return pattern_pass.test(element);
	  	} 
	  	else
	    	return false;
	}

	function showPasswordIndicators(passwordText){
		$("#passerrormsg").hide();
	  var pattern3 = new RegExp(/[A-Z]{1,}/);
	  var pattern2 = new RegExp(/[0-9]{1,}/);

	  if( passwordText.length >= 8  )
	    $("#password_yes_one").addClass("green-text");
	  else
	    $("#password_yes_one").removeClass("green-text");
	  if (pattern2.test(passwordText) == true)
	    $("#password_yes_two").addClass("green-text");
	  else
	    $("#password_yes_two").removeClass("green-text");
	  if (pattern3.test(passwordText) == true)
	    $("#password_yes_three").addClass("green-text");
	  else
	    $("#password_yes_three").removeClass("green-text");
	}
</script>
@endsection