@extends('frontend.layouts.main2')
<title>{{ translate('Humsafar - Step-6') }}</title>
@section('content')


    <!-- ====main-section==== -->
    <main class="pb-20 xs:pb-0">
        <section class="flex items-start justify-between">
            <!-- ==left-banner-part== -->
            <div class="w-[400px] 2xl:w-[500px] h-screen hidden md:block">
                <img src="{{ asset('admin/registrationImages/' . $registrations->banner_image) }}"
                    alt="banner image"
                    class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
                <picture class="hidden"><img
                        src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image" loading="lazy"></picture>
            </div>
            <!-- ==right-all-content-part== -->
            <div
                class="md:px-10 xl:px-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
                <!-- =logo-part= -->

                <div
                class="flex md:items-center justify-between flex-col text-center md:flex-row">
                <a href="{{ url('/')}}"
                    class="pl-6 xs:pl-10 sm:pl-20 md:pl-0 fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20"><img
                        src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->	system_logo) }}"
                        alt="system_logo"
                        class="w-[152px] lg:w-[177.74px]"></a>
                <!-- =small-device-image= -->
                <picture class="py-7 md:hidden">
                    <img src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image"
                        class="mb-9 w-full max-h-[400px] object-cover"
                        loading="lazy">
                </picture>

                @auth
                <p class="text-base font-normal text-black">
                    <a href="{{ route('login') }}">{{ Auth::user()->name }}</a>
                    <a href="{{ route('logout') }}" class="font-bold duration-300 hover:text-red-color"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        | {{ translate('Logout') }}
                    </a>
                </p>

                <!-- Logout form (hidden) -->
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
                @else
                <p class="text-base font-normal text-black">{{ translate('Do you have an account?') }}' <a href="{{ route('login') }}" class="font-bold duration-300 hover:text-red-color">{{ translate('Log in') }}</a></p>
                @endauth

            </div>


                <!-- =main-part= -->
                <div
                    class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 xl:pt-20 w-full">
                    <div class="w-full">
                        <div
                            class="text-black text-[22px] lg:text-[26px] xl:text-[30px] font-semibold mb-10 flex items-center gap-2.5">
                            <span
                                class="min-w-[34px] h-[34px] xl:min-w-[40px] xl:h-10 rounded-full text-white bg-black text-base xl:text-xl font-semibold flex items-center justify-center">05</span><p>{{ $registrations->partner_detail }}</p>
                        </div>

                        <form action="{{ route('store_Step6')}}" method="post" id="registerForm2">
                        @csrf

                            <!-- =title= -->
                            <div
                                class="flex items-center w-full gap-3 mb-8">
                                <span
                                    class="text-black text-xl font-semibold whitespace-nowrap">{{ translate('Partner Expectation') }}
                                    </span>
                                <div
                                    class="flex-1 h-[1px] bg-[#e2e2e2]"></div>
                            </div>
                            <!-- =all-information= -->
                            <div class="gap-5 w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-3">
                                <!-- =item= -->

                                @if ($origin->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Origin') }}</h5>
                                            <select name="origin_id" id="origin_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                                <option value="" selected>{{ translate('Select') }}</option>
                                                @foreach ($origin->metas as $origin)
                                                    <option value="{{ $origin->id}}" @if (old('origin_id', session('step5.origin_id')) == $origin->id) selected @endif>{{ $origin->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('origin_id')
                                                <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                            @enderror

                                    </div>
                                @endif


                                @if ($am_looking_for->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Am Looking For') }}</h5>
                                        <select name="am_looking_for_id" id="am_looking_for_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($am_looking_for->metas as $am_looking_for)
                                                <option value="{{ $am_looking_for->id}}" @if (old('am_looking_for_id', session('step5.am_looking_for_id')) == $am_looking_for->id) selected @endif>{{ $am_looking_for->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('length_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif


                                @if ($Lengte->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Length') }}</h5>
                                        <select name="length_id" id="length_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($Lengte->metas as $length)
                                                <option value="{{ $length->id}}" @if (old('length_id', session('step5.length_id')) == $length->id) selected @endif>{{ $length->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('length_id')
                                                <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif


                                <div >
                                    <h5 class="text-sm text-black font-semibold mb-2.5 ">{{ translate('Weight') }} (kg)</h5>
                                    <input type="number" name="weight" id="weight" value="{{ old('weight', session('step5.weight', '')) }}"
                                        placeholder="Enter your weight"
                                        class="p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium outline-none focus:border-red-color">

                                    <!-- Show validation error for weight -->
                                    @error('weight')
                                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>


                                @if ($religion->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Religion') }}</h5>
                                        <select name="religion_id" id="religion_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($religion->metas as $religion)
                                                <option value="{{ $religion->id}}" @if (old('religion_id', session('step5.religion_id')) == $religion->id) selected @endif>{{ $religion->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('religion_id')
                                                <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif


                                @if ($relation_status->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Relation Status') }}</h5>
                                        <select name="relation_status_id" id="relation_status_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($relation_status->metas as $relation_status)
                                                <option value="{{ $relation_status->id}}" @if (old('relation_status_id', session('step5.relation_status_id')) == $relation_status->id) selected @endif>{{ $relation_status->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('relation_status_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif


                                @if ($education->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Education') }}</h5>
                                        <select name="education_id" id="education_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($education->metas as $education)
                                                <option value="{{ $education->id}}" @if (old('education_id', session('step5.education_id')) == $education->id) selected @endif>{{ $education->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('education_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif


                                <!-- =all-information= -->

                                <div>
                                    <h5
                                        class="text-sm text-black font-semibold mb-2.5">{{ translate('Smoke') }}</h5>
                                    <select name="smoke" id="smoke"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        <option value="yes" @if (old('smoke', session('step5.smoke')) == 'yes') selected @endif>{{ translate('Yes') }}</option>
                                        <option value="no" @if (old('smoke', session('step5.smoke')) == 'no') selected @endif>{{ translate('No') }}</option>
                                    </select>
                                </div>

                                <div>
                                    <h5
                                        class="text-sm text-black font-semibold mb-2.5">{{ translate('Drinking') }}</h5>
                                    <select name="drinking" id="drinking"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        <option value="yes" @if (old('drinking', session('step5.drinking')) == 'yes') selected @endif>{{ translate('Yes') }}</option>
                                        <option value="no" @if (old('drinking', session('step5.drinking')) == 'no') selected @endif>{{ translate('No') }}</option>
                                    </select>
                                </div>

                                <!-- =item= -->
                                <div>
                                    <h5
                                        class="text-sm text-black font-semibold mb-2.5">{{ translate('Going Out') }}</h5>
                                    <select name="going_out" id="going_out"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        <option value="yes" @if (old('going_out', session('step5.going_out')) == 'yes') selected @endif >{{ translate('Yes') }}</option>
                                        <option value="no"  @if (old('going_out', session('step5.going_out')) == 'no') selected @endif >{{ translate('No') }}</option>
                                    </select>
                                    @error('going_out')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>


                                @if ($children->status == 1)
                                    <div>
                                        <h5
                                            class="text-sm text-black font-semibold mb-2.5">{{ translate('Children') }}</h5>
                                        <select name="children_id" id="children_id"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                            <option value="" selected>{{ translate('Select') }}</option>
                                            @foreach ($children->metas as $children)
                                                <option value="{{ $children->id}}" @if (old('children_id', session('step5.children_id')) == $children->id) selected @endif>{{ $children->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('children_id')
                                            <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif



                                @if ($cast->status == 1)
                                <div>
                                    <h5
                                    class="text-sm text-black font-semibold mb-2.5">{{ translate('Cast') }}</h5>
                                    <select name="cast" id="cast"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        @foreach ($cast->metas as $cast_data)
                                            <option value="{{ $cast_data->id}}" @if (old('cast', session('step5.cast')) == $cast_data->id) selected @endif>{{ $cast_data->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('cast')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif



                            @if ($subcast->status == 1)
                                <div>
                                    <h5
                                    class="text-sm text-black font-semibold mb-2.5">{{ translate('SubCast') }}</h5>
                                    <select name="subcast" id="subcast"  class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none">
                                        <option value="" selected>{{ translate('Select') }}</option>
                                        @foreach ($subcast->metas as $subcast_data)
                                            <option value="{{ $subcast_data->id}}" @if (old('subcast', session('step5.subcast')) == $subcast_data->id) selected @endif>{{ $subcast_data->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('subcast')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif





                            </div>

                            <div>
                                <h5 class="text-sm text-black font-semibold mb-2.5 mt-5">{{ translate('Age Range') }}</h5>
                                <div class="flex gap-4">
                                    <!-- From Age Input -->
                                    <div class="w-full">
                                        <label for="from_age" class="text-sm text-black font-medium mb-2">{{ translate('From Age') }}</label>
                                        <input type="number" name="from_age" id="from_age"
                                            value="{{ old('from_age', session('step5.from_age', '')) }}"
                                            placeholder="{{ translate('Enter minimum age') }}"
                                            class="p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium outline-none focus:border-red-color"
                                            min="18" max="100">
                                        @error('from_age')
                                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- To Age Input -->
                                    <div class="w-full">
                                        <label for="to_age" class="text-sm text-black font-medium mb-2">{{ translate('To Age') }}</label>
                                        <input type="number" name="to_age" id="to_age"
                                            value="{{ old('to_age', session('step5.to_age', '')) }}"
                                            placeholder="{{ translate('Enter maximum age') }}"
                                            class="p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium outline-none focus:border-red-color"
                                            min="18" max="100">
                                        @error('to_age')
                                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>


                            <div class="w-full sm:w-1/3 mt-8">
                                <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('Country') }} *</h5>
                                <select id="country_id" name="country_id"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none"  required>
                                    <option selected>{{ translate('Select') }}</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}" @if (old('country_id', session('step5.country_id')) == $country->id) selected @endif>{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                @error('country_id')
                                    <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="w-full sm:w-1/3 mt-2">
                                <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('State') }} *</h5>
                                <select id="state_id" name="state_id"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none" required>
                                    <option value="" selected>{{ translate('Select') }}</option>
                                </select>
                            </div>

                            <div class="w-full sm:w-1/3 mt-2">
                                <h5 class="text-sm text-black font-semibold mb-2.5">{{ translate('City') }} *</h5>
                                <select id="city_id" name="city_id"
                                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-full text-[#6c6c6c] text-sm font-medium bg-white outline-none focus:outline-none" required>
                                    <option value="" selected>{{ translate('Select') }}</option>
                                </select>
                            </div>



                            <div class="flex items-center justify-center gap-3 pt-20 pb-10">
                                <a href="{{ route('get_Step5')}}"
                                    class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-[#d0d0d0] duration-300 hover:border-red-color">
                                    <svg width="17" height="13"
                                        viewBox="0 0 17 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            clip-rule="evenodd"
                                            d="M16.9004 6.4998C16.9004 6.11321 16.587 5.7998 16.2004 5.7998L1.20039 5.79981C0.813791 5.79981 0.500391 6.11321 0.500391 6.49981C0.500391 6.8864 0.813791 7.19981 1.20039 7.19981L16.2004 7.1998C16.587 7.1998 16.9004 6.8864 16.9004 6.4998Z"
                                            fill="#444444" />
                                        <path fill-rule="evenodd"
                                            clip-rule="evenodd"
                                            d="M5.68063 0.990524C5.39936 0.725294 4.95634 0.738297 4.69111 1.01957L5.20039 1.49981L5.70967 1.98005C5.9749 1.69878 5.9619 1.25575 5.68063 0.990524ZM5.20039 11.4998L5.70963 11.0195L5.51713 10.8149C5.39438 10.6843 5.21897 10.4974 5.00844 10.2724C4.58728 9.82219 4.02612 9.21998 3.46529 8.61104C2.90369 8.00126 2.34552 7.38808 1.92903 6.91476C1.79 6.75677 1.66914 6.61705 1.57034 6.49981C1.66914 6.38256 1.79 6.24284 1.92903 6.08485C2.34552 5.61154 2.90369 4.99835 3.46529 4.38857C4.02612 3.77963 4.58728 3.17743 5.00844 2.72724C5.21897 2.5022 5.39438 2.31529 5.51713 2.18468L5.70967 1.98005L5.20039 1.49981L4.69111 1.01957L4.49693 1.22593C4.37358 1.35719 4.19743 1.54488 3.98609 1.77079C3.5635 2.2225 2.99966 2.82757 2.43549 3.44014C1.87209 4.05188 1.30526 4.67445 0.878001 5.16C0.665241 5.40179 0.481713 5.61568 0.349258 5.77962C0.284148 5.86021 0.223358 5.93857 0.175935 6.00687C0.153092 6.03977 0.124034 6.08359 0.0978551 6.1319C0.0848794 6.15585 0.0658822 6.19314 0.0485597 6.23914C0.0355635 6.27365 0.000389099 6.37131 0.000389099 6.49981C0.000389099 6.6283 0.0355635 6.72596 0.0485597 6.76047C0.0658822 6.80647 0.0848794 6.84376 0.0978551 6.86771C0.124034 6.91602 0.153092 6.95984 0.175935 6.99274C0.223358 7.06104 0.284148 7.13941 0.349258 7.21999C0.481713 7.38393 0.665241 7.59782 0.878001 7.83961C1.30526 8.32516 1.87209 8.94773 2.43549 9.55947C2.99966 10.172 3.5635 10.7771 3.98609 11.2288C4.19743 11.4547 4.37358 11.6424 4.49693 11.7737L4.69104 11.98L5.20039 11.4998ZM5.20039 11.4998L5.70963 11.0195C5.97486 11.3008 5.9619 11.7439 5.68063 12.0091C5.39936 12.2743 4.95627 12.2612 4.69104 11.98L5.20039 11.4998Z"
                                            fill="#444444" />
                                    </svg>
                                    <span
                                        class="text-[#444] text-sm font-semibold">{{ translate('Back') }}</span>
                                </a>
                                <button type="submit" id="submitButton2"
                                    class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-blue-color bg-blue-color text-white duration-300 hover:bg-red-color hover:border-red-color">
                                    <span class="text-sm font-semibold">Finish</span>
                                    <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M-3.53054e-08 6.4998C-1.58067e-08 6.11321 0.313401 5.7998 0.7 5.7998L15.7 5.79981C16.0866 5.79981 16.4 6.11321 16.4 6.49981C16.4 6.8864 16.0866 7.19981 15.7 7.19981L0.7 7.1998C0.313401 7.1998 -5.4804e-08 6.8864 -3.53054e-08 6.4998Z" fill="white" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2198 0.990524C11.501 0.725294 11.9441 0.738297 12.2093 1.01957L11.7 1.49981L11.1907 1.98005C10.9255 1.69878 10.9385 1.25575 11.2198 0.990524ZM11.7 11.4998L11.1908 11.0195L11.3833 10.8149C11.506 10.6843 11.6814 10.4974 11.8919 10.2724C12.3131 9.82219 12.8743 9.21998 13.4351 8.61104C13.9967 8.00126 14.5549 7.38808 14.9714 6.91476C15.1104 6.75677 15.2313 6.61705 15.33 6.49981C15.2313 6.38256 15.1104 6.24284 14.9714 6.08485C14.5549 5.61154 13.9967 4.99835 13.4351 4.38857C12.8743 3.77963 12.3131 3.17743 11.8919 2.72724C11.6814 2.5022 11.506 2.31529 11.3833 2.18468L11.1907 1.98005L11.7 1.49981L12.2093 1.01957L12.4035 1.22593C12.5268 1.35719 12.703 1.54488 12.9143 1.77079C13.3369 2.2225 13.9007 2.82757 14.4649 3.44014C15.0283 4.05188 15.5951 4.67445 16.0224 5.16C16.2351 5.40179 16.4187 5.61568 16.5511 5.77962C16.6162 5.86021 16.677 5.93857 16.7245 6.00687C16.7473 6.03977 16.7764 6.08359 16.8025 6.1319C16.8155 6.15585 16.8345 6.19314 16.8518 6.23914C16.8648 6.27365 16.9 6.37131 16.9 6.49981C16.9 6.6283 16.8648 6.72596 16.8518 6.76047C16.8345 6.80647 16.8155 6.84376 16.8025 6.86771C16.7764 6.91602 16.7473 6.95984 16.7245 6.99274C16.677 7.06104 16.6162 7.13941 16.5511 7.21999C16.4187 7.38393 16.2351 7.59782 16.0224 7.83961C15.5951 8.32516 15.0283 8.94773 14.4649 9.55947C13.9007 10.172 13.3369 10.7771 12.9143 11.2288C12.703 11.4547 12.5268 11.6424 12.4035 11.7737L12.2093 11.98L11.7 11.4998ZM11.7 11.4998L11.1908 11.0195C10.9255 11.3008 10.9385 11.7439 11.2198 12.0091C11.501 12.2743 11.9441 12.2612 12.2093 11.98L11.7 11.4998Z" fill="white" />
                                    </svg>
                                </button>
                            </div>

                        </form>

                        <!-- =page-buttons= -->
                        {{-- <div
                            class="flex items-center justify-center gap-3 pt-20 pb-10">
                            <a href="#"
                                class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-[#d0d0d0] duration-300 hover:border-red-color">
                                <svg width="17" height="13"
                                    viewBox="0 0 17 13" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M16.9004 6.4998C16.9004 6.11321 16.587 5.7998 16.2004 5.7998L1.20039 5.79981C0.813791 5.79981 0.500391 6.11321 0.500391 6.49981C0.500391 6.8864 0.813791 7.19981 1.20039 7.19981L16.2004 7.1998C16.587 7.1998 16.9004 6.8864 16.9004 6.4998Z"
                                        fill="#444444" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M5.68063 0.990524C5.39936 0.725294 4.95634 0.738297 4.69111 1.01957L5.20039 1.49981L5.70967 1.98005C5.9749 1.69878 5.9619 1.25575 5.68063 0.990524ZM5.20039 11.4998L5.70963 11.0195L5.51713 10.8149C5.39438 10.6843 5.21897 10.4974 5.00844 10.2724C4.58728 9.82219 4.02612 9.21998 3.46529 8.61104C2.90369 8.00126 2.34552 7.38808 1.92903 6.91476C1.79 6.75677 1.66914 6.61705 1.57034 6.49981C1.66914 6.38256 1.79 6.24284 1.92903 6.08485C2.34552 5.61154 2.90369 4.99835 3.46529 4.38857C4.02612 3.77963 4.58728 3.17743 5.00844 2.72724C5.21897 2.5022 5.39438 2.31529 5.51713 2.18468L5.70967 1.98005L5.20039 1.49981L4.69111 1.01957L4.49693 1.22593C4.37358 1.35719 4.19743 1.54488 3.98609 1.77079C3.5635 2.2225 2.99966 2.82757 2.43549 3.44014C1.87209 4.05188 1.30526 4.67445 0.878001 5.16C0.665241 5.40179 0.481713 5.61568 0.349258 5.77962C0.284148 5.86021 0.223358 5.93857 0.175935 6.00687C0.153092 6.03977 0.124034 6.08359 0.0978551 6.1319C0.0848794 6.15585 0.0658822 6.19314 0.0485597 6.23914C0.0355635 6.27365 0.000389099 6.37131 0.000389099 6.49981C0.000389099 6.6283 0.0355635 6.72596 0.0485597 6.76047C0.0658822 6.80647 0.0848794 6.84376 0.0978551 6.86771C0.124034 6.91602 0.153092 6.95984 0.175935 6.99274C0.223358 7.06104 0.284148 7.13941 0.349258 7.21999C0.481713 7.38393 0.665241 7.59782 0.878001 7.83961C1.30526 8.32516 1.87209 8.94773 2.43549 9.55947C2.99966 10.172 3.5635 10.7771 3.98609 11.2288C4.19743 11.4547 4.37358 11.6424 4.49693 11.7737L4.69104 11.98L5.20039 11.4998ZM5.20039 11.4998L5.70963 11.0195C5.97486 11.3008 5.9619 11.7439 5.68063 12.0091C5.39936 12.2743 4.95627 12.2612 4.69104 11.98L5.20039 11.4998Z"
                                        fill="#444444" />
                                </svg>
                                <span
                                    class="text-[#444] text-sm font-semibold">Back</span>
                            </a>
                            <a href="{{ route('description-details')}}"
                                class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-blue-color bg-blue-color text-white duration-300 hover:bg-red-color hover:border-red-color">
                                <span
                                    class="text-sm font-semibold">Next</span>
                                <svg width="17" height="13"
                                    viewBox="0 0 17 13" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M-3.53054e-08 6.4998C-1.58067e-08 6.11321 0.313401 5.7998 0.7 5.7998L15.7 5.79981C16.0866 5.79981 16.4 6.11321 16.4 6.49981C16.4 6.8864 16.0866 7.19981 15.7 7.19981L0.7 7.1998C0.313401 7.1998 -5.4804e-08 6.8864 -3.53054e-08 6.4998Z"
                                        fill="white" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M11.2198 0.990524C11.501 0.725294 11.9441 0.738297 12.2093 1.01957L11.7 1.49981L11.1907 1.98005C10.9255 1.69878 10.9385 1.25575 11.2198 0.990524ZM11.7 11.4998L11.1908 11.0195L11.3833 10.8149C11.506 10.6843 11.6814 10.4974 11.8919 10.2724C12.3131 9.82219 12.8743 9.21998 13.4351 8.61104C13.9967 8.00126 14.5549 7.38808 14.9714 6.91476C15.1104 6.75677 15.2313 6.61705 15.33 6.49981C15.2313 6.38256 15.1104 6.24284 14.9714 6.08485C14.5549 5.61154 13.9967 4.99835 13.4351 4.38857C12.8743 3.77963 12.3131 3.17743 11.8919 2.72724C11.6814 2.5022 11.506 2.31529 11.3833 2.18468L11.1907 1.98005L11.7 1.49981L12.2093 1.01957L12.4035 1.22593C12.5268 1.35719 12.703 1.54488 12.9143 1.77079C13.3369 2.2225 13.9007 2.82757 14.4649 3.44014C15.0283 4.05188 15.5951 4.67445 16.0224 5.16C16.2351 5.40179 16.4187 5.61568 16.5511 5.77962C16.6162 5.86021 16.677 5.93857 16.7245 6.00687C16.7473 6.03977 16.7764 6.08359 16.8025 6.1319C16.8155 6.15585 16.8345 6.19314 16.8518 6.23914C16.8648 6.27365 16.9 6.37131 16.9 6.49981C16.9 6.6283 16.8648 6.72596 16.8518 6.76047C16.8345 6.80647 16.8155 6.84376 16.8025 6.86771C16.7764 6.91602 16.7473 6.95984 16.7245 6.99274C16.677 7.06104 16.6162 7.13941 16.5511 7.21999C16.4187 7.38393 16.2351 7.59782 16.0224 7.83961C15.5951 8.32516 15.0283 8.94773 14.4649 9.55947C13.9007 10.172 13.3369 10.7771 12.9143 11.2288C12.703 11.4547 12.5268 11.6424 12.4035 11.7737L12.2093 11.98L11.7 11.4998ZM11.7 11.4998L11.1908 11.0195C10.9255 11.3008 10.9385 11.7439 11.2198 12.0091C11.501 12.2743 11.9441 12.2612 12.2093 11.98L11.7 11.4998Z"
                                        fill="white" />
                                </svg>
                            </a>
                        </div> --}}
                    </div>

                </div>

            </div>
        </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>


    <script>
        $(document).ready(function() {
        // Initialize Select2
        $('#origin_id').select2();
        $('#am_looking_for_id').select2();
        $('#length_id').select2();
        $('#religion_id').select2();
        $('#relation_status_id').select2();
        $('#education_id').select2();
        $('#children_id').select2();
        $('#country_id').select2();
        $('#state_id').select2();
        $('#city_id').select2();
        $('#cast').select2();
        $('#subcast').select2();
        $('#smoke').select2();
        $('#drinking').select2();
        $('#going_out').select2();
    });
    </script>



    <style>
        .select2-container--default .select2-selection--single {
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 14px;
            line-height: normal;
        }

        .select2-container .select2-dropdown {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 50px;
            position: absolute;
            top: 1px;
            right: 1px;
            width: 20px;
        }
    </style>


@endsection

@push('scripts')


<script>
    $(document).ready(function() {
        function loadStates(countryId, selectedStateId = null) {
            if (countryId) {
                $.ajax({
                    url: '{{ route("getStates", ":country") }}'.replace(':country', countryId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#state_id').empty();
                        $('#state_id').append('<option value="" selected>Select State</option>');
                        $.each(data, function(key, state) {
                            var selected = "{{ session('step5.state_id') }}" == state.id ? 'selected' : '';
                            $('#state_id').append('<option value="' + state.id + '" ' + selected + '>' + state.name + '</option>');
                        });

                        // If there's a preselected state, select it
                        if (selectedStateId) {
                            $('#state_id').val(selectedStateId).trigger('change');
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText); // Log errors for debugging
                    }
                });
            } else {
                $('#state_id').empty().append('<option value="" selected>Select State</option>');
                $('#city_id').empty().append('<option value="" selected>Select City</option>'); // Clear city dropdown
            }
        }

        function loadCities(stateId, selectedCityId = null) {
            if (stateId) {
                $.ajax({
                    url: '{{ route("getCities", ":state") }}'.replace(':state', stateId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#city_id').empty();
                        $('#city_id').append('<option value="" selected>Select City</option>');
                        $.each(data, function(key, city) {
                            var selected = "{{ session('step5.city_id') }}" == city.id ? 'selected' : '';
                            $('#city_id').append('<option value="' + city.id + '" ' + selected + '>' + city.name + '</option>');
                        });

                        // If there's a preselected city, select it
                        if (selectedCityId) {
                            $('#city_id').val(selectedCityId); // Select city
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText); // Log errors for debugging
                    }
                });
            } else {
                $('#city_id').empty().append('<option value="" selected>Select City</option>'); // Clear city dropdown
            }
        }

        // Get user's current location and auto-select country, state, city
        function autoSelectLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var lat = position.coords.latitude;
                    var lon = position.coords.longitude;

                    // Use a reverse geocoding service to get country, state, and city
                    $.ajax({
                        url: 'https://api.opencagedata.com/geocode/v1/json',
                        type: 'GET',
                        data: {
                            'q': lat + ',' + lon,
                            'key': '52bd9a98cd194e09a699ddc5285a1d04', // Replace with your OpenCage API key
                            'pretty': 1
                        },
                        success: function(response) {
                            var country = response.results[0].components.country;
                            var state = response.results[0].components.state;
                            var city = response.results[0].components.city || response.results[0].components.town;

                            // Find the country option based on the name
                            var countryOption = $('#country_id option').filter(function() {
                                return $(this).text() === country;
                            });

                            if (countryOption.length) {
                                var countryId = countryOption.val();
                                $('#country_id').val(countryId).trigger('change'); // Select country and trigger change to load states

                                // Wait for states to load, then auto-select state
                                setTimeout(function() {
                                    var stateOption = $('#state_id option').filter(function() {
                                        return $(this).text() === state;
                                    });

                                    if (stateOption.length) {
                                        var stateId = stateOption.val();
                                        $('#state_id').val(stateId).trigger('change'); // Select state and trigger change to load cities

                                        // Wait for cities to load, then auto-select city
                                        setTimeout(function() {
                                            var cityOption = $('#city_id option').filter(function() {
                                                return $(this).text() === city;
                                            });

                                            if (cityOption.length) {
                                                $('#city_id').val(cityOption.val()); // Select city
                                            }
                                        }, 500); // Adjust timeout if needed
                                    }
                                }, 500); // Adjust timeout if needed
                            }
                        },
                        error: function(xhr) {
                            console.error("Error in reverse geocoding:", xhr.responseText);
                        }
                    });
                }, function(error) {
                    console.error("Geolocation error:", error);
                });
            } else {
                console.error("Geolocation is not supported by this browser.");
            }
        }

        // Trigger state and city loading on manual country/state change
        $('#country_id').change(function() {
            var countryId = $(this).val();
            loadStates(countryId);
        });

        $('#state_id').change(function() {
            var stateId = $(this).val();
            loadCities(stateId);
        });

        // Check if session has state_id and city_id, otherwise use geolocation
        var sessionStateId = "{{ session('step5.state_id') }}";
        var sessionCityId = "{{ session('step5.city_id') }}";
        var selectedCountryId = $('#country_id').val(); // Pre-selected country
        var selectedStateId = sessionStateId || "{{ $user_detail_old->state ?? null }}"; // Prefer session value
        var selectedCityId = sessionCityId || "{{ $user_detail_old->city ?? null }}";   // Prefer session value

        if (selectedCountryId) {
            loadStates(selectedCountryId, selectedStateId); // Load states for the pre-selected country
        }

        if (selectedStateId) {
            loadCities(selectedStateId, selectedCityId); // Load cities for the pre-selected state
        }

        // If no session data, use geolocation to auto-select
        if (!sessionStateId && !sessionCityId) {
            autoSelectLocation();
        }
    });
</script>

@endpush