<section class="content-header">
	<div class="page_header">
		<div class="row">
			<div class="col-xs-12 col-sm-8">
				<h3 class="content-title">
					<i class="fa fa-lock fa-lg pink-col"></i> Reset Password
					<small></small>
				</h3>
			</div>
			<div class="col-xs-12 col-sm-4 hidden-xs">
				<!-- Main search form -->
				<form action="#" method="get" class="mainsearch-form">
					<div class="input-group">
						<input type="text" name="q" class="form-control" placeholder="Search...">
						<span class="input-group-btn">
							<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
						</span>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

<section class="content-header navbar_header">
	<div>
        <nav class="navbar navbar-static-top navbar_content" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-branch-menu">
            <ul class="nav navbar-nav">
                
              <li class="">
                <a href="<?=DNADMIN?>/company/users/list"> <i class="fa fa-home"></i> Home </a>
              </li>
              <li class="dropdown notifications-menu">
                <!-- Menu toggle button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-angle-down"></i> Users
                </a>
                <ul class="dropdown-menu dropdown-menu-right" style="height: 83px;">
                  <li>
                    <!-- Inner Menu: contains the notifications -->
                    <ul class="menu">
                      <li><!-- start notification -->
                        <a href="<?=DNADMIN?>/company/users/new">
                          <i class="fa fa-plus text-blue"></i>New user
                        </a>
                      </li><!-- end notification -->
                      <li><!-- start notification -->
                        <a href="<?=DNADMIN?>/company/users/list">
                            <i class="fa fa-bars text-blue"></i>User List
                        </a>
                      </li><!-- end notification -->
                    </ul>
                  </li>
                </ul>
              </li>
                
            </ul>
          </div>
        </nav>
	</div>
</section>

<!-- Main content -->
<section class="content">
		
 <!-- Small boxes (Stat box) -->
	  <div class="row">
          <div class="col-sm-3"></div>
          <div class="col-sm-6">
              <form method="post">
                 <!--RECENT REGISTER -->
                <div class="box box-info">
                    <div class="box-header with-border">
                      <h3 class="box-title">Update Password</h3>
                      <div class="box-tools pull-right">
                        
                      </div>
                    </div><!-- /.box-header -->
                    
                    <div class="box-body" style="padding: 30px 30px; ">
                        <!-- User Info Alert -->
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i> <strong>Updating password for:</strong> 
                            <?= $user_data->firstname . ' ' . $user_data->lastname ?> (<?= $user_data->email ?>)
                        </div>
                        
                        <?php if($form->ERRORS){?>
                        <div class="alert alert-danger">
                            <i class="fa fa-ban"></i> 
                            <?php echo @$form->ERRORS_STRING.' '.@$form->ERRORS_SCRIPT['password'][0].' '.@$form->ERRORS_SCRIPT['repassword'][0];?>
                        </div>
                        <?php }?>
                        
                        <!-- Password Requirements -->
                        <div class="callout callout-warning" style="margin-bottom: 20px;">
                            <h4><i class="fa fa-shield"></i> Password Requirements:</h4>
                            <ul style="margin-bottom: 0;">
                                <li>At least one uppercase letter</li>
                                <li>At least one lowercase letter</li>
                                <li>At least one number</li>
                                <li>At least one special character</li>
                                <li>Minimum 8 characters</li>
                            </ul>
                        </div>
                        
						<div class="form-group">
							<label>New Password:</label>
							<small><i>Uppercase, lowercase, Special, Numbers</i></small> 
							<input class="form-control passwordField" id="changePasswordType" placeholder="New password" name="user-password" type="password" required>
						</div>
						
						<div class="form-group">
							<label>Re-type Password: <a href="javascript:void(0);" id="pwdvisibility" style="font-size: 12px;">Show password</a></label>
							<input class="form-control passwordField" placeholder="Re-type password" name="user-repassword" type="password" required>
						</div>
						
						<!-- Password Strength Indicator -->
						<div class="form-group">
						    <label>Password Strength:</label>
						    <div class="progress" style="height: 5px;">
						        <div class="progress-bar" id="passwordStrength" role="progressbar" style="width: 0%; background-color: #dd4b39;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
						    </div>
						    <small id="strengthText" style="color: #999;">Enter a password to see strength</small>
						</div>
                    </div>
                    <!-- /.box-body -->
                    
                    <input type="hidden" name="webToken" value="56">
                    <input type="hidden" name="request" value="user-update">
                    <input type="hidden" name="id" value="<?php echo $user_data->ID;?>">
                    <input type="hidden" name="token" value="true">
                    <input type="hidden" name="task" value="user-update">
                    
                    <div class="box-footer clearfix">
                        <a href="<?=DNADMIN?>/company/users/list" class="btn btn-sm btn-default btn-flat pull-left">Cancel</a>
                        <button type="submit" value="Save" class="btn btn-sm btn-info btn-flat pull-right">Save Password</button>
                    </div>
                    <!-- /.box-footer -->
                  </div>
                 <!--RECENT REGISTER -->
              </form>
          </div>
          <div class="col-sm-3"></div>
	  </div><!-- /.row -->
    
	  <!-- Security Tips Row -->
	  <div class="row">
		<div class="col-sm-3"></div>
		<div class="col-sm-6">
		    <div class="box box-default">
		        <div class="box-header with-border">
		            <h3 class="box-title"><i class="fa fa-shield"></i> Security Tips</h3>
		        </div>
		        <div class="box-body">
		            <ul>
		                <li>Never share your password with anyone</li>
		                <li>Use a unique password that you don't use elsewhere</li>
		                <li>Consider using a password manager</li>
		                <li>Change your password regularly</li>
		                <li>Avoid using personal information in your password</li>
		            </ul>
		        </div>
		    </div>
		</div>
		<div class="col-sm-3"></div>
	  </div><!-- /.row -->
    
