@extends('admin.layout')
@section('title', 'Categories')
@section('subtitle', $categories->count() . ' total')

@section('content')
<div class="flex justify-end mb-4">
    <a href="{{ route('admin.categories.create') }}" class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">+ New Category</a>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
    @foreach ($categories as $cat)
        <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
            <div class="h-16 flex items-center justify-center text-2xl text-white"
                 style="background: linear-gradient(90deg, {{ $cat->gradient[0] ?? '#64748b' }}, {{ $cat->gradient[1] ?? '#94a3b8' }});">
                {{ $cat->icon }}
            </div>
            <div class="p-4">
                <div class="flex justify-between items-start mb-1">
                    <h3 class="font-semibold">{{ $cat->label }}</h3>
                    <span class="text-xs text-slate-500">order {{ $cat->sort_order }}</span>
                </div>
                <div class="text-xs text-slate-500 font-mono">{{ $cat->slug }}</div>
                <p class="text-sm text-slate-600 mt-2">{{ $cat->description }}</p>
                <div class="mt-3 flex items-center justify-between">
                    <span class="text-xs text-slate-500">{{ $cat->questions_count }} questions</span>
                    <div class="flex gap-2">
                        <a href="{{ route('admin.categories.edit', $cat) }}" class="text-blue-600 text-sm hover:underline">Edit</a>
                        <form method="POST" action="{{ route('admin.categories.destroy', $cat) }}" onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button class="text-red-600 text-sm hover:underline">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection