<?php
	include('views/_header_m.tpl.php');

	if (isset($msg)) {
		echo "<center><b>$msg</b></center><br /><br />";
	}

	if (isset($_GET['reg_ok'])) {
		$msg = 'Registration Successful. <a href="/auth/login" style="color:#00a0ff;">Login...</a>';
	}

	if (isset($_GET['msg'])) {
		$msg = htmlentities(strip_tags($_GET['msg']));
	}
	
	if (isset($_GET['grp'])) {
		$group_id = htmlentities(strip_tags($_GET['grp']));
		$list_group = $group_info['groupname'];
	}
	// If the user is logged in and a group ID is in their link
	if (isset($_SESSION['user']['id'])) {
		$hidesignup = "display:none;";
		
		if ($notvalid !=1) {
			if (isset($_GET['grp'])) {
				echo "<br /><br />
			<img src='/static/images/client/kenect_logo_wht.png' alt='ChattrBox'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:600px; margin:0 auto; font-size:17px;
			line-height:27px;'>You were invited to the
			group <span style='font-weight:600'>" . $list_group . "</span> by <strong>" . $referrer_name . "</strong> - Accept
			their invite to receive their important messages and/or notifications 
			(which you can turn off at any time from your Edit Account page):<br /><br />
			<a href='/group/acceptInvite/" . $group_id . "/" . $_SESSION['user']['id'] . "'
			style=''>Accept Invite &raquo;</a></div></div><div style='display:none; border-bottom:1px solid #fff; width:200px; margin:0 auto;'>&nbsp;</div>";
				//echo "Logged in";
			} else {
				echo "<br /><br />
			<img src='/static/images/client/kenect_logo_wht.png' alt='ChattrBox'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:550px; margin:0 auto; font-size:17px;
			line-height:27px;'>You were referred by: <strong>" . $referrer_name . "</strong> - Accept their invite to receive
			their important messages and/or notifications (which you can turn off at any time from your Edit Account page):<br /><br />
			<a href='/group/acceptInvite/" . $referrer_all_id . "/" . $_SESSION['user']['id'] . "'
			style=''>Accept Invite &raquo;</a>
			
			<br /><br />
			RefID: " . $referrers_id . " 
			</div></div>";
			}
		} else {
			// NOT A VALID REFERRAL CODE
			echo "<br /><br />
			<img src='/static/images/client/kenect_logo_wht.png' alt='ChattrBox'
			style='max-height: 100px; max-width:600px; width:80%; padding:0 10px;'>
			<br />
			<div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px; max-width:600px; margin:0 auto; font-size:17px;
			line-height:27px;'>
				Ooooops, that Referral Code is no longer valid.<br /><br />
				<a href='/auth/register?clear' style='' title='Ok'>Ok, got it &raquo;</a>
			</div></div><div style='display:none; border-bottom:1px solid #fff; width:200px; margin:0 auto;'>&nbsp;</div>";
		}	
	} else {
		// UNLOGGED - we should have a GET['ref']
//		if (isset($_GET['msg']) && $_GET['msg'] = "Oooops") {
//			$not_valid;
//		}
		
		if (getReferralFromCookie()) {
			echo "<br /><br /><div style='margin:0 15px;'><div class='groupinvite'
			style='border:0px dashed #fff; padding:10px 10px 0; max-width:550px; margin:0 auto; font-size:17px; 
			line-height:27px;'>You were referred
			by <strong>" . $referrer_name . "</strong>.
			Sign up for free below to receive their important messages and/or notifications 
			(which you can turn off at any time from your Edit Account page). Or, if you
			already have an account simply login to accept the invite...<br />
			<a href='/auth/login?r=" . getReferralFromCookie() ."&grp=" . $referrer_all_id . "' style='min-width:120px'>Login &raquo;</a>
			</div></div>";
		} 
		
		//else { 
		//	echo "Oooops, that referral code is not valid any more.";
		//}
	}	
?>

