<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-zinc-900 dark:text-white dark:text-white">Edit Part</h1>
            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Update part information in your inventory catalog</p>
        </div>
        <flux:button wire:navigate href="{{ route('inventory.parts.index') }}" variant="subtle">
            <flux:icon.arrow-left class="w-4 h-4 mr-2" />
            Back to Parts
        </flux:button>
    </div>

    <!-- Form -->
    <form wire:submit="save" class="space-y-6">
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6">
            <h2 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white mb-6">Basic Information</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Part Number -->
                <div>
                    <flux:field>
                        <flux:label>Part Number *</flux:label>
                        <flux:input wire:model="part_number" placeholder="Enter part number" />
                        <flux:error name="part_number" />
                    </flux:field>
                </div>

                <!-- Name -->
                <div>
                    <flux:field>
                        <flux:label>Part Name *</flux:label>
                        <flux:input wire:model="name" placeholder="Enter part name" />
                        <flux:error name="name" />
                    </flux:field>
                </div>

                <!-- Manufacturer -->
                <div>
                    <flux:field>
                        <flux:label>Manufacturer</flux:label>
                        <flux:input wire:model="manufacturer" placeholder="Enter manufacturer" />
                        <flux:error name="manufacturer" />
                    </flux:field>
                </div>

                <!-- Category -->
                <div>
                    <flux:field>
                        <flux:label>Category</flux:label>
                        <flux:input wire:model="category" placeholder="Enter category" />
                        <flux:error name="category" />
                    </flux:field>
                </div>

                <!-- Supplier -->
                <div class="md:col-span-2">
                    <flux:field>
                        <flux:label>Supplier</flux:label>
                        <select wire:model="supplier_id" class="block w-full rounded-md border-0 py-1.5 text-zinc-900 dark:text-white border border-zinc-200 dark:border-zinc-700 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-white dark:ring-zinc-600">
                            <option value="">No Supplier</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->full_name }}</option>
                            @endforeach
                        </select>
                        <flux:error name="supplier_id" />
                    </flux:field>
                </div>

                <!-- Description -->
                <div class="md:col-span-2">
                    <flux:field>
                        <flux:label>Description</flux:label>
                        <flux:textarea wire:model="description" placeholder="Enter part description" rows="3" />
                        <flux:error name="description" />
                    </flux:field>
                </div>
            </div>
        </div>

        <!-- Pricing & Stock -->
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6">
            <h2 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white mb-6">Pricing & Stock</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Cost Price -->
                <div>
                    <flux:field>
                        <flux:label>Cost Price *</flux:label>
                        <flux:input wire:model="cost_price" type="number" step="0.01" min="0" placeholder="0.00" />
                        <flux:error name="cost_price" />
                    </flux:field>
                </div>

                <!-- Sell Price -->
                <div>
                    <flux:field>
                        <flux:label>Sell Price *</flux:label>
                        <flux:input wire:model="sell_price" type="number" step="0.01" min="0" placeholder="0.00" />
                        <flux:error name="sell_price" />
                    </flux:field>
                </div>

                <!-- Quantity on Hand -->
                <div>
                    <flux:field>
                        <flux:label>Current Stock *</flux:label>
                        <flux:input wire:model="quantity_on_hand" type="number" min="0" placeholder="0" />
                        <flux:error name="quantity_on_hand" />
                    </flux:field>
                </div>

                <!-- Minimum Stock Level -->
                <div>
                    <flux:field>
                        <flux:label>Minimum Stock Level *</flux:label>
                        <flux:input wire:model="minimum_stock_level" type="number" min="0" placeholder="0" />
                        <flux:error name="minimum_stock_level" />
                    </flux:field>
                </div>

                <!-- Maximum Stock Level -->
                <div>
                    <flux:field>
                        <flux:label>Maximum Stock Level *</flux:label>
                        <flux:input wire:model="maximum_stock_level" type="number" min="0" placeholder="0" />
                        <flux:error name="maximum_stock_level" />
                    </flux:field>
                </div>

                <!-- Location -->
                <div>
                    <flux:field>
                        <flux:label>Storage Location</flux:label>
                        <flux:input wire:model="location" placeholder="e.g., Shelf A-1" />
                        <flux:error name="location" />
                    </flux:field>
                </div>
            </div>
        </div>

        <!-- Additional Details -->
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6">
            <h2 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white mb-6">Additional Details</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Supplier Part Number -->
                <div>
                    <flux:field>
                        <flux:label>Supplier Part Number</flux:label>
                        <flux:input wire:model="supplier_part_number" placeholder="Enter supplier's part number" />
                        <flux:error name="supplier_part_number" />
                    </flux:field>
                </div>

                <!-- Lead Time -->
                <div>
                    <flux:field>
                        <flux:label>Lead Time (Days)</flux:label>
                        <flux:input wire:model="lead_time_days" type="number" min="0" placeholder="0" />
                        <flux:error name="lead_time_days" />
                    </flux:field>
                </div>

                <!-- Barcode -->
                <div>
                    <flux:field>
                        <flux:label>Barcode</flux:label>
                        <flux:input wire:model="barcode" placeholder="Enter barcode" />
                        <flux:error name="barcode" />
                    </flux:field>
                </div>

                <!-- Weight -->
                <div>
                    <flux:field>
                        <flux:label>Weight (kg)</flux:label>
                        <flux:input wire:model="weight" type="number" step="0.01" min="0" placeholder="0.00" />
                        <flux:error name="weight" />
                    </flux:field>
                </div>

                <!-- Dimensions -->
                <div>
                    <flux:field>
                        <flux:label>Dimensions</flux:label>
                        <flux:input wire:model="dimensions" placeholder="e.g., 10x5x3 cm" />
                        <flux:error name="dimensions" />
                    </flux:field>
                </div>

                <!-- Warranty Period -->
                <div>
                    <flux:field>
                        <flux:label>Warranty Period (Days)</flux:label>
                        <flux:input wire:model="warranty_period" type="number" min="0" placeholder="0" />
                        <flux:error name="warranty_period" />
                    </flux:field>
                </div>

                <!-- Status -->
                <div class="md:col-span-2 lg:col-span-1">
                    <flux:field>
                        <flux:label>Status *</flux:label>
                        <select wire:model="status" class="block w-full rounded-md border-0 py-1.5 text-zinc-900 dark:text-white border border-zinc-200 dark:border-zinc-700 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-white dark:ring-zinc-600">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                        <flux:error name="status" />
                    </flux:field>
                </div>

                <!-- Image -->
                <div class="md:col-span-2">
                    <flux:field>
                        <flux:label>Part Image</flux:label>
                        <flux:input type="file" wire:model="image" accept="image/*" />
                        <flux:error name="image" />
                        <flux:description>Upload an image for this part (max 2MB)</flux:description>
                    </flux:field>

                    @if ($image)
                        <div class="mt-4">
                            <p class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400 mb-2">New Image Preview:</p>
                            <img src="{{ $image->temporaryUrl() }}" alt="Preview" class="h-32 w-32 object-cover rounded-lg border border-zinc-200 dark:border-zinc-700">
                        </div>
                    @elseif ($currentImage)
                        <div class="mt-4">
                            <p class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400 mb-2">Current Image:</p>
                            <img src="{{ asset('storage/' . $currentImage) }}" alt="Current" class="h-32 w-32 object-cover rounded-lg border border-zinc-200 dark:border-zinc-700">
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-end space-x-4">
            <flux:button wire:navigate href="{{ route('inventory.parts.index') }}" variant="subtle">
                Cancel
            </flux:button>
            <flux:button type="submit" variant="primary">
                Update Part
            </flux:button>
        </div>
    </form>
</div>
