<nav x-data="{ open: false }" class="bg-white border-b border-gray-100 sticky top-0 z-50 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            
            <div class="flex">
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('home') }}" class="text-2xl font-black text-emerald-600 tracking-tighter hover:opacity-80 transition">
                        <span class="text-gray-800">ELEVATE</span>
                    </a>
                </div>

                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    
                    {{-- Beranda: hanya customer dan guest (KURIR TIDAK ADA) --}}
                    @if(!Auth::check() || Auth::user()->role === 'customer')
                        <x-nav-link :href="route('home')" :active="request()->routeIs('home')">
                            {{ __('Halaman Utama') }}
                        </x-nav-link>
                    @endif

                    {{-- Dashboard untuk admin di navbar --}}
                    @auth
                        @if(Auth::user()->role === 'admin')
                            <x-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')">
                                {{ __('Dashboard') }}
                            </x-nav-link>
                        @endif
                    @endauth

                    {{-- Katalog: hanya customer --}}
                    @auth
                        @if(Auth::user()->role === 'customer')
                            <x-nav-link :href="route('products.index')" :active="request()->routeIs('products.*')">
                                {{ __('Koleksi') }}
                            </x-nav-link>
                        @endif
                    @endauth

                    {{-- ── MENU ADMIN ── --}}
                    @auth
                        @if(Auth::user()->role === 'admin')
                            <div class="hidden sm:flex sm:items-center sm:ml-6">
                                <x-dropdown align="left" width="48">
                                    <x-slot name="trigger">
                                        <button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-emerald-600 hover:text-emerald-800 focus:outline-none transition">
                                            <div>Menu Admin</div>
                                            <div class="ml-1">
                                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                </svg>
                                            </div>
                                        </button>
                                    </x-slot>
                                    <x-slot name="content">
                                        <div class="px-4 py-2 text-xs text-gray-400 uppercase font-bold border-b">Master Data</div>
                                        <x-dropdown-link :href="route('admin.categories.index')">Kategori</x-dropdown-link>
                                        <x-dropdown-link :href="route('admin.brands.index')">Brand</x-dropdown-link>
                                        <x-dropdown-link :href="route('admin.products.index')">Produk</x-dropdown-link>
                                        <x-dropdown-link :href="route('admin.stock-logs.index')">Stock Log Produk</x-dropdown-link>
                                        <x-dropdown-link :href="route('admin.users.index')">Pengguna</x-dropdown-link>
                                        
                                        <div class="border-t border-gray-100 my-1"></div>
                                        <div class="px-4 py-2 text-xs text-gray-400 uppercase font-bold border-b">Transaksi & Ulasan</div>
                                        <x-dropdown-link :href="route('admin.orders.index')">Kelola Pesanan</x-dropdown-link>
                                        <x-dropdown-link :href="route('admin.reviews.index')">Ulasan Pelanggan</x-dropdown-link>
                                    </x-slot>
                                </x-dropdown>
                            </div>
                        @endif

                        {{-- ── MENU KURIR ── --}}
                        @if(Auth::user()->role === 'kurir')
                            <x-nav-link :href="route('kurir.dashboard')" :active="request()->routeIs('kurir.dashboard')">
                                Dashboard
                            </x-nav-link>
                            <x-nav-link :href="route('kurir.orders.index')" :active="request()->routeIs('kurir.orders.*')">
                                Pesanan 
                            </x-nav-link>
                        @endif
                    @endauth

                </div>
            </div>

            {{-- Search bar: hanya customer & guest --}}
            @if(!Auth::check() || Auth::user()->role === 'customer')
            <div class="hidden sm:flex flex-1 items-center justify-center px-8">
                <form action="{{ route('products.index') }}" method="GET" class="w-full max-w-md relative">
                    <input type="text" name="search" value="{{ request('search') }}" 
                           placeholder="Cari produk..." 
                           class="w-full bg-gray-100 border-transparent rounded-full py-2 pl-4 pr-10 focus:bg-white focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50 transition text-sm">
                    <button type="submit" class="absolute right-0 top-0 mt-2 mr-3 text-gray-400 hover:text-emerald-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>
                </form>
            </div>
            @endif

            <div class="hidden sm:flex sm:items-center sm:ml-6 space-x-4">

                {{-- Keranjang: hanya customer --}}
                @if(Auth::check() && Auth::user()->role === 'customer')
                    <a href="{{ route('cart.index') }}" class="text-gray-500 hover:text-emerald-600 relative group p-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6h11l-1.5-6m-8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
                        </svg>
                        @php
                            $cartCount = \App\Models\Cart::where('user_id', Auth::id())->withCount('items')->first()->items_count ?? 0;
                        @endphp
                        @if($cartCount > 0)
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full shadow-sm min-w-[18px] text-center">
                                {{ $cartCount }}
                            </span>
                        @endif
                    </a>
                @endif

                <div class="relative ml-3">
                    @auth
                        <x-dropdown align="right" width="48">
                            <x-slot name="trigger">
                                <button class="inline-flex items-center px-3 py-2 border border-gray-200 text-sm leading-4 font-medium rounded-full text-gray-600 bg-white hover:text-gray-900 focus:outline-none transition shadow-sm hover:shadow-md">
                                    <div class="mr-2">
                                        @if(Auth::user()->role === 'admin')
                                            <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                        @elseif(Auth::user()->role === 'kurir')
                                            <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6"/>
                                            </svg>
                                        @else
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="max-w-[100px] truncate">{{ Auth::user()->name }}</div>
                                    <div class="ml-1">
                                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </button>
                            </x-slot>

                            <x-slot name="content">
                                <div class="px-4 py-2 border-b border-gray-100">
                                    <div class="text-xs text-gray-500">Halo, {{ Auth::user()->name }}</div>
                                    <div class="text-xs font-bold mt-0.5
                                        {{ Auth::user()->role === 'admin' ? 'text-emerald-500' : (Auth::user()->role === 'kurir' ? 'text-emerald-500' : 'text-gray-400') }}">
                                        {{ strtoupper(Auth::user()->role) }}
                                    </div>
                                </div>

                                {{-- ── DROPDOWN CUSTOMER (LENGKAP) ── --}}
                                @if(Auth::user()->role === 'customer')
                                    <x-dropdown-link :href="route('dashboard')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                                        </svg>
                                        Dashboard
                                    </x-dropdown-link>
                                    <x-dropdown-link :href="route('customer.orders.index')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                                        </svg>
                                        Pesanan
                                    </x-dropdown-link>
                                    
                                    {{-- ULASAN SAYA --}}
                                    <x-dropdown-link :href="route('reviews.index')">
                                        <svg class="w-5 h-5 text-yellow-500 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                                        </svg>
                                        Ulasan Saya
                                    </x-dropdown-link>

                                    <x-dropdown-link :href="route('addresses.index')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                        Alamat
                                    </x-dropdown-link>

                                    <div class="border-t border-gray-100 my-1"></div>

                                    <x-dropdown-link :href="route('profile.edit')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                        Profile
                                    </x-dropdown-link>

                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <x-dropdown-link :href="route('logout')"
                                                onclick="event.preventDefault(); this.closest('form').submit();"
                                                class="text-red-600 hover:bg-red-50">
                                            <svg class="w-5 h-5 text-red-500 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                            </svg>
                                            {{ __('Keluar') }}
                                        </x-dropdown-link>
                                    </form>

                                {{-- ── DROPDOWN ADMIN (SEDERHANA: hanya Profile, Logout) --}}
                                @elseif(Auth::user()->role === 'admin')
                                    <x-dropdown-link :href="route('profile.edit')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                        Profile
                                    </x-dropdown-link>

                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <x-dropdown-link :href="route('logout')"
                                                onclick="event.preventDefault(); this.closest('form').submit();"
                                                class="text-red-600 hover:bg-red-50">
                                            <svg class="w-5 h-5 text-red-500 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                            </svg>
                                            {{ __('Keluar') }}
                                        </x-dropdown-link>
                                    </form>

                                {{-- ── DROPDOWN KURIR (SEDERHANA: hanya Profile, Logout) --}}
                                @elseif(Auth::user()->role === 'kurir')
                                    <x-dropdown-link :href="route('profile.edit')">
                                        <svg class="w-5 h-5 text-gray-400 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                        Profile
                                    </x-dropdown-link>

                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <x-dropdown-link :href="route('logout')"
                                                onclick="event.preventDefault(); this.closest('form').submit();"
                                                class="text-red-600 hover:bg-red-50">
                                            <svg class="w-5 h-5 text-red-500 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                            </svg>
                                            {{ __('Keluar') }}
                                        </x-dropdown-link>
                                    </form>
                                @endif
                            </x-slot>
                        </x-dropdown>
                    @else
                        <div class="flex items-center space-x-2">
                            <a href="{{ route('login') }}" class="text-sm font-bold text-gray-600 hover:text-emerald-600 px-3 py-2">Masuk</a>
                            <span class="text-gray-300">|</span>
                            <a href="{{ route('register') }}" class="px-4 py-2 rounded-full bg-emerald-600 text-white text-sm font-bold hover:bg-emerald-700 transition shadow-sm">
                                Daftar
                            </a>
                        </div>
                    @endauth
                </div>
            </div>

            {{-- ── MOBILE HAMBURGER ── --}}
            <div class="-mr-2 flex items-center sm:hidden">
                @if(Auth::check() && Auth::user()->role === 'customer')
                    <a href="{{ route('cart.index') }}" class="mr-4 relative text-gray-500">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6h11l-1.5-6m-8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
                        </svg>
                        @if(isset($cartCount) && $cartCount > 0)
                            <span class="absolute -top-2 -right-2 bg-red-500 text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">
                                {{ $cartCount }}
                            </span>
                        @endif
                    </a>
                @endif

                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none transition">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- ── MOBILE MENU ── --}}
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden bg-white border-t border-gray-200">
        <div class="pt-2 pb-3 space-y-1">
            {{-- Beranda: hanya customer dan guest (KURIR TIDAK ADA) --}}
            @if(!Auth::check() || Auth::user()->role === 'customer')
                <x-responsive-nav-link :href="route('home')" :active="request()->routeIs('home')">
                    {{ __('Beranda') }}
                </x-responsive-nav-link>
            @endif

            @auth
                @if(Auth::user()->role === 'admin')
                    <x-responsive-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')">
                        {{ __('Dashboard') }}
                    </x-responsive-nav-link>
                @endif
            @endauth

            @if(!Auth::check() || Auth::user()->role === 'customer')
                <x-responsive-nav-link :href="route('products.index')" :active="request()->routeIs('products.*')">
                    {{ __('Koleksi Produk') }}
                </x-responsive-nav-link>
            @endif
        </div>

        @auth
            {{-- ── MOBILE: CUSTOMER ── --}}
            @if(Auth::user()->role === 'customer')
            <div class="pt-2 pb-2 border-t border-gray-200 bg-emerald-50">
                <div class="px-4 py-2 text-xs font-bold text-emerald-400 uppercase tracking-wider">
                    Menu Pelanggan
                </div>
                <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                    Dashboard
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('customer.orders.index')" :active="request()->routeIs('customer.orders.index')">
                    Pesanan Saya
                </x-responsive-nav-link>
                
                {{-- ULASAN SAYA (Mobile) --}}
                <x-responsive-nav-link :href="route('reviews.index')" :active="request()->routeIs('reviews.*')">
                    Ulasan Saya
                </x-responsive-nav-link>
                
                <x-responsive-nav-link :href="route('addresses.index')" :active="request()->routeIs('addresses.*')">
                    Alamat Pengiriman
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('cart.index')" :active="request()->routeIs('cart.index')">
                    Keranjang
                </x-responsive-nav-link>
            </div>
            @endif

            {{-- ── MOBILE: ADMIN (Menu lengkap) ── --}}
            @if(Auth::user()->role === 'admin')
            <div class="pt-2 pb-2 border-t border-gray-200 bg-emerald-50">
                <div class="px-4 py-2 text-xs font-bold text-emerald-400 uppercase tracking-wider">Admin Area</div>
                <x-responsive-nav-link :href="route('admin.dashboard')" class="text-emerald-700">Dashboard Admin</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.orders.index')" class="text-emerald-700">Kelola Pesanan</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.reviews.index')" class="text-emerald-700">Ulasan Pelanggan</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.products.index')" class="text-emerald-700">Kelola Produk</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.categories.index')" class="text-emerald-700">Kategori</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.brands.index')" class="text-emerald-700">Brand</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.users.index')" class="text-emerald-700">Kelola Pengguna</x-responsive-nav-link>
            </div>
            @endif

            {{-- ── MOBILE: KURIR (Menu sederhana: Dashboard, Pesanan, Profile, Logout) --}}
            @if(Auth::user()->role === 'kurir')
            <div class="pt-2 pb-2 border-t border-gray-200 bg-emerald-50">
                <div class="px-4 py-2 text-xs font-bold text-emerald-400 uppercase tracking-wider">
                    Menu Kurir
                </div>
                <x-responsive-nav-link :href="route('kurir.dashboard')" :active="request()->routeIs('kurir.dashboard')">
                    Dashboard Kurir
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('kurir.orders.index')" :active="request()->routeIs('kurir.orders.index')">
                    Pesanan
                </x-responsive-nav-link>
            </div>
            @endif

            {{-- ── MOBILE: USER INFO & LOGOUT ── --}}
            <div class="pt-4 pb-1 border-t border-gray-200">
                <div class="px-4 flex items-center">
                    <div class="flex-shrink-0">
                        @if(Auth::user()->role === 'admin')
                            <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        @elseif(Auth::user()->role === 'kurir')
                            <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                            </svg>
                        @else
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        @endif
                    </div>
                    <div class="ml-3">
                        <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                        <div class="font-medium text-sm
                            {{ Auth::user()->role === 'admin' ? 'text-emerald-500' : (Auth::user()->role === 'kurir' ? 'text-emerald-500' : 'text-gray-500') }}">
                            {{ Auth::user()->email }} · {{ strtoupper(Auth::user()->role) }}
                        </div>
                    </div>
                </div>

                <div class="mt-3 space-y-1">
                    <x-responsive-nav-link :href="route('profile.edit')">Edit Profil</x-responsive-nav-link>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-responsive-nav-link :href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();" class="text-red-600">
                            Keluar
                        </x-responsive-nav-link>
                    </form>
                </div>
            </div>
        @else
            <div class="pt-4 pb-4 border-t border-gray-200">
                <div class="space-y-1">
                    <x-responsive-nav-link :href="route('login')">Masuk</x-responsive-nav-link>
                    <x-responsive-nav-link :href="route('register')">Daftar Akun Baru</x-responsive-nav-link>
                </div>
            </div>
        @endauth
    </div>
</nav>