<style type="text/css">
	html {
		background:#000 url('/static/images/lbstartup.jpg') no-repeat center center !important;
		background-size: 500px !important;
		background-color: #232323 !important;
		overflow:hidden !important;
		height:100%;
	}
	body { background:#000; height:100vh; overflow:hidden; }
	.groupinvite a {
		color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4);
		background:#00cf0f;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding:5px 15px;
		font-size:14px;
		font-weight:600;
		display:inline-block;
		margin:10px 0;
	}
    input[type="text"], input[type="password"] {
		margin-top:7px;
        border:1px solid rgba(255,255,255,.3) !important;
    }	
    input[type='checkbox'] {
		transform: scale(1.5);
	} 
	label {
		font-size: 12px;
	}
	
	#errordiv a,
	#errordiv a:active,
	#errordiv a:visited {
		background: #fff;
		color: #28d52d;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding: 3px 10px;
		font-weight: 800;
	}

	#errordiv a:hover {
		color: #fff;
		background: #28d52d;
	}	
	
/* ######################################################### */
/*                       MOBILE STYLES                       */
/* ######################################################### */

	/* Landscape tablet to iPads */
	@media (min-width: 980px) and (max-width: 1024px) {

	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.groupinvite a {
			color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4);
			background:#00cf0f;
			border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
			padding:5px 25px;
			font-size:18px;
			height:40px;
			line-height:40px;
			font-weight:600;
			display:inline-block;
			margin:10px 0;
		}
	}	

	/* Older phones with super small screens */
	@media (max-width: 320px) {

	}		
</style>

<img src="<?php if (!empty($website_options['mobile_background'])) : ?>/<?= $website_options['mobile_background'] ?><?php else : ?>/static/images/mobbg.jpg<?php endif; ?>" style="position:absolute; background:cover; object-fit:cover; top:0;
left:0; bottom:0; right:0; min-height:100%; height:100vh; width: auto; min-width:100%; padding-top:0px !important; padding-bottom:0px !important; margin-bottom:0px !important; z-index:-999;" alt="BG" />

 <div class="home-feature-category" style="background:none; border:none;">
	  <div class="container_12 clearfix" style="<?= $hidesignup ?>">
		<br />
		<div class="titletext" style="line-height:50px; text-align:center;">
		<?php if (!empty($website_options['mobile_logo'])) : ?>
			<h1><a href="/"><img src="/<?= $website_options['mobile_logo'] ?>"
			style="width: auto; max-width: 170px; height: 50px; margin-top:3px;" alt="" align="absmiddle" /></a> Sign up, free!
			</h1>
        <?php endif; ?>
		</div>
		<?php
		if (isset($msg)) {
			echo "<div id='errordiv' style='line-height:25px; background:#ff0000; color:#fff; padding:11px 15px; margin:5px 5px 15px 5px;
border:1px solid #fff; font-weight:300; font-size:15px;'>$msg &nbsp;<a href='/auth/register'>Ok!</a></div>";
		}
		?>	
		
		<!--REF: <?php print_r($referrer_all_id); ?>-->
			
			<form id="form" method="post" style="color:#fff; text-align:center; max-width:350px; margin:0 auto;">
				
				<?php if (!$_GET['ref']) : ?>
					<div style="font-size:16px; margin-bottom:7px;">
						<?php if(getReferralFromCookie()){
							echo "You were referred by:";	
						} else {
							echo "Enter referral code (optional)";
						} ?>
					</div>
											
					<input type="text" id="userefcode" name="refby" value="<?php echo getReferralFromCookie(); ?>" 
					placeholder="Enter referral code (optional)" style="width:75%;" maxlength="11" />
				<?php elseif ($_GET['ref']) : ?>	
					<span style="font-size:14px;">Referred eh? Their code is loaded below:</span><br />
					<input type="text" id="userefcode" name="refby" value="<?= $_GET['ref'] ?>" maxlength="11"
					placeholder="Enter referral code (optional)" style="width:75%;" />
				<?php endif; ?>		
							
				<br />
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<div style="display:inline-block; width:50px; font-size:13px;">&nbsp;</div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<br />
				
				<span style="font-size:15px">Choose your own referral code (optional):</span><br />
				<input name="refcode" id="ref" class="noSpacesField" maxlength="11"
				type="text" placeholder="Choose a referral code, ie. mike23" 
				style="margin-top:7px; width:75%;" />
				<br />
				<div id="username_availability_result"
				style="height:25px; line-height:25px; font-size:15px; margin-bottom:5px;
				text-shadow:0px -1px 1px rgba(0,0,0,.5)"></div>	
				
				<input name="usertype" id="txt_name" type="hidden" placeholder="Consumer" value="Consumer" style="width:75%;" />
				
				<input name="list_group" id="txt_name" type="hidden" placeholder="ListGroup (Optional)" 
				style="width:75%;" value="<?php if (isset($_GET['grp'])) { echo $list_group; } ?>" />
				
				<input name="group_id" id="txt_name" type="hidden" placeholder="" 
				style="width:75%;" value="<?php if (isset($_GET['grp'])) { echo $_GET['grp']; } ?>" />
				
				<!--<input name="owner" id="txt_name" type="hiddenxxx" placeholder="" 
				style="width:75%;" value="<?php if (isset($_GET['ref'])) { echo $_GET['grp']; } ?>" />-->				
					
				<label>First or Full Name:</label>
				<input name="name" id="txt_name" type="text" placeholder="full name" style="width:75%;" />
				<br /><br />
				<input type="text" name="email" placeholder="your email" id="email" style="width:75%;" />
				<br /><br />
				<input type="text" name="phone" placeholder="phone (optional): ###-###-####" id="phone" maxlength="12"
				 onblur="formatPhoneNumber()" style="width:75%;" />
				 <br /><br />
				<input  type="password" name="password" placeholder="password" id="password" style="width:75%;" />
				<br /><br />
                       <!--<input type="hidden" name="account_type" value="Person" />-->
                       <span style="text-align:left; font-size:14px; color:#bbb;">
                       		<!-- removed name="check_terms" -->
							<input id="check_terms" class="txt" type="checkbox" style="width:25px; margin-bottom:1px" />
							I Agree to the <a href="/terms" style="color:#fff;">Terms</a>.
							</span>
				<br /><br />			
				
				<input type="submit" value="Register" class="btn-o register-trigger"
				style="width:80%; padding-left:10px; padding-right:10px; background:none; margin:7px 0;" />
				
				<br /><br />
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>  
				<div style="display:inline-block; width:50px; font-size:13px;"> <i>or</i> </div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; margin-bottom:5px;"></div>
				<!--<br />
                <a href="/auth/loginFacebook" class="btn btn-fb connect-fb" 
				style="width:70%; font-family:'Open Sans',sans-serif; font-size:15px; 
				margin-top:7px; font-weight:300;"><i class="fa fa-facebook"></i> &nbsp;&nbsp;Register with Facebook</a>-->
                <br /><br />
				<span style="font-size:18px; color:#bbb;">Already have an account?</span> <a href='/auth/login' style='color:#fff; font-size:18px;'>Login &raquo;</a>
				<br /><br />
				<a href="/" style='color:#fff; font-size:17px;'>&laquo; Back to Home</a>
				<br /><br /><br /><br /><br /><br /><br /><br />
			</form>
	</div>
