@if ($individual)
    @if ($idCard = $individual->lastActivePassport)
        @include('backend.crm.individuals.forms.passport-form-edit')
    @else
        <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.store', $individual) }}" method="POST">
                    @csrf

                    <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 autocomplete="off" id="passport_jmbg" type="text" name="passport[jmbg]"
                                value="{{ old('passport.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') }}"
                                    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') }}"
                                    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') }}"
                                    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 autocomplete="off" id="passport_reg_no" type="text" name="passport[reg_no]"
                                value="{{ old('passport.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 autocomplete="off" id="passport_issuer" type="text" name="passport[issuer]"
                                value="{{ old('passport.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 --}}
                    @if (!$readonly)
                        <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.Save') }}</span>
                            </button>
                        </div>
                    @endif

                </form>
            </div>
        </div>
    @endif
@else
    @include('backend.crm.placeholders.passport-form')
@endif