@extends('admin.layouts.app')

@section('title', 'New Category')
@section('page_title', 'New Category')

@section('content')
    <form action="{{ route('admin.blog.categories.store') }}" method="POST" class="space-y-6">
        @csrf
        

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="grid gap-4 md:grid-cols-2">
        <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Name</label>
            <input type="text" name="name" value="{{ old('name', $item->name ?? '') }}"
                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Slug</label>
            <input type="text" name="slug" value="{{ old('slug', $item->slug ?? '') }}"
                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Sort Order</label>
            <input type="number" name="sort_order" value="{{ old('sort_order', $item->sort_order ?? '') }}"
                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
            <label class="mb-1 block text-sm font-medium text-slate-700">Description</label>
            <textarea name="description" rows="4" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ old('description', $item->description ?? '') }}</textarea>
        </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.blog.categories.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">Cancel</a>
            <button type="submit" class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800">Create</button>
        </div>
    </form>
@endsection