<x-app-layout>
    <x-slot:heading>Edit Item</x-slot:heading>

    <div class="mb-4 flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('inventory.index') }}" class="hover:text-gray-700">Inventory</a>
        <svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
        <a href="{{ route('inventory.show', $item) }}" class="hover:text-gray-700">{{ $item->item_name }}</a>
        <svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
        <span>Edit</span>
    </div>

    <div class="max-w-xl">
        <div class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
            <form method="POST" action="{{ route('inventory.update', $item) }}" class="space-y-5">
                @csrf @method('PATCH')
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Item Name <span class="text-red-500">*</span></label>
                        <input type="text" name="item_name" value="{{ old('item_name', $item->item_name) }}"
                               class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                        @error('item_name') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</span></label>
                        <select name="category" class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                            @foreach(['feed','drug','chemical','equipment','other'] as $c)
                                <option value="{{ $c }}" @selected(old('category', $item->category) === $c)>{{ ucfirst($c) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Unit <span class="text-red-500">*</span></label>
                        <select name="unit" class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                            @foreach(['kg','bag','litre','piece','sachet'] as $u)
                                <option value="{{ $u }}" @selected(old('unit', $item->unit) === $u)>{{ ucfirst($u) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Reorder Threshold <span class="text-red-500">*</span></label>
                        <input type="number" name="reorder_threshold" value="{{ old('reorder_threshold', $item->reorder_threshold) }}"
                               step="0.01" min="0"
                               class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                        @error('reorder_threshold') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Unit Cost (₦)</label>
                        <input type="number" name="unit_cost_naira" value="{{ old('unit_cost_naira', $item->unit_cost_naira) }}"
                               step="0.01" min="0"
                               class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                        @error('unit_cost_naira') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Default Supplier</label>
                        <div class="flex gap-2">
                            <select name="supplier_id"
                                    class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                <option value="">— None —</option>
                                @foreach($suppliers as $s)
                                    <option value="{{ $s->id }}" @selected(old('supplier_id', $item->supplier_id) == $s->id)>
                                        {{ $s->name }}{{ $s->business_name ? ' — ' . $s->business_name : '' }}
                                        @if($s->is_flagged) ⚑ @endif
                                    </option>
                                @endforeach
                            </select>
                            <a href="{{ route('suppliers.create') }}" target="_blank"
                               class="flex-shrink-0 rounded-lg border border-gray-200 px-3 py-2 text-xs text-gray-600 hover:bg-gray-50 whitespace-nowrap">
                                + New
                            </a>
                        </div>
                        @error('supplier_id') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                        <textarea name="notes" rows="3"
                                  class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">{{ old('notes', $item->notes) }}</textarea>
                        @error('notes') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div class="flex items-center gap-3 border-t border-gray-100 pt-4">
                    <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white hover:bg-primary-700">Update Item</button>
                    <a href="{{ route('inventory.show', $item) }}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
