@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - My Interest') }}</title>

@section('content')

<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <div class="flex-1 bg-white">
            @include('frontend.user.layouts.header')

            <div class="w-full px-6 pb-[60px] xl:pb-32">

                <div class="mt-7">
                    <div class="text-black">
                        <h3 class="text-[22px] sm:text-2xl lg:text-3xl xl:text-[36px] font-semibold mb-4">{{ translate('Who\'s Liked Me') }}</h3>
                    </div>
                </div>

                <div class="w-full px-6 pt-[30px] mt-6">


                <div class="flex pb-6 gap-2.5 items-center justify-between flex-wrap">
                    <!-- =left-button= -->
                    <div class="flex items-center gap-2 flex-wrap">
                        <!-- =item= -->
                        {{-- <div class="flex items-center gap-2">
                            <!-- =check-toggle= -->
                            <button
                                class="dashbord_check_toggle small">
                                <input type="checkbox" name="check"
                                    id="check8">
                                <label for="check8"></label>
                            </button>
                            <!-- =text= -->
                            <span
                                class="text-black text-sm font-semibold whitespace-nowrap">Featured</span>
                        </div> --}}

                        <!-- =item= -->
                        <div class="flex items-center gap-2">
                            <!-- =check-toggle= -->
                            <button
                                class="dashbord_check_toggle small">
                                <input type="checkbox" name="check"
                                    id="check9">
                                <label for="check9"></label>
                            </button>
                            <!-- =text= -->
                            <span
                                class="text-black text-sm font-semibold whitespace-nowrap">{{ translate('Online') }}</span>
                        </div>

                        <!-- =item= -->
                        {{-- <div class="flex items-center gap-2">
                            <!-- =check-toggle= -->
                            <button
                                class="dashbord_check_toggle small">
                                <input type="checkbox" name="check"
                                    id="check10">
                                <label for="check10"></label>
                            </button>
                            <!-- =text= -->
                            <span
                                class="text-black text-sm font-semibold whitespace-nowrap">Video</span>
                        </div> --}}

                    </div>
                    <!-- =right-button= -->
                    <div class="flex items-center gap-2">
                        <!-- =item= -->
                        <select name="filter" id="filter"
                            class="bg-transparent border-none outline-none text-black text-sm font-semibold cursor-pointer hover:text-red-color duration-300">
                            <option value="Most Relevant">{{ translate('Most Relevant') }}</option>
                            <option value="Most Relevant">{{ translate('Most Relevant') }}</option>
                            <option value="Most Relevant">{{ translate('Most Relevant') }}</option>
                            <option value="Most Relevant">{{ translate('Most Relevant') }}</option>
                        </select>
                        <!-- =item= -->
                        <button id="grid_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle5') == 'grid' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-layout-grid-line"></i>
                        </button>
                        <!-- =item= -->
                        <button id="list_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle5') == 'list' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-list-unordered"></i>
                        </button>
                        <!-- =item= -->
                        <button id="map_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle5') == 'map_view' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-map-pin-line"></i>
                        </button>
                    </div>
                </div>


                @if (session('GridStyle5') == 'grid')
                <div class="grid grid-cols-1 place-items-center xs:place-items-start min-[450px]:grid-cols-2 min-[550px]:grid-cols-3 min-[700px]:grid-cols-4 md:grid-cols-5 2xl:grid-cols-6 gap-7">
                    @if ($matches->isEmpty())
                    <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                    @else

                    @foreach ($matches as $match)
                        @php
                            $isLiked = $likedProfiles->contains('id', $match->id);
                            $profileImageData = getProfileImage($match);
                        @endphp
                        <!-- =item= -->
                        @if ($userpackage)
                            <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                               class="text-center text-black max-w-[400px] w-full "
                               data-id="{{ encrypt($match->id) }}"
                               data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">
                                {{-- <picture>
                                    <img style="border-radius:20px; height:55%;"
                                         src="{{ $profileImageData['image_url'] }}"
                                         alt="image" loading="lazy"
                                         class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture> --}}
                                <picture>
                                    <img style="border-radius:20px; height:50%;"
                                        src="{{ $profileImageData['image_url'] }}"
                                        alt="image" loading="lazy"
                                        class="{{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} profile-link">
                                </picture>
                                   @if($profileImageData['is_blurred'])
                                    <div style="margin-top: -77px; margin-left:40px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
                                    </div>
                                    @endif
                                <h5 class="text-lg font-semibold py-1 whitespace-nowrap overflow-hidden text-ellipsis">{{ $match->name }}</h5>

                                {{-- <h5 class="text-lg font-semibold py-1">{{ $match->first_name }} {{ $match->last_name }}</h5> --}}
                                <p class="text-[#737c96] text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                                    {{ $match->age }} {{ translate('Years Old') }},
                                    {{ $match->userDetails->country->name ?? '' }},
                                    {{ $match->userDetails->city->name ?? '' }}
                                </p>
                                <div class="flex items-center justify-center gap-2.5 pt-1">
                                    <button class="favourite_button {{ $isLiked ? 'active' : '' }}" data-favourite-button>
                                        <i class="ri-heart-line"></i>
                                    </button>
                                    <button class="flex items-center justify-center w-8 h-8 rounded-full border-[1px] border-blue-color text-lg text-blue-color font-medium duration-300 hover:bg-blue-color hover:text-white">
                                        <i class="ri-message-3-line"></i>
                                    </button>
                                </div>
                                {{-- @if($profileImageData['is_blurred'])
                                <a style="margin-left: 24px; margin-top: 50px;" href="#" class="ask-for-image-link absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 rounded-[5px] text-white text-xs sm:text-sm font-semibold hover:bg-opacity-70 transition-all"
                                data-user-id="{{ $user->id }}"
                                data-image-id="{{ $profileImageData['image_url'] }}">
                                    <i class="fas fa-image"></i> Ask for Image
                                </a>
                                  @endif --}}
                            </a>
                            @else
                            <a href="#"
                                    class="text-center text-black max-w-[400px] w-full "
                                    data-id="{{ encrypt($match->id) }}"
                                    data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">

                                    {{-- <picture>
                                        <img style="border-radius:20px; height:55%;"
                                            src="{{ $profileImageData['image_url'] }}"
                                            alt="image" loading="lazy"
                                            class="{{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} profile-link">
                                    </picture> --}}

                                    <picture>
                                        <img style="border-radius:20px; height:50%;"
                                            src="{{ $profileImageData['image_url'] }}"
                                            alt="image" loading="lazy"
                                            class="{{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} profile-link">
                                    </picture>
                                       @if($profileImageData['is_blurred'])
                                        <div style="margin-top: -70px; margin-left:60px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
                                        </div>
                                        @endif

                                        <style>
                                            /* Ensure the eye icon is centered */
                                            .ask-for-image-link {
                                                position: absolute;

                                                transform: translate(-50%, -50%);
                                                z-index: 10;
                                                pointer-events: all; /* Allow interaction */
                                            }

                                            /* Mobile responsiveness */
                                            @media (max-width: 768px) {
                                                .ask-for-image-link svg {
                                                    width: 40px; /* Adjust the icon size for smaller screens */
                                                }
                                            }
                                        </style>
                                    <h5 class="text-lg font-semibold py-1 whitespace-nowrap overflow-hidden text-ellipsis">{{ $match->name }}</h5>


                                    {{-- <h5 class="text-lg font-semibold py-1">{{ $match->first_name }} {{ $match->last_name }}</h5> --}}
                                    <p class="text-[#737c96] text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                                        {{ $match->age }} {{ translate('Years Old') }},
                                        {{ $match->userDetails->country->name ?? '' }},
                                        {{ $match->userDetails->city->name ?? '' }}
                                    </p>
                                    <div class="flex items-center justify-center gap-2.5 pt-1">


                                        <button
                                            class="favourite_button {{ $isLiked ? 'active' : '' }}"
                                            data-favourite-button>
                                            <i class="ri-heart-line"></i>
                                        </button>



                                        <button class="flex items-center justify-center w-8 h-8 rounded-full border-[1px] border-blue-color text-lg text-blue-color font-medium duration-300 hover:bg-blue-color hover:text-white"><i class="ri-message-3-line"></i></button>
                                    </div>
                                    {{-- @if($profileImageData['is_blurred'])
                                <a style="margin-left: 24px; margin-top: 50px;" href="#" class="ask-for-image-link absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 rounded-[5px] text-white text-xs sm:text-sm font-semibold hover:bg-opacity-70 transition-all"
                                data-user-id="{{ $match->id }}"
                                data-image-id="{{ $profileImageData['image_url'] }}">
                                    <i class="fas fa-image"></i> Ask for Image
                                </a>
                                  @endif --}}
                                    </a>
                                    @endif
                    @endforeach
                    @endif

                </div>
                @endif



                @if (session('GridStyle5') == 'list')
                <div id="list_view"  class="mt-10 w-full flex flex-col gap-5 2xl:gap-0">

                    @if ($matches->isEmpty())
                    <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                    @else
                    @foreach($matches as $match)
                        @php
                            $isLiked = $likedProfiles->contains('id', $match->id);
                            $profileImageData = getProfileImage($match);
                        @endphp
                    <!-- =item= -->
                    @if ($userpackage)
                    <div class="w-full mt-6">
                        <!-- =content= -->
                        <div
                            class="flex gap-3.5 sm:gap-5 items-center">
                            <picture>
                                <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                                    class="text-center text-black max-w-[400px] w-full "
                                    data-id="{{ encrypt($match->id) }}"
                                    data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">
                                <img
                                    src="{{ $profileImageData['image_url'] }}"
                                    alt="image" loading="lazy"
                                    class="min-w-[120px] h-[120px] xs:min-w-[160px] xs:h-[160px] rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </a>
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div class="ask-for-image-link absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                                     data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512">
                                        <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
                                    </svg>
                                </div>
                            @endif
                        </picture>
                            <div class="text-black w-full">
                                <!-- =upper-text= -->
                                <div
                                    class="flex items-center gap-3.5 justify-between flex-wrap">
                                    <div
                                        class="flex items-start md:items-center gap-3.5">
                                        <span
                                            class="min-w-[14px] h-3.5 bg-red-color"></span>
                                        <h3
                                            class="flex items-center font-medium gap-2.5 flex-wrap">
                                            <a href="#"
                                                class="text-xs md:text-base lg:text-[20px] duration-300 hover:text-red-color font-semibold">{{ $match->first_name }} {{ $match->last_name }}</a>
                                            <span
                                                class="text-xs md:text-base lg:text-lg font-normal">{{ $match->age }} {{ translate('Years Old') }}, {{$match->userDetails->country->name ?? '' }}, {{ $match->userDetails->city->name ?? '' }}</span>
                                        </h3>
                                    </div>

                                </div>
                                <p
                                    class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">
                                   {{$match->short_description}}</p>

                                <div
                                    class="w-full hidden 2xl:block">
                                    @php
                                         if($match->relation_status_id != null){
                                        $relationStatus=App\Models\ProfileAttributeMeta::where('id', $match->relation_status_id)->first();
                                    }
                                    else{
                                        $relationStatus=null;
                                    }

                                    if($user->religion_id != null){
                                        $religion=App\Models\ProfileAttributeMeta::where('id', $match->religion_id)->first();
                                    }
                                    else{
                                        $religion=null;
                                    }
                                    @endphp

                                    <div
                                        class="flex items-center gap-8">
                                        <h4
                                            class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Relatio Staus') }}</h4>
                                        <div
                                            class="flex items-center gap-8">
                                            <p
                                                class="text-xs md:text-sm font-normal">:</p>
                                                @if ($relationStatus)
                                                <p
                                                class="text-xs md:text-sm font-normal">{{$relationStatus->name}}</p>
                                                @else
                                                <p
                                                class="text-xs md:text-sm font-normal">-</p>
                                                @endif

                                        </div>
                                    </div>
                                    <!-- =item= -->
                                    <div
                                        class="flex items-center gap-8 mt-3">
                                        <h4
                                            class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Religious') }}</h4>
                                        <div
                                            class="flex items-center gap-8">
                                            <p
                                                class="text-xs md:text-sm font-normal">:</p>
                                                @if ($religion)
                                                <p
                                                class="text-xs md:text-sm font-normal">{{$religion->name}}</p>
                                                @else
                                                <p
                                                class="text-xs md:text-sm font-normal">-</p>
                                                @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>



                            </div>
                        </div>
                        <!-- =small-device-description= -->
                        <p
                            class="text-xs md:text-sm font-normal text-black mt-5 xs:hidden">Een
                            Jongeman die van gezelligheid houdt en
                            van elk moment van het leven wilt
                            genieten. Een echte
                            levensgenieter dus. Ik ben een persoon
                            die alles uit het leven wilt halen. Ik
                            ben een spontane, ambitieuze jongeman.
                            Altijd opzoek naar de</p>
                        <div class="w-full mt-3 2xl:hidden">
                            <!-- =item= -->
                            <div class="flex items-center gap-8">
                                <h4
                                    class="text-xs md:text-sm font-medium w-[100px]">Relatie
                                    status</h4>
                                <div
                                    class="flex items-center gap-8">
                                    <p
                                        class="text-xs md:text-sm font-normal">:</p>
                                    <p
                                        class="text-xs md:text-sm font-normal">Single
                                        - nooit getrouwd</p>
                                </div>
                            </div>
                            <!-- =item= -->
                            <div
                                class="flex items-center gap-8 mt-3">
                                <h4
                                    class="text-xs md:text-sm font-medium w-[100px]">Religie</h4>
                                <div
                                    class="flex items-center gap-8">
                                    <p
                                        class="text-xs md:text-sm font-normal">:</p>
                                    <p
                                        class="text-xs md:text-sm font-normal">Hindoe</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="w-full mt-6">
                        <!-- =content= -->
                        <div
                            class="flex gap-3.5 sm:gap-5 items-center">

                            <picture>
                                <a href="#"
                                class="text-center text-black max-w-[400px] w-full "
                                data-id="{{ encrypt($match->id) }}"
                                data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">
                                <img
                                    src="{{ $profileImageData['image_url'] }}"
                                    alt="image" loading="lazy"
                                    class="min-w-[120px] h-[120px] xs:min-w-[160px] xs:h-[160px] rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} profile-link">
                                </a>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -77px; margin-left:40px;" class="ask-for-image-link absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                                     data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512">
                                        <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
                                    </svg>
                                </div>
                            @endif
                        </picture>

                        <style>
                            /* Ensure the eye icon is centered */
                            .ask-for-image-link {
                                position: absolute;
                                top: 22%;
                                left: 9%;
                            }

                            /* Mobile responsiveness */
                            @media (max-width: 768px) {
                                .ask-for-image-link svg {
                                    width: 30px; /* Adjust the icon size for smaller screens */
                                }
                            }
                        </style>
                            <div class="text-black w-full">
                                <!-- =upper-text= -->
                                <div
                                    class="flex items-center gap-3.5 justify-between flex-wrap">
                                    <div
                                        class="flex items-start md:items-center gap-3.5">
                                        <span
                                            class="min-w-[14px] h-3.5 bg-red-color"></span>
                                        <h3
                                            class="flex items-center font-medium gap-2.5 flex-wrap">
                                            <a href="#"
                                                class="text-xs md:text-base lg:text-[20px] duration-300 hover:text-red-color font-semibold">{{ $match->first_name }} {{ $match->last_name }}</a>
                                            <span
                                                class="text-xs md:text-base lg:text-lg font-normal">{{ $match->age }} {{ translate('Years Old') }}, {{$match->userDetails->country->name ?? '' }}, {{ $match->userDetails->city->name ?? '' }}</span>
                                        </h3>
                                    </div>

                                </div>
                                <p
                                    class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">
                                   {{$match->short_description}}</p>

                                <div
                                    class="w-full hidden 2xl:block">
                                    @php
                                         if($match->relation_status_id != null){
                                        $relationStatus=App\Models\ProfileAttributeMeta::where('id', $match->relation_status_id)->first();
                                    }
                                    else{
                                        $relationStatus=null;
                                    }

                                    if($user->religion_id != null){
                                        $religion=App\Models\ProfileAttributeMeta::where('id', $match->religion_id)->first();
                                    }
                                    else{
                                        $religion=null;
                                    }

                                    @endphp

                                    <div
                                        class="flex items-center gap-8">
                                        <h4
                                            class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Relation status') }}</h4>
                                        <div
                                            class="flex items-center gap-8">
                                            <p
                                                class="text-xs md:text-sm font-normal">:</p>
                                                @if ($relationStatus)
                                                <p
                                                class="text-xs md:text-sm font-normal">{{$relationStatus->name}}</p>
                                                @else
                                                <p
                                                class="text-xs md:text-sm font-normal">-</p>
                                                @endif

                                        </div>
                                    </div>
                                    <!-- =item= -->
                                    <div
                                        class="flex items-center gap-8 mt-3">
                                        <h4
                                            class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Religious') }}</h4>
                                        <div
                                            class="flex items-center gap-8">
                                            <p
                                                class="text-xs md:text-sm font-normal">:</p>
                                                @if ($religion)
                                                <p
                                                class="text-xs md:text-sm font-normal">{{$religion->name}}</p>
                                                @else
                                                <p
                                                class="text-xs md:text-sm font-normal">-</p>
                                                @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>

                            </div>
                        </div>
                        <!-- =small-device-description= -->
                        <p
                            class="text-xs md:text-sm font-normal text-black mt-5 xs:hidden">{{$match->short_description}}</p>
                        <div class="w-full mt-3 2xl:hidden">
                            <!-- =item= -->
                            <div class="flex items-center gap-8 mt-3">
                                <h4
                                    class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Relation status') }}
                                    </h4>
                                <div
                                    class="flex items-center gap-8">
                                    <p
                                        class="text-xs md:text-sm font-normal">:</p>
                                        @if ($relationStatus)
                                        <p
                                        class="text-xs md:text-sm font-normal">{{$relationStatus->name}}</p>
                                        @else
                                        <p
                                        class="text-xs md:text-sm font-normal">-</p>
                                        @endif
                                </div>
                            </div>
                            <!-- =item= -->
                            <div
                                class="flex items-center gap-8 mt-3">
                                <h4
                                    class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Religious') }}</h4>
                                <div
                                    class="flex items-center gap-8">
                                    <p
                                        class="text-xs md:text-sm font-normal">:</p>

                                        @if ($religion)
                                        <p
                                        class="text-xs md:text-sm font-normal">{{$religion->name}}</p>
                                        @else
                                        <p
                                        class="text-xs md:text-sm font-normal">-</p>
                                        @endif



                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                   @endif
                </div>
                @endif



                @if (session('GridStyle5') == 'list' || session('GridStyle5') == 'grid')
                <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                    @if ($matches->onFirstPage())
                        <span class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</span>
                    @else
                        <a href="{{ $matches->previousPageUrl() }}" class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</a>
                    @endif

                    <a href="#" class="rounded-full w-10 h-10 flex items-center justify-center bg-blue-color text-white font-semibold text-sm duration-300 hover:bg-red-color">{{ $matches->currentPage() }}</a>

                    @if ($matches->hasMorePages())
                        <a href="{{ $matches->nextPageUrl() }}" class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</a>
                    @else
                        <span class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</span>
                    @endif
                </div>
                @endif



                @if (session('GridStyle5') == 'map_view')
                <div class="w-full px-6 pt-[60px] flex items-start gap-5 mt-6 relative flex-col-reverse sm:flex-row">
                    <div class="w-full sm:flex-1">

                        <div class="w-full sm:h-[600px] sm:overflow-y-auto customize_scrollbar sm:pr-2">
                            <div
                                class="grid grid-cols-1 min-[450px]:grid-cols-2 gap-5 min-[650px]:grid-cols-3 sm:grid-cols-2 xl:grid-cols-3">

                                @if ($matches->isEmpty())
                                    <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                                @else
                                    @foreach($matches as $match)
                                        @php
                                            $isLiked = $likedProfiles->contains('id', $match->id);
                                            $profileImageData = getProfileImage($match);
                                        @endphp
                                        @if ($userpackage)
                                                <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                                                    class="relative rounded-[5px] overflow-hidden max-w-[400px] group w-full"
                                                    data-latitude="{{ $match->latitude }}"
                                                    data-longitude="{{ $match->longitude }}"
                                                    data-name="{{ $match->first_name }} {{ $match->last_name }}"
                                                    onclick="showUserLocation(this)">
                                                    <picture>
                                                        <img src="{{ $profileImageData['image_url'] }}"
                                                            alt="image"
                                                            class="w-full group-hover:scale-105 duration-300 {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}"
                                                            loading="lazy">
                                                    </picture>
                                                    @if($profileImageData['is_blurred'])
                                                    <div style="margin-top: -100px; margin-left:50px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
                                                    </div>
                                                    @endif
                                                    <h5 class="absolute left-0 right-0 flex items-center justify-center bottom-5 text-white text-md font-semibold capitalize profile-link whitespace-nowrap overflow-hidden text-ellipsis">
                                                        {{ $match->first_name }} {{ $match->last_name }}
                                                    </h5>
                                                </a>
                                        @else
                                        <a href="#"
                                                data-id="{{ encrypt($match->id) }}"
                                                data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}"   class="relative rounded-[5px] overflow-hidden max-w-[400px] group w-full">
                                            <picture>
                                                    <img
                                                        src="{{ $profileImageData['image_url'] }}"
                                                        alt="image"
                                                        class="w-full group-hover:scale-105 duration-300 {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} profile-link"
                                                        loading="lazy">
                                                </picture>
                                                @if($profileImageData['is_blurred'])
                                                <div class="ask-for-image-link" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512">
                                                        <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
                                                    </svg>
                                                </div>
                                                @endif

                                            <h5
                                                class="absolute left-0 right-0 flex items-center justify-center bottom-5 text-white text-md font-semibold capitalize profile-link whitespace-nowrap overflow-hidden text-ellipsis">
                                                {{ $match->first_name }} {{ $match->last_name }}</h5>
                                        </a>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>

                        <style>
                            /* Ensure the eye icon is centered */
                            .ask-for-image-link {
                                position: absolute;
                                top: 40%;
                                left: 33%;
                            }

                            /* Mobile responsiveness */
                            @media (max-width: 768px) {
                                .ask-for-image-link svg {
                                    width: 30px; /* Adjust the icon size for smaller screens */
                                }
                            }
                        </style>

                        <!-- ==pages== -->
                        <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                            @if ($matches->onFirstPage())
                                <span class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</span>
                            @else
                                <a href="{{ $matches->previousPageUrl() }}" class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</a>
                            @endif

                            <a href="#" class="rounded-full w-10 h-10 flex items-center justify-center bg-blue-color text-white font-semibold text-sm duration-300 hover:bg-red-color">{{ $matches->currentPage() }}</a>

                            @if ($matches->hasMorePages())
                                <a href="{{ $matches->nextPageUrl() }}" class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</a>
                            @else
                                <span class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</span>
                            @endif
                        </div>
                    </div>
                    <!-- =right-part= -->
                    <div class="w-full h-[300px] sm:w-[250px] sm:h-[400px] md:w-[300px] md:h-[500px] lg:w-[350px] lg:h-[600px] xl:w-[400px] xl:h-[700px] sm:sticky right-0 top-0 rounded-[5px] flex items-center justify-center sm:block">
                    <div id="map" class="w-full h-full rounded-lg"></div>
                </div>
                @endif





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

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


