<?php
require_once('header.php');
echo '<div class="row head main"><div class="col s12 m12 l12 center-align"><h1>'.$pagetitle.'</h1></div></div>';

function countries()
{
	global $mysqli;
	$html = '';

	$stmt = $mysqli->prepare("SELECT nicename, phonecode FROM country WHERE phonecode != '0' ORDER BY nicename ASC") or die('An error occurred. Please try after some time.');
	$stmt->execute();
	$stmt->store_result();
	$stmt->bind_result($country, $phonecode);
	while ($stmt->fetch()) :
		$html .= $country ? '<option value="' . $country . '" data-phonecode="' . $phonecode . '">' . $country . '</option>' : '';
	endwhile;
	$stmt->close();
	return $html;
}
$countries = countries();

function journals()
{
	global $mysqli;
	$html = '';

	$stmt = $mysqli->prepare("SELECT journal FROM journals WHERE (journal != 'AkiNik Publications' AND journal != 'All Article Writing' AND status = 'enabled') ORDER BY journal ASC") or die($mysqli->error);
	$stmt->execute();
	$stmt->store_result();
	$stmt->bind_result($journal);
	while ($stmt->fetch()) :
		$html .= '<option value="' . trim($journal) . '">' . trim($journal) . '</option>';
	endwhile;
	$stmt->close();
	return $html;
}
$journals = journals();

$paymentTypes = array('Advertisement', 'Book Publication', 'Book Chapter Publication', 'DOI Charge', 'Hard Copy Charge', 'Journal Maintenance', 'Membership Charge', 'Parcel/Post Charge', 'Publication Charge', 'Publication Charge with Hard Copy', 'Subscription Charge', 'Other');
$paymentTypeOptions = '';
foreach ($paymentTypes as $paymentType) :
	$paymentTypeOptions .= '<option value="' . $paymentType . '">' . $paymentType . '</option>';
endforeach;

echo <<<EOJ
<div class="row">
	<div class="col s12 m12 l7" style="float:none;margin:auto;clear:both">
		<form action="{$baseurl}icici-test" method="post" name="paymentform" class="card form z-depth-0" onsubmit="return mp(this)">
			<input type="hidden" name="{$token_id}" value="{$token_value}" readonly />
			<input type="hidden" name="focus" value="{$en->encrypt('[MAKE_PAYMENT]')}" readonly />
			<input type="hidden" name="zipcode" value="" readonly />
			<div class="card-content">
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="currency">currency</label>
						<select name="currency" class="browser-default">
							<option value="USD">USD</option>
						</select>
					</div>
					<div class="col s12 m6 l6">
						<label for="amount">amount</label>
						<input type="text" name="amount" id="amount" maxlength="6" class="amount" />
					</div>
				</div>
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="name">name</label>
						<input type="text" name="name" id="name" />
					</div>
					<div class="col s12 m6 l6">
						<label for="email">email</label>
						<input type="text" name="email" id="email" />
					</div>
				</div>
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="country">country</label>
						<select name="country" class="browser-default" onchange="phonecode.value = this.value ? '+' + event.target.options[event.target.selectedIndex].dataset.phonecode : '';">
							<option value="" selected="selected">Select Country</option>
							{$countries}
						</select>
					</div>
					<div class="col s12 m6 l6">
						<label for="phone">WhatsApp/Mobile Number</label>
						<div style="display:flex;clear:both;">
							<input type="text" name="phonecode" id="phonecode" style="width:55px;padding:0 !important;text-align:center;background:#eee;" readonly />
							<input type="text" name="phone" id="phone" class="phone" onblur="if (this.value) { this.value = this.value.replace(/^0+/, ''); }" />
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col s12 m12 l12">
						<label for="address">address</label>
						<input type="text" name="address" id="address" />
					</div>
				</div>
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="city">city</label>
						<input type="text" name="city" id="city" />
					</div>
					<div class="col s12 m6 l6">
						<label for="state">state</label>
						<input type="text" name="state" id="state" />
					</div>
				</div>
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="pincode">pin code/post box no./zip code</label>
						<input type="text" name="pincode" id="pincode" />
					</div>
					<div class="col s12 m6 l6">
						<label for="payment_type">payment for</label>
						<select name="payment_type" id="payment_type" class="browser-default" onchange="M8H8pb(this.value)">
							<option value="" selected="selected">Select Payment For</option>
							{$paymentTypeOptions}
						</select>
					</div>
				</div>
				<div class="row hidden book_title">
					<div class="col s12 m12 l12">
						<label for="book_title">book title</label>
						<input type="text" name="book_title" id="book_title" />
					</div>
				</div>
				<div class="row hidden book_chapter">
					<div class="col s12 m12 l12">
						<label for="book_chapter">book chapter</label>
						<input type="text" name="book_chapter" id="book_chapter" />
					</div>
				</div>
				<div class="row hidden journal">
					<div class="col s12 m12 l12">
						<label for="journal">journal name</label>
						<input type="text" name="journal" id="journal" list="journals" />
						<datalist id="journals">
							{$journals}
						</datalist>
					</div>
				</div>
				<div class="row hidden ref_number">
					<div class="col s12 m12 l12">
						<label for="ref_number">article ref. number</label>
						<input type="text" name="ref_number" id="ref_number" />
					</div>
				</div>
				<div class="row hidden article_title">
					<div class="col s12 m12 l12">
						<label for="article_title">article title</label>
						<input type="text" name="article_title" id="article_title" />
					</div>
				</div>
				<div class="row hidden description">
					<div class="col s12 m12 l12">
						<label for="description">description</label>
						<input type="text" name="description" id="description" />
					</div>
				</div>
				<div class="row">
					<div class="col s12 m12 l12">
						<div class="g-recaptcha" data-sitekey="{$gSiteKey}"></div>
					</div>
				</div>
			</div>
			<div class="card-action right-align">
				<button type="submit" name="paynow" class="waves-effect btn-flat blue accent-3 white-text paynow">pay now</button>
			</div>
		</form>
	</div>
