@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Notification') }}</title>
<style>
    .bell-red{

    }
</style>

@section('content')

<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">

       

        <!-- ===right-all-content/main-wrapper== -->
        <div class="left_navigation_part" data-screen-small-wrapper2>
            <ul class="w-full flex flex-col gap-2.5">

                <!-- Recvied -->
                <li id="recviedBtn" class="bg-[rgba(53,118,175,0.10)] rounded-[5px] relative">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.6673 17.5V15.8333C16.6673 14.9493 16.3161 14.1014 15.691 13.4763C15.0659 12.8512 14.218 12.5 13.334 12.5H6.66732C5.78326 12.5 4.93542 12.8512 4.31029 13.4763C3.68517 14.1014 3.33398 14.9493 3.33398 15.8333V17.5" stroke="#000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.99935 9.16667C11.8403 9.16667 13.3327 7.67428 13.3327 5.83333C13.3327 3.99238 11.8403 2.5 9.99935 2.5C8.1584 2.5 6.66602 3.99238 6.66602 5.83333C6.66602 7.67428 8.1584 9.16667 9.99935 9.16667Z" stroke="#000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </span>
                        <p class="text-xs font-semibold ">{{ translate('Received') }}</p>
                        @if ($likeNotificationsCount > 0)
                        <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));  position: absolute;
                            right: 48px;
                            display: flex;
                            height: 1.25rem;
                            width: 1.25rem;
                            align-items: center;
                            justify-content: center;
                            border-radius: 9999px;
                            font-size: 0.75rem;
                            line-height: 1rem;
                            font-weight: 600;
                            --tw-text-opacity: 1;
                            color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $likeNotificationsCount }}</span>
                            @endif
                    </a>
                </li>

                <!-- Accepted -->
                <li id="acceptedBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Accepted') }}</p>
                        @if ($acceptCount > 0)
                        <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));  position: absolute;
                            right: 48px;
                            display: flex;
                            height: 1.25rem;
                            width: 1.25rem;
                            align-items: center;
                            justify-content: center;
                            border-radius: 9999px;
                            font-size: 0.75rem;
                            line-height: 1rem;
                            font-weight: 600;
                            --tw-text-opacity: 1;
                            color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $acceptCount }}</span>
                            @endif
                    </a>
                </li>

                <!-- Sent -->
                <li id="sentBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 12L12 21L3 12H9V3H15V12H21Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Sent') }}</p>
                        <i  class="fa fa-bell"></i>
                        @if ($myLikesRequestsCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));  position: absolute;
                        right: 48px;
                        display: flex;
                        height: 1.25rem;
                        width: 1.25rem;
                        align-items: center;
                        justify-content: center;
                        border-radius: 9999px;
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 600;
                        --tw-text-opacity: 1;
                        color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $myLikesRequestsCount }}</span>
                        @endif
                    </a>
                </li>

                <!-- Request -->
                <li id="requestBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2V22M12 2L8 6M12 2L16 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Request') }}</p>
                        <i  class="fa fa-bell"></i>
                        @if ($requestedImagesCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));  position: absolute;
                        right: 48px;
                        display: flex;
                        height: 1.25rem;
                        width: 1.25rem;
                        align-items: center;
                        justify-content: center;
                        border-radius: 9999px;
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 600;
                        --tw-text-opacity: 1;
                        color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $requestedImagesCount }}</span>
                        @endif


                    </a>
                </li>

                <!-- Trash -->
                <li id="trashBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3 6H5H21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Trash') }}</p>
                    </a>
                </li>

                <!-- small_navigation_button -->
                <button class="small_navigation_button" data-screen-small-button2>
                    <span class="active"><i
                            class="ri-menu-3-line"></i></span>
                    <span
                        class="close duration-300 hover:-rotate-90"><i
                            class="ri-close-large-line"></i></span>
                </button>

            </ul>
        </div>

        <!-- ===left-all-content/main-wrapper== -->
        <div class="w-full flex-1 bg-white">
            <!-- =header-section= -->
            @include('frontend.user.layouts.header2')
            <div style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>

            <!-- =small-device-left-navigation== -->
            <div class="sm:hidden px-6 w-full">
                <ul class="pt-6 w-full flex gap-2 min-w-full overflow-x-auto customize_scrollbar">
                    <!-- Recvied -->
                    <li id="recviedBtn" data-tab="recvied" class="responsive_tab_btn bg-[rgba(53,118,175,0.10)] rounded-[5px] relative">
                        <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.6673 17.5V15.8333C16.6673 14.9493 16.3161 14.1014 15.691 13.4763C15.0659 12.8512 14.218 12.5 13.334 12.5H6.66732C5.78326 12.5 4.93542 12.8512 4.31029 13.4763C3.68517 14.1014 3.33398 14.9493 3.33398 15.8333V17.5" stroke="#000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M9.99935 9.16667C11.8403 9.16667 13.3327 7.67428 13.3327 5.83333C13.3327 3.99238 11.8403 2.5 9.99935 2.5C8.1584 2.5 6.66602 3.99238 6.66602 5.83333C6.66602 7.67428 8.1584 9.16667 9.99935 9.16667Z" stroke="#000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                            <p class="text-xs font-semibold text-blue-color">{{ translate('Received') }}</p>
                            @if ($likeNotificationsCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));
                                right: 48px;
                                display: flex;
                                height: 1.25rem;
                                width: 1.25rem;
                                align-items: center;
                                justify-content: center;
                                border-radius: 9999px;
                                font-size: 0.75rem;
                                line-height: 1rem;
                                font-weight: 600;
                                --tw-text-opacity: 1;
                                color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $likeNotificationsCount }}</span>
                            @endif
                        </a>
                    </li>

                    <!-- Accepted -->
                    <li id="acceptedBtn" data-tab="accepted" class="responsive_tab_btn duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                        <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <p class="text-xs font-semibold text-black">{{ translate('Accepted') }}</p>
                            @if ($acceptCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));
                                right: 48px;
                                display: flex;
                                height: 1.25rem;
                                width: 1.25rem;
                                align-items: center;
                                justify-content: center;
                                border-radius: 9999px;
                                font-size: 0.75rem;
                                line-height: 1rem;
                                font-weight: 600;
                                --tw-text-opacity: 1;
                                color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $acceptCount }}</span>
                                @endif
                        </a>
                    </li>

                    <!-- Sent -->
                    <li id="sentBtn" data-tab="sent" class="responsive_tab_btn duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                        <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M21 12L12 21L3 12H9V3H15V12H21Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <p class="text-xs font-semibold text-black">{{ translate('Sent') }}</p>
                            @if ($myLikesRequestsCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));
                            right: 48px;
                            display: flex;
                            height: 1.25rem;
                            width: 1.25rem;
                            align-items: center;
                            justify-content: center;
                            border-radius: 9999px;
                            font-size: 0.75rem;
                            line-height: 1rem;
                            font-weight: 600;
                            --tw-text-opacity: 1;
                            color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $myLikesRequestsCount }}</span>
                            @endif
                        </a>
                    </li>

                    <!-- Request -->
                    <li id="requestBtn" data-tab="request" class="responsive_tab_btn duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                        <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2V22M12 2L8 6M12 2L16 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <p class="text-xs font-semibold text-black">{{ translate('Request') }}</p>
                             @if ($requestedImagesCount > 0)
                            <span  style=" --tw-bg-opacity: 1; background-color: rgb(237 20 125 / var(--tw-bg-opacity));
                        right: 48px;
                        display: flex;
                        height: 1.25rem;
                        width: 1.25rem;
                        align-items: center;
                        justify-content: center;
                        border-radius: 9999px;
                        font-size: 0.75rem;
                        line-height: 1rem;
                        font-weight: 600;
                        --tw-text-opacity: 1;
                        color: rgb(255 255 255 / var(--tw-text-opacity));" >{{ $requestedImagesCount }}</span>
                        @endif
                        </a>
                    </li>

                    <!-- Trash -->
                    <li id="trashBtn" data-tab="trash" class="responsive_tab_btn duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                        <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                            <span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3 6H5H21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <p class="text-xs font-semibold text-black">{{ translate('Trash') }}</p>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- recviedDiv -->
            <div id="recviedDiv" class="w-full px-6 mt-5 xl:pb-32">

                @forelse ($like_notifications as $like_notification)
                @php
                    $profileImageData = getProfileImage($like_notification->requestToUser);

                    if($like_notification->requestToUser->userDetails){
                    if($like_notification->requestToUser->userDetails->languages != null){

                        $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->requestToUser->userDetails->languages)->first();

                    }
                    else{
                        $language=null;
                    }
                        } else{
                        $language=null;
                    }

                @endphp
                <!-- =wrapper= -->
                <div class="w-full p-5">
                    <div class="border border-gray-300 rounded-[5px]">
                        <!-- Header Section -->
                        <div class="border-b border-gray-300 p-3 flex justify-between items-center">
                            <div class="text-sm font-semibold">{{ translate('You received a like from') }} {{$like_notification->requestToUser->name}}</div>
                            <p class="text-[13px] font-normal">{{ formatDate($like_notification->created_at)}}</p>
                        </div>
                        <hr>
                        <!-- Main Content -->
                        <div class="p-4 flex gap-4 items-start">
                            <!-- Profile Image -->
                            <div class="w-16 h-16 rounded-full">
                                <picture>
                                    <img style="width:200px" src="{{ $profileImageData['image_url'] }}" alt="Dora's Profile" loading="lazy" class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -100px; margin-left:42px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $like_notification->requestToUser->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
                            </div>




                            <!-- Profile Details -->
                            <div class="flex-3">
                                <!-- Name and Status -->
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="mt-2 text-lg font-semibold text-black">
                                            {{$like_notification->requestToUser->name}} <span class="text-sm text-gray-400">&#x2705;</span>
                                        </div>
                                        <div class="mt-1 text-sm text-green-500">
                                            {{ translate('Online 1d ago') }}
                                        </div>
                                    </div>
                                </div>
                                <!-- Personal Details -->
                                <p class="mt-3 text-sm text-gray-700">
                                    {{ $like_notification->requestToUser->age }} Years Old|@if($like_notification->requestToUser->userDetails)
                                    @if($like_notification->requestToUser->userDetails->language)
                                    {{ $language->name}}
                                    @else
                                        N/A
                                    @endif
                                    @else
                                    N/A
                                @endif
                                </p>
                                <!-- Message -->
                                <p class="mt-2 text-sm text-gray-700">
                                    ✉ {{ translate('Hi, it is nice connecting with you. I liked your profile and would like to take this forward.') }}'
                                </p>
                            </div>

                            <!-- Action Buttons -->
                            <div class="mt-4 flex flex-col items-start gap-2">
                                <!-- Invitation Text -->
                                <p class="text-sm text-gray-700 font-normal">
                                    {{ translate('She invited you to Connect') }}
                                </p>
                                @if ($like_notification->status==null)
                                <div class="flex gap-2">
                                    <!-- Accept Button -->
                                    <a href="{{ route('accept_like_request', ['id' => ($like_notification->id)]) }}" style="background-color: green;" class="bg-green-500 hover:bg-green-600 text-white text-xs font-medium py-1 px-3 rounded-[5px] shadow">
                                        {{ translate('Accept') }}
                                    </a>
                                    <!-- Decline Button -->
                                    <a href="{{ route('decline_like_request', ['id' => ($like_notification->id)]) }}" style="color: red; border-color: red;" class="bg-white hover:bg-red-100 text-red-500 text-xs font-medium py-1 px-3 border border-red-300 rounded-[5px] shadow">
                                        {{ translate('Decline') }}
                                    </a>
                                </div>
                            </div>
                            @endif
                        </div>

                       <!-- Footer Buttons -->
                    <div class="p-4 flex flex-wrap gap-3 border-t border-gray-300 lg:ml-[170px] sm:justify-center">
                        <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->requestToUser->id)]) }}"
                        class="bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                            {{ translate('View my Profile') }}
                        </a>
                        @if (in_array($like_notification->requestToUser->id, $reportedUserIds->toArray()))
                            <!-- Reported button -->
                            
                            <button class="bg-gray-300 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow" disabled>
                                {{ translate('Reported') }}
                            </button>
                        @else
                            <!-- Report button -->
                            <a href="javascript:void(0);"
                            data-id="{{ encrypt($like_notification->requestToUser->id) }}"
                            class="report_profile bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                {{ translate('Report This Profile') }}
                            </a>
                        @endif
                    </div>

                    </div>
                </div>

                @empty
                <!-- Message when there are no notifications -->
                <div class="w-full p-5 text-center text-gray-500">
                    {{ translate('No record found') }}
                </div>
            @endforelse
            </div>

            <!-- acceptedDiv -->
            <div style="display: none;" id="acceptedDiv" class="w-full px-6 pb-[60px] xl:pb-32">


                @if($accept_likes_fromMe->isEmpty() && $accept_likes_from_request_users->isEmpty())
                <div class="w-full p-5 text-center text-gray-500">
                    {{ translate('No record found') }}
                </div>
                @else

                @foreach ($accept_likes_fromMe as $like_notification)
                @php
                    $profileImageData = getProfileImage($like_notification->requestToUser);

                    if($like_notification->requestToUser->userDetails){
                    if($like_notification->requestToUser->userDetails->languages != null){

                        $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->requestToUser->userDetails->languages)->first();

                    }
                    else{
                        $language=null;
                    }
                        } else{
                        $language=null;
                    }

                @endphp
                <!-- =wrapper= -->
                <div class="w-full p-5">
                    <div class="border border-gray-300 rounded-[5px]">
                        <!-- Header Section -->
                        <div class="border-b border-gray-300 p-3 flex justify-between items-center">
                            <div class="text-sm font-semibold">You received a like from {{$like_notification->requestToUser->name}}</div>
                            <p class="text-[13px] font-normal">{{ formatDate($like_notification->created_at)}}</p>
                        </div>
                        <hr>
                        <!-- Main Content -->
                        <div class="p-4 flex gap-4 items-start">
                            <!-- Profile Image -->
                            <div class="w-16 h-16 rounded-full">
                                <picture>
                                    <img style="width:200px" src="{{ $profileImageData['image_url'] }}" alt="Profile" loading="lazy" class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -100px; margin-left:42px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $like_notification->requestToUser->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
                            </div>


                            <!-- Profile Details -->
                            <div class="flex-3">
                                <!-- Name and Status -->
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="mt-2 text-lg font-semibold text-black">
                                            {{$like_notification->requestToUser->name}} <span class="text-sm text-gray-400">&#x2705;</span>
                                        </div>
                                        <div class="mt-1 text-sm text-green-500">
                                            {{ translate('Online 1d ago') }}
                                        </div>
                                    </div>
                                </div>
                                <!-- Personal Details -->
                                <p class="mt-3 text-sm text-gray-700">
                                    {{ $like_notification->requestToUser->age }} Years Old|@if($like_notification->requestToUser->userDetails)
                                    @if($like_notification->requestToUser->userDetails->language)
                                    {{ $language->name}}
                                    @else
                                        N/A
                                    @endif
                                    @else
                                    N/A
                                @endif
                                </p>
                                <!-- Message -->
                                <p class="mt-2 text-sm text-gray-700">
                                    ✉ {{ translate('Hi, it is nice connecting with you. I liked your profile and would like to take this forward.') }}
                                </p>
                            </div>

                            @if ($like_notification->status==1)
                            <div class="my-3 text-[13px] font-normal ">
                                <a href="{{route('messenger', ['id' => $like_notification->requestToUser->id]) }}"
                                    class="py-2.5 px-4 sm:px-5 rounded-[5px] bg-blue-color text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap text-sm">{{ translate('Send
                                    Message') }}</a>
                            </div>
                            @endif

                        </div>

                       <!-- Footer Buttons -->
                        <div class="p-4 flex flex-wrap gap-3 border-t border-gray-300 lg:ml-[170px] sm:justify-center">
                            <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->requestToUser->id)]) }}"
                            class="bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                {{ translate('View my Profile') }}
                            </a>
                            @if (in_array($like_notification->requestToUser->id, $reportedUserIds->toArray()))
                                <!-- Reported button -->
                                <button class="bg-gray-300 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow" disabled>
                                    {{ translate('Reported') }}
                                </button>
                            @else
                                <!-- Report button -->
                                <a href="javascript:void(0);"
                                data-id="{{ encrypt($like_notification->requestToUser->id) }}"
                                class="report_profile bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                    {{ translate('Report This Profile') }}
                                </a>
                            @endif
                        </div>

                    </div>
                </div>

                @endforeach


                @foreach ($accept_likes_from_request_users as $like_notification)
                @php
                    $profileImageData = getProfileImage($like_notification->myrequestToUser);



                    if($like_notification->myrequestToUser->userDetails){
                    if($like_notification->myrequestToUser->userDetails->languages != null){

                        $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->myrequestToUser->userDetails->languages)->first();

                    }
                    else{
                        $language=null;
                    }
                        } else{
                        $language=null;
                    }

                @endphp
                <!-- =wrapper= -->
                <div class="w-full p-5">
                    <div class="border border-gray-300 rounded-[5px]">
                        <!-- Header Section -->
                        <div class="border-b border-gray-300 p-3 flex justify-between items-center">
                            <div class="text-sm font-semibold">{{ translate('You Send a like to') }} {{$like_notification->myrequestToUser->name}}</div>
                            <p class="text-[13px] font-normal">{{ formatDate($like_notification->created_at)}}</p>
                        </div>
                        <hr>
                        <!-- Main Content -->
                        <div class="p-4 flex gap-4 items-start">
                            <!-- Profile Image -->
                            <div class="w-16 h-16 rounded-full">
                                <picture>
                                    <img style="width:200px" src="{{ $profileImageData['image_url'] }}" alt="Dora's Profile" loading="lazy" class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -100px; margin-left:42px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $like_notification->myrequestToUser->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
                            </div>


                            <!-- Profile Details -->
                            <div class="flex-3">
                                <!-- Name and Status -->
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="mt-2 text-lg font-semibold text-black">
                                            {{$like_notification->myrequestToUser->name}} <span class="text-sm text-gray-400">&#x2705;</span>
                                        </div>
                                        <div class="mt-1 text-sm text-green-500">
                                            {{ translate('Online 1d ago') }}
                                        </div>
                                    </div>
                                </div>
                                <!-- Personal Details -->
                                <p class="mt-3 text-sm text-gray-700">
                                    {{ $like_notification->myrequestToUser->age }} {{ translate('Years Old') }} | @if($like_notification->myrequestToUser->userDetails)
                                    @if($like_notification->myrequestToUser->userDetails->language)
                                    {{ $language->name}}
                                    @else
                                        N/A
                                    @endif
                                    @else
                                    N/A
                                @endif
                                </p>
                                <!-- Message -->
                                <p class="mt-2 text-sm text-gray-700">
                                    ✉ {{ translate('Hi, it is nice connecting with you. I liked your profile and would like to take this forward.') }}
                                </p>
                            </div>


                            @if ($like_notification->status == 1)
                            <div class="my-3 text-[13px] font-normal ">
                                <a href="{{ route('messenger', ['id' => $like_notification->myrequestToUser->id]) }}"
                                    class="py-2.5 px-4 sm:px-5 rounded-[5px] bg-blue-color text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap text-sm">
                                    {{ translate('Send Message') }}
                                </a>
                            </div>
                            @elseif ($like_notification->status == '0')

                                <a style="background: red;" href="#"
                                class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white">
                                    <span class="text-sm font-semibold">{{ translate('Decline') }}</span>
                                </a>

                                @elseif ($like_notification->status == null )

                                    <a href="#"
                                    class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black">
                                        <span class="text-sm font-semibold">{{ translate('Pending') }}</span>
                                    </a>
                                    @endif

                        </div>

                        <!-- Footer Buttons -->
                            <div class="p-4 flex flex-wrap gap-3 border-t border-gray-300 lg:ml-[170px] sm:justify-center">
                                <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->myrequestToUser->id)]) }}"
                                class="bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                    {{ translate('View my Profile') }}
                                </a>
                                @if (in_array($like_notification->myrequestToUser->id, $reportedUserIds->toArray()))
                                    <!-- Reported button -->
                                    <button class="bg-gray-300 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow" disabled>
                                        {{ translate('Reported') }}
                                    </button>
                                @else
                                    <!-- Report button -->
                                    <a href="javascript:void(0);"
                                    data-id="{{ encrypt($like_notification->myrequestToUser->id) }}"
                                    class="report_profile bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                        {{ translate('Report This Profile') }}
                                    </a>
                                @endif
                            </div>

                    </div>
                </div>

                @endforeach

                @endif

            </div>

            <!-- sentDiv -->
            <div style="display: none;" id="sentDiv" class="w-full px-6 pb-[60px] xl:pb-32">

                @forelse ($my_likes_requests as $like_notification)

                @php

                    $profileImageData = getProfileImage($like_notification->myrequestToUser);

                    if(isset($like_notification->myrequestToUser->userDetails)){
                    if($like_notification->myrequestToUser->userDetails->languages != null){

                        $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->myrequestToUser->userDetails->languages)->first();

                    }
                    else{
                        $language=null;
                    }
                        } else{
                        $language=null;
                    }

                @endphp
                <!-- =wrapper= -->
                @if ($like_notification->myrequestToUser!=null)
                <div class="w-full p-5">
                    <div class="border border-gray-300 rounded-[5px]">
                        <!-- Header Section -->
                        <div class="border-b border-gray-300 p-3 flex justify-between items-center">
                            <div class="text-sm font-semibold">{{ translate('You Send a like to') }} {{$like_notification->myrequestToUser->name}}</div>
                            <p class="text-[13px] font-normal">{{ formatDate($like_notification->created_at)}}</p>
                        </div>
                        <hr>
                        <!-- Main Content -->
                        <div class="p-4 flex gap-4 items-start">
                            <!-- Profile Image -->
                            <div class="w-16 h-16 rounded-full">
                                <picture>
                                    <img style="width:200px" src="{{ $profileImageData['image_url'] }}" alt="Dora's Profile" loading="lazy" class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -100px; margin-left:42px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $like_notification->myrequestToUser->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
                            </div>


                            <!-- Profile Details -->
                            <div class="flex-3">
                                <!-- Name and Status -->
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="mt-2 text-lg font-semibold text-black">
                                            {{$like_notification->myrequestToUser->name}} <span class="text-sm text-gray-400">&#x2705;</span>
                                        </div>
                                        <div class="mt-1 text-sm text-green-500">
                                            {{ translate('Online 1d ago') }}
                                        </div>
                                    </div>
                                </div>
                                <!-- Personal Details -->
                                <p class="mt-3 text-sm text-gray-700">
                                    {{ $like_notification->myrequestToUser->age }} {{ translate('Years Old') }} | @if($like_notification->myrequestToUser->userDetails)
                                    @if($like_notification->myrequestToUser->userDetails->language)
                                    {{ $language->name}}
                                    @else
                                        N/A
                                    @endif
                                    @else
                                    N/A
                                @endif
                                </p>
                                <!-- Message -->
                                <p class="mt-2 text-sm text-gray-700">
                                    ✉ {{ translate('Hi, it is nice connecting with you. I liked your profile and would like to take this forward.') }}
                                </p>
                            </div>


                            @if ($like_notification->status == 1)
                            <div class="my-3 text-[13px] font-normal ">
                                <a href="{{ route('messenger', ['id' => $like_notification->myrequestToUser->id]) }}"
                                    class="py-2.5 px-4 sm:px-5 rounded-[5px] bg-blue-color text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap text-sm">
                                    {{ translate('Send Message') }}
                                </a>
                            </div>
                            @elseif ($like_notification->status == '0')

                                <a style="background: red;" href="#"
                                class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white">
                                    <span class="text-sm font-semibold">{{ translate('Decline') }}</span>
                                </a>

                                @elseif ($like_notification->status == null )

                                    <a href="#"
                                    class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black">
                                        <span class="text-sm font-semibold">{{ translate('Pending') }}</span>
                                    </a>
                                    @endif

                        </div>

                       <!-- Footer Buttons -->
                            <div class="p-4 flex flex-wrap gap-3 border-t border-gray-300 lg:ml-[170px] sm:justify-center">
                                <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->myrequestToUser->id)]) }}"
                                class="bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                    {{ translate('View my Profile') }}
                                </a>
                                @if (in_array($like_notification->myrequestToUser->id, $reportedUserIds->toArray()))
                                    <!-- Reported button -->
                                    <button class="bg-gray-300 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow" disabled>
                                        {{ translate('Reported') }}
                                    </button>
                                @else
                                    <!-- Report button -->
                                    <a href="javascript:void(0);"
                                    data-id="{{ encrypt($like_notification->myrequestToUser->id) }}"
                                    class="report_profile bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                        {{ translate('Report This Profile') }}
                                    </a>
                                @endif
                            </div>

                    </div>
                </div>
                @endif


                @empty

                <div class="w-full p-5 text-center text-gray-500">
                    {{ translate('No record found') }}
                </div>
            @endforelse
            </div>

            <!-- requestDiv -->
            <div style="display: none;" id="requestDiv" class="w-full px-6 pb-[60px] xl:pb-32">
                @forelse ($requestedImages as $like_notification)
                @php

                    $profileImageData = getProfileImage($like_notification->imageUser);

                    if($like_notification->imageUser->userDetails){
                    if($like_notification->imageUser->userDetails->languages != null){

                        $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->imageUser->userDetails->languages)->first();

                    }
                    else{
                        $language=null;
                    }
                        } else{
                        $language=null;
                    }

                @endphp
                <!-- =wrapper= -->
                <div class="w-full p-5">
                    <div class="border border-gray-300 rounded-[5px]">
                        <!-- Header Section -->
                        <div class="border-b border-gray-300 p-3 flex justify-between items-center">
                            <div class="text-sm font-semibold">{{ translate('You received an image Request from') }} {{$like_notification->imageUser->name}}</div>
                            <p class="text-[13px] font-normal">{{ formatDate($like_notification->created_at)}}</p>
                        </div>
                        <hr>
                        <!-- Main Content -->
                        <div class="p-4 flex gap-4 items-start">
                            <!-- Profile Image -->
                            <div class="w-16 h-16 rounded-full">
                                <picture>
                                    <img style="width:200px" src="{{ $profileImageData['image_url'] }}" alt="Dora's Profile" loading="lazy" class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                </picture>
                                @if($profileImageData['is_blurred'])
                                <div style="margin-top: -100px; margin-left:42px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $like_notification->imageUser->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
                            </div>


                            <!-- Profile Details -->
                            <div class="flex-3">
                                <!-- Name and Status -->
                                <div class="flex justify-between items-center">
                                    <div>
                                        <div class="mt-2 text-lg font-semibold text-black">
                                            {{$like_notification->imageUser->name}} <span class="text-sm text-gray-400">&#x2705;</span>
                                        </div>
                                        <div class="mt-1 text-sm text-green-500">
                                            {{ translate('Online 1d ago') }}
                                        </div>
                                    </div>
                                </div>
                                <!-- Personal Details -->
                                <p class="mt-3 text-sm text-gray-700">
                                    {{ $like_notification->imageUser->age }} {{ translate('Years Old') }} | @if($like_notification->imageUser->userDetails)
                                    @if($like_notification->imageUser->userDetails->language)
                                    {{ $language->name}}
                                    @else
                                        N/A
                                    @endif
                                    @else
                                    N/A
                                @endif
                                </p>
                                <!-- Message -->
                                <p class="mt-2 text-sm text-gray-700">
                                    ✉ {{ translate('Hi, it is nice connecting with you. I liked your profile and would like to take this forward.') }}
                                </p>
                            </div>

                            <!-- Action Buttons -->
                            {{-- <div class="mt-4 flex flex-col items-start gap-2">

                                <div class="flex gap-2">
                                    @if ($like_notification->status==0)

                                    <button onclick="confirmAllow('{{ route('confirm.allowProfile', $like_notification->id) }}', {{ $like_notification->request_user_id}})" style="background-color: green;" class="bg-green-500 hover:bg-green-600 text-white text-xs font-medium py-1 px-3 rounded-[5px] shadow">
                                        {{ translate('Accept') }}
                                    </button>

                                    <button onclick="confirmDecline('{{ route('confirm.decline', $like_notification->id) }}', {{ $like_notification->request_user_id}})" style="color: red; border-color: red;" class="bg-white hover:bg-red-100 text-red-500 text-xs font-medium py-1 px-3 border border-red-300 rounded-[5px] shadow">
                                        {{ translate('Decline') }}
                                    </button>
                                    @elseif ($like_notification->status==1)
                                        <a href="#"
                                        class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black">
                                            <span class="text-sm font-semibold">{{ translate('Accepted') }}</span>
                                        </a>
                                        @elseif ($like_notification->status==2)
                                        <a style="background: red;" href="#"
                                            class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white">
                                                <span class="text-sm font-semibold">{{ translate('Decline') }}</span>
                                        </a>
                                    @endif

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

                            <!-- Action Buttons -->
                            <div class="mt-4 flex flex-col items-start gap-2">

                                <div class="flex gap-2 flex-wrap sm:flex-nowrap">
                                    @if ($like_notification->status == 0)
                                        <button
                                            onclick="confirmAllow('{{ route('confirm.allowProfile', $like_notification->id) }}', {{ $like_notification->request_user_id }})"
                                            style="background-color: green;"
                                            class="bg-green-500 hover:bg-green-600 text-white text-xs font-medium py-1 px-3 rounded-[5px] shadow w-full sm:w-auto">
                                            {{ translate('Accept') }}
                                        </button>

                                        <button
                                            onclick="confirmDecline('{{ route('confirm.decline', $like_notification->id) }}', {{ $like_notification->request_user_id }})"
                                            style="color: red; border-color: red;"
                                            class="bg-white hover:bg-red-100 text-red-500 text-xs font-medium py-1 px-3 border border-red-300 rounded-[5px] shadow w-full sm:w-auto">
                                            {{ translate('Decline') }}
                                        </button>
                                    @elseif ($like_notification->status == 1)
                                        <a href="#"
                                            class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black w-full sm:w-auto">
                                            <span class="text-sm font-semibold">{{ translate('Accepted') }}</span>
                                        </a>
                                    @elseif ($like_notification->status == 2)
                                        <a style="background: red;" href="#"
                                            class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white w-full sm:w-auto">
                                            <span class="text-sm font-semibold">{{ translate('Decline') }}</span>
                                        </a>
                                    @endif
                                </div>
                            </div>


                        </div>

                        <!-- Footer Buttons -->
                        <div class="p-4 flex flex-wrap gap-3 border-t border-gray-300 lg:ml-[170px] sm:justify-center">
                            <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->imageUser->id)]) }}"
                               class="bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                {{ translate('View my Profile') }}
                            </a>
                            @if (in_array($like_notification->imageUser->id, $reportedUserIds->toArray()))
                                <!-- Reported button -->
                                <button class="bg-gray-300 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow" disabled>
                                    {{ translate('Reported') }}
                                </button>
                            @else
                                <!-- Report button -->
                                <a href="javascript:void(0);"
                                   data-id="{{ encrypt($like_notification->imageUser->id) }}"
                                   class="report_profile bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px] shadow hover:bg-gray-200">
                                    {{ translate('Report This Profile') }}
                                </a>
                            @endif
                        </div>

                    </div>
                </div>

                @empty

                <div class="w-full p-5 text-center text-gray-500">
                    {{ translate('No record found') }}
                </div>
            @endforelse
            </div>

            <!-- trashDiv -->
            <div style="display: none;" id="trashDiv" class="w-full px-6 pb-[60px] xl:pb-32">
            </div>

        </div>

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


