<li class="notifications dropdown">
    @if(\App\Models\User::find(auth()->user()->getAuthIdentifier())->unreadNotifications->count())
        <span class="counter bgc-red">{{\App\Models\User::find(auth()->user()->getAuthIdentifier())->unreadNotifications->count()}}</span>
    @endif
    <a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="ti-bell"></i>
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li class="d-flex justify-content-between align-items-center px-2 py-2">
            <span>
                <i class="ms-2 ti-bell"></i> Notifications
            </span>
            <span>
                <button type="button" class="btn btn-sm btn-secondary me-2" title="Mark All as Read">
                    <i class="fa fa-solid fa-check"></i>
                </button>
            </span>
        </li>
        <hr class="my-0 border border-dark border-end-0 border-start-0 border-bottom-0">
        <li>
            <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
                @forelse(auth()->user()->notifications()->latest()->take(5)->get() as $notification)
                    <!-- Order Status Notification -->
                    @if($notification->type == 'App\Notifications\Order\OrderStatus')
                        <li class="@if(isset($notification->read_at)) bg-light @endif">
                            <a href="{{route('ch-admin.order.show', [$notification->data['id']])}}"
                               class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
                                <div class="peer peer-greed">
                                    <span class="c-grey-600">
                                        <i class="fa fa-shopping-cart text-aqua"></i>
                                        You have received a new
                                        <span class="text-dark">Order [{{$notification->data['id']}}].</span>
                                    </span>
                                    <p class="m-0">
                                        <small class="fsz-xs">{{$notification->created_at->diffForHumans()}}</small>
                                    </p>
                                </div>
                            </a>
                        </li>
                    @endif

                    <!-- Order Created Notification -->
                    @if($notification->type == 'App\Notifications\Order\OrderCreated')
                        <li class="@if(isset($notification->read_at)) bg-light @endif">
                            <a href="{{route('ch-admin.order.show', [$notification->data['id']])}}"
                               class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
                                <div class="peer peer-greed">
                                    <span class="c-grey-600">
                                        <i class="fa fa-shopping-cart text-aqua"></i>
                                        You have received a new
                                        <span class="text-dark">Order [{{$notification->data['id']}}].</span>
                                    </span>
                                    <p class="m-0">
                                        <small class="fsz-xs">{{$notification->created_at->diffForHumans()}}</small>
                                    </p>
                                </div>
                            </a>
                        </li>
                    @endif

                    <!-- Customer Response on Ticket Notification -->
                    @if($notification->type == 'App\Notifications\Ticket\CustomerResponseNotification')
                        <li class="px-3 py-2 @if(isset($notification->read_at)) bg-light @endif">
                            <a href="{{route('ch-admin.ticket.show', [$notification->data['id']])}}" class="text-decoration-none text-reset">
                                <div class="peer peer-greed">
                                    <span class="c-grey-600">
                                        <i class="fa fa-solid fa-ticket text-aqua"></i>
                                        New repsonse on Ticket [{{$notification->data['reference_id']}}] has been submitted.
                                    </span>
                                    <p class="m-0">
                                        <small class="fsz-xs">{{$notification->created_at->diffForHumans()}}</small>
                                    </p>
                                </div>
                            </a>
                        </li>
                    @endif

                    <!-- Ticket Created Admin Notification -->
                    @if($notification->type == 'App\Notifications\Ticket\TicketCreatedAdminNotification')
                        <li class="px-3 py-2 @if(isset($notification->read_at)) bg-light @endif">
                            <a href="{{route('ch-admin.ticket.show', [$notification->data['id']])}}" class="text-decoration-none text-reset">
                                <div class="peer peer-greed">
                                    <span class="c-grey-600">
                                        <i class="fa fa-solid fa-ticket text-aqua"></i>
                                        New repsonse on Ticket [{{$notification->data['reference_id']}}] has been submitted.
                                    </span>
                                    <p class="m-0">
                                        <small class="fsz-xs">{{$notification->created_at->diffForHumans()}}</small>
                                    </p>
                                </div>
                            </a>
                        </li>
                    @endif

                    @if(!$loop->last)
                        <hr class="my-0 border border-dark border-end-0 border-start-0 border-bottom-0">
                    @endif
                @empty
                    <!-- No Notification Message -->
                    <li class="py-3 text-center">No new notifications.</li>
                @endforelse
            </ul>
        </li>
        <li class="pX-20 pY-15 ta-c bdT">
            <a href="{{ route('ch-admin.notifications.index') }}" class="text-decoration-none text-reset">
                <i class="fa fa-regular fa-bars"></i> All Notifications
            </a>
        </li>
    </ul>
</li>
