@forelse ($messages as $message)
     
    <div class="chat-item mb-3">
        <div
            class="row align-items-end {{ $message->from_id == $receiver->id ? 'justify-content-start' : 'justify-content-end' }}">

            {{-- Avatar on left for received messages --}}
            @if ($message->from_id == $receiver->id)
                <div class="col-auto">
                    <span class="img-thumbnail" style="background-image: url('{{ getAvatar($receiver->image) }}')"></span>
                </div>
            @endif

            <div class="col col-lg-6 p-0">
                <div
                    class="chat-bubble chat-bubble-me @if ($message->from_id != $receiver->id) bg-primary @else bg-light @endif rounded p-3">
                    <div class="chat-bubble-title">
                        <div class="row">
                            <div class="col chat-bubble-author">
                                <strong>{{ $message->from_id == $receiver->id ? $receiver->name : $sender->name }}</strong>
                            </div>
                            <div class="col-auto chat-bubble-date">{{ $message->created_at->diffForHumans() }}</div>
                        </div>
                    </div>

                    <div class="chat-bubble-body">
                        <p>{!! $message->body !!}</p>
                    </div>

                    {{-- Ad info at the bottom --}}
                    @if ($message->ad_id && $message->ad)
                        <div class="mt-2 p-2 border rounded text" style="font-size: 0.85rem;">
                            <small>About this ad:
                                <a href="{{ route('user.chatform', [$receiver->id, $message->ad->id]) }}"
                                    target="_blank">
                                    {{ $message->ad->title }}
                                </a>
                            </small>
                        </div>
                    @endif

                </div>
            </div>

            {{-- Avatar on right for sent messages --}}
            @if ($message->from_id != $receiver->id)
                <div class="col-auto">
                    <span class="img-thumbnail" style="background-image: url('{{ getAvatar($sender->image) }}')"></span>
                </div>
            @endif
        </div>
    </div>
@empty
    <div class="text-center">No Messages!</div>
@endforelse