@endsection

@push('scripts')


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>



<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    const recviedBtn = document.getElementById('recviedBtn');
    const acceptedBtn = document.getElementById('acceptedBtn');
    const sentBtn = document.getElementById('sentBtn');
    const requestBtn = document.getElementById('requestBtn');
    const trashBtn = document.getElementById('trashBtn');


    const recviedDiv = document.getElementById('recviedDiv');
    const acceptedDiv = document.getElementById('acceptedDiv');
    const sentDiv = document.getElementById('sentDiv');
    const requestDiv = document.getElementById('requestDiv');
    const trashDiv = document.getElementById('trashDiv');


    // Set the default active tab based on the session variable
    let activeTab = "{{ session('showTab', 'recvied') }}"; // Default to 'editProfile' if not set

    // Function to update the visibility of all sections
    function updateTabVisibility() {

        // Hide all sections
        recviedDiv.style.display = 'none';
        acceptedDiv.style.display = 'none';
        sentDiv.style.display = 'none';
        requestDiv.style.display = 'none';
        trashDiv.style.display = 'none';

        // Show the active section responsive_tab_btn
        if (activeTab === 'recvied') {
            recviedDiv.style.display = 'block';
        } else if (activeTab === 'accepted') {
            acceptedDiv.style.display = 'block';
        } else if (activeTab === 'sent') {
            sentDiv.style.display = 'block';
        } else if (activeTab === 'request') {
            requestDiv.style.display = 'block';
        } else if (activeTab === 'trash') {
            trashDiv.style.display = 'block';
        }
    }

    // Function to update tab styles
    function updateTabStyles() {
        // Reset all button styles
        const allButtons = [recviedBtn, acceptedBtn, sentBtn, requestBtn, trashBtn];
        allButtons.forEach(btn => {
            btn.classList.remove('bg-[rgba(53,118,175,0.10)]');
            btn.classList.add('duration-300', 'hover:bg-[rgba(53,118,175,0.10)]');
        });

        // Highlight the active button
        if (activeTab === 'recvied') {
            recviedBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'accepted') {
            acceptedBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'sent') {
            sentBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'request') {
            requestBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'trash') {
            trashBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        }
    }

    // Event listner for each button of mobile view
    $('.responsive_tab_btn').on('click', function () {
        activeTab = $(this).data('tab');
        updateTabVisibility();

        $('.responsive_tab_btn').each(function () {
            $(this).removeClass('bg-[rgba(53,118,175,0.10)]');
            $(this).addClass('duration-300 hover:bg-[rgba(53,118,175,0.10)]');
        });

        $(this).addClass('bg-[rgba(53,118,175,0.10)]');

        $('.responsive_tab_btn p').removeClass('text-blue-color').addClass('text-black');
        $(this).find('p').removeClass('text-black').addClass('text-blue-color');
    });

    // Event listener for each button
    recviedBtn.addEventListener('click', function () {
        activeTab = 'recvied';
        updateTabVisibility();
        updateTabStyles();

    });

    acceptedBtn.addEventListener('click', function () {
        activeTab = 'accepted';
        updateTabVisibility();
        updateTabStyles();
    });

    sentBtn.addEventListener('click', function () {
        activeTab = 'sent';
        updateTabVisibility();
        updateTabStyles();
    });

    requestBtn.addEventListener('click', function () {
        activeTab = 'request';
        updateTabVisibility();
        updateTabStyles();
    });

    trashBtn.addEventListener('click', function () {
        activeTab = 'trash';
        updateTabVisibility();
        updateTabStyles();
    });

    // Initialize the tab visibility and styles
    updateTabVisibility();
    updateTabStyles();
    });
</script>

<script>
    $(document).on('click', '.report_profile', function (e) {
        e.preventDefault();

        // Get the user ID from the data attribute
        var userId = $(this).data('id');
        var button = $(this); // Reference to the button

        // SweetAlert2 confirmation prompt
        Swal.fire({
            title: 'Are you sure?',
            text: "You are reporting this user's profile.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, report profile',
            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('report_profile') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    },
                    body: JSON.stringify({ user_id: userId }),
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Show success message with SweetAlert2
                            Swal.fire({
                                icon: 'success',
                                title: 'Reported!',
                                text: 'The profile has been reported successfully.',
                            });

                            // Disable the button or update its text
                            button.text('Reported').addClass('disabled').removeClass('hover:bg-gray-200');
                            button.prop('disabled', true);
                        } 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>


<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>


<script>
    function confirmAllow(url, id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Allow it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `${url}`;
            }
        });
    }
</script>

<script>
    function confirmDecline(url, id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Allow it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `${url}`;
            }
        });
    }
</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>



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

/* 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);
}

/* .red{
    --tw-bg-opacity: 1;
    background-color: rgb(221 23 119);
    position: absolute;
    right: -1rem;
    top: -0.5rem;
    display: flex
;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
} */

</style>