@extends('frontend.layouts.app')

@section('title', 'Update Profile')

@section('content')

    <section class="mt-[8rem]">
        <img src="{{ url('assets/image/about_bg_line.png') }}" alt="" class="absolute top-[20rem] w-[60%]" />
        <div
            class="flex items-center justify-center max-w-full mx-auto mb-4 rounded-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
            @include('_message')

            <x-validation-errors class="mb-4" />
        </div>
        <div class="max-w-[1320px] mx-auto bg-[#FFEBED] lg:p-16 p-5 pt-8 relative">
            <div class="min-h-screen pt-4 pb-5 bg-white rounded-lg">

                <!-- profile section  -->
                <section>
                    <div class="relative grid grid-cols-1 lg:grid-cols-12 gap-x-10">
                        {{-- Images --}}
                        <div class="flex flex-col justify-center mb-5 lg:col-span-4 bg-[#FBFBFB]">
                            <div class="w-[90%] mx-auto mb-auto relative">
                                @if ($profilePhotos && is_array($profilePhotos) && isset($profilePhotos[0]))
                                    <img src="{{ current($profilePhotos) }}" alt="Profile Photo"
                                        class="w-full h-auto border-white border-[8px] rounded-xl profile_img"
                                        id="main-profile-img">
                                @else
                                    <img src="{{ url('Images/user.png') }}" alt="Default Profile"
                                        class="w-full h-auto border-white border-[8px] rounded-xl profile_img"
                                        id="main-profile-img">
                                @endif

                                <form id="photoUploadForm" method="POST"
                                    action="{{ url('profile/edit/photo/' . $user->id) }}" enctype="multipart/form-data"
                                    class="mx-auto">
                                    @csrf
                                    @method('PUT')
                                    <span class="relative flex cursor-pointer group">
                                        <div class="flex justify-center w-full mt-5">
                                            <x-label for="profile_photo_path"
                                                class="px-4 py-2 w-full text-center text-black bg-[#F5FBFF] rounded-md cursor-pointer border border-[#4BA0E8]">Choose
                                                File (Max: 5 images only)</x-label>
                                            <x-input type="file" id="profile_photo_path" name="profile_photo_path[]"
                                                class="hidden" multiple />
                                        </div>
                                        <!-- Tooltip -->
                                        <div
                                            class="absolute hidden p-2 mb-2 text-xs text-white transform -translate-x-1/2 bg-gray-700 rounded-md left-1/2 top-full group-hover:block w-max">
                                            Select image and click below to upload.
                                        </div>
                                    </span>
                                    <p id="selectedFilesDisplay" class="mt-2 text-sm text-center text-blue-600"></p>
                                    <p id="errorMessage" class="hidden mt-2 text-center text-red-600"></p>
                                    <p class="mt-2 text-center">Support Format : JPG , JPEG , PNG</p>
                                    <p class="text-sm text-center text-red-700">
                                        Size should not exceed 100MB in
                                        total. Each image can be a maximum of 20MB.
                                    </p>
                                    <div class="flex items-center justify-center mt-6">
                                        <button type="submit" id="submitButton"
                                            class="bg-[#F42C56] text-white p-1 text-center px-20 rounded-lg flex items-center space-x-2">
                                            <span class="relative flex cursor-pointer group">
                                                <svg class="w-6 h-6 text-white" aria-hidden="true"
                                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    fill="currentColor" viewBox="0 0 24 24">
                                                    <path
                                                        d="M13.383 4.076a6.5 6.5 0 0 0-6.887 3.95A5 5 0 0 0 7 18h3v-4a2 2 0 0 1-1.414-3.414l2-2a2 2 0 0 1 2.828 0l2 2A2 2 0 0 1 14 14v4h4a4 4 0 0 0 .988-7.876 6.5 6.5 0 0 0-5.605-6.048Z" />
                                                    <path
                                                        d="M12.707 9.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 1 0 1.414 1.414l.293-.293V19a1 1 0 1 0 2 0v-6.586l.293.293a1 1 0 0 0 1.414-1.414l-2-2Z" />
                                                </svg>
                                                <span>{{ __('Upload Photos') }}</span>
                                                <!-- Tooltip -->
                                                <div
                                                    class="absolute hidden p-2 mb-2 text-xs text-white transform -translate-x-1/2 bg-gray-700 rounded-md left-1/2 bottom-full group-hover:block w-max">
                                                    Click Button to Upload the picture
                                                </div>
                                            </span>
                                        </button>

                                    </div>
                                </form>
                                <div class="mt-4">
                                    @if (isset($profilePhotos) && count($profilePhotos))
                                        <div class="relative p-2 mb-4 bg-white rounded-lg">
                                            @foreach ($profilePhotos as $index => $photo)
                                                <div class="relative flex gap-3 mb-4">
                                                    <!-- Display the photo -->
                                                    <img src="{{ $photo }}" alt="Profile Photo"
                                                        class="w-[70px] border-white border-[6px] rounded-md cursor-pointer"
                                                        onclick="changeMainImage('{{ $photo }}')">
                                                    <ul class="flex flex-col gap-3 mt-6 text-sm lg:mt-4">
                                                        <li>Image {{ sprintf('%02d', $index + 1) }}</li>
                                                        {{-- <li class="text-xs text-[#888888]">

                                                            @if (file_exists($photo))
                                                                {{ date('d M Y', filemtime($photo)) }} |
                                                                {{ number_format(filesize($photo) / 1024, 2) }} KB
                                                            @else
                                                                N/A | N/A
                                                            @endif
                                                        </li> --}}
                                                    </ul>

                                                    <!-- Delete Button -->
                                                    @php
                                                        $userId = $user->id;
                                                    @endphp
                                                    <button
                                                        class="absolute p-1 text-white bg-red-100 rounded-full top-2 right-6 hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                                                        onclick="confirmDelete({{ $index }}, '{{ $photo }}', {{ $userId }})"
                                                        aria-label="Delete Photo">
                                                        <svg class="w-4 h-4 text-red-500" aria-hidden="true"
                                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                            fill="currentColor" viewBox="0 0 24 24">
                                                            <path fill-rule="evenodd"
                                                                d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z"
                                                                clip-rule="evenodd" />
                                                        </svg>
                                                    </button>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <p>No More Photos Available</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="bg-white lg:col-span-8">
                            <div class="flex justify-center mb-2 sm:justify-end">
                                <button id="toggleAllAccordion" type="button"
                                    title="Click to Expand/Collapse all tabs simultaneously"
                                    class="bg-[#F42C56] text-white text-center p-3 px-6 rounded-lg mb-2 text-sm mx-4">
                                    <svg id="expandIcon" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                                    </svg>
                                    <svg id="collapseIcon" xmlns="http://www.w3.org/2000/svg" class="hidden w-4 h-4"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
                                    </svg>
                                </button>
                            </div>

                            <form method="POST" action="{{ url('profile/edit/' . $user->id . '/store') }}"
                                class="relative">
                                @csrf
                                <div id="accordion-collapse" data-accordion="collapse">

                                    {{-- General Information --}}
                                    <h2 id="accordion-collapse-heading-1">
                                        <button type="button"
                                            class="flex items-center justify-between w-full gap-3 px-3 mb-4 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-1" aria-expanded="true"
                                            aria-controls="accordion-collapse-body-1">
                                            <span class="text-black">General Information</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-1" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-1">
                                        <div class="border-b-0 w-border ">
                                            <div class="px-3 mt-4 mb-4 lg:px-5">
                                                @php
                                                    $fullName = optional($user)->name ?? '';
                                                    $nameParts = explode(' ', $fullName, 2);
                                                    $firstName = $nameParts[0] ?? '';
                                                    $lastName = $nameParts[1] ?? '';
                                                @endphp
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="firstname">First Name<span
                                                                style="color: red">*</span></label>
                                                        <input type="text" name="firstname" id="firstname" required
                                                            class="w-full h-10 px-3 rounded-md"
                                                            placeholder="Enter First Name"
                                                            value="{{ old('firstname', $firstName) }}">
                                                    </div>
                                                    <div>
                                                        <label for="lastname">Last Name<span
                                                                style="color: red">*</span></label>
                                                        <input type="text" name="lastname" id="lastname" required
                                                            class="w-full h-10 px-3 rounded-md"
                                                            placeholder="Enter Last Name"
                                                            value="{{ old('lastname', $lastName) }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-3 mb-4 lg:px-5">
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="mobile_no" class="flex items-center">Mobile No<span
                                                                style="color: red">*</span>
                                                        </label>
                                                        <input type="number" name="mobile_no" id="mobile_no"
                                                            placeholder="Enter Mobile No"
                                                            class="w-full h-10 px-3 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                                                            maxlength="15" required
                                                            value="{{ old('mobile_no', optional($profile)->mobile_no) }}">
                                                    </div>
                                                    <div>
                                                        <label for="email" class="flex items-center">Email ID<span
                                                                style="color: red">*</span>
                                                        </label>
                                                        <input type="email" name="email" id="email"
                                                            class="w-full h-10 px-3 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                                                            placeholder="Enter Email ID" required
                                                            value="{{ old('email', optional($user)->email) }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-3 mb-4 lg:px-5">
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="dob">Date of Birth<span
                                                                style="color: red">*</span></label>
                                                        <input type="date" name="dob" id="dob"
                                                            class="w-full h-10 px-3 rounded-md" required
                                                            placeholder="Enter Age in Years" min="18"
                                                            max="100"
                                                            value="{{ old('dob', optional($profile)->dob) }}">
                                                        @error('dob')
                                                            <p class="text-sm text-red-500">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="gender" class="flex items-center">
                                                            Gender
                                                            <span style="color: red">*</span>
                                                            @if (!empty(old('gender', optional($profile)->gender)))
                                                                <span class="relative ml-2 cursor-pointer group">

                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                        viewBox="0 0 24 24" width="16" height="16"
                                                                        fill="currentColor">
                                                                        <path
                                                                            d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 17h-2v-6h2v6zm0-8h-2V7h2v2z" />
                                                                    </svg>
                                                                    <div
                                                                        class="absolute hidden p-2 mb-2 text-xs text-white transform -translate-x-1/2 bg-gray-700 rounded-md left-1/2 bottom-full group-hover:block w-max">
                                                                        Contact admin at Reshimgathee@bmmonline.org for
                                                                        change
                                                                    </div>
                                                                </span>
                                                            @endif
                                                        </label>

                                                        <select id="gender" name="gender"
                                                            class="w-full h-10 px-3 rounded-md" required
                                                            @if (!empty(old('gender', optional($profile)->gender))) disabled title="Contact admin at Reshimgathee@bmmonline.org for change" @endif>
                                                            <option value="">Select Gender</option>
                                                            <option value="male"
                                                                {{ old('gender', optional($profile)->gender) == 'male' ? 'selected' : '' }}>
                                                                Male
                                                            </option>
                                                            <option value="female"
                                                                {{ old('gender', optional($profile)->gender) == 'female' ? 'selected' : '' }}>
                                                                Female
                                                            </option>
                                                            {{-- <option value="other"
                                                                {{ old('gender', optional($profile)->gender) == 'other' ? 'selected' : '' }}>
                                                                Other
                                                            </option> --}}
                                                        </select>

                                                        @if (!empty(old('gender', optional($profile)->gender)))
                                                            <input type="hidden" name="gender"
                                                                value="{{ old('gender', optional($profile)->gender) }}">
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-3 mb-4 lg:px-5">
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="marital_status">Marital Status<span
                                                                style="color: red">*</span></label>
                                                        <select id="marital_status" name="marital_status" required
                                                            class="w-full h-10 px-3 rounded-md">
                                                            <option value="">Select Marital Status</option>
                                                            <option value="Never Married"
                                                                {{ old('marital_status', optional($profile)->marital_status) == 'Never Married' ? 'selected' : '' }}>
                                                                Never Married</option>
                                                            <option value="Married"
                                                                {{ old('marital_status', optional($profile)->marital_status) == 'Married' ? 'selected' : '' }}>
                                                                Married
                                                            </option>
                                                            <option value="Divorced"
                                                                {{ old('marital_status', optional($profile)->marital_status) == 'Divorced' ? 'selected' : '' }}>
                                                                Divorced
                                                            </option>
                                                            <option value="Widower/ Widow"
                                                                {{ old('marital_status', optional($profile)->marital_status) == 'Widower/ Widow' ? 'selected' : '' }}>
                                                                Widower / Widow
                                                            </option>
                                                            <option value="Legally Separated / Awaiting Divorce"
                                                                {{ old('marital_status', optional($profile)->marital_status) == 'Legally Separated / Awaiting Divorce' ? 'selected' : '' }}>
                                                                Legally Separated / Awaiting Divorce
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <label for="height">Height (in Inches)<span
                                                                style="color: red">*</span></label>
                                                        <input type="decimal" name="height" id="height"
                                                            placeholder="Enter Height (in Inches)"
                                                            class="custom-decimal w-full h-10 px-3 rounded-md"
                                                            min="36" max="90" required
                                                            value="{{ old('height', optional($profile)->height) }}">
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="px-3 mb-4 lg:px-5">
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="weight"> Weight (in Kg)</label>
                                                        <input type="number" name="weight" id="weight"
                                                            class="w-full h-10 px-3 rounded-md"
                                                            placeholder="Enter  Weight"
                                                            value="{{ old('weight', optional($profile)->weight) }}">
                                                    </div>
                                                    <div>
                                                        <label for="blood_group">Blood Group</label>
                                                        <select id="blood_group" name="blood_group"
                                                            class="w-full h-10 px-3 rounded-md">
                                                            <option value="">Select blood group</option>
                                                            <option value="A+"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'A+' ? 'selected' : '' }}>
                                                                A+</option>
                                                            <option value="A-"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'A-' ? 'selected' : '' }}>
                                                                A-</option>
                                                            <option value="B+"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'B+' ? 'selected' : '' }}>
                                                                B+</option>
                                                            <option value="B-"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'B-' ? 'selected' : '' }}>
                                                                B-</option>
                                                            <option value="AB+"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'AB+' ? 'selected' : '' }}>
                                                                AB+</option>
                                                            <option value="AB-"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'AB-' ? 'selected' : '' }}>
                                                                AB-</option>
                                                            <option value="O+"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'O+' ? 'selected' : '' }}>
                                                                O+</option>
                                                            <option value="O-"
                                                                {{ old('blood_group', optional($profile)->blood_group) == 'O-' ? 'selected' : '' }}>
                                                                O-</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div> --}}
                                            <div class="px-3 mb-4 lg:px-5">
                                                <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                    <div class="mb-2 lg:mb-0">
                                                        <label for="looking_for" class="flex items-center">
                                                            Looking For<span style="color: red">*</span>
                                                            @if (!empty(old('looking_for', optional($profile)->looking_for)))
                                                                <span class="relative ml-2 cursor-pointer group">
                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                        viewBox="0 0 24 24" width="16" height="16"
                                                                        fill="currentColor">
                                                                        <path
                                                                            d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 17h-2v-6h2v6zm0-8h-2V7h2v2z" />
                                                                    </svg>
                                                                    <div
                                                                        class="absolute hidden p-2 mb-2 text-xs text-white transform -translate-x-1/2 bg-gray-700 rounded-md left-1/2 bottom-full group-hover:block w-max">
                                                                        Contact admin at Reshimgathee@bmmonline.org for
                                                                        change
                                                                    </div>
                                                                </span>
                                                            @endif
                                                        </label>

                                                        <select id="looking_for" name="looking_for"
                                                            class="w-full h-10 px-3 rounded-md" required
                                                            @if (!empty(old('looking_for', optional($profile)->looking_for))) disabled title="Contact admin at Reshimgathee@bmmonline.org for change" @endif>
                                                            <option value="">Select</option>
                                                            <option value="bride"
                                                                {{ old('looking_for', optional($profile)->looking_for) == 'bride' ? 'selected' : '' }}>
                                                                Bride
                                                            </option>
                                                            <option value="groom"
                                                                {{ old('looking_for', optional($profile)->looking_for) == 'groom' ? 'selected' : '' }}>
                                                                Groom
                                                            </option>
                                                        </select>

                                                        @if (!empty(old('looking_for', optional($profile)->looking_for)))
                                                            <input type="hidden" name="looking_for"
                                                                value="{{ old('looking_for', optional($profile)->looking_for) }}">
                                                        @endif
                                                    </div>
                                                    <div>
                                                        <label for="profile_created_by" class="flex items-center">Profile
                                                            Created By<span style="color: red">*</span>

                                                        </label>
                                                        <select id="profile_created_by" name="profile_created_by" required
                                                            class="w-full h-10 px-3 rounded-md">
                                                            <option value="">Select</option>
                                                            <option value="self"
                                                                {{ old('profile_created_by', optional($profile)->profile_created_by) == 'self' ? 'selected' : '' }}>
                                                                Self
                                                            </option>
                                                            <option value="parent"
                                                                {{ old('profile_created_by', optional($profile)->profile_created_by) == 'parent' ? 'selected' : '' }}>
                                                                Parent
                                                            </option>
                                                            <option value="sibling"
                                                                {{ old('profile_created_by', optional($profile)->profile_created_by) == 'sibling' ? 'selected' : '' }}>
                                                                Sibling
                                                            </option>
                                                            <option value="friend"
                                                                {{ old('profile_created_by', optional($profile)->profile_created_by) == 'friend' ? 'selected' : '' }}>
                                                                Friend
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Personal Information --}}
                                    <h2 id="accordion-collapse-heading-2">
                                        <button type="button"
                                            class="flex items-center justify-between w-full gap-3 px-3 py-[10px] bg-addpink text-sm font-semibold mb-4"
                                            data-accordion-target="#accordion-collapse-body-2" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-2">
                                            <span class="text-black">Personal Information</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-2" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-2">
                                        <div class="px-3 mt-4 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="visa_status" class="flex items-center">
                                                        Visa Status<span style="color: red">*</span>
                                                        @if (!empty(old('visa_status', optional($visa)->status)))
                                                            <span class="relative ml-2 cursor-pointer group">
                                                                <!-- Info SVG Icon -->
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                    viewBox="0 0 24 24" width="16" height="16"
                                                                    fill="currentColor">
                                                                    <path
                                                                        d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 17h-2v-6h2v6zm0-8h-2V7h2v2z" />
                                                                </svg>
                                                                <div
                                                                    class="absolute hidden p-2 mb-2 text-xs text-white transform -translate-x-1/2 bg-gray-700 rounded-md left-1/2 bottom-full group-hover:block w-max">
                                                                    Contact admin at Reshimgathee@bmmonline.org for change
                                                                </div>
                                                            </span>
                                                        @endif
                                                    </label>

                                                    <select id="visa_status" class="w-full h-10 px-3 rounded-md"
                                                        name="visa_status" required
                                                        @if (!empty(old('visa_status', optional($visa)->status))) disabled title="Contact admin at Reshimgathee@bmmonline.org for change" @endif>
                                                        <option value="" selected disabled>Select Visa Status
                                                        </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="Visitor"
                                                            {{ old('visa_status', optional($visa)->status) == 'Visitor' ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ old('visa_status', optional($visa)->status) == 'L1' ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>

                                                    @if (!empty(old('visa_status', optional($visa)->status)))
                                                        <input type="hidden" name="visa_status"
                                                            value="{{ old('visa_status', optional($visa)->status) }}">
                                                    @endif
                                                </div>

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

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="state">State/Province</label>
                                                    <select name="state" id="state"
                                                        class="w-full h-10 px-3 rounded-md">
                                                        <option value="">Select Your State of Residence</option>
                                                        {{-- Populate Dynamically --}}
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="metro_area">Metro Area</label>
                                                    <select name="metro_area" id="metro_area"
                                                        class="w-full h-10 px-3 rounded-md">
                                                        <option value="">Select a Metro Area</option>
                                                        {{-- Populate Dynamically --}}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="px-3 mt-4 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="city">City</label>
                                                    <select name="city" id="city"
                                                        class="w-full h-10 px-3 rounded-md">
                                                        <option value="">Select a City</option>

                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="zip_postal_code">ZIP / Postal Code</label>
                                                    <input type="text" name="zip_postal_code" id="zip_postal_code"
                                                        placeholder="Enter ZIP /  Postal Code"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        value="{{ old('zip_postal_code', optional($visa)->zip_postal_code) }}">
                                                </div>
                                            </div>
                                        </div> --}}

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="hometown">Hometown</label>
                                                    <input type="text" name="hometown" id="hometown"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Your Hometown"
                                                        value="{{ old('hometown', optional($profile)->hometown) }}">
                                                </div>
                                                <div>
                                                    <label for="mandal">Maharashtra Mandal</label>
                                                    <input id="mandal" type="text" name="mandal"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Name of Local Maharashtra Mandal"
                                                        value="{{ old('mandal', optional($profile)->mandal) }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="px-3 mt-4 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                {{-- <div class="mb-2 lg:mb-0">
                                                    <label for="address">Address</label>
                                                    <input id="address" type="text" name="address"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your address"
                                                        value="{{ old('address', optional($profile)->address) }}" />
                                                </div> --}}
                                                <div>
                                                    <label for="relocate">Willing to relocate</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_yes" name="relocate"
                                                                value="0"
                                                                {{ old('relocate', optional($profile)->relocate) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_yes">Yes</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_no" name="relocate"
                                                                value="1"
                                                                {{ old('relocate', optional($profile)->relocate) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_no">No</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_any" name="relocate"
                                                                value="2"
                                                                {{ old('relocate', optional($profile)->relocate) == '2' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_any">Don't Care</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Professional Information --}}
                                    <h2 id="accordion-collapse-heading-3">
                                        <button type="button"
                                            class="flex items-center justify-between w-full gap-3 mb-4 px-3 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-3" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-3">
                                            <span class="text-black">Professional
                                                Information</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-3" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-3">
                                        <div class="px-3 mt-4 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="education">Education</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="education"
                                                        id="education">
                                                        <option value="" selected disabled>Select Degree</option>
                                                        <option value="Associate Degree / Diploma"
                                                            {{ old('education', optional($profile)->education) == 'Associate Degree / Diploma' ? 'selected' : '' }}>
                                                            Associate Degree / Diploma</option>
                                                        <option value="Bachelors"
                                                            {{ old('education', optional($profile)->education) == 'Bachelors' ? 'selected' : '' }}>
                                                            Bachelors</option>
                                                        <option value="Masters"
                                                            {{ old('education', optional($profile)->education) == 'Masters' ? 'selected' : '' }}>
                                                            Masters</option>
                                                        <option value="Doctorate"
                                                            {{ old('education', optional($profile)->education) == 'Doctorate' ? 'selected' : '' }}>
                                                            Doctorate</option>
                                                        <option value="Doctor of Medicine"
                                                            {{ old('education', optional($profile)->education) == 'Doctor of Medicine' ? 'selected' : '' }}>
                                                            Doctor of Medicine</option>
                                                        <option value="Doctor of Law"
                                                            {{ old('education', optional($profile)->education) == 'Doctor of Law' ? 'selected' : '' }}>
                                                            Doctor of Law
                                                        </option>
                                                    </select>
                                                    @error('education')
                                                        <span class="text-sm text-red-500">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div>
                                                    <label for="job_location">Job Location</label>
                                                    <input type="text" name="job_location" id="job_location"
                                                        placeholder="Enter Job Location"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        value="{{ old('job_location', optional($profile)->job_location) }}">
                                                </div>
                                                {{-- <div>
                                                    <label for="education_details">Education Details </label>
                                                    <input type="text" name="education_details" id="education_details"
                                                        placeholder="Enter Education Details"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        value="{{ old('education_details', optional($profile)->education_details) }}">
                                                </div> --}}
                                            </div>
                                        </div>

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="job_category">Job Category</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="job_category"
                                                        id="job_category">
                                                        <option value="" selected disabled>Select
                                                        </option>
                                                        <option value="IT"
                                                            {{ old('job_category', optional($profile)->job_category) == 'IT' ? 'selected' : '' }}>
                                                            IT</option>
                                                        <option value="Medicine"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Medicine' ? 'selected' : '' }}>
                                                            Medicine</option>
                                                        <option value="BioTech"
                                                            {{ old('job_category', optional($profile)->job_category) == 'BioTech' ? 'selected' : '' }}>
                                                            BioTech</option>
                                                        <option value="Engineering"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Engineering' ? 'selected' : '' }}>
                                                            Engineering</option>
                                                        <option value="Finance"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Finance' ? 'selected' : '' }}>
                                                            Finance</option>
                                                        <option value="Business"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Business' ? 'selected' : '' }}>
                                                            Business</option>
                                                        <option value="Law"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Law' ? 'selected' : '' }}>
                                                            Law</option>
                                                        <option value="Other"
                                                            {{ old('job_category', optional($profile)->job_category) == 'Other' ? 'selected' : '' }}>
                                                            Other</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="job_specification">Job Specification</label>
                                                    <input type="text" name="job_specification" id="job_specification"
                                                        placeholder="Enter Job Specification"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        value="{{ old('job_specification', optional($profile)->job_specification) }}">
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-2 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="job_title">Job Title</label>
                                                    <input type="text" name="job_title" id="job_title"
                                                        placeholder="Enter Job Title" class="w-full h-10 px-3 rounded-md"
                                                        value="{{ old('job_title', optional($profile)->job_title) }}">
                                                </div>

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

                                    {{-- Lifestyle Information --}}
                                    <h2 id="accordion-collapse-heading-4">
                                        <button type="button"
                                            class="flex items-center justify-between w-full gap-3 mb-4 px-3 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-4" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-4">
                                            <span class="text-black">Lifestyle Information</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-4" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-4">
                                        <div class="px-3 mt-4 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="drink">Drink ?</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="drink_yes" name="drink"
                                                                value="0"
                                                                {{ old('drink', optional($profile)->drink) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <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($profile)->drink) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <x-label for="drink_no" class="ml-2"
                                                                value="{{ __('No') }}" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label for="smoke">Smoke ?</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="smoke_yes" name="smoke"
                                                                value="0"
                                                                {{ old('smoke', optional($profile)->smoke) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <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($profile)->smoke) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <x-label for="smoke_no" class="ml-2"
                                                                value="{{ __('No') }}" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="diet">Diet ?</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="diet"
                                                        id="diet">
                                                        <option value="" selected disabled>Select Your Diet
                                                        </option>
                                                        <option value="Non-Vegetarian"
                                                            {{ old('diet', optional($profile)->diet) == 'Non-Vegetarian' ? 'selected' : '' }}>
                                                            Non-Vegetarian</option>
                                                        <option value="Hindu non-vegetarian"
                                                            {{ old('diet', optional($profile)->diet) == 'Hindu non-vegetarian' ? 'selected' : '' }}>
                                                            Hindu non-vegetarian</option>
                                                        <option value="Vegetarian + Dairy + Eggs"
                                                            {{ old('diet', optional($profile)->diet) == 'Vegetarian + Dairy + Eggs' ? 'selected' : '' }}>
                                                            Vegetarian + Dairy + Eggs</option>
                                                        <option value="Vegetarian + Dairy"
                                                            {{ old('diet', optional($profile)->diet) == 'Vegetarian + Dairy' ? 'selected' : '' }}>
                                                            Vegetarian + Dairy</option>
                                                        <option value="Vegan"
                                                            {{ old('diet', optional($profile)->diet) == 'Vegan' ? 'selected' : '' }}>
                                                            Vegan</option>
                                                    </select>
                                                </div>
                                                {{-- <div>
                                                    <label for="hobbies">Hobbies</label>
                                                    <input id="hobbies" type="text" name="hobbies"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your Hobbies"
                                                        value="{{ old('hobbies', optional($profile)->hobbies) }}" />
                                                </div> --}}
                                            </div>
                                        </div>

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div>
                                                    <label for="about_myself">About Myself (Max: 4000 Characters)</label>
                                                    <textarea name="about_myself" id="about_myself" class="w-full h-20 px-3 rounded-md" maxlength="4000"
                                                        placeholder="Describe yourself in 4,000 characters or less. Where do you work and what do you do? What are some details about your education? What are your hobbies?">{{ old('about_myself', optional($profile)->about_myself) }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Family Information --}}
                                    <h2 id="accordion-collapse-heading-5">
                                        <button type="button"
                                            class="flex items-center justify-between mb-4 w-full gap-3 px-3 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-5" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-5">
                                            <span class="text-black">Family Information</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-5" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-5">
                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="father_name">Father's Name</label>
                                                    <input id="father_name" type="text" name="father_name"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your father name"
                                                        value="{{ old('father_name', optional($family)->father_name) }}" />
                                                </div>
                                                <div>
                                                    <label for="mother_name">Mother's Name</label>
                                                    <input id="mother_name" type="text" name="mother_name"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your father name"
                                                        value="{{ old('mother_name', optional($family)->mother_name) }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="px-3 mt-4 mb-3 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div>
                                                    <label for="father_occupation">Father's Occupation
                                                    </label>
                                                    <textarea name="father_occupation" id="father_occupation" class="w-full px-3 rounded-md h-14">{{ old('father_occupation', optional($family)->father_occupation) }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                         <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="father_age">Father Age</label>
                                                    <input id="father_age" type="number" name="father_age"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your father age"
                                                        value="{{ old('father_age', optional($family)->father_age) }}" />
                                                </div>
                                                <div>
                                                    <label for="mother_age">Mother Age</label>
                                                    <input id="mother_age" type="number" name="mother_age"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your mother age"
                                                        value="{{ old('mother_age', optional($family)->mother_age) }}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="px-3 mb-3 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div>
                                                    <label for="mother_occupation">Mother's Occupation</label>
                                                    <textarea name="mother_occupation" id="mother_occupation" class="w-full px-3 rounded-md h-14">{{ old('mother_occupation', optional($family)->mother_occupation) }}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="px-3 mb-3 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div>
                                                    <label for="sibling_info">Sibling Information</label>
                                                    <textarea name="sibling_info" id="sibling_info" class="w-full px-3 rounded-md h-14"> {{ old('sibling_info', optional($family)->sibling_info) }}</textarea>
                                                </div>
                                            </div>
                                        </div>  --}}

                                        <div class="px-3 mb-3 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div>
                                                    <label for="additional_info">Family Information (Max: 4000 characters)
                                                    </label>
                                                    <textarea name="additional_info" id="additional_info" class="w-full h-20 px-3 rounded-md" maxlength="4000"
                                                        placeholder="Describe your family in 4,000 characters or less.">{{ old('additional_info', optional($family)->additional_info) }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Social Media links --}}
                                    {{-- <h2 id="accordion-collapse-heading-6">
                                        <button type="button"
                                            class="flex items-center justify-between mb-4 w-full gap-3 px-3 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-6" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-6">
                                            <span class="text-black">Social Media Links</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-6" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-6">
                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="social_media_links">Social Media Links</label>
                                                    <div id="socialMediaLinksWrapper" class="space-y-2">
                                                        @if (!empty($profile->social_media_links) && is_array($profile->social_media_links))
                                                            @foreach ($profile->social_media_links as $index => $link)
                                                                <div class="flex space-x-2">
                                                                    <input type="text"
                                                                        name="social_media_links[{{ $index }}]"
                                                                        class="w-full h-10 px-3 rounded-md"
                                                                        placeholder="Enter Social Media Link"
                                                                        value="{{ $link }}" />
                                                                    <button type="button"
                                                                        class="px-3 py-1 text-white bg-red-500 rounded remove-link hover:bg-red-600">Remove</button>
                                                                </div>
                                                            @endforeach
                                                        @else
                                                            <p class="text-[#F42C56]">No social media links available
                                                                yet.
                                                            </p>
                                                        @endif
                                                    </div>

                                                    <!-- Button to add new links -->

                                                    <button type="button" id="addSocialMediaLink"
                                                        class="p-2 px-4 mt-2 text-center text-white bg-gray-900 rounded-lg">
                                                        Add Link
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}

                                    {{-- Partner Prefrences --}}
                                    <h2 id="accordion-collapse-heading-7">
                                        <button type="button"
                                            class="flex items-center justify-between mb-4 w-full gap-3 px-3 py-[10px] bg-addpink text-sm font-semibold"
                                            data-accordion-target="#accordion-collapse-body-7" aria-expanded="false"
                                            aria-controls="accordion-collapse-body-7">
                                            <span class="text-black">Partner Prefrences</span>
                                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0"
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 10 6">
                                                <path stroke="black" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 5 5 1 1 5" />
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="accordion-collapse-body-7" class="hidden"
                                        aria-labelledby="accordion-collapse-heading-7">
                                        {{-- Age --}}
                                        <div class="px-3 mb-2 lg:px-5">
                                            <div class="grid items-center grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <label for="">Age</label>
                                            </div>
                                        </div>
                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid items-center grid-cols-1 lg:grid-cols-3 gap-x-4"
                                                id="age_section">
                                                <!-- Minimum Age -->
                                                <div id="min_age_box">
                                                    <label for="min_age">Minimum</label>
                                                    <input type="number" name="min_age" id="min_age"
                                                        class="w-full h-10 px-3 rounded-md" min="18" max="100"
                                                        placeholder="Enter minimum age in years"
                                                        value="{{ old('min_age', optional($partnerPreference)->min_age != -1 ? optional($partnerPreference)->min_age : '') }}">
                                                    @error('min_age')
                                                        <p class="text-sm text-red-500">{{ $message }}</p>
                                                    @enderror
                                                </div>

                                                <!-- Maximum Age -->
                                                <div id="max_age_box">
                                                    <label for="max_age">Maximum</label>
                                                    <input type="number" name="max_age" id="max_age"
                                                        class="w-full h-10 px-3 rounded-md" min="18" max="100"
                                                        placeholder="Enter maximum age in years"
                                                        value="{{ old('max_age', optional($partnerPreference)->max_age != -1 ? optional($partnerPreference)->max_age : '') }}">
                                                    @error('max_age')
                                                        <p class="text-sm text-red-500">{{ $message }}</p>
                                                    @enderror
                                                </div>

                                                <!-- Any Checkbox -->
                                                <div id="any_checkbox_age">
                                                    <label for="any_option_age">Any (Select to ignore age
                                                        constraints)</label>
                                                    <x-checkbox id="any_option_age" name="any_option_age" value="Any"
                                                        class="ml-4 any-checkbox" :checked="old(
                                                            'any_option_age',
                                                            optional($partnerPreference)->any_option,
                                                        ) ||
                                                            optional($partnerPreference)->min_age == -1 ||
                                                            optional($partnerPreference)->max_age == -1" />
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Height --}}
                                        <div class="px-3 mb-2 lg:px-5">
                                            <div class="grid items-center grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <label for="height">Height</label>
                                            </div>
                                        </div>
                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-3 gap-x-4"
                                                id="height_section">
                                                <div id="min_height_box">
                                                    <label for="min_height">Minimum (in Inches)</label>
                                                    <input type="decimal" name="min_height" id="min_height"
                                                        class="custom-decimal w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Minimum height" min="36" max="90"
                                                        value="{{ old('min_height', optional($partnerPreference)->min_height != -1 ? optional($partnerPreference)->min_height : '') }}">
                                                </div>
                                                <div id="max_height_box">
                                                    <label for="max_height">Maximum (in Inches)</label>
                                                    <input type="decimal" name="max_height" id="max_height"
                                                        class="custom-decimal w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Maximum height" min="36" max="90"
                                                        value="{{ old('max_height', optional($partnerPreference)->max_height != -1 ? optional($partnerPreference)->max_height : '') }}">
                                                </div>
                                                <!-- Any Checkbox -->
                                                <div id="any_checkbox_height">
                                                    <label for="any_option_height">Any (Select to ignore height
                                                        constraints)</label>
                                                    <x-checkbox id="any_option_height" name="any_option_height"
                                                        value="Any" class="ml-4 any-checkbox" :checked="old(
                                                            'any_option_height',
                                                            optional($partnerPreference)->any_option,
                                                        ) ||
                                                            optional($partnerPreference)->min_height == -1 ||
                                                            optional($partnerPreference)->max_height == -1" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                {{-- <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_blood_group">Blood Group</label>
                                                    @php
                                                        $savedBloodGroup = old(
                                                            'partpref_blood_group',
                                                            optional($partnerPreference)->blood_group,
                                                        );
                                                        if (!is_array($savedBloodGroup)) {
                                                            $savedBloodGroup = $savedBloodGroup
                                                                ? explode(',', $savedBloodGroup)
                                                                : [];
                                                        }
                                                    @endphp

                                                    <div class="w-full mt-2">
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_blood_group[]" value="Any"
                                                                    class="any-checkbox" :checked="in_array('Any', $savedBloodGroup)" />
                                                                <label class="ml-2"
                                                                    for="partpref_blood_group_any">Any</label>
                                                            </div>

                                                            @foreach (['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'] as $bloodGroup)
                                                                <div class="flex items-center">
                                                                    <x-checkbox name="partpref_blood_group[]"
                                                                        value="{{ $bloodGroup }}"
                                                                        class="individual-checkbox" :checked="in_array(
                                                                            $bloodGroup,
                                                                            $savedBloodGroup,
                                                                        )"
                                                                        :disabled="in_array('Any', $savedBloodGroup)" />
                                                                    <label class="ml-2"
                                                                        for="partpref_blood_group_{{ $bloodGroup }}">{{ $bloodGroup }}</label>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div> --}}
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="job">Job</label>
                                                    <input type="text" name="job" id="job"
                                                        class="w-full h-10 px-3 rounded-md" placeholder="Enter Job"
                                                        value="{{ old('job', optional($partnerPreference)->job) }}">
                                                </div>
                                                <div>
                                                    <label for="partpref_marital_status">Marital Status</label>
                                                    <select class="w-full h-10 px-3 rounded-md select2-hiddedn-accessible"
                                                        multiple name="partpref_marital_status[]"
                                                        id="partpref_marital_status">
                                                        <option value="" disabled>Select Marital Status
                                                        </option>
                                                        <option value="Any"
                                                            {{ in_array('Any', $partPrefMaritalStatus) ? 'selected' : '' }}>
                                                            Any</option>
                                                        <option value="Never Married"
                                                            {{ in_array('Never Married', $partPrefMaritalStatus) ? 'selected' : '' }}>
                                                            Never Married</option>
                                                        <option value="Divorced"
                                                            {{ in_array('Divorced', $partPrefMaritalStatus) ? 'selected' : '' }}>
                                                            Divorced</option>
                                                        <option value="Widower / Widow"
                                                            {{ in_array('Widower / Widow', $partPrefMaritalStatus) ? 'selected' : '' }}>
                                                            Widower / Widow</option>
                                                        <option value="Legally Separated / Awaiting Divorce"
                                                            {{ in_array('Legally Separated / Awaiting Divorce', $partPrefMaritalStatus) ? 'selected' : '' }}>
                                                            Legally Separated / Awaiting Divorce</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">

                                                <div>
                                                    <label for="address_preference_1">1st Address Prefrence</label>
                                                    <input type="text" name="address_preference_1"
                                                        id="address_preference_1" class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Address Prefrences 1"
                                                        value="{{ old('address_preference_1', optional($partnerPreference)->address_preference_1) }}">
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="address_preference_2">2nd Address Prefrence</label>
                                                    <input type="text" name="address_preference_2"
                                                        id="address_preference_2" class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Address Prefrences 2"
                                                        value="{{ old('address_preference_2', optional($partnerPreference)->address_preference_2) }}">
                                                </div>
                                                <div>
                                                    <label for="address_preference_3">3rd Address Prefrence</label>
                                                    <input type="text" name="address_preference_3"
                                                        id="address_preference_3" class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Address Prefrences 3"
                                                        value="{{ old('address_preference_3', optional($partnerPreference)->address_preference_3) }}">
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="address_preference_4">4th Address Prefrence</label>
                                                    <input type="text" name="address_preference_4"
                                                        id="address_preference_4" class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter Address Prefrences 4"
                                                        value="{{ old('address_preference_4', optional($partnerPreference)->address_preference_4) }}">
                                                </div>
                                            </div>
                                        </div> --}}

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_education">Education</label>
                                                    <select class="w-full h-10 px-3 rounded-md select2-hiddedn-accessible"
                                                        multiple name="partpref_education[]" id="partpref_education">
                                                        <option value="" disabled>Select Degree</option>
                                                        <option value="Any"
                                                            {{ in_array('Any', $education) ? 'selected' : '' }}>
                                                            Any</option>
                                                        <option value="Associate Degree / Diploma"
                                                            {{ in_array('Associate Degree / Diploma', $education) ? 'selected' : '' }}>
                                                            Associate Degree / Diploma</option>
                                                        <option value="Bachelors"
                                                            {{ in_array('Bachelors', $education) ? 'selected' : '' }}>
                                                            Bachelors</option>
                                                        <option value="Masters"
                                                            {{ in_array('Masters', $education) ? 'selected' : '' }}>
                                                            Masters</option>
                                                        <option value="Doctorate"
                                                            {{ in_array('Doctorate', $education) ? 'selected' : '' }}>
                                                            Doctorate</option>
                                                        <option value="Doctor of Medicine"
                                                            {{ in_array('Doctor of Medicine', $education) ? 'selected' : '' }}>
                                                            Doctor of Medicine</option>
                                                        <option value="Doctor of Law"
                                                            {{ in_array('Doctor of Law', $education) ? 'selected' : '' }}>
                                                            Doctor of Law
                                                        </option>
                                                    </select>
                                                    @error('education')
                                                        <span class="text-sm text-red-500">{{ $message }}</span>
                                                    @enderror
                                                    {{-- <label for="partpref_education">Education</label>
                                                    <div class="w-full mt-2">
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]"
                                                                    value="Associate Degree / Diploma" :checked="in_array(
                                                                        'Associate Degree / Diploma',
                                                                        $education,
                                                                    )" />
                                                                <label class="ml-2" for="partpref_education">Associate
                                                                    Degree /
                                                                    Diploma</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]" value="Bachelors"
                                                                    :checked="in_array('Bachelors', $education)" />
                                                                <label class="ml-2"
                                                                    for="partpref_education">Bachelors</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]" value="Masters"
                                                                    :checked="in_array('Masters', $education)" />
                                                                <label class="ml-2"
                                                                    for="partpref_education">Masters</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]" value="Doctorate"
                                                                    :checked="in_array('Doctorate', $education)" />
                                                                <label class="ml-2"
                                                                    for="partpref_education">Doctorate</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]"
                                                                    value="Doctor of Medicine" :checked="in_array(
                                                                        'Doctor of Medicine',
                                                                        $education,
                                                                    )" />
                                                                <label class="ml-2" for="partpref_education">Doctor of
                                                                    Medicine</label>
                                                            </div>
                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]"
                                                                    value="Doctor of Law" :checked="in_array('Doctor of Law', $education)" />
                                                                <label class="ml-2" for="partpref_education">Doctor of
                                                                    Law</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="partpref_education[]" value="Any"
                                                                    :checked="in_array('Any', $education)" />
                                                                <label class="ml-2" for="partpref_education">Any</label>
                                                            </div>
                                                        </div>
                                                    </div> --}}
                                                </div>
                                                <div>
                                                    <label for="visa_preference_1">Visa Prefrence</label>
                                                    <select class="w-full h-10 px-3 rounded-md select2-hiddedn-accessible"
                                                        multiple name="visa_preference_1[]" id="visa_preference_1">
                                                        <option value="" disabled>Select Visa Prefrence
                                                        </option>
                                                        <option value="Any"
                                                            {{ in_array('Any', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Any</option>
                                                        <option value="Citizen: US"
                                                            {{ in_array('Citizen: US', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ in_array('Citizen: Canada', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ in_array('Permanent Resident: US', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ in_array('Permanent Resident: Canada', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ in_array('H1B', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            H1B</option>
                                                        <option value="Student Visa"
                                                            {{ in_array('Student Visa', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ in_array('Visitor', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ in_array('L1', $partnerVisaPreference_1) ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="visa_preference_1">1st Visa Prefrence</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="visa_preference_1"
                                                        id="visa_preference_1">
                                                        <option value="" selected disabled>Select 1st Visa Prefrence
                                                        </option>
                                                        <option value="Citizen: US"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Citizen: US' ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'H1B' ? 'selected' : '' }}>
                                                            H1B</option>
                                                        <option value="Student Visa"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Student Visa' ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'Visitor' ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ old('visa_preference_1', optional($partnerVisaPreference)->visa_preference_1) == 'L1' ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="visa_preference_2">2nd Visa Prefrence</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="visa_preference_2"
                                                        id="visa_preference_2">
                                                        <option value="" selected disabled>Select 2nd Visa Prefrence
                                                        </option>
                                                        <option value="Citizen: US"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Citizen: US' ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'H1B' ? 'selected' : '' }}>
                                                            H1B</option>
                                                        <option value="Student Visa"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Student Visa' ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'Visitor' ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ old('visa_preference_2', optional($partnerVisaPreference)->visa_preference_2) == 'L1' ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="visa_preference_3">3rd Visa Prefrence</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="visa_preference_3"
                                                        id="visa_preference_3">
                                                        <option value="" selected disabled>Select 3rd Visa Prefrence
                                                        </option>
                                                        <option value="Citizen: US"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Citizen: US' ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'H1B' ? 'selected' : '' }}>
                                                            H1B</option>
                                                        <option value="Student Visa"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Student Visa' ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'Visitor' ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ old('visa_preference_3', optional($partnerVisaPreference)->visa_preference_3) == 'L1' ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="visa_preference_4">4th Visa Prefrence</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="visa_preference_4"
                                                        id="visa_preference_4">
                                                        <option value="" selected disabled>Select 4th Visa Prefrence
                                                        </option>
                                                        <option value="Citizen: US"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Citizen: US' ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Citizen: Canada' ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Permanent Resident: US' ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Permanent Resident: Canada' ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'H1B' ? 'selected' : '' }}>
                                                            H1B</option>
                                                        <option value="Student Visa"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Student Visa' ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'Visitor' ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ old('visa_preference_4', optional($partnerVisaPreference)->visa_preference_4) == 'L1' ? 'selected' : '' }}>
                                                            L1</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="hide_profile_from">Hide Profile From</label>
                                                    <div class="w-full mt-2">
                                                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]" value="Citizen: US"
                                                                    :checked="in_array(
                                                                        'Citizen: US',
                                                                        $hideProfileFrom,
                                                                    )" />
                                                                <label class="ml-2" for="hide_profile_from">Citizen:
                                                                    US</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]"
                                                                    value="Citizen: Canada" :checked="in_array(
                                                                        'Citizen: Canada',
                                                                        $hideProfileFrom,
                                                                    )" />
                                                                <label class="ml-2" for="hide_profile_from">Citizen:
                                                                    Canada</label>
                                                            </div>

                                                             <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]" value="Permanent Resident: Canada"
                                                                    :checked="in_array('Permanent Resident: Canada', $hideProfileFrom)" />
                                                                <label class="ml-2" for="hide_profile_from">Permanent Resident: Canada</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]" value="H1B"
                                                                    :checked="in_array('H1B', $hideProfileFrom)" />
                                                                <label class="ml-2" for="hide_profile_from">H1B</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]"
                                                                    value="Student Visa" :checked="in_array(
                                                                        'Student Visa',
                                                                        $hideProfileFrom,
                                                                    )" />
                                                                <label class="ml-2" for="hide_profile_from">Student
                                                                    Visa</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]" value="Visitor"
                                                                    :checked="in_array('Visitor', $hideProfileFrom)" />
                                                                <label class="ml-2"
                                                                    for="hide_profile_from">Visitor</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]"
                                                                    value="No Preference" :checked="in_array(
                                                                        'No Preference',
                                                                        $hideProfileFrom,
                                                                    )" />
                                                                <label class="ml-2" for="hide_profile_from">No
                                                                    Preference</label>
                                                            </div>

                                                            <div class="flex items-center">
                                                                <x-checkbox name="hide_profile_from[]"
                                                                    value=" Permanent Resident: US"
                                                                    :checked="in_array(
                                                                        ' Permanent Resident: US',
                                                                        $hideProfileFrom,
                                                                    )" />
                                                                <label class="ml-2" for="hide_profile_from">Green Card
                                                                    Holder/Permanent
                                                                    Resident</label>
                                                            </div>

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

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="hide_profile_from">Hide Profile From</label>
                                                    <select class="w-full h-10 px-3 rounded-md select2-hiddedn-accessible"
                                                        name="hide_profile_from[]" multiple id="hide_profile_from">
                                                        <option value="" disabled>Select Hide Profile From
                                                        </option>
                                                        <option value="None"
                                                            {{ in_array('None', $hideProfileFrom) ? 'selected' : '' }}>
                                                            None</option>
                                                        <option value="All"
                                                            {{ in_array('All', $hideProfileFrom) ? 'selected' : '' }}>
                                                            All</option>
                                                        <option value="Citizen: US"
                                                            {{ in_array('Citizen: US', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Citizen: US</option>
                                                        <option value="Citizen: Canada"
                                                            {{ in_array('Citizen: Canada', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Citizen: Canada</option>
                                                        <option value="Permanent Resident: US"
                                                            {{ in_array('Permanent Resident: US', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Permanent Resident: US</option>
                                                        <option value="Permanent Resident: Canada"
                                                            {{ in_array('Permanent Resident: Canada', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Permanent Resident: Canada</option>
                                                        <option value="H1B"
                                                            {{ in_array('H1B', $hideProfileFrom) ? 'selected' : '' }}>H1B
                                                        </option>
                                                        <option value="Student Visa"
                                                            {{ in_array('Student Visa', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Student Visa</option>
                                                        <option value="Visitor"
                                                            {{ in_array('Visitor', $hideProfileFrom) ? 'selected' : '' }}>
                                                            Visitor</option>
                                                        <option value="L1"
                                                            {{ in_array('L1', $hideProfileFrom) ? 'selected' : '' }}>L1
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_smoke">Smoke</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_smoke_yes"
                                                                name="partpref_smoke" value="0"
                                                                {{ old('partpref_smoke', optional($partnerPreference)->smoke) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_smoke_yes">Yes</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_smoke_no"
                                                                name="partpref_smoke" value="1"
                                                                {{ old('partpref_smoke', optional($partnerPreference)->smoke) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_smoke_no">No</label>
                                                        </div>

                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_smoke_any"
                                                                name="partpref_smoke" value="2"
                                                                {{ old('partpref_smoke', optional($partnerPreference)->smoke) == '2' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_smoke_any">Don't
                                                                Care</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label for="partpref_drink">Drink</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_drink_yes"
                                                                name="partpref_drink" value="0"
                                                                {{ old('drink', optional($partnerPreference)->drink) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_drink_yes">Yes</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_drink_no"
                                                                name="partpref_drink" value="1"
                                                                {{ old('drink', optional($partnerPreference)->drink) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_drink_no">No</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="partpref_drink_any"
                                                                name="partpref_drink" value="2"
                                                                {{ old('partpref_drink', optional($partnerPreference)->drink) == '2' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="partpref_drink_any">Don't
                                                                Care</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                {{-- <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_hobbies">Hobbies</label>
                                                    <input type="text" name="partpref_hobbies" id="partpref_hobbies"
                                                        class="w-full h-10 px-3 rounded-md" placeholder="Enter Hobbies"
                                                        value="{{ old('partpref_hobbies', optional($partnerPreference)->hobbies) }}">
                                                </div> --}}
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_relocate">Willing to relocate</label>
                                                    <div class="flex items-center mt-2 space-x-4">
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_yes"
                                                                name="partpref_relocate" value="0"
                                                                {{ old('relocate', optional($partnerPreference)->relocate) == '0' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_yes">Yes</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_no"
                                                                name="partpref_relocate" value="1"
                                                                {{ old('relocate', optional($partnerPreference)->relocate) == '1' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_no">No</label>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <input type="radio" id="relocate_any"
                                                                name="partpref_relocate" value="2"
                                                                {{ old('relocate', optional($partnerPreference)->relocate) == '2' ? 'checked' : '' }}
                                                                class="text-indigo-600 form-radio" />
                                                            <label class="ml-2" for="relocate_any">Don't Care</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label for="partpref_diet">Diet</label>
                                                    <div
                                                        class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-1 gap-x-4">
                                                        <div id="partpref_diet_box">
                                                            <select name="partpref_diet[]" id="partpref_diet"
                                                                class="w-full h-10 px-3 rounded-md select2-hiddedn-accessible"
                                                                multiple>
                                                                <option value="" disabled>Select
                                                                    Partner Prefrence Diet
                                                                </option>
                                                                <option value="Any"
                                                                    {{ in_array('Any', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Any
                                                                </option>
                                                                <option value="Non-Vegetarian"
                                                                    {{ in_array('Non-Vegetarian', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Non-Vegetarian
                                                                </option>
                                                                <option value="Hindu non-vegetarian"
                                                                    {{ in_array('Hindu non-vegetarian', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Hindu non-vegetarian
                                                                </option>
                                                                <option value="Vegetarian + Dairy + Eggs"
                                                                    {{ in_array('Vegetarian + Dairy + Eggs', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Vegetarian + Dairy + Eggs
                                                                </option>
                                                                <option value="Vegetarian + Dairy"
                                                                    {{ in_array('Vegetarian + Dairy', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Vegetarian + Dairy
                                                                </option>
                                                                <option value="Vegan"
                                                                    {{ in_array('Vegan', $partPrefDiet) ? 'selected' : '' }}>
                                                                    Vegan
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <!-- Any Checkbox -->
                                                        {{-- <div id="any_checkbox_diet">
                                                            <label for="any_option_diet">Any (Select to ignore diet
                                                                constraints)</label>
                                                            <x-checkbox id="any_option_diet" name="any_option_diet"
                                                                value="Any" class="ml-4 any-checkbox"
                                                                :checked="old('any_option_diet', optional($partnerPreference)->diet) === 'Any'" />
                                                        </div> --}}

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


                                        {{-- <h2 class="bg-[#F42C56] text-white rounded-lg text-center">Fill up for the
                                            Partner's Job Region Prefrences </h2> --}}

                                        <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_country">Country of Residence</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="partpref_country"
                                                        id="partpref_country">
                                                        <option value="">Select country of residence of your partner
                                                        </option>
                                                        @foreach ($countries as $id => $name)
                                                            <option value="{{ $id }}"
                                                                {{ old('partpref_country', optional($partnerVisaPreference)->country) == $id ? 'selected' : '' }}>
                                                                {{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="partpref_state">State/Province</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="partpref_state"
                                                        id="partpref_state">
                                                        <option value="" selected disabled>Select state/province of
                                                            residence of your partner
                                                        </option>
                                                        {{-- Dynamic Option will populate --}}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_city">City</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="partpref_city"
                                                        id="partpref_city">
                                                        <option value="" selected disabled>Select
                                                        </option>
                                                        @foreach ($cities as $id => $name)
                                                            <option value="{{ $id }}"
                                                                {{ old('partpref_city', optional($partnerVisaPreference)->city) == $id ? 'selected' : '' }}>
                                                                {{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div>
                                                    <label for="partpref_metro_area">Metro Area</label>
                                                    <select class="w-full h-10 px-3 rounded-md" name="partpref_metro_area"
                                                        id="partpref_metro_area">
                                                        <option value="" selected disabled>Select
                                                        </option>
                                                        @foreach ($metro_area as $id => $name)
                                                            <option value="{{ $id }}"
                                                                {{ old('partpref_metro_area', optional($partnerVisaPreference)->metro_area) == $id ? 'selected' : '' }}>
                                                                {{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="px-3 mb-4 lg:px-5">
                                            <div class="grid grid-cols-1 mt-1 sm:grid-cols-1 lg:grid-cols-2 gap-x-4">
                                                <div class="mb-2 lg:mb-0">
                                                    <label for="partpref_zip_postal_code">Zip/ Postal Code</label>
                                                    <input id="partpref_zip_postal_code" type="number"
                                                        name="partpref_zip_postal_code"
                                                        class="w-full h-10 px-3 rounded-md"
                                                        placeholder="Enter your zip/ Postal Code"
                                                        value="{{ old('partpref_zip_postal_code', optional($partnerVisaPreference)->zip_postal_code) }}">
                                                </div>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>

                                <div class="flex justify-center w-full p-3 mt-5">
                                    <button type="submit"
                                        class="bg-[#F42C56] text-white text-center p-3 px-8 rounded-lg w-[200px]">
                                        Update Profile
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>



    {{-- Image Deletion Confirmation Modal --}}
    <div id="confirmationModal"
        class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 bg-black bg-opacity-50 sm:p-8">
        <div class="w-full max-w-xs p-6 transition-all duration-300 transform bg-white rounded-lg shadow-xl sm:max-w-md">
            <h2 class="mb-6 text-xl font-semibold text-center text-gray-800">Are you sure you want to delete this
                photo?</h2>
            <div class="flex justify-center gap-4">
                <button id="confirmDeleteBtn"
                    class="w-full px-4 py-2 text-white transition duration-200 bg-red-600 rounded-lg sm:w-auto hover:bg-red-700">Yes</button>
                <button id="cancelDeleteBtn"
                    class="w-full px-4 py-2 text-white transition duration-200 bg-gray-600 rounded-lg sm:w-auto hover:bg-gray-700">Cancel</button>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
                // Image Deletion
                function changeMainImage(imageUrl) {
                    document.getElementById('main-profile-img').src = imageUrl;
                }
                let photoToDeleteIndex = null;
                let photoToDeleteName = null;
                let userId = null;

                function confirmDelete(index, photoName, userIdParam) {
                    photoToDeleteIndex = index;
                    photoToDeleteName = photoName;
                    userId = userIdParam;

                    // Show the confirmation modal
                    document.getElementById('confirmationModal').classList.remove('hidden');
                }
                document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                    if (photoToDeleteIndex !== null && photoToDeleteName !== null && userId !== null) {
                        deletePhoto(photoToDeleteIndex, photoToDeleteName, userId);

                        // Hide the confirmation modal
                        document.getElementById('confirmationModal').classList.add('hidden');
                    }
                });
                document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
                    // Hide the confirmation modal
                    document.getElementById('confirmationModal').classList.add('hidden');
                });

                function deletePhoto(index, photoName, userId) {
                    const fileName = photoName.split('/').pop().split('?')[0];
                    fetch(`/delete-photo/${fileName}/${userId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content'),
                            },
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const photoElement = document.querySelectorAll('.swiper-slide')[index];
                                if (photoElement) {
                                    photoElement.remove();
                                }
                                // alert('Great!! Photo deleted successfully.');
                                location.reload();
                            } else {
                                alert('Failed to delete photo.');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Error deleting photo.');
                        });
                }


                // Social Media Links
                // document.addEventListener('DOMContentLoaded', function() {
                //     document.getElementById('addSocialMediaLink').addEventListener('click', function() {
                //         const wrapper = document.getElementById('socialMediaLinksWrapper');
                //         const currentLinks = wrapper.getElementsByClassName('flex');
                //         const maxLinks = 3;

                //         if (currentLinks.length < maxLinks) {
                //             const newField = document.createElement('div');
                //             newField.classList.add('flex', 'space-x-2', 'mt-2');
                //             newField.innerHTML = `
        //                 <input type="text" name="social_media_links[]"
        //                     class="w-full h-10 px-3 rounded-md"
        //                     placeholder="Enter Social Media Link" />
        //                 <button type="button" class="px-3 py-1 text-white bg-red-500 rounded remove-link hover:bg-red-600">Remove</button>
        //             `;
                //             wrapper.appendChild(newField);
                //         } else {
                //             alert("You can only add a maximum of 3 social media links.");
                //         }
                //     });

                //     document.addEventListener('click', function(e) {
                //         if (e.target && e.target.classList.contains('remove-link')) {
                //             e.target.parentElement.remove();
                //         }
                //     });
                // });

                // Blood Group----->Partner Prefrences
                document.addEventListener('DOMContentLoaded', function() {
                    const anyCheckbox = document.querySelector('.any-checkbox');
                    const individualCheckboxes = document.querySelectorAll('.individual-checkbox');
                    anyCheckbox.addEventListener('change', function() {
                        const isChecked = this.checked;
                        individualCheckboxes.forEach(checkbox => {
                            checkbox.disabled = isChecked;
                            if (isChecked) checkbox.checked = false;
                        });
                    });
                    individualCheckboxes.forEach(checkbox => {
                        checkbox.addEventListener('change', function() {
                            if (this.checked) {
                                anyCheckbox.checked = false;
                                anyCheckbox.disabled = false;


                                individualCheckboxes.forEach(otherCheckbox => {
                                    if (otherCheckbox !== this) {
                                        otherCheckbox.checked = false;
                                    }
                                });
                            }
                        });
                    });
                });

                // Age,Height
                document.addEventListener('DOMContentLoaded', function() {
                    function toggleFields(checkboxId, minFieldId, maxFieldId, sectionId, gridClass1,
                    gridClass2) {
                        const checkbox = document.getElementById(checkboxId);
                        const minField = document.getElementById(minFieldId);
                        const maxField = document.getElementById(maxFieldId);
                        const section = document.getElementById(sectionId);

                        function toggleBoxes() {
                            if (checkbox.checked) {
                                if (minField) {
                                    const minInput = minField.querySelector('input');
                                    if (minInput) minInput.value = '';
                                    minField.style.display = 'none';
                                }
                                if (maxField) {
                                    const maxInput = maxField.querySelector('input');
                                    if (maxInput) maxInput.value = '';
                                    maxField.style.display = 'none';
                                }
                                section.classList.remove(gridClass1);
                                section.classList.add(gridClass2);
                            } else {
                                if (minField) {
                                    minField.style.display = 'block';
                                }
                                if (maxField) {
                                    maxField.style.display = 'block';
                                }
                                section.classList.remove(gridClass2);
                                section.classList.add(gridClass1);
                            }
                        }

                        checkbox.addEventListener('change', toggleBoxes);
                        toggleBoxes();
                    }

                    // Call the function for both "Age" and "Height" sections
                    toggleFields('any_option_age', 'min_age_box', 'max_age_box', 'age_section',
                        'lg:grid-cols-3',
                        'lg:grid-cols-1');
                    toggleFields('any_option_height', 'min_height_box', 'max_height_box', 'height_section',
                        'lg:grid-cols-2', 'lg:grid-cols-1');
                    // toggleFields('any_option_diet', 'partpref_diet_box', 'diet_section', 'lg:grid-cols-2',
                    //     'lg:grid-cols-1');

                });

                // Images
                document.addEventListener("DOMContentLoaded", function() {
                    const form = document.getElementById("photoUploadForm");
                    const fileInput = document.getElementById("profile_photo_path");
                    const submitButton = document.getElementById("submitButton");
                    const errorMessage = document.getElementById("errorMessage");

                    // Show selected file names
                    fileInput.addEventListener("change", function() {
                        if (fileInput.files.length > 0) {
                            let fileNames = Array.from(fileInput.files).map(file => file.name).join(
                                ", ");
                            selectedFilesDisplay.textContent = "Selected Files: " + fileNames;
                            selectedFilesDisplay.classList.remove("hidden");
                            errorMessage.classList.add("hidden");
                        } else {
                            selectedFilesDisplay.textContent = "";
                        }
                    });

                    // Prevent form submission if no file is selected
                    submitButton.addEventListener("click", function(event) {
                        if (fileInput.files.length === 0) {
                            event.preventDefault(); // Stop form submission
                            errorMessage.textContent =
                                "Please select at least one file before uploading.";
                            errorMessage.classList.remove("hidden");
                        }
                    });

                    const maxFileSize = 20 * 1024 * 1024; // 20 MB
                    const maxTotalSize = 100 * 1024 * 1024; // 100 MB
                    const maxFiles = 5;
                    const allowedExtensions = ["jpg", "jpeg", "png"];
                    const storedFilesCount =
                        {{ $storedFilesCount }};

                    let Display = [];

                    fileInput.addEventListener("change", function() {
                        let totalSize = 0;
                        let hasError = false;
                        let errors = [];

                        const totalFiles = storedFilesCount + Display.length;

                        // Check if number of files exceeds the maximum allowed
                        if (fileInput.files.length > maxFiles) {
                            hasError = true;
                            errors.push(`You can upload a maximum of ${maxFiles} photos.`);
                        }

                        // Ensure total files do not exceed the max limit
                        if (totalFiles >= maxFiles) {
                            hasError = true;
                            errors.push(
                                `You can upload a maximum of ${maxFiles} photos. You already have ${storedFilesCount} photos.`
                            );
                        }

                        Display = [...Display, ...Array.from(fileInput.files)];

                        Display.forEach((file) => {
                            const fileExtension = file.name.split(".").pop().toLowerCase();

                            // Validate file type
                            if (!allowedExtensions.includes(fileExtension)) {
                                hasError = true;
                                errors.push(`Invalid file type: ${file.name}`);
                            }

                            // Validate individual file size
                            if (file.size > maxFileSize) {
                                hasError = true;
                                errors.push(`File too large: ${file.name} (Max: 20MB)`);
                            }

                            totalSize += file.size;
                        });

                        // Validate total size
                        if (totalSize > maxTotalSize) {
                            hasError = true;
                            errors.push(
                                `Total size of files exceeds ${maxTotalSize / (1024 * 1024)}MB.`);
                        }

                        if (hasError) {
                            errorMessage.textContent = errors.join(" | ");
                            errorMessage.classList.remove("hidden");
                            submitButton.setAttribute("disabled", "disabled");
                        } else {
                            errorMessage.textContent = "";
                            errorMessage.classList.add("hidden");
                            submitButton.removeAttribute("disabled");
                        }
                    });

                    form.addEventListener("submit", function(event) {
                        if (submitButton.hasAttribute("disabled")) {
                            event.preventDefault();
                            errorMessage.textContent = "Please fix the errors before submitting.";
                            errorMessage.classList.remove("hidden");
                        }
                    });
                });

                // Auto-select "Looking For" based on gender
                document.addEventListener("DOMContentLoaded", function() {
                    const genderSelect = document.getElementById("gender");
                    const lookingForSelect = document.getElementById("looking_for");

                    genderSelect.addEventListener("change", function() {
                        if (genderSelect.value === "male") {
                            lookingForSelect.value = "bride";
                        } else if (genderSelect.value === "female") {
                            lookingForSelect.value = "groom";
                        } else {
                            lookingForSelect.value = "";
                        }
                    });
                    lookingForSelect.addEventListener("change", function() {
                        if (lookingForSelect.value === "bride") {
                            genderSelect.value = "male";
                        } else if (lookingForSelect.value === "groom") {
                            genderSelect.value = "female";
                        } else {
                            genderSelect.value = "";
                        }
                    });
                });

                // Expand/Collapse
                document.addEventListener("DOMContentLoaded", function() {
                    const toggleButton = document.getElementById('toggleAllAccordion');
                    const expandIcon = document.getElementById('expandIcon');
                    const collapseIcon = document.getElementById('collapseIcon');

                    toggleButton.addEventListener('click', function() {
                        const accordions = document.querySelectorAll('[data-accordion-target]');
                        const allExpanded = Array.from(accordions).every(accordion =>
                            accordion.getAttribute('aria-expanded') === 'true'
                        );

                        accordions.forEach(accordion => {
                            const target = document.querySelector(accordion.getAttribute(
                                'data-accordion-target'));
                            const icon = accordion.querySelector('[data-accordion-icon]');

                            if (allExpanded) {
                                accordion.setAttribute('aria-expanded', 'false');
                                target.style.display = 'none';
                                icon?.classList.remove('rotate-180');
                            } else {
                                accordion.setAttribute('aria-expanded', 'true');
                                target.style.display = 'block';
                                icon?.classList.add('rotate-180');
                            }
                        });

                        if (allExpanded) {
                            expandIcon.classList.remove('hidden');
                            collapseIcon.classList.add('hidden');
                        } else {
                            expandIcon.classList.add('hidden');
                            collapseIcon.classList.remove('hidden');
                        }
                    });

                    const individualAccordions = document.querySelectorAll('[data-accordion-target]');
                    individualAccordions.forEach(accordion => {
                        accordion.addEventListener('click', function() {
                            const target = document.querySelector(accordion.getAttribute(
                                'data-accordion-target'));
                            const icon = accordion.querySelector('[data-accordion-icon]');
                            const expanded = accordion.getAttribute('aria-expanded') === 'true';

                            if (expanded) {
                                accordion.setAttribute('aria-expanded', 'false');
                                target.style.display = 'none';
                                icon?.classList.remove('rotate-180');
                            } else {
                                accordion.setAttribute('aria-expanded', 'true');
                                target.style.display = 'block';
                                icon?.classList.add('rotate-180');
                            }
                        });
                    });
                });

                // Dynamic State and City Dropdowns
                $(document).ready(function() {

                    $('#country, #state, #metro_area, #partpref_country, #partpref_state').select2({
                        allowClear: true,
                        width: '100%',
                    });

                    let selectedCountry = $('#country').val();
                    let selectedState = '{{ old('state', optional($visa)->state) }}';
                    let selectedCity = '{{ old('city', optional($visa)->city) }}';
                    let selectedMetroArea = '{{ old('metro_area', optional($visa)->metro_area) }}';

                    if (selectedCountry) {
                        populateStates(selectedCountry, selectedState);
                    }

                    if (selectedState) {
                        populateCities(selectedState, selectedCity);
                        populateMetroAreas(selectedState, selectedMetroArea);
                    }

                    // On country change, fetch states
                    $('#country').change(function() {
                        let countryId = $(this).val();
                        if (countryId) {
                            populateStates(countryId);
                            $('#state').empty().append(
                                '<option value="">Select Your State of Residence</option>');
                            $('#city').empty().append('<option value="">Select a City</option>');
                            $('#metro_area').empty().append(
                                '<option value="">Select a Metro Area</option>');
                        } else {
                            $('#state').empty().append(
                                '<option value="">Select Your State of Residence</option>');
                            $('#city').empty().append('<option value="">Select a City</option>');
                            $('#metro_area').empty().append(
                                '<option value="">Select a Metro Area</option>');
                        }
                    });

                    // On state change, fetch cities
                    $('#state').change(function() {
                        let stateId = $(this).val();
                        if (stateId) {
                            populateCities(stateId);
                            populateMetroAreas(stateId);
                        } else {
                            $('#city').empty().append('<option value="">Select a City</option>');
                            $('#metro_area').empty().append(
                                '<option value="">Select a Metro Area</option>');
                        }
                    });

                    let selectedPartnerCountry = $('#partpref_country').val();
                    let selectedPartnerState =
                        '{{ old('partpref_state', optional($partnerVisaPreference)->state) }}';

                    if (selectedPartnerCountry) {
                        populatePartnerStates(selectedPartnerCountry, selectedPartnerState);
                    }

                    $('#partpref_country').change(function() {
                        let countryId = $(this).val();
                        if (countryId) {
                            populatePartnerStates(countryId);
                            $('#partpref_state').empty().append(
                                '<option value="">Select State/Province</option>');
                        } else {
                            $('#partpref_state').empty().append(
                                '<option value="">Select State/Province</option>');
                        }
                    });
                    // Function to populate states dynamically
                    function populateStates(countryId, selectedState = null) {
                        $.ajax({
                            url: '{{ route('fetch.states') }}',
                            method: 'GET',
                            data: {
                                country_id: countryId
                            },
                            success: function(data) {
                                $('#state').empty().append(
                                    '<option value="">Select Your State of Residence</option>');
                                if (data.states) {
                                    $.each(data.states, function(id, name) {
                                        let isSelected = selectedState == id ? 'selected' :
                                            '';
                                        $('#state').append('<option value="' + id + '" ' +
                                            isSelected +
                                            '>' + name + '</option>');
                                    });
                                } else {
                                    $('#state').append(
                                        '<option value="" disabled>No states found for this country.</option>'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('AJAX Error (States):', error);
                            }
                        });
                    }

                    // Function to populate cities dynamically
                    function populateCities(stateId, selectedCity = null) {
                        $.ajax({
                            url: '{{ route('fetch.cities') }}',
                            method: 'GET',
                            data: {
                                state_id: stateId
                            },
                            success: function(data) {
                                $('#city').empty().append(
                                '<option value="">Select a City</option>');
                                if (data.cities) {
                                    $.each(data.cities, function(id, name) {
                                        let isSelected = selectedCity == id ? 'selected' :
                                            '';
                                        $('#city').append('<option value="' + id + '" ' +
                                            isSelected +
                                            '>' + name + '</option>');
                                    });
                                } else {
                                    $('#city').append(
                                        '<option value="" disabled>No cities found for this state.</option>'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('AJAX Error (Cities):', error);
                            }
                        });
                    }

                    // Function to populate metro areas dynamically
                    function populateMetroAreas(stateId, selectedMetroArea = null) {
                        $.ajax({
                            url: '{{ route('fetch.metroareas') }}',
                            method: 'GET',
                            data: {
                                state_id: stateId
                            },
                            success: function(data) {
                                $('#metro_area').empty().append(
                                    '<option value="">Select a Metro Area</option>');
                                if (data.metro_area) {
                                    $.each(data.metro_area, function(id, name) {
                                        let isSelected = selectedMetroArea == id ?
                                            'selected' : '';
                                        $('#metro_area').append('<option value="' + id +
                                            '" ' +
                                            isSelected + '>' + name + '</option>');
                                    });
                                } else {
                                    $('#metro_area').append(
                                        '<option value="" disabled>No metro areas found for this state.</option>'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('AJAX Error (Metro Areas):', error);
                            }
                        });
                    }
                    // Function to populate partner states dynamically
                    function populatePartnerStates(countryId, selectedState = null) {
                        $.ajax({
                            url: '{{ route('fetch.states') }}',
                            method: 'GET',
                            data: {
                                country_id: countryId
                            },
                            success: function(data) {
                                $('#partpref_state').empty().append(
                                    '<option value="">Select State/Province</option>');
                                if (data.states) {
                                    $.each(data.states, function(id, name) {
                                        let isSelected = selectedState == id ? 'selected' :
                                            '';
                                        $('#partpref_state').append('<option value="' + id +
                                            '" ' +
                                            isSelected + '>' + name + '</option>');
                                    });
                                } else {
                                    $('#partpref_state').append(
                                        '<option value="" disabled>No states found for this country.</option>'
                                    );
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log('AJAX Error (Partner States):', error);
                            }
                        });
                    }
                });


                $(document).ready(function() {
                    $('#hide_profile_from, #visa_preference_1, #partpref_education, #partpref_diet, #partpref_marital_status')
                        .select2({
                            width: '100%',
                        });
                });
        </script>
    @endpush
@endsection