@extends('frontend.layouts.UserMain')

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

@section('content')


<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <!-- ===right-all-content/main-wrapper== -->
        <div class="flex-1 bg-white">
            <!-- =header-section= -->

            @include('frontend.user.layouts.header')

             <!-- ===main-wrapper=== -->
             <div class="flex items-start justify-between relative">

                <div style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>
                <!-- =left/message-list= -->
                <div class="w-full sm:w-[300px] sm:min-w-[300px] sticky top-[73px] lg:z-20 bg-white  border-r-[1px] border-r-[#eaeaea]"  style="scrollbar-width: none;">
                    <div class="w-full p-4 pt-[90px] sm:pt-5">

                        <div class="flex items-center justify-between">
                            <a href="#" class="flex items-center gap-5">
                                <picture class="w-10 h-10 relative">
                                    <img src="{{ $user->profile_image ? asset('uploads/profileImage/' . $user->profile_image) : asset('uploads/profileImage/avatar.png') }}" alt="profile image" class="w-full h-full rounded-full object-cover">
                                    <span
                                        class="absolute right-0 bottom-0">
                                        <svg width="16" height="16"
                                            viewBox="0 0 16 16"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <g
                                                filter="url(#filter0_d_2139_241)">
                                                <circle cx="8"
                                                    cy="7" r="3"
                                                    fill="#10B981" />
                                                <circle cx="8"
                                                    cy="7" r="4.25"
                                                    stroke="white"
                                                    stroke-width="2.5" />
                                            </g>
                                            <defs>
                                                <filter
                                                    id="filter0_d_2139_241"
                                                    x="0.5" y="0.5"
                                                    width="15"
                                                    height="15"
                                                    filterUnits="userSpaceOnUse"
                                                    color-interpolation-filters="sRGB">
                                                    <feflood
                                                        flood-opacity="0"
                                                        result="BackgroundImageFix" />
                                                    <fecolormatrix
                                                        in="SourceAlpha"
                                                        type="matrix"
                                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                        result="hardAlpha" />
                                                    <feoffset
                                                        dy="1" />
                                                    <fegaussianblur
                                                        stdDeviation="1" />
                                                    <fecomposite
                                                        in2="hardAlpha"
                                                        operator="out" />
                                                    <fecolormatrix
                                                        type="matrix"
                                                        values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
                                                    <feblend
                                                        mode="normal"
                                                        in2="BackgroundImageFix"
                                                        result="effect1_dropShadow_2139_241" />
                                                    <feblend
                                                        mode="normal"
                                                        in="SourceGraphic"
                                                        in2="effect1_dropShadow_2139_241"
                                                        result="shape" />
                                                </filter>
                                            </defs>
                                        </svg>
                                    </span>
                                </picture>
                                <span
                                    class="text-sm font-semibold text-black whitespace-nowrap">{{Auth()->user()->name}}</span>
                            </a>
                            {{-- <button>
                                <svg width="24" height="24"
                                    viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g
                                        clip-path="url(#clip0_96_13876)">
                                        <path
                                            d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
                                            fill="#757575" />
                                    </g>
                                    <defs>
                                        <clippath
                                            id="clip0_96_13876">
                                            <rect width="24"
                                                height="24"
                                                fill="white" />
                                        </clippath>
                                    </defs>
                                </svg>
                            </button> --}}
                        </div>
                        <!-- =search-button= -->
                        <button
                            class="w-full rounded-[5px] border-[1px] border-[#e2e8f0] p-2.5 gap-2.5 flex items-center text-[#9a9da3] my-4">
                            <span class="text-lg"><i
                                    class="ri-search-line"></i></span>
                                    <input type="search" name="search" id="chatsearch" class="w-full text-sm font-normal placeholder:text-sm placeholder:font-normal placeholder:text-[#9a9da3] focus:outline-none" placeholder="Search or start new chat">

                        </button>
                    </div>
                    <!-- =cheat-box= -->
                    <div
                        class="w-full border-y-[1px] border-y-[#eaeaea] pt-4 h-[350px] overflow-y-auto"
                        style="scrollbar-width: thin;">
                        <h3
                            class="text-black text-lg font-medium px-4">{{ translate('Chats') }}</h3>


                            <div id="user-list">
                                @foreach ($chatusers as $chatuser)
                                    @php
                                        $profileImageData = getProfileImage($chatuser);
                                    @endphp
                                    <div class="user-item" data-name="{{ strtolower($chatuser->name) }}">
                                        <form action="{{ route('messenger', ['id' => $chatuser->id]) }}" method="get">
                                            <button type="submit" class="min-w-full flex" data-messagebox-open-button>
                                                <div class="flex items-center justify-between p-4 border-b-[1px] border-b-[#eaeaea] duration-300 hover:bg-[#eef0f5] relative w-full">
                                                    <div class="flex items-center gap-5">
                                                        <picture class="w-10 h-10 relative">
                                                            <img  src="{{ $profileImageData['image_url'] }}" alt="profile image" class="w-full h-full rounded-full object-cover {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                                            <span id="chat-match-{{ $chatuser->id }}" style="display: none;"
                                                            class="absolute right-0 bottom-0">
                                                            <svg width="16" height="16"
                                                                viewBox="0 0 16 16"
                                                                fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <g
                                                                    filter="url(#filter0_d_2139_241)">
                                                                    <circle cx="8"
                                                                        cy="7" r="3"
                                                                        fill="#10B981" />
                                                                    <circle cx="8"
                                                                        cy="7" r="4.25"
                                                                        stroke="white"
                                                                        stroke-width="2.5" />
                                                                </g>
                                                                <defs>
                                                                    <filter
                                                                        id="filter0_d_2139_241"
                                                                        x="0.5" y="0.5"
                                                                        width="15"
                                                                        height="15"
                                                                        filterUnits="userSpaceOnUse"
                                                                        color-interpolation-filters="sRGB">
                                                                        <feflood
                                                                            flood-opacity="0"
                                                                            result="BackgroundImageFix" />
                                                                        <fecolormatrix
                                                                            in="SourceAlpha"
                                                                            type="matrix"
                                                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                                            result="hardAlpha" />
                                                                        <feoffset
                                                                            dy="1" />
                                                                        <fegaussianblur
                                                                            stdDeviation="1" />
                                                                        <fecomposite
                                                                            in2="hardAlpha"
                                                                            operator="out" />
                                                                        <fecolormatrix
                                                                            type="matrix"
                                                                            values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
                                                                        <feblend
                                                                            mode="normal"
                                                                            in2="BackgroundImageFix"
                                                                            result="effect1_dropShadow_2139_241" />
                                                                        <feblend
                                                                            mode="normal"
                                                                            in="SourceGraphic"
                                                                            in2="effect1_dropShadow_2139_241"
                                                                            result="shape" />
                                                                    </filter>
                                                                </defs>
                                                            </svg>
                                                        </span>                                                    
                                                        </picture>
                                                        <div class="flex flex-col text-left">
                                                            <h4  class="text-sm font-semibold text-black whitespace-nowrap">{{ $chatuser->name }}</h4>
                                                            <p class="text-xs text-black font-medium opacity-50">  Last message:{{ formatDate($chatuser->last_message_time) }}</p>
                                                        </div>
                                                    </div>
                                                    {{-- @if ($chatuser->countmessage !=0)
                                                    <span class="w-5 h-5 rounded-full bg-blue-color text-white text-xs font-semibold absolute right-5 top-10 whitespace-nowrap flex items-center justify-center">{{$chatuser->countmessage}}</span>
                                                    @endif --}}

                                                </div>
                                            </button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>








                    </div>

                    <!-- =contact-box= -->
                    {{-- <div
                        class="w-full pt-10 max-h-[350px] overflow-y-auto"
                        style="scrollbar-width: thin;">
                        <h3
                            class="text-black text-lg font-medium px-4">{{ translate('Contacts') }}</h3>


                            @foreach ($mutualUsers as $chatuser)
                            @php
                                $profileImageData = getProfileImage($chatuser);
                            @endphp
                            <div class="user-item" data-name="{{ strtolower($chatuser->name) }}">
                                @if ($userpackage)
                                <form action="{{ route('messenger', ['id' => $chatuser->id]) }}" method="get">
                                    <button type="submit" class="min-w-full flex" data-messagebox-open-button>
                                        <div class="flex items-center justify-between p-4 border-b-[1px] border-b-[#eaeaea] duration-300 hover:bg-[#eef0f5] relative w-full">
                                            <div class="flex items-center gap-5">
                                                <picture class="w-10 h-10 relative">
                                                    <img src="{{ $profileImageData['image_url'] }}" alt="profile image" class="w-full h-full rounded-full object-cover {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                                    <span class="absolute right-0 bottom-0">
                                                        <!-- Online status SVG -->
                                                    </span>
                                                </picture>
                                                <div class="flex flex-col text-left">
                                                    <h4 class="text-sm font-semibold text-black whitespace-nowrap">{{ $chatuser->name }}</h4>
                                                    <p class="text-xs text-black font-medium opacity-50">{{ translate('See you tomorrow!') }}</p>
                                                </div>
                                            </div>
                                            <span class="w-5 h-5 rounded-full bg-blue-color text-white text-xs font-semibold absolute right-5 top-10 whitespace-nowrap flex items-center justify-center">02</span>
                                        </div>
                                    </button>
                                </form>
                                @else
                                <button  class="min-w-full flex profile-link" data-messagebox-open-button

                                        >
                                        <div class="flex items-center justify-between p-4 border-b-[1px] border-b-[#eaeaea] duration-300 hover:bg-[#eef0f5] relative w-full">
                                            <div class="flex items-center gap-5">
                                                <picture class="w-10 h-10 relative">
                                                    <img src="{{ $profileImageData['image_url'] }}" alt="profile image" class="w-full h-full rounded-full object-cover {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                                    <span class="absolute right-0 bottom-0">
                                                        <!-- Online status SVG -->
                                                    </span>
                                                </picture>
                                                <div class="flex flex-col text-left">
                                                    <h4 class="text-sm font-semibold text-black whitespace-nowrap">{{ $chatuser->name }}</h4>
                                                    <p class="text-xs text-black font-medium opacity-50">{{ translate('See you tomorrow!') }}</p>
                                                </div>
                                            </div>
                                            <span class="w-5 h-5 rounded-full bg-blue-color text-white text-xs font-semibold absolute right-5 top-10 whitespace-nowrap flex items-center justify-center">02</span>
                                        </div>
                                    </button>
                                @endif
                            </div>
                        @endforeach


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

                <!-- ==middle/message-box== -->
                <div class="message_box" data-message-box>
                    <div
                        class="w-full p-5 border-b-[#eaeaea] sticky top-0 sm:top-[75px] lg:top-[73px] z-10 backdrop-blur-[20px]">
                        {{-- <div
                            class="flex items-center justify-between">
                            <div class="flex items-center gap-2.5">
                                <!-- =small-device-message-box-close-button= -->
                                <button
                                    class="text-black text-2xl font-medium sm:hidden"
                                    data-message-box-close-button><i
                                        class="ri-arrow-left-s-line"></i></button>

                                <a href="#"
                                    class="flex items-center gap-5">
                                    <picture
                                        class="w-10 h-10 relative">
                                        <img
                                            src="./src/images/profile-image-02.png"
                                            alt="profile image"
                                            class="w-full h-full rounded-full object-cover">
                                        <span
                                            class="absolute right-0 bottom-0">
                                            <svg width="16"
                                                height="16"
                                                viewBox="0 0 16 16"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g
                                                    filter="url(#filter0_d_2139_241)">
                                                    <circle cx="8"
                                                        cy="7" r="3"
                                                        fill="#10B981" />
                                                    <circle cx="8"
                                                        cy="7"
                                                        r="4.25"
                                                        stroke="white"
                                                        stroke-width="2.5" />
                                                </g>
                                                <defs>
                                                    <filter
                                                        id="filter0_d_2139_241"
                                                        x="0.5"
                                                        y="0.5"
                                                        width="15"
                                                        height="15"
                                                        filterUnits="userSpaceOnUse"
                                                        color-interpolation-filters="sRGB">
                                                        <feflood
                                                            flood-opacity="0"
                                                            result="BackgroundImageFix" />
                                                        <fecolormatrix
                                                            in="SourceAlpha"
                                                            type="matrix"
                                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                            result="hardAlpha" />
                                                        <feoffset
                                                            dy="1" />
                                                        <fegaussianblur
                                                            stdDeviation="1" />
                                                        <fecomposite
                                                            in2="hardAlpha"
                                                            operator="out" />
                                                        <fecolormatrix
                                                            type="matrix"
                                                            values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
                                                        <feblend
                                                            mode="normal"
                                                            in2="BackgroundImageFix"
                                                            result="effect1_dropShadow_2139_241" />
                                                        <feblend
                                                            mode="normal"
                                                            in="SourceGraphic"
                                                            in2="effect1_dropShadow_2139_241"
                                                            result="shape" />
                                                    </filter>
                                                </defs>
                                            </svg>
                                        </span>
                                    </picture>
                                    <span
                                        class="text-sm font-semibold text-black whitespace-nowrap">{{ translate('Brian
                                        Hughes') }}</span>
                                </a>
                            </div>
                            <button
                                data-friend-information-toggle-button>
                                <svg width="24" height="24"
                                    viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g
                                        clip-path="url(#clip0_96_13876)">
                                        <path
                                            d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
                                            fill="#757575" />
                                    </g>
                                    <defs>
                                        <clippath
                                            id="clip0_96_13876">
                                            <rect width="24"
                                                height="24"
                                                fill="white" />
                                        </clippath>
                                    </defs>
                                </svg>
                            </button>

                            <div class="px-5 py-7 text-black">
                                <p class=" text-xs md:text-sm mt-4 xl:mt-0 lg:text-base font-normal">{{ translate('Start a New Conversation')}}</p>
                            </div>
                        </div> --}}

                        <div class="px-5 py-7 sticky text-black" style="margin-left:200px; margin-top:170px;" >
                            <p class="text-black text-base font-medium">{{ translate('Start a New Conversation')}}</p>
                        </div>
                    </div>
                    <!-- =wrapper= -->
                    <div style="margin-top:50px;" id="chat-container" class="flex flex-col w-full p-5 gap-5 message_between_friend_box pb-10 lg:pb-20">
                        <div class="">
                            <p></p>
                            <span></span>
                        </div>
                    </div>



                    <!-- =message-sent-part= -->
                    {{-- <div
                        class="px-3 py-5 sm:p-5 border-y-[1px] border-y-[#eaeaea] flex items-center justify-between gap-2 sm:gap-5 sticky backdrop-blur-[20px] bg-[rgba(255,255,255,0.4)] bottom-0 lg:bottom-[52px]">
                        <!-- =files= -->
                        <div
                            class="flex items-center gap-1 sm:gap-2">
                            <button
                                class="min-w-[36px] h-9 flex items-center justify-center text-lg text-[#808080] rounded-[5px] duration-300 hover:bg-red-color hover:text-white"><i
                                    class="ri-emoji-sticker-line"></i></button>
                            <button
                                class="min-w-[36px] h-9 flex items-center justify-center text-lg text-[#808080] rounded-[5px] duration-300  hover:bg-red-color hover:text-white"><i
                                    class="ri-attachment-2"></i></button>
                        </div>
                        <!-- =input= -->
                        <input type="text" name="message"
                            id="message"
                            class="w-full px-4 py-3 border-[1px] border-[#dee2e6] rounded-[5px] text-sm text-[#808080] font-normal placeholder:text-[#808080] placeholder:text-sm placeholder:font-medium focus:outline-none focus:border-red-color"
                            placeholder="Type your message"
                            required>
                        <!-- =send= -->
                        <div class="flex items-center gap-2">
                            <button
                            onclick="sendMessage()"
                                class="min-w-[36px] h-9 flex items-center justify-center text-lg text-white rounded-[5px] duration-300 bg-blue-color hover:bg-red-color"><i
                                    class="ri-send-plane-fill"></i></button>
                        </div>
                    </div> --}}


                </div>

                <!-- ==right/friend's-formation== -->
                {{-- <div class="friends_information_wrapper"
                    data-friend-information-wrapper>
                    <div class="w-full h-screen overflow-y-scroll"
                        style="scrollbar-width: none;">
                        <div
                            class="w-full px-5 py-[28px] border-y-[1px] border-y-[#eaeaea] flex items-center gap-4">
                            <button
                                data-friend-information-close-button><svg
                                    width="24" height="24"
                                    viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g
                                        clip-path="url(#clip0_96_14371)">
                                        <path
                                            d="M18.2987 5.70997C17.9087 5.31997 17.2787 5.31997 16.8887 5.70997L11.9988 10.59L7.10875 5.69997C6.71875 5.30997 6.08875 5.30997 5.69875 5.69997C5.30875 6.08997 5.30875 6.71997 5.69875 7.10997L10.5888 12L5.69875 16.89C5.30875 17.28 5.30875 17.91 5.69875 18.3C6.08875 18.69 6.71875 18.69 7.10875 18.3L11.9988 13.41L16.8887 18.3C17.2787 18.69 17.9087 18.69 18.2987 18.3C18.6887 17.91 18.6887 17.28 18.2987 16.89L13.4087 12L18.2987 7.10997C18.6787 6.72997 18.6787 6.08997 18.2987 5.70997Z"
                                            fill="#323232" />
                                    </g>
                                    <defs>
                                        <clippath
                                            id="clip0_96_14371">
                                            <rect width="24"
                                                height="24"
                                                fill="white" />
                                        </clippath>
                                    </defs>
                                </svg> </button>
                            <p
                                class="text-black text-base font-medium">{{ translate('Contact
                                Information')}}</p>
                        </div>

                        <div
                            class="flex items-center justify-center flex-col w-full py-10 text-center">
                            <picture
                                class="relative w-[160px] h-[160px]"><img
                                    src="./src/images/profile-image-02.png"
                                    alt="profile image"
                                    class="w-full h-full rounded-full">
                                <span
                                    class="absolute right-[15px] bottom-[15px]">
                                    <svg width="26" height="26"
                                        viewBox="0 0 26 26"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="13" cy="13"
                                            r="11"
                                            fill="#FBC02D"
                                            stroke="white"
                                            stroke-width="4" />
                                    </svg>
                                </span>
                            </picture>
                            <h4
                                class="mt-[15px] mb-[2px] text-black text-base font-semibold">Bernard
                                Langley</h4>
                            <p
                                class="text-sm text-black font-medium opacity-50">Hi
                                there! I’m using FuseChat.</p>
                        </div>

                        <div class="px-7 flex flex-col gap-5">
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">Age</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">50</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">Ethnicity</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Asian</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">Sexuality</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Straight</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">Gender</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Male</p>
                            </div>
                        </div>

                        <div
                            class="px-7 flex flex-col gap-5 mt-8 pb-[200px] lg:pb-0">
                            <h3
                                class="text-black text-lg font-semibold">What
                                do i look like?</h3>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">My
                                    Eyes</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Amber</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">My
                                    Hair</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Red</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center">
                                <h5
                                    class="text-base font-medium text-left">Body
                                    Hair</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Big</p>
                            </div>
                            <!-- =item= -->
                            <div
                                class="grid items-center grid-cols-3 text-black text-center pb-20">
                                <h5
                                    class="text-base font-medium text-left">Length</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">Shaved
                                    Head</p>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>


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

@endsection

@push('scripts')


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

@if (session('error'))
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: '{{ session('error') }}',
            customClass: {
                confirmButton: 'swal-black-button',
                cancelButton: 'swal-black-button'
            },
        });
    </script>
@endif

<script>
    document.addEventListener('click', function (event) {
        const link = event.target.closest('.profile-link');
        if (!link) return;

        event.preventDefault();

        Swal.fire({
            title: "Subscription Required",
            text: "You need an active subscription to access this profile. Please subscribe now to continue.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, subscribe",
            cancelButtonText: "Cancel",
            customClass: {
                confirmButton: 'swal-black-button',
                cancelButton: 'swal-black-button'
            },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "{{ route('subscribe.package') }}";
            }
        });
    });
    </script>





<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('chatsearch');
        const userItems = document.querySelectorAll('.user-item');

        searchInput.addEventListener('input', function() {
            const searchTerm = searchInput.value.toLowerCase();

            userItems.forEach(function(item) {
                const userName = item.getAttribute('data-name');
                if (userName.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</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 () {
       
        console.log("Presence script loaded.");

        // Initialize Ably with clientId
        const ably = new Ably.Realtime({
            key: '{{ env('ABLY_KEY') }}',
            clientId: "{{ auth()->id() }}" // Ensure this outputs the authenticated user's ID
        });

        console.log("Ably initialized with clientId:", ably.connection.id);

        const presenceChannel = ably.channels.get('presence.global');
        console.log("Subscribed to global presence channel.");

        // Current user details
        const currentUser = {
            id: {{ auth()->id() }},
            name: "{{ auth()->user()->name }}"
        };

        // Enter the user's presence
        presenceChannel.presence.enter(currentUser, (err) => {
            if (err) {
                console.error("Error entering presence:", err);
                return;
            }
            console.log("Entered presence channel as:", currentUser);
        });

        // Parse matches and premiumMatches
        const matches = @json($matches ?? []);
        const matchData = Array.isArray(matches.data) ? matches.data : [];

        console.log("Matches:", matchData); // Debugging

        // Handle user entering the channel
        presenceChannel.presence.subscribe('enter', (presenceData) => {
            console.log("Presence Data (Enter Event):", presenceData); // Debugging

            const newUser = presenceData.data;
            if (newUser) {
                console.log("User entered:", newUser);

                // Debugging the matchData
                if (matchData.length === 0) {
                    console.warn("No matches available in matchData.");
                }

                // Check if the match exists and show the span for the online user
                matchData.forEach(match => {
                    console.log("Checking match:", match); // Debugging match info
                    if (match.id === newUser.id) {
                        const matchElement = document.getElementById(`chat-match-${match.id}`);
                        if (matchElement) {
                            matchElement.style.display = "block"; // Show the span element
                            console.log(`User ID ${newUser.id} entered and updated the DOM.`);
                        } else {
                            console.warn(`Element with ID chat-match-${match.id} not found.`);
                        }
                    }
                });
            } else {
                console.warn("Presence data for 'enter' event is empty.");
            }
        });

        // Handle user leaving the channel
        presenceChannel.presence.subscribe('leave', (presenceData) => {
            const leavingUser = presenceData.data;
            if (leavingUser) {
                console.log("User left:", leavingUser);

                // Debugging the matchData
                if (matchData.length === 0) {
                    console.warn("No matches available in matchData.");
                }

                // Check if the match exists and hide the span for the offline user
                matchData.forEach(match => {
                    console.log("Checking match:", match); // Debugging match info
                    if (match.id === leavingUser.id) {
                        const matchElement = document.getElementById(`chat-match-${match.id}`);
                        if (matchElement) {
                            matchElement.style.display = "none"; // Hide the span element
                            console.log(`User ID ${leavingUser.id} left and updated the DOM for match.`);
                        } else {
                            console.warn(`Element with ID chat-match-${match.id} not found.`);
                        }
                    }
                });
            } else {
                console.warn("Presence data for 'leave' event is empty.");
            }
        });
    });
</script>




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

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

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

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

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

</style>

@endpush