<div class="box" id="individual-form">
	<div class="box-header">
		<h5 class="box-title">{{ __('forms.BasicData') }}</h5>
	</div>
	<div class="box-body pb-2">
		<form action="{{ route('crm.individuals.store', $individual) }}" method="POST">
			@csrf
			<div class="grid grid-cols-2 gap-x-6 space-y-0 lg:space-y-0">
				<div class="mb-6">
					<label for="FirstName" class="ti-form-label @error('first_name') error @enderror">
						@error('first_name')
							{{ $message }}
						@else
							{{ __('forms.FirstName') }}
						@enderror
					</label>
					<input id="FirstName" type="text" name="first_name" value="{{ old('first_name') }}"
						class="ti-form-input shadow-sm @error('first_name') border-red-500 @enderror"
						placeholder="{{ __('forms.FirstName') }}" {{ $readonly ? 'disabled' : '' }}>
				</div>
				<div class="mb-6">
					<label for="Lastname" class="ti-form-label @error('last_name') error @enderror">
						@error('last_name')
							{{ $message }}
						@else
							{{ __('forms.Lastname') }}
						@enderror
					</label>
					<input id="Lastname" type="text" name="last_name" value="{{ old('last_name') }}"
						class="ti-form-input shadow-sm @error('last_name') border-red-500 @enderror"
						placeholder="{{ __('forms.Lastname') }}" {{ $readonly ? 'disabled' : '' }}>
				</div>
			</div>
			<div class="mb-6">
				<label for="Email" class="ti-form-label @error('email') error @enderror">
					@error('email')
						{{ $message }}
					@else
						{{ __('forms.Email') }}
					@enderror
				</label>
				<input id="Email" type="email" name="email" value="{{ old('email') }}"
					class="ti-form-input shadow-sm @error('email') border-red-500 @enderror" placeholder="{{ __('forms.Email') }}"
					autocomplete="email" {{ $readonly ? 'disabled' : '' }}>
			</div>
			<div class="grid grid-cols-2 gap-x-6 space-y-0 lg:space-y-0">
				<div class="mb-6">
					<label for="mobile" class="ti-form-label @error('mobile') error @enderror">
						@error('mobile')
							{{ $message }}
						@else
							{{ __('forms.MobilePhoneNumber') }}
						@enderror
					</label>
					<input id="mobile" type="text" name="mobile" value="{{ old('mobile') }}"
						class="ti-form-input shadow-sm @error('mobile') border-red-500 @enderror"
						placeholder="@error('mobile') {{ __('forms.Mobile') }} @enderror {{ __('forms.PhonePlaceholder') }}"
						{{ $readonly ? 'disabled' : '' }}>
				</div>
				<div class="mb-6">
					<label for="phone" class="ti-form-label @error('phone') error @enderror">
						@error('phone')
							{{ $message }}
						@else
							{{ __('forms.PhoneNumber') }}
						@enderror
					</label>
					<input id="phone" type="text" name="phone" value="{{ old('phone') }}"
						class="ti-form-input shadow-sm @error('phone') border-red-500 @enderror"
						placeholder="@error('phone') {{ __('forms.Phone') }} @enderror {{ __('forms.PhonePlaceholder') }}"
						{{ $readonly ? 'disabled' : '' }}>
				</div>
			</div>
			<!-- Resident and Official Checkbox -->
			<div class="grid grid-cols-2 gap-x-6 space-y-0 lg:space-y-0 mt-2 mb-5 opacity-40">
				<input type="hidden" name="resident" value="1">
				<label
					class="mt-1 p-3 flex w-full bg-white border border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70">
					<input type="checkbox" class="ti-form-checkbox mt-0.5 pointer-events-none" id="resident" value="1"
						name="resident" checked disabled>
					<span class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{ __('forms.Resident') }}</span>
				</label>

				<input type="hidden" name="official" value="0">
				<label
					class="mt-1 p-3 flex w-full bg-white border border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:bg-bgdark dark:border-white/10 dark:text-white/70">
					<input type="checkbox" class="ti-form-checkbox mt-0.5 pointer-events-none" id="official" value="1"
						name="official" disabled>
					<span class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{ __('forms.Official') }} <a
							type="button" class="hs-dropdown-toggle" data-hs-overlay="#hs-funkcioner-modal">i</a></span>
				</label>
				<div id="hs-large-modal" class="hs-overlay hidden ti-modal">
					<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
						<div class="ti-modal-content">
							<div class="ti-modal-header">
								<h3 class="ti-modal-title">
									Modal title
								</h3>
								<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-large-modal">
									<span class="sr-only">Close</span>
									<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
											fill="currentColor" />
									</svg>
								</button>
							</div>
							<div class="ti-modal-body">
								<p class="mt-1 text-gray-800 dark:text-white/70">
									This is a wider card with supporting text below as a natural lead-in to additional content.
								</p>
							</div>
							<div class="ti-modal-footer">
								<button type="button"
									class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
									data-hs-overlay="#hs-large-modal">
									Close
								</button>
								<a class="ti-btn  bg-primary text-white hover:bg-primary  focus:ring-primary  dark:focus:ring-offset-white/10"
									href="javascript:void(0);">
									Save changes
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			@if (!$readonly)
				<!-- Submit Button -->
				<div class="flex justify-between">
					<div>
					</div>

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