<div {{ is_shipping is empty ? ' class="hidden"' }}>
	<h4>{{ shipping_address }}</h4>
	{% if addresses and address_1 and zone and country %}
		<div class="radio">
			<label class="input"><input type="radio" name="existing-address" value="1" {{ new_address is empty ? ' checked="checked"' }} id="payment_address" />{{ text_address_existing }}</label>
		</div>
		<div id="payment-existing">
			<select name="address_id" class="form-control">
				{% for address in addresses %}
					<option value="{{address.address_id}}" {{ address.address_id == address_id ? ' selected="selected"' }}>
						{{ address.firstname }} {{ address.lastname }}, {{ address.city }}, {{ address.address_1 }}, {{ address.zone }}, {{ address.country }}
					</option>
				{% endfor %}
			</select>
		</div>
	{% else %}
		<script>
			$(document).ready(function() {
				$('#new_payment_address').click();
			});
		</script>
	{% endif %}
	{% if customer_id %}
		<div class="radio">
			<label class="input"><input type="radio" name="new-address" value="1" {{ new_address ? ' checked="checked"' }} id="new_payment_address"/>{{ text_address_new }}</label>
		</div>
	{% endif %}
	<div id="payment-address-new" class="checkout-address-new row-flex {{ customer_id and addresses and new_address is empty ? ' hidden' }}">
		<select name="country_id" id="input-payment-country" class="checkout-address-new__select form-control {{ show_country is empty ? ' hidden' }}" onchange="zone();">
			<option value="">{{ select_country }}</option>
			{% for country in countries %}
				<option value="{{ country.country_id }}" {{ country.country_id == country_id ? ' selected="selected"' }}>{{ country.name }}</option>
			{% endfor %}
		</select>
		<select name="zone_id" id="input-payment-zone" class="checkout-address-new__select form-control {{ show_zone is empty ? ' hidden' }}"></select>
		<input type="text" name="city" value="{{ city }}" placeholder="{{ city_text }}" class="checkout-address-new__input form-control {{ show_city is empty ? ' hidden' }}" />
		<input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ postcode_text }}" class="checkout-address-new__input form-control {{ show_postcode is empty ? ' hidden' }}" />
		<input type="text" name="address_1" value="{{ address_1 }}" placeholder="{{ address_text }}" class="checkout-address-new__input form-control {{ show_address is empty ? ' hidden' }}" />
		<input type="text" name="address_2" value="{{ address_2 }}" placeholder="{{ address2_text }}" class="checkout-address-new__input form-control {{ show_address2 is empty ? ' hidden' }}" />
	</div>
		
	<input type="hidden" name="company" value="" />
	<input type="hidden" name="company_id" value="" />
	<input type="hidden" name="tax_id" value="" />
		
	{{ custom_fields }}

	<script>
		if($('.checkout-address-new__select, .checkout-address-new__input').not('.hidden').length%2) $('.checkout-address-new__input').not('.hidden').last().addClass('full-width');
	
		$(function() {
			$('input[name="existing-address"]').on('click', () => {
				$('input[name="new-address"]').attr('checked', false).prop('checked', false);
				$('.checkout-address-new').hide();
			});
			
			$('input[name="new-address"]').on('click', () => {
				$('input[name="existing-address"]').attr('checked', false).prop('checked', false);
				$('.checkout-address-new').show();
			});
		
			zone();
			
			{% if dadata %}
				$('input[name="city"], input[name="address_1"]').attr('autocomplete', 'off');
			
				$('input[name="city"], input[name="address_1"]').on('input', function() {
		
					$('.dadata-suggestions').remove();
			
					let $this = $(this), 
						query = $this.val(),
						query_type = ($this.attr('name') == 'city') ? 'city' : ($this.attr('name') == 'address_1' ? 'address' : ''),
						top = $this.position().top + $this.outerHeight(), 
						left = $this.position().left + 8,
						city = (!$('input[name="city"]').hasClass('hidden')) ? $('input[name="city"]').val() : '',
						locations = [{'country_iso_code': '*'}];
			
					if(query_type == 'address') {
						locations.push({'city': city})
					}
					
					$.ajax({
						url: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address',
						headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': 'Token {{ dadata.token }}'},
						data: JSON.stringify({query: query, locations: locations, geoLocation: true, 'restrict_value': true}),
						dataType: 'json',
						type: 'post',				
						success: function(json) {
							if(json.suggestions) {	
								city_arr = [];
								
								html = '<ul class="dadata-suggestions" style="top:'+top+'px">';
								
								for (i = 0; i < json.suggestions.length; i++) {	
									const result = json.suggestions[i];
									
									if(query_type == 'city') {
										if(result.data['city'] != null) {
											if(city_arr.indexOf(result.data['city']) == -1){
												html += '<li data-type="city">'+result.data['city']+'</li>';
											}

											city_arr.push(result.data['city']);
										}
										
										if(result.data['settlement'] != null) {
											const item = result.data.region_with_type+' '+result.data.settlement_with_type;
	
											if(city_arr.indexOf(result.data['settlement']) == -1){
												html += '<li data-type="city">'+item+'</li>';
											}
								
											city_arr.push(item);
										}
									}
					
									if(query_type == 'address') {
										html += '<li data-type="address" data-postcode="'+result.data.postal_code+'">'+result.value+'</li>';
									}
								}
						
								html += '</ul>';
								
								if(html.indexOf('<li') > -1) {
									$this.after(html);
								}
							}		
						},
						error: function(xhr, ajaxOptions, thrownError) {
							console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
						}
					});
				});
		
				$('body').on('click', '.dadata-suggestions li', function() {
					const $type = $(this).data('type'), $text = $(this).text();
							
					if($type == 'city') {
						$('input[name="city"]').val($text);
						$('input[name="address_1"]').val('');
					}
								
					if($type == 'address') {
						if($(this).data('postcode') && $('input[name="postcode"]').length) {
							$('input[name="postcode"]').val($(this).data('postcode'));
						}
								
						$('input[name="address_1"]').val($text);
					}
				
					$(this).parent().remove();
				});
			{% endif %}
		});
	
		function zone() {
			var data = $('.payment-address select[name=\'country_id\']').val();
	
			$.ajax({
				url: 'index.php?route=checkout/uni_checkout/country&country_id='+data,
				dataType: 'json',          
				success: function(json) {
					if (json['postcode_required'] == '1') {
						$('input[name=\'postcode\']').parent().parent().addClass('required');
					} else {
						$('input[name=\'postcode\']').parent().parent().removeClass('required');
					}
			            
					html = '<option value="">{{ text_select }}</option>';
					selected = false;
            
					if (json['zone'] && json['zone'] != '') {
						for (i = 0; i < json['zone'].length; i++) {
							html += '<option value="' + json['zone'][i]['zone_id'] + '"';
                    
							if (json['zone'][i]['zone_id'] == '{{ zone_id }}') {
								html += ' selected="selected"';
								selected = true;
							}
    
							html += '>' + json['zone'][i]['name'] + '</option>';
						}
					} else {
						html += '<option value="0" selected="selected">{{text_none}}</option>';
					}
            
					$('select[name=\'zone_id\']').html(html);
			
					if (!selected) {
						$('select[name=\'zone_id\']').val('');
					}
					
					{% if show_zone is empty %}
						if (!selected) {
							$('select[name=\'zone_id\'] option:eq(1)').attr('selected', true);
						}
					
						//uniCheckoutUpdate();
					{% endif %}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	</script>
</div>