Untitled

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel = "stylesheet" type = "text/css" href = "css/main.css" />
	<link rel = "stylesheet" type = "text/css" href = "css/layout.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css">
	<link rel = "stylesheet" type = "text/css" href = "css/redemption.css" />
	<link rel = "stylesheet" type = "text/css" href = "css/main_mobile.css" />
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
	<script src = "javascript/common.js"></script>
	<link rel="shortcut icon" href="favicon.ico" />
	<title>Redemption</title>

</head>
<body onload = 'initFirebase(),retrievedata(),retrievedList("EZ-Link","EZLINK","ezlink-child"),retrievedList("NTUC","NTUC","ntuc-child");'>
	<nav>
		<!-- nav version 2  -->
		<div class="nav-content">
			<div id="navImg">
				<a href="index.html"><img src="image/websrc/LOGO.png" alt="LOGO" /></a>
			</div>
			<ul>
				<li  class="active"><a href="index.html" ><i class="material-icons md-36">home</i><p>Home</p></a></li>
				<li ><a href="product.html"><i class="material-icons md-36">book</i><p>Product</p></a></li>
				<li><a href="magazine.html"><i class="material-icons md-36">library_books</i><p>E-Magazine</p></a></li>
				<li><a href="courselist.html"><i class="material-icons md-36">school</i><p>Courses</p></a></li>
				<li><a href="redemptionGuide.html"><i class="material-icons md-36">casino</i><p>Redemption</p></a></li>
				<li><a href="index.html"><i class="material-icons md-36">domain</i><p>About</p></a></li>
				<li><a ><form method="get" action="/search" id="searchForm">
					<input id="searchInput" name="navSearch" type="text" size="40" placeholder="Search..." />
				</form></a></li>
			</ul>
			<ul class="loginbutton">
				<li><a id="loginImg"><i class="material-icons md-36">account_circle</i></a></li>
			</ul>
		</div>
	</nav>

	<!-- Page header -->
	<div class="card-sectionbar">
		<h1> Redeem Prize</h1>
		<div id = "point-bar">

			<h2 class = "right"> Points Available : <text id="Points"></text></h2>
		</div>
	</div>

	<div class="card">
		<div class="card-tab">
			<h1>EZ-Link Card Voucher</h1>
		</div>
		<div id = "EZLINK" class="card-innerContent">
		</div>
	</div>
	<div class="card">
		<div class="card-tab">
			<h1>NTUC Voucher</h1>
		</div>
		<div id = "NTUC" class="card-innerContent">
		</div>
	</div>


	<div class="card">
		<div class="card-tab">
			<h1>Lucky Draw</h1>
		</div>
		<img src = "http://bit.ly/2jPdi0J";></img>
		<div class = "right">
			<p class = "header"> Enter Code Found In Magazine : </p>
			<p><input type = "text" placeholder = "Your Code: "></input><input type = "button" value = "Claim Code" ></input></p>
		</div>
	</div>


	<footer>
		<!-- Footer version 1 -->
		<div class="footerL">
			<header>
				<h1>Get In Touch With Us</h1>
			</header>

			<div>
				<label class="fa fa-phone">Contact</label>
				<label class="fa fa-phone">Facebook</label>
				<label class="fa fa-phone">Location</label>
				<label class="fa fa-phone">Twitter</label>
				<label class="fa fa-phone">Email</label>
				<label class="fa fa-phone">Instagram</label>
			</div>
		</div>

		<div class="footerR">
			<header>
				<h1>Send Us a Message</h1>
			</header>

			<div>
				<form>
					<input type="text" id="mName" name="name" placeholder="Name"/> &emsp;
					<input type="email" id="mEmail" name="email" placeholder="Email"/></br></br>
					<textarea id="mMessage" name="message" placeholder="Please enter message here."></textarea></br>
					<input class="button" type="submit" value="Submit" onclick="sendMessage()"/>
					<input class="button" type="reset" value="Reset"/>
				</form>
			</div>
		</div>
	</div>
	<p>Copyright © 2016 NYP, Singapore. All rights reserved.</p>
</footer>

<script type = "text/javascript">
function retrievedata(){
	setIc("s0000000g");
	var path = 'user/'+ getIc() +"/"+ "Redemption"
	retrieveFromDB(path);
}

var Points;
var itemName = [];
function retrieved(childData){
	if(Number.isInteger(childData)){
		document.getElementById('Points').innerHTML = childData;
		console.log(childData);
		Points = childData;

	}
}
function calculate(Point,Cost){
if (Points >= Cost) {
	Points = Points - Cost;
	document.getElementById('Points').innerHTML = Points;
	console.log(Points);
	return true;}
else{return false;}


}

function retrievedList(root,divid,childid){
	var dbRef = firebase.database().ref('RedemptionList/' + root);	//#EZLinklistitem ,RedemptionList/EZ-Link,$(div).appendTo( "#EZLINK" );
	var counter = 0;

	dbRef.once('value',
	snapshot => {
		snapshot.forEach(function(childSnapshot){
			var childData = childSnapshot.val();
			itemName[counter] =childData.Name;
			$("<div class = 'card redemption-listitem' id = '"+childid + counter + "' ></div>").appendTo( "#"+divid );
			$("<img class = 'prizeImg' src =" + childData.url + " />").appendTo( "#"+childid+counter );
			$("<div class = 'card-innerContent'><h3>" + childData.Name + "</h3><p>"+childData.Description+"</p></div>").appendTo("#"+childid+counter);
			$("<button onclick = 'popup("+ childData.Points+","+counter +");' class='card-button-flat'>"+childData.Points+" Points</button>").appendTo( "#"+childid+counter );
			counter++;
		});
	});
}

function popup(Cost, index){
	//para(id,title,width)
	createPopup("myModal","Confirmation",500);

	$("<p>Confirm Redemption For "+ itemName[index] +" Voucher.</p>").appendTo( ".modal-content" );
	$("<h2 id = 'alerttext' ></h2>").appendTo(".modal-content");
	$("<button class = 'myBtn card-button-float' >Yes</button>").appendTo( ".modal-content" );
	$("<button class = 'myBtn card-button-float' >No</button>").appendTo( ".modal-content" );

	var ybtn = document.getElementsByClassName("myBtn")[0];
	var nbtn = document.getElementsByClassName("myBtn")[1];
	var modal = document.getElementById('myModal');

	ybtn.onclick = function(){
		if (calculate(Points,Cost) == true){
		modal.style.display = "none";
		$("#myModal").remove();}
		else{document.getElementById('alerttext').innerHTML="Not Enough Points";
		Window.setTimeout(function(){modal.style.display = "none";
		$("#myModal").remove();},5000);

	}}

	nbtn.onclick = function(){
		modal.style.display = "none";
		$("#myModal").remove();
	}

}

</script>

</body>
</html>