/home2/mshostin/farms.ms-hostingladz.com/resources/views/dashboard/includes/partial/nav.blade.php
<!--================= Header Section Start Here =================-->
<!--start header-->
<header class="top-header">
    <nav class="navbar navbar-expand align-items-center gap-4">
        <div class="btn-toggle">
            <a href="javascript:;"><i class="material-icons-outlined">menu</i></a>
        </div>
        <div class="search-bar flex-grow-1">
            <div class="position-relative">
                <input class="form-control rounded-5 px-5 search-control d-lg-block d-none" type="text"
                    placeholder="Search">
                <span
                    class="material-icons-outlined position-absolute d-lg-block d-none ms-3 translate-middle-y start-0 top-50">search</span>
                <span
                    class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 search-close">close</span>
                <div class="search-popup p-3">
                    <div class="card rounded-4 overflow-hidden">
                        <div class="card-header d-lg-none">
                            <div class="position-relative">
                                <input class="form-control rounded-5 px-5 mobile-search-control" type="text"
                                    placeholder="Search">
                                <span
                                    class="material-icons-outlined position-absolute ms-3 translate-middle-y start-0 top-50">search</span>
                                <span
                                    class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 mobile-search-close">close</span>
                            </div>
                        </div>
                        <div class="card-body search-content">
                            <p class="search-title">Quick Links</p>
                            <div class="d-flex align-items-start flex-wrap gap-2 kewords-wrapper">
                                <a href="{{ route('dashboard') }}" class="kewords">
                                    <span>Dashboard</span>
                                    <i class="material-icons-outlined fs-6">dashboard</i>
                                </a>

                                @can('view-categories')
                                    <a href="{{ route('categories.index') }}" class="kewords">
                                        <span>Categories ({{ $categoriesCount ?? 0 }})</span>
                                        <i class="material-icons-outlined fs-6">category</i>
                                    </a>
                                @endcan

                                @can('view-subcategories')
                                    <a href="{{ route('subcategories.index') }}" class="kewords">
                                        <span>Subcategories ({{ $subcategoriesCount ?? 0 }})</span>
                                        <i class="material-icons-outlined fs-6">subtitles</i>
                                    </a>
                                @endcan

                                @can('view-blogs')
                                    <a href="{{ route('blogs.index') }}" class="kewords">
                                        <span>Blogs ({{ $blogsCount ?? 0 }})</span>
                                        <i class="material-icons-outlined fs-6">article</i>
                                    </a>
                                    <a href="{{ route('blogs.create') }}" class="kewords">
                                        <span>Create Blog</span>
                                        <i class="material-icons-outlined fs-6">post_add</i>
                                    </a>
                                @endcan

                                @can('view-users')
                                    <a href="{{ route('dashboard.users.index') }}" class="kewords">
                                        <span>Users ({{ $usersCount ?? 0 }})</span>
                                        <i class="material-icons-outlined fs-6">people</i>
                                    </a>
                                @endcan

                                @can('view-roles')
                                    <a href="{{ route('roles.index') }}" class="kewords">
                                        <span>Roles</span>
                                        <i class="material-icons-outlined fs-6">admin_panel_settings</i>
                                    </a>
                                @endcan
                            </div>

                        </div>

                        <div class="card-footer text-center bg-transparent">
                            <a href="javascript:;" class="btn w-100">See All Search Results</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="navbar-nav gap-1 nav-right-links align-items-center">
            <li class="nav-item d-lg-none mobile-search-btn">
                <a class="nav-link" href="javascript:;"><i class="material-icons-outlined">search</i></a>
            </li>
            <li class="nav-item dropdown notranslate">
                <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;"
                    data-bs-toggle="dropdown">
                    <i class="material-icons-outlined">language</i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item d-flex align-items-center py-2" href="javascript:void(0);"
                            onclick="setLanguage('en')">
                            <span class="ms-2">English</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center py-2" href="javascript:void(0);"
                            onclick="setLanguage('ur')">
                            <span class="ms-2">Urdu</span>
                        </a>
                    </li>
                    <li style="display:none;">
                        <div id="google_element"></div>
                    </li>
                </ul>
            </li>
            <li class="nav-item dropdown notranslate">
                <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative"
                    data-bs-auto-close="outside" data-bs-toggle="dropdown" href="javascript:;"><i
                        class="material-icons-outlined">notifications</i>
                    {{-- <span class="badge-notify">{{ $recentActivities->count() }}</span> --}}
                </a>
                <div class="dropdown-menu dropdown-notify dropdown-menu-end shadow">
                    <div class="px-3 py-1 d-flex align-items-center justify-content-between border-bottom">
                        <h5 class="notiy-title mb-0">Notifications</h5>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle dropdown-toggle-nocaret option"
                                type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="material-icons-outlined">
                                    more_vert
                                </span>
                            </button>
                            <div class="dropdown-menu dropdown-option dropdown-menu-end shadow">
                                <div>
                                    <a href="{{ route('view.activity_logs') }}"
                                        class="dropdown-item d-flex align-items-center gap-2 py-2">
                                        <i class="material-icons-outlined fs-6">list</i> View All Logs
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="notify-list" style="max-height: 300px; height: auto; overflow-y: auto;">
                        @foreach ($recentActivities as $activity)
                            <div>
                                <a class="dropdown-item border-bottom py-2" href="javascript:;">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="">
                                            {{-- Removing image as requested --}}
                                        </div>
                                        <div class="">
                                            <h5 class="notify-title">{{ $activity->readable_causer }}</h5>
                                            <p class="mb-0 notify-desc">{{ $activity->description }}
                                                #{{ $activity->subject_id }}</p>
                                            <p class="mb-0 notify-time">{{ $activity->created_at->diffForHumans() }}
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach

                        @if ($recentActivities->isEmpty())
                            <div class="text-center p-3 text-muted">No recent activity.</div>
                        @endif

                        <div class="text-center p-2">
                            <a href="{{ route('view.activity_logs') }}" class="btn btn-link link-primary p-0">View
                                All</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a href="javascript:;" class="dropdown-toggle dropdown-toggle-nocaret" data-bs-toggle="dropdown">
                    <img src="{{ auth()->user()->detail && auth()->user()->detail->profile_image
                        ? asset(auth()->user()->detail->profile_image)
                        : 'https://placehold.co/110x110/png' }}"
                        class="rounded-circle p-1 border" width="45" height="45" alt="User Avatar">
                </a>

                <div class="dropdown-menu dropdown-user dropdown-menu-end shadow p-3 rounded-4"
                    style="min-width: 250px;">
                    <!-- User Header -->
                    <div class="d-flex align-items-center mb-3">
                        <img src="{{ auth()->user()->detail && auth()->user()->detail->profile_image
                            ? asset(auth()->user()->detail->profile_image)
                            : 'https://placehold.co/110x110/png' }}"
                            class="rounded-circle me-2 border" width="55" height="55" alt="User Avatar">
                        <div>
                            <h6 class="mb-0 fw-bold">{{ auth()->user()->name }}</h6>
                            <small
                                class="text-muted">{{ auth()->user()->roles->pluck('name')->first() ?? 'User' }}</small>
                            <br>
                            <small class="text-muted">{{ auth()->user()->email }}</small>
                        </div>
                    </div>

                    <hr class="dropdown-divider">

                    <!-- Optional: Farm Info (if farm admin) -->
                    @if (auth()->user()->hasRole('farm_admin') && auth()->user()->farm)
                        <div class="mb-2">
                            <small class="text-muted">Farm:</small>
                            <p class="mb-0 fw-semibold">{{ auth()->user()->farm->name }}</p>
                        </div>
                        <hr class="dropdown-divider">
                    @endif

                    <!-- Links -->
                    @can('edit-profile')
                        <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="{{ route('profile.edit') }}">
                            <i class="material-icons-outlined">person_outline</i>
                            Profile
                        </a>
                    @endcan

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item d-flex align-items-center gap-2 py-2">
                            <i class="material-icons-outlined">power_settings_new</i>
                            Logout
                        </button>
                    </form>
                </div>
            </li>
        </ul>

    </nav>
</header>
<!--end top header-->
<!--================= Header Section End Here =================-->