@php
$currentRoute = request()->route()->getName() ?? '';
@endphp

<header class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between sticky top-0 z-30">
    <div class="flex items-center">
        {{-- Mobile Menu Toggle --}}
        <button onclick="toggleSidebar()" class="lg:hidden mr-4 text-gray-500 hover:text-gray-700 focus:outline-none">
            <i class="fas fa-bars text-xl"></i>
        </button>

        {{-- Breadcrumb --}}
        <nav class="hidden md:flex items-center text-sm">
            <a href="{{ route('dashboard') }}" class="text-gray-500 hover:text-primary-600 transition">Dashboard</a>
            @php
                $segments = explode('.', $currentRoute);
                $breadcrumbs = [];
                $currentUrl = '';

                foreach ($segments as $i => $segment) {
                    if ($i === count($segments) - 1) {
                        $breadcrumbs[] = ['label' => ucwords(str_replace(['-', '_'], ' ', $segment)), 'url' => null];
                    }
                }
            @endphp

            @if(!empty($breadcrumbs))
                <span class="mx-2 text-gray-400">/</span>
                @foreach($breadcrumbs as $crumb)
                    @if($crumb['url'])
                        <a href="{{ $crumb['url'] }}" class="text-gray-500 hover:text-primary-600 transition">{{ $crumb['label'] }}</a>
                    @else
                        <span class="text-gray-800 font-medium">{{ $crumb['label'] }}</span>
                    @endif
                @endforeach
            @endif
        </nav>
    </div>

    <div class="flex items-center space-x-4">
        {{-- Notifications --}}
        <div class="relative">
            @php
                $lowStockCount = \App\Models\LowStockAlert::active()->count();
                $pendingConfirmations = \App\Models\Order::where('order_status', 'order_received')->count();
                $totalNotifications = $lowStockCount + $pendingConfirmations;
            @endphp

            <button data-dropdown="notifications-dropdown" class="relative p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition">
                <i class="fas fa-bell text-lg"></i>
                @if($totalNotifications > 0)
                    <span class="absolute top-0 right-0 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full font-medium">{{ min($totalNotifications, 99) }}</span>
                @endif
            </button>

            <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                <div class="px-4 py-3 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800">Notifications</h3>
                </div>
                <div class="max-h-64 overflow-y-auto">
                    @if($pendingConfirmations > 0)
                        <a href="{{ route('orders.index', ['order_status' => 'order_received']) }}" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-phone text-yellow-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $pendingConfirmations }} orders need confirmation</p>
                                    <p class="text-xs text-gray-500 mt-0.5">Pending customer confirmation</p>
                                </div>
                            </div>
                        </a>
                    @endif

                    @if($lowStockCount > 0)
                        <a href="{{ route('warehouse.low-stock') }}" class="block px-4 py-3 hover:bg-gray-50">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $lowStockCount }} low stock alerts</p>
                                    <p class="text-xs text-gray-500 mt-0.5">Products below threshold</p>
                                </div>
                            </div>
                        </a>
                    @endif

                    @if($totalNotifications === 0)
                        <div class="px-4 py-6 text-center text-gray-500 text-sm">
                            <i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i>
                            <p>No pending notifications</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Search --}}
        <form action="{{ route('orders.index') }}" method="GET" class="hidden md:flex items-center">
            <div class="relative">
                <input type="text" name="search" placeholder="Search orders..." value="{{ request('search') }}"
                    class="pl-10 pr-4 py-2 bg-gray-100 border-0 rounded-lg text-sm w-64 focus:ring-2 focus:ring-primary-500 focus:bg-white transition">
                <i class="fas fa-search absolute left-3.5 top-2.5 text-gray-400 text-sm"></i>
            </div>
        </form>

        {{-- Quick Actions --}}
        <div class="hidden md:block relative">
            <button data-dropdown="quick-actions-dropdown" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition">
                <i class="fas fa-plus-circle text-lg text-primary-600"></i>
            </button>
            <div id="quick-actions-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                <a href="{{ route('customers.create') }}" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 first:rounded-t-lg">
                    <i class="fas fa-user-plus mr-2 text-gray-400"></i>Add Customer
                </a>
                @if(auth()->user()->canAccessWarehouse())
                <a href="{{ route('warehouse.update-stock') }}" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
                    <i class="fas fa-plus mr-2 text-gray-400"></i>Update Stock
                </a>
                @endif
                @if(auth()->user()->isSuperAdmin())
                <a href="{{ route('shopify.sync-orders') }}" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 last:rounded-b-lg">
                    <i class="fab fa-shopify mr-2 text-gray-400"></i>Sync Shopify
                </a>
                @endif
            </div>
        </div>
    </div>
</header>