<?php 
echo Wo_LoadPage('welcome/welcome-header');
$fields = Wo_GetWelcomeFileds();
?>
<div class="wrapper">
	<div class="container">
		<div class="row login">
			<div class="col-md-4"></div>
			<div class="col-md-4">
				<div class="sun_welcome_heading">
					<h1><?php echo $wo['lang']['sign_up']?></h1>
				</div>
				<form id="register" class="small-padd" method="post">
					<div class="errors"></div>
					<div class="loading_cont">
						<div class="loading hidden"></div>
					</div>
					<div class="sun_input_holder">
						<div class="sun_input">
							<input name="username" type="text" id="username" placeholder="<?php echo $wo['lang']['username'];?>" autofocus />
							<label for="username"><?php echo $wo['lang']['username']?></label>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
						</div>
						<div class="sun_input">
							<input name="email" type="email" id="email_address" placeholder="<?php echo $wo['lang']['email_address'];?>" />
							<label for="email_address"><?php echo $wo['lang']['email_address']?></label>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
						</div>
						<?php if($wo['config']['sms_or_email'] == 'sms') {?>
							<div class="sun_input">
								<input name="phone_num" type="text" id="phone_num_ex" placeholder="<?php echo $wo['lang']['phone_num_ex'];?>" />
								<label for="phone_num_ex"><?php echo $wo['lang']['phone_num_ex']?></label>
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
							</div>
						<?php } ?>
						<div class="sun_input">
							<input name="password" type="password" id="password" placeholder="<?php echo $wo['lang']['password'];?>" />
							<label for="password"><?php echo $wo['lang']['password']?></label>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
							<?php if ($wo['config']['password_complexity_system'] == 1) { ?>
								<ul class="helper-text">
									<li class="length"><?php echo $wo['lang']['least_characters']; ?></li>
									<li class="lowercase"><?php echo $wo['lang']['contain_lowercase']; ?></li>
									<li class="uppercase"><?php echo $wo['lang']['contain_uppercase']; ?></li>
									<li class="special"><?php echo $wo['lang']['number_special']; ?></li>
								</ul>
							<?php } ?>
						</div>
						<div class="sun_input">
							<input name="confirm_password" type="password" id="confirm_password" placeholder="<?php echo $wo['lang']['confirm_password'];?>" />
							<label for="confirm_password"><?php echo $wo['lang']['confirm_password']?></label>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
						</div>
						<?php 
							if (!empty($fields) && count($fields) > 0) {
								foreach ($fields as $key => $wo['field']) {
									echo Wo_LoadPage('welcome/fields');
								}
							}
						?>
						<div class="sun_input">
							<select name="gender" id="gender">
								<option value="0"><?php echo $wo['lang']['gender']?></option>
								<?php foreach ($wo['genders'] as $key => $gender) { ?>
									<option value="<?php echo($key) ?>"><?php echo $gender; ?></option>
								<?php } ?>
							</select>
							<label for="gender"><?php echo $wo['lang']['gender']?></label>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
						</div>
					</div>

					<?php if($wo['config']['reCaptcha'] == 1) {?>
						<div class="form-group" style="margin-top:10px;">
							<div class="g-recaptcha" data-sitekey="<?php echo $wo['config']['reCaptchaKey']?>"></div>
						</div>
					<?php } ?>
					<?php if(!empty( $_GET['last_url'])){?>
						<div class="form-group">
							<input type="hidden" name="last_url" value="<?php echo urldecode(Wo_Secure($_GET['last_url']));?>">
						</div>
					<?php } ?>
					<div class="terms">
						<input type="checkbox" name="accept_terms" id="accept_terms" onchange="activateButton(this)">
						<label for="accept_terms"> 
							<?php echo $wo['lang']['terms_agreement'] ?> <a href="<?php echo Wo_SeoLink('index.php?link1=terms&type=terms');?>"><?php echo $wo['lang']['terms_of_use'] ?></a> & <a href="<?php echo Wo_SeoLink('index.php?link1=terms&type=privacy-policy');?>"><?php echo $wo['lang']['privacy_policy'] ?></a>
						</label>
						<div class="clear"></div>
					</div>
					<div class="login_signup_combo">
						<div class="login__">
							<button type="submit" class="btn btn-main" id="sign_submit" disabled><?php echo $wo['lang']['lets_go']?></button>
						</div>
						<div class="signup__">
							<?php if ($wo['config']['user_registration'] == 1): ?>
								<a class="dec btn btn-default" href="<?php echo $wo['config']['site_url'];?>"><?php echo $wo['lang']['login']?></a>
							<?php endif ?>
						</div>
					</div>
					<?php if (isset($_GET['invite'])): ?>
						<input type="text" class="hidden" value="<?php echo $_GET['invite']; ?>" name="invited">
					<?php endif; ?>
				</form>
				
				<?php if ($wo['config']['facebookLogin'] != 0 || $wo['config']['googleLogin'] != 0 || $wo['config']['twitterLogin'] != 0 || $wo['config']['linkedinLogin'] != 0 || $wo['config']['VkontakteLogin'] != 0 || $wo['config']['instagramLogin'] != 0 ) { ?>
					<div class="social_btns">
						<p><?php echo $wo['lang']['login_with']?> <?php echo $wo['lang']['social_links']?></p>
						<?php if($wo['config']['facebookLogin'] != 0): ?>
							<a href="<?php echo $wo['facebookLoginUrl']?>" class="btn btn-facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
						<?php endif; ?>
						<?php if($wo['config']['googleLogin'] != 0): ?>
							<a href="<?php echo $wo['googleLoginUrl']?>" class="btn btn-google"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z"></path></svg></a>
						<?php endif; ?>
						<?php if($wo['config']['twitterLogin'] != 0): ?>
							<a href="<?php echo $wo['twitterLoginUrl']?>" class="btn btn-twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
						<?php endif; ?>
						<?php if($wo['config']['linkedinLogin'] != 0): ?>
							<a href="<?php echo $wo['linkedInLoginUrl']?>" class="btn btn-linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z"></path></svg></a>
						<?php endif; ?>
						<?php if($wo['config']['VkontakteLogin'] != 0): ?>
							<a href="<?php echo $wo['VkontakteLoginUrl']?>" class="btn btn-vk"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.8,7.74C20.93,7.32 20.8,7 20.18,7H18.16C17.64,7 17.41,7.27 17.28,7.57C17.28,7.57 16.25,10.08 14.79,11.72C14.31,12.19 14.1,12.34 13.84,12.34C13.71,12.34 13.5,12.19 13.5,11.76V7.74C13.5,7.23 13.38,7 12.95,7H9.76C9.44,7 9.25,7.24 9.25,7.47C9.25,7.95 10,8.07 10.05,9.44V12.42C10.05,13.08 9.93,13.2 9.68,13.2C9,13.2 7.32,10.67 6.33,7.79C6.13,7.23 5.94,7 5.42,7H3.39C2.82,7 2.7,7.27 2.7,7.57C2.7,8.11 3.39,10.77 5.9,14.29C7.57,16.7 9.93,18 12.08,18C13.37,18 13.53,17.71 13.53,17.21V15.39C13.53,14.82 13.65,14.7 14.06,14.7C14.36,14.7 14.87,14.85 16.07,16C17.45,17.38 17.67,18 18.45,18H20.47C21.05,18 21.34,17.71 21.18,17.14C21,16.57 20.34,15.74 19.47,14.76C19,14.21 18.29,13.61 18.07,13.3C17.77,12.92 17.86,12.75 18.07,12.4C18.07,12.4 20.54,8.93 20.8,7.74Z"></path></svg></a>
						<?php endif; ?>
						<?php if($wo['config']['instagramLogin'] != 0): ?>
							<a href="<?php echo $wo['instagramLoginUrl']?>" class="btn btn-instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
						<?php endif; ?>
					</div>
				<?php } ?>
			</div>
			<div class="col-md-4"></div>
		</div>
	</div>
