<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

    {{-- Success State --}}
    @if($completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
        <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
            <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>
        <a href="{{ route('inventory.adjustments') }}" wire:navigate
           class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors">
            {{ __('العودة لمستويات المخزون') }}
        </a>
    </div>
    @else

    {{-- Step Indicator --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @foreach($this->getStepLabels() 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-emerald-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-emerald-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>

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

        {{-- Step 1: Warehouse --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('اختيار المستودع') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد المستودع الذي سيتم تعديل مخزونه') }}</p>

            @if($warehouses->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($warehouses as $warehouse)
                <label class="relative cursor-pointer">
                    <input type="radio" wire:click="selectWarehouse({{ $warehouse->id }})" name="warehouse"
                           {{ $warehouseId === $warehouse->id ? 'checked' : '' }} class="peer sr-only">
                    <div class="p-4 border-2 rounded-xl transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                        border-gray-200 hover:border-gray-300">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                </svg>
                            </div>
                            <div>
                                <div class="font-medium text-gray-800">{{ $warehouse->name_ar }}</div>
                                @if($warehouse->code)
                                <div class="text-xs text-gray-400">{{ $warehouse->code }}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </label>
                @endforeach
            </div>
            @else
            <div class="p-6 text-center text-gray-500">
                {{ __('لا توجد مستودعات نشطة') }}
            </div>
            @endif

            @error('warehouseId') <p class="text-red-500 text-xs mt-2">{{ $message }}</p> @enderror
        </div>
        @endif

        {{-- Step 2: Product --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('اختيار المنتج') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد المنتج المراد تعديل مخزونه') }}</p>

            @if($products->count() > 0)
            <div class="space-y-2 max-h-96 overflow-y-auto">
                @foreach($products as $product)
                <label class="relative cursor-pointer block">
                    <input type="radio" wire:click="selectProduct({{ $product->id }})" name="product"
                           {{ $productId === $product->id ? 'checked' : '' }} class="peer sr-only">
                    <div class="p-4 border-2 rounded-xl transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                        border-gray-200 hover:border-gray-300">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-800">{{ $product->name_ar }}</div>
                                @if($product->sku)
                                <div class="text-xs text-gray-400" dir="ltr">SKU: {{ $product->sku }}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </label>
                @endforeach
            </div>
            @else
            <div class="p-6 text-center text-gray-500">
                {{ __('لا توجد منتجات قابلة للتتبع في هذا المستودع') }}
            </div>
            @endif

            {{-- Current Stock Display --}}
            @if($currentStock !== null)
            <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-xl">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div>
                        <span class="text-sm text-blue-700">{{ __('المخزون الحالي:') }}</span>
                        <span class="font-bold text-blue-800 ms-1" dir="ltr">{{ $currentStock }}</span>
                        <span class="text-sm text-blue-600">{{ __('وحدة') }}</span>
                    </div>
                </div>
            </div>
            @endif

            @error('productId') <p class="text-red-500 text-xs mt-2">{{ $message }}</p> @enderror
        </div>
        @endif

        {{-- Step 3: Quantity & Reason --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('الكمية والسبب') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد اتجاه التسوية والكمية وسبب التعديل') }}</p>

            {{-- Direction --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('اتجاه التسوية') }}</label>
                <div class="grid grid-cols-2 gap-4">
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="adjustmentDirection" value="up" class="peer sr-only">
                        <div class="p-4 border-2 rounded-xl transition-all text-center
                            peer-checked:border-green-500 peer-checked:bg-green-50
                            border-gray-200 hover:border-gray-300">
                            <svg class="w-8 h-8 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"/>
                            </svg>
                            <div class="font-medium text-gray-800">{{ __('زيادة') }}</div>
                            <div class="text-xs text-gray-500">{{ __('إضافة كمية للمخزون') }}</div>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="adjustmentDirection" value="down" class="peer sr-only">
                        <div class="p-4 border-2 rounded-xl transition-all text-center
                            peer-checked:border-red-500 peer-checked:bg-red-50
                            border-gray-200 hover:border-gray-300">
                            <svg class="w-8 h-8 mx-auto mb-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"/>
                            </svg>
                            <div class="font-medium text-gray-800">{{ __('نقص') }}</div>
                            <div class="text-xs text-gray-500">{{ __('خصم كمية من المخزون') }}</div>
                        </div>
                    </label>
                </div>
                @error('adjustmentDirection') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

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

            {{-- Reason --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('السبب') }} <span class="text-red-500">*</span></label>
                <textarea wire:model="reason" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                          placeholder="{{ __('اذكر سبب تعديل المخزون...') }}"></textarea>
                @error('reason') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Reference Number --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم المرجع') }}</label>
                <input type="text" wire:model="referenceNumber" dir="ltr"
                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                       placeholder="{{ __('اختياري') }}">
                @error('referenceNumber') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
        @endif

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

            <div class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('المستودع') }}</div>
                        <div class="font-medium text-gray-800">{{ $selectedWarehouse['name_ar'] ?? '-' }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('المنتج') }}</div>
                        <div class="font-medium text-gray-800">{{ $selectedProduct['name_ar'] ?? '-' }}</div>
                    </div>
                </div>

                {{-- Before / After Visual --}}
                <div class="p-6 bg-gray-50 rounded-xl">
                    <div class="flex items-center justify-center gap-6">
                        <div class="text-center">
                            <div class="text-xs text-gray-500 mb-1">{{ __('قبل') }}</div>
                            <div class="text-2xl font-bold text-gray-800" dir="ltr">{{ $currentStock ?? 0 }}</div>
                        </div>
                        <div class="text-center px-4">
                            @if($adjustmentDirection === 'up')
                            <span class="text-2xl font-bold text-green-600" dir="ltr">+{{ $quantity ?? 0 }}</span>
                            @else
                            <span class="text-2xl font-bold text-red-600" dir="ltr">-{{ $quantity ?? 0 }}</span>
                            @endif
                        </div>
                        <div class="text-center">
                            <div class="text-xs text-gray-500 mb-1">{{ __('بعد') }}</div>
                            <div class="text-2xl font-bold {{ $this->expectedAfter <= 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">
                                {{ $this->expectedAfter ?? 0 }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Warning if going to zero --}}
                @if($this->expectedAfter !== null && $this->expectedAfter <= 0)
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                    <div class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                        </svg>
                        <div class="text-sm text-amber-700">
                            {{ __('تحذير: المخزون سيصل إلى صفر أو أقل بعد هذه التسوية!') }}
                        </div>
                    </div>
                </div>
                @endif

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('الاتجاه') }}</div>
                        <div class="font-medium text-gray-800">
                            {{ $adjustmentDirection === 'up' ? __('زيادة (تسوية جرد بالزيادة)') : __('نقص (تسوية جرد بالنقص)') }}
                        </div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('الكمية') }}</div>
                        <div class="font-medium text-gray-800" dir="ltr">{{ $quantity }}</div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="text-xs text-gray-500 mb-1">{{ __('السبب') }}</div>
                    <div class="text-gray-800">{{ $reason }}</div>
                </div>

                @if($referenceNumber)
                <div class="p-4 bg-gray-50 rounded-lg">
                    <div class="text-xs text-gray-500 mb-1">{{ __('رقم المرجع') }}</div>
                    <div class="text-gray-800" dir="ltr">{{ $referenceNumber }}</div>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Step 5: Final Confirm --}}
        @if($currentStep === 5)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('التأكيد النهائي') }}</h2>

            <div class="p-6 bg-amber-50 border border-amber-200 rounded-xl mb-6">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-amber-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                    <div>
                        <div class="font-medium text-amber-800 mb-1">{{ __('هل أنت متأكد؟') }}</div>
                        <div class="text-sm text-amber-700">
                            {{ __('سيتم تعديل المخزون فوراً. هذا الإجراء سيُسجل كحركة مخزون ولا يمكن التراجع عنه إلا بإجراء تسوية عكسية.') }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <p class="text-gray-600 mb-4">
                    {{ __('سيتم') }}
                    <strong>{{ $adjustmentDirection === 'up' ? __('إضافة') : __('خصم') }}</strong>
                    <strong dir="ltr">{{ $quantity }}</strong>
                    {{ __('وحدة') }}
                    {{ $adjustmentDirection === 'up' ? __('إلى') : __('من') }}
                    <strong>{{ $selectedProduct['name_ar'] ?? '' }}</strong>
                    {{ __('في') }}
                    <strong>{{ $selectedWarehouse['name_ar'] ?? '' }}</strong>
                </p>
            </div>
        </div>
        @endif

        {{-- Navigation Buttons --}}
        <div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-200">
            <div>
                @if($currentStep > 1)
                <button wire:click="previousStep"
                        class="px-5 py-2.5 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium transition-colors">
                    {{ __('السابق') }}
                </button>
                @endif
            </div>
            <div>
                @if($currentStep < $totalSteps)
                <button wire:click="nextStep" wire:loading.attr="disabled" wire:target="nextStep"
                        class="px-6 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                    <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                </button>
                @else
                <button wire:click="confirm" wire:loading.attr="disabled" wire:target="confirm"
                        class="px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirm">{{ __('تأكيد التسوية') }}</span>
                    <span wire:loading wire:target="confirm">{{ __('جارٍ التنفيذ...') }}</span>
                </button>
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
