@php($item = $category ?? null)

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
    <x-admin.text-input 
        name="name" 
        label="Category Name" 
        :value="old('name', $item?->name)" 
        required 
        placeholder="Enter category name" 
    />

    <x-admin.text-input 
        name="name_km" 
        label="Category Name (Khmer)" 
        :value="old('name_km', $item?->name_km)" 
        placeholder="Enter category name in Khmer" 
    />

    <x-admin.text-input 
        name="code" 
        label="Code" 
        :value="old('code', $item?->code)" 
        required 
        placeholder="e.g., bedding-sets" 
    />

    <div class="md:col-span-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category Image</label>
        <div class="space-y-4">
            @if($item?->image)
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Image</label>
                    <img src="{{ public_asset_url($item->image) }}" alt="Current" class="max-w-xs h-40 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-800 shadow-md">
                </div>
            @endif

            <!-- Image Upload -->
            <div>
                <x-admin.file-upload 
                    name="image_upload" 
                    id="image_upload" 
                    :label="$item ? 'Upload New Image' : 'Upload Image'" 
                    accept="image/*" 
                    help-text="Max size: 5MB. Formats: JPEG, PNG, JPG, GIF, WEBP" 
                    onchange="previewImage(this, 'image_preview')"
                />
            </div>
            
            <!-- Image Preview -->
            <div id="image_preview_container" class="hidden">
                <label class="block text-sm text-gray-600 dark:text-gray-400 mb-2">Preview</label>
                <div class="relative inline-block">
                    <img id="image_preview" src="" alt="Preview" class="max-w-xs h-32 object-cover rounded border border-gray-200 dark:border-gray-800">
                    <button type="button" onclick="clearImagePreview('image_preview', 'image_upload')" 
                            class="absolute top-0 right-0 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                        ×
                    </button>
                </div>
            </div>
            
            <!-- Or Image URL -->
            <x-admin.text-input 
                name="image" 
                id="image_url" 
                label="Or Enter Image URL" 
                :value="old('image', $item?->image)" 
                placeholder="https://example.com/image.jpg" 
                onchange="previewImageUrl(this, 'image_preview')"
            />
        </div>
    </div>

    @if(isset($mainCategories) && isset($item) && method_exists($item, 'isSubcategory') && $item->isSubcategory())
        <x-admin.select-input 
            name="parent_id" 
            label="Parent Category" 
            placeholder="None (Make it main category)"
        >
            @foreach($mainCategories as $mainCategory)
                <option value="{{ $mainCategory->id }}" {{ old('parent_id', $item->parent_id) == $mainCategory->id ? 'selected' : '' }}>
                    {{ $mainCategory->name }}
                </option>
            @endforeach
        </x-admin.select-input>
    @endif

    <x-admin.textarea 
        name="description" 
        label="Description" 
        :value="old('description', $item?->description)" 
        rows="3" 
        class="md:col-span-2" 
        placeholder="Enter category description..." 
    />

    <x-admin.textarea 
        name="description_km" 
        label="Description (Khmer)" 
        :value="old('description_km', $item?->description_km)" 
        rows="3" 
        class="md:col-span-2" 
        placeholder="Enter category description in Khmer..." 
    />
</div>

<div class="mt-6 md:mt-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 sm:gap-4 pt-4 md:pt-6 border-t border-gray-200 dark:border-gray-800">
    <a href="{{ route('admin.categories.index') }}" class="btn-danger">
        <i class="fas fa-times mr-2"></i>Cancel
    </a>
    <button type="submit" class="btn-primary">
        <i class="fas fa-plus"></i> {{ $item ? 'Update Category' : 'Create Category' }}
    </button>
</div>