#set($address = $cart.getShippingAddress())
#set($shippingmethod = $cart.getShippingMethod())

#set($D = "$")
<script type="text/javascript">
	$(document).ready(function(){
	    $('#shipping-form').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},
	            'shipping.address1.value': {minlength: 1, maxlength: 100,required: true},
	            'shipping.city.value': {minlength: 1, maxlength: 100,required: true},
	            'shipping.state.value': {required: true},
	            'shipping.zipCode.value': {minlength: 1, maxlength: 10,required: true #if($content.isPropertyTrue('canadaonly')) , cdnPostal: true #end },
	            'shipping.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');
	        }
	    });
	    $(".address-list").change(function(){
			var type = $(this).data("type");
			var val = $(this).val();
			if (val!=undefined && val.length>0){
				var name = $(this).find("option:selected").data("name");
				var address1 = $(this).find("option:selected").data("address1");
				var address2 = $(this).find("option:selected").data("address2");
				var city = $(this).find("option:selected").data("city");
				var state = $(this).find("option:selected").data("state");
				var zip = $(this).find("option:selected").data("zip");
				var country = $(this).find("option:selected").data("country");
				$("#"+type+"-name").val(name);
				$("#"+type+"-address1").val(address1);
				$("#"+type+"-address2").val(address2);
				$("#"+type+"-city").val(city);
				$("#"+type+"-state").val(state);
				$("#"+type+"-zip").val(zip);
				$("#"+type+"-country").val(country);
			} else {
				$("#"+type+"-name").val("");
				$("#"+type+"-address1").val("");
				$("#"+type+"-address2").val("");
				$("#"+type+"-city").val("");
				$("#"+type+"-state option[value='']").prop('selected', 'selected');
				$("#"+type+"-zip").val("");
				$("#"+type+"-country option[value='']").prop('selected', 'selected');
			}
		});
	});
</script>

<div class="row">
	$pages.stream("$apphome$storehome/multicheckout/progress.html")
	<div class="well">
		<fieldset>
			<legend>Shipping Information</legend>
		</fieldset>
		<div class="card card-default">
			<div class="card-body">
				<form class="form-horizontal" role="form" method="post" id="shipping-form" name="shipping-form" action="">
					<input type="hidden" name="retainCustomerInfo" value="true"/>
					<fieldset>
						<legend>Shipping Method</legend>
					</fieldset>
					<div class="form-group">
						<label class="col-lg-4 control-label">Shipping Method</label>
						<div class="col-lg-8">
						#set( $methods = $cart.getAvailableShippingMethods() )
						#if( $methods.size() == 0)
							<p class="form-control-static"> </p>
						#elseif( $methods.size() == 1 )
							#set( $method = $methods.get(0))
							#set( $cost = $method.getCost($cart))
							<p class="form-control-static">$method.description #if( !$cost.isZero() ) $cost#else [[This order qualifies for free shipping]]#end</p>
							<input type="hidden" name="shippingmethod" value="$method.id" />
						#else
							<select class="selectpickerXX form-control" name="shippingmethod" id="shippingmethod">
							#foreach( $method in $methods )
								<option value="$method.id" #if($method.id == "$!{shippingmethod.id}") selected #end>
									$method.description: $method.getCost($cart) #if ( $cart.isAdditionalShippingCostsForMethod( $method ) ) (plus extra costs) #end
								</option>
							#end
							</select>
						#end
							<span class="help-block">$!content.shippingmessage</span>
						</div>
					</div>
					<fieldset>
						<legend>[[Shipping Address]]</legend>
					</fieldset>
					#if($addresslist && $addresslist.isEmpty()==false)
					<div class="form-group">
						<label for="chooseaddress" class="col-lg-4 control-label">[[Select From Existing]]: </label>
						<div class="col-lg-8">
							<select id="chooseaddress" name="address.value" class="form-control address-list" data-type="shipping">
								<option value=""></option>
								#foreach($option in $addresslist)
									<option value="$option.id"
									data-name="$!{option.name}" 
									data-address1="$!{option.address1}"
									data-address2="$!{option.address2}"
									data-city="$!{option.city}"
									data-state="$!{option.state}"
									data-zip="$!{option.zip}"
									data-country="$!{option.country}"
									#if($address.id ==  $option.id) selected #end 
									>
									#set($str = $option.name)
									#if($str.length == 0)
										#set($str = $option.address1)
									#end
									#if($str.length() > 50)
										#set($str = $str.substring(0,50))
										#set($str = "${str} &hellip;")
									#end
									$str
									</option>
								#end
							</select>
						</div>
					</div>
					#end
					<div class="form-group">
						<label for="shipping.address1.value" class="col-lg-4 control-label">Company</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="shipping-name" name="shipping.name.value" placeholder="Company" value="$!{address.getAddress1()}">
						</div>
					</div>
					<div class="form-group">
						<label for="shipping.address1.value" class="col-lg-4 control-label">Address</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="shipping-address1" name="shipping.address1.value" placeholder="Address" value="$!{address.getAddress1()}">
						</div>
					</div>
					#if(!$content.isPropertyTrue("hideaddress2"))
					<div class="form-group">
						<label for="shipping.address2.value" class="col-lg-4 control-label">Address 2</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="shipping-address2" name="shipping.address2.value" placeholder="Address 2" value="$!{address.getAddress2()}">
						</div>
					</div>
					#end
					<div class="form-group"><label for="shipping.city.value" class="col-lg-4 control-label">City/Town</label>
						<div class="col-lg-8">
							<input type="text" class="form-control" id="shipping-city" name="shipping.city.value" placeholder="City" value="$!{address.getCity()}">
						</div>
					</div>
					<div class="form-group">
						<label for="shipping.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="selectpickerXX form-control" id="shipping-state" name="shipping.state.value">
							<option value="" ></option>
								#foreach($state in $states)
								<option value="$state" #if($state == "$!{address.getState()}" ) selected #end>$state</option>
								#end
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="shipping.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" id="shipping-zip" name="shipping.zipCode.value" placeholder="Postal Code" value="$!{address.getZipCode()}">
						</div>
					</div>
					#if($content.isPropertyTrue("canadaonly"))
								<input type="hidden" id="shipping-country" name="shipping.country.value" value="Canada"/>
								#else
					<div class="form-group">
						<label for="shipping.country.value" class="col-lg-4 control-label">Country</label>
						<div class="col-lg-8">
							#set($countries = $searcherManager.getList($store.getCatalogId(), "country"))
							<select name="shipping.country.value" id="shipping-country" class="selectpickerXX form-control">
								<option value=""></option>
							#foreach($country in $countries)
								<option value="$country" #if($country == "$!{address.getCountry()}" ) selected #end >$country</option>
							#end
							</select>
							
						</div>
					</div>
					#end
					
					
				</form>
			</div>
			<div class="card-footer">
				$pages.stream("$apphome$storehome/multicheckout/footer.html?active=shipping")
			</div>
		</div>
	</div>
</div>