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

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

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

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

    <x-admin.select-input 
        name="parent_id" 
        label="Parent Category" 
        required 
        placeholder="Select a parent category"
    >
        @foreach($mainCategories as $category)
            <option value="{{ $category->id }}" {{ old('parent_id', $item?->parent_id) == $category->id ? 'selected' : '' }}>
                {{ $category->name }}
            </option>
        @endforeach
    </x-admin.select-input>

    <div class="md:col-span-2">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Subcategory 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>

    <x-admin.textarea 
        name="description" 
        label="Description" 
        :value="old('description', $item?->description)" 
        rows="3" 
        class="md:col-span-2" 
        placeholder="Enter subcategory 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 subcategory 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.subcategories.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 mr-2"></i>{{ $item ? 'Update Subcategory' : 'Create Subcategory' }}
    </button>
</div>