@extends('frontend.layouts.app')

@section('content')
@php
    $countries = \App\Models\Country::where('status',1)->get();
@endphp
<div class="py-4 py-lg-5 mt-5">
    <div class="container">
		<div class="row">
			<div class="col-xxl-6 col-xl-6 col-md-8 mx-auto">
				<div class="card">
					<div class="card-body">
						<div class="mb-5 text-center">
							<h1 class="h3 text-primary mb-0">{{ translate('Complete Your Profile') }}</h1>
							<p class="form-subtitle">Address Details</p>
						</div>

                        <form class="form-default address-info-form" enctype="multipart/form-data" role="form" action="{{ route('complete_profile.address_update') }}" method="POST">
							@csrf

                            @php
                                $present_address      = \App\Models\Address::where('type','present')->where('user_id', Auth::user()->id)->first();
                                $present_street_address = $present_address->address ?? "";
                                $present_country_id   = $present_address->country_id ?? "";
                                $present_state_id     = $present_address->state_id ?? "";
                                $present_city_id      = $present_address->city_id ?? "";
                                $present_postal_code  = $present_address->postal_code ?? "";

                                $permanent_address      = \App\Models\Address::where('type','permanent')->where('user_id', Auth::user()->id)->first();
                                $permanent_street_address = $permanent_address->address ?? "";
                                $permanent_country_id   = $permanent_address->country_id ?? "";
                                $permanent_state_id     = $permanent_address->state_id ?? "";
                                $permanent_city_id      = $permanent_address->city_id ?? "";
                                $permanent_postal_code  = $permanent_address->postal_code ?? "";

                                $is_same = false;

                                if ($present_address && $permanent_address) {
                                    $is_same = 
                                        $present_address->address === $permanent_address->address &&
                                        $present_address->country_id === $permanent_address->country_id &&
                                        $present_address->state_id === $permanent_address->state_id &&
                                        $present_address->city_id === $permanent_address->city_id &&
                                        $present_address->postal_code === $permanent_address->postal_code;
                                }
                            @endphp
						
							<div>
								<div class="row">
									<div class="col-lg-12">
                                        <!-- Permanent Address -->
                                        <div class="border p-3 mb-3">
                                            <h5 class="mb-3">Permanent Address</h5>

                                            <input type="hidden" name="address_type" value="permanent">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="address">Street Address <span class="text-danger">*</span></label>
                                                        <textarea name="address" class="form-control" required>{{ $permanent_street_address }}</textarea>
                                                        @error('address')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="permanent_country_id">{{translate('Country')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="permanent_country_id" id="permanent_country_id" data-selected="{{ $permanent_country_id }}" data-live-search="true" required>
                                                            <option value="">{{translate('Select One')}}</option>
                                                            @foreach ($countries as $country)
                                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('permanent_country_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="permanent_state_id">{{translate('State')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="permanent_state_id" id="permanent_state_id" data-live-search="true" required>
                                                        </select>
                                                        @error('permanent_state_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="permanent_city_id">{{translate('City')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="permanent_city_id" id="permanent_city_id" data-live-search="true" required>
                                                        </select>
                                                        @error('permanent_city_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="permanent_postal_code">{{translate('Postal Code')}} <span class="text-danger">*</span></label>
                                                        <input type="text" name="permanent_postal_code" class="form-control" value="{{$permanent_postal_code}}" placeholder="{{translate('Postal Code')}}" required>
                                                        @error('permanent_postal_code')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
 
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="native_place">Native Place <span class="text-danger">*</span></label>
                                                        <input type="text" name="native_place" class="form-control" value="{{ $permanent_address->native_place ?? ''}}" required>
                                                        @error('native_place')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Checkbox to skip present address -->
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="same_as_permanent" id="same_as_permanent"
                                                {{ $is_same ? 'checked' : '' }}>
                                            <label class="form-check-label" for="same_as_permanent">
                                                Present address is same as permanent address
                                            </label>
                                        </div>

                                        <!-- Present Address -->
                                        <div class="border p-3 mb-5" id="present_address_section">
                                            <h5 class="mb-3">Present Address</h5>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="present_address">Street Address <span class="text-danger">*</span></label>
                                                        <textarea name="present_address" class="form-control" required>{{ $present_street_address }}</textarea>
                                                        @error('present_address')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="present_country_id">{{translate('Country')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="present_country_id" data-selected="{{ $present_country_id }}" id="present_country_id" data-live-search="true" required>
                                                            <option value="">{{translate('Select One')}}</option>
                                                            @foreach ($countries as $country)
                                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('present_country_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="present_state_id">{{translate('State')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="present_state_id" id="present_state_id" data-live-search="true" required>
                                                        </select>
                                                        @error('present_state_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="present_city_id">{{translate('City')}} <span class="text-danger">*</span></label>
                                                        <select class="form-control aiz-selectpicker" name="present_city_id" id="present_city_id" data-live-search="true" required>
                                                        </select>
                                                        @error('present_city_id')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="present_postal_code">{{translate('Postal Code')}} <span class="text-danger">*</span></label>
                                                        <input type="text" name="present_postal_code" class="form-control" value="{{$present_postal_code}}" placeholder="{{translate('Postal Code')}}" required>
                                                        @error('present_postal_code')
                                                            <small class="form-text text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 text-right">
                                                <button type="submit" class="btn btn-sm btn-primary btn-submit">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        get_states_by_country_for_present_address();
        get_cities_by_state_for_present_address();
        get_states_by_country_for_permanent_address();
        get_cities_by_state_for_permanent_address();
    });

    function get_states_by_country_for_permanent_address(){
        var permanent_country_id = $('#permanent_country_id').val();
            $.post('{{ route('states.get_state_by_country') }}',{_token:'{{ csrf_token() }}', country_id:permanent_country_id}, function(data){
                $('#permanent_state_id').html(null);
                for (var i = 0; i < data.length; i++) {
                    $('#permanent_state_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }

                $("#permanent_state_id > option").each(function() {
                    if(this.value == '{{$permanent_state_id}}'){
                        $("#permanent_state_id").val(this.value).change();
                    }
                });

                AIZ.plugins.bootstrapSelect('refresh');

                get_cities_by_state_for_permanent_address();
            });
        }

    function get_cities_by_state_for_permanent_address(){
		var permanent_state_id = $('#permanent_state_id').val();
    		$.post('{{ route('cities.get_cities_by_state') }}',{_token:'{{ csrf_token() }}', state_id:permanent_state_id}, function(data){
    		    $('#permanent_city_id').html(null);
    		    for (var i = 0; i < data.length; i++) {
    		        $('#permanent_city_id').append($('<option>', {
    		            value: data[i].id,
    		            text: data[i].name
    		        }));
    		    }

                $("#permanent_city_id > option").each(function() {
                    console.log(this.value);
                    if(this.value == '{{$permanent_city_id}}'){
                        $("#permanent_city_id").val(this.value).change();
                    }
                });

    		    AIZ.plugins.bootstrapSelect('refresh');
    		});
    	}

    $('#permanent_country_id').on('change', function() {
  	    get_states_by_country_for_permanent_address();
  	});

    $('#permanent_state_id').on('change', function() {
  	    get_cities_by_state_for_permanent_address();
  	});

	  function get_states_by_country_for_present_address(){
        var present_country_id = $('#present_country_id').val();
            $.post('{{ route('states.get_state_by_country') }}',{_token:'{{ csrf_token() }}', country_id:present_country_id}, function(data){
                $('#present_state_id').html(null);
                for (var i = 0; i < data.length; i++) {
                    $('#present_state_id').append($('<option>', {
                        value: data[i].id,
                        text: data[i].name
                    }));
                }

                $("#present_state_id > option").each(function() {
                    if(this.value == '{{$present_state_id}}'){
                        $("#present_state_id").val(this.value).change();
                    }
                });

                AIZ.plugins.bootstrapSelect('refresh');

                get_cities_by_state_for_present_address();
            });
        }

    function get_cities_by_state_for_present_address(){
		var present_state_id = $('#present_state_id').val();
    		$.post('{{ route('cities.get_cities_by_state') }}',{_token:'{{ csrf_token() }}', state_id:present_state_id}, function(data){
    		    $('#present_city_id').html(null);
    		    for (var i = 0; i < data.length; i++) {
    		        $('#present_city_id').append($('<option>', {
    		            value: data[i].id,
    		            text: data[i].name
    		        }));
    		    }

                $("#present_city_id > option").each(function() {
    		        if(this.value == '{{$present_city_id}}'){
    		            $("#present_city_id").val(this.value).change();
    		        }
    		    });

    		    AIZ.plugins.bootstrapSelect('refresh');
    		});
    	}

    $('#present_country_id').on('change', function() {
  	    get_states_by_country_for_present_address();
  	});

    $('#present_state_id').on('change', function() {
  	    get_cities_by_state_for_present_address();
  	});

    document.addEventListener('DOMContentLoaded', function () {
		const checkbox = document.getElementById('same_as_permanent');
		const presentSection = document.getElementById('present_address_section');

		// Get all present address fields that might have "required"
		const presentFields = presentSection.querySelectorAll('input, select, textarea');

		function togglePresentAddressVisibility() {
			const isChecked = checkbox.checked;

			// Toggle visibility
			presentSection.style.display = isChecked ? 'none' : 'block';

			// Toggle 'required' attribute
			presentFields.forEach(field => {
				if (isChecked) {
					field.removeAttribute('required');
				} 
			});
		}


		// Initial check
		togglePresentAddressVisibility();

		// On checkbox change
		checkbox.addEventListener('change', togglePresentAddressVisibility);
	});

    function validateAddressFields() {
        const currentFormStep = document.querySelector('.address-info-form');
		const requiredFields = currentFormStep.querySelectorAll('[required]');
		let isValid = true;

        for (const field of requiredFields) {
			clearError(field);
			const value = field.value.trim();

            // Basic required check
			if (!value) {
				showError(field, 'This field is required.');
				isValid = false;
			}
        }

        return isValid;
    }

    function clearError(field) {
		field.classList.remove('is-invalid');

		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		const error = formGroup.querySelector('.invalid-feedback.dynamic');
		if (error) {
			error.remove();
		}
	}

	function showError(field, message) {
		field.classList.add('is-invalid');

		// Traverse up to the closest form-group
		const formGroup = field.closest('.form-group');
		if (!formGroup) return;

		let existingError = formGroup.querySelector('.invalid-feedback.dynamic');
		if (!existingError) {
			const errorElement = document.createElement('span');
			errorElement.className = 'invalid-feedback dynamic';
			errorElement.style.display = 'block';
			errorElement.innerText = message;
			formGroup.appendChild(errorElement);
		}
	}

    document.querySelector('.btn-submit').addEventListener('click', function (e) {
        e.preventDefault(); // Prevent default action of button

        if (validateAddressFields()) {
            const form = document.querySelector('.address-info-form');
            const submitBtn = form.querySelector('.btn-submit');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Please wait...';

            form.submit(); // Manually submit the form
        }
    });

</script>
@endsection