@extends('frontend.layouts.app')

@section('title', 'Search Partner')

@section('content')
    <section class="mt-[8rem]">
        <div class="max-w-[1320px] relative mx-auto bg-[#FFEBED] lg:p-12 p-5 lg:pt-8">
            <div class="min-h-screen p-4 pb-5 rounded-lg bg_odani">
                <section>
                    @include('_message')
                    <div x-data="{ tab: 'basic' }" class="sm:rounded-lg">
                        <div class="px-4">
                            <div class="text-sm font-semibold">
                                Search Partner
                            </div>
                            <div class="mt-2 mb-4 border-t-[1px] border-black"></div>

                            <ul class="flex flex-wrap mt-1 gap-x-10">
                                <!-- Basic Search Option -->
                                <li class="flex gap-2 align-middle">
                                    <input type="radio" name="Search" value="basic" id="basic" class="my-auto"
                                        @change="tab = 'basic'" :checked="tab === 'basic'">
                                    <label for="basic" class="cursor-pointer">Basic Search</label>
                                </li>
                                <!-- Advanced Search Option -->
                                <li class="flex gap-2 align-middle">
                                    <input type="radio" name="Search" value="advanced" id="advanced" class="my-auto"
                                        @change="tab = 'advanced'" :checked="tab === 'advanced'">
                                    <label for="advanced" class="cursor-pointer">Advanced Search</label>
                                </li>
                            </ul>
                        </div>

                        <!-- Basic Search Form -->
                        <div x-show="tab === 'basic'" class="px-5 mt-5 text-sm">
                            <h5 class="bg-[#FFEBED] py-[10px] ps-3 text-sm font-semibold mb-2">Basic Search</h5>
                            <x-validation-errors class="mb-4" />
                            <form method="" action="{{ url('user/partner/search/basic_search') }}" class="mx-auto">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                    <div>
                                        <x-label for="min_age" value="Minimum Age" />
                                        <x-input id="min_age" name="min_age" type="number" min="18" max="100"
                                            value="{{ old('min_age', 18) }}" class="mt-1 block w-full" required />
                                    </div>

                                    <div>
                                        <x-label for="max_age" value="Maximum Age" />
                                        <x-input id="max_age" name="max_age" type="number" min="18" max="100"
                                            value="{{ old('max_age', 99) }}" class="mt-1 block w-full" />
                                    </div>

                                    <div>
                                        <x-label for="marital_status" value="{{ __('Marital Status') }}" />
                                        <select name="marital_status" id="marital_status"
                                            class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Marital Status</option>
                                            <option value="" {{ old('marital_status') === null ? 'selected' : '' }}>
                                                Any</option>

                                            <option value="Never Married"
                                                {{ old('marital_status', optional()->marital_status) == 'Never Married' ? 'selected' : '' }}>
                                                Never Married</option>
                                            <option value="Married"
                                                {{ old('marital_status', optional()->marital_status) == 'Married' ? 'selected' : '' }}>
                                                Married
                                            </option>
                                            <option value="Divorced"
                                                {{ old('marital_status', optional()->marital_status) == 'Divorced' ? 'selected' : '' }}>
                                                Divorced
                                            </option>
                                            <option value="Widower/ Widow"
                                                {{ old('marital_status', optional()->marital_status) == 'Widower/ Widow' ? 'selected' : '' }}>
                                                Widower / Widow
                                            </option>
                                            <option value="Legally Separated / Awaiting Divorce"
                                                {{ old('marital_status', optional()->marital_status) == 'Legally Separated / Awaiting Divorce' ? 'selected' : '' }}>
                                                Legally Separated / Awaiting Divorce
                                            </option>
                                        </select>
                                    </div>

                                    <div>
                                        <x-label for="visa_status" value="{{ __('Visa Status') }}" />
                                        <select name="visa_status" id="visa_status" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Visa Status</option>
                                            <option value="" {{ old('visa_status') === null ? 'selected' : '' }}>Any
                                            </option>
                                            <option value="Citizen: US"
                                                {{ old('visa_status', optional()->visa_status) == 'Citizen: US' ? 'selected' : '' }}>
                                                Citizen: US</option>
                                            <option value="Citizen: Canada"
                                                {{ old('visa_status', optional()->visa_status) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                Citizen: Canada</option>
                                            <option value="Permanent Resident: US"
                                                {{ old('visa_status', optional()->visa_status) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                Permanent Resident: US
                                            </option>
                                            <option value="Permanent Resident: Canada"
                                                {{ old('visa_status', optional()->visa_status) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                Permanent Resident: Canada
                                            </option>
                                            <option value="H1B"
                                                {{ old('visa_status', optional()->visa_status) == 'H1B' ? 'selected' : '' }}>
                                                H1B</option>
                                            <option value="Student Visa"
                                                {{ old('visa_status', optional()->visa_status) == 'Student Visa' ? 'selected' : '' }}>
                                                Student Visa</option>
                                            <option value="L1"
                                                {{ old('visa_status', optional()->visa_status) == 'L1' ? 'selected' : '' }}>
                                                L1</option>
                                            <option value="Visitor"
                                                {{ old('visa_status', optional()->visa_status) == 'Visitor' ? 'selected' : '' }}>
                                                Visitor</option>
                                        </select>
                                    </div>

                                </div>

                                {{-- <div class="mt-6">
                                    <x-label value="Search Type" />
                                    <div class="flex gap-4 items-center mt-2">
                                        <label>
                                            <input type="radio" name="city_option" value="single" checked
                                                onchange="updateCityOptions()" />
                                            Single Selection
                                        </label>
                                        <label>
                                            <input type="radio" name="city_option" value="multiple"
                                                onchange="updateCityOptions()" />
                                            Multiple Selections
                                        </label>
                                    </div>

                                    <div id="single-city-options" class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-2">
                                        <div>
                                            <x-label for="country" value="{{ __('Country of Residence') }}" />
                                            <select id="basic-country" name="country" class="w-full h-10 px-3 rounded-md">
                                                <option value="">Select a country</option>
                                                <option value="" {{ old('country') === null ? 'selected' : '' }}>Any
                                                </option>
                                                @foreach ($countries as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div>
                                            <x-label for="state" value="State/Province" />
                                            <select id="basic-state" name="state" class="w-full h-10 px-3 rounded-md">
                                                <option value="">Select a State/Province</option>

                                                </option>

                                            </select>
                                        </div>

                                        <div>
                                            <x-label for="city" value="City" />
                                            <select id="basic-city" name="city" class="w-full h-10 px-3 rounded-md">
                                                <option value="">Select a city</option>

                                                </option>

                                            </select>
                                        </div>
                                        <div>
                                            <x-label for="metro" value="Metro Area" />
                                            <select id="basic-metro" name="metro" class="w-full h-10 px-3 rounded-md">
                                                <option value="">Select a Metro Area</option>
                                                </option>

                                            </select>
                                        </div>
                                    </div>

                                    <div id="multiple-city-options"
                                        class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-2 hidden">
                                        <!-- Country Selection -->
                                        <div>
                                            <x-label for="countries" value="Countries" />
                                            <div class="relative">
                                                <button type="button" id="country-dropdown"
                                                    class="w-full flex justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                    Select Countries
                                                    <svg class="w-5 h-5 ml-2" xmlns="http://www.w3.org/2000/svg"
                                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                        stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M6 9l6 6 6-6" />
                                                    </svg>
                                                </button>
                                                <div id="country-options"
                                                    class="absolute z-10 mt-2 w-full max-h-48 overflow-auto rounded-md bg-white shadow-lg hidden">
                                                    <ul>
                                                        @foreach ($countries as $id => $name)
                                                            <li class="flex items-center px-4 py-2 hover:bg-gray-100">
                                                                <input type="checkbox" id="usa" name="countries[]"
                                                                    value="{{ $id }}"
                                                                    class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                                                <label for="{{ $name }}"
                                                                    class="ml-2 text-sm">{{ $name }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- State Selection -->
                                        <div>
                                            <x-label for="states" value="States/Provinces" />
                                            <div class="relative">
                                                <button type="button" id="state-dropdown"
                                                    class="w-full flex justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                    Select States/Provinces
                                                    <svg class="w-5 h-5 ml-2" xmlns="http://www.w3.org/2000/svg"
                                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                        stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M6 9l6 6 6-6" />
                                                    </svg>
                                                </button>
                                                <div id="state-options"
                                                    class="absolute z-10 mt-2 w-full max-h-48 overflow-auto rounded-md bg-white shadow-lg hidden">
                                                    <ul>
                                                        @foreach ($states as $id => $name)
                                                            <li class="flex items-center px-4 py-2 hover:bg-gray-100">
                                                                <input type="checkbox" id="usa" name="states[]"
                                                                    value="{{ $id }}"
                                                                    class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                                                <label for="{{ $name }}"
                                                                    class="ml-2 text-sm">{{ $name }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- City Selection -->
                                        <div>
                                            <x-label for="cities" value="Cities" />
                                            <div class="relative">
                                                <button type="button" id="city-dropdown"
                                                    class="w-full flex justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                    Select Cities
                                                    <svg class="w-5 h-5 ml-2" xmlns="http://www.w3.org/2000/svg"
                                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                        stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M6 9l6 6 6-6" />
                                                    </svg>
                                                </button>
                                                <div id="city-options"
                                                    class="absolute z-10 mt-2 w-full max-h-48 overflow-auto rounded-md bg-white shadow-lg hidden">
                                                    <ul>
                                                        @foreach ($cities as $id => $name)
                                                            <li class="flex items-center px-4 py-2 hover:bg-gray-100">
                                                                <input type="checkbox" id="usa" name="cities[]"
                                                                    value="{{ $id }}"
                                                                    class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                                                <label for="{{ $name }}"
                                                                    class="ml-2 text-sm">{{ $name }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Metro Area Selection -->
                                        <div>
                                            <x-label for="metros" value="Metro Areas" />
                                            <div class="relative">
                                                <button type="button" id="metro-dropdown"
                                                    class="w-full flex justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                                    Select Metro Areas
                                                    <svg class="w-5 h-5 ml-2" xmlns="http://www.w3.org/2000/svg"
                                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                        stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M6 9l6 6 6-6" />
                                                    </svg>
                                                </button>
                                                <div id="metro-options"
                                                    class="absolute z-10 mt-2 w-full max-h-48 overflow-auto rounded-md bg-white shadow-lg hidden">
                                                    <ul>
                                                        @foreach ($metro_area as $id => $name)
                                                            <li class="flex items-center px-4 py-2 hover:bg-gray-100">
                                                                <input type="checkbox" id="usa" name="metros[]"
                                                                    value="{{ $id }}"
                                                                    class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                                                <label for="{{ $name }}"
                                                                    class="ml-2 text-sm">{{ $name }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="flex items-center justify-center mt-4">
                                    <button type="submit"
                                        class="bg-[#F42C56] text-white text-center p-3 px-8 rounded-lg w-[200px]">
                                        {{ __('Search') }}
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Advanced Search Form -->
                        <div x-show="tab === 'advanced'" class="px-5 mt-5 text-sm">
                            <h5 class="bg-[#FFEBED] py-[10px] ps-3 text-sm font-semibold mb-2">Advanced Search</h5>
                            <x-validation-errors class="mb-4" />
                            <form method="" action="{{ url('user/partner/search/advance_search') }}" class="mx-auto">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

                                    <div>
                                        <label for="first_name">First Name</label>
                                        <x-input id="first_name" name="first_name" placeholder="Enter First Name"
                                            value="{{ old('first_name') }}" type="text" class="mt-1 block w-full" />
                                    </div>

                                    <div>
                                        <x-label for="last_name" value="Last Name" />
                                        <x-input id="last_name" name="last_name" type="text"
                                            value="{{ old('last_name') }}" placeholder="Enter Last Name"
                                            class="mt-1 block w-full" />
                                    </div>

                                    <div>
                                        <x-label for="min_age" value="Minimum Age" />
                                        <x-input id="min_age" name="min_age" type="number" class="mt-1 block w-full"
                                            value="{{ old('min_age', 18) }}" min="18" max="100" required />
                                    </div>

                                    <div>
                                        <x-label for="max_age" value="Maximum Age" />
                                        <x-input id="max_age" name="max_age" type="number" min="18"
                                            value="{{ old('max_age', 99) }}" max="100" class="mt-1 block w-full" />
                                    </div>

                                    <div>
                                        <x-label for="marital_status" value="{{ __('Marital Status') }}" />
                                        <select name="marital_status" id="marital_status"
                                            class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Marital Status</option>
                                            <option value="" {{ old('marital_status') === null ? 'selected' : '' }}>
                                                Any</option>
                                            <option value="Never Married"
                                                {{ old('marital_status', optional()->marital_status) == 'Never Married' ? 'selected' : '' }}>
                                                Never Married</option>
                                            <option value="Married"
                                                {{ old('marital_status', optional()->marital_status) == 'Married' ? 'selected' : '' }}>
                                                Married
                                            </option>
                                            <option value="Divorced"
                                                {{ old('marital_status', optional()->marital_status) == 'Divorced' ? 'selected' : '' }}>
                                                Divorced
                                            </option>
                                            <option value="Widower/ Widow"
                                                {{ old('marital_status', optional()->marital_status) == 'Widower/ Widow' ? 'selected' : '' }}>
                                                Widower / Widow
                                            </option>
                                            <option value="Legally Separated / Awaiting Divorce"
                                                {{ old('marital_status', optional()->marital_status) == 'Legally Separated / Awaiting Divorce' ? 'selected' : '' }}>
                                                Legally Separated / Awaiting Divorce
                                            </option>
                                        </select>
                                    </div>

                                    <div>
                                        <x-label for="visa_status" value="{{ __('Visa Status') }}" />
                                        <select name="visa_status" id="visa_status" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Visa Status</option>
                                            <option value="" {{ old('visa_status') === null ? 'selected' : '' }}>
                                                Any</option>
                                            <option value="Citizen: US"
                                                {{ old('visa_status', optional()->visa_status) == 'Citizen: US' ? 'selected' : '' }}>
                                                Citizen: US</option>
                                            <option value="Citizen: Canada"
                                                {{ old('visa_status', optional()->visa_status) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                Citizen: Canada</option>
                                            <option value="Permanent Resident: US"
                                                {{ old('visa_status', optional()->status) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                Permanent Resident: US</option>
                                            <option value="Permanent Resident: Canada"
                                                {{ old('visa_preference_4', optional()->visa_preference_4) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                Permanent Resident: Canada</option>
                                            <option value="H1B"
                                                {{ old('visa_status', optional()->status) == 'H1B' ? 'selected' : '' }}>
                                                H1B</option>
                                            <option value="Student Visa"
                                                {{ old('visa_status', optional()->status) == 'Student Visa' ? 'selected' : '' }}>
                                                Student Visa</option>
                                            <option value="Visitor"
                                                {{ old('visa_status', optional()->status) == 'Visitor' ? 'selected' : '' }}>
                                                Visitor</option>
                                            <option value="L1"
                                                {{ old('visa_status', optional()->status) == 'L1' ? 'selected' : '' }}>
                                                L1</option>
                                        </select>
                                    </div>

                                    <div>
                                        <x-label for="country" value="{{ __('Country of Residence') }}" />
                                        <select id="advanced-country" name="country" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select a country</option>
                                            <option value="" {{ old('country') === null ? 'selected' : '' }}>
                                                Any</option>
                                            @foreach ($countries as $id => $name)
                                                <option value="{{ $id }}">{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div>
                                        <x-label for="state" value="{{ __('State/Province') }}" />
                                        <select id="advanced-state" name="state" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select a State/Province</option>
                                            {{-- Dynamic Options --}}
                                        </select>
                                    </div>

                                    {{-- <div>
                                        <x-label for="city" value="{{ __('City') }}" />
                                        <select id="advanced-city" name="city" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select a City</option>

                                        </select>
                                    </div> --}}

                                    <div>
                                        <x-label for="metro_area" value="{{ __('Metro Area') }}" />
                                        <select name="metro_area" id="advanced-metro" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select a Metro Area</option>
                                            {{-- Dynamic Options --}}
                                        </select>
                                    </div>

                                    <div>
                                        <x-label for="education" value="{{ __('Education') }}" />
                                        <select name="education" id="education" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Education</option>
                                            <option value="" {{ old('education') === null ? 'selected' : '' }}>
                                                Any</option>
                                            <option value="Associate Degree / Diploma"
                                                {{ old('education', optional()->education) == 'Associate Degree / Diploma' ? 'selected' : '' }}>
                                                Associate Degree / Diploma
                                            </option>
                                            <option value="Bachelors"
                                                {{ old('education', optional()->education) == 'Bachelors' ? 'selected' : '' }}>
                                                Bachelors</option>
                                            <option value="Masters"
                                                {{ old('education', optional()->education) == 'Masters' ? 'selected' : '' }}>
                                                Masters</option>
                                            <option value="Doctorate"
                                                {{ old('education', optional()->education) == 'Doctorate' ? 'selected' : '' }}>
                                                Doctorate</option>
                                            <option value="Doctor Of Medicine"
                                                {{ old('education', optional()->education) == 'Doctor Of Medicine' ? 'selected' : '' }}>
                                                Doctor Of Medicine</option>
                                            <option value="Other"
                                                {{ old('education', optional()->education) == 'Others' ? 'selected' : '' }}>
                                                Other(Please elaborate in the Education Details below)
                                            </option>
                                        </select>

                                    </div>

                                    {{-- <div>
                                        <x-label for="blood_group" value="{{ __('Blood Group') }}" />
                                        <select name="blood_group" id="blood_group" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Blood Group</option>
                                            <option value="" {{ old('blood_group') === null ? 'selected' : '' }}>
                                                Any</option>
                                            <option value="A+"
                                                {{ old('blood_group', optional()->blood_group) == 'A+' ? 'selected' : '' }}>
                                                A+</option>
                                            <option value="A-"
                                                {{ old('blood_group', optional()->blood_group) == 'A-' ? 'selected' : '' }}>
                                                A-</option>
                                            <option value="B+"
                                                {{ old('blood_group', optional()->blood_group) == 'B+' ? 'selected' : '' }}>
                                                B+</option>
                                            <option value="B-"
                                                {{ old('blood_group', optional()->blood_group) == 'B-' ? 'selected' : '' }}>
                                                B-</option>
                                            <option value="AB+"
                                                {{ old('blood_group', optional()->blood_group) == 'AB+' ? 'selected' : '' }}>
                                                AB+</option>
                                            <option value="AB-"
                                                {{ old('blood_group', optional()->blood_group) == 'AB-' ? 'selected' : '' }}>
                                                AB-</option>
                                            <option value="O+"
                                                {{ old('blood_group', optional()->blood_group) == 'O+' ? 'selected' : '' }}>
                                                O+</option>
                                            <option value="O-"
                                                {{ old('blood_group', optional()->blood_group) == 'O-' ? 'selected' : '' }}>
                                                O-</option>
                                        </select>

                                    </div> --}}

                                    <!-- Height -->
                                    <div>
                                        <x-label for="min_height" value="Minimum Height" />
                                        <x-input id="min_height" name="min_height" type="decimal"
                                            placeholder="Enter minimum height prefrence (in inches)"
                                            class="custom-decimal mt-1 block w-full" min="100" max="250"
                                            value="{{ old('min_height', optional()->height) }}" />
                                    </div>

                                    <div>
                                        <x-label for="max_height" value="Maximum Height" />
                                        <x-input id="max_height" name="max_height" type="decimal"
                                            placeholder="Enter maximum height prefrence (in inches)" min="100"
                                            max="250" value="{{ old('max_height', optional()->height) }}"
                                            class="custom-decimal mt-1 block w-full" />
                                    </div>

                                    <div>
                                        <x-label for="job" value="Job" />
                                        <x-input id="job" name="job" type="text"
                                            placeholder="Provide job specifications here" class="mt-1 block w-full" />
                                    </div>

                                    <!-- Weight -->
                                    {{-- <div>
                                        <x-label for="weight" value="{{ __('Weight (kg)') }}" />
                                        <x-input id="weight" type="number" name="weight" class="block w-full mt-1"
                                            step="0.01" placeholder="e.g. 78.65"
                                            value="{{ old('weight', optional()->weight) }}" />
                                    </div> --}}

                                    <div>
                                        <x-label for="diet" value="{{ __('Diet') }}" />
                                        <select name="diet" id="diet" class="w-full h-10 px-3 rounded-md">
                                            <option value="">Select Diet Preference</option>
                                            <option value="" {{ old('diet') === null ? 'selected' : '' }}>
                                                Any</option>
                                            <option value="Non-Vegetarian"
                                                {{ old('diet', optional()->diet) == 'Non-Vegetarian' ? 'selected' : '' }}>Non-Vegetarian</option>
                                            <option value="Hindu non-vegetarian"
                                                {{ old('diet', optional()->diet) == 'Hindu non-vegetarian' ? 'selected' : '' }}>Hindu non-vegetarian
                                            </option>
                                            <option value="Vegetarian + Dairy + Eggs"
                                                {{ old('diet', optional()->diet) == 'Vegetarian + Dairy + Eggs' ? 'selected' : '' }}>Vegetarian + Dairy + Eggs
                                            </option>
                                            <option value="Vegetarian + Dairy"
                                            {{ old('diet', optional()->diet) == 'Vegetarian + Dairy' ? 'selected' : '' }}>Vegetarian + Dairy
                                        </option>
                                        <option value="Vegan"
                                        {{ old('diet', optional()->diet) == 'Vegan' ? 'selected' : '' }}>Vegan
                                    </option>
                                        </select>

                                    </div>

                                    <div>
                                        <x-label for="smoke" value="{{ __('Do you smoke?') }}" />
                                        <div class="flex items-center space-x-4 mt-2">
                                            <div class="flex items-center">
                                                <input type="radio" id="smoke_yes" name="smoke" value="0"
                                                    {{ old('smoke', optional()->smoke) == '0' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="smoke_yes" class="ml-2" value="{{ __('Yes') }}" />
                                            </div>
                                            <div class="flex items-center">
                                                <input type="radio" id="smoke_no" name="smoke" value="1"
                                                    {{ old('smoke', optional()->smoke) == '1' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="smoke_no" class="ml-2" value="{{ __('No') }}" />
                                            </div>
                                            <div class="flex items-center">
                                                <input type="radio" id="smoke_any" name="smoke" value="2"
                                                    {{ old('smoke', optional()->smoke) == '2' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="smoke_any" class="ml-2">{{ __("Don't Care") }}</x-label>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <x-label for="drink" value="{{ __('Do you drink?') }}" />
                                        <div class="flex items-center space-x-4 mt-2">
                                            <div class="flex items-center">
                                                <input type="radio" id="drink_yes" name="drink" value="0"
                                                    {{ old('drink', optional()->drink) == '0' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="drink_yes" class="ml-2" value="{{ __('Yes') }}" />
                                            </div>
                                            <div class="flex items-center">
                                                <input type="radio" id="drink_no" name="drink" value="1"
                                                    {{ old('drink', optional()->drink) == '1' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="drink_no" class="ml-2" value="{{ __('No') }}" />
                                            </div>
                                            <div class="flex items-center">
                                                <input type="radio" id="drink_any" name="drink" value="2"
                                                    {{ old('drink', optional()->drink) == '2' ? 'checked' : '' }}
                                                    class="form-radio text-indigo-600" />
                                                <x-label for="drink_any" class="ml-2">{{ __("Don't Care") }}</x-label>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div>
                                        <x-label for="hobbies" value="{{ __('Hobbies') }}" />
                                        <x-textarea id="hobbies" type="text" name="hobbies"
                                            placeholder="Provide information about expected hobbies"
                                            value="{{ old('hobbies', optional()->hobbies) }}">
                                        </x-textarea>
                                    </div> --}}

                                </div>

                                <div class="flex items-center justify-center mt-4">
                                    <button type="submit"
                                        class="bg-[#F42C56] text-white text-center p-3 px-8 rounded-lg w-[200px]">
                                        {{ __('Search') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>


    @push('scripts')
    <script>
        $(document).ready(function () {
            function initializeSelect2() {
                $('#advanced-country, #advanced-state, #advanced-metro').select2({
                    allowClear: true,
                    width: '100%',
                });
            }

            function resetDropdowns() {
                $('#advanced-state').html('<option value="">Select a State/Province</option>');
                $('#advanced-metro').html('<option value="">Select a Metro Area</option>');
                initializeSelect2();
            }

            function populateStates(countryId) {
                $.ajax({
                    url: '{{ route('fetch.states') }}',
                    method: 'GET',
                    data: { country_id: countryId },
                    success: function (data) {
                        $('#advanced-state').html('<option value="">Select a State/Province</option>');
                        if (data.states) {
                            $.each(data.states, function (id, name) {
                                $('#advanced-state').append('<option value="' + id + '">' + name + '</option>');
                            });
                        } else {
                            $('#advanced-state').append('<option value="" disabled>No states found.</option>');
                        }
                        initializeSelect2();
                    },
                    error: function () {
                        console.log('Error fetching states.');
                    }
                });
            }

            function populateMetroAreas(stateId) {
                $.ajax({
                    url: '{{ route('fetch.metroareas') }}',
                    method: 'GET',
                    data: { state_id: stateId },
                    success: function (data) {
                        $('#advanced-metro').html('<option value="">Select a Metro Area</option>');
                        if (data.metro_area) {
                            $.each(data.metro_area, function (id, name) {
                                $('#advanced-metro').append('<option value="' + id + '">' + name + '</option>');
                            });
                        } else {
                            $('#advanced-metro').append('<option value="" disabled>No metro areas found.</option>');
                        }
                        initializeSelect2();
                    },
                    error: function () {
                        console.log('Error fetching metro areas.');
                    }
                });
            }

            $('#advanced-country').change(function () {
                let countryId = $(this).val();
                if (countryId) {
                    populateStates(countryId);
                } else {
                    resetDropdowns();
                }
            });

            $('#advanced-state').change(function () {
                let stateId = $(this).val();
                if (stateId) {
                    populateMetroAreas(stateId);
                } else {
                    $('#advanced-metro').html('<option value="">Select a Metro Area</option>');
                }
            });

            // Initialize Select2 on page load
            initializeSelect2();
        });
    </script>

    @endpush

@endsection