<x-layouts.portal title="Menu Management" page-title="Restaurant Menu">

<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
    <div>
        <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Inventory</h2>
        <p class="text-[10px] text-zinc-400 mt-0.5">Manage your dishes, drinks, and prices.</p>
    </div>
    <div class="flex items-center space-x-3 w-full md:w-auto">
        <form action="{{ route('portal.items.index') }}" method="GET" class="flex-1 md:flex-none flex items-center space-x-2">
            <div class="relative flex-1">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search items..." 
                    class="w-full md:w-48 px-3 py-1.5 bg-white border border-zinc-200 rounded-sm text-[10px] uppercase font-bold tracking-tight focus:outline-hidden focus:border-amber-500/50">
                <button type="submit" class="absolute right-2 top-1.5 text-zinc-400">
                    <svg class="w-3.5 h-3.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"></path></svg>
                </button>
            </div>
            
            <select name="category_id" onchange="this.form.submit()" 
                class="px-3 py-1.5 bg-white border border-zinc-200 rounded-sm text-[10px] uppercase font-bold tracking-tight focus:outline-hidden focus:border-amber-500/50">
                <option value="">All Categories</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                    @foreach($category->children as $child)
                        <option value="{{ $child->id }}" {{ request('category_id') == $child->id ? 'selected' : '' }}>
                            &nbsp;&nbsp;↳ {{ $child->name }}
                        </option>
                    @endforeach
                @endforeach
            </select>
        </form>
        <x-button :href="route('portal.items.create')">
            Add New Item
        </x-button>
    </div>
</div>



<div class="space-y-10">
    @forelse($items->groupBy('category_id') as $categoryId => $categoryItems)
        @php $category = $categoryItems->first()->category; @endphp
        <div>
            <div class="flex items-center mb-6">
                <div class="bg-amber-600 h-5 w-1 rounded-full mr-3 shadow-lg shadow-amber-900/20"></div>
                <h3 class="text-[11px] font-black text-zinc-900 uppercase tracking-widest">{{ $category->name ?? 'Uncategorized' }}</h3>
                <span class="ml-4 flex-1 h-[1px] bg-zinc-200"></span>
                <span class="ml-4 text-[9px] font-bold text-zinc-400 uppercase tracking-tighter">{{ $categoryItems->count() }} Items</span>
            </div>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                @foreach($categoryItems as $item)
                    <x-item-card :item="$item" />
                @endforeach
            </div>
        </div>
    @empty
        <div class="py-24 text-center bg-white border border-zinc-200 rounded-sm shadow-sm">
            <div class="opacity-20 mb-4">
                <svg class="w-16 h-16 mx-auto text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
            </div>
            <h3 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">No Items Found</h3>
            <p class="text-[10px] text-zinc-400 mt-2">Try adjusting your filters or add your first menu item.</p>
        </div>
    @endforelse
</div>

<div class="mt-8">
    {{ $items->links() }}
</div>

</x-layouts.portal>
