@extends('admin.layout')

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

@section('admin')
    <h1 class="text-2xl font-extrabold tracking-tight">Categories</h1>

    <div class="mt-7 grid gap-6 lg:grid-cols-[1fr_320px]">

        {{-- Existing --}}
        <div class="surface overflow-x-auto">
            <table class="w-full min-w-[32rem] text-left text-sm">
                <thead class="border-b border-ink-700 text-xs uppercase tracking-wide text-slate-500">
                    <tr>
                        <th class="px-4 py-3 font-semibold">Name</th>
                        <th class="px-4 py-3 font-semibold">Slug</th>
                        <th class="px-4 py-3 font-semibold">Prompts</th>
                        <th class="px-4 py-3 font-semibold">Order</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-ink-700">
                    @forelse ($categories as $category)
                        <tr>
                            <td class="px-4 py-3">
                                <form method="POST" action="{{ route('admin.categories.update', $category) }}"
                                      id="cat-{{ $category->id }}" class="flex items-center gap-2">
                                    @csrf
                                    @method('PUT')
                                    <input name="icon" value="{{ $category->icon }}" class="field w-14 text-center" maxlength="4">
                                    <input name="name" value="{{ $category->name }}" class="field" required>
                                </form>
                            </td>
                            <td class="px-4 py-3 font-mono text-xs text-slate-500">{{ $category->slug }}</td>
                            <td class="px-4 py-3 text-slate-400">{{ $category->prompts_count }}</td>
                            <td class="px-4 py-3">
                                <input form="cat-{{ $category->id }}" name="sort_order" type="number" min="0"
                                       value="{{ $category->sort_order }}" class="field w-20">
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex justify-end gap-2">
                                    <button form="cat-{{ $category->id }}" type="submit"
                                            class="text-xs font-semibold text-brand-300 hover:text-brand-200">Save</button>
                                    <form method="POST" action="{{ route('admin.categories.destroy', $category) }}"
                                          onsubmit="return confirm('Delete this category? Its prompts stay but become uncategorised.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-xs font-semibold text-rose-400 hover:text-rose-300">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-10 text-center text-slate-500">No categories yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Create --}}
        <form method="POST" action="{{ route('admin.categories.store') }}" class="surface h-fit space-y-4 p-5">
            @csrf
            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500">Add a category</h2>

            <div>
                <label for="new-name" class="label">Name</label>
                <input id="new-name" name="name" value="{{ old('name') }}" required class="field">
            </div>

            <div>
                <label for="new-icon" class="label">Icon (emoji)</label>
                <input id="new-icon" name="icon" value="{{ old('icon') }}" maxlength="4" class="field">
            </div>

            <div>
                <label for="new-description" class="label">Description</label>
                <textarea id="new-description" name="description" rows="3"
                          class="field">{{ old('description') }}</textarea>
            </div>

            <div>
                <label for="new-sort" class="label">Sort order</label>
                <input id="new-sort" name="sort_order" type="number" min="0" value="{{ old('sort_order', 0) }}" class="field">
            </div>

            <button type="submit" class="btn btn-primary w-full">Create category</button>
        </form>
    </div>
@endsection