@if ($individual)
    @if($idCard = $individual->lastActiveIdCard)
        @include('backend.crm.individuals.forms.id-card-form-edit')
    @else
        <div class="box" id="id-card-form">
            <div class="box-header">
                <h5 class="box-title">{{ __('forms.IDCard') }}</h5>
            </div>
            <div class="box-body pb-2">
                <form action="{{ route('crm.idcards.store', $individual) }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-2 gap-x-6 mb-6">
                        <div>
                            <label for="jmbg" class="ti-form-label @error('jmbg') error @enderror">
                                @error('jmbg')
                                    {{ $message }}
                                @else
                                    {{ __('forms.JMBG') }}
                                @enderror
                            </label>
                            <input autocomplete="off" id="jmbg" type="text" name="jmbg" value="{{ old('jmbg') }}"
                                class="ti-form-input shadow-sm @error('jmbg') border-red-500 @enderror" placeholder="JMBG"
                                {{ $readonly ? 'disabled' : '' }}>
                        </div>
                        <div>
                            <label for="date_of_birth" class="ti-form-label @error('date_of_birth') error @enderror">
                                @error('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('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="date_of_birth" type="text" name="date_of_birth"
                                    value="{{ old('date_of_birth') }}"
                                    class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2 @error('date_of_birth') border-red-500 @enderror"
                                    placeholder="@error('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">

                        <div>
                            <label for="issued_at" class="ti-form-label @error('issued_at') error @enderror">
                                @error('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('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="issued_at" type="text" name="issued_at" value="{{ old('issued_at') }}"
                                    class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2 @error('issued_at') border-red-500 @enderror"
                                    placeholder="@error('issued_at'){{ __('forms.IssuingDate') }}@else{{ __('forms.ChooseDate') }}@enderror"
                                    readonly {{ $readonly ? 'disabled' : '' }}>
                            </div>
                        </div>



                        <div>
                            <label for="expires_at" class="ti-form-label @error('expires_at') error @enderror">
                                @error('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('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="expires_at" type="text" name="expires_at" value="{{ old('expires_at') }}"
                                    class="ti-form-input rounded-l-none focus:z-10 flatpickr-input date-picker py-2 @error('expires_at') border-red-500 @enderror"
                                    placeholder="@error('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">
                        <div>
                            <label for="reg_no" class="ti-form-label @error('reg_no') error @enderror">
                                @error('reg_no')
                                    {{ $message }}
                                @else
                                    {{ __('forms.RegNo') }}
                                @enderror
                            </label>
                            <input autocomplete="off" id="reg_no" type="text" name="reg_no" value="{{ old('reg_no') }}"
                                class="ti-form-input shadow-sm  @error('reg_no') border-red-500 @enderror"
                                @error('jmbg') border-red-500 @enderror placeholder="{{ __('forms.RegNo') }}"
                                {{ $readonly ? 'disabled' : '' }}>
                        </div>
                        <div>
                            <label for="issuer" class="ti-form-label @error('issuer') error @enderror">
                                @error('issuer')
                                    {{ $message }}
                                @else
                                    {{ __('forms.IssuingAuthority') }}
                                @enderror
                            </label>
                            <input autocomplete="off" id="issuer" type="text" type="text" name="issuer" value="{{ old('issuer') }}"
                                class="ti-form-input shadow-sm @error('issuer') border-red-500 @enderror"
                                placeholder="{{ __('forms.IssuingAuthority') }}" {{ $readonly ? 'disabled' : '' }}>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="place_of_birth_city_id" class="ti-form-label @error('place_of_birth_city_id') error @enderror">
                            @error('place_of_birth_city_id')
                                {{ $message }}
                            @else
                                {{ __('forms.PlaceOfBirth') }}
                            @enderror
                        </label>
                        <select class="ti-form-select py-1 @error('place_of_birth_city_id') border-red-500 @enderror"
                                id="place_of_birth_city_id" 
                                name="place_of_birth_city_id">
                                @error('place_of_birth_city_id')
                                    <option value="">{{ __('forms.PlaceOfBirth') }}</option>
                                @enderror
                        </select>
                    </div>
                    @if (!$readonly)
                        <div class="flex justify-between">
                            <div>
                                @if (session()->has('message'))
                                    <div class="mt-4 text-green-600">
                                        {{ session('message') }}
                                    </div>
                                @endif
                            </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.id-card-form')
@endif