@php
    $previousSenderId = null;
@endphp

@foreach($messages->reverse() as $message)
    @if($message->sender_id !== $previousSenderId)
        <!-- New Message Block -->
        <div class="d-flex justify-content-{{ $message->sender_id == auth()->id() ? 'end' : 'start' }} mb-10 message-item">
            <!--begin::Wrapper-->
            <div class="d-flex flex-column align-items-{{ $message->sender_id == auth()->id() ? 'end' : 'start' }}">
                <!--begin::User-->
                <div class="d-flex align-items-center mb-2">
                    @if($message->sender_id != auth()->id())
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle">
                            @if($message->sender->image)
                                <img alt="Pic" src="{{ asset('storage/user_image/' . $message->sender->image) }}" />
                            @else
                                <span class="symbol-label bg-light-danger text-danger fs-6 fw-bolder">
                                    {{ strtoupper(substr($message->sender->name, 0, 1)) }}
                                </span>
                            @endif
                        </div>
                        <!--end::Avatar-->
                    @endif
                    <!--begin::Details-->
                    <div class="{{ $message->sender_id == auth()->id() ? 'me-3' : 'ms-3' }}">
                        @if($message->sender_id != auth()->id())
                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">{{ $message->sender->name }}</a>
                        @else
                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-danger ms-1">You</a>
                        @endif
                        <span class="text-muted fs-7 mb-1">
                            @php
                                $time = $message->created_at->diffForHumans(null, true);
                                $shorthand = str_replace(
                                    [' seconds', ' minutes', ' hours', ' days', ' weeks', ' months', ' years'], 
                                    ['s', 'm', 'h', 'd', 'w', 'mo', 'y'], 
                                    $time
                                );
                            @endphp
                            {{ $shorthand }}
                        </span>
                    </div>
                    <!--end::Details-->
                    @if($message->sender_id == auth()->id())
                        <!--begin::Avatar-->
                        <div class="symbol symbol-35px symbol-circle">
                            @if(auth()->user()->image)
                                <img alt="Pic" src="{{ asset('storage/user_image/' . auth()->user()->image) }}" />
                            @else
                                <span class="symbol-label bg-light-primary text-primary fs-6 fw-bolder">
                                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                                </span>
                            @endif
                        </div>
                        <!--end::Avatar-->
                    @endif
                </div>
                <!--end::User-->
    @endif

    <!--begin::Text-->
    <div class="p-5 rounded bg-light-{{ $message->sender_id == auth()->id() ? 'primary' : 'danger' }} text-dark fw-semibold mw-lg-400px text-{{ $message->sender_id == auth()->id() ? 'end' : 'start' }}" data-kt-element="message-text">
        {{ $message->message }}
    </div>
    <!--end::Text-->

    @php
        $previousSenderId = $message->sender_id;
    @endphp

    @if($loop->last || $messages[$loop->index + 1]->sender_id !== $message->sender_id)
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Message -->
    @endif
@endforeach