<?php

/**
 * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
 * @copyright Metaways Infosystems GmbH, 2013
 * @copyright Aimeos (aimeos.org), 2015-2021
 */

$enc = $this->encoder();


?>
<style>
.checkout-standard .button-group {
    display: block !important;
}
</style>
<?php 
$stripPublishableKey = '';
?>
<?php $this->block()->start( 'checkout/standard/payment' ) ?>
<section class="checkout-standard-payment">

	<h1><?= $enc->html( $this->translate( 'client', 'payment' ), $enc::TRUST ) ?></h1>
	<p class="note"><?= $enc->html( $this->translate( 'client', 'Please choose your payment method' ), $enc::TRUST ) ?></p>

	<?php foreach( $this->get( 'paymentServices', [] ) as $id => $service ) : ?>
		<div id="c_payment-<?= $enc->attr( $id ) ?>" class="item item-service row">

			<div class="col-sm-6">
				<label class="description" for="c_paymentoption-<?= $enc->attr( $id ) ?>">

					<input class="option" type="radio"
						id="c_paymentoption-<?= $enc->attr( $id ) ?>"
						name="<?= $enc->attr( $this->formparam( ['c_paymentoption'] ) ) ?>"
						value="<?= $enc->attr( $id ) ?>"
						<?= $id != $this->get( 'paymentOption' ) ?: 'checked="checked"' ?>
					>

					<?php if( $price = $service->price ) : ?>
						<?php if( $price->getValue() > 0 ) : ?>
							<span class="price-value">
								<?= $enc->html( sprintf( /// Service fee value (%1$s) and shipping cost value (%2$s) with currency (%3$s)
									$this->translate( 'client', '%1$s%3$s + %2$s%3$s' ),
									$this->number( $price->getValue(), $price->getPrecision() ),
									$this->number( $price->getCosts() > 0 ? $price->getCosts() : 0, $price->getPrecision() ),
									$this->translate( 'currency', $price->getCurrencyId() )
								) ) ?>
							</span>
						<?php elseif( $price->getCosts() > 0 ) : ?>
							<span class="price-value">
								<?= $enc->html( sprintf(
									/// Price format with price value (%1$s) and currency (%2$s)
									$this->translate( 'client/code', 'price:default', null, 0, false ) ?: $this->translate( 'client', '%1$s %2$s' ),
									$this->number( $price->getCosts() > 0 ? $price->getCosts() : 0, $price->getPrecision() ),
									$this->translate( 'currency', $price->getCurrencyId() )
								) ) ?>
							</span>
						<?php endif ?>
					<?php endif ?>

					<div class="icons">
						<?php foreach( $service->getRefItems( 'media', 'icon', 'default' ) as $mediaItem ) : ?>
							<?= $this->partial(
								$this->config( 'client/html/common/partials/media', 'common/partials/media-standard' ),
								array( 'item' => $mediaItem, 'boxAttributes' => array( 'class' => 'icon' ) )
							) ?>
						<?php endforeach ?>
					</div>

					<h2><?= $enc->html( $service->getName() ) ?></h2>

					<?php foreach( $service->getRefItems( 'text', null, 'default' ) as $textItem ) : ?>
						<?php if( ( $type = $textItem->getType() ) !== 'name' ) : ?>
							<p class="<?= $enc->attr( $type ) ?>"><?= $enc->html( $textItem->getContent(), $enc::TRUST ) ?></p>
						<?php endif ?>
					<?php endforeach ?>

				</label>
			</div>

			<div class="col-sm-6">
				<?php if($id == '22'){
					$stripPublishableKey = $service->getConfigValue('publishableKey');
				?>
				<ul class="form-list form-horizontal">
					<style> .StripeElement{min-width: 100%; width:100%;}</style>
					<div id="tokenDiv"></div>
					<div class="form-row">
						<div id="card-element" style="padding: 20px 10px;">
						</div>
					</div>
					<div class="form-row">
						<div id="card-errors" role="alert"></div>
					</div>
				</ul>
				<?php }else{ ?>
				<?php if( $attributes = $service->attributes ) : ?>
					<?= $this->partial(
						/** client/html/checkout/standard/partials/serviceattr
						 * Relative path to the checkout service attribute partial template file
						 *
						 * Partials are templates which are reused in other templates and generate reoccuring
						 * blocks filled with data from the assigned values. The service attribute partial creates
						 * an HTML block for the checkout delivery/payment option input/select fields.
						 *
						 * This is a very generic way to generate the list of service attribute pairs that will be
						 * added as order service attributes in the basket. Depending on the type of the attribute,
						 * it will create an input field, a select box or a list of selectable items. What attributes
						 * are available to the customer depends on the definitions in the service providers and the
						 * decorators wrapped around them.
						 *
						 * If you want to adapt the output to your own project and you know you only have a specific
						 * list of attributes, you can create the input and selections in a non-generic, straight
						 * forward way. The $serviceAttributes[$id] array contains an associative list of codes as
						 * keys (e.g. "directdebit.bankcode") and items implementing \Aimeos\MW\Criteria\Attribute\Iface
						 * as values, e.g.
						 *   directdebit.bankcode => \Aimeos\MW\Criteria\Attribute\Iface (
						 *	   code => 'directdebit.bankcode',
						 *	   internalcode => 'bankcode',
						 *	   label => 'Bank code',
						 *	   type => 'string',
						 *	   internaltype => 'string',
						 *	   default => '',
						 *	   required => true
						 *   )
						 *
						 * @param string Relative path to the template file
						 * @since 2017.07
						 * @category Developer
						 */
						$this->config( 'client/html/checkout/standard/partials/serviceattr', 'checkout/standard/serviceattr-partial-standard' ),
						['attributes' => $attributes, 'type' => 'payment', 'id' => $id]
					) ?>

				<?php endif ?>
				<?php } ?>

			</div>

		</div>
	<?php endforeach ?>


	<div class="button-group">
		<a class="btn btn-default btn-lg btn-back" href="<?= $enc->attr( $this->get( 'standardUrlBack' ) ) ?>">
			<?= $enc->html( $this->translate( 'client', 'Previous' ), $enc::TRUST ) ?>
		</a>
		<?php if(isset($stripPublishableKey) && !empty($stripPublishableKey)){ ?>
		<a href="javascript:void(0)" class="btn btn-primary btn-lg btn-action" id="payment-next-button">
			<?= $enc->html( $this->translate( 'client', 'Next' ), $enc::TRUST ) ?>
		</a>
		<button class="btn btn-primary btn-lg btn-action" id="payment-submit-button" style="display:none;">
			<?= $enc->html( $this->translate( 'client', 'Next' ), $enc::TRUST ) ?>
		</button>
		<?php }else{ ?>
		<button class="btn btn-primary btn-lg btn-action" >
			<?= $enc->html( $this->translate( 'client', 'Next' ), $enc::TRUST ) ?>
		</button>
		<?php } ?>
	</div>

