<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $editing ? __('تعديل المنتج') : __('إضافة منتج جديد') }}</h1>
        <a href="{{ route('inventory.products') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
    </div>

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

    <form wire:submit="save" class="space-y-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {{-- Name AR --}}
                <div>
                    <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label>
                    <input type="text" id="name_ar" wire:model="name_ar"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Name EN --}}
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالإنجليزية') }}</label>
                    <input type="text" id="name" wire:model="name" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- SKU --}}
                <div>
                    <label for="sku" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز المنتج (SKU)') }} *</label>
                    <input type="text" id="sku" wire:model="sku" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sku') border-red-500 @enderror">
                    @error('sku') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Barcode --}}
                <div>
                    <label for="barcode" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الباركود') }}</label>
                    <input type="text" id="barcode" wire:model="barcode" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('barcode') border-red-500 @enderror">
                    @error('barcode') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Category --}}
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label>
                    <select id="category_id" wire:model="category_id"
                            class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category_id') border-red-500 @enderror">
                        <option value="">{{ __('-- اختر التصنيف --') }}</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('category_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Type --}}
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المنتج') }} *</label>
                    <select id="type" wire:model="type"
                            class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
                        @foreach($typeOptions as $value => $label)
                        <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    @error('type') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Pricing Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                {{-- Selling Price --}}
                <div>
                    <label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label>
                    <input type="number" id="selling_price" wire:model="selling_price" step="0.01" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('selling_price') border-red-500 @enderror">
                    @error('selling_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Cost Price --}}
                <div>
                    <label for="cost_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر التكلفة (ج.م)') }}</label>
                    <input type="number" id="cost_price" wire:model="cost_price" step="0.01" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('cost_price') border-red-500 @enderror">
                    @error('cost_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Tax Rate --}}
                <div>
                    <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الضريبة (%)') }}</label>
                    <input type="number" id="tax_rate" wire:model="tax_rate" step="1" min="0" max="100" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tax_rate') border-red-500 @enderror">
                    @error('tax_rate') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Inventory Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                {{-- Track Inventory --}}
                <div class="col-span-2 sm:col-span-3">
                    <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model.live="track_inventory"
                               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('تتبع المخزون') }}</span>
                    </label>
                </div>

                @if($track_inventory)
                {{-- Min Stock Level --}}
                <div>
                    <label for="min_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمخزون') }}</label>
                    <input type="number" id="min_stock_level" wire:model="min_stock_level" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('min_stock_level') border-red-500 @enderror">
                    @error('min_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Max Stock Level --}}
                <div>
                    <label for="max_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للمخزون') }}</label>
                    <input type="number" id="max_stock_level" wire:model="max_stock_level" min="0" dir="ltr"
                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_stock_level') border-red-500 @enderror">
                    @error('max_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
        </div>

        {{-- Description --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div>
                <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
                <textarea id="description_ar" wire:model="description_ar" rows="3"
                          class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description_ar') border-red-500 @enderror"></textarea>
                @error('description_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Is Active --}}
            <div class="mt-4">
                <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="is_active"
                           class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <span class="text-sm text-gray-700">{{ __('نشط') }}</span>
                </label>
            </div>
        </div>

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