<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء منتج جديد') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('إضافة منتج جديد لنظام المخزون') }}</p>
        </div>
    </div>

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

    {{-- Step Indicator --}}
    @if(!$completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php $steps = $this->getStepLabels(); @endphp
            @foreach($steps as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <button wire:click="goToStep({{ $num }})"
                        @if($num >= $currentStep) disabled @endif
                        class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors
                        {{ $num === $currentStep ? 'bg-blue-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $currentStep)
                            <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="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs font-medium hidden sm:inline
                        {{ $num === $currentStep ? 'text-blue-600' : '' }}
                        {{ $num < $currentStep ? 'text-green-600' : '' }}
                        {{ $num > $currentStep ? 'text-gray-400' : '' }}">
                        {{ __($label) }}
                    </span>
                </button>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">

        {{-- Step 1: Basic Info --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('المعلومات الأساسية') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Name Arabic --}}
                <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="nameAr"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('مثال: كرة قدم') }}">
                    @error('nameAr') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

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

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

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

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

                {{-- Type --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المنتج') }} <span class="text-red-500">*</span></label>
                    <select wire:model="type"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="physical">{{ __('مادي') }}</option>
                        <option value="digital">{{ __('رقمي') }}</option>
                        <option value="service">{{ __('خدمة') }}</option>
                    </select>
                    @error('type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Description --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
                    <textarea wire:model="descriptionAr" rows="3"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="{{ __('وصف مختصر للمنتج...') }}"></textarea>
                    @error('descriptionAr') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @endif

        {{-- Step 2: Pricing --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('التسعير') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Selling Price --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع') }} <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="number" wire:model="sellingPrice" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 pe-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('sellingPrice') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

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

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

                {{-- Profit Preview --}}
                @if($sellingPrice && $costPrice)
                <div class="flex items-end">
                    @php
                        $profit = (float)$sellingPrice - (float)$costPrice;
                        $margin = (float)$sellingPrice > 0 ? ($profit / (float)$sellingPrice) * 100 : 0;
                    @endphp
                    <div class="w-full p-3 bg-gray-50 rounded-lg">
                        <p class="text-xs text-gray-500 mb-1">{{ __('هامش الربح') }}</p>
                        <p class="text-lg font-bold {{ $profit >= 0 ? 'text-green-600' : 'text-red-600' }}" dir="ltr">
                            {{ number_format($profit, 2) }} {{ __('ج.م') }}
                            <span class="text-sm font-normal">({{ number_format($margin, 1) }}%)</span>
                        </p>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Step 3: Inventory Settings --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('إعدادات المخزون') }}</h2>

            <div class="space-y-6">
                {{-- Track Inventory --}}
                <div class="flex items-start gap-3">
                    <input type="checkbox" wire:model="trackInventory" id="trackInventory"
                           class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 mt-0.5">
                    <div>
                        <label for="trackInventory" class="text-sm font-medium text-gray-700 cursor-pointer">{{ __('تتبع المخزون') }}</label>
                        <p class="text-xs text-gray-500 mt-0.5">{{ __('تفعيل تتبع الكمية المتوفرة والحركات') }}</p>
                    </div>
                </div>

                @if($trackInventory)
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ps-8">
                    {{-- Min Stock Level --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمخزون') }}</label>
                        <input type="number" wire:model="minStockLevel" dir="ltr" min="0"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="10">
                        <p class="text-xs text-gray-500 mt-1">{{ __('يتم التنبيه عند وصول المخزون لهذا الحد') }}</p>
                        @error('minStockLevel') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

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

                {{-- Is Active --}}
                <div class="flex items-start gap-3">
                    <input type="checkbox" wire:model="isActive" id="isActive"
                           class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 mt-0.5">
                    <div>
                        <label for="isActive" class="text-sm font-medium text-gray-700 cursor-pointer">{{ __('منتج نشط') }}</label>
                        <p class="text-xs text-gray-500 mt-0.5">{{ __('المنتجات غير النشطة لن تظهر في نقطة البيع') }}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- Step 4: Review --}}
        @if($currentStep === 4 && !$completed)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة بيانات المنتج') }}</h2>

            <div class="space-y-4">
                {{-- Basic Info --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('المعلومات الأساسية') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('الاسم بالعربية') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $nameAr }}</dd>
                        </div>
                        @if($name)
                        <div>
                            <dt class="text-gray-500">{{ __('الاسم بالإنجليزية') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $name }}</dd>
                        </div>
                        @endif
                        @if($sku)
                        <div>
                            <dt class="text-gray-500">{{ __('رمز المنتج') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $sku }}</dd>
                        </div>
                        @endif
                        @if($barcode)
                        <div>
                            <dt class="text-gray-500">{{ __('الباركود') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $barcode }}</dd>
                        </div>
                        @endif
                        <div>
                            <dt class="text-gray-500">{{ __('النوع') }}</dt>
                            <dd class="font-medium text-gray-800">
                                @php
                                    $typeLabels = ['physical' => 'مادي', 'digital' => 'رقمي', 'service' => 'خدمة'];
                                @endphp
                                {{ $typeLabels[$type] ?? $type }}
                            </dd>
                        </div>
                        @if($categoryId)
                        <div>
                            <dt class="text-gray-500">{{ __('التصنيف') }}</dt>
                            <dd class="font-medium text-gray-800">{{ collect($categories)->firstWhere('id', $categoryId)['name_ar'] ?? '-' }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Pricing --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('التسعير') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('سعر البيع') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ number_format((float)$sellingPrice, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @if($costPrice)
                        <div>
                            <dt class="text-gray-500">{{ __('سعر التكلفة') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ number_format((float)$costPrice, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($taxRate > 0)
                        <div>
                            <dt class="text-gray-500">{{ __('نسبة الضريبة') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $taxRate }}%</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Inventory Settings --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('إعدادات المخزون') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('تتبع المخزون') }}</dt>
                            <dd class="font-medium text-gray-800">
                                @if($trackInventory)
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">{{ __('مفعل') }}</span>
                                @else
                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{{ __('غير مفعل') }}</span>
                                @endif
                            </dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">{{ __('الحالة') }}</dt>
                            <dd class="font-medium text-gray-800">
                                @if($isActive)
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">{{ __('نشط') }}</span>
                                @else
                                <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs">{{ __('غير نشط') }}</span>
                                @endif
                            </dd>
                        </div>
                        @if($trackInventory && $minStockLevel)
                        <div>
                            <dt class="text-gray-500">{{ __('الحد الأدنى') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $minStockLevel }}</dd>
                        </div>
                        @endif
                        @if($trackInventory && $maxStockLevel)
                        <div>
                            <dt class="text-gray-500">{{ __('الحد الأقصى') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $maxStockLevel }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
        @endif

        {{-- Success State --}}
        @if($completed)
        <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('تم إنشاء المنتج بنجاح') }}</h2>
            <p class="text-gray-500 mb-6">{{ __('يمكنك الآن إدارة المنتج وإضافة مخزون أولي') }}</p>
        </div>
        @endif

        {{-- Navigation Buttons --}}
        @if(!$completed)
        <div class="flex items-center justify-between mt-8 pt-4 border-t border-gray-200">
            @if($currentStep > 1)
            <button wire:click="previousStep" type="button"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium text-sm transition-colors">
                <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                {{ __('السابق') }}
            </button>
            @else
            <div></div>
            @endif

            @if($currentStep < $totalSteps)
            <button wire:click="nextStep" type="button"
                    wire:loading.attr="disabled" wire:target="nextStep"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-white bg-blue-600 rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                <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="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            @else
            <button wire:click="confirm" type="button"
                    wire:loading.attr="disabled" wire:target="confirm"
                    class="inline-flex items-center gap-2 px-6 py-2.5 text-white bg-green-600 rounded-lg hover:bg-green-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="confirm">{{ __('تأكيد إنشاء المنتج') }}</span>
                <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
            </button>
            @endif
        </div>
        @endif
    </div>
</div>
