<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
            {{ $editing ? __('تعديل أمر الشراء') : __('إنشاء أمر شراء') }}
        </h1>
        <a href="{{ route('inventory.purchase-orders') }}" wire:navigate
           class="text-sm text-gray-500 hover:text-gray-700">
            &larr; {{ __('العودة للقائمة') }}
        </a>
    </div>

    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    <form wire:submit="save" class="space-y-6">
        {{-- Supplier Info --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات المورد') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المورد') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="supplier_name"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('أدخل اسم المورد') }}">
                    @error('supplier_name') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('جهة الاتصال') }}</label>
                    <input type="text" wire:model="supplier_contact"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('رقم هاتف أو بريد') }}">
                    @error('supplier_contact') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        {{-- Order Details --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('تفاصيل الطلب') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستودع') }} <span class="text-red-500">*</span></label>
                    <select wire:model="warehouse_id"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('اختر المستودع') }}</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('warehouse_id') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الطلب') }} <span class="text-red-500">*</span></label>
                    <input type="date" wire:model="order_date" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('order_date') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ التسليم المتوقع') }}</label>
                    <input type="date" wire:model="expected_delivery_date" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('expected_delivery_date') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        {{-- Items --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-700">{{ __('الأصناف') }}</h2>
                <button type="button" wire:click="addItem"
                        class="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    {{ __('إضافة صنف') }}
                </button>
            </div>

            <div class="space-y-3">
                @foreach($items as $index => $item)
                <div class="grid grid-cols-12 gap-3 items-start p-3 bg-gray-50 rounded-lg">
                    <div class="col-span-12 md:col-span-5">
                        <label class="block text-xs text-gray-500 mb-1">{{ __('المنتج') }}</label>
                        <select wire:model="items.{{ $index }}.product_id"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">{{ __('اختر المنتج') }}</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name_ar }} ({{ $product->sku }})</option>
                            @endforeach
                        </select>
                        @error("items.{$index}.product_id") <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">{{ __('الكمية') }}</label>
                        <input type="number" wire:model="items.{{ $index }}.quantity_ordered" min="1" dir="ltr"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        @error("items.{$index}.quantity_ordered") <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="col-span-4 md:col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">{{ __('سعر الوحدة (ج.م)') }}</label>
                        <input type="number" wire:model="items.{{ $index }}.unit_cost" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        @error("items.{$index}.unit_cost") <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="col-span-3 md:col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">{{ __('الإجمالي') }}</label>
                        <div class="px-3 py-2 bg-gray-100 rounded-lg text-sm text-gray-600 font-mono" dir="ltr">
                            {{ number_format(((float)($item['quantity_ordered'] ?? 0)) * ((float)($item['unit_cost'] ?? 0)), 2) }}
                        </div>
                    </div>
                    <div class="col-span-1 flex items-end pb-1">
                        @if(count($items) > 1)
                        <button type="button" wire:click="removeItem({{ $index }})"
                                class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @error('items') <span class="text-red-500 text-xs mt-2 block">{{ $message }}</span> @enderror
        </div>

        {{-- Costs & Notes --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('تكاليف إضافية') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الضريبة (ج.م)') }}</label>
                    <input type="number" wire:model="tax_amount" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تكلفة الشحن (ج.م)') }}</label>
                    <input type="number" wire:model="shipping_cost" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="md:col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
                    <textarea wire:model="notes" rows="2"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="{{ __('ملاحظات اختيارية') }}"></textarea>
                </div>
            </div>
        </div>

        {{-- Submit --}}
        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('inventory.purchase-orders') }}" wire:navigate
               class="px-5 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
                {{ __('إلغاء') }}
            </a>
            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
                <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('إنشاء أمر الشراء') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
