@extends('admin.layouts.master')
@section('title')
{{ translate('Members - Detail') }}
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate('Overview') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate('Member') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate('Overview') }}
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
            <div class="xl:col-span-4">
                <div class="sticky top-[calc(theme('spacing.header')_*_1.3)] mb-5">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('admin.members.update.status', $user->id) }}" method="POST" >
                        @csrf

                        <div class="xl:col-span-2">
                            <select name="status" class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices id="choices-single-default">
                                <option value="">{{ translate('Select Status') }}</option>
                                <option value="1" {{ $user->email_verified_at ? 'selected' : '' }}>{{ translate('Active') }}</option>
                                <option value="0" {{ is_null($user->email_verified_at) ? 'selected' : '' }}>{{ translate('Inactive') }}</option>
                            </select>
                        </div>
                        <div class="mt-4">
                            <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Update</button>
                        </div>
                    </div>
                        </form>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('admin.members.imageUpload') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <input type="hidden" name="userId" value="{{$user->id}}">

                            <div class="xl:col-span-2">
                                <div class="col-span-4">
                                    <label for="">{{ translate('Upload Image') }}</label>
                                </div>
                                <div class="col-span-8">
                                    <input type="file" name="Newimage" value="" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" required>
                                </div>
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Submit') }}</button>
                            </div>
                        </div>
                            </form>
                        </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="grid grid-cols-1 gap-5 md:grid-cols-12">

                                <div class="rounded-md md:col-span-8 md:row-span-2 bg-slate-100 dark:bg-zink-600 relative">
                                    <img src="{{ $user->profile_image ? asset('uploads/profileImage/' . $user->profile_image) : asset('uploads/profileImage/avatar.png') }}" alt="Profile Image" id="profileImage" class="w-full h-full object-cover">

                                    <!-- Plus icon for changing the image -->
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <button id="uploadIcon" class="text-white bg-black bg-opacity-50 rounded-full p-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                                                <path d="M12.146.854a.5.5 0 0 1 .708 0l2.292 2.292a.5.5 0 0 1 0 .708l-9.292 9.292a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l9.292-9.292zm.708 2.122L12.268 2 3 11.268v.707h.707L13.854 3.146l-1-1z"/>
                                              </svg>



                                        </button>
                                    </div>

                                    <!-- Hidden file input -->
                                    <input type="file" id="profileImageInput" accept="image/*" class="hidden">
                                </div>

                                    @foreach ($images as $image)
                                        <div class="rounded-md md:col-span-4 bg-slate-100 dark:bg-zink-600">
                                            <img src="{{ asset('uploads/images/' . $image->path) }}" alt="">
                                            <button class="delete-btn text-red-500 mt-2" data-id="{{ $image->id }}" data-path="{{ $image->path }}" data-url="{{ route('admin.deleteImage', ['imageId' => $image->id]) }}">
                                                <!-- SVG trash icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                                    <path d="M5.5 0a.5.5 0 0 1 .5.5V1h5V.5a.5.5 0 0 1 1 0V1h2a1 1 0 0 1 1 1v1a1 1 0 0 1-.978.993l-1.208 8.024a1 1 0 0 1-.998.883H4.185a1 1 0 0 1-.998-.883L2.978 3.993A1 1 0 0 1 2 3V2a1 1 0 0 1 1-1h2V.5a.5.5 0 0 1 .5-.5z"/>
                                                  </svg>



                                            </button>
                                        </div>
                                    @endforeach
                             </div>
                        </div>
                    </div>
                    <!--end card-->
                    <!-- <div class="card">
                        <div class="border-b card-body border-slate-200 dark:border-zink-500">
                            <div class="flex">
                                <h6 class="grow text-15"><i data-lucide="store" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">Themesdesign</span></h6>
                                <div class="shrink-0">
                                    <i data-lucide="star" class="inline-block text-yellow-500 size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">(4.8)</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="flex">
                                <h6 class="grow text-15"><i data-lucide="map-pin" class="inline-block text-orange-500 size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">California, USA</span></h6>
                                <div class="shrink-0">
                                    <button type="button" class="px-2.5 py-2 text-xs text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">View Store</button>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <!--end card-->
                </div>
            </div>
            <!--end col-->
            <div class="xl:col-span-8">
                <div class="card bg-slate-100">
                    <div class="card-header p-4">
                        <div class="flex flex-wrap gap-2 ltr:float-right rtl:float-left">
                            <!-- <button type="button" class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Package</button> -->
                            <a href="{{ route('admin.members.packages', ['user_id' => $user->id]) }}"
                                target="_blank"
                                class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">
                                {{ translate('Package') }}
                             </a>

                            <a href="{{ route('loginAsMember', ['user_id' => $user->id]) }}"
                                target="_blank"
                                class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">
                                {{ translate('Login as member') }}
                             </a>
                            {{-- <button type="button" class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Login as member</button> --}}
                            <!-- <button type="button" class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Block</button> -->
                            @if ($user->block == 0)
                                <a href="{{ route('admin.members.blockUser', ['id' => $user->id, 'block' => '1' ]) }}"
                                class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">
                                {{ translate('Unblocked') }}                                </a>
                            @else
                                <a href="{{ route('admin.members.blockUser', ['id' => $user->id, 'block' => '0' ]) }}"
                                class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">
                                {{ translate('Blocked' ) }}
                                </a>
                            @endif

                            <a href="{{ route('admin.members.edit', ['id' => $user->id ]) }}" class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Edit</a>
                            <a href="{{route('admin.members.index')}}" class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Close</a>
                            <!-- <button type="button"  class="bg-white text-slate-500 btn border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500 dark:ring-slate-400/20 dark:focus:bg-slate-500">Close</button> -->
                        </div>
                        <br><br>
                    </div>
                    <div class="card-body">

                        <div class="card mt-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Basic Information') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Username') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->user_name }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Frist Name') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->first_name }}</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Last Name') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->last_name }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Email') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->email }}</td>
                                                {{-- <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Password</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->password }}</td> --}}
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Origin') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $originName }}</td>

                                                {{-- <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">  @if($user->Origin)
                                                    {{$user->Origin->name}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td> --}}
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Gender') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->gender }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Date Of Birth') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ formatDate($user->dob) }}</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Age') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->age }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Religion') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $religionName }}</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Relation Status') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $relationName }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Am Looking for') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $amLookingName }}</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Childrens') }}</th>
                                           @if ($children)
                                           <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $children->name }}</td>
                                           @else
                                           <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">N/A</td>
                                           @endif
                                                
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Cast</th>

                                                 @if($cast)
                                                 <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $cast->name }}</td>
                                                 @else
                                                 <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">N/A</td>
                                                @endif

                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Sub cast</th>
                                                @if($subcast)
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $subcast->name }}</td>
                                                @else
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">N/A</td>
                                                @endif
                                            </tr>
                                            <tr>

                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Short Description') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $user->short_description }}</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Block status') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                {{ $user->block == 0 ? 'Blocked' : 'Unblocked' }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- Living --}}
                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Living') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Country') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->country_id)
                                                        {{ $countryName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('State') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->state_id)
                                                        {{ $stateName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('City') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->city_id)
                                                        {{ $cityName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {{-- end sample --}}


                        {{-- About Me --}}
                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('About Me') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Length') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                 
                                                   
                                                    @if($userDetails && $userDetails->length_id)
                                                        {{ $lengthName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Eye Color') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->eye_color_id)
                                                        {{ $eyeColorName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Hair Color') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->hair_color_id)
                                                    {{ $hairColorName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Body Type') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->body_type_id)
                                                    {{ $bodyTypeName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Weight') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->weight)
                                                    {{ $userDetails->weight }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Appearance') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->appearance_id)
                                                    {{ $appearanceName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Clothing Styles') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->clothing_style_id)
                                                    {{ $clothingName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Intelligence') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->intelligence_id)
                                                    {{ $intelligenceName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Languages') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->languages)
                                                    {{ $languageName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {{-- end sample --}}

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Education') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Diploma') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->diploma_id)
                                                    {{ $diplomaName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            {{-- <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Degree</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Institution</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Start</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">End</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Status</th>
                                            </tr>
                                            <tr>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr> --}}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Career') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Career') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->working_sector_id)
                                                    {{ $workingName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            {{-- <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Designation</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Company</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Start</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">End</th>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Status</th>
                                            </tr>
                                            <tr>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr> --}}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Language') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Mother Tangue') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->mother_tongue_id)
                                                    {{ $motherTongueName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Known Languages') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->known_languages)
                                                    {{ $knownLanguageName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Physical Attributes</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Height</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Weight</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Eye Color</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Hair Color</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Complexion</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Blood Group</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Body Type</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Body Art</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Disability</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}


                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Hobbies & Interest') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Sports') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->sports)
                                                    {{ $sportName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Music') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->music)
                                                    {{ $musicName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Kitchen') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->kitchen)
                                                    {{ $kitchenName}}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Reading') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->reading)
                                                    {{ $readingName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('TV Shows') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->tv_shows)
                                                    {{ $tvShowName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Personal Attitude & Behavior') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Personal Attitude') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->personal_attitude)
                                                        @php
                                                            // Convert the comma-separated string into an array
                                                            $attitudeArray = explode(',', $userDetails->personal_attitude);
                                                            $attitudeNames = []; // Initialize an array to store the attitude names
                                                        @endphp

                                                        @foreach ($attitudeArray as $attitudeId)
                                                            @php
                                                                // Fetch the attitude name based on the ID
                                                                $personalAttitude = App\Models\ProfileAttributeMeta::find($attitudeId);
                                                                if ($personalAttitude) {
                                                                    $attitudeNames[] = $personalAttitude->name; // Add each attitude name to the array
                                                                }
                                                            @endphp
                                                        @endforeach

                                                        <!-- Display the names as a comma-separated string -->
                                                        {{ implode(', ', $attitudeNames) }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Residency Information</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Birth Country</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Residency Country</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Grow Up Country</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Immigration Status</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}

                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Spiritual & Social Background</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Religion</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Caste</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Sub Caste</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Ethnicity</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Personal Value</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Family Value</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Community Value</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Life Style') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Smoke') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    {{-- @php
                                                        dd($userDetails);
                                                    @endphp --}}

                                                    @if($userDetails && $userDetails->smoke)
                                                    {{ $userDetails->smoke }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Drinking') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->drinking)
                                                    {{ $userDetails->drinking }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Going Out') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userDetails && $userDetails->going_out)
                                                    {{ $userDetails->going_out }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Astronomic Information</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Sun Sign</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Moon Sign</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Time Of Birth</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Time Of Birth</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}

                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Permanent Address</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">City</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">State</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Country</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Postal Code</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}

                        {{-- <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">Family Information</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Father</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Mother</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Sibling</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500"></td>
                                            </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> --}}

                        <div class="card m-5">
                            <div class="card-header p-2 bg-slate-900">
                                <h4 class="text-white">{{ translate('Partner Expectation') }}</h4>
                            </div>
                            <div class="card-body p-4 bg-black">
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <tbody class="text-left">
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Origin') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->origin_id)
                                                    {{ $originsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Am Looking for') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->am_looking_for_id)
                                                    {{ $amLookingForsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Length') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->lengthe_id)
                                                    {{ $lengthsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Weight') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->weight)
                                                    {{ $userPartner->weight }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Religion') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->religion_id)
                                                    {{ $religionsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Relation Status') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->relation_status_id)
                                                    {{ $relationsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Education') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->education_id)
                                                    {{ $educationsName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Smoke') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->smoke !== null)
                                                        @if($userPartner->smoke == 1)
                                                            Yes
                                                        @elseif($userPartner->smoke == 0)
                                                            No
                                                        @else
                                                            N/A
                                                        @endif
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Drinking') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->drinking !== null)
                                                        @if($userPartner->drinking == 1)
                                                            Yes
                                                        @elseif($userPartner->drinking == 0)
                                                            No
                                                        @else
                                                            N/A
                                                        @endif
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Going Out') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->going_out !== null)
                                                        @if($userPartner->going_out == 1)
                                                            Yes
                                                        @elseif($userPartner->going_out == 0)
                                                            No
                                                        @else
                                                            N/A
                                                        @endif
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Range Age:') }}</th>
                                                </tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('From Age') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->from_age)
                                                    {{ $userPartner->from_age }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('To Age') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->to_age)
                                                    {{ $userPartner->to_age }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Childeren') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->childeren_id)
                                                    {{ $childerensName }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('Country') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->country_id)
                                                    {{ $countryNames }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('State') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->state_id)
                                                  
                                                    {{ $stateNames  }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ translate('City') }}</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                                    @if($userPartner && $userPartner->city_id)
                                                    {{ $cityNames }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>
                                                {{-- <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Drinking Acceptable</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td> --}}
                                            </tr>
                                            {{-- <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Diet</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Body Type</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Personal Value</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Manglik</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Preferred Country</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Preferred State ID</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr>
                                            <tr>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Family Value</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                                <th class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">Complexion</th>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">data placeholder</td>
                                            </tr> --}}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div><!--end col-->
        </div>
        <!--end grid-->


    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!-- product overview init js-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-product-overview.init.js')}}"></script>
<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif
</script>

<script>

document.getElementById('uploadIcon').addEventListener('click', function() {
    document.getElementById('profileImageInput').click();
});


document.getElementById('profileImageInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('profile_image', file);

        const userId = document.querySelector('input[name="userId"]').value;
        formData.append('userId', userId);

        // AJAX request to upload the new profile image
        fetch('{{ route("admin.profile.updateImage") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update the profile image src with the new image path
                document.getElementById('profileImage').src = data.image_url;

                // Show SweetAlert success notification
                Swal.fire({
                    title: 'Success!',
                    text: 'Profile image uploaded successfully!',
                    icon: 'success',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: data.message || 'Failed to upload image.',
                    icon: 'error',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Try Again'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Error!',
                text: 'Something went wrong. Please try again later.',
                icon: 'error',
                confirmButtonColor: '#d33',
                confirmButtonText: 'OK'
            });
        });
    }
});



</script>

<script>
    @if (isset($image))
    const deleteImageRoute = "{{ route('admin.deleteImage', ['imageId' => $image->id]) }}";
    @endif

</script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', function () {
        const imageId = this.getAttribute('data-id');
        const imagePath = this.getAttribute('data-path');
        const url = this.getAttribute('data-url'); // Get the URL from the data attribute

        // SweetAlert2 confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to delete this image?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Send AJAX request to delete image
                fetch(url, { // Use the URL stored in the data attribute
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ path: imagePath })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove image from the page
                        this.closest('div').remove();
                        Swal.fire(
                            'Deleted!',
                            'Your image has been deleted.',
                            'success'
                        );
                    } else {
                        Swal.fire(
                            'Error!',
                            'There was an error deleting the image.',
                            'error'
                        );
                    }
                });
            }
        });
    });
});

</script>



@endsection