<div class="modal fade" id="modalPaypal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title" id="myModalLabel"><?php __('plugin_paypal_payment_title') ?></h4>
			</div>
			<div class="modal-body">
				<div id="paypal-button-container"></div>
			</div>
		</div>
	</div>
</div>

<script>
(function ($, undefined) {
	var PAYPAL_SCRIPT = 'https://www.paypal.com/sdk/js?client-id=<?php echo $tpl['arr']['merchant_id'];?>&currency=<?php echo $tpl['arr']['currency_code']; ?>';
	var paypalRendered = false;
	var paypalReady = false;

	function loadPaypalScript(callback) {
		if (window.paypal) {
			callback();
			return;
		}

		var existingScript = document.querySelector('script[src^="https://www.paypal.com/sdk/js"]');
		if (existingScript) {
			existingScript.addEventListener('load', callback);
			existingScript.addEventListener('error', function () {
				showPaypalError('PayPal could not be loaded. Please try again.');
			});
			return;
		}

		var script = document.createElement('script');
		script.setAttribute('src', PAYPAL_SCRIPT);
		script.onload = callback;
		script.onerror = function () {
			showPaypalError('PayPal could not be loaded. Please try again.');
		};
		document.head.appendChild(script);
	}

	function showPaypalError(message) {
		$('#modalPaypal').find('.modal-body').html($('<div/>').text(message).html());
	}

	function renderPaypalButtons() {
		if (paypalRendered) {
			return;
		}
		if (!window.paypal || typeof window.paypal.Buttons !== 'function') {
			showPaypalError('PayPal could not be loaded. Please try again.');
			return;
		}

		paypalRendered = true;
		window.paypal.Buttons({
		    createOrder() {
		        // This function sets up the details of the transaction, including the amount and line item details.
		        return fetch("<?php echo PJ_INSTALL_URL; ?>index.php?controller=pjPaypal&action=pjActionCreateOrder&foreign_id=<?php echo $tpl['arr']['option_foreign_id'];?>", {
		            method: "POST",
		            headers: {
		                "Content-Type": "application/json",
		            },
		            body: JSON.stringify({
		                cart: {
		                	reference_id: "<?php echo $tpl['arr']['custom']; ?>",
		                    amount: "<?php echo $tpl['arr']['amount']; ?>",
		                    currency: "<?php echo $tpl['arr']['currency_code']; ?>",
		                    description: "<?php echo htmlspecialchars($tpl['arr']['item_name']); ?>"
		                }
		            })
		        }).then(function(res) {
		            return res.json();
		        }).then(function(res) {
					if (!res || !res.id) {
						throw new Error(res && res.message ? res.message : 'PayPal order could not be created.');
					}
		            return res.id;
		        });
		    },
		    onApprove(data) {
		    	return fetch("<?php echo $tpl['arr']['notify_url']; ?>", {
		            method: "POST",
		            body: JSON.stringify({
		            	custom: "<?php echo $tpl['arr']['custom']; ?>",
		            	paypal_order_id: data.orderID
		            })
		        })
		        .then((response) => response.json())
		        .then((details) => {
		            window.location.href = details && details.location ? details.location : "<?php echo $tpl['arr']['return_url']; ?>";
		        });
		    },
		    onCancel(data) {
		        window.location.href = "<?php echo $tpl['arr']['notify_url']; ?>&custom=<?php echo urlencode($tpl['arr']['custom']); ?>&cancel_hash=<?php echo urlencode($tpl['arr']['cancel_hash']); ?>";
		    },
		    onError(err) {
		    	showPaypalError(err && err.message ? err.message : String(err));
	      	}
		}).render('#paypal-button-container');
	}

	loadPaypalScript(function () {
		paypalReady = true;
		if ($("#modalPaypal").hasClass("in") || $("#modalPaypal").is(":visible")) {
			renderPaypalButtons();
		}
	});

	$("#modalPaypal").on("hidden.bs.modal", function () {
		// Cancel the order if the popup is closed by user.
		window.location.href = "<?php echo $tpl['arr']['notify_url']; ?>&custom=<?php echo urlencode($tpl['arr']['custom']); ?>&cancel_hash=<?php echo urlencode($tpl['arr']['cancel_hash']); ?>";
	});

	$("#modalPaypal").on("shown.bs.modal", function () {
		if (paypalReady) {
			renderPaypalButtons();
		}
	});

	$('#modalPaypal .modal-dialog').css('z-index', 1040);
	$('#modalPaypal').modal("show");
})((window.pjQ && window.pjQ.jQuery) || jQuery);
</script>
