<x-layouts.portal title="Edit Category" page-title="Update Category">

<div class="max-w-2xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('portal.categories.index') }}" class="flex items-center text-[10px] font-bold text-zinc-500 uppercase tracking-widest hover:text-amber-600 transition-colors">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            Back to List
        </a>
    </div>

    <x-card :title="'Update Details: ' . $category->name">
        <form action="{{ route('portal.categories.update', $category) }}" method="POST" class="space-y-4">
            @csrf
            @method('PATCH')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-input name="name" label="Category Name" :value="old('name', $category->name)" required />
                <x-input name="slug" label="URL Slug" :value="old('slug', $category->slug)" required />
            </div>

            <x-select name="parent_id" label="Parent Category">
                <option value="">-- No Parent (Master Category) --</option>
                @foreach($categories as $parent)
                    <option value="{{ $parent->id }}" {{ old('parent_id', $category->parent_id) == $parent->id ? 'selected' : '' }}>{{ $parent->name }}</option>
                @endforeach
            </x-select>

            <div class="space-y-1">
                <label for="description" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">Description (Optional)</label>
                <textarea name="description" id="description" rows="2"
                    class="w-full px-3 py-2 bg-zinc-50 border border-zinc-200 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all text-zinc-900">{{ old('description', $category->description) }}</textarea>
                @error('description') <p class="text-[9px] text-red-500 mt-1 uppercase font-medium">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <x-input type="number" name="sort_order" label="Display Order" :value="old('sort_order', $category->sort_order)" />
                <x-select name="is_active" label="Status">
                    <option value="1" {{ old('is_active', $category->is_active) == '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ old('is_active', $category->is_active) == '0' ? 'selected' : '' }}>Hidden</option>
                </x-select>
            </div>

            <div class="pt-4 flex justify-end">
                <x-button type="submit">
                    Update Category
                </x-button>
            </div>
        </form>
    </x-card>
</div>
</x-layouts.portal>
