<!-- Mobile Bottom Navigation - Fixed at bottom on mobile only -->
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40 safe-area-bottom">
    @if(Auth::user()->isAdmin())
        <!-- Admin Navigation -->
        <div class="grid grid-cols-5 gap-1 px-1">
            <!-- Dashboard -->
            <a href="{{ route('dashboard') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('dashboard') && !request()->routeIs('admin.*') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }} transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('dashboard') && !request()->routeIs('admin.*') ? 'bg-blue-100 dark:bg-blue-900/30' : '' }}">
                    <i class="fas fa-home text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Panou</span>
            </a>

            <!-- Admin -->
            <a href="{{ route('admin.dashboard') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('admin.*') ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400' }} transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('admin.*') ? 'bg-amber-100 dark:bg-amber-900/30' : '' }}">
                    <i class="fas fa-crown text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Admin</span>
            </a>

            <!-- DNS Zones -->
            <a href="{{ route('dns-zones.index') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('dns-zones.*') ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-500 dark:text-gray-400' }} transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('dns-zones.*') ? 'bg-emerald-100 dark:bg-emerald-900/30' : '' }}">
                    <i class="fas fa-globe text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">DNS</span>
            </a>

            <!-- Notifications -->
            <a href="{{ route('notifications.index') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('notifications.*') ? 'text-purple-600 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400' }} transition relative">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('notifications.*') ? 'bg-purple-100 dark:bg-purple-900/30' : '' }}">
                    <i class="fas fa-bell text-lg"></i>
                    @php $unreadCount = Auth::user()->unreadNotifications->count(); @endphp
                    @if($unreadCount > 0)
                        <span class="absolute top-1 right-1/4 w-4 h-4 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center">
                            {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                        </span>
                    @endif
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Notificări</span>
            </a>

            <!-- More Menu -->
            <button onclick="toggleMobileSidebar()" class="flex flex-col items-center py-2 px-1 text-gray-500 dark:text-gray-400 transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl">
                    <i class="fas fa-grip-lines text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Mai mult</span>
            </button>
        </div>
    @else
        <!-- User Navigation -->
        <div class="grid grid-cols-4 gap-1 px-2">
            <!-- Dashboard -->
            <a href="{{ route('dashboard') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('dashboard') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }} transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('dashboard') ? 'bg-blue-100 dark:bg-blue-900/30' : '' }}">
                    <i class="fas fa-home text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">{{ __('menu.dashboard') }}</span>
            </a>

            <!-- DNS Zones -->
            <a href="{{ route('dns-zones.index') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('dns-zones.*') ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-500 dark:text-gray-400' }} transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('dns-zones.*') ? 'bg-emerald-100 dark:bg-emerald-900/30' : '' }}">
                    <i class="fas fa-globe text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">{{ __('menu.dns_zones') }}</span>
            </a>

            <!-- Notifications -->
            <a href="{{ route('notifications.index') }}" class="flex flex-col items-center py-2 px-1 {{ request()->routeIs('notifications.*') ? 'text-purple-600 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400' }} transition relative">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl {{ request()->routeIs('notifications.*') ? 'bg-purple-100 dark:bg-purple-900/30' : '' }}">
                    <i class="fas fa-bell text-lg"></i>
                    @php $unreadCount = Auth::user()->unreadNotifications->count(); @endphp
                    @if($unreadCount > 0)
                        <span class="absolute top-1 right-1/4 w-4 h-4 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center">
                            {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                        </span>
                    @endif
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Notificări</span>
            </a>

            <!-- More Menu -->
            <button onclick="toggleMobileSidebar()" class="flex flex-col items-center py-2 px-1 text-gray-500 dark:text-gray-400 transition">
                <div class="w-10 h-10 flex items-center justify-center rounded-xl">
                    <i class="fas fa-grip-lines text-lg"></i>
                </div>
                <span class="text-[10px] mt-0.5 font-medium">Mai mult</span>
            </button>
        </div>
    @endif
</nav>

<style>
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
</style>