</section>
<?php if(isset($stripPublishableKey) && !empty($stripPublishableKey)){ ?>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" nonce="' . $this->getContext()->nonce() . '">

window.onload = function(){
var stripe = Stripe('<?php echo $stripPublishableKey ?>');
var elements = stripe.elements();

var style = {
  base: {
    fontSize: '16px',
    color: '#32325d',
  },
};

var card = elements.create('card', {hidePostalCode: true, style: style});
card.mount('#card-element');

var form = document.getElementById('payment-next-button');
var submitbtn = document.getElementById('payment-submit-button');
form.addEventListener('click', function(event) {
	event.preventDefault(); 
	if($('input[name="c_paymentoption"]:checked').val() == '22'){
		stripe.createToken(card).then(function(result) {
		if (result.error) {
		  // Inform the customer that there was an error.
		  var errorElement = document.getElementById('card-errors');
		  errorElement.textContent = result.error.message;
		} else {
		  // Send the token to your server.
		  stripeTokenHandler(result.token);
		}
		});
	} else { 
		submitbtn.click();
	}
});

function stripeTokenHandler(token) {
	// Insert the token ID into the form so it gets submitted to the server
	var form = document.getElementById('tokenDiv');
	var hiddenInput = document.createElement('input');
	hiddenInput.setAttribute('type', 'hidden');
	hiddenInput.setAttribute('name', 'c_payment[22][paymenttoken]');
	hiddenInput.setAttribute('value', token.id);
	form.appendChild(hiddenInput);
	submitbtn.click();
}
}


</script>
<?php } ?>
<?php $this->block()->stop() ?>
<?= $this->block()->get( 'checkout/standard/payment' ) ?>
