@php
    $activeOrdersCount = 0;
    $isMitraRole = auth()->check() && auth()->user()->role === 'mitra';
    
    if (auth()->check()) {
        if ($isMitraRole) {
            $activeOrdersCount = auth()->user()->handledOrders()
                ->whereIn('status', ['searching', 'otw', 'in_progress'])
                ->count();
        } else {
            $activeOrdersCount = auth()->user()->orders()
                ->whereIn('status', ['active', 'pending', 'confirmed', 'searching', 'otw', 'in_progress'])
                ->whereNotIn('status', ['cancelled', 'completed'])
                ->whereNotIn('payment_status', ['cancelled', 'failed', 'expired'])
                ->count();
        }
    }

    $pesananUrl = auth()->check() 
        ? ($isMitraRole ? mitra_url('order-mitra') : consumer_url('pesanan'))
        : consumer_url('login');

    $notifUrl = auth()->check()
        ? ($isMitraRole ? mitra_url('notifikasi-mitra') : consumer_url('notifikasi'))
        : consumer_url('login');

    $profilUrl = auth()->check()
        ? ($isMitraRole ? mitra_url('profil-mitra') : consumer_url('profil'))
        : consumer_url('login');

    $consumerNotifCount = isset($unreadNotificationsCount) ? $unreadNotificationsCount : (auth()->check() ? auth()->user()->appNotifications()->where('is_read', false)->count() : 0);
@endphp
<nav class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md z-50 bg-surface rounded-t-xl shadow-[0_-4px_20px_rgba(0,0,0,0.06)] flex justify-around items-center px-4 py-2 pb-safe">
    <!-- Beranda -->
    <a class="flex flex-col items-center justify-center {{ request()->routeIs('order.home*') || request()->routeIs('landing') ? 'bg-secondary-container text-on-secondary-container rounded-xl px-4 py-1.5' : 'text-on-surface-variant p-2 hover:text-primary' }} transition-all active:scale-90 duration-200" href="{{ consumer_url('/') }}">
        <span class="material-symbols-outlined {{ request()->routeIs('order.home*') || request()->routeIs('landing') ? 'icon-fill-1' : '' }}">home</span>
        <span class="font-label-sm text-xs font-semibold">Beranda</span>
    </a>

    <!-- Pesanan -->
    <a class="flex flex-col items-center justify-center {{ request()->routeIs('pesanan*') || request()->routeIs('order-mitra*') ? 'bg-secondary-container text-on-secondary-container rounded-xl px-4 py-1.5' : 'text-on-surface-variant p-2 hover:text-primary' }} transition-all active:scale-90 duration-200" href="{{ $pesananUrl }}">
        <div class="relative inline-flex items-center justify-center">
            <span class="material-symbols-outlined {{ request()->routeIs('pesanan*') || request()->routeIs('order-mitra*') ? 'icon-fill-1' : '' }}">assignment</span>
            @if($activeOrdersCount > 0 && !request()->routeIs('pesanan*') && !request()->routeIs('order-mitra*'))
            <span class="absolute -top-1.5 -right-2.5 min-w-[18px] h-[18px] bg-error text-white text-[10px] font-extrabold rounded-full flex items-center justify-center px-1 shadow-md animate-pulse leading-none">
                {{ $activeOrdersCount > 99 ? '99+' : $activeOrdersCount }}
            </span>
            @endif
        </div>
        <span class="font-label-sm text-xs font-semibold">Pesanan</span>
    </a>

    <!-- Layanan -->
    <a class="flex flex-col items-center justify-center {{ request()->routeIs('services*') ? 'bg-secondary-container text-on-secondary-container rounded-xl px-4 py-1.5' : 'text-on-surface-variant p-2 hover:text-primary' }} transition-all active:scale-90 duration-200" href="{{ consumer_url('services') }}">
        <span class="material-symbols-outlined {{ request()->routeIs('services*') ? 'icon-fill-1' : '' }}">spa</span>
        <span class="font-label-sm text-xs font-semibold">Layanan</span>
    </a>

    <!-- Notifikasi -->
    <a class="flex flex-col items-center justify-center {{ request()->routeIs('notifikasi*') || request()->routeIs('notifikasi-mitra*') ? 'bg-secondary-container text-on-secondary-container rounded-xl px-4 py-1.5' : 'text-on-surface-variant p-2 hover:text-primary' }} transition-all active:scale-90 duration-200" href="{{ $notifUrl }}">
        <div class="relative inline-flex items-center justify-center">
            <span class="material-symbols-outlined {{ request()->routeIs('notifikasi*') || request()->routeIs('notifikasi-mitra*') ? 'icon-fill-1' : '' }}">notifications</span>
            <span id="bottom-nav-notif-badge" class="absolute -top-1.5 -right-2.5 min-w-[18px] h-[18px] bg-error text-white text-[10px] font-extrabold rounded-full {{ $consumerNotifCount > 0 && !request()->routeIs('notifikasi*') && !request()->routeIs('notifikasi-mitra*') ? 'flex' : 'hidden' }} items-center justify-center px-1 shadow-md animate-pulse leading-none">
                {{ $consumerNotifCount > 99 ? '99+' : $consumerNotifCount }}
            </span>
        </div>
        <span class="font-label-sm text-xs font-semibold">Notifikasi</span>
    </a>

    <!-- Profil -->
    <a class="flex flex-col items-center justify-center {{ request()->routeIs('profil*') || request()->routeIs('profil-mitra*') ? 'bg-secondary-container text-on-secondary-container rounded-xl px-4 py-1.5' : 'text-on-surface-variant p-2 hover:text-primary' }} transition-all active:scale-90 duration-200" href="{{ $profilUrl }}">
        <span class="material-symbols-outlined {{ request()->routeIs('profil*') || request()->routeIs('profil-mitra*') ? 'icon-fill-1' : '' }}">person</span>
        <span class="font-label-sm text-xs font-semibold">Profil</span>
    </a>
</nav>

@if(auth()->check() && auth()->user()->role === 'konsumen')
<script src="{{ asset('js/chime-notification.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.consumerNotifWatcher = new TerapiskuNotificationWatcher({
            endpoint: "{{ consumer_url('notifikasi/unread-count') }}",
            intervalMs: 12000,
            userRole: 'konsumen',
            targetUrl: "{{ consumer_url('notifikasi') }}"
        });
    });
</script>
@endif