@extends('admin.layout')
@section('title', $category->exists ? 'Edit Category' : 'New Category')

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('admin.categories.index') }}" class="text-sm text-slate-500 hover:underline">← Back</a>

    <form method="POST" action="{{ $category->exists ? route('admin.categories.update', $category) : route('admin.categories.store') }}"
          class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 mt-3 space-y-4">
        @csrf
        @if ($category->exists) @method('PUT') @endif

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Slug</label>
                <input type="text" name="slug" value="{{ old('slug', $category->slug) }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order ?? 0) }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2">
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Label</label>
            <input type="text" name="label" value="{{ old('label', $category->label) }}" required
                   class="w-full rounded-md border border-slate-300 px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Icon (ionicon name or emoji)</label>
            <input type="text" name="icon" value="{{ old('icon', $category->icon) }}" required
                   class="w-full rounded-md border border-slate-300 px-3 py-2">
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Description</label>
            <input type="text" name="description" value="{{ old('description', $category->description) }}"
                   class="w-full rounded-md border border-slate-300 px-3 py-2">
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Gradient From</label>
                <input type="text" name="gradient_from" value="{{ old('gradient_from', $category->gradient[0] ?? '#3B82F6') }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Gradient To</label>
                <input type="text" name="gradient_to" value="{{ old('gradient_to', $category->gradient[1] ?? '#60A5FA') }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm">
            </div>
        </div>

        <div class="flex justify-end pt-4 border-t">
            <button class="bg-slate-900 text-white px-5 py-2 rounded-md">Save</button>
        </div>
    </form>
</div>
@endsection