@if ($all_data['users'])

    @foreach ($all_data['users'] as $user)
    <script>
        var currentUrl = window.location.href;
        if (currentUrl == '{{ url('/') }}/chat/{{ $user->uuid }}') {
            $("#currentUser{{ $user->uuid }}").css({
                'backgroundColor': '#7269ef1a',
                'borderRadius': '9px'
            });
        }
    </script>
    <li id="currentUser{{ $user->uuid }}"
        class="px-5 py-[15px] group-data-[theme-color=violet]:hover:bg-slate-100 group-data-[theme-color=green]:hover:bg-green-50/50 group-data-[theme-color=red]:hover:bg-red-50/50 transition-all ease-in-out border-b border-white/20 dark:border-zinc-700 group-data-[theme-color=violet]:dark:hover:bg-zinc-600 group-data-[theme-color=green]:dark:hover:bg-zinc-600 group-data-[theme-color=red]:dark:hover:bg-zinc-600 dark:hover:border-zinc-700">
        <a href="{{ route('user.get.chat', ['user_id' => $user->uuid]) }}" id="user-list">
            <div class="flex">
                <div class="relative self-center ltr:mr-3 rtl:ml-3">
                    <img src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
                        class="rounded-full w-9 h-9" alt="">
                    @if ($user->status == 1)
                        <span id="online-status{{ $user->id }}"
                            class="absolute w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full top-7 ltr:right-1 rtl:left-1 dark:border-zinc-600"></span>
                    @else
                        <span id="offline-status{{ $user->id }}"
                            class="absolute w-2.5 h-2.5 bg-blue-500 border-2 border-white rounded-full top-7 ltr:right-1 rtl:left-1 dark:border-zinc-600"></span>
                    @endif
                </div>

                <div class="flex-grow overflow-hidden">
                    <h5 class="mb-1 text-base truncate dark:text-gray-50">{{ $user->username }}</h5>
                    @php
                        $chat = null;
                    @endphp
                    {{-- <p class="mb-0 text-gray-500 truncate dark:text-gray-300 text-14" id="getLastMessage{{ $user->uuid }}"></p> --}}
                    @php
                        $chat = \App\Models\Chat::where(function ($query) use ($user) {
                            $query->where('user_id', auth()->id())->where('receiver_id', $user->id);
                        })
                        ->orWhere(function ($query) use ($user) {
                            $query->where('user_id', $user->id)->where('receiver_id', auth()->id());
                        })
                        ->orderBy('updated_at', 'desc')
                        ->first();
                    @endphp

                    @if ($chat)
                        <p id="listOfSendChat{{ $user->uuid }}">
                            {{ Illuminate\Support\Str::limit($chat->message, 25, '...') }}</p>
                    @endif
                </div>
                @if ($chat)
                    <div class="text-gray-500 text-11 dark:text-gray-300">
                        @php
                            $sms_count = \App\Models\ChatMessageCount::where('user_id', $user->id)->first();
                        @endphp
                        @if ($sms_count)
                            <p class="px-1.5 py-0.5 text-red-500 block w-auto text-center rounded-full bg-red-500/20 text-11"
                                id="sms_count{{ $user->uuid }}">
                                {{ $sms_count->count }}
                            </p>
                        @endif
                        <p>{{ $chat->created_at->diffForHumans() }}</p>
                    </div>
                @endif
            </div>
        </a>
    </li>
    @endforeach
@endif


@if ($all_data['groups'])
    @foreach ($all_data['groups'] as $group)
        <li
            class="px-5 py-[15px] group-data-[theme-color=violet]:hover:bg-slate-100 group-data-[theme-color=green]:hover:bg-green-50/50 group-data-[theme-color=red]:hover:bg-red-50/50 group-data-[theme-color=violet]:dark:hover:bg-zinc-600 group-data-[theme-color=green]:dark:hover:bg-zinc-600 group-data-[theme-color=red]:dark:hover:bg-zinc-600 transition-all ease-in-out rounded">
            <a href="{{ route('user.get.group', ['uuid' => $group->uuid]) }}">
                <div class="flex items-center">
                    <div class="ltr:mr-5 rtl:ml-5">
                        <div
                            class="flex items-center justify-center rounded-full w-9 h-9 group-data-[theme-color=violet]:bg-violet-500/20 group-data-[theme-color=green]:bg-green-500/20 group-data-[theme-color=red]:bg-red-500/20">
                            <span
                                class="font-medium group-data-[theme-color=violet]:text-violet-500 group-data-[theme-color=green]:text-green-500 group-data-[theme-color=red]:text-red-500">
                                {{ \Illuminate\Support\Str::limit($group->name, 1, '') }}
                            </span>
                        </div>
                    </div>
                    <div class="flex-grow overflow-hidden">
                        <h5 class="mb-0 text-gray-700 truncate text-14 dark:text-gray-50">#{{ $group->name }} <span
                                class="rtl:float-left ltr:float-right px-1.5 py-0.5 text-red-500 rounded-full bg-red-500/20 text-11">{{ $group->members_count }}</span>
                        </h5>
                    </div>
                </div>
            </a>
        </li>
    @endforeach
@endif