@extends('layout.app')
@section('content')

    <style>
        .d-none {
            display: none;
        }

        .profileImage {
            border-radius: 25px !important;
        }

        /* Shake animation for the heart icon */
        @keyframes shake {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-5px);
            }
            50% {
                transform: translateX(5px);
            }
            75% {
                transform: translateX(-5px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .shake-animation {
            animation: shake 0.5s ease-in-out;
        }

        /* Optionally, you can remove the animation after it's complete */
        .shake-animation {
            animation: shake 0.5s ease-in-out;
            animation-fill-mode: forwards;
        }

        .chat-heading {
            font-size: 1.5rem;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 0.5rem;
        }

        .chat-subtitle {
            font-weight: 400;
            color: #058ee8 !important;
            font-family: 'IBM Plex Sans' !important;
        }


    </style>

    @php
        $authId = auth()->id();

        // Fetch all friendships involving current user
        $all = \App\Models\FriendShip::where('sender_id', $authId)
            ->orWhere('receiver_id', $authId)
            ->get();

        // Get a collection of user IDs to exclude
        $exclude = $all->map(function ($f) use ($authId) {
            return ($f->sender_id === $authId) ? $f->receiver_id : $f->sender_id;
        })->push($authId)->values()->all(); // convert to plain array of IDs

    $user = \Illuminate\Support\Facades\Auth::user() ?? '';

    @endphp
    {{--    <div class="inner-banner-sec" style="background-image: url({{asset('images/bg.jpg')}});">--}}
    {{--        <div class="container">--}}
    {{--            <div class="row">--}}
    {{--                <div class="col-lg-12">--}}
    {{--                    <div class="inner-banner-content">--}}
    {{--                        <h2>404 Chats</h2>--}}
    {{--                        <p>Lorem Ipsum has been the industry's standard dummy...</p>--}}
    {{--                        <a href="#" class="themeBtn">Join Now</a>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}

    <section class="chat-page">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    @if(\Illuminate\Support\Facades\Auth::check())
                        @if (isset($user) && $user->email_verified_at !== null)
                            <div class="following-card">
                                <figure>
                                    <img
                                        src="{{\Illuminate\Support\Facades\Auth::user()->getFirstMediaUrl('profile_image') ?? ''}}"
                                        class="img-fluid" alt="img" style="    width: 145px;
    height: 140px;">
                                </figure>
                                <h2>{{\Illuminate\Support\Facades\Auth::user()->name ?? ''}}</h2>
                                <p>{{\Illuminate\Support\Facades\Auth::user()->title ?? ''}}</p>
                                <ul>
                                    <li>
                                        <h3>Following</h3>
                                        <a href="{{ route('my.following') }}">
                                            <span>{{Auth()->user()->following()->count()}}</span></a>
                                    </li>
                                    <li>
                                        <h3>Followers</h3>
                                        <a href="{{ route('my.follower') }}">
                                            <span>{{Auth()->user()->followers()->count()}}</span></a>
                                    </li>
                                    <li><a href="{{route('profile')}}" class="profile-btn">View Profile</a></li>
                                </ul>
                            </div>
                        @endif
                    @endif
                    @include('components.suggested-users')
                    <div class="help-card">
                        <ul>
                            <li>
                                <a href="{{route('newsPage')}}">News</a>
                                <a href="#">About</a>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="{{route('contact')}}">Contact</a>
                                <a href="#">Cookies Policy</a>
                            </li>
                            <li>
                                <a href="#">Career</a>
                                <a href="#">Language</a>
                                <a href="#">Copyright Policy</a>
                            </li>
                        </ul>
                        <div class="copyrght-chat">
                            <a href="#" class="cht-bold">404 Chats</a>
                            <span><i class="fas fa-copyright"></i>Copyright 2025</span>
                        </div>
                    </div>
                    @include('components.view-advertisement')
                </div>


                <div class="col-md-6">

                    <div class="postjob-card">

                        @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)
                            <figure><img
                                    src="{{\Illuminate\Support\Facades\Auth::user()->getFirstMediaUrl('profile_image') ?? ''}}"
                                    class="img-fluid" alt="img" style="    width: 55px;
    height: 50px;"></figure>
                        @endif
                        @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)
                            <div class="post-flex">
                                <a href="#" class="themeBtn" data-bs-toggle="modal" data-bs-target="#postModal"
                                   id="newChat"
                                   style="background: #058ee8!important; color: white!important;">Start a Chat</a>
                            </div>
                        @else
                            <div class="post-flex">
                                <a href="{{route('guest.user')}}" class="themeBtn"
                                   style="background: #058ee8!important; color: white!important;">Start a Chat</a>
                            </div>

                        @endif

                    </div>
                    <div id="postsWrapper">

                    </div>
                    <br>
                    @foreach($chats->take(1) as $chat)
                        @php
                            $chat->userHasLiked = $chat->likes()->where('user_id', auth()->id())->exists();
                        @endphp
                        <div class="post-coment static-example" id="staticExample">
                            <div class="cmnt-jhn position-relative">
                                <div class="d-flex">
                                    <figure class="me-2">
                                        <img
                                            style="    border-radius: 27px;     height: 35px; max-width: 65%!important;"
                                            src="{{ $chat->user->getFirstMediaUrl('profile_image') }}"
                                            class="img-fluid profileImage"
                                            alt="img">
                                    </figure>
                                    <div>
                                        <h4>{{ $chat->user->name ?? '' }}</h4>
                                        <span><i
                                                class="fad fa-clock"></i> {{ $chat->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>

                                <div class="chat-actions position-absolute top-0 end-0 d-flex align-items-start gap-2">

                                    @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)
                                        @if(!in_array($chat->user->id, $exclude))
                                            <a style="margin-right: 18px; margin-top: 5px;"
                                               href="javascript:void(0);"
                                               class="follow-btn btn-icon"
                                               data-id="{{ $chat->user->id }}">
                                                <i class="fal fa-plus"></i>
                                            </a>
                                        @endif
                                    @else
                                        <a style="margin-right: 18px; margin-top: 5px;"
                                           href="{{route('guest.user')}}"
                                        >
                                            <i class="fal fa-plus"></i>
                                        </a>
                                    @endif

                                    @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-light dropdown-toggle" type="button"
                                                    id="dropdownMenuButton" data-toggle="dropdown"
                                                    aria-haspopup="true"
                                                    aria-expanded="false">
                                                <i class="far fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end"
                                                 aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" href="#">Report Abuse</a>
                                            </div>
                                        </div>
                                    @endif

                                </div>
                            </div>

                            <div class="senir-wrodpres">
                                <h4 class="chat-heading">
                                    {{ $chat->title ?? '' }} - <span
                                        class="chat-subtitle">{{ $chat->sub_title ?? '' }}</span>
                                </h4>

                                @php
                                    $words = explode(' ', $chat->description);
                                    $shortDescription = implode(' ', array_slice($words, 0, 50));
                                    $fullDescription = implode(' ', array_slice($words, 50));
                                @endphp

                                <p>
                                    {!! $shortDescription !!}
                                    @if (count($words) > 50)
                                        <span style="color: #666666;
    font-size: 0.9rem;
    line-height: 24px;
    font-family: 'Source Sans Pro';
    margin-bottom: 7px;
    width: 95%;" class="more-text d-none">{!! $fullDescription !!}</span>
                                        <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                    @endif
                                </p>
                            </div>
                            @if(\Illuminate\Support\Facades\Auth::check())
                                @if (isset($user) && $user->email_verified_at !== null)
                                    <div class="like-comnt">
                                        <ul>
                                            <li>
                                                <a href="#" class="like-btn" data-chat-id="{{ $chat->id }}">
                                                    <i class="fas fa-heart {{ $chat->userHasLiked ? 'text-danger' : '' }}"></i>
                                                    Like
                                                </a>
                                                <figure>
                                                    <img src="{{ asset('images/likeimg.png') }}" class="img-fluid"
                                                         alt="img">
                                                    <span class="like-count"
                                                          id="like-count-{{ $chat->id }}">{{ $chat->likes_count }}</span>
                                                </figure>
                                                <a href="{{route('chat.comment',$chat->id)}}"><i
                                                        class="fas fa-comment-alt"></i>
                                                    Comment {{$chat->comments->count()}}</a>
                                            </li>

                                        </ul>
                                        {{--                                <div class="view-50">--}}
                                        {{--                                    <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                                        {{--                                </div>--}}
                                    </div>
                                @endif
                            @endif
                        </div>
                    @endforeach


                    <div class="top-profile">
                        <div class="heading">
                            <h3>Top Profile</h3>
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="far fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>

                        <div class="swiper profileSlide">
                            <div class="swiper-wrapper">
                                @if($topProfiles->isEmpty())
                                    <label>No User Found!</label>
                                @else

                                    @foreach($topProfiles as $profile)
                                        <div class="swiper-slide">
                                            <div class="profile-card">
                                                <figure>
                                                    <img src="{{ $profile->getFirstMediaUrl('profile_image') }}"
                                                         class="img-fluid"
                                                         style="width: 60px; height: 60px; border-radius: 30px;">
                                                </figure>
                                                <div class="profile-conten">
                                                    <h3>{{ $profile->name }}</h3>
                                                    <p>{{ $profile->title }}</p>
                                                    @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)
                                                        <ul>
                                                            @php
                                                                $alreadyRequested = \App\Models\FriendShip::where('sender_id', auth()->id())
                                                                    ->where('receiver_id', $profile->id)
                                                                    ->where('status', 'pending')
                                                                    ->exists();
                                                            @endphp

                                                            <li>
                                                                @if($alreadyRequested)
                                                                    <a href="javascript:void(0)">Request Sent</a>
                                                                @else
                                                                    <a href="javascript:void(0);"
                                                                       class="follow-btn btn-text"
                                                                       data-id="{{ $profile->id }}">
                                                                        Follow
                                                                    </a>
                                                                @endif
                                                            </li>
                                                            <li><a href="#"><i class="fas fa-envelope"></i></a></li>
                                                            <li><a href="#">Hire</a></li>
                                                        </ul>
                                                        <div class="view-profile">
                                                            <a href="{{ route('view.profile', ['id' => $profile->id, 'name' => $profile->name]) }}">View
                                                                Profile</a>
                                                        </div>
                                                    @else
                                                        <div class="view-profile">
                                                            <a href="{{ route('guest.user')}}" class=" btn-text">
                                                                Follow</a>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                @endif
                            </div>

                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                    <div id="chatWrapper">
                        @foreach($chats->slice(1) as $chat)
                            @php
                                $chat->userHasLiked = $chat->likes()->where('user_id', auth()->id())->exists();

                            @endphp
                            <div class="post-coment">
                                <div class="cmnt-jhn">
                                    <div class="d-flex">
                                        <figure>
                                            <img
                                                style="    border-radius: 27px;     height: 35px; max-width: 65%!important;"
                                                src="{{$chat->user->getFirstMediaUrl('profile_image')}}"
                                                class="img-fluid profileImage"
                                                alt="img">
                                        </figure>
                                        <div>
                                            <h4>{{$chat->user->name ?? ''}}</h4>
                                            <span><i class="fad fa-clock"></i>3 min ago</span>
                                        </div>
                                    </div>
                                    <div
                                        class="chat-actions position-absolute top-0 end-0 d-flex align-items-start gap-2">

                                        @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)

                                            @if(!in_array($chat->user->id, $exclude))
                                                <a style="margin-right: 18px; margin-top: 5px;"
                                                   href="javascript:void(0);"
                                                   class="follow-btn btn-icon"
                                                   data-id="{{ $chat->user->id }}">
                                                    <i class="fal fa-plus"></i>
                                                </a>
                                            @endif
                                        @else
                                            <a style="margin-right: 18px; margin-top: 5px;"
                                               href="{{route('guest.user')}}"

                                            >
                                                <i class="fal fa-plus"></i>
                                            </a>
                                        @endif

                                        @if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->email_verified_at !== null)

                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenuButton" data-toggle="dropdown"
                                                        aria-haspopup="true"
                                                        aria-expanded="false">
                                                    <i class="far fa-ellipsis-v"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="#">Report Abuse</a>
                                                </div>
                                            </div>
                                        @endif

                                    </div>
                                </div>

                                <div class="senir-wrodpres">
                                    <h4 class="chat-heading">
                                        {{ $chat->title ?? '' }} - <span
                                            class="chat-subtitle">{{ $chat->sub_title ?? '' }}</span>
                                    </h4>
                                    @php
                                        $words = explode(' ', $chat->description);
                                        $shortDescription = implode(' ', array_slice($words, 0, 50));
                                        $fullDescription = implode(' ', array_slice($words, 50));

                                    @endphp

                                    <p>
                                        {!! $shortDescription !!}
                                        @if (count($words) > 50)
                                            <span style="color: #666666;
    font-size: 0.9rem;
    line-height: 24px;
    font-family: 'Source Sans Pro';
    margin-bottom: 7px;
    width: 95%;" class="more-text d-none">{!! $fullDescription !!}</span>
                                            <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                        @endif
                                    </p>

                                </div>
                                @if(\Illuminate\Support\Facades\Auth::check())
                                    @if (isset($user) && $user->email_verified_at !== null)
                                        <div class="like-comnt">
                                            <ul>
                                                <li>
                                                    <a href="#" class="like-btn" data-chat-id="{{ $chat->id }}">
                                                        <i class="fas fa-heart {{ $chat->userHasLiked ? 'text-danger' : '' }}"></i>
                                                        Like
                                                    </a>
                                                    <figure>
                                                        <img src="{{ asset('images/likeimg.png') }}" class="img-fluid"
                                                             alt="img">
                                                        <span class="like-count"
                                                              id="like-count-{{ $chat->id }}">{{ $chat->likes_count }}</span>
                                                    </figure>
                                                    <a href="{{route('chat.comment',$chat->id)}}"><i
                                                            class="fas fa-comment-alt"></i>
                                                        Comment {{$chat->comments->count()}}</a>
                                                </li>
                                            </ul>

                                        </div>
                                    @endif
                                @endif
                            </div>
                        @endforeach
                    </div>
                    @if($chats->count() >= 6)
                        <div class="text-center mt-3">
                            <button id="loadMoreBtn" class="btn btn-primary" data-page="2">View More</button>
                            <div id="loadMoreLoader" class="d-none mt-2">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
                <div class="col-md-3">
                    <div class="chat-404">
                        <div class="track">
                            <h2><span>404</span> Chat</h2>
                            <h4> Track Time on Workwise</h4>
                            <p>Pay only for the Hours worked</p>
                        </div>
                        <div class="sign-up">
                            <h4>Sign up</h4>
                            <a href=" #">Learn More</a>
                        </div>
                    </div>
                    @include('components.jobs')
                    <div class="suggestion-card ad-card mt-4 p-0 shadow-lg rounded"
                         style="border: 2px solid #3e94e7; overflow: hidden;">
                        <div class="d-flex justify-content-between align-items-center p-3"
                             style="background: linear-gradient(90deg, #3e94e7 0%, #3e94e7 50%, #3e94e7 100%); color: #fff;">
                            <h2 style=" color: white;font-size: 20px; margin: 0;">Most Viewed This Week</h2>
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="far fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>

                        <ul class="job-list">
                            <li style="display: list-item;padding: 0!important;     padding-right: 14px!important;
    padding-left: 12px!important;" class="job-item">
                                <div class="job-title">
                                    <h4>Senior Product Designer</h4>
                                    <span>$25/hr</span>
                                </div>
                                <p>Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit..</p>
                            </li>

                        </ul>
                    </div>
                    @include('components.most-viewed')
                    @include('components.view-advertisement-2')
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="postModalLabel"><span id="modalTypeLabel">Topic to Chat</span></h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <form id="postForm">

                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Topic</label>
                            <input type="text" class="form-control" name="title" required
                                   placeholder="Enter Topic For Chat">
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Sub Topic /(Optional)</label>
                                <input type="text" class="form-control" name="sub_title"
                                       placeholder="Enter Sub Topic">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Chat Body</label>
                            <textarea class="form-control" name="description" rows="5" required
                                      placeholder="Describe..."></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary w-100">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection
@push('script')
    <script>
        document.querySelectorAll('.toggle-more').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const moreText = this.previousElementSibling;
                moreText.classList.toggle('d-none');
                this.textContent = moreText.classList.contains('d-none') ? 'View More' : 'View Less';
            });
        });

        $('#postForm').on('submit', function (e) {
            e.preventDefault();

            let form = $(this);

            $.ajax({
                url: '{{ route("new.chat") }}',
                method: 'POST',
                data: form.serialize(),
                success: function (response) {
                    if (response.success) {
                        // Show toast
                        showToast(response.message);
                        // $('#staticExample').hide();
                        // Prepend post HTML
                        const postHtml = generatePostHtml(response.data, response.user, response.profile);

                        $('#postsWrapper').prepend(postHtml);
                        attachLikeListeners();
                        $('#postForm')[0].reset();
                        $('#postModal').modal('hide');
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';

                        for (let field in errors) {
                            errorMessages += errors[field][0] + '\n';
                        }

                        alert(errorMessages); // Show all validation errors
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                }
            });
        });

        function showToast(message, type = 'success') {
            $('#liveToast').removeClass('bg-success bg-danger').addClass('bg-' + type);
            $('#toastMessage').html(message);
            const toast = new bootstrap.Toast(document.getElementById('liveToast'));
            toast.show();
        }

        function generatePostHtml(data, userName, profile) {
            const chatId = data.id ?? '0'; // or use data.chat_id if it's named like that
            const chatCommentUrl = '{{ route("chat.comment", ":id") }}'.replace(':id', chatId);

            return `
    <div class="post-coment">
        <div class="cmnt-jhn">
            <div class="d-flex">
                <figure>
                    <img  src="${profile}" class="img-fluid" alt="img" style="    border-radius: 27px;     height: 35px; max-width: 65%!important;">
                </figure>
                <div>
                    <h4>${userName}</h4>
                    <span><i class="fad fa-clock"></i>Just now</span>
                </div>
            </div>
             <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button"
                                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                        <i class="far fa-ellipsis-v"></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                                        <a class="dropdown-item" href="#">Report Abuse</a>
                                    </div>
                                </div>
        </div>

        <div class="senir-wrodpres">
              <h4 class="chat-heading">
                                    ${data.title} - <span class="chat-subtitle">${data.sub_title ?? ''}</span>
                                </h4>


            <p>${data.description}</p>

        </div>
      <div class="like-comnt">
                                <ul>
                      <li>
                    <a href="#" class="like-btn" data-chat-id="${chatId}">
                        <i class="fas fa-heart"></i> Like
                    </a>
                    <figure>
                        <img src="{{asset('/images/likeimg.png')}}" class="img-fluid" alt="img">
                        <span class="like-count" id="like-count-${chatId}">0</span>
                    </figure>
                    <a href="${chatCommentUrl}"><i class="fas fa-comment-alt"></i> Comment</a>
                </li>
                                </ul>
                                <div class="view-50">
                                    <a href="#"><i class="far fa-eye"></i> Views 0</a>
                                </div>
                            </div>
    </div>`;
        }
    </script>


    <script>
        document.addEventListener('click', function (e) {
            if (e.target.closest('.follow-btn')) {
                e.preventDefault();
                const btn = e.target.closest('.follow-btn');
                const userId = btn.dataset.id;

                fetch(`{{ url('/send-follow-request') }}/${userId}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'success') {

                            document.querySelectorAll(`.follow-btn[data-id="${userId}"]`).forEach(el => {

                                // Button with Text
                                if (el.classList.contains('btn-text')) {
                                    el.innerHTML = 'Request Sent';
                                    el.style.backgroundColor = '#007bff';
                                    el.style.color = '#fff';
                                    el.style.pointerEvents = 'none';
                                }

                                // Icon-only Button
                                if (el.classList.contains('btn-icon')) {
                                    el.innerHTML = `<i class="fal fa-check" style="color: green;"></i>`;
                                    el.style.pointerEvents = 'none';
                                }

                            });
                        }
                    });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            attachLikeListeners();
        });

        function attachLikeListeners() {
            document.querySelectorAll('.like-btn').forEach(function (btn) {
                btn.removeEventListener('click', handleLikeClick); // Prevent duplicates
                btn.addEventListener('click', handleLikeClick);
            });
        }

        function handleLikeClick(e) {
            e.preventDefault();

            const btn = e.currentTarget;
            const chatId = btn.getAttribute('data-chat-id');
            const heartIcon = btn.querySelector('i');
            const likeCountEl = document.getElementById('like-count-' + chatId);

            // Add shake animation
            heartIcon.classList.add('shake-animation');

            fetch('{{ url('/like-toggle') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({chat_id: chatId})
            })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'liked') {
                        heartIcon.classList.add('text-danger');
                    } else {
                        heartIcon.classList.remove('text-danger');
                    }

                    likeCountEl.textContent = data.likes_count;

                    // Remove shake after animation
                    setTimeout(() => heartIcon.classList.remove('shake-animation'), 500);
                });
        }

        $(document).on('click', '#loadMoreBtn', function () {
            let button = $(this);
            let page = button.data('page');

            $('#loadMoreLoader').removeClass('d-none');
            button.prop('disabled', true);

            $.ajax({
                url: "{{ route('chats.load.more') }}",
                method: "GET",
                data: {page: page},
                success: function (response) {
                    $('#chatWrapper').append(response.html);
                    $('#loadMoreLoader').addClass('d-none');
                    button.prop('disabled', false);

                    if (response.hasMore) {
                        button.data('page', page + 1);
                    } else {
                        button.hide();
                    }

                    // Reattach like functionality to new buttons
                    attachLikeListeners();
                },
                error: function () {
                    alert('Something went wrong');
                    $('#loadMoreLoader').addClass('d-none');
                    button.prop('disabled', false);
                }
            });
        });


    </script>



@endpush