<?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 DOI', 'Publication Charge (DOI + Hard Copy)', '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}paypal" 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" id="jcopiable">
					<div class="col s12 m12 l12" style="display:flex;align-items:end;">
						<div style="flex-grow:1">
							<label for="journal">journal name</label>
							<input type="text" name="journal[]" id="journal" list="journals" />
							<datalist id="journals">
								{$journals}
							</datalist>
						</div>
						<button type="button" style="background:#ddd;border:none;width:120px;height:32px;padding:0;border-radius:4px;margin:0 0 10px 10px;cursor:pointer" onclick="addMoreJournal()">Add More Journal</button>
					</div>
				</div>
				<div class="morejournals"></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>
	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 (r.u) {
			    location = r.u;
			}
			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 DOI' || v === 'Publication Charge (DOI + Hard Copy)' || 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('');
		}
	}

	function addMoreJournal() {
		$('.morejournals').append(`<div class="row journal mjd">${jcopiable.innerHTML}</div>`);
		$('.mjd button').text('Remove').attr('onclick', `$(this).closest('.journal.mjd').remove()`);
	}
</script>
<?php
require_once('footer.php');
?>