#if (!$customer)
	#set($customer = $cart.getCustomer())
#end
#set($shippingaddress = $cart.getShippingAddress())
#set($billingaddress = $cart.getBillingAddress())
#set($requireshipping = $cart.requiresShipping())

#set($paymethod = $customer.getPaymentMethod())

##Shipping: $shippingaddress &nbsp; Billing: $billingaddress <br>
##Method: $paymethod $paymethod.getCardVerificationCode()<br>

<script type="text/javascript">
	$(document).ready(function(){
		$('.selectpicker').selectpicker({width:'100%'});
		jQuery.validator.addMethod("passwordsmatch", function (value, element) {
			return $("#password").val() == $("#password2").val();
		}, "Passwords do not match");
	    $('#orderForm').validate({
	        rules: {
	        	firstName: {minlength: 1, maxlength: 50,required: true},
	        	lastName: {minlength: 1, maxlength: 50,required: true},
	            password: {minlength: 3,maxlength: 25,required: true},
	            password2: {minlength: 3,maxlength: 25,required: true, passwordsmatch: true},
	            'billing.address1.value': {minlength: 1, maxlength: 100,required: true},
	            'billing.city.value': {minlength: 1, maxlength: 100,required: true},
	            'billing.state.value': {required: true},
	            'billing.zipCode.value': {minlength: 1, maxlength: 10,required: true #if($content.isPropertyTrue('canadaonly')) , cdnPostal: true #end},
	            'billing.country.value': {required: true},
	            cardNumber: {required: true},
	            cardVerificationCode: {required: true}
	        },
	        highlight: function (element) {
	            $(element).closest('.control-group').addClass('has-error');
	        },
	        unhighlight: function (element) {
	            $(element).closest('.control-group').removeClass('has-error');
	        }
	    });
	});
</script>

<div class="row">
	$pages.stream("$apphome$storehome/multicheckout/progress.html")
	<div class="well">
		<fieldset>
			<legend>Select Billing Preferences</legend>
		</fieldset>
		<div class="card card-default">
			<div class="card-body">
			<form class="form-horizontal validate-inputs" role="form" method="post" id="billing-form" name="billing-form">
			
			<!-- add hidden fields in form -->
<input type="hidden" name="shipping.address1.value" id="shipping-address1" value="$!{shippingaddress.getAddress1()}">
<input type="hidden" name="shipping.address2.value" id="shipping-address2" value="$!{shippingaddress.getAddress2()}">
<input type="hidden" name="shipping.city.value" id="shipping-city" value="$!{shippingaddress.getCity()}">
<input type="hidden" name="shipping.state.value"  id="shipping-state" value="$!{shippingaddress.getState()}">
<input type="hidden" name="shipping.country.value" id="shipping-country" value="$!{shippingaddress.getCountry()}">
<input type="hidden" name="shipping.zipCode.value" id="shipping-zipCode" value="$!{shippingaddress.getZipCode()}">
			
			#if($cart.hasProductsWithPartialPayments())
				<fieldset>
					<legend>Payment Period Adjustments <sup>&dagger;</sup></legend>	
				</fieldset>
				<span class="help-block">&dagger; Only those products that can be purchased by partial payments are listed below.</span>
				$pages.stream("$apphome$storehome/multicheckout/cartlist.html")
			#end
				
				<!-- 
				<fieldset>
					<legend>Adjustments</legend>
				</fieldset>
				<div class="form-horizontal">
					<div class="form-group">
						<label for="billing.address1.value" class="col-lg-4 control-label">Coupon</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="coupon.value" name="coupon" placeholder="Coupon Code">
							<span class="help-block">One coupon can be applied per order</span>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-offset-4 col-lg-8">
							<button type="submit" class="btn btn-primary">Apply Coupon!</button>
						</div>
					</div>
				</div>
				-->
				
					<fieldset>
						<legend>Billing Address</legend>
					</fieldset>
					
					#if($requireshipping )
					<div class="form-group">
						<div class="col-lg-offset-4 col-lg-8">
							<div class="checkbox">
							    <label>
							      <input type="checkbox" id="useShipping" name="useShipping"> Use Shipping Address?
							    </label>
							</div>
							<span class="help-block">If your shipping address is the same as your billing address, click this check box</span>
						</div>
					</div>
					#end
				
					<div class="form-group">
						<label for="billing.address1.value" class="col-lg-4 control-label">Address 1</label>
						<div class="col-lg-8">
							<input type="text" class="form-control required" id="billing-address1" name="billing.address1.value" placeholder="Address" value="$!{billingaddress.getAddress1()}">
						</div>
					</div>
					
					#if(!$content.isPropertyTrue("hideaddress2"))
					<div class="form-group">
						<label for="billing.address2.value" class="col-lg-4 control-label">Address 2</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="billing-address2" name="billing.address2.value" placeholder="Address" value="$!{billingaddress.getAddress2()}">
						</div>
					</div>
					#end
					<div class="form-group"><label for="billing.city.value" class="col-lg-4 control-label">City/Town</label>
						<div class="col-lg-8">
							<input type="text" class="form-control required" id="billing-city" name="billing.city.value" placeholder="City" value="$!{billingaddress.getCity()}">
						</div>
					</div>
					<div class="form-group">
						<label for="billing.state.value" class="col-lg-4 control-label">Province#if(!$content.isPropertyTrue("canadaonly"))/State#end</label>
						<div class="col-lg-8">
						#if($content.isPropertyTrue("canadaonly"))
							#set($states = $searcherManager.getSearcher(${catalogid}, "states").fieldSearch("country", "ca"))
						#else
							#set($states = $searcherManager.getList($store.getCatalogId(), "states"))
						#end							
							<select class="required form-control" id="billing-state" name="billing.state.value" value="$!{billingaddress.getState()}">
								<option value="" ></option>
								#foreach($state in $states)
								<option value="$state" #if($state == "$!{billingaddress.getState()}" ) selected #end>$state</option>
								#end
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="billing.zipCode.value" class="col-lg-4 control-label">#if(!$content.isPropertyTrue("canadaonly")) Zip/ #end Postal Code</label>
						<div class="col-lg-8">
							<input type="text" class="form-control required" id="billing-zipCode" name="billing.zipCode.value" placeholder="Postal Code" value="$!{billingaddress.getZipCode()}">
						</div>
					</div>
					#if($content.isPropertyTrue("canadaonly"))
						<input type="hidden" name="shipping.country.value" value="Canada"/>
					#else
						<div class="form-group">
							<label for="billing.country.value" class="col-lg-4 control-label">Country</label>
							<div class="col-lg-8">
								#set($countries = $searcherManager.getList($store.getCatalogId(), "country"))
								<select name="billing.country.value" id="billing-country" class="required form-control" value="$!{billingaddress.getCountry()}">
									<option value=""></option>
								#foreach($country in $countries)
									<option value="$country" #if($country == "$!customer.billingAddress.country" ) selected #end >$country</option>
								#end
								</select>
							</div>
						</div>
					#end
					<fieldset>
						<legend><br><img src="$home$apphome$storehome/common/icon-lock.png" /> Payment Method</legend>
					</fieldset>
					<div class="form-group">
						<label for="cardType" class="col-lg-4 control-label">Credit Card</label>
						<div class="col-lg-8">
							#set($cardtypes = $store.getCreditCardTypes())
							<select name="cardType" id="cardType" class=" required">
								<option value=""></option>
							#foreach($cardtype in $cardtypes)
								<option value="$cardtype.id" #if($paymethod.getCreditCardType().id == $cardtype.id) selected #end>$cardtype</option>
							#end
							</select>
							<span class="help-block">
								<img src="$home$apphome$storehome/common/cards.gif" />
							</span>
						</div>
					</div>
					<div class="form-group">
						<label for="cardNumber" class="col-lg-4 control-label">Credit Card Number</label>
						<div class="col-lg-8">
							<input type="text" class="form-control required" id="cardNumber" name="cardNumber"  data-stripe="number" placeholder="Credit Card Number" value="">
						</div>
					</div>
					<div class="form-group">
						<label for="cardVerificationCode" class="col-lg-4 control-label">Verification Code</label>
						<div class="col-lg-8">
							<input type="text" class="form-control required" id="cardVerificationCode" name="cardVerificationCode"  data-stripe="cvc" placeholder="Card Verification Code (CVC)" value="">
							<span class="help-block">3 or 4 digit value on the front or by the signature strip on the back</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label">Expiration Date</label>
						<div class="col-lg-4">
							<select name="expirationMonth" id="expirationMonth" class=" required" data-stripe="exp-month">
								<option value=""></option>
								#foreach($i in [1..9])
								<option value="0${i}" #if($i == $paymethod.getExpirationMonth()) selected #end>0$i</option>
								#end
								#foreach($i in [10..12])
								<option value="${i}" #if($i == $paymethod.getExpirationMonth()) selected #end>$i</option>
								#end
							</select>
							<span class="help-block">Month</span>
						</div>
						<div class="col-lg-4">
							<select name="expirationYear" id="expirationYear" class=" required" data-stripe="exp-year">
								<option value=""></option>
								#set($year = 2013)
								#foreach($i in [1..8])
								    <option value="$year" #if($year == $paymethod.getExpirationYear()) selected #end>$year</option>
								    #set($year = $year + 1)
								#end
							</select>
							<span class="help-block">Year</span>
						</div>
					</div>
				
				</form>
			</div>
			<div class="card-footer">
					$pages.stream("$apphome$storehome/multicheckout/footer.html?active=billing")
			</div>
		</div>
	</div>
</div>
					#if($content.isPropertyTrue("ecommerce-enabled"))

<script type="text/javascript">
  	#if($store.get('gateway') == "stripe")
	  
  	//stripe connect
  	#set($publishkey = $mediaarchive.getCatalogSettingValue("stripe_publishable_key"))
  	#if($publishkey)
  		Stripe.setPublishableKey("$publishkey")
  	#else
	  	// This identifies your website in the createToken call below
	  	  #if($store.isProductionMode())
	  	  	Stripe.setPublishableKey("$store.get('publishablekey')");
	  	 #else
	  		Stripe.setPublishableKey("$store.get('testpublishkey')");
	  	 #end
	 #end
	 
  jQuery(function($) {
	  $('#billing-form').submit(function(event) {
	    var form = $(this);

	    // Disable the submit button to prevent repeated clicks
	    form.find('button').prop('disabled', true);

	    Stripe.card.createToken(form, stripeResponseHandler);
	    // Prevent the form from submitting with the default action
	    return false;
	  });
	});
  
  stripeResponseHandler = function(status, response){
	  var form = jQuery('#billing-form');

	  if (response.error) {
	    // Show the errors on the form
	    form.find('.payment-errors').text(response.error.message);
	    alert(response.error.message);
	    form.find('button').prop('disabled', false);
	  } else {
	    // token contains id, last4, and card type
	    var token = response.id;
	    // Insert the token into the form so it gets submitted to the server
	    form.append(jQuery('<input type="hidden" name="stripeToken" />').val(token));
	    // and submit
	    form.get(0).submit();
	   // $form.get(0).submit();
	  }
  }
  #end
</script>
#end

<script type="text/javascript">
	$(document).ready(function(){
		$("#useShipping").change(function(){
			var addr1 = $("#shipping-address1").val();
			var addr2 = $("#shipping-address2").val();
			var city = $("#shipping-city").val();
			var state = $("#shipping-state").val();
			var zip = $("#shipping-zipCode").val();
			var country = $("#shipping-country").val();
			
			if( $(this).is(":checked") ){
				$("#billing-address1").val(addr1);
				$("#billing-address2").val(addr2);
				$("#billing-city").val(city);
				$("#billing-state").val(state);
				$("#billing-zipCode").val(zip);
				$("#billing-country").val(country);
			} else {
				$("#billing-address1").val("");
				$("#billing-address2").val("");
				$("#billing-city").val("");
				$("#billing-state").val("");
				$("#billing-zipCode").val("");
				$("#billing-country").val("");
			}
			$("#billing-state").change();
			$("#billing-country").change();
		});
	});
</script>