<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.kits') }}" 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">
        {{-- Basic Info --}}
        <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>

                {{-- 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>
            </div>
        </div>

        {{-- Components Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6" x-data>
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base sm:text-lg font-semibold text-gray-700">{{ __('المكونات') }}</h2>
                <button type="button" wire:click="addComponent"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100 text-sm font-medium">
                    <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>

            @error('components') <p class="mb-3 text-sm text-red-600">{{ $message }}</p> @enderror

            <div class="space-y-3">
                @foreach($components as $index => $component)
                <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200" wire:key="component-{{ $index }}">
                    {{-- Product selector --}}
                    <div class="flex-1">
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المنتج') }} *</label>
                        <select wire:model="components.{{ $index }}.product_id"
                                class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('components.'.$index.'.product_id') border-red-500 @enderror">
                            <option value="">{{ __('-- اختر المنتج --') }}</option>
                            @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ $product->name_ar }} ({{ $product->sku }})</option>
                            @endforeach
                        </select>
                        @error('components.'.$index.'.product_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Quantity --}}
                    <div class="w-24 sm:w-28">
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الكمية') }} *</label>
                        <input type="number" wire:model="components.{{ $index }}.quantity" min="1" dir="ltr"
                               class="w-full text-sm px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('components.'.$index.'.quantity') border-red-500 @enderror">
                        @error('components.'.$index.'.quantity') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Remove button --}}
                    <div class="pt-5">
                        <button type="button" wire:click="removeComponent({{ $index }})"
                                class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
                                title="{{ __('حذف المكون') }}">
                            <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>
                    </div>
                </div>
                @endforeach
            </div>

            @if(count($components) === 0)
            <div class="text-center py-8 text-gray-400 text-sm">
                {{ __('لم يتم إضافة مكونات بعد') }}
            </div>
            @endif
        </div>

        {{-- Description & Instructions --}}
        <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="space-y-4">
                {{-- Description --}}
                <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>

                {{-- Assembly Instructions --}}
                <div>
                    <label for="assembly_instructions" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تعليمات التجميع') }}</label>
                    <textarea id="assembly_instructions" wire:model="assembly_instructions" 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('assembly_instructions') border-red-500 @enderror"></textarea>
                    @error('assembly_instructions') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Is Active --}}
                <div>
                    <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>
        </div>

        {{-- Actions --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('inventory.kits') }}" 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>
