<nav x-data="{ mobileMenuOpen: false, notifOpen: false, userMenuOpen: false }" class="bg-white border-b border-orange-100 shadow-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 lg:h-20">

            <!-- Logo & Brand -->
            <div class="flex items-center">
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('product.index') }}" class="flex items-center group">
                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shadow-md transition-all group-hover:scale-105 gradient-primary">
                            <i class="fas fa-store text-white text-lg"></i>
                        </div>
                        <div class="ml-3">
                            <span class="text-xl font-extrabold hidden sm:inline brand-gradient">INTERIA</span>
                            <span class="text-xl font-extrabold sm:hidden brand-gradient">IN</span>
                        </div>
                    </a>
                </div>

                <!-- Desktop Navigation Links -->
                <div class="hidden md:flex md:items-center md:space-x-1 md:ms-8">
                    @php
                    $navItemClass = "px-4 py-2.5 rounded-xl transition-all duration-200 text-stone-700 font-medium text-sm inline-flex items-center gap-2";
                    $navHoverClass = "hover:bg-orange-50 hover:text-orange-600";
                    $navActiveClass = "bg-orange-100 text-orange-600 font-semibold shadow-sm";
                    @endphp

                    <x-nav-link :href="route('product.index')" :active="request()->routeIs('product.index')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('product.index') ? $navActiveClass : '' }}">
                            <i class="fas fa-couch text-sm"></i>
                            Koleksi
                        </span>
                    </x-nav-link>

                    @auth
                    @if(Auth::user()->isAdmin())
                    <x-nav-link :href="route('admin.order.index')" :active="request()->routeIs('admin.order.*')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('admin.order.*') ? $navActiveClass : '' }}">
                            <i class="fas fa-shopping-bag text-sm"></i>
                            Orders
                        </span>
                    </x-nav-link>

                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('dashboard') ? $navActiveClass : '' }}">
                            <i class="fas fa-chart-pie text-sm"></i>
                            Dashboard
                        </span>
                    </x-nav-link>

                    <x-nav-link :href="route('admin.category.index')" :active="request()->routeIs('admin.category.index')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('admin.category.index') ? $navActiveClass : '' }}">
                            <i class="fas fa-tags text-sm"></i>
                            Kategori
                        </span>
                    </x-nav-link>

                    <x-nav-link :href="route('admin.product.index')" :active="request()->routeIs('admin.product.*')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('admin.product.*') ? $navActiveClass : '' }}">
                            <i class="fas fa-cogs text-sm"></i>
                            Kelola
                        </span>
                    </x-nav-link>
                    @else
                    <x-nav-link :href="route('order.index')" :active="request()->routeIs('order.index')">
                        <span class="{{ $navItemClass }} {{ $navHoverClass }} {{ request()->routeIs('order.index') ? $navActiveClass : '' }}">
                            <i class="fas fa-shopping-bag text-sm"></i>
                            Pesanan
                        </span>
                    </x-nav-link>
                    @endif
                    @endauth
                </div>
            </div>

            <!-- Desktop Right Side -->
            <div class="hidden md:flex md:items-center md:space-x-4">
                <!-- Real-time Clock -->
                <div class="px-3 py-1.5 bg-orange-50 rounded-xl border border-orange-100 flex items-center gap-2 shadow-sm">
                    <i class="fas fa-clock text-orange-500 text-xs"></i>
                    <span id="real-time-clock" class="text-xs font-bold text-orange-700 tracking-wider">--:--:--</span>
                </div>

                @auth
                <!-- ADMIN NOTIFICATION -->
                @if(Auth::user()->isAdmin())
                <div class="relative">
                    <button @click="notifOpen = !notifOpen"
                        class="relative inline-flex items-center justify-center w-10 h-10 rounded-xl text-white transition-all duration-200 gradient-primary">
                        <i class="fas fa-bell text-lg"></i>
                        @php
                        $unreadCount = auth()->user()->unreadNotifications->count();
                        @endphp
                        @if($unreadCount > 0)
                        <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold min-w-[20px] h-5 px-1.5 rounded-full flex items-center justify-center shadow-md animate-pulse">
                            {{ $unreadCount > 99 ? '99+' : $unreadCount }}
                        </span>
                        @endif
                    </button>

                    <!-- Notification Dropdown -->
                    <div x-show="notifOpen"
                        @click.away="notifOpen = false"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-2"
                        class="absolute right-0 mt-2 w-80 sm:w-96 bg-white rounded-2xl shadow-xl border border-orange-100 z-50 overflow-hidden">

                        <div class="px-4 py-3 border-b border-orange-100 bg-gradient-to-r from-orange-50 to-white">
                            <div class="flex items-center justify-between">
                                <div class="text-sm font-semibold text-stone-800 flex items-center gap-2">
                                    <i class="fas fa-bell text-orange-500"></i>
                                    Notifikasi
                                </div>
                                @if($unreadCount > 0)
                                <button onclick="markAllRead()" class="text-xs text-orange-600 hover:text-orange-700 font-medium">
                                    Tandai semua sudah dibaca
                                </button>
                                @endif
                            </div>
                        </div>

                        <div class="max-h-96 overflow-y-auto divide-y divide-orange-50">
                            @forelse(auth()->user()->unreadNotifications as $notification)
                            @php $d = $notification->data; @endphp
                            <a href="{{ $d['url'] ?? route('admin.order.index') }}"
                                onclick="markRead('{{ $notification->id }}', event)"
                                class="block px-4 py-3 hover:bg-orange-50 transition-all duration-200 cursor-pointer">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-100 to-orange-50 flex items-center justify-center flex-shrink-0">
                                        <i class="{{ $d['icon'] ?? 'fas fa-shopping-bag' }} text-orange-500 text-sm"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-semibold text-stone-800">
                                            {{ $d['message'] ?? 'Pesanan baru' }}
                                        </p>
                                        @if(!empty($d['products']))
                                        <p class="text-xs text-stone-500 mt-0.5 truncate">
                                            <i class="fas fa-box text-orange-400 mr-1"></i>{{ $d['products'] }}
                                        </p>
                                        @endif
                                        <div class="flex items-center justify-between mt-1 gap-2">
                                            @if(!empty($d['total_price']))
                                            <span class="text-xs font-bold text-orange-600">
                                                Rp {{ number_format($d['total_price'], 0, ',', '.') }}
                                            </span>
                                            @endif
                                            <span class="text-xs text-stone-400">
                                                {{ $notification->created_at->diffForHumans() }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="w-2 h-2 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
                                </div>
                            </a>
                            @empty
                            <div class="px-4 py-8 text-center">
                                <i class="fas fa-bell-slash text-stone-300 text-3xl mb-3"></i>
                                <p class="text-sm text-stone-500">Tidak ada notifikasi baru</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                @endif

                <!-- CART BUTTON -->
                @if(!Auth::user()->isAdmin())
                <a href="{{ route('cart.index') }}"
                    class="relative inline-flex items-center justify-center h-10 px-4 text-white rounded-xl transition-all duration-200 group gradient-primary">
                    <i class="fas fa-shopping-cart mr-2 text-sm"></i>
                    <span class="text-sm font-medium hidden sm:inline">Keranjang</span>
                    @php
                    $cartCount = optional(auth()->user()->cartItems)->count() ?? 0;
                    @endphp
                    @if($cartCount > 0)
                    <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold min-w-[20px] h-5 px-1.5 rounded-full flex items-center justify-center shadow-md animate-pulse">
                        {{ $cartCount > 99 ? '99+' : $cartCount }}
                    </span>
                    @endif
                </a>
                @endif

                <!-- USER DROPDOWN BUTTON -->
                <div class="relative">
                    <button @click="userMenuOpen = !userMenuOpen"
                        class="inline-flex items-center justify-center gap-2 h-10 px-3 rounded-xl transition-all duration-200 group gradient-primary text-white">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 bg-white/20">
                            <i class="fas fa-user text-xs"></i>
                        </div>
                        <div class="text-left hidden lg:block text-sm font-semibold">
                            {{ Str::limit(Auth::user()->name, 15) }}
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform" :class="{'rotate-180': userMenuOpen}"></i>
                    </button>

                    <!-- User Dropdown Menu -->
                    <div x-show="userMenuOpen"
                        @click.away="userMenuOpen = false"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-2"
                        class="absolute right-0 mt-2 w-64 bg-white rounded-2xl shadow-xl border border-orange-100 z-50 overflow-hidden">

                        <div class="px-4 py-3 border-b border-orange-100" style="background: linear-gradient(to right, #fef3c7, #fff);">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center shadow-md flex-shrink-0 gradient-primary">
                                    <i class="fas fa-user text-white text-sm"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="text-sm font-semibold text-stone-800 truncate">
                                        {{ Auth::user()->name }}
                                    </div>
                                    <div class="text-xs text-stone-500 truncate">
                                        {{ Auth::user()->email }}
                                    </div>
                                </div>
                            </div>
                            <div class="inline-flex items-center mt-2 px-2 py-0.5 bg-orange-100 text-orange-700 text-xs font-medium rounded-full">
                                <i class="fas fa-shield-alt text-xs mr-1"></i>
                                {{ Auth::user()->isAdmin() ? 'Administrator' : 'Customer' }}
                            </div>
                        </div>

                        <div class="py-2">
                            <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-stone-700 hover:bg-orange-50 hover:text-orange-700 transition-all duration-200">
                                <div class="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-user-circle text-orange-700 text-sm"></i>
                                </div>
                                <span>Profile</span>
                            </a>

                            @if(Auth::user()->isAdmin())
                            <a href="{{ route('admin.shipping.settings') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-stone-700 hover:bg-orange-50 hover:text-orange-700 transition-all duration-200">
                                <div class="w-7 h-7 bg-orange-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-truck text-orange-700 text-sm"></i>
                                </div>
                                <span>Pengiriman</span>
                            </a>
                            @endif

                            <form method="POST" action="{{ route('logout') }}" class="border-t border-orange-100 mt-1 pt-1">
                                @csrf
                                <button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-all duration-200">
                                    <div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-sign-out-alt text-red-500 text-sm"></i>
                                    </div>
                                    <span>Log Out</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                @else
                <a href="{{ route('login') }}" class="inline-flex items-center justify-center h-10 px-4 text-sm font-medium transition-all duration-200 text-orange-600 hover:text-orange-700">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    Masuk
                </a>
                <a href="{{ route('register') }}" class="inline-flex items-center justify-center h-10 px-4 text-white text-sm font-medium rounded-xl transition-all duration-200 gradient-primary">
                    <i class="fas fa-user-plus mr-2"></i>
                    Daftar
                </a>
                @endauth
            </div>

            <!-- Mobile Menu Button -->
            <div class="flex md:hidden items-center space-x-3">
                @auth
                @if(!Auth::user()->isAdmin())
                <a href="{{ route('cart.index') }}" class="relative">
                    <i class="fas fa-shopping-cart text-xl text-orange-600"></i>
                    @php $cartCount = optional(auth()->user()->cartItems)->count() ?? 0; @endphp
                    @if($cartCount > 0)
                    <span class="absolute -top-2 -right-2 text-white text-xs font-bold min-w-[18px] h-4 px-1 rounded-full flex items-center justify-center bg-red-500">
                        {{ $cartCount > 99 ? '99+' : $cartCount }}
                    </span>
                    @endif
                </a>
                @endif

                <button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white border-2 border-orange-500 text-orange-600 transition-all duration-200">
                    <i class="fas fa-bars text-lg"></i>
                </button>
                @else
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white border-2 border-orange-500 text-orange-600 transition-all duration-200">
                    <i class="fas fa-bars text-lg"></i>
                </button>
                @endauth
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div x-show="mobileMenuOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-4"
        class="md:hidden bg-white border-t border-orange-100 shadow-lg">
        <div class="px-4 py-3 space-y-1">
            @auth
            <div class="px-3 py-3 mb-2 rounded-xl border border-orange-100" style="background: linear-gradient(to right, #fef3c7, #fff);">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center gradient-primary">
                        <i class="fas fa-user text-white"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-stone-800">{{ Auth::user()->name }}</div>
                        <div class="text-xs text-stone-500">{{ Auth::user()->email }}</div>
                        <div class="inline-flex mt-1 px-2 py-0.5 bg-orange-100 text-orange-700 text-xs rounded-full">
                            {{ Auth::user()->isAdmin() ? 'Admin' : 'Customer' }}
                        </div>
                    </div>
                </div>
            </div>

            <a href="{{ route('product.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-couch w-5 text-orange-500"></i>
                <span class="font-medium">Koleksi</span>
            </a>

            @if(Auth::user()->isAdmin())
            <a href="{{ route('admin.order.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-shopping-bag w-5 text-orange-500"></i>
                <span class="font-medium">Orders</span>
            </a>
            <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-chart-pie w-5 text-orange-500"></i>
                <span class="font-medium">Dashboard</span>
            </a>
            <a href="{{ route('admin.category.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-tags w-5 text-orange-500"></i>
                <span class="font-medium">Kategori</span>
            </a>
            <a href="{{ route('admin.product.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-couch w-5 text-orange-500"></i>
                <span class="font-medium">Kelola</span>
            </a>
            <a href="{{ route('admin.shipping.settings') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-truck w-5 text-orange-500"></i>
                <span class="font-medium">Pengiriman</span>
            </a>
            @else
            <a href="{{ route('order.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-shopping-bag w-5 text-orange-500"></i>
                <span class="font-medium">Pesanan</span>
            </a>
            @endif

            <div class="border-t border-orange-100 my-2"></div>

            <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-user-circle w-5 text-orange-500"></i>
                <span class="font-medium">Profile</span>
            </a>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-red-600 hover:bg-red-50 transition-all duration-200">
                    <i class="fas fa-sign-out-alt w-5 text-red-500"></i>
                    <span class="font-medium">Log Out</span>
                </button>
            </form>
            @else
            <a href="{{ route('login') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-stone-700 hover:bg-orange-50 hover:text-orange-600 transition-all duration-200">
                <i class="fas fa-sign-in-alt w-5 text-orange-500"></i>
                <span class="font-medium">Masuk</span>
            </a>
            <a href="{{ route('register') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-orange-600 hover:bg-orange-50 transition-all duration-200">
                <i class="fas fa-user-plus w-5"></i>
                <span class="font-medium">Daftar</span>
            </a>
            @endauth
        </div>
    </div>
</nav>

<style>
    /* Animasi pulse untuk badge cart */
    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }

    .animate-pulse {
        animation: pulse 1.5s infinite;
    }
