@extends('frontend.layouts.app')

@section('content')
<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">Basic Details</p>
						</div>
						<form class="form-default basic-info-form" enctype="multipart/form-data" role="form" action="{{ route('complete_profile.basic_update') }}" method="POST">
							@csrf
						
							<div>
								<div class="row">
									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="on_behalf">{{ translate('On Behalf') }} <span class="text-danger">*</span></label>
											<select class="form-control aiz-selectpicker @error('on_behalf') is-invalid @enderror" name="on_behalf" required>
												@foreach ($on_behalves as $on_behalf)
													<option value="{{$on_behalf->id}}" @if($member->member->on_behalves_id == $on_behalf->id) selected @endif>{{$on_behalf->name}}</option>
												@endforeach
											</select>
											@error('on_behalf')
												<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>

									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="gender">{{ translate('Gender') }} <span class="text-danger">*</span></label>
											<select class="form-control aiz-selectpicker @error('gender') is-invalid @enderror" name="gender" required>
												<option value="">Select One</option>
												<option value="1" @if($member->member->gender == 1) selected @endif>{{translate('Male')}}</option>
												<option value="2" @if($member->member->gender == 2) selected @endif>{{translate('Female')}}</option>
											</select>
											@error('gender')
											<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="first_name">{{ translate('First Name') }} <span class="text-danger">*</span></label>
											<input type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" id="first_name" value="{{ $member->first_name }}" placeholder="{{translate('First Name')}}" required>
											@error('first_name')
												<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>
									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="last_name">{{ translate('Last Name') }} <span class="text-danger">*</span></label>
											<input type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" id="last_name" value="{{ $member->last_name }}" placeholder="{{ translate('Last Name') }}" required>
											@error('last_name')
												<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="name">{{ translate('Date Of Birth') }} <span class="text-danger">*</span></label>
											<input type="text" class="form-control aiz-date-range @error('date_of_birth') is-invalid @enderror" name="date_of_birth" id="date_of_birth" placeholder="{{ translate('Date Of Birth') }}" value="@if(!empty($member->member->birthday)) {{date('Y-m-d', strtotime($member->member->birthday))}} @endif" data-single="true" data-show-dropdown="true" data-max-date="{{ get_max_date() }}" autocomplete="off" required>
											@error('date_of_birth')
											<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>

									<div class="col-md-6">
										<div class="form-group mb-3">
											<label class="form-label" for="eating_habits">Eating Habits <span class="text-danger">*</span></label>
											<select class="form-control aiz-selectpicker" name="eating_habits" data-selected="{{ $member->lifestyles->eating_habits ?? '' }}" required>
												<option value="">Select One</option>
												<option value="Veg-Jain">Veg-Jain</option>
												<option value="Veg-Regular">Veg-Regular</option>
												<option value="Vegan">Vegan</option>
												@error('eating_habits')
													<small class="form-text text-danger">{{ $message }}</small>
												@enderror
											</select>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-6">
										<div class="form-group mb-3">
											<label class="form-label" for="email">{{ translate('Email address') }} <span class="text-danger">*</span></label>
											<input type="email" value="{{ $member->email }}" class="form-control @error('email') is-invalid @enderror" name="email" id="signinSrEmail" placeholder="{{ translate('Email Address') }}" required>
											@error('email')
												<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>
									<div class="col-lg-6">
										<div class="form-group phone-form-group mb-1">
											<label class="form-label" for="phone-code">{{ translate('Phone No.') }} <span class="text-danger">*</span></label>
											<input type="text" id="phone-code" value="{{ $phone_no }}" class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}" name="phone" placeholder="Phone No." autocomplete="off" required>
											<input type="hidden" name="country_code">
											@error('phone')
												<span class="invalid-feedback" role="alert">{{ $message }}</span>
											@enderror
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group mb-3">
											<label class="form-label" for="time_of_birth">{{translate('Time Of Birth')}}</label>
											<input type="text" name="time_of_birth" value="{{ $member->astrologies->time_of_birth ?? "" }}" class="form-control" placeholder="{{translate('Time Of Birth')}}" data-input>
											@error('time_of_birth')
												<small class="form-text text-danger">{{ $message }}</small>
											@enderror
										</div>
									</div>

									<div class="col-md-6">
										<div class="form-group mb-3">
											<label class="form-label" for="city_of_birth">City Of Birth <span class="text-danger">*</span></label>
											<input type="text" name="city_of_birth" value="{{ $member->astrologies->city_of_birth ?? "" }}" class="form-control" placeholder="{{translate('City Of Birth')}}" required>
											@error('city_of_birth')
												<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="photo" >{{translate('Photo')}} <small>(800x800)</small>
												@if(auth()->user()->photo != null && auth()->user()->photo_approved == 0)
												<small class="text-danger">({{ translate('Pending for Admin Approval.') }})</small>
												@elseif(auth()->user()->photo != null && auth()->user()->photo_approved == 1)
													<small class="text-danger">({{ translate('Approved.') }})</small>
												@endif</label>
											<div class="input-group" data-toggle="aizuploader" data-type="image">
												<div class="input-group-prepend">
													<div class="input-group-text bg-soft-secondary font-weight-medium">{{ translate('Browse')}}</div>
												</div>
												<div class="form-control file-amount">{{ translate('Choose File') }}</div>
												<input type="hidden" name="photo" class="selected-files" value="{{ $member->photo }}" required>
											</div>
											<div class="file-preview box sm">
											</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>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    $("#phone-code").keypress(function(e) {
		var key = e.which || e.keyCode; 
		if ((key >= 48 && key <= 57) || key === 8 || key === 46 || key === 37 || key === 39) {
			return true;
		} else {
			e.preventDefault();
		}
	});

    var isPhoneShown = true,
        countryData = window.intlTelInputGlobals.getCountryData(),
        input = document.querySelector("#phone-code");

    for (var i = 0; i < countryData.length; i++) {
        var country = countryData[i];
        if(country.iso2 == 'bd'){
            country.dialCode = '88';
        }
    }

    var iti = intlTelInput(input, {
    	initialCountry: "auto",
		geoIpLookup: function(callback) {
			$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
				var countryCode = (resp && resp.country) ? resp.country : "in";
				callback(countryCode);
			});
		},
        separateDialCode: true,
        utilsScript: "{{ static_asset('assets/js/intlTelutils.js') }}?1590403638580",
        onlyCountries: @php echo json_encode(\App\Models\Country::where('status', 1)->pluck('code')->toArray()) @endphp,
        customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
            if(selectedCountryData.iso2 == 'bd'){
                return "01xxxxxxxxx";
            }
            return selectedCountryPlaceholder;
        }
    });

    var country = iti.getSelectedCountryData();
    $('input[name=country_code]').val(iti.getSelectedCountryData().dialCode);

    input.addEventListener("countrychange", function(e) {
        // var currentMask = e.currentTarget.placeholder;
        $('input[name=country_code]').val(iti.getSelectedCountryData().dialCode);
    });

	document.addEventListener('DOMContentLoaded', function() {
        flatpickr('[data-input]', {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // h: hours in 12-hour format, i: minutes, K: AM/PM
            minuteIncrement: 1
        });
    });
