@if (isset($support_messages))

    @php
        $user = auth()->user();

        if ($user->isAdmin()) {
            $conversationsRoute = route('admin.conversations.index');
            $conversationRoute = 'admin.conversations.show';
        } elseif ($user->isAuthor()) {
            $conversationsRoute = route('author.conversations.index');
            $conversationRoute = 'author.conversations.show';
        } else {
            $conversationsRoute = route('user.conversations.index');
            $conversationRoute = 'user.conversations.show';
        }
    @endphp


    <div class="relative group z-30 hover:z-20">
        <button class="btn-notification">
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M11.8082 17.4919C15.294 17.2603 18.0707 14.4442 18.2992 10.9089C18.3438 10.2171 18.3438 9.50059 18.2992 8.80875C18.0707 5.27349 15.294 2.45745 11.8082 2.22573C10.6189 2.14668 9.37735 2.14685 8.19051 2.22573C4.70467 2.45745 1.92802 5.27349 1.69955 8.80875C1.65484 9.50059 1.65484 10.2171 1.69955 10.9089C1.78276 12.1965 2.35221 13.3887 3.02261 14.3953C3.41186 15.1001 3.15496 15.9797 2.74952 16.748C2.45719 17.302 2.31102 17.579 2.42838 17.7791C2.54575 17.9792 2.8079 17.9856 3.33221 17.9983C4.36907 18.0236 5.06825 17.7296 5.62325 17.3203C5.93801 17.0883 6.09541 16.9722 6.20388 16.9588C6.31235 16.9455 6.52582 17.0334 6.95269 17.2093C7.33635 17.3673 7.78181 17.4648 8.19051 17.4919C9.37735 17.5708 10.6189 17.571 11.8082 17.4919Z"
                    stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                <path d="M7.08398 12.1667H12.9173M7.08398 8H10.0007" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <div
            class="absolute bg-transparent border-none left-auto -right-24 sm:right-0 top-0 hidden group-hover:block inAnim pt-11">
            <div class="shadow-popover bg-white rounded-lg overflow-hidden max-w-[90vw] w-[432px]">
                <!-- head  -->
                <div class="flex justify-between items-center py-5 px-5 border-b border-border">
                    <p class="text-20 font-medium">Messages</p>
                    <p class="size-5 rounded bg-main text-white text-12 font-medium flex justify-center items-center">
                        {{ $support_messages->count() }}
                    </p>
                </div>
                <!-- content  -->
                <ul class="py-4 px-6 thin-scrollbar overflow-y-auto max-h-[60vh]">
                    @if ($support_messages->count() == 0)
                        <li class="">
                            <div class="block p-3 rounded hover:bg-main/5 transition-all duration-300 w-full">
                                <p class="text-headline font-medium mb-1">Not have unread message</p>
                            </div>
                        </li>
                    @else
                        @foreach ($support_messages as $message)
                            <li class="">
                                <a href="{{ route($conversationRoute, $message->conversation_id) }}"
                                    class="flex gap-3 p-3 rounded hover:bg-main/5 transition-all duration-300 w-full">
                                    <img src="{{ $message?->sender?->getFirstMediaUrl('avatar') ?? '' }}"
                                        class="mt-2 w-8 h-8 rounded-full">
                                    <div>
                                        <p class="text-headline font-medium mb-1">
                                            {{ $message?->message ?? '' }}
                                        </p>
                                        <p class="text-14">{{ $message?->created_at->diffForHumans() }}</p>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    @endif
                </ul>

                <div class="flex justify-center pt-4 pb-5 px-5 border-t border-border">
                    <a href="{{ $conversationsRoute }}"
                        class="text-14 font-medium text-paragraph hover:underline transition-all duration-300">View
                        all Message</a>
                </div>
            </div>
        </div>
    </div>
@endif