</section>

<script>
$(document).ready(function(){
	// Toggle password visibility
	$('#pwdvisibility').click(function(){
		if($('.passwordField').attr("type")=='password'){
			$('.passwordField').attr("type","text");
			$('#pwdvisibility').html("Hide password");
		}else{
			$('.passwordField').attr("type","password");
			$('#pwdvisibility').html("Show password");
		}
	});
	
	// Password strength checker
	$('input[name="user-password"]').on('keyup', function(){
		const password = $(this).val();
		let strength = 0;
		
		if(password.length >= 8) strength += 20;
		if(password.length >= 12) strength += 10;
		if(/[a-z]/.test(password)) strength += 20;
		if(/[A-Z]/.test(password)) strength += 20;
		if(/[0-9]/.test(password)) strength += 15;
		if(/[^a-zA-Z0-9]/.test(password)) strength += 15;
		
		const progressBar = $('#passwordStrength');
		const strengthText = $('#strengthText');
		
		progressBar.css('width', strength + '%');
		progressBar.attr('aria-valuenow', strength);
		
		// Update color and text based on strength
		if(strength < 30) {
			progressBar.css('background-color', '#dd4b39');
			strengthText.text('Weak password').css('color', '#dd4b39');
		} else if(strength < 50) {
			progressBar.css('background-color', '#f39c12');
			strengthText.text('Fair password').css('color', '#f39c12');
		} else if(strength < 80) {
			progressBar.css('background-color', '#00c0ef');
			strengthText.text('Good password').css('color', '#00c0ef');
		} else {
			progressBar.css('background-color', '#00a65a');
			strengthText.text('Strong password').css('color', '#00a65a');
		}
	});
	
	// Password match checker
	$('input[name="user-repassword"]').on('keyup', function(){
		const password = $('input[name="user-password"]').val();
		const rePassword = $(this).val();
		
		if(rePassword.length > 0) {
			if(password === rePassword) {
				$(this).css('border-color', '#00a65a');
			} else {
				$(this).css('border-color', '#dd4b39');
			}
		} else {
			$(this).css('border-color', '#d2d6de');
		}
	});
});
</script>