@props([
    'zipcode' => null,
    'address' => null,
    'number' => null,
    'complement' => null,
    'district' => null,
    'stateId' => null,
    'cityId' => null,
    'regionId' => null,
    'states' => [],
    'cities' => [],
    'regions' => null, // if not null, render region select
])

@section('scripts')
@parent
<script type="text/javascript">
	$(document).ready(function () {
	"use strict";

	var cityIdUser = {{ $cityId ?? 'null' }};
	var stateIdUser = {{ $stateId ?? 'null' }};
	var urlBase = $('body').data('base-url');
	var regionField = "region_id";
	var stateField = "choose-states";
	var cityField = "cities";

	$('#' + regionField).on('select2:select', function () {
		var region = $(this).val();
		var boxStates = $('#' + stateField);
		if (region == '') {
			boxStates.html('<option value="">Escolha o Estado</option>');
			$('#' + stateField).trigger('change');
		} else {
			$.ajax({
				url: urlBase + '/api/get-states/' + region,
				type: "GET",
				beforeSend: function beforeSend() {
					boxStates.html('<option value="">Carregando estados...</option>');
				},
				success: function success(response) {
					boxStates.html('');
					boxStates.append('<option value="">Escolha o Estado</option>');

					if (Object.keys(response).length === 1) {
						var stateId = Object.keys(response)[0];
						var stateName = response[stateId];
						boxStates.append("<option value=\"".concat(stateId, "\" selected>").concat(stateName, "</option>"));
					} else {
						$.each(response, function (i, v) {
							boxStates.append("<option value=\"".concat(i, "\" ").concat(i == stateIdUser ? 'selected' : '', ">").concat(v, "</option>"));
						});
					}
					$('#' + stateField).trigger('select2:select');
				}
			});
		}
	});

	$('#' + stateField).on('select2:select', function () {
		var state = $(this).val();
		var boxCities = $('#' + cityField);

		var region = $('#' + regionField).val();
		var apiUrl;
		// inclui ou não região como parâmetro na api call
		if (region=='') {
			apiUrl = urlBase + '/api/get-cities/' + state;
		}
		else {
			apiUrl = urlBase + '/api/get-cities/' + state + '/' + region;
		}
		if (state == '') {
			boxCities.html('<option value="">Escolha a Cidade</option>');
			$('#' + cityField).trigger('change');
		} else {
			$.ajax({
				url: apiUrl,
				type: "GET",
				beforeSend: function beforeSend() {
					boxCities.html('<option value="">Carregando cidades...</option>');
				},
				success: function success(response) {
					boxCities.html('');
					boxCities.append('<option value="">Escolha a Cidade</option>');

					if (Object.keys(response).length === 1) {
						var cityId = Object.keys(response)[0];
						var cityName = response[cityId];
						boxCities.append("<option value=\"".concat(cityId, "\" selected>").concat(cityName, "</option>"));
					} else {
						$.each(response, function (i, v) {
							boxCities.append("<option value=\"".concat(i, "\" ").concat(i == cityIdUser ? 'selected' : '', ">").concat(v, "</option>"));
						});
					}
					$('#' + cityField).trigger('change');
				}
			});
		}
	});

	$('#' + cityField).on('change', function () {
		cityIdUser = $(this).val();
	});

	if ($('#' + regionField).val()) {
		$('#' + regionField).trigger('select2:select');
	} else {
		$('#' + stateField).trigger('select2:select');
	}
	});
</script>
@endsection

<x-form.text name="zipcode" :value="$zipcode" 
	mask="zip" maxlength=9
	tooltip="CEP do endereço residencial"
	class="col-sm-3 col-lg-2">
	{{__('address.zipcode')}}
	<a href="{{ url('https://www.achecep.com.br/') }}" target="_blank">
		<i class='fa-solid fa-up-right-from-square fa-xs text-primary ml-1'></i>
	</a>
</x-form.text>

<x-form.text name="address" :value="$address"
	class="col-sm-9 col-lg-5">
	{{__('address.street')}}
</x-form.text>

<x-form.text name="number" :value="$number"
	class="col-4 col-md-2 col-lg">
	{{__('address.number')}}
</x-form.text>

<x-form.text name="complement" :value="$complement"
	class="col-8 col-md-5 col-lg-4">
	{{__('address.complement')}}
</x-form.text>

<x-form.text name="district" :value="$district"
	:class="isset($regions) ? 'col-sm-7 col-md-5 col-lg-6 col-xl-3': 'col-sm-12 col-md-5 col-lg-3'">
	{{__('address.neighborhood')}}
</x-form.text>

@if (isset($regions))
<x-form.select name="region_id" :items="$regions" :value="$regionId"
    class="col-sm-5 col-md-4 col-lg-6 col-xl-2">
    {{__('address.region_id')}}
</x-form.select>
@endif

<x-form.select name="state_id" id='choose-states'
	:items="$states" :value="$stateId"
	:class="isset($regions) ? 'col-sm-5 col-md-4 col-lg-5 col-xl-2' : 'col-sm-5 col-lg-3'">
	{{__('address.state_id')}}
</x-form.select>

<x-form.select name="city_id" id='cities' 
	:items="$cities" :value="$cityId" 
	:class="isset($regions) ? 'col-sm-7 col-md-4 col-lg-7 col-xl-5' : 'col-sm-7 col-lg-6'">
	{{__('address.city_id')}}
</x-form.select>