<x-app-layout>
    <div class="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-black text-slate-950 dark:text-white">Community Categories</h1>
        <form method="POST" action="{{ route('admin.community.categories.store') }}" class="mt-6 grid gap-3 rounded-lg border border-blue-100 bg-white p-5 md:grid-cols-[1fr_1fr_7rem_auto] dark:border-blue-900/50 dark:bg-slate-900">
            @csrf
            <input name="name" placeholder="Category name" required class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <input name="description" placeholder="Description" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <input name="sort_order" type="number" value="10" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <label class="flex items-center gap-2 text-sm font-bold"><input type="checkbox" name="is_active" value="1" checked> Active</label>
            <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white md:col-span-4">Add Category</button>
        </form>
        <div class="mt-6 space-y-4">
            @foreach ($categories as $category)
                <form method="POST" action="{{ route('admin.community.categories.update', $category) }}" class="grid gap-3 rounded-lg border border-blue-100 bg-white p-5 md:grid-cols-[1fr_1fr_7rem_auto_auto] dark:border-blue-900/50 dark:bg-slate-900">
                    @csrf @method('PATCH')
                    <input name="name" value="{{ $category->name }}" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                    <input name="description" value="{{ $category->description }}" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                    <input name="sort_order" type="number" value="{{ $category->sort_order }}" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                    <label class="flex items-center gap-2 text-sm font-bold"><input type="checkbox" name="is_active" value="1" @checked($category->is_active)> Active</label>
                    <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white">Save</button>
                </form>
                <form method="POST" action="{{ route('admin.community.categories.destroy', $category) }}" class="-mt-3">
                    @csrf @method('DELETE')
                    <button class="text-sm font-bold text-red-600">Delete {{ $category->name }}</button>
                </form>
            @endforeach
        </div>
    </div>
</x-app-layout>
