@csrf

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Name</label>
        <input type="text" name="name" value="{{ old('name', $category->name ?? '') }}" required class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Slug</label>
        <input type="text" name="slug" value="{{ old('slug', $category->slug ?? '') }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('slug')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Description</label>
        <textarea name="description" rows="3" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900">{{ old('description', $category->description ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('description')" class="mt-2" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700">Sort order</label>
        <input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order ?? 0) }}" min="0" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('sort_order')" class="mt-2" />
    </div>

    <div class="flex items-center gap-2 pt-6">
        <input type="checkbox" name="is_active" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" @checked(old('is_active', $category->is_active ?? false)) />
        <span class="text-sm text-gray-700">Active</span>
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Icon</label>
        <input type="file" name="icon" accept="image/*" class="mt-1 w-full text-sm" />
        <x-input-error :messages="$errors->get('icon')" class="mt-2" />
        @if (!empty($category?->icon_path))
            <div class="mt-3 flex items-center gap-3 text-sm">
                <img src="{{ asset('storage/'.$category->icon_path) }}" class="w-12 h-12 object-cover rounded-md border border-gray-200" alt="" />
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" name="remove_icon" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" />
                    <span>Remove</span>
                </label>
            </div>
        @endif
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Hero image</label>
        <input type="file" name="hero_image" accept="image/*" class="mt-1 w-full text-sm" />
        <x-input-error :messages="$errors->get('hero_image')" class="mt-2" />
        @if (!empty($category?->hero_image_path))
            <div class="mt-3 flex items-center gap-3 text-sm">
                <img src="{{ asset('storage/'.$category->hero_image_path) }}" class="w-20 h-12 object-cover rounded-md border border-gray-200" alt="" />
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" name="remove_hero_image" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" />
                    <span>Remove</span>
                </label>
            </div>
        @endif
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <button type="submit" class="rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Save</button>
    <a href="{{ route('admin.categories.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Cancel</a>
</div>