</style>

<script>
    function markRead(id, event) {
        event.preventDefault();
        const href = event.currentTarget.getAttribute('href');
        const item = event.currentTarget; // simpan referensi sebelum async

        // Animasi item menghilang
        item.style.transition = 'opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease 0.2s, padding 0.3s ease 0.2s';
        item.style.overflow = 'hidden';
        item.style.maxHeight = item.offsetHeight + 'px';
        item.style.opacity = '0';
        item.style.transform = 'translateX(16px)';

        setTimeout(() => {
            item.style.maxHeight = '0';
            item.style.paddingTop = '0';
            item.style.paddingBottom = '0';
        }, 220);

        // Kirim mark-as-read (tidak blocking redirect)
        fetch('/notifications/' + id + '/mark-as-read', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                'Accept': 'application/json',
            }
        });

        // Redirect setelah animasi selesai
        setTimeout(() => {
            window.location.href = href;
        }, 520);
    }

    function markAllRead() {
        fetch('/notifications/mark-all-as-read', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                'Accept': 'application/json',
            }
        }).then(() => {
            location.reload();
        }).catch(() => {
            location.reload();
        });
    }

    // Real-time Clock Logic
    function updateClock() {
        const clockEl = document.getElementById('real-time-clock');
        if (!clockEl) return;

        const now = new Date();
        const options = {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        };
        // Karena server sudah Asia/Jakarta, kita tampilkan waktu lokal browser yang biasanya sudah sesuai
        clockEl.textContent = now.toLocaleTimeString('id-ID', options);
    }

    document.addEventListener('DOMContentLoaded', () => {
        updateClock();
        setInterval(updateClock, 1000);
    });
</script>