</script>

<script>
	async function checkEmailExists(email) {
		return new Promise(resolve => {
			$.post('{{ route('check-unique-email') }}', {
				_token: $('meta[name="csrf-token"]').attr('content'),
				email: email
			}, function(data) {
				resolve(data.exists === true || data === 1);
			});
		});
	}

	async function checkPhoneExists(phone, countryCode) {
		return new Promise(resolve => {
			$.post('{{ route('check-unique-phone') }}', {
				_token: $('meta[name="csrf-token"]').attr('content'),
				phone: phone,
				country_code: countryCode
			}, function(data) {
				resolve(data.exists === true || data === 1);
			});
		});
	}

	function isEmailValid(email) {
		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (!emailPattern.test(email)) return false;

		const domain = email.split('@')[1] || '';
		const tld = domain.split('.').pop().toLowerCase();

		// Common valid TLDs (extend as needed)
		const allowedTLDs = ['com', 'in', 'net', 'org', 'co', 'edu', 'gov', 'us', 'uk', 'io', 'info', 'biz', 'me', 'ca', 'au'];

		// Known typos or suspicious TLDs
		const typoTLDs = ['con', 'cm', 'coom', 'uq', 'vom', 'lom'];

		// Gmail domain typo protection
		if (domain.startsWith('gma') && domain !== 'gmail.com') {
			return false; // Catch typos like gmall.com, gmal.com, gmail.con
		}

		// Check for known typos
		if (typoTLDs.includes(tld)) return false;

		// Optional: only allow known TLDs (if you want stricter filtering)
		if (!allowedTLDs.includes(tld)) return false;

		return true;
	}

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

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

			if (field.name === 'email') {
				if(value != ''){
					if (!isEmailValid(value)) {
						showError(field, 'Please enter a valid email address.');
						isValid = false;
						continue;
					}
					const exists = await checkEmailExists(value);
					if (exists) {
						showError(field, 'This email is already registered.');
						isValid = false;
						continue;
					}
				}
			}

			if (field.name === 'phone') {
				if(value != ''){
					const countryCode = currentFormStep.querySelector('[name="country_code"]').value;
					const exists = await checkPhoneExists(value, countryCode);
					if (exists) {
						showError(field, 'This phone is already registered.');
						isValid = false;
					}

					if(countryCode == 91){
						const cleanedValue = value.replace(/^\+91/, '').replace(/\s+/g, '').trim();
						if (cleanedValue.length !== 10) {
							showError(field, 'Phone number must be exactly 10 digits.');
							isValid = false;
						}
					}
					continue;
				}
			}

            // 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', async function (e) {
        e.preventDefault(); // Prevent default action of button

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

            form.submit(); // Manually submit the form
        }
    });
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@endsection