<?php 
	global $website_options;
	global $jcart;
	include('views/_header.tpl.php'); 
	$isCheckout = false;
?>

<!-- CART /  CHECKOUT INCLUDES -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="3rdparty/jcart-1.3/jcart/css/jcart.css" /><!-- ?v=60 -->
<script type="text/javascript" src="3rdparty/jcart-1.3/jcart/js/jcart.js"> </script>
<!-- CART /  CHECKOUT INCLUDES END -->	

<script type="text/javascript">
$(document).ready(function() {
//	$({ Counter: 0 }).animate({
//		Counter: $('.mybalance').val()
//	}, {
//		duration: 1000,
//		easing: 'swing',
//		step: function() {
//			$('.animatedbalance').text(Math.ceil(this.Counter).toLocaleString('en'));
//		}
//	});
	var totalLoaded = $('.mybalance').val();
	$({ Counter: 0 }).animate({
		Counter: totalLoaded
	}, {
		duration: 1000,
		easing: 'swing',
		step: function() {
			//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
			$('.animatedbalance').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
		},
		complete : function() {
			$('.animatedbalance').text(parseFloat(totalLoaded, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
		}
	});	
	
	var totalTickets = $('.myloyaltytix').val();
	$({ Counter: 0 }).animate({
		Counter: totalTickets
	}, {
		duration: 1000,
		easing: 'swing',
		step: function() {
			//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
			//$('.animatedloyaltytix').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
			$('.animatedloyaltytix').text(Math.ceil(this.Counter).toLocaleString('en'));
		},
		complete : function() {
			$('.animatedloyaltytix').text(Math.ceil(this.Counter).toLocaleString('en'));
			//$('.animatedloyaltytix').text(parseFloat(totalTickets, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
		}
	});	

//	$('#add-to-cart').submit(function() {
//		//alert('Yes');
//		$.ajax({
//			type: 'POST',
//			url: $(this).attr('action'),
//			dataType: 'json',
//			success: function(json) {
//				alert('Redirect');
//				window.location.href = "https://joincrossfireiq.com/checkout";
//			}
//		})
//		return false;
//	});
});	
</script>

<!-- MAY WANT TO REMOVE THE OVERFLOW HIDDEN STYLES, SO THE PAGE IS SCROLLABLE -->
<style type="text/css">
	html {
		/*overflow: hidden !important;*/
	}
	body {
		/* /static/images/pagebg.jpg */
		background: url('/static/images/pagebgnoise.jpg') no-repeat;
		background-size:cover; background-position:center center;
		background-color:#000 !important;
		height: 100%;
		/*overflow: hidden;*/
	}
	
	.btn-o, .btn-oo a {
		color: #FFF;
		text-transform: uppercase;
		font-weight: 700;
		background: #0297CF;
		color: #fff;
		border: 1px solid #0088bb;
		padding: 15px 10px;
		width: 150px;
		display: inline-block;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
		font-size: 14px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	.btn-o:hover {
		background: #00a5e4;
	}
	
	input[type="text"], input[type="number"] {
		height: 30px;
		background: #eee;
		color: #000;
		font-weight: 700;
		text-shadow:0px 1px 0px #fff;
		font-size: 15px;
		-webkit-appearance: textfield;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 0px !important;
		padding: 10px;
	}
	.links a { color:#ccc; }
	.links a:hover { color:#fff; }
	.half { float:left; width:50%; display:inline-block; overflow:hidden; }
	.logintext { margin-bottom:7px; }
	.balancediv { width:50%; }
	
	/* ################################### */
	/*            MOBILE STYLES            */
	/* ################################### */
	
	/* Portrait tablet to landscape and desktop */
	@media (min-width: 980px) and (max-width: 1024px) {
		.logintext {
			margin-bottom: 7px;
		}
	}
	
	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		.logintext {
			margin-bottom: 7px;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.spacer { padding-top:56px !important; }
		.logintext {
			margin-bottom: 7px;
		}
		.half { float:none; width:100%; display:block; overflow:hidden; padding-bottom:35px; }
		#leftbalancediv { margin-bottom:0px; }
		.balancediv { width:100%; display:block; }
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.logintext {
			margin-bottom: 7px;
		}
	}

	/* Older phones with super small screens */
	@media (max-width: 320px) {
		.logintext {
			margin-bottom: 7px;
		}
	}
</style>

<div class="mobileheaderfiller" style="display:none; position:absolute; height:40px; background:#000; width:100%;">
	&nbsp;
</div>
<div class="home-feature-category" style="border:none; color:#000; background:none;
font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;">
	<div class="container_12 clearfix">
		<div class="grid_12 marked-category">
		
			<div id="loader-container">
				<div id="loader"></div>
			</div>  
			
			<!--<div style="position:absolute; left:10px; top:100px; background:none;
				float:left; height:40px; width:40px; line-height:40px; color:#fff; font-size:24px; text-align:center;">
				<a href="/balances" style="color:#aaa; display:block;">
					<i class="fa fa-angle-left" aria-hidden="true"></i></a>
			</div>-->
			
			<div style="position:absolute; right:10px; top:100px; background:none;
				float:right; height:40px; width:40px; line-height:40px; color:#fff; font-size:20px; text-align:center;">
				<a href="/load" style="color:#aaa; display:block;">
					<i class="fa fa-refresh" aria-hidden="true"></i></a>
			</div>
			
<!--			<div class="ewalletlogo" style="text-align:center;">
				<img src="/static/system/flipmob_card.png" alt="FlipMob"
					style="max-width:330px; width:80%; margin-top:5px; margin-bottom:5px"  />
			</div>-->
			
			<div class="logintext" style="text-align:center; font-size:22px; line-height:28px;">
				<div style="line-height:28px; padding:10px 0 10px; max-width:90%; margin:0 auto 5px; color:#fff;">
					<?php
					if ($_SESSION['loggedin'] && $_SESSION['user_id']) {

						$my_balance = "$" . number_format($_SESSION['user']['virtual_balance']/100,0,".",",");
						$cust_label = "MEMBER NAME";
						$name = $_SESSION['user']['name'];
						$my_loyaltytix = number_format($_SESSION['user']['credits'],0,".",",");
						$clbreak = "<br />";
					} else {
						$my_balance = "$0.00";
						$name = "<a href='#login' class='loginpop' style='color:#5eb8ee'>Login</a> to view your balance.";
						$cust_label = "";
						$my_loyaltytix = 0;
						$clbreak = "";
					} ?>
					
					<span style="font-size:12px; letter-spacing: 2px;"><?= $cust_label ?></span><?= $clbreak ?>
					<span style="color:#fff; font-weight:600; font-size:25px"><?php echo $name; ?></span>
				</div>
				<div class="clear"></div>
			</div>
			<div style="border-bottom:1px solid #ccc; max-width:200px; margin:0 auto"></div>
			
			<div class="halfx" style="max-width:800px; margin:0 auto;">
			
				<div id="leftbalancediv" class="balancediv" style="float:left; font-size:38px; 
					line-height:45px; margin-top:20px; text-align:center; /*background:rgba(0,0,0,.3);*/
					border:0px solid rgba(255,255,255,.2); color:#fff; padding:10px 0;">
					
					<div style="font-size:12px; line-height:17px; text-align:center; letter-spacing: 2px; 
						margin-bottom:10px;">
						YOUR CURRENT BALANCE
					</div>
					
					$<span class="animatedbalance"><?= $balance_formatted ?></span>
					<input class="mybalance" type="hidden"
					value="<?= number_format(($balance/100),2,".","") ?>">
					
					<!--<span style="color:#00cb15; font-weight:700;"><?= $my_balance ?></span>-->
					<span style="display:none;">(ID: <?php echo $cust_id; ?>)</span>
				</div>
				<div class="balancediv" style="float:left; font-size:38px; text-align:center;
					line-height:45px; margin-top:20px; color:#fff; padding:10px 0;">
					<div style="font-size:12px; line-height:17px; text-align:center; letter-spacing: 2px;
					 margin-bottom:10px;">
						YOUR LOYALTY POINTS/STARS
					</div>
					
					<a href="#loyalty" class="loginpop"><img src="/static/client/info_icon_gold.png" 
					alt="[i]" style="margin-top:-5px; height:25px;" align="absmiddle" /></a>
		
					<span class="animatedloyaltytix"><?= $tickets_formatted ?></span>
		
					<input class="myloyaltytix" type="hidden"
					value="<?= number_format($tickets,0,".","") ?>"> <img 
					src="/static/client/goldstar_sparkly.png" alt="*" 
					style="margin-top:-10px; height:40px;" />
				</div>
				
				<div class="clear"></div>
				<br />
				<div style="width:100%; color:#fff; font-size:19px; line-height:26px;
					text-align:center; max-width:300px; margin:0 auto 5px">
					Add money to use for playing Trivia Challenges...
				</div>
				<form method="post" action="" class="jcart" style="background:none; max-width:300px; 
				margin:0 auto; border:0px; text-align:center;">
					<fieldset style="background:none; margin:0 auto; border:0px;">
						<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken']; ?>" />
						<input type="hidden" name="my-item-id" value="FantasyTriviaLoad" />
						<input type="hidden" name="my-item-name" 
						value="Add Challenge EntryPass Funds to FantasyTrivia" />
						<!--<input type="hidden" name="my-item-price" value="1.00" />-->

						<input type="hidden" name="my-item-url" value="" />
						<input type="hidden" name="my-item-img"
						value="/static/uploads/products/buy_tokens_product_image.png" />
						<input type="hidden" name="my-item-qty" value="1" size="7" min="1" max="100"
						style="text-align:center;" placeholder="qty" />

						<label><span style="font-weight:700; color:#bbb; font-size:17px;">$</span> <input
							type="number" inputmode="numeric" name="my-item-price" class="amount"
							placeholder="1+" pattern="[0-9]*" min="1" max="100"
							style="background:rgba(255,255,255,.3); color:#fff;
							text-shadow:1px 1px 1px rgba(0,0,0,.4); width:70px; font-size:20px; 
							font-weight:600; margin-top:-3px;" /></label>

						<?php
						if ($_SESSION['loggedin'] && $_SESSION['user_id']) { ?>

						<input type="submit" name="my-add-button" value="Checkout & Pay"
						class="btn-o" id="checkoutandpay" style="margin-bottom:4px; text-align:center;" />

						<?php } else { ?>

						<a class="btn-o loginpop" href="#login" style="text-align:center;">Login first</a>

						<?php } ?>

					</fieldset>
				</form>

				<div style="border:0px solid red; padding:0 0px 10px; text-align:center; color:#aaa; 
				margin:0 auto; max-width:200px; font-size:12px; -webkit-border-radius: 3px; 
				-moz-border-radius: 3px; border-radius: 3px;">
					Min. Load: $1 | Max Load: $100
				</div>	
				<div class="clear"></div>
				
			</div>
			
<!--			<div class="half" style="">


			</div>
			<div class="clear"></div>-->
				
			<div style="display:none">
			
				<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) { ?>
				
				<div style="background:url(/static/system/qr_code_reverse_scan_border.png) no-repeat center top; 
					height:210px; width:210px; padding-top:5px;
					text-align:center; margin:0 auto; background-size:contain"><img 
					src="/3rdparty/phpqrcode/customers/cust_<?php echo $_SESSION['user']['id'] ?>.png" 
					alt="My E-Wallet" 
					onerror="this.src='/static/system/qr_code_reverse_scan_border.png'" 
					style="height:180px; margin:10px;"></div>
				
				<?php } else { ?>
				
				<div style="background:url(/static/system/qr_code_reverse_scan_border.png) no-repeat center top;
					height:210px; width:210px; padding-top:5px;
					text-align:center; margin:0 auto; background-size:contain"><img 
					src="/3rdparty/phpqrcode/customers/cust_8.png" alt="My E-Wallet" 
					onerror="this.src='/static/system/qr_code_reverse_scan_border.png'"
					style="height:180px; margin:10px;"></div>			
				
				<?php } ?>
			</div>

			<div style="border-top:1px solid #ccc; width:150px; margin:0 auto;"></div>
			<br />

			<!--<center style="color:#777; font-size:12px; letter-spacing:2px; font-weight:600;">POWERED BY</center>-->		
			<div class="links" style="color:#aaa; text-align:center; max-width:90%; margin:0 auto;
				line-height:40px;">
				<a href="/ft" style="font-size:17px;">&lsaquo; <img 
				src="/favicon.png"
				alt="E-Wallet" style="width:22px; height:22px; margin-bottom:5px" />
					<!--<i class="fa fa-home" aria-hidden="true"></i>--> PLAY</a> &nbsp;|&nbsp; 
				<!--<a href="/shop" style="font-size:17px;"><i class="fa fa-shopping-bag" aria-hidden="true"></i> SHOP</a> &nbsp;|&nbsp; -->
				<!--<a href="/plans" style="font-size:17px;"><i class="fa fa-star" aria-hidden="true"></i> 
				PLANS</a> &nbsp;|&nbsp;-->
				<!--<a href="/balances" style="font-size:17px;">MY BALANCES</a> &nbsp;|&nbsp; -->
				<!--<img src="/static/system/ewallet_logo_339.png"
				alt="E-Wallet" style="max-width:150px; width:70%; margin-bottom:5px" />--> 
				<!--<a href="/pricing" style="font-size:17px;">UPGRADE MEMBERSHIP</a> &nbsp;|&nbsp;--> 
				<!--<a href="/load" style="font-size:15px;">LOAD</a> &nbsp;|&nbsp; -->
				<a href="/checkout" style="font-size:17px;"><i class="fa fa-credit-card" 
				aria-hidden="true"></i> CHECKOUT &rsaquo;</a> &nbsp;|&nbsp; 
				
				<a href="https://square.link/u/P5ryM4ap" style="font-size:17px;"><i 
				class="fa fa-credit-card" aria-hidden="true"></i> PAY VIA SQUARE &rsaquo;</a>
					
					
				
				<!--<br />
				<a href="/ewallet" class="refresh" style="color:#00cb15; font-weight:800"><i class="fa fa-refresh"></i></a>-->
			</div>
			<div class="clear"></div>

			<div style="width:100%; height:170px; background:none; text-align:center; padding:15px 25px;
			font-family: Montserrat,Arial, sans-serif; box-sizing:border-box; -moz-box-sizing:border-box;
			-webkit-box-sizing:border-box; color:#fff; font-size:11px; font-weight:400;">
				powered by<br />
				<a href="https://voiceenabled.com"><img src="/static/client/voiceenabled_crest.png" alt="VE"
					style="height:100px; margin:5px 0 -15px;" align="absmiddle" /></a>
			</div>
			<div class="clear"></div>
			<center><a href="javascript:top.frames.location.reload();"
					class="refresh" style="color:#000; font-weight:800; font-size:17px;">
					<i class="fa fa-refresh"></i></a></center>
			
			<br /><br /><br /><br /><br /><br /><br /><br />
			
			<!--<center><a href="/payment-successful" style="color:#fff;">Success page</a></center>
			<br /><br />-->
			<!--<h1 style="text-shadow:0px 1px 1px rgba(0,0,0,.7);">PAGE TITLE</h1>-->

		</div><!-- GRID 12 DIV ENDS HERE -->
	</div><!-- CONTAINER 12 DIV END HERE -->
</div><!-- HOME FEATURE CATEGORY DIV ENDS HERE -->

<script type="text/javascript">
	$(document).ready(function() {

		$('.amount').keyup(function () {
			this.value = this.value.replace(/[^0-9\.]/g,'');
		});
		
		$('.amounttix').keyup(function () {
			this.value = this.value.replace(/[^0-9\.]/g,'');
			
			var load_amount =  $(".amounttix").val();
			//alert('Load Amount : ' + load_amount);

			if (load_amount >= 1) {
				var ticketsAmt = load_amount * 100;
				var tixFormatted = parseInt(ticketsAmt).toLocaleString("en");
				//alert('It should update');
				$(".LoyaltyTix").val(tixFormatted + ' FlipMob Loyalty Tickets');
				$(".howmanytix").html('<b>' + tixFormatted + '</b>');
			}	
		});

		$("#checkoutandpay").click(function(e) {
			
//			alert('Clicked');
//			e.preventDefault();
//			return false;
		
			var load_amount =  $(".amount").val();
			//alert('Tokens: ' + token_amount);
			
			//if (token_amount < 10) {
			//	e.preventDefault();
			//	alert('The minium load amount is $10.');
			//	return false;
			//}
			if (load_amount > 100) {
				e.preventDefault();
				alert('The maximum load amount is $100.');
				return false;
			}			

			if (! $(".amount").val().length) {
				e.preventDefault();
				alert('You must enter an amount first...');
				return false;
			}

			//alert('Tokens: ' + token_amount);

			//return true;
		});

		$("#checkoutandpay2").click(function(e) {
		
			var load_amount =  $(".amounttix").val();
			var checkTixAmt = $(".LoyaltyTix").val();

			if (load_amount > 100) {
				e.preventDefault();
				alert('The maximum load amount is $100 or 10,000 Tickets.');
				return false;
			}		

			if (! $(".amounttix").val().length) {
				e.preventDefault();
				alert('You must enter an amount of Tickets first...');
				return false;
			}
			
			if (load_amount >= 100 && !checkTixAmt) {
				//alert('There is no LT Amt');
				var ticketsAmt = load_amount * 100;
				var tixFormatted = parseInt(ticketsAmt).toLocaleString("en");
				//alert('It should update');
				$(".LoyaltyTix").val(tixFormatted + ' Loyalty Tickets');
				$(".howmanytix").html('<b>' + tixFormatted + '</b>');
			}	
			//alert('Tokens: ' + token_amount);
			//return true;
		});			

	});
</script>

<!-- LOYALTY INFO -->
<div style="display:none;">
	<div id="loyalty" style="max-width:560px;">
		<div class="overlay-bl-bg"></div>
		<div class="container_6 pop-contentXXXX" style="background:none !important;">
			<div class="" style="background:none !important;">
				<div class="formXXX login-formXXX">
					<!-- CONTENT CONTAINER STARTS HERE -->
					<div class="box-white" style="border:0px; min-width:250px; max-height:300px;
					height:auto; padding:0px; background:none !important; margin-top:-30px !important;">

						<div style="background:#fff; float:left; padding:25px; color:#444; font-size:16px; 
						font-weight:300; text-align:left; font-family: Montserrat,'Open Sans',sans-serif;
						font-weight:normal; line-height:24px;">

							<h2 style="text-align:center; margin:0 auto 10px; line-height:25px; font-size:17px;
							font-family: Montserrat,'Open Sans',sans-serif; font-weight:700; max-width:400px;">
								<!--If you aren&rsquo;t part of the 1%, then FlipMob was made for YOU-->
								FantasyTrivia
							</h2>

							Note: We&rsquo;re still working on our Loyalty Program. 
							<br /><br />
							In general FantasyTrivia wants to reward various activities and purchases 
							with Loyalty Points/Stars, which can be redeemed for various perks, rewards
							as well as increases members&rsquo; chances of winning Consolation Prizes
							for the Challenges they enter/join.
							<br /><br />
							
							<!--&rsquo; &ldquo;withdraw&rdquo;-->

						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>

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