@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">
                <!-- =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>
                        <!-- =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 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>
                                                @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>
                        <!-- =item= -->


                        @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>
    <!-- Header -->
    <div class="w-full p-5 border-b border-[#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 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>
                @php
                $profileImageData = getProfileImage($receiverUser);
               @endphp
                <!-- Profile Info -->
                <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">
                                <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>
                            </svg>
                        </span>
                    </picture>
                    <span class="text-sm font-semibold text-black whitespace-nowrap">{{$receiverUser->first_name}} {{$receiverUser->last_name}}</span>
                </a>
            </div>
            <!-- Options Button -->
            <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">
                    <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>
                </svg>
            </button>
        </div>
    </div>

    <!-- Chat Messages -->
    <div id="chat-container" class="flex flex-col w-full p-5 gap-5 message_between_friend_box pb-10 lg:pb-20 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 -->
    <div class="px-3 py-5 sm:p-5 border-t border-[#eaeaea] flex items-center gap-2 sm:gap-5 bg-[rgba(255,255,255,0.8)] backdrop-blur-[20px] sticky bottom-0">
        <!-- Attachment Buttons -->
        <div class="flex items-center gap-1 sm:gap-2">
            <button class="w-9 h-9 flex items-center justify-center text-lg text-[#808080] rounded hover:bg-red-color hover:text-white duration-300">
                <i class="ri-emoji-sticker-line"></i>
            </button>
            <button class="w-9 h-9 flex items-center justify-center text-lg text-[#808080] rounded hover:bg-red-color hover:text-white duration-300">
                <i class="ri-attachment-2"></i>
            </button>
        </div>
        <!-- Message Input Field -->
        <input type="text" name="message" id="message" class="flex-1 px-4 py-3 border rounded text-sm text-[#808080] placeholder:text-[#808080] focus:outline-none focus:border-red-color" placeholder="Type your message..." required>
        <!-- Send Button -->
        <button data-send-button class="w-9 h-9 flex items-center justify-center bg-blue-color text-white rounded hover:bg-red-color duration-300">
            <i class="ri-send-plane-fill"></i>
        </button>

    </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="{{ $profileImageData['image_url'] }}"
                                    alt="profile image"
                                    class="w-full h-full rounded-full {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                <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">{{$receiverUser->name}}</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">{{$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">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>
                            {{-- <!-- =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">{{$receiverUser->gender}}</p>
                            </div>
                        </div>

                        @php
                            if($receiverUser->userDetails){
                                if($receiverUser->userDetails->eye_color_id != null){

                                    $eye_color=App\Models\ProfileAttributeMeta::where('id', $receiverUser->userDetails->eye_color_id)->first();

                                }
                                else{
                                    $eye_color=null;
                                }
                                }else{
                                    $eye_color=null;
                                }

                                if($receiverUser->userDetails){
                                    if($receiverUser->userDetails->hair_color_id != null){

                                        $hair_color=App\Models\ProfileAttributeMeta::where('id', $receiverUser->userDetails->hair_color_id)->first();

                                    }
                                    else{
                                        $hair_color=null;
                                    }
                                } else{
                                        $hair_color=null;
                                    }

                                    if($receiverUser->userDetails){
                                    if($receiverUser->userDetails->body_type_id != null){

                                        $body_type=App\Models\ProfileAttributeMeta::where('id', $receiverUser->userDetails->body_type_id)->first();

                                    }
                                    else{
                                        $body_type=null;
                                    }
                                }
                                    else{
                                        $body_type=null;
                                    }

                                    if($user->userDetails){
                                        if($receiverUser->userDetails->length_id != null){
                                        $length=App\Models\ProfileAttributeMeta::where('id', $receiverUser->userDetails->length_id)->first();
                                    }else{
                                        $length=null;
                                    }
                                    }else{
                                        $length=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">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">@if(isset($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">My
                                    Hair</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">@if(isset($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">Body Type
                                    </h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">@if(isset($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">Length</h5>
                                <span
                                    class="text-base font-medium">:</span>
                                <p
                                    class="text-base font-normal text-left">@if(isset($length))
                                    {{ $length->name}}
                                    @else
                                        N/A
                                    @endif
                                    </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </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() {
        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>
    .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>