@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 id="responsive-container" >

                <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 sm:pt-5 pt-[50px] lg:pt-[90px]">
                        <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>
                    <!-- =item= -->


                    <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 class="absolute right-0 bottom-0">
                                                        <!-- Online status SVG -->
                                                    </span>
                                                </picture>
                                                <div class="flex flex-col text-left">
                                                    <h4 id="chat-match-{{ $chatuser->id }}" 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>
                                    </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 active" data-message-box="">
                <!-- Chat Header -->
                <div class="w-full p-5 border-b-[1px] border-b-[#eaeaea] sticky top-0 sm:top-[75px] lg:top-[73px] z-10 backdrop-blur-[20px] bg-white">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2.5">
                            <!-- Small Device Back 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>
                            @php
                                $profileImageData = getProfileImage($receiverUser);
                            @endphp
                            <a href="#" 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">
                                        <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>
                                                <circle cx="8" cy="7" r="4.25" stroke="white" stroke-width="2.5"></circle>
                                            </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"></feFlood>
                                                    <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"></feColorMatrix>
                                                    <feOffset dy="1"></feOffset>
                                                    <feGaussianBlur stdDeviation="1"></feGaussianBlur>
                                                    <feComposite in2="hardAlpha" operator="out"></feComposite>
                                                    <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"></feColorMatrix>
                                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2139_241"></feBlend>
                                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2139_241" result="shape"></feBlend>
                                                </filter>
                                            </defs>
                                        </svg>
                                    </span>
                                </picture>
                                <span class="text-sm font-semibold text-black whitespace-nowrap">{{$receiverUser->first_name}} {{$receiverUser->last_name}}</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"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_96_13876">
                                        <rect width="24" height="24" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </button>
                    </div>
                </div>
            
                <!-- Chat Messages -->
                <div id="chat-container" class="flex flex-col w-full p-5 gap-5 message_between_friend_box overflow-y-auto">
                    @foreach ($messages as $msg)
                        <div class="{{ $msg->sender_id === auth()->id() ? 'self_message' : 'friend_message' }}">
                            <p>{{ $msg->message }}</p>
                            <span>{{ $msg->created_at->diffForHumans() }}</span>
                        </div>
                    @endforeach
                </div>
            
                <!-- Hidden Receiver ID -->
                <input type="hidden" id="receiver_id" value="{{ $receiver_id }}">
            
                <!-- Message Input Section -->
                <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-white bottom-0 lg:bottom-[52px]">
                    <!-- Attachment and Emoji Buttons -->
                    <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>
                    <!-- Message 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 Button -->
                    <div class="flex items-center gap-2">
                        <button data-send-button 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>



            <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"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_96_14371">
                                        <rect width="24" height="24" fill="white"></rect>
                                    </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="{{ $profileImageData['image_url'] }}" 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"></circle>
                                </svg>
                            </span>
                        </picture>
                        <h4 class="mt-[15px] mb-[2px] text-black text-base font-semibold">{{$receiverUser->name}}</h4>
                        <p class="text-sm text-black font-medium opacity-50">{{ translate('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">{{ translate('Age') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">{{$receiverUser->age}}</p>
                        </div>
                       
                        <!-- =item= -->
                        <div class="grid items-center grid-cols-3 text-black text-center">
                            <h5 class="text-base font-medium text-left">{{ translate('Gender') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">{{$receiverUser->gender}}</p>
                        </div>
                        <!-- =item= -->
                        <div class="grid items-center grid-cols-3 text-black text-center">
                            <h5 class="text-base font-medium text-left">{{ translate('Country') }}</h5>
                            <span class="text-base font-medium">:</span>
                            @if ($receiverUser->userDetails)
                                <p class="text-base font-normal text-left">{{$receiverUser->userDetails->country->name ?? '' }}</p>
                            @else
                                <p class="text-base font-normal text-left">-</p>
                            @endif
                        </div>
                    </div>


                    @php
                     if($user->userDetails){
                        if($user->userDetails->length_id != null){
                            $length=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->length_id)->first();
                            }else{
                                $length=null;
                            }
                        }
                        else{
                            $length=null;
                        }

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

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

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

                    @endphp

                    <div class="px-7 flex flex-col gap-5 mt-8 pb-[200px] lg:pb-0">
                        <h3 class="text-black text-lg font-semibold">{{ translate('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">{{ translate('My Eyes') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">
                                @if($eye_color)
                                    {{ $eye_color->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>

                        <!-- =item= -->
                        <div class="grid items-center grid-cols-3 text-black text-center">
                            <h5 class="text-base font-medium text-left">{{ translate('My Hair') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">
                                @if($hair_color)
                                    {{ $hair_color->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <!-- =item= -->
                        <div class="grid items-center grid-cols-3 text-black text-center">
                            <h5 class="text-base font-medium text-left">{{ translate('Body Type') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">
                                @if($body_type)
                                    {{$body_type->name}}
                                @else
                                    N/A
                                @endif
                            </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">{{ translate('Length') }}</h5>
                            <span class="text-base font-medium">:</span>
                            <p class="text-base font-normal text-left">
                                @if($length)
                                    {{ $length->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    <!-- ===small-device-footer=== -->
    <section
        class="xs:hidden w-full fixed bottom-0 left-0 flex items-center justify-center z-10 bg-white"
        style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
        <div
            class="small_container flex items-center justify-between bg-white pt-2.5 pb-3 max-w-[400px] w-full  rounded-t-lg">
            <!-- =left= -->
            <div class="w-1/2 flex items-center gap-[20%]">
                <a href="{{ route('index')}}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-home-6-line text-2xl"></i>
                <p class="text-[12px] font-semibold -mt-1">{{ translate('Home') }}</p>
            </a>
            <a href="{{ route('contact')}}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-phone-line text-2xl"></i>
                <p
                    class="text-[12px] font-semibold -mt-1">{{ translate('Contact') }}</p>
            </a>
                {{-- <button
                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                    <i
                        class="ri-search-2-line text-2xl"></i>
                    <p
                        class="text-[12px] font-semibold -mt-1">Search</p>
                </button> --}}
            </div>
            <!-- =right= -->
            <div
                class="w-1/2 flex items-center gap-[20%] justify-end">
                <a href="{{ auth()->check() ? route('my-match') : route('login') }}"
                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                    <i class="ri-account-circle-line text-2xl"></i>
                    <p class="text-[12px] font-semibold -mt-1">{{ translate('My Account') }}</p>
                </a>
                <a href="{{ route('blog')}}"
                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                    <i class="ri-message-3-line text-2xl"></i>
                    <p class="text-[12px] font-semibold -mt-1">{{ translate('Blog') }}</p>
                </a>
                {{-- <button
                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                    <i
                        class="ri-message-3-line text-2xl"></i>
                    <p
                        class="text-[12px] font-semibold -mt-1">Blog</p>
                </button> --}}
            </div>
            <!-- =add-button= -->
            <button
                class="w-[56px] h-[56px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-4 flex items-center justify-center duration-300 hover:bg-red-color"
                style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                <svg width="20" height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M19.4922 10C19.4922 10.5477 19.0482 10.9917 18.5005 10.9917L1.50052 10.9917C0.952837 10.9917 0.508854 10.5477 0.508854 10C0.508854 9.45235 0.952837 9.00837 1.50052 9.00837L18.5005 9.00837C19.0482 9.00837 19.4922 9.45235 19.4922 10Z"
                        fill="white" />
                    <path fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M10.0005 0.508301C10.5482 0.508301 10.9922 0.952285 10.9922 1.49997L10.9922 18.5C10.9922 19.0477 10.5482 19.4916 10.0005 19.4916C9.45284 19.4916 9.00885 19.0477 9.00885 18.5L9.00885 1.49997C9.00885 0.952285 9.45284 0.508301 10.0005 0.508301Z"
                        fill="white" />
                </svg>
            </button>
        </div>
    </section>

    </div>
</section>




@endsection
<!-- Include Ably and Laravel Echo -->
<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.3/echo.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>



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

<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 () {
        alert('sss');
        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 chat users
        const chatUsers = @json($chatusers ?? []);
        const chatUser Data = Array.isArray(chatUsers.data) ? chatUsers.data : [];

        console.log("Chat Users:", chatUser Data); // Debugging

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

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

                // Check chat users
                chatUser Data.forEach(chatUser  => {
                    if (chatUser .id === newUser .id) {
                        const chatUser Element = document.getElementById(`chat-match-${chatUser .id}`);
                        if (chatUser Element) {
                            chatUser Element.classList.add(
                                "after:absolute",
                                "after:w-2",
                                "after:h-2",
                                "after:rounded-full",
                                "after:-right-3.5",
                                "after:bg-[#2fac24]",
                                "after:top-1/2",
                                "after:-translate-y-1/2"
                            );
                            console.log(`User  ID ${newUser .id} matched chat user and updated the DOM.`);
                        } else {
                            console.warn(`Element with ID chat-match-${chatUser .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 );

                // Remove the visual indication for the leaving user in chat users
                chatUser Data.forEach(chatUser  => {
                    if (chatUser .id === leavingUser .id) {
                        const chatUser Element = document.getElementById(`chat-match-${chatUser .id}`);
                        if (chatUser Element) {
                            chatUser Element.classList.remove(
                                "after:absolute",
                                "after:w-2",
                                "after:h-2",
                                "after:rounded-full",
                                "after:-right-3.5",
                                "after:bg-[#2fac24]",
                                "after:top-1/2",
                                "after:-translate-y-1/2"
                            );
                            console.log(`User  ID ${leavingUser .id} left and updated the DOM for chat user.`);
                        } else {
                            console.warn(`Element with ID chat-match-${chatUser .id} not found.`);
                        }
                    }
                });
            } else {
                console.warn("Presence data for 'leave' event is empty.");
            }
        });
    });
</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>
    document.addEventListener("DOMContentLoaded", function () {
        const receiverIdElement = document.getElementById('receiver_id');
        const messageInput = document.getElementById('message');
        const chatContainer = document.getElementById('chat-container');

        if (!receiverIdElement || !messageInput || !chatContainer) {
            console.error("Required DOM elements are missing!");
            return;
        }

        const receiverId = receiverIdElement.value; // Receiver ID from hidden input
        const currentUserId = {{ auth()->id() }}; // Logged-in user ID

        // Shared channel name using both user IDs sorted
        const channelName = `chat.${Math.min(currentUserId, receiverId)}.${Math.max(currentUserId, receiverId)}`;

        // Function to append a message to the chat
        function appendMessage(messageData) {
            const newMessage = document.createElement('div');
            newMessage.classList.add(
                messageData.sender_id == currentUserId ? 'self_message' : 'friend_message'
            );
            newMessage.innerHTML = `
                <p>${messageData.message}</p>
                <span>${new Date(messageData.created_at).toLocaleTimeString()}</span>
            `;
            chatContainer.appendChild(newMessage);
            chatContainer.scrollTop = chatContainer.scrollHeight; // Auto scroll to bottom
        }

        // Function to send a message via Axios
        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message) {
                console.error("Message input is empty!");
                return;
            }

            axios.post('{{ route('messages.send') }}', {
                receiver_id: receiverId,
                message: message
            })
            .then(response => {
                console.log("Message sent successfully:", response.data);
                messageInput.value = ''; // Clear input field

                // Do NOT append here - real-time will handle it
            })
            .catch(error => {
                console.error("Error sending message:", error.response || error);
            });
        }


        // Attach the sendMessage function to the button click event
        document.querySelector("[data-send-button]").addEventListener('click', sendMessage);

        // Handle Enter key for message sending
        messageInput.addEventListener('keydown', function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                sendMessage();
            }
        });

        // Initialize Ably and subscribe to the shared channel
        const ably = new Ably.Realtime('{{ env('ABLY_KEY') }}');
        const channel = ably.channels.get(channelName);

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

        // Listen for new messages on the channel
        channel.subscribe('new-message', (message) => {
            console.log("New message received:", message.data);

            appendMessage({
                sender_id: message.data.sender_id,
                message: message.data.text,
                created_at: message.data.created_at
            });
        });
    });
</script>





<style>
/* General Styling */
.message_box {
    height: calc(100vh - 73px); /* Full height minus header height */
    overflow-y: hidden; /* Prevent scroll here */
    display: flex;
    flex-direction: column;
}

/* Chat Container */
#chat-container {
    height: calc(100vh - 292px); /* Adjust height dynamically to leave space for header and input sections */
    overflow-y: auto; /* Enable scrolling */
    padding: 10px;
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

#chat-container::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar for Chrome, Safari, and Edge */
}

/* Message Styling */
.self_message {
   width: fit-content;
    max-width: 550px;
    align-self: flex-end;
    text-align: right;
}

.friend_message {
       width: fit-content;
    max-width: 550px;
    align-self: flex-start;
}

/* Responsive Styling */
@media (max-width: 768px) {
    /* Chat container adjustments */
    .message_box {
        height: calc(100vh - 120px); /* Adjust for smaller screens */
    }

    #chat-container {
        height: calc(100vh - 220px); /* Adjust height dynamically for smaller screens */
        padding: 8px;
    }

    .self_message,
    .friend_message {
        font-size: 0.875rem;
        padding: 8px;
        max-width: 90%; /* Increase width for smaller screens */
    }

    /* Input section */
    .message_box > .px-3.py-5 {
        flex-wrap: wrap;
        gap: 5px;
        padding: 8px;
    }

    .message_box > .px-3.py-5 input {
        font-size: 0.9rem;
        padding: 8px;
    }

    .message_box > .px-3.py-5 button {
        min-width: 36px;
        height: 36px;
    }

    /* Friends information sidebar */
    .friends_information_wrapper {
        padding: 10px;
    }

    .friends_information_wrapper h3 {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .friends_information_wrapper .text-base {
        font-size: 0.85rem; /* Adjust body font size */
    }

    .friends_information_wrapper .w-[160px] {
        width: 120px;
        height: 120px; /* Resize profile image */
    }
}

/* Extra small screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Chat container adjustments */
    .message_box {
        height: calc(100vh - 100px); /* Further reduce for smallest screens */
    }

    #chat-container {
        height: calc(100vh - 180px); /* Adjust height for input */
        padding: 6px; /* Reduce padding */
    }

    .self_message,
    .friend_message {
        font-size: 0.75rem;
        padding: 6px;
    }

    /* Input section */
    .message_box > .px-3.py-5 {
        flex-wrap: wrap;
        padding: 5px;
        gap: 5px;
    }

    .message_box > .px-3.py-5 input {
        font-size: 0.8rem;
        padding: 6px;
    }

    .message_box > .px-3.py-5 button {
        min-width: 28px;
        height: 28px;
    }

    /* Friends information sidebar */
    .friends_information_wrapper .w-[160px] {
        width: 100px;
        height: 100px;
    }

    .friends_information_wrapper h3,
    .friends_information_wrapper .text-base {
        font-size: 0.75rem; /* Reduce font sizes */
    }
}

/* Footer Responsiveness */
@media (max-width: 768px) {
    .xs\\:hidden {
        display: flex !important;
    }

    .small_container {
        flex-direction: row;
        padding: 8px;
    }

    .small_container a {
        font-size: 0.75rem; /* Reduce footer text size */
    }

    .small_container button {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .small_container {
        padding: 5px;
        gap: 5px;
    }

    .small_container a {
        font-size: 0.65rem; /* Further reduce footer text size */
    }

    .small_container button {
        width: 40px;
        height: 40px;
    }
}


#responsive-container {
    display: flex;
    align-items: start;
    justify-content: space-between;
    position: relative;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    #responsive-container {
        width: 100%;
        overflow-x: hidden;
        height: 100vh;
        overflow-y: scroll;
        /* Optional: Add custom scrollbar styling */
    }

    .custom_scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .custom_scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

    .custom_scrollbar {
        scrollbar-width: thin;
    }
}




</style>