@php
    $usersWithLocation = $matches->filter(function ($match) {
        return $match->latitude && $match->longitude;
    });
@endphp

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Initialize Leaflet Map
    let map = L.map('map').setView([0, 0], 2); // Default center and zoom

    // Add OpenStreetMap layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    // Add user markers with location
    let markers = [];
    @foreach($usersWithLocation as $user)
        markers.push({
            name: "{{ $user->name }}",
            latitude: "{{ $user->latitude }}",
            longitude: "{{ $user->longitude }}"
        });
    @endforeach

    // Loop through all markers and add them to the map
    markers.forEach(user => {
        L.marker([user.latitude, user.longitude]).addTo(map)
            .bindPopup(`<b>${user.name}</b>`)
            .openPopup();
    });

    // Center map around all markers
    if (markers.length > 0) {
        let group = L.featureGroup(markers.map(m => L.marker([m.latitude, m.longitude])));
        map.fitBounds(group.getBounds());
    }
</script>

<script>
    // Grid Button Click
    document.getElementById('grid_btn').addEventListener('click', function () {
        updateSession('grid');
    });

    // List Button Click
    document.getElementById('list_btn').addEventListener('click', function () {
        updateSession('list');
    });

    document.getElementById('map_btn').addEventListener('click', function () {
        updateSession('map_view');
    });



    // Function to Update Session
    function updateSession(style) {
        fetch("{{ route('updateGridStyle5') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ GridStyle5: style })
        }).then(response => {
            if (response.ok) {
                location.reload(); // Reload to apply changes
            }
        });
    }