</div>

<script>
	$(document).ready(function() {

		$(".register-trigger").click(function(e) {	

			if (! $("#txt_name").val().length) {
				e.preventDefault();
				alert('You must enter your first name or full name.');
				return false;
			}	

			if (! $("#email").val().length) {
				e.preventDefault();
				alert('You must enter an email address.');
				return false;
			}			
			
			var email = $("#email").val();

			//alert("Email: " + email);

			if ( !validateEmail(email)) {
				alert(email + ' does not appear to be a valid Email Address. Please double-check it...');
				return false;
			} else {
				if (/\.(com|net)\/?$/i.test(email)) {
					//alert('Email entered: ' + email);
				} else {
					alert('FYI - Your email did not end in .com. If your email is correct, ignore this message.');
				}
			}

			if (! $("#password").val().length) {
				e.preventDefault();
				alert('You must enter a password.');
				return false;
			}

			if ($("#password").val().length < 7) {
				e.preventDefault();
				alert('You must enter a password that is at least 7 characters or more.');
				return false;
			}

			if (! $("#check_terms").is(":checked")) {
				e.preventDefault();
				var confirm_box = confirm('You must check the Terms checkbox.');
				return false;
			}
			//return true;
		});
		
		$(function() {
			$('.noSpacesField').bind('input', function() {
				$(this).val(function(_, v) {
					return v.replace(/\s+/g, '');
				});
			});
		});	
	}); 
	
	// DOCUMENT READY ENDS		
		
	function validateEmail($email){
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		return emailReg.test( $email );
	}		
	
	// SIMPLER PHONE FORMATTING // USE maxlength="12" in the input tag
	$('#phone').keydown(function(e){
	             var key = e.charCode || e.keyCode || 0;
	             $text = $(this); 
	             if (key !== 8 && key !== 9) {
	                 if ($text.val().length === 3) {
	                     $text.val($text.val() + '-');
	                 }
	                 if ($text.val().length === 7) {
	                     $text.val($text.val() + '-');
	                 }
	             }
	             return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
	});

	// FORMAT PHONE NUMBERS
	function formatPhoneNumber() {
	  	var phone = $("#phone").val();
		var cleaned = ('' + phone).replace(/\D/g, ''); // 3125551234
		//alert(cleaned.length);

		if(cleaned.length < 10) {
	        alert('Looks like you entered ' + cleaned.length + ' digits, instead of 10. Please enter your phone number like ###-###-####');
	    } 
		return null;
	}	
	
	//IF THE USER ENTERS A REFERRAL CODE
	var code = $("#userefcode").val();
	
	// if there's already a referral code in the input field
	if(code) {
		check_org();
	}

	$('form').on('keyup', '#userefcode', function(){	  
		//e.preventDefault();
		check_org();
	});

	// once the user starts entering something, do this
	function check_org(){
		var code = $("#userefcode").val();
		
		//alert('Code: ' + code);
		
//		var ref_length = $("#userefcode").val().length;
//		if (ref_length === 0) {
//			$("#userefcode").css("background", "rgba(0,0,0,.4);");
//		} 
		//alert('Length: ' + ref_length);

		$.ajax({
		  url: "/auth/validatePC",
		  type: "POST",
		  data: {c: code},
		  success: function(d) {
				//alert('Typing..');
				//alert(d);
				if (d > 0) {
				  //alert('We found your Referral Code!');	
				  $("#userefcode").val(code); 
				  $("#userefcode").css("background", "#27C427");
				  //$("#refmsg").html("Your Organization Name looks valid!");
				  //$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');
				} else {
					//alert('No');
				  //alert('Ooops we could not find that Organization.');
				  $("#userefcode").css("background", "#cd1000");
				  //$("#refmsg").html("Continue typing until the background turns green, which indicates your Company Name is valid.");
				} 
				return false;
		  }// success
		}); // ajax
		return false;
    }
	
	// NOW, LET'S CHECK TO SEE IF THE USER'S CUSTOM REFERRAL CODE ALREADY EXISTS
	//the min chars for ref 
	var min_chars = 3;  

	//result texts  
	var characters_error = 'Minimum amount of chars is 3';  
	var checking_html = 'Checking...';  

	//when button is clicked or keyup
	$("#ref").keyup(function(){  
		
	// $('#check_username_availability').click(function(){  
		//run the character number check  
		if($('#ref').val().length < min_chars){  
			//if it's bellow the minimum show characters_error text '  
			$('#username_availability_result').html(characters_error);  
		}else{  
			//else show the cheking_text and run the function to check  
			$('#username_availability_result').html(checking_html);  
			check_availability();  
		}  
	});  

	// CHECK TO SEE IF THE CUSTOM REF IS AVAILABLE
	//function to check ref availability  
	function check_availability(){  
		//get the ref  
		var ref = $("#ref").val().toLowerCase().replace(/[^a-zA-Z0-9 _]/g,''); 

		//var ref1 = isValidEmailAddress(reffield); 
		
		if(ref) {
			$.ajax({
			  url: "/auth/checkRef",
			  type: "POST",
			  data: {ref: ref},
			  success: function(result) {
				if (result == 1) {
					$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');  	
				}
				else {
					$('#username_availability_result').html('Sorry, <span style="color:#ff0000; font-weight:bold;">' + ref + '</span>' + ' is not Available');
				}
				return false;
			  }
			});
			return false;
		}			
  
		//use ajax to run the check  
		//$.post("check_username.php", { username: username },  
		//	function(result){  
				//if the result is 1  
		//		if(result == 1){  
					//show that the username is available  
		//			$('#username_availability_result').html(username + ' is Available!');  
		//		}else{  
					//show that the username is NOT available  
		//			$('#username_availability_result').html(username + ' is not Available');  
		//		}  
		//});  
	  
	}   		
</script>

<?php
include('views/_footer_m.tpl.php');
?>