</div>
<div class="container"><?php echo Wo_LoadPage('footer/welcome');?></div>

<script>
var working = false;
var $this = $('#register');
var $state = $this.find('.errors');

$(function() {
  $this.ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=register',
    beforeSend: function() {
        <?php if ($wo['config']['password_complexity_system'] == 1) { ?>
    	if ($('.helper-text .length').hasClass('valid') && $('.helper-text .lowercase').hasClass('valid') && $('.helper-text .uppercase').hasClass('valid') && $('.helper-text .special').hasClass('valid')) {
    		working = true;
			$this.find('button').attr("disabled", true);
			$this.find('.loading').removeClass('hidden');
    	}
    	else{
    		$state.html("<?php echo($wo['lang']['complexity_requirements']) ?>");
    		return false;
    	}
        <?php } else{ ?>
        	working = true;
			$this.find('button').attr("disabled", true);
			$this.find('.loading').removeClass('hidden');
        <?php } ?>
    },
    success: function(data) {
      if (data.status == 200) {
		$state.addClass('success');
        $state.html('<?php echo $wo['lang']['welcome_'] ?>');
		$this.find('.loading').addClass('hidden');
        setTimeout(function () {
         window.location.href = data.location;
        }, 1000);
      } else if (data.status == 300) {
        window.location.href = data.location;
      } else {
        $this.find('button').attr("disabled", false);
		$this.find('.loading').addClass('hidden');
        $state.html(data.errors);
      } 
      working = false;
    }
  });
});

