<?= $this->extend('rs/template-visitor'); ?>
<?= $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:250px!important}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

	 <div class="card shadow mb-4">
		<div class="card-header py-3">
		<a href="#collapseLabels" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseLabels">
			<h4 class="m-0 font-weight-bold text-primary">Create an account</h4>
		</a>
		</div>
		<div class="card-body">
			<div class="row">
					
					<form class=""  id="frmdata" action="/register" method="post">
					  <div class="categ">
					   <h3>Company data</h3>
						  <div class="form-group">
						   <label for="companyname">Company name</label>
						   <input type="text" class="form-control" name="companyname" id="companyname" value="<?= set_value('companyname') ?>" required>
							</div>
						
						  <div class="form-group">
						   <label for="country">Country</label>
						   <select class="form-control-sm select2" name ="country" id="country" style="width:250px"  required>
							   <option />
							   <option>Bulgaria</option>
							   <option>Romania</option>
						    </select>		
						   </div>
						  
						  
						  <div class="form-group">
						   <label for="country">District/Region</label>
						   <input type="text" class="form-control" name="district" id="district" value="<?= set_value('district') ?>" required>
						  </div>
						  
						  <div class="form-group">
						   <label for="city">City</label>
						   <input type="text" class="form-control" name="city" id="city" value="<?= set_value('city') ?>" required>
						  </div>
						  
						  <div class="form-group">
						   <label for="address">Street address</label>
						   <input type="text" class="form-control" name="address" id="address" value="<?= set_value('address') ?>" required>
						  </div>
						  
						  <div class="form-group">
						   <label for="vatcode">VAT Code</label>
						   <input type="text" class="form-control" name="vatnumber" id="vatnumber" value="<?= set_value('vatnumber') ?>" required>
						  </div>
						  
						  
						
						</div>
						
						<div class="categ">
						 <h3>Contact data</h3>
						  <div class="form-group">
						   <label for="firstname">First name</label>
						   <input type="text" class="form-control" name="firstname" id="firstname" value="<?= set_value('firstname') ?>" required>
						  </div>
						
						  <div class="form-group">
						   <label for="lastname">Family name</label>
						   <input type="text" class="form-control" name="lastname" id="lastname" value="<?= set_value('lastname') ?>" required>
						  </div>
						  
						   <div class="form-group">
							   <label for="phone">Phone number </label>
							   <div class="input-group">
									<input type="tel"  class="form-control" name="phone" id="phone" value="<?= set_value('phone') ?>"  required>
									
								</div>
						   </div>	
						  <div class="form-group">
						   <label for="email">Email address</label>
						   <input type="email" class="form-control" name="email" id="email" value="<?= set_value('email') ?>" required>
						  </div>
						
						  <div class="form-group">
						   <label for="password">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 class="form-group">
						  <label for="password_confirm">Confirm password</label>
						  <input type="password" class="form-control" name="password_confirm" id="password_confirm" value="" required>
						  </div>
						</div>
						<div class="categ" style="display:none">
								<h3>Interest</h3>
								<div class="form-group" style="padding-left:20px">
									<input class="form-check-input" type="checkbox" value="seller" id="seller" name="seller">
									<label class="form-check-label" for="seller">
									I am interested in selling cars
									</label>
							   </div>
							  
							  <div class="form-group" style="padding-left:20px">
									<input class="form-check-input" type="checkbox" value="buyer" id="buyer" name="buyer">
									<label class="form-check-label" for="buyer">
									I am interested in buyig cars
									</label>
							   </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" style="padding-left:20px">
						  <button type="button" onclick="doSubmit()" class="btn btn-primary">Register now</button>
						</div>
						<div class="col-12 col-sm-8 text-right">
						  <a href="/login">Already have an account</a>
						</div>
					  </div>
					</form>
			</div>
		</div>
		
	</div>

			
		<!-- /.container-fluid -->

		
		<!-- End of Main Content -->

		<!-- Footer -->
		
<script src="/intlTelInput/js/intlTelInput.js"></script>
<script>
 
  var input = document.querySelector("#phone");
 
  var i=window.intlTelInput(input, {
    utilsScript:"/intlTelInput/js/utils.js"
  });
  
  function doSubmit(){
	  phoneInput=$("#phone");
	  phoneInput.val(i.getNumber());
	  document.getElementById('frmdata').submit();
	 
	}
  
  
  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(); ?>