<?php
//include('./views/_header.tpl.php');
include '../framework/init.php';
// Include the configuration file 
require_once 'config.php';

// Include the database connection file 
require_once 'dbConnect.php';

$payment_ref_id = $statusMsg = '';
$memberID = 0;
$status = 'error';
// https://crowdkode.com/pay/payment-status.php?checkout_ref_id=2B839807CM6626219
// Check whether the payment ID is not empty
if(!empty($_GET['checkout_ref_id'])){
	$payment_txn_id  = base64_decode($_GET['checkout_ref_id']);
	//$payment_txn_id  = $_GET['checkout_ref_id'];
	//echo "Not empty: " . $payment_txn_id;
	// Fetch transaction data from the database
	$sqlQ = "SELECT id,item_name,payer_id,payer_name,payer_email,payer_country,order_id,transaction_id,paid_amount,paid_amount_currency,payment_source,payment_status,created,chID,memID FROM transactions WHERE transaction_id = ?";
	$stmt = $db->prepare($sqlQ); 
	$stmt->bind_param("s", $payment_txn_id);
	$stmt->execute();
	$stmt->store_result();

	if($stmt->num_rows > 0){
		// Get transaction details
		$stmt->bind_result($payment_ref_id, $item_name, $payer_id, $payer_name, $payer_email, $payer_country, $order_id, $transaction_id, $paid_amount, $paid_amount_currency, $payment_source, $payment_status, $created, $challengeID,$memberID);
		$stmt->fetch();
		
		$status = 'success';
		$statusMsg = 'Your Payment was Successful!';
	}else{
		$statusMsg = "The transaction failed!";
	}
	
	// GET THE CHALLENGE INFO 
	$sqlQ2 = "SELECT title FROM projects WHERE id = ?";
	$stmt2 = $db->prepare($sqlQ2);
	$stmt2->bind_param("s", $challengeID);
	$stmt2->execute();
	$stmt2->store_result();

	if ($stmt2->num_rows > 0) {
		// Get transaction details
		$stmt2->bind_result($challengeTitle);
		$stmt2->fetch();
	}
	
	// GET THE USER'S BALANCE
	$sqlQ2 = "SELECT credits FROM users WHERE id = ?";
	$stmt2 = $db->prepare($sqlQ2);
	$stmt2->bind_param("i", $memberID);
	$stmt2->execute();
	$stmt2->store_result();

	if ($stmt2->num_rows > 0) {
		// Get transaction details
		$stmt2->bind_result($totalCurrentCredits);
		$stmt2->fetch();
	}
}else{
	header("Location: index.php");
	exit;
}
?>

<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%;
	}
	.btn-link {
		color: #2a94fe;
		background-color: transparent;
		border-color: #2a94fe;
	}

