@forelse ($messages as $message)

{{-- auth user msg --}}
{{-- auth usre msg end --}}

<div class="chat-item mb-3 {{ $loop->last ? 'select-user-last-msg' : '' }}">
    <div class="row align-items-end {{ $message->from_id == $receiver->id ? 'justify-content-start' : 'justify-content-end' }}">
        @if($message->from_id == $receiver->id)
            <div class="col-auto">
                <span class="img-thumbnail" style="background-image: url('{{ getAvatar($message->from_id==$receiver->id ?  $receiver->image: $sender->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>
            </div>
        </div>
            @if($message->from_id !== $receiver->id)

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