<!DOCTYPE html>
<!-- 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
 -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
-->
	<style type="text/css">
		.picture img {
			width: 800px;
		}
	
		.picture {
			display: block;
			text-align: center;
		}

<? if ($_GET['card'] === '0' || $_GET['card'] === 0) { ?>
		* {color: #fff;}
<? } ?>
<? if ($_GET['card'] === '3' || $_GET['card'] === 3) { ?>


/*		.to:before {
			content: "<? echo $_GET['to'] ?>";
		}
*/
		.to {
			position: absolute;
			text-align: center;
		    font-size: 150%;
		    top: 97px;
			width: 100%;
		}


/*		.from:before {
			content: "<? echo $_GET['from'] ?>";
		}
*/

		.from {
			position: absolute;
			text-align: center;
			font-size: 150%;
			top: 170px;
			width: 100%;
			font-family: "Bell MT Regular", "Bell MT";
		}

		.cardid {
			position: absolute;
			text-align: center;
			font-size: 130%;
			top: 215px;
			width: 150%;
			/*font-family: "Bell MT Regular", "Bell MT";*/
		}
		.cardlabel {
			position: absolute;
			text-align: center;
			font-size: 150%;
			top: 134px;
			width: 100%;
			font-family: "Bell MT Regular", "Bell MT";
		}

<? } else { ?>
		.cardid {
			position: absolute;
			text-align: center;
		    font-size: 180%;
		    top: 395px;
			width: 100%;
			/*font-family: "Times New Roman", Times, serif;*/
		}
		.cardlabel {
			position: absolute;
			text-align: center;
			font-size: 210%;
			top: 450px;
			width: 100%;
			/*font-family: "Bell MT Regular", "Bell MT";*/
		}

<? } ?>
/*		.cardid {
		    position: absolute;
		    text-align: center;
		    font-size: 300%;
		    top: 545px;
		    width: 100%;
		}
		.cardlabel {
		    position: absolute;
		    text-align: center;
		    font-size: 400%;
		    top: 625px;
		    width: 100%;
		}
*/





		#header {
			display: block;
			text-align: center;
		}
		.messagearea {
			display: block;
			text-align: center;
			margin-top: 200px;
			font-size: 150%;
		}

	</style>
    <title>Gift Certificate</title>
</head>

<body>
	<?
    	$valid = false;
    	$error = 'Unspecified Error';

    	if (isset($_GET['id'])) {
		    include('_functions2.php');
		    $check = transferCheck($_GET['id']);

		    if (strlen($check) > 30) {
		    	$valid = false;
		    	$error = 'This gift card has been transfered.';
		        
		    } else {
		    	$cert = certificatePrint($_GET['id']);
		    	if (sizeof($cert)) {
			    	if ($cert[0]['used']) {
				    	$valid = false;
				    	$error = 'This gift card has been used.';
			    	} elseif ($cert[0]['del']) {
				    	$valid = false;
				    	$error = 'This gift card has been deleted.';
			    	} else {
			    		$valid = true;
			    	}

		    	} else {
			    	$valid = false;
			    	$error = 'This gift card has been deleted.';
		    	}
		                              
		    }

    	} else {
	    	$valid = false;
	    	$error = 'Missing ID';
	    	$check = '';
    	}

	?>
<!-- 
	<nav style="text-align: center;">
		<div id="home">home</div>
	</nav>
