<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">

            <!-- LEFT SIDE -->
            <div class="flex items-center space-x-6">
                @auth
                    <!-- Dashboard -->
                    <x-nav-link href="{{ route('dashboard') }}"
                        :active="request()->routeIs('dashboard')">
                        Dashboard
                    </x-nav-link>

                    <!-- ================= ADMIN ================= -->
                    @if(auth()->user()->role === 'admin')
                        <x-nav-link href="{{ route('kategori.index') }}">
                            Kategori
                        </x-nav-link>

                        <x-nav-link href="{{ route('user.index') }}">
                            User
                        </x-nav-link>
                    @endif

                    <!-- ================= USER ================= -->
                    @if(auth()->user()->role === 'user')
                        <x-nav-link :href="route('produk.index')" :active="request()->routeIs('produk.*')">
                            Produk
                        </x-nav-link>

                        <x-nav-link :href="route('keranjang.index')" :active="request()->routeIs('keranjang.*')">
                            Keranjang
                        </x-nav-link>

                        <x-nav-link :href="route('pesanan.index')" :active="request()->routeIs('pesanan.*')">
                            Pesanan
                        </x-nav-link>

                        <x-nav-link :href="route('chat.index')" :active="request()->routeIs('chat.*')">
                            Chat
                        </x-nav-link>

                        <x-nav-link :href="route('user-alamat.index')" :active="request()->routeIs('user-alamat.*')">
                            Alamat Saya
                        </x-nav-link>

                        <x-nav-link :href="route('toko.create')" :active="request()->routeIs('toko.*')">
                            Buka Toko
                        </x-nav-link>
                    @endif

                    <!-- ================= PENJUAL ================= -->
                    @if(auth()->user()->role === 'penjual')
                        <x-nav-link href="{{ route('produk.index') }}">
                            Produk Toko
                        </x-nav-link>

                       <a href="{{ route('penjual.pesanan-masuk') }}"
                        class="flex items-center gap-2 px-4 py-2 {{ request()->routeIs('penjual.pesanan*') ? 'bg-orange-100 text-orange-600' : 'text-gray-700 hover:bg-orange-50' }} rounded-lg transition">
                            <i class="fas fa-clipboard-list"></i>
                            <span>Pesanan Masuk</span>
                            @php
                                $pendingCount = \App\Models\Pesanan::whereHas('detail.produk', function($q) {
                                    $q->where('user_id', auth()->id());
                                })->where('status', 'pending')->count();
                            @endphp
                            @if($pendingCount > 0)
                                <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">{{ $pendingCount }}</span>
                            @endif
                        </a>
                    @endif
                @endauth
            </div>

            <!-- RIGHT SIDE PROFILE -->
            <div class="hidden sm:flex sm:items-center sm:ms-6 gap-2">
                @if(auth()->check() && auth()->user()->role === 'user')
                    <!-- Cart Icon -->
                    <a href="{{ route('keranjang.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        @if(isset($cartCount) && $cartCount > 0)
                            <span class="absolute top-1 right-1 flex h-3.5 w-3.5">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3.5 w-3.5 bg-red-500 text-white text-[9px] items-center justify-center font-bold">
                                    {{ $cartCount > 99 ? '99+' : $cartCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Chat Icon -->
                    <a href="{{ route('chat.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center">
                        <i class="fas fa-comments text-xl"></i>
                        @if(isset($unreadChatCount) && $unreadChatCount > 0)
                            <span class="absolute top-1 right-1 flex h-3.5 w-3.5">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3.5 w-3.5 bg-red-500 text-white text-[9px] items-center justify-center font-bold">
                                    {{ $unreadChatCount > 99 ? '99+' : $unreadChatCount }}
                                </span>
                            </span>
                        @endif
                    </a>
                @endif

                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button
                            class="flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:text-gray-900 transition">
                            <!-- ICON USER -->
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="h-6 w-6 text-gray-600"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>

                            <span class="text-sm font-medium">
                                {{ Auth::user()->name }}
                            </span>

                            <!-- ARROW -->
                            <svg class="h-4 w-4 text-gray-500"
                                 fill="currentColor" 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>
                        </button>
                    </x-slot>

                    <!-- DROPDOWN -->
                    <x-slot name="content">
                        <!-- Role Info -->
                        <div class="px-4 py-2 text-xs text-gray-500 border-b">
                            @if(Auth::user()->role === 'admin')
                                Admin
                            @elseif(Auth::user()->role === 'penjual')
                                Penjual
                            @else
                                Customer
                            @endif
                        </div>

                        <!-- Logout -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <x-dropdown-link
                                :href="route('logout')"
                                onclick="event.preventDefault(); this.closest('form').submit();"
                                class="flex items-center gap-2 text-red-600">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="h-5 w-5"
                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1m0-10V5"/>
                                </svg>
                                Log Out
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
            </div>
        </div>
    </div>
</nav>
