 <?php $this->include('rs/utils.php')?>
 <?= $this->extend('rs/template-user', $data); ?>
 <?= $this->section('content'); ?>
 <link rel="stylesheet" href="intlTelInput/css/intlTelInput.css">
	<style>
		.categ{border:1px solid #CCC;border-radius:5px;display:block;padding:10px 20px;margin:10px}
		form{width:100%}
		.form-control{max-width:350px!important}
	</style>
	<div class="card shadow">
		<a href="#collapsePrimary" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseReception">
			<h6 class="m-0 font-weight-bold text-primary">Change password</h6>
		</a>
		<div class="collapse show" id="collapsePrimary">
			<div class="card-body">
				<?php if (session()->get('success')): ?>
				   <div class="alert alert-success" role="alert">
					 <?= session()->get('success') ?>
				   </div>
				 <?php endif; ?>
				 <form class="" action="/changepwd" method="post">
					
					 <div class="col-12 col-sm-6">
					   <div class="form-group">
						<label for="password">New password</label>
						<table>
						   <tr><td><input type="password" class="form-control" name="password" id="password" value="" required></td>
							<td>
								<button id="btnGenerate" onclick="generatePassword()" class="btn btn-secondary" type="button"  title="Auto generates password." tabindex="-1">
								<span class="hidden-xs">Generate</span>
								<i class="fas fa-fw fa-key fa-lg fa-rotate-90 hidden-sm hidden-md hidden-lg"></i>
								</button>
							</td>
							</tr></table>
					  </div>
					</div>
					<div class="col-12 col-sm-6">
					  <div class="form-group">
					   <label for="password_confirm">Confirm password</label>
					   <input type="password" class="form-control" name="password_confirm" id="password_confirm" value="">
					 </div>
				   </div>
				   <?php if (isset($validation)): ?>
					 <div class="col-12">
					   <div class="alert alert-danger" role="alert">
						 <?= $validation->listErrors() ?>
					   </div>
					 </div>
				   <?php endif; ?>
				   
				   <div class="row">
						<div class="col-12 col-sm-4">
						<button type="submit" class="btn btn-primary">Update</button>
						</div>
					</div>
				</form>
			</div>	   
		</div>
		<hr><hr><hr>
	</div>
			
<script src="/intlTelInput/js/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input, {
    // any initialisation options go here
  });
  
  
  function generatePassword() { 
        const passwordLength = 18
        const useSymbols = true
        const useNumbers = true
        const useLowerCase = true
        const useUpperCase = true
        
        let charset = ''; 
        let newPassword = ''; 
  
        if (useSymbols) charset += "!@#$%^&*()"; 
        if (useNumbers) charset += "0123456789"; 
        if (useLowerCase) charset += "abcdefghijklmnopqrstuvwxyz"; 
        if (useUpperCase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
  
        for (let i = 0; i < passwordLength; i++) { 
            newPassword += charset.charAt( 
                Math.floor(Math.random() * charset.length)); 
        } 
  
        password = newPassword;
		
		$('#password').val(password)
		$('#password').prop('type', 'text');
		//alert(password);
    } 
  
</script>
			
		
<?= $this->endsection(); ?>