@extends('layouts.admin')

@section('title', 'Footwear Categories')

@section('content')

<div class="space-y-6">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="font-display font-bold text-xl text-white">All Categories ({{ $categories->total() }})</h2>
            <p class="text-xs text-slate-400">Manage footwear styles and customer catalog filtering groupings.</p>
        </div>

        <a href="{{ route('admin.categories.create') }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-glow transition flex items-center gap-1.5 shrink-0 w-fit">
            <span>+ Add Category</span>
        </a>
    </div>

    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-4">
        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 border-b border-white/10 pb-2">
                        <th class="py-3 px-3 font-bold">Category Name</th>
                        <th class="py-3 font-bold">URL Slug</th>
                        <th class="py-3 font-bold">Products Count</th>
                        <th class="py-3 font-bold">Status</th>
                        <th class="py-3 text-right font-bold">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-slate-300">
                    @forelse($categories as $cat)
                        <tr class="border-b border-white/5 hover:bg-white/5 transition">
                            <td class="py-3 px-3">
                                <span class="font-heading font-bold text-white text-sm block">{{ $cat->name }}</span>
                                <span class="text-[11px] text-slate-400">{{ Str::limit($cat->description, 50) }}</span>
                            </td>
                            <td class="py-3 font-mono text-slate-400">/shop?category={{ $cat->slug }}</td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full bg-brand/20 text-brand-light font-bold text-[11px]">
                                    {{ $cat->products_count }} Products
                                </span>
                            </td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $cat->is_active ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-slate-500/10 text-slate-400 border border-slate-500/20' }}">
                                    {{ $cat->is_active ? 'Active' : 'Hidden' }}
                                </span>
                            </td>
                            <td class="py-3 text-right space-x-2">
                                <a href="{{ route('admin.categories.edit', $cat) }}" class="bg-brand/20 hover:bg-brand/30 text-brand-light border border-brand/30 px-3 py-1 rounded-lg text-xs font-bold transition inline-block">
                                    Edit
                                </a>
                                <form action="{{ route('admin.categories.destroy', $cat) }}" method="POST" class="inline" onsubmit="return confirm('Delete category {{ $cat->name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 px-2.5 py-1 rounded-lg text-xs font-bold transition">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-slate-500">No categories found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="pt-4 border-t border-white/10">
            {{ $categories->links() }}
        </div>
    </div>

</div>

@endsection