</div>
<div class="redirect"></div>
EOJ;
?>
<style>
#toast-container.customtoast {
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#toast-container .toast.customtoast {
	width: 380px;
	height: 60px;
	padding: 0 13px 0 15px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data-10-year-range.min.js"></script>
<script>
function mp(form) {
	$('.loader').show(0);$('.toast').remove();

	fetch(form.action, {method: 'post', mode: 'same-origin', cache: 'no-cache', headers: {'Accept': 'application/json'}, body: new FormData(form)}).then(r => r.json()).then(r => {
		if (typeof(r.text) !== 'undefined') {
			$('.loader').hide(0);
			M.toast({
				html: `<span>${r.text}</span><button class="btn-flat toast-action" style="background:none;color:#fff;margin:0;padding:0;" type="button" onclick="M.Toast.dismissAll();">CLOSE</button>`,
				displayLength: 5000,
				classes: 'customtoast'
			});
			$('#toast-container').addClass('customtoast');
		}
		if (typeof(r.html) !== 'undefined') {
			$('.redirect').html(r.html);
			if (typeof r.pg !== 'undefined' && r.pg === 'icici') {
				var paymentForm = $("#iciciform");
				var paymentParameters = paymentForm.serializeArray().filter(function(item) {
					return item.value !== "";
				}).reduce(function(obj, item) {
					obj[item.name] = item.value;
					return obj;
				}, {});
				const sharedSecret = "sharedsecret";
				var messageSignatureContent = [];
				const ignoreSignatureParameteres = ["hashExtended"];
				Object.keys(paymentParameters).filter(key => !ignoreSignatureParameteres.includes(key)).sort().forEach(function(key, index) {
					messageSignatureContent.push(paymentParameters[key]);
				});
				const messageSignature = CryptoJS.HmacSHA256(messageSignatureContent.join("|"), sharedSecret);
				const messageSignatureBase64 = CryptoJS.enc.Base64.stringify(messageSignature);
				$("input[name='hashExtended']").val(messageSignatureBase64);
			}
			document.redirect.submit();
		}
		if (typeof(grecaptcha) !== 'undefined') {
			grecaptcha.reset();
		}
	}).catch(e => {$('.loader').hide(0);M.toast({html: e,displayLength: 5000});}).finally(() => {});

	return false;
}

function M8H8pb(v) {
	if (v) {
		if (v === 'Book Publication') {
			$('.hidden').hide(0).find('input').val('');
			$('.book_title').show(0);
		} else if (v === 'Book Chapter Publication') {
			$('.hidden').hide(0).find('input').val('');
			$('.book_title, .book_chapter').show(0);
		} else if (v === 'DOI Charge' || v === 'Hard Copy Charge' || v === 'Parcel/Post Charge' || v === 'Publication Charge' || v === 'Publication Charge with Hard Copy') {
			$('.hidden').hide(0).find('input').val('');
			$('.journal, .ref_number, .article_title').show(0);
		} else if (v === 'Journal Maintenance' || v === 'Subscription Charge') {
			$('.hidden').hide(0).find('input').val('');
			$('.journal').show(0);
		} else {
			$('.hidden').hide(0).find('input').val('');
			$('.description').show(0);
		}
	} else {
		$('.hidden').hide(0).find('input').val('');
	}
}
</script>
<?php
require_once('footer.php');
?>