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

<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Organization</h2>
        <p class="text-[10px] text-zinc-400 mt-0.5">Manage your menu structure and item groupings.</p>
    </div>
    <x-button :href="route('portal.categories.create')">
        New Category
    </x-button>
</div>



<div class="bg-white border border-zinc-200 rounded-sm shadow-sm overflow-hidden">
    <table class="w-full text-left border-collapse text-zinc-900">
        <thead>
            <tr class="bg-zinc-50 border-b border-zinc-200">
                <th class="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Order</th>
                <th class="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Category Name</th>
                <th class="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Parent</th>
                <th class="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest text-center">Status</th>
                <th class="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-zinc-200">
            @forelse($categories as $category)
                <tr class="hover:bg-zinc-50 transition-colors group">
                    <td class="px-4 py-3 text-[10px] font-medium text-zinc-400">
                        #{{ $category->sort_order }}
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex items-center space-x-3">
                            <div class="w-2 h-2 rounded-full bg-amber-500 {{ $category->parent_id ? 'ml-4' : '' }}"></div>
                            <div>
                                <p class="text-xs font-bold text-zinc-800">{{ $category->name }}</p>
                                <p class="text-[9px] text-zinc-400 uppercase tracking-tighter">{{ $category->slug }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        @if($category->parent)
                            <x-badge variant="zinc" :label="$category->parent->name" />
                        @else
                            <span class="text-[9px] text-zinc-400 uppercase font-bold tracking-widest">Master</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-center">
                        <x-badge :variant="$category->is_active ? 'success' : 'zinc'" :label="$category->is_active ? 'Active' : 'Hidden'" />
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex justify-end items-center space-x-2">
                            <x-button variant="ghost" :href="route('portal.categories.edit', $category)" class="p-1.5!">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                            </x-button>
                            <form action="{{ route('portal.categories.destroy', $category) }}" method="POST" class="inline" onsubmit="return confirm('Delete this category? Items within will become unassigned.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-1.5 text-zinc-400 hover:text-red-600 hover:bg-red-50 rounded-sm transition-all">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="px-4 py-12 text-center">
                        <div class="opacity-20 mb-3">
                            <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
                        </div>
                        <p class="text-xs font-medium text-zinc-400 italic">No categories defined yet.</p>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
</x-layouts.portal>