-->
    <div id='main'>
		<? if ($valid) { ?>


    		<div class='picture'>
    		<? if ($_GET['card'] === '1' || $_GET['card'] === 1) { ?>
    			<img src="images/print_gold_card.jpg">
    		<? } else if ($_GET['card'] === '3' || $_GET['card'] === 3) { ?>
    			<img src="images/The_Certificate.png">

    		<? 	} else { ?>
    			<img src="images/print_black_card.jpg">
    		<? } ?>
    		</div>
    	<div id='content' style="text-align: center;">
    	</div>
    	<div class="cardid">#<? echo $cert[0]['label']; ?></div>
    	<div class="cardlabel"><? echo $cert[0]['dvalue']; ?></div>
    	<div class="to"><? if ($_GET['card'] === '3' || $_GET['card'] === 3) { echo $_GET['to']; } ?></div>
    	<div class="from"><? if ($_GET['card'] === '3' || $_GET['card'] === 3) { echo $_GET['from']; } ?></div>

    	<? } else { ?>
    		<div id="header">
    			<img src="images/logo.jpg" id="logo" alt="" />
    		</div>
    		<div class="messagearea">
    			<div class="error">There is an issue with this eGift Card. 
    				<br /> 
    				<br /> 
    				If you feel that you have reached this message in error, please contact Signature&nbsp;Massage&nbsp;&amp;&nbsp;Facial&nbsp;Spa&nbsp;at&nbsp;813&#8209;925&#8209;8898 
    				<br />
    				<br />
    				Our apologies for any inconvenience.
    			</div>
    				<br />
    				<br />
    			<div class="specificerror">Error: <? echo $error; ?></div>
    		</div>
    	<? } ?>
    </div>


    <script type="text/javascript">

		window.onbeforeprint = function() {
			if ( $('#changeInfo').length ) {
				$('#changeInfo').remove();
			}
		}

    	spa = {}
		spa.text = {
			record: 0,
			guid: '',
		    fixCase: function() {
		    	var to = $('.to').text();
		    	$('.to').text( to.toProperCase() );

		    	var from = $('.from').text();
		    	$('.from').text( from.toProperCase() );


		    }, //==============================================
		    getUrlVars: function() {
				var vars = {};
					var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function( m, key, value ) {
				vars[key] = value;
				});
				return vars;
		    }, //==============================================
		    getUrlParam: function( parameter, defaultvalue ) {
				var urlparameter = defaultvalue;
				if( window.location.href.indexOf( parameter ) > -1 ) {
					urlparameter = spa.text.getUrlVars()[parameter];
				}
				return urlparameter;
		    }, //==============================================
		    addButton: function() {
		    	spa.text.closeForm();
		    	if ( spa.text.getUrlParam( 'card' ) === '3' || spa.text.getUrlParam( 'card' ) === 3 ) {
					$('body').append('<div id="changeInfo" style=" width: 160px; padding: 10px; border: 1px solid #ccc!important; border-radius: 16px; font-family: sans-serif; position: fixed; bottom: 0px; left: 50%; transform: translate(-50%, -50%); " ></div>');



					$('#changeInfo').append('<div id="close" style="float:right;color:red;font-weight: bolder;" onclick="spa.text.closeForm();">X</div>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<button id="changeInfoButton" style="display: block; margin-left: auto; margin-right: auto;" onclick="spa.text.addForm();">Change To or From</button>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<br/>');
		    	}
		    }, //==============================================
		    addForm: function() {
					$('#changeInfo').html('');
					$('#changeInfo').width(200);
					$('#changeInfo').append('<div id="close" style="float:right;color:red;font-weight: bolder;" onclick="spa.text.closeForm();">X</div>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<div id="theForm" style=" text-align: center; display: block; margin-left: auto; margin-right: auto;"></div>');
					$('#changeInfo').append('<br/>');
					$('#changeInfo').append('<br/>');
					$('#theForm').append('<div>To</div>');
					$('#theForm').append('<div><input type="text" id="ToField"></div>');
					$('#theForm').append('<br/>');
					$('#theForm').append('<div>From</div>');
					$('#theForm').append('<div><input type="text" id="FromField"></div>');
					$('#theForm').append('<br/>');
					$('#theForm').append('<button id="changeInfoButton" style="display: block; margin-left: auto; margin-right: auto;" onclick="spa.text.sendForm();">Update</button>');
					var to = decodeURIComponent( spa.text.getUrlParam( 'to' ) );
					var from = decodeURIComponent( spa.text.getUrlParam( 'from' ) );


					if ( typeof to === 'undefined' ) {
						to = '';
					}

					if ( typeof from === 'undefined' ) {
						from = '';
					}


					if ( to.includes('undefined') ) {
						to = '';
					}

					if ( from.includes('undefined') ) {
						from = '';
					}

					while ( to.includes('+') ) {
						to = to.replace( '+', ' ' );
					}
					while ( to.includes('  ') ) {
						to = to.replace( '  ', ' ' );
					}
					while ( from.includes('+') ) {
						from = from.replace( '+', ' ' );
					}
					while ( from.includes('  ') ) {
						from = from.replace( '  ', ' ' );
					}
					$('#ToField').val( to );
					$('#FromField').val( from );
					
		    }, //==============================================
		    closeForm: function() {
				if ( $('#changeInfo').length ) {
					$('#changeInfo').remove();
				}
		    }, //==============================================
		    sendForm: function() {
		    	var page = location.href.split('?');
		    	location.href = page[0] + '?card=' + spa.text.getUrlParam( 'card' ) + '&id=' + spa.text.getUrlParam( 'id' ) + '&to=' + encodeURIComponent( $('#ToField').val() )  + '&from=' + encodeURIComponent( $('#FromField').val() );
		    }, //==============================================
		    nullFunction: function(data) {
		    	console.log(data);
				// appName.form.two();
		    } //==============================================
		}
		setTimeout(function(){ spa.text.addButton(); }, 2000);
		

		String.prototype.toProperCase = function () {
		    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
		};

		setTimeout(function(){ spa.text.fixCase(); }, 500);

    </script>

</body>

</html>