</style>

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>CrowdKode Payment Status</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
	<script src="https://kit.fontawesome.com/528dc48127.js" crossorigin="anonymous"> </script>
	
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="apple-touch-icon" href="/assets/logo.png" />
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script>

	<!-- Stylesheet file -->
	<link href="css/style.css" rel="stylesheet">
	<style>
		body, html {
			font-family: Montserrat,Helvetica,Verdana,sans-serif;
		}
		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%;
		}
		b {
			font-weight: 400; color:#aaa;
		}
		a, a:active, a:visited, a:link {
			text-decoration: none;
		}
		h1 {
			font-weight: 400;
		}
		h1, h2, h3, h4, h5, h6 {
			font-family: Montserrat,Helvetica,Verdana,sans-serif;
		}
		h4, .status h4 {
			text-transform: uppercase;
			color: #ccc;
			font-size:.7em;
			font-weight:600;
		}
		
		h1.success { color:#00C617; font-size:22px; }
		
		/* ################################### */
		/*            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) {
			.logintext {
				margin-bottom: 7px;
			}
		}

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

		/* Landscape phones and down */
		@media (max-width: 586px) {
			h1.success {
				font-size: 19px;
				font-weight: 400;
				font-family: Montserrat,Helvetica,Verdana,sans-serif;
			}
			h4, .status h4 {
				text-transform: uppercase;
				color: #ccc;
				font-size: .7em;
				font-weight: 600;
			}
			.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, iPhone SE */
		@media (max-width: 375px) {
			.logintext {
				margin-bottom: 7px;
			}
		}
	</style>
</head>
<body>
<div class="mobileheaderfiller" style="display:none; position:absolute; height:40px; 
background:#000; width:100%;">
	&nbsp;
</div>
<!-- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 -->
<div class="container">
	<div class="status" style="max-width:500px; margin:0 auto; background:none; 
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0; color:#fff;">
		<?php if(!empty($payment_ref_id)){ ?>
		
			<center><img src="/static/client/crowd_kode_logo_hires.png" 
				style="max-width:450px; width:85%; margin-bottom:-15px;" 
				alt="CrowdKode" /></center>
		
			<h1 class="<?php echo $status; ?>"><?php echo $statusMsg; ?></h1>
			
			<div style="font-size:12px; line-height:17px; text-align:center; letter-spacing: 2px;
					 margin-bottom:10px;">
				YOUR VOTES BALANCE
			</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>-->
			
			<?php if($_SESSION['user']['id']) : ?>
				<div style="text-align:center; height:48px; line-height:48px;">
					<img src="/static/client/crowd-coin-sparkle.png" alt="C" align="middle"
					style="height:35px; margin:-25px 0 0 3px;"> <span class="animatedloyaltytix" 
					style="font-size:36px;"></span> votes 
				</div>
			<?php else : ?>
				<div style="text-align:center; height:48px; line-height:48px;">
					<img src="/static/system/animated_checkmark_vote.gif" alt="X" align="middle"
					style="height:25px; margin:-12px 0 0 3px;"> <a 
					href="/auth/login" title="Login" style="color:#75caff;">Login</a> to see Coins balance
				</div>			
			<?php endif; ?>
			
			<input class="myloyaltytix" type="hidden" value="<?php echo $totalCurrentCredits ?>">
			
			<input class="mynewtix" type="hidden" value="<?php echo $challengeID; ?>">
			
			<!--<img src="/static/client/goldstar_sparkly.png" alt="*"
			style="margin-top:-10px; height:40px;" />-->
			
			<h4>Payment Information</h4>
			<p><b>Trans. Reference Number:</b> <?php echo $payment_ref_id; ?></p>
			<p><b>Order ID:</b> <?php echo $order_id; ?></p>
			<p><b>Transaction ID:</b> <?php echo $transaction_id; ?></p>
			<p><b>Paid Amount:</b> $<?php echo $paid_amount.' '.$paid_amount_currency; ?></p>
			<p><b>Payment Status:</b> <?php echo $payment_status; ?></p>
			<p><b>Date:</b> <?php echo $created; ?></p>
			<br />
			<h4 style="margin-top:10px;">Payer Information</h4>
			<p><b>Payer ID:</b> <?php echo $payer_id; ?></p>
			<p><b>Name:</b> <?php echo $payer_name; ?></p>
			<p><b>Email:</b> <?php echo $payer_email; ?></p>
			<p><b>Country:</b> <?php echo $payer_country; ?></p>
			<br />
			<h4 style="margin-top:10px;">Order Information</h4>
			<!--<p><b>Challenge:</b> <?php echo $challengeTitle; ?></p>-->
			<p><b>Item Name:</b> <?php echo $item_name; ?></p> <!-- was $itemName -->
			<!--<p><b>Price:</b> <?php echo $itemPrice.' '.$currency; ?></p>-->
			<p><b>Votes:</b> <?php echo $challengeID; ?></p>
			<!-- / (<?php echo $totalCurrentCredits; ?> / <?php echo $memberID; ?>) -->
		<?php }else{ ?>
			<h1 class="error">Ooops! Your Payment failed!</h1>
			<br />
			<p class="error"><?php echo $statusMsg; ?></p>
			<br /><br />
			<!-- https://crowdkode.com/pay/payment-status.php?checkout_ref_id=MkJZNjY1MzJOVjU0NjQwNDM= -->
		<?php } ?>
	</div>
	<br />
	<center>
		<?php
			$parts = explode(':', $item_name);
			$challengeIDNum = array_pop($parts);
			//echo $challengeIDNum;
			//echo $challengeID;
			if (!empty($challengeID)){
		?>
			<!--<a href="/load" class="btn-link"><i class="fa fa-angle-left" 
			aria-hidden="true"></i>Back to Load page</a>-->
			<a href="/load" class="btn-link">Load page</a> &nbsp;&nbsp;
			
			<a href="/pricing" class="btn-link">Pricing page</a>
		<?php } elseif (!empty($challengeIDNum)) { ?>
			<!--<a href="/challenge/<?= $challengeIDNum ?>" class="btn-link">
			<i class="fa fa-angle-left" aria-hidden="true"></i> Back to Challenge</a>-->
			<a href="/load" class="btn-link">Load page</a> &nbsp;&nbsp;

			<a href="/pricing" class="btn-link">Pricing page</a>
		<?php } else { ?>
			<a href="/load" class="btn-link">Load page</a> &nbsp;&nbsp;
			
			<a href="/pricing" class="btn-link">Pricing page</a>
		<?php } ?>
		<!--<a href="index.php" class="btn-link">Back to Payments Page</a>-->
	</center>
	<br /><br />
</div>
</body>
</html>

<script type="text/javascript">
	$(document).ready(function() {
		//alert('JQuery works');
		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());
			}
		});
		// COINS BALANCE
		var totalCredits = $('.myloyaltytix').val();
		var newCoins = $('.mynewtix').val();
		//var newTotalCoins = parseInt(totalCredits) + parseInt(newCoins);
		var newTotalCoins = parseInt(totalCredits); // we now update the users tbl 'credits' (ie coins) 
		// as part of this payment process, so we just pull the current 'credits' column total
		
		$({ Counter: 0 }).animate({
			Counter: newTotalCoins
		}, {
			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());
			}
		});
	});
</script>