<div class="row personal-info-section">
    <div class="col-lg-12 p-0">
        <div class="card">
            <div class="card-header with-border">
                <h4 class="box-title m-0 p-0">{{ __('Personal Information') }}</h4>
            </div>
            <form class="form" method="post" action="{{ route('profileUpdate',basicEncrypt(Auth::user()->id)) }}" id="formProfile">
                @csrf
                <div class="card-body row">
                    <div class="form-group col-12 col-md-4 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text"
                            class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 name-validation form-control first_name" id="first_name" data-character-limit="20"
                            value="{{ old('first_name', ($user->first_name ?? '')) }}"
                            name="first_name" placeholder="" />
                            <label for="first_name" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('First Name') }} <span class="text-danger">*</span></label>
                        </div>
                        <div class="text-danger error first_name_error"></div>
                    </div>

                    <div class="form-group col-12 col-md-4 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text"
                            class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 name-validation form-control last_name" id="last_name" data-character-limit="20"
                            value="{{ old('last_name', ($user->last_name ?? '')) }}"
                            name="last_name" placeholder="" />
                            <label for="last_name" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Last Name') }} <span class="text-danger">*</span></label>
                        </div>
                        <div class="text-danger error last_name_error"></div>
                    </div>

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label for="language_id" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{__('Language')}}</label>
                            <select id="language_id" name="language_id" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11">
                                <option value="">{{ __('Select Language')}}</option>
                                @foreach ($language as $row)
                                    <option value="{{$row->id}}" {{isset(Auth::user()->setting->language_id) && Auth::user()->setting->language_id == $row->id ? 'selected' : ''}}>{{$row->name}}</option>
                                @endforeach
                            </select>
                            <span class="language_id_error error"></span>
                        </div>
                    </div>

                    <div class="form-group col-12 col-md-6">
                        <div class="relative z-0 w-full group">
                            <input type="text"
                                class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 account-username-validation form-control"
                                value="{{old('username',$user->username ?? '')}}"
                                name="username" id="username" placeholder="" autocomplete="off" @if(isset($user->username) && !empty($user->username)) disabled @endif/>
                            <label for="username" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Username') }}</label>
                        </div>
                        <div class="text-danger error username_error"></div>
                    </div>

                    <div class="form-group col-12 col-md-6">
                        <div class="relative z-0 w-full group">
                            <input type="email"
                                class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent form-control border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control"
                                value="{{ old('email', $user->email ?? '') }}"
                                name="email" placeholder="" disabled />
                            <label for="email" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Email') }}</label>
                            <div class="text-danger error email_error"></div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <span>{{__('To Change Your Email')}} <a class="linked change_email_link" href="{{url('profile#change_email')}}">{{ __('Click Here')}} </a></span>
                        </div>
                    </div>

                    <div class="form-group col-sm-6 col-12">
                        <div class="col-m-6 dob-div">
                            <label class="form-check-label text-sm description-dob mb-3" for="display_company_name">
                                {{ __('Date of Birth') }}
                             </label>
                        </div>
                        <div class="row dob-details-div">
                            <div class="form-group col-md-4">
                                <div class="relative z-0 w-full group">
                                    <input data-character-limit="2" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 day-validation form-control" type="text" id="day" name="day" value="{{ old('day', $dobDay) }}" min="1" max="31"  placeholder="">
                                    <label for="day" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Day') }}<span class="text-danger">*</span></label>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="month" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label ml-2">{{ __('Month') }}<span class="text-danger">*</span></label>
                                    <select id="month" name="month" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11">
                                        <option value="">Select</option>
                                        @foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $index => $month)
                                            <option value="{{ $index + 1 }}" {{ old('month', $dobMonth) == $index + 1 ? 'selected' : '' }}>{{ $month }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-md-4">
                                <div class="relative z-0 w-full group">
                                    <input data-character-limit="4" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11  number-validation form-control" type="text" id="year" name="year" value="{{ old('year', $dobYear) }}" min="1900" max="{{ date('Y') }}"  placeholder="">
                                    <label for="year" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 ml-2">{{ __('Year') }}<span class="text-danger">*</span></label>
                                </div>
                            </div>

                        </div>
                        @error('date_of_birth')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror

                        <div class="text-danger error date_of_birth_error"></div>

                    </div>
                    <div class="form-group col-sm-6 col-12">
                        <div class="relative z-0 w-full mb-1 group">
                            <!-- Input field with sponsor link -->
                            <input
                                type="text"
                                readonly
                                value="{{ route('sponsor', Auth::user()->details->username) }}"
                                class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control"

                                placeholder=" "
                            />
                            <!-- Floating label -->
                            <label
                               class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">
                               {{ __('Sponsor Link') }}
                           </label>
                            <!-- Copy Icon -->
                            <a
                                href="javascript:void(0)"
                                onclick="copySponsorLink('{{ route('sponsor', Auth::user()->details->username) }}')"
                                class="absolute top-1/2 right-2 -translate-y-1/2 text-primary"
                                data-bs-toggle="tooltip"
                                title="Copy">{!! renderIconHtml('copy') !!}
                            </a>
                        </div>
                    </div>
                    <div class="form-group col-6 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text" id="address_1"
                            class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control address-validation"
                            value="{{ old('address_1', ($user->address_1 ?? '')) }}"
                            name="address_1" placeholder="" />
                            <label for="address_1" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Street Name And House Number') }}</label>
                        </div>
                        <div class="text-danger error address_1_error"></div>
                    </div>

                    <div class="form-group col-6 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text" id="address_2"
                               class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control address-validation"
                               value="{{ old('address_2', ($user->address_2 ?? '')) }}"
                               name="address_2" placeholder="" />
                               <label for="address_2" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Address Line 2') }}</label>
                        </div>
                        <div class="text-danger error address_2_error"></div>
                    </div>

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label for="country_id" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{__('Country')}} <span class="text-danger">*</span></label>
                            <select id="country_id" name="country_id" class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11">
                                <option value="">Select Country</option>
                                @foreach ($country as $row)
                                    <option value="{{$row->id}}" {{isset($user) && $user->country_id == $row->id ? 'selected' : ''}} data-phone-code="{{ $row->phonecode }}">{{$row->country_name}}</option>
                                @endforeach
                            </select>
                            <span class="country_id_error error"></span>
                        </div>
                    </div>

                    <div class="col-12 col-md-4 state-input">
                        <div class="form-group">
                            <label for="state_id" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{__('Region / State / Province') }} <span class="text-danger">*</span></label>
                            <select id="state_id" name="state_id" class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11">
                                <option value="">{{__('Select Region / State / Province')}}</option>
                            </select>
                            <span class="state_id_error error"></span>
                        </div>
                    </div>

                    <div class="form-group col-12 col-md-4 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text" name="city" id="city" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control name-validation" value="{{ $user->city ?? '' }}" data-character-limit="50" placeholder="">
                            <label for="city" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('City') }}</label>
                        </div>
                        <span class="city_error error"></span>
                    </div>

                    <div class="form-group col-12 col-md-4 pb-3">
                        <div class="relative z-0 w-full group">
                            <input type="text" name="postal_code" id="postal_code" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 form-control postal-code-validation" value="{{ $user->postal_code ?? '' }}" placeholder="">
                            <label for="postal_code" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Postcode / ZIP Code') }}</label>
                        </div>
                        <span class="postal_code_error error"></span>
                    </div>

                    <div class="form-group col-12 col-md-4">
                        <div class="relative z-0 w-full mb-1 group">
                            <div class="input-group mb-3">
                                <span id="basic-addon2" class="input-group-text bg-highlight justify-content-center phone_code">{{$userCountryPhoneCode}}</span>
                                <input type="text" name="phone" id="phone" style="border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important;height: 42px;" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 phone-number-validation @error('phone') border-danger @enderror" value="{{ $user->phone ?? '' }}" placeholder="">
                            </div>
                            <label for="phone" style="margin-left: 80px;" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Phone') }}</label>
                            <span class="phone_error error"></span>
                        </div>
                    </div>

                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label for="timezone" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Timezone') }}</label>
                            <select class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" data-placeholder="{{ __('Please Select Timezone') }}" name="timezone" id="timezone">
                                <option value="">{{ __('Please Select Timezone') }}</option>
                                @foreach ($timeZoneWithOffsets as $row)
                                    <option value="{{ $row['timezone'] }}"
                                        {{ $row['timezone'] == Auth::user()->setting->timezone ? 'selected' : '' }}>
                                        {{ $row['formattedTimezone'] }}</option>
                                @endforeach
                            </select>
                            <div class="error text-danger timezone_error"></div>
                        </div>
                    </div>
                    <div class="form-col-md-8 col-12"></div>
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <input type="checkbox" id="is_business_account" name="is_business_account"  value="1" {{ old('is_business_account', $user->is_business_account ?? 0) == 1 ? 'checked' : '' }} />

                            <label class="form-check-label text-sm description-dob px-2 mb-0" for="is_business_account" style="text-transform: none !important;">
                                {{ __('This is a Company Account.') }}
                             </label>
                        </div>
                    </div>

                </div>

                <div class="card-footer text-left">
                    <button type="submit" value="update_profile" id="submitBtn"
                            class="btn btn-rounded btn-primary btn-outline btn-submit"><i
                            class="ti-save-alt"></i>
                            {!! renderIconHtml('update') !!}{{ __('Update')}} </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="change-email-section" style="display: none;">
    @include('frontend.profile.change-email')
</div>
