{{-- Bottom Navigation Bar - Mobile First (visible on all screens for demo) --}}
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700 z-50" data-bottom-nav>
    <div class="flex justify-around items-stretch">
        {{-- Dashboard Tab --}}
        <a href="{{ route('provider.dashboard') }}"
           class="flex-1 flex flex-col items-center justify-center py-2 px-2 min-h-16 transition-colors duration-200
                  {{ request()->routeIs('provider.dashboard') 
                      ? 'text-primary border-t-2 border-primary bg-primary-50 dark:bg-gray-700 dark:text-blue-400' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' }}">
            <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
            </svg>
            <span class="text-xs font-medium">Dashboard</span>
        </a>

        {{-- Clients Tab --}}
        <a href="{{ route('provider.clients.index') }}"
           class="flex-1 flex flex-col items-center justify-center py-2 px-2 min-h-16 transition-colors duration-200
                  {{ request()->routeIs('provider.clients.*') 
                      ? 'text-primary border-t-2 border-primary bg-primary-50 dark:bg-gray-700 dark:text-blue-400' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' }}">
            <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <span class="text-xs font-medium">Clients</span>
        </a>

        {{-- Calendar Tab (Center - Featured) --}}
        <a href="{{ route('provider.appointments.calendar') }}"
           class="flex-1 flex flex-col items-center justify-center py-2 px-2 min-h-16 -translate-y-1 transition-all duration-200
                  {{ request()->routeIs('provider.appointments.calendar', 'provider.appointments.*') 
                      ? 'text-white bg-primary dark:bg-primary-600 rounded-t-2xl shadow-lg scale-105' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' }}">
            @php
                $todayCount = auth()->user()->provider->appointments()
                    ->whereDate('start_time', \Carbon\Carbon::today())
                    ->where('status', 'scheduled')
                    ->count();
            @endphp
            <div class="relative">
                @if($todayCount > 0)
                    <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">{{ $todayCount }}</span>
                @endif
                <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h18M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            <span class="text-xs font-medium">Calendrier</span>
        </a>

        {{-- Finances Tab --}}
        <a href="{{ route('provider.finances.index') }}"
           class="flex-1 flex flex-col items-center justify-center py-2 px-2 min-h-16 transition-colors duration-200
                  {{ request()->routeIs('provider.finances.*', 'provider.payments.*', 'provider.expenses.*', 'provider.invoices.*', 'provider.treasury.*') 
                      ? 'text-primary border-t-2 border-primary bg-primary-50 dark:bg-gray-700 dark:text-blue-400' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' }}">
            <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="text-xs font-medium">Finances</span>
        </a>

        {{-- Settings Tab --}}
        <a href="{{ route('provider.tax-settings.index') }}"
           class="flex-1 flex flex-col items-center justify-center py-2 px-2 min-h-16 transition-colors duration-200
                  {{ request()->routeIs('provider.settings.*', 'provider.services.*', 'provider.expense-settings.*', 'provider.expense-types.*', 'provider.suppliers.*', 'provider.client-tags.*', 'provider.appointment-settings.*', 'provider.client-settings.*', 'provider.general-settings.*', 'provider.tax-settings.*', 'provider.taxes.*') 
                      ? 'text-primary border-t-2 border-primary bg-primary-50 dark:bg-gray-700 dark:text-blue-400' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' }}">
            <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            <span class="text-xs font-medium">Paramètres</span>
        </a>
    </div>
</nav>