<div class="box" id="passport-form">
	<div class="box-header">
		<h5 class="box-title">{{ __('forms.Passport') }}</h5>
	</div>
	<div class="box-body pb-2">
		<form action="{{ route('crm.passports.update', $individual) }}" method="POST">
			@csrf
			@method('PUT')
			<div class="grid grid-cols-2 gap-x-6 mb-6">
				{{-- JMBG --}}
				<div>
					<label for="passport_jmbg" class="ti-form-label @error('passport.jmbg') error @enderror">
						@error('passport.jmbg')
							{{ $message }}
						@else
							{{ __('forms.JMBG') }}
						@enderror
					</label>
					<input id="passport_jmbg" type="text" name="passport[jmbg]"
						value="{{ old('passport.jmbg') ?? $individual->lastActivePassport?->jmbg }}"
						class="ti-form-input shadow-sm @error('passport.jmbg') border-red-500 @enderror" placeholder="JMBG"
						{{ $readonly ? 'disabled' : '' }}>
				</div>

				{{-- Date of Birth --}}
				<div>
					<label for="passport_date_of_birth" class="ti-form-label @error('passport.date_of_birth') error @enderror">
						@error('passport.date_of_birth')
							{{ $message }}
						@else
							{{ __('forms.DateOfBirth') }}
						@enderror
					</label>
					<div class="flex rounded-sm shadow-sm">
						<div
							class="px-4 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm
                                    border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50
                                    dark:bg-black/20 dark:border-white/10
                                    @error('passport.date_of_birth') border-red-500 @enderror">
							<span class="text-sm text-gray-500 dark:text-white/70">
								<i class="ri ri-calendar-line"></i>
							</span>
						</div>
						<input id="passport_date_of_birth" type="text" name="passport[date_of_birth]"
							value="{{ old('passport.date_of_birth') ?? optional($individual->lastActivePassport?->date_of_birth)->format('d.m.Y.') }}"
							class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2
                                        @error('passport.date_of_birth') border-red-500 @enderror"
							placeholder="@error('passport.date_of_birth'){{ __('forms.DateOfBirth') }}@else{{ __('forms.ChooseDate') }}@enderror"
							readonly {{ $readonly ? 'disabled' : '' }}>
					</div>
				</div>
			</div>

			<div class="grid grid-cols-2 gap-x-6 mb-6">
				{{-- Issued At --}}
				<div>
					<label for="passport_issued_at" class="ti-form-label @error('passport.issued_at') error @enderror">
						@error('passport.issued_at')
							{{ $message }}
						@else
							{{ __('forms.IssuingDate') }}
						@enderror
					</label>
					<div class="flex rounded-sm shadow-sm">
						<div
							class="px-4 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm
                                    border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50
                                    dark:bg-black/20 dark:border-white/10
                                    @error('passport.issued_at') border-red-500 @enderror">
							<span class="text-sm text-gray-500 dark:text-white/70">
								<i class="ri ri-calendar-line"></i>
							</span>
						</div>
						<input id="passport_issued_at" type="text" name="passport[issued_at]"
							value="{{ old('passport.issued_at') ?? optional($individual->lastActivePassport?->issued_at)->format('d.m.Y.') }}"
							class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2
                                        @error('passport.issued_at') border-red-500 @enderror"
							placeholder="@error('passport.issued_at'){{ __('forms.IssuingDate') }}@else{{ __('forms.ChooseDate') }}@enderror"
							readonly {{ $readonly ? 'disabled' : '' }}>
					</div>
				</div>

				{{-- Expires At --}}
				<div>
					<label for="passport_expires_at" class="ti-form-label @error('passport.expires_at') error @enderror">
						@error('passport.expires_at')
							{{ $message }}
						@else
							{{ __('forms.ValidUntil') }}
						@enderror
					</label>
					<div class="flex rounded-sm shadow-sm">
						<div
							class="px-4 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm
                                    border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50
                                    dark:bg-black/20 dark:border-white/10
                                    @error('passport.expires_at') border-red-500 @enderror">
							<span class="text-sm text-gray-500 dark:text-white/70">
								<i class="ri ri-calendar-line"></i>
							</span>
						</div>
						<input id="passport_expires_at" type="text" name="passport[expires_at]"
							value="{{ old('passport.expires_at') ?? optional($individual->lastActivePassport?->expires_at)->format('d.m.Y.') }}"
							class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2
                                        @error('passport.expires_at') border-red-500 @enderror"
							placeholder="@error('passport.expires_at'){{ __('forms.ValidUntil') }}@else{{ __('forms.ChooseDate') }}@enderror"
							readonly {{ $readonly ? 'disabled' : '' }}>
					</div>
				</div>
			</div>

			<div class="grid grid-cols-2 gap-x-6 mb-6">
				{{-- Reg No --}}
				<div>
					<label for="passport_reg_no" class="ti-form-label @error('passport.reg_no') error @enderror">
						@error('passport.reg_no')
							{{ $message }}
						@else
							{{ __('forms.RegNo') }}
						@enderror
					</label>
					<input id="passport_reg_no" type="text" name="passport[reg_no]"
						value="{{ old('passport.reg_no') ?? $individual->lastActivePassport?->reg_no }}"
						class="ti-form-input shadow-sm @error('passport.reg_no') border-red-500 @enderror"
						placeholder="{{ __('forms.RegNo') }}" {{ $readonly ? 'disabled' : '' }}>
				</div>

				{{-- Issuer --}}
				<div>
					<label for="passport_issuer" class="ti-form-label @error('passport.issuer') error @enderror">
						@error('passport.issuer')
							{{ $message }}
						@else
							{{ __('forms.IssuingAuthority') }}
						@enderror
					</label>
					<input id="passport_issuer" type="text" name="passport[issuer]"
						value="{{ old('passport.issuer') ?? $individual->lastActivePassport?->issuer }}"
						class="ti-form-input shadow-sm @error('passport.issuer') border-red-500 @enderror"
						placeholder="{{ __('forms.IssuingAuthority') }}" {{ $readonly ? 'disabled' : '' }}>
				</div>
			</div>

			{{-- Place of Birth + Country Code + Nationality --}}

			<div class="grid grid-cols-3 gap-x-6">

				{{-- 1) City of Birth --}}
				<div class="mb-6" id="passport_place_id">
					<label for="place_of_birth_country_id"
						class="ti-form-label @error('passport.place_of_birth_country_id') error @enderror">
						@error('passport.place_of_birth_country_id')
							<span style="font-size: 12px">{{ $message }}</span>
						@else
							{{ __('forms.PlaceOfBirth') }}
						@enderror
					</label>
					<select class="ti-form-select py-1 @error('passport.place_of_birth_country_id') border-red-500 @enderror"
						id="place_of_birth_country_id" name="passport[place_of_birth_country_id]">
						@error('passport.place_of_birth_country_id')
							<option value="">{{ __('forms.PlaceOfBirth') }}</option>
						@enderror
					</select>
				</div>

				{{-- 2) Country Code --}}
				<div class="mb-6" id="country_code_id">
					<label for="country_code_country_id"
						class="ti-form-label @error('passport.country_code_country_id') error @enderror">
						@error('passport.country_code_country_id')
							<span style="font-size: 12px">{{ $message }}</span>
						@else
							{{ __('forms.CountryCode') }}
						@enderror
					</label>

					<select class="ti-form-select py-1 @error('passport.country_code_country_id') border-red-500 @enderror"
						id="country_code_country_id" name="passport[country_code_country_id]">
						@error('passport.country_code_country_id')
							<option value="">{{ __('forms.CountryCode') }}</option>
						@enderror
					</select>
				</div>

				{{-- 3) Nationality --}}
				<div class="mb-6" id="nationality_id">
					<label for="nationality_country_id"
						class="ti-form-label @error('passport.nationality_country_id') error @enderror">
						@error('passport.nationality_country_id')
							<span style="font-size: 12px">{{ $message }}</span>
						@else
							{{ __('forms.Nationality') }}
						@enderror
					</label>
					<select class="ti-form-select py-1 @error('passport.nationality_country_id') border-red-500 @enderror"
						id="nationality_country_id" name="passport[nationality_country_id]">
						@error('passport.nationality_country_id')
							<option value="">{{ __('forms.Nationality') }}</option>
						@enderror
					</select>
				</div>
			</div>

			{{-- Submit --}}
			<div class="flex justify-between">
				<div>

					<div id="fullCityPopover"
						style="
                                display: none;
                                margin-top:-18px;
                                vertical-align: top;
                                width: 100%;
                                font-size: 14px;
                                z-index:9999 !important;
                                ">
					</div>

					<div id="fullCountryCodePopover"
						style="
                                display: none;
                                margin-top:-18px;
                                vertical-align: top;
                                width: 100%;
                                font-size: 14px;
                                z-index:9999 !important;
                                ">
					</div>

					<div id="fullNationalityPopover"
						style="
                                display: none;
                                margin-top:-18px;
                                vertical-align: top;
                                width: 100%;
                                font-size: 14px;
                                z-index:9999 !important;
                                ">
					</div>

				</div>
				<button type="submit" class="ti-btn ti-btn-outline-success py-1 px-3 mr-0">
					<span>{{ __('forms.Update') }}</span>
				</button>
			</div>

		</form>
	</div>
</div>
