@php
    $item = $product ?? $duplicateProduct ?? null;
    $prefillImages = old('images', $item?->images ?? []);
    $prefillFeatured = is_array($prefillImages) && count($prefillImages) > 0 ? $prefillImages[0] : null;
    $prefillGallery = is_array($prefillImages) && count($prefillImages) > 1 ? array_slice($prefillImages, 1) : [];
@endphp

<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Language Tabs Container -->
        <div class="md:col-span-2">
            <div class="border-b border-gray-200 dark:border-gray-800 mb-6">
                <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="langTabs" role="tablist">
                    <li class="mr-2" role="presentation">
                        <button type="button" class="inline-block p-4 border-b-2 rounded-t-lg text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500 font-semibold" id="en-tab-btn" onclick="switchLanguageTab('en')">
                            <i class="fas fa-globe-americas mr-1.5"></i> English Content
                        </button>
                    </li>
                    <li class="mr-2" role="presentation">
                        <button type="button" class="inline-block p-4 border-b-2 rounded-t-lg border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 font-semibold flex items-center" id="km-tab-btn" onclick="switchLanguageTab('km')">
                            <i class="fas fa-language mr-1.5 text-lg"></i> Khmer Content
                            @if($item && (empty($item->name_km) || empty($item->description_km)))
                                <span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xxs font-bold bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800">
                                    <i class="fas fa-exclamation-triangle mr-1 text-[10px]"></i> Missing
                                </span>
                            @endif
                        </button>
                    </li>
                </ul>
            </div>

            <!-- English Content Tab -->
            <div id="en-tab-content" class="space-y-4">
                <x-admin.text-input 
                    name="name" 
                    label="Product Name" 
                    :value="old('name', $item?->name)" 
                    required 
                    placeholder="Enter product name" 
                />
                <x-admin.text-input 
                    name="short_description" 
                    label="Short Description" 
                    :value="old('short_description', $item?->short_description)" 
                    placeholder="Brief product description" 
                />
                <x-admin.textarea 
                    name="description" 
                    label="Description" 
                    :value="old('description', $item?->description)" 
                    rows="5" 
                    placeholder="Enter product description..." 
                />
            </div>

            <!-- Khmer Content Tab -->
            <div id="km-tab-content" class="space-y-4 hidden">
                <x-admin.text-input 
                    name="name_km" 
                    label="Product Name (Khmer)" 
                    :value="old('name_km', $item?->name_km)" 
                    placeholder="Enter product name in Khmer" 
                />
                @if($item && empty($item->name_km))
                    <p class="text-xs text-amber-600 dark:text-amber-400 mt-1.5 flex items-center"><i class="fas fa-exclamation-circle mr-1"></i> Khmer Product Name is currently empty.</p>
                @endif

                <x-admin.text-input 
                    name="short_description_km" 
                    label="Short Description (Khmer)" 
                    :value="old('short_description_km', $item?->short_description_km)" 
                    placeholder="Brief description in Khmer" 
                />

                <x-admin.textarea 
                    name="description_km" 
                    label="Description (Khmer)" 
                    :value="old('description_km', $item?->description_km)" 
                    rows="5" 
                    placeholder="Enter product description in Khmer..." 
                />
                @if($item && empty($item->description_km))
                    <p class="text-xs text-amber-600 dark:text-amber-400 mt-1.5 flex items-center"><i class="fas fa-exclamation-circle mr-1"></i> Khmer Description is currently empty.</p>
                @endif
            </div>
        </div>

        <!-- Non-translatable settings -->
        <x-admin.number-input 
            name="price" 
            label="Price ($)" 
            :value="old('price', $item?->price)" 
            required 
            step="0.01" 
            placeholder="0.00" 
        />

        <x-admin.number-input 
            name="original_price" 
            label="Original Price ($)" 
            :value="old('original_price', $item?->original_price)" 
            step="0.01" 
            placeholder="0.00" 
        />

        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category / Subcategory</label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <x-admin.select-input 
                    name="main_category_id" 
                    id="main_category" 
                    label="Category"
                >
                    <option value="">Select Category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" 
                                data-subcategories='@json($category->subcategories)'
                                {{ old('main_category_id') == $category->id || ($item && (($item->categoryRelation && $item->categoryRelation->parent_id === null && $item->categoryRelation->id == $category->id) || ($item->categoryRelation && $item->categoryRelation->parent_id == $category->id))) ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </x-admin.select-input>

                <x-admin.select-input 
                    name="subcategory_dummy" 
                    id="subcategory" 
                    label="Subcategory (Optional)" 
                    :disabled="!($item && $item->categoryRelation && $item->categoryRelation->parent_id)"
                >
                    <option value="">Select Subcategory</option>
                    @if($item && $item->categoryRelation && $item->categoryRelation->parent_id)
                        @foreach($categories as $category)
                            @if($category->id == $item->categoryRelation->parent_id)
                                @foreach($category->subcategories as $subcategory)
                                    <option value="{{ $subcategory->id }}" {{ old('category_id', $item->category_id) == $subcategory->id ? 'selected' : '' }}>
                                        {{ $subcategory->name }}
                                    </option>
                                @endforeach
                            @endif
                        @endforeach
                    @endif
                </x-admin.select-input>
            </div>
            <input type="hidden" id="final_category_id" name="category_id" value="{{ old('category_id', $item?->category_id) }}">
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <x-admin.select-input 
                name="brand_id" 
                label="Brand"
            >
                <option value="">Select Brand</option>
                @foreach($brands as $brand)
                    <option value="{{ $brand->id }}" {{ old('brand_id', $item?->brand_id) == $brand->id ? 'selected' : '' }}>
                        {{ $brand->name }}
                    </option>
                @endforeach
            </x-admin.select-input>

            <x-admin.select-input 
                name="unit_id" 
                label="Unit"
            >
                <option value="">Select Unit</option>
                @foreach($units as $unit)
                    <option value="{{ $unit->id }}" {{ old('unit_id', $item?->unit_id) == $unit->id ? 'selected' : '' }}>
                        {{ $unit->name }} ({{ $unit->abbreviation }})
                    </option>
                @endforeach
            </x-admin.select-input>
        </div>

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

        <div class="flex gap-6 items-center pt-2">
            <x-admin.toggle-switch 
                name="in_stock" 
                label="In Stock" 
                :checked="old('in_stock', $item ? $item->in_stock : true)" 
            />

            <x-admin.toggle-switch 
                name="on_sale" 
                label="On Sale" 
                :checked="old('on_sale', $item ? $item->on_sale : false)" 
            />
        </div>



        <div class="md:col-span-2">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">
                Product Images
            </label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="p-6 bg-gray-50 dark:bg-gray-900 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600 transition-colors">
                    <x-admin.file-upload 
                        name="image_profile_upload" 
                        id="image_profile_upload" 
                        label="Featured Image" 
                        accept="image/*" 
                        onchange="previewFeaturedImage(this)"
                    />
                    <div class="mt-4">
                        <div id="featured_existing_container">
                            @if($prefillFeatured)
                                <div class="relative group" id="existing_image_container_0">
                                    <img src="{{ $prefillFeatured }}" alt="Featured" class="w-full h-40 object-cover rounded-lg border border-gray-200 dark:border-gray-800">
                                    <button type="button" onclick="removeExistingImage(0)"
                                            class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-7 h-7 flex items-center justify-center text-xs hover:bg-red-600 shadow-lg transition-colors">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    <input type="hidden" name="images[]" value="{{ $prefillFeatured }}" id="existing_image_0">
                                </div>
                            @endif
                        </div>
                        <div id="featured_preview" class="mt-4 hidden">
                            <div class="relative group">
                                <img id="featured_preview_img" src="" alt="Featured Preview" class="w-full h-40 object-cover rounded-lg border border-green-300">
                                <button type="button" onclick="clearFeaturedPreview()"
                                        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-7 h-7 flex items-center justify-center text-xs hover:bg-red-600 shadow-lg transition-colors">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="p-6 bg-gray-50 dark:bg-gray-900 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600 transition-colors">
                    <x-admin.file-upload 
                        name="image_gallery_upload[]" 
                        id="image_gallery_upload" 
                        label="Gallery Images" 
                        accept="image/*" 
                        multiple 
                        onchange="previewGalleryImages(this)"
                    />
                    <div id="gallery_existing_preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                        @foreach($prefillGallery as $index => $image)
                            @php $realIndex = $index + 1; @endphp
                            <div class="relative group" id="existing_image_container_{{ $realIndex }}">
                                <img src="{{ $image }}" alt="Gallery {{ $realIndex }}" class="w-full h-32 object-cover rounded-lg border border-gray-200 dark:border-gray-800">
                                <button type="button" onclick="removeExistingImage({{ $realIndex }})"
                                        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-7 h-7 flex items-center justify-center text-xs hover:bg-red-600 shadow-lg transition-colors">
                                    <i class="fas fa-times"></i>
                                </button>
                                <input type="hidden" name="images[]" value="{{ $image }}" id="existing_image_{{ $realIndex }}">
                            </div>
                        @endforeach
                    </div>
                    <div id="gallery_new_preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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