function activateButton(element) {
	if(element.checked) {
		document.getElementById("sign_submit").disabled = false;
	}
	else  {
		document.getElementById("sign_submit").disabled = true;
	}
};

<?php if ($wo['config']['password_complexity_system'] == 1) { ?>

(function(){
	var helperText = {
		charLength: document.querySelector('.helper-text .length'),
		lowercase: document.querySelector('.helper-text .lowercase'),
		uppercase: document.querySelector('.helper-text .uppercase'),
		special: document.querySelector('.helper-text .special')
	};
	var password = document.querySelector('#password');
	
	
	
	var pattern = {
		charLength: function() {
			if( password.value.length >= 6 ) {
				return true;
			}
		},
		lowercase: function() {
			var regex = /^(?=.*[a-z]).+$/; // Lowercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		uppercase: function() {
			var regex = /^(?=.*[A-Z]).+$/; // Uppercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		special: function() {
			var regex = /^(?=.*[0-9_\W]).+$/; // Special character or number pattern

			if( regex.test(password.value) ) {
				return true;
			}
		}   
	};
	
	// Listen for keyup action on password field
  password.addEventListener('keyup', function (){
  	    $('.helper-text').slideDown('slow', function() {
  	    	
  	    });
		// Check that password is a minimum of 8 characters
		patternTest( pattern.charLength(), helperText.charLength );
		
		// Check that password contains a lowercase letter		
		patternTest( pattern.lowercase(), helperText.lowercase );
		
		// Check that password contains an uppercase letter
		patternTest( pattern.uppercase(), helperText.uppercase );
		
		// Check that password contains a number or special character
		patternTest( pattern.special(), helperText.special );
    
    // Check that all requirements are fulfilled
    if( hasClass(helperText.charLength, 'valid') &&
			  hasClass(helperText.lowercase, 'valid') && 
			 	hasClass(helperText.uppercase, 'valid') && 
			  hasClass(helperText.special, 'valid')
		) {
			addClass(password.parentElement, 'valid');
    }
    else {
      removeClass(password.parentElement, 'valid');
    }
	});
	
	function patternTest(pattern, response) {
		if(pattern) {
      addClass(response, 'valid');
    }
    else {
      removeClass(response, 'valid');
    }
	}
	
	function addClass(el, className) {
		if (el.classList) {
			el.classList.add(className);
		}
		else {
			el.className += ' ' + className;
		}
	}
	
	function removeClass(el, className) {
		if (el.classList)
				el.classList.remove(className);
			else
				el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
	}
	
	function hasClass(el, className) {
		if (el.classList) {
			console.log(el.classList);
			return el.classList.contains(className);	
		}
		else {
			new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);	
		}
	}
	
})();
<?php } ?>

</script>
<style type="text/css">
	 .helper-text {
	    display: none;
	    margin-top: 6px;
	    font-size: 12px;
	    line-height: 22px;
	    color: #808080;
	  }
	  li.valid {
      color: #1fd34a;
    }
</style>