@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - My Liked') }}</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 style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>
                @foreach($pages as $page)
                <div class="text-black mt-5">
                    <h3 class="text-[22px] sm:text-2xl lg:text-3xl xl:text-[36px] font-semibold mb-2">{{ translate('Who\'s Liked Me') }}</h3>
                    <p class="text-xs md:text-sm xl:mt-0 lg:text-base font-normal">{!! $page->content !!}</p>
                </div>
                @endforeach

                <style>
                    @media (max-width: 768px) {
                    .text-black.mt-5 {
                        margin-top: 90px !important;
                    }
                    }
                </style>

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


                <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= -->
                     
                        <!-- =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;"
                                            src="{{ $profileImageData['image_url'] }}"
                                            alt="image" loading="lazy"
                                            class="w-full {{ $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>
                                    <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
                                                data-id="{{ $match->id }}">
                                            <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>
                                </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;"
                                            src="{{ $profileImageData['image_url'] }}"
                                            alt="image" loading="lazy"
                                            class="w-full {{ $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>
                                    <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
                                                data-id="{{ $match->id }}">
                                            <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>
                                </a>
                            @endif
                        @endforeach
                    @endif
                </div>
                @endif



                @if (session('GridStyle5') == 'list')
                <div id="list_view"  class="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">
                            <!-- =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 style="border-radius:20px;"
                                        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
                                <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 whitespace-nowrap overflow-hidden text-ellipsis">
                                                    {{ $match->first_name }} {{ $match->last_name }}</a>
                                                <span
                                                    class="text-xs md:text-base lg:text-lg font-normal whitespace-nowrap overflow-hidden text-ellipsis">
                                                    {{ $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
                                        <!-- =item= -->
                                        <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>
                            </div>
                    @else
                    <div class="w-full">
                        <!-- =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 style="border-radius:20px;"
                                    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: 25%;
                                    left: 6%;
                                }

                                /* 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 whitespace-nowrap overflow-hidden text-ellipsis">
                                                {{ $match->first_name }} {{ $match->last_name }}</a>
                                            <span
                                                class="text-xs md:text-base lg:text-lg font-normal whitespace-nowrap overflow-hidden text-ellipsis">
                                                {{ $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 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

                                    <!-- =item= -->
                                    <div class="flex items-center gap-8 mt-3">
                                        <h4  class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Relation') }}</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-3 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-1 pt-[60px] flex items-start gap-5 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>
                    <style>
                        #map {
                            z-index: 1;
                            position: relative; /* Ensure z-index applies */
                        }
                    </style>
                </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 src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const currentUserId = {{ auth()->id() }};
        const notificationContainer = document.getElementById('notification-container');

        // Initialize Ably
        const ably = new Ably.Realtime('{{ env('ABLY_KEY') }}');
        const notificationChannel = ably.channels.get(`notifications.${currentUserId}`);

        console.log(`Subscribed to Ably channel: notifications.${currentUserId}`);

        // Function to format the time based on the user's local timezone
        function formatTime(createdAt) {
            const createdTime = new Date(createdAt);
            return createdTime.toLocaleTimeString([], {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false // Removes AM/PM
            });
        }

        // Function to get relative time (like "x minutes ago")
        function getTimeAgo(createdAt) {
          
            const createdTime = new Date(createdAt);
            const now = new Date();
            const secondsAgo = Math.floor((now - createdTime) / 1000);

            if (secondsAgo < 60) {
                return `${secondsAgo} seconds ago`;
            } else if (secondsAgo < 3600) {
                const minutesAgo = Math.floor(secondsAgo / 60);
                return `${minutesAgo} minutes ago`;
            } else if (secondsAgo < 86400) {
                const hoursAgo = Math.floor(secondsAgo / 3600);
                return `${hoursAgo} hours ago`;
            } else {
                const daysAgo = Math.floor(secondsAgo / 86400);
                return `${daysAgo} days ago`;
            }
        }

        // Function to create notification element
        function createNotificationElement(notification) {
            const formattedTime = formatTime(notification.created_at); // Call formatTime
            const timeAgo = getTimeAgo(notification.created_at); // Call getTimeAgo

            const notificationElement = document.createElement('div');
            notificationElement.classList.add('notification-item');

            const closeButton = document.createElement('span');
            closeButton.textContent = '×';
            closeButton.classList.add('close-btn');
            closeButton.onclick = function () {
                markAsRead(notification.id);
                notificationElement.remove();
            };

            notificationElement.innerHTML = `
                <p style="color: white; font-size:14px; padding-right:20px;">${notification.message}</p>
                <span style="color: white; font-size: 0.8em;">
                    ${formattedTime} (${timeAgo})
                </span>
            `;

            notificationElement.appendChild(closeButton);
            return notificationElement;
        }

        // Mark notification as read
        function markAsRead(notificationId) {
            axios.patch(`{{ url('/notifications/') }}/${notificationId}/read`)
                .then(response => {
                    console.log('Notification marked as read:', response.data);
                })
                .catch(error => console.error("Error marking notification as read:", error));
        }

        // Handle new notifications from Ably channel
        notificationChannel.subscribe('new-notification', (message) => {
            // Convert the created_at time to a JavaScript Date object
            const createdAt = new Date(message.data.created_at);

            // Format the created_at time based on the user's local timezone
            const formattedTime = createdAt.toLocaleString([], {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                hour12: true // This will show AM/PM if you need it
            });

            console.log("New notification received:", message.data);

            const newNotification = createNotificationElement(message.data);
            notificationContainer.appendChild(newNotification);

            setTimeout(() => {
                markAsRead(message.data.id);  // Mark notification as read
                newNotification.remove();      // Remove notification element
            }, 10000);  // 10 seconds
        });

        // Fetch existing notifications from API
        axios.get('{{ route('notifications.index') }}')
            .then(response => {
                const notifications = response.data.notifications;

                if (!Array.isArray(notifications)) {
                    throw new Error("Notifications data is not an array");
                }

                notifications.forEach(notification => {
                    if (notification && notification.id) {
                        const existingNotification = createNotificationElement(notification);
                        notificationContainer.appendChild(existingNotification);

                        // Automatically mark as read and close after 10 seconds
                        setTimeout(() => {
                            markAsRead(notification.id);  // Mark notification as read
                            existingNotification.remove(); // Remove notification element
                        }, 10000);  // 10 seconds
                    } else {
                        console.error("Invalid notification data", notification);
                    }
                });
            })
            .catch(error => {
                console.error("Error fetching notifications:", error);
            });
    });
</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;
}

.notification-item {
    background-color: #3576AF;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    position: relative;
}
.close-btn {
    position: absolute;
    top: -6px;
    font-size: 21px;
    right: 3px;
    cursor: pointer;
    color: rgb(245 245 245);
}

</style>