{% extends 'shop/_layouts/checkout' %}

{% block content %}

	<div class="row">

		<div class="two-thirds column">
			<h3>Payment</h3>

			{#
			Using the update cart action you could allow the user to select the payment method here.
			We recommend using ajax to set this, so no page refresh is needed. This would also allow you to dynamically show or hide the credit card form
			on method change.
			#}

			{% if not craft.commerce.paymentMethods|length %}
				<p>No payment methods available.</p>
			{% endif %}

			{% if craft.commerce.paymentMethods|length %}
				<form method="POST" id="paymentMethod" class="form-inline">

					<input type="hidden" name="action" value="commerce/cart/updateCart">
					<input type="hidden" name="redirect"
						   value="shop/checkout/payment">
					{{ getCsrfInput() }}

					<label for="paymentMethodId">Select a payment method:</label>
					<select id="paymentMethodId" name="paymentMethodId"
							class="form-control">
						{% for id,name in craft.commerce.paymentMethods %}
							<option value="{{ id }}"
									{% if id == cart.paymentMethodId %}selected{% endif %}>{{ name }}</option>
						{% endfor %}
					</select>

					{% set currencies = craft.commerce.paymentCurrencies %}
					{% if currencies|length > 1 %}
					<select id="paymentCurrency" name="paymentCurrency"
							class="form-control">
						{% for currency in currencies %}
							<option value="{{ currency.iso }}" {% if currency.iso == cart.paymentCurrency %}selected{% endif %}>{{ currency.name }} {{  currency.iso }} - {{ cart.totalPrice|commerceCurrency(currency.iso,convert=true) }}</option>
						{% endfor %}
					</select>
					{% endif %}
				</form>
			{% endif %}

			{% if cart.paymentMethodId %}
				<form method="POST" class="form-horizontal">
					<input type="hidden" name="action" value="commerce/payments/pay"/>
					<input type="hidden" name="redirect" value="/shop/customer/order?number={number}"/>
					<input type="hidden" name="cancelUrl" value="/shop/checkout/payment"/>
					{{ getCsrfInput() }}

					<div class="row">
						<div class="twelve columns">
							<noscript>
								<div class="bs-callout bs-callout-danger">
									<h4>JavaScript is not enabled!</h4>

									<p>This payment form requires your browser to have
										JavaScript enabled. Please activate
										JavaScript and reload this page. Check <a
												href="http://enable-javascript.com"
												target="_blank">enable-javascript.com</a>
										for
										more informations.</p>
								</div>
							</noscript>

							<span class="payment-success"></span>
						</div>
					</div>

					{% if cart.paymentMethod.class == 'Stripe' %}
						<script
								src="//checkout.stripe.com/checkout.js"
								class="stripe-button"
								data-key="{{ cart.paymentMethod.settings.publishableKey ?? '' }}"
								data-name="Craft Commerce"
								data-description="Purchase" {# This is not used for order description in stripe - see Craft Commerce general settings #}
								data-email="{{ cart.email }}"
								data-currency="{{ cart.paymentCurrency }}"
								data-amount="{{ cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true,format=false) * 100 }}"
								data-locale="auto">
						</script>
					{% endif %}


					{% if cart.paymentMethod.class != 'Stripe' %}
						<fieldset>
							{% if cart.paymentMethod.requiresCard() %}
								{% set currentYear = date()|date_modify("+1 year").format('Y') %}
								{% set formValues = {
								firstName: paymentForm is defined ? paymentForm.firstName : (cart.billingAddress ? cart.billingAddress.firstName : ''),
								lastName: paymentForm is defined ? paymentForm.lastName : (cart.billingAddress ? cart.billingAddress.lastName : ''),
								number: paymentForm is defined ? paymentForm.number : '',
								cvv: paymentForm is defined ? paymentForm.cvv : '',
								month: paymentForm is defined ? paymentForm.month : 1,
								year: paymentForm is defined ? paymentForm.year : currentYear,
								} %}

								<!-- Card Holder Name -->
								<div class="form-group {% if paymentForm is defined and (paymentForm.hasErrors('firstName') or paymentForm.hasErrors('firstName')) %}has-error{% endif %}">
									<label>Card Holder</label>

									<div class="row">
										<div class="six columns">

											<input type="text" name="firstName"
												   maxlength="70"
												   placeholder="First Name"
												   class="card-holder-first-name u-full-width"
												   value="{{ formValues.firstName }}">

										</div>

										<div class="six columns">
											<input type="text" name="lastName"
												   maxlength="70"
												   placeholder="Last Name"
												   class="card-holder-last-name u-full-width"
												   value="{{ formValues.lastName }}">

										</div>
									</div>


									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('firstName') }}{% endif %}</span>

									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('lastName') }}{% endif %}</span>
								</div>

								<!-- Card Number -->
								<div class="form-group {% if paymentForm is defined and paymentForm.hasErrors('number') %}has-error{% endif %}">
									<label>Card Number</label>

									<input type="text" name="number"
										   maxlength="19"
										   placeholder="Card Number"
										   class="card-number u-full-width"
										   value="{{ formValues.number }}">

									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('number') }}{% endif %}</span>
								</div>

								<!-- Expiry-->
								<div class="form-group {% if paymentForm is defined and (paymentForm.hasErrors('month') or paymentForm.hasErrors('year')) %}has-error{% endif %}">
									<label>Card Expiry Date</label>

									<select class="form-control" name="month">
										{% for month in 1..12 %}
											<option value="{{ month }}"
													{% if formValues.month == month %}selected{% endif %}>{{ month }}</option>
										{% endfor %}
									</select>
									<span> / </span>
									<select class="required form-control"
											name="year">
										{% for year in currentYear-1..(currentYear + 12) %}
											<option value="{{ year }}"
													{% if formValues.year == year %}selected{% endif %}>{{ year }}</option>
										{% endfor %}
									</select>

									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('month') }}{% endif %}</span>

									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('year') }}{% endif %}</span>

								</div>

								<!-- CVV -->
								<div class="form-group {% if paymentForm is defined and paymentForm.hasErrors('cvv') %}has-error{% endif %}">

									<label>CVV/CVV2</label>
									<input type="text" name="cvv"
										   placeholder="CVV" maxlength="4"
										   class="card-cvc"
										   value="{{ formValues.cvv }}">

									<span class="help-block">{% if paymentForm is defined %}{{ paymentForm.getError('cvv') }}{% endif %}</span>

								</div>

							{% endif %}

							<!-- Submit -->
							<button class="button button-primary" type="submit">Pay {{ cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true) }}
								Now
							</button>
						</fieldset>
					{% endif %}
				</form>
			{% endif %}
		</div>
		<div class="one-third column">

			<div class="review-card">
				<h5>Order Review</h5>
				<ul>
					{% for item in cart.lineItems %}
						<li>
							<span>{{ item.description }}</span><span class="right">{{ item.subtotal|commerceCurrency(cart.currency) }}</span>
						</li>
					{% endfor %}


					{% for adjustment in cart.adjustments %}
						<li>
							<strong>{{ adjustment.name }}</strong> <span class="right">{{ adjustment.amount|commerceCurrency(cart.currency) }}
							({{ adjustment.description }})</span>
						</li>
					{% endfor %}


					{% if not cart.shippingMethod %}

						{#
						If the order requires a shipping method be selected, you could redirect back to the shipping page until one is applied to the order.
						{% redirect "shop/checkout/shipping" %}
						You might also want to add a php plugin hook to require
						#}

						<li>
							<strong>Shipping</strong> None selected. <a href="{{ url('shop/checkout/shipping') }}">Choose a shipping method.</a>
						</li>
					{% endif %}

					<li>
						<strong>Total {{ cart.currency }}:</strong> <span class="right">{{ cart.totalPrice|commerceCurrency(cart.currency) }}</span>
					</li>
					{% if cart.currency != cart.paymentCurrency %}
					<li>
						<strong>Payment {{ cart.paymentCurrency }}:</strong> <span class="right">{{ cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true) }}</span>
					</li>
					{% endif %}
				</ul>
			</div>

		</div>
	</div>

	{% includejs %}
	$('#paymentMethodId , #paymentCurrency').change(function(){
		$('form#paymentMethod').submit();
	});
	{% endincludejs %}
{% endblock %}