</script>

<script>
document.querySelectorAll('.profile-link').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent the default action
        const hasPackage = this.getAttribute('data-package') === 'true';

        if (!hasPackage) {
            Swal.fire({
                title: "Subscription Required",
                text: "Please subscribe to a package to see this profile. Would you like to subscribe now?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, subscribe",
                cancelButtonText: "Cancel",
                customClass: {
                    confirmButton: 'swal-black-button', // Apply custom class to the Yes button
                    cancelButton: 'swal-black-button'   // Apply custom class to the Cancel button
                },
                buttonsStyling: false // Disable default SweetAlert2 button styling
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ route('subscribe.package') }}"; // Redirect to subscription page
                }
            });
        } else {
            const profileId = this.getAttribute('data-id');
            window.location.href = `{{ url('partner-profile') }}/${profileId}`; // Redirect to the profile page
        }
    });
});


</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Attach click event to the ask-for-image link
        const askLinks = document.querySelectorAll('.ask-for-image-link');

        askLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // Get the user_id and image_id from the data attributes of the clicked link
                const userId = this.getAttribute('data-user-id');
                const imageId = this.getAttribute('data-image-id');

                // SweetAlert2 confirmation prompt
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You are requesting to see this user's image.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, ask for image',
                    cancelButtonText: 'Cancel',
                    customClass: {
                        confirmButton: 'swal-btn-yes',
                        cancelButton: 'swal-btn-cancel',
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Send the data to the server via AJAX
                        fetch('{{ route('storeImageRequest') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            },
                            body: JSON.stringify({
                                user_id: userId,
                                image_id: imageId
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Show success message with SweetAlert2
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Request Sent!',
                                    text: 'Your request has been sent successfully.',
                                });
                            } else {
                                // Show error message
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Something went wrong',
                                    text: 'Please try again later.',
                                });
                            }
                        })
                        .catch(error => {
                            // Handle any errors
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'There was an issue processing your request.',
                            });
                        });
                    }
                });
            });
        });
    });
</script>

@endpush

<style>
    .blur-image {
   filter: blur(10px);
   transition: filter 0.3s ease;
}
.blur-image:hover {
   filter: blur(10px);
   cursor: not-allowed;
}

   .swal-black-button {
   background-color: black !important;
   color: white !important;
   border: none !important;
   margin: 4px !important;
   padding: 10px 20px !important;
   font-size: 16px !important;
   border-radius: 5px !important;
   box-shadow: none !important;
   cursor: pointer;
}

.swal-black-button:hover {
   background-color: #333 !important;
}

/* Custom styling for the Yes button */
.swal-btn-yes {
   background-color: black !important;
   color: white !important;
   border: 1px solid black !important;
}

/* Custom styling for the Cancel button */
.swal-btn-cancel {
   background-color: grey !important;
   color: white !important;
   border: 1px solid grey !important;
}


</style>