@foreach ($users as $user)
    <div class="d-flex flex-stack py-4 user-item" data-id="{{ $user->id }}">
        <div class="d-flex align-items-center">
            <!-- Avatar/Profile Image -->
            <div class="symbol symbol-45px symbol-circle">
                @if ($user->image)
                    <img alt="Profile Image" src="{{ asset('storage/user_image/' . $user->image) }}" class="symbol-label">
                @else
                    <span class="symbol-label bg-light-danger text-danger fs-6 fw-bolder">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </span>
                @endif
            </div>
            <!-- User Details -->
            <div class="ms-5">
                <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">
                    {{ $user->name }}@if ($user->unread_messages_count > 0)
                    <small class="badge badge-pill badge-danger text-white fs-7 mt-1">
                        {{ $user->unread_messages_count }}
                    </small>
                @endif
                </a>
                <div class="fw-semibold text-muted">{{ $user->email }}</div>
            </div>
        </div>
        <!-- Last Message Time and Unread Messages Count -->
        <div class="d-flex flex-column align-items-end ms-2">
            @if ($user->lastMessage)
                <span class="text-muted fs-7 ms-2">
                    @php
                        $time = $user->lastMessage->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>
            @else
                <span class="text-muted fs-7 mb-1">No messages</span>
            @endif

            <!-- Unread Messages Count -->
            
        </div>
    </div>

    <div class="separator separator-dashed d-none"></div>
@endforeach