<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إضافة موظف جديد') }}</h1>
    </div>

    {{-- Step Indicator --}}
    <div class="flex items-center justify-center gap-2 mb-8 overflow-x-auto">
        @foreach($stepLabels as $num => $label)
            <button wire:click="goToStep({{ $num }})"
                    class="flex items-center gap-1.5 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                <span class="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-xs sm:text-sm font-bold
                    {{ $num < $currentStep ? 'bg-green-500 text-white' : ($num === $currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($num < $currentStep)
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    @else
                        {{ $num }}
                    @endif
                </span>
                <span class="hidden lg:inline text-xs {{ $num === $currentStep ? 'text-blue-700 font-medium' : 'text-gray-500' }}">{{ $label }}</span>
            </button>
            @if(!$loop->last)
                <div class="w-5 sm:w-8 h-0.5 {{ $num < $currentStep ? 'bg-green-400' : 'bg-gray-200' }}"></div>
            @endif
        @endforeach
    </div>

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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">

        {{-- Step 1: Person --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات الشخص') }}</h2>

            @if(!$createNewPerson && !$personId)
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث عن شخص موجود') }}</label>
                    <input type="text" wire:model.live.debounce.300ms="personSearch"
                           placeholder="{{ __('ابحث بالاسم أو رقم الهاتف أو الرقم القومي...') }}"
                           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 text-sm">
                </div>

                @if($this->personResults->isNotEmpty())
                    <div class="border border-gray-200 rounded-lg divide-y divide-gray-100 mb-4 max-h-48 overflow-y-auto">
                        @foreach($this->personResults as $person)
                            <button wire:click="selectPerson({{ $person->id }})"
                                    class="w-full text-start px-4 py-3 hover:bg-blue-50 transition-colors">
                                <div class="font-medium text-gray-800">{{ $person->name_ar ?? $person->name }}</div>
                                <div class="text-xs text-gray-500">{{ $person->phone }} @if($person->national_id) - {{ $person->national_id }} @endif</div>
                            </button>
                        @endforeach
                    </div>
                @endif

                <button wire:click="toggleCreateNew" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                    {{ __('+ إنشاء شخص جديد') }}
                </button>
            @endif

            @if($personId && !$createNewPerson)
                <div class="p-4 bg-green-50 border border-green-200 rounded-lg mb-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="font-medium text-green-800">{{ $personNameAr }}</p>
                            <p class="text-sm text-green-600">{{ $personPhone }}</p>
                        </div>
                        <button wire:click="$set('personId', null)" class="text-sm text-red-600 hover:text-red-800">{{ __('تغيير') }}</button>
                    </div>
                </div>
            @endif

            @if($createNewPerson)
                <div class="space-y-4 border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-sm font-medium text-gray-700">{{ __('بيانات الشخص الجديد') }}</h3>
                        <button wire:click="toggleCreateNew" class="text-sm text-red-600 hover:text-red-800">{{ __('إلغاء') }}</button>
                    </div>

                    <div class="grid grid-cols-1 sm: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="personNameAr" 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 text-sm">
                            @error('personNameAr') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزي') }}</label>
                            <input type="text" wire:model="personName" 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 text-sm">
                        </div>
                        <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="personPhone" 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 text-sm">
                            @error('personPhone') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                            <input type="text" wire:model="personNationalId" 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 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                            <input type="date" wire:model="personDateOfBirth" 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 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                            <select wire:model="personGender" 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 text-sm">
                                <option value="">{{ __('اختر...') }}</option>
                                <option value="male">{{ __('ذكر') }}</option>
                                <option value="female">{{ __('أنثى') }}</option>
                            </select>
                            @error('personGender') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>
            @endif

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

        {{-- Step 2: Employment --}}
        @if($currentStep === 2)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات التوظيف') }}</h2>
            <div class="grid grid-cols-1 sm: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="department" 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 text-sm">
                    @error('department') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <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="position" 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 text-sm">
                    @error('position') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التوظيف') }} <span class="text-red-500">*</span></label>
                    <select wire:model="employmentType" 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 text-sm">
                        <option value="">{{ __('اختر...') }}</option>
                        @foreach($employmentTypes as $type)
                            <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </select>
                    @error('employmentType') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @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="startDate" 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 text-sm">
                    @error('startDate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء') }}</label>
                    <input type="date" wire:model="endDate" 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 text-sm">
                    @error('endDate') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        @endif

        {{-- Step 3: Branch & Manager --}}
        @if($currentStep === 3)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الفرع والمسؤول') }}</h2>
            <div class="grid grid-cols-1 sm: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>
                    <select wire:model="branchId" 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 text-sm">
                        <option value="">{{ __('اختر الفرع...') }}</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('branchId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المسؤول المباشر') }}</label>
                    <select wire:model="managerId" 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 text-sm">
                        <option value="">{{ __('بدون مسؤول') }}</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->person?->name_ar ?? $emp->employee_number }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif

        {{-- Step 4: Salary --}}
        @if($currentStep === 4)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الراتب') }}</h2>
            <div class="grid grid-cols-1 sm: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>
                    <div class="relative">
                        <input type="number" wire:model="salaryAmount" dir="ltr" step="0.01" 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 text-sm pe-12">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('salaryAmount') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('دورية الراتب') }} <span class="text-red-500">*</span></label>
                    <select wire:model="salaryFrequency" 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 text-sm">
                        <option value="">{{ __('اختر...') }}</option>
                        @foreach($salaryFrequencies as $freq)
                            <option value="{{ $freq->value }}">{{ $freq->label() }}</option>
                        @endforeach
                    </select>
                    @error('salaryFrequency') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ساعات العمل الأسبوعية') }}</label>
                    <input type="number" wire:model="workingHoursPerWeek" dir="ltr" step="0.5" min="1" max="168"
                           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 text-sm">
                    @error('workingHoursPerWeek') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        @endif

        {{-- Step 5: User Account --}}
        @if($currentStep === 5)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('حساب المستخدم') }}</h2>

            <label class="flex items-center gap-3 mb-4 cursor-pointer">
                <input type="checkbox" wire:model.live="createUserAccount" class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <span class="text-sm font-medium text-gray-700">{{ __('إنشاء حساب مستخدم للموظف') }}</span>
            </label>

            @if($createUserAccount)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3 border-t border-gray-100">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني (اسم المستخدم)') }} <span class="text-red-500">*</span></label>
                        <input type="email" wire:model="userEmail" 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 text-sm">
                        <p class="mt-1 text-xs text-gray-500">{{ __('سيُستخدم لتسجيل الدخول إلى النظام') }}</p>
                        @error('userEmail') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الصلاحيات (الدور)') }} <span class="text-red-500">*</span></label>
                        <select wire:model="userRoleId" 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 text-sm">
                            <option value="">{{ __('اختر الدور...') }}</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name_ar }} ({{ $role->slug }})</option>
                            @endforeach
                        </select>
                        @error('userRoleId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور') }} <span class="text-red-500">*</span></label>
                        <input type="password" wire:model="userPassword"
                               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 text-sm">
                        @error('userPassword') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تأكيد كلمة المرور') }} <span class="text-red-500">*</span></label>
                        <input type="password" wire:model="userPasswordConfirmation"
                               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 text-sm">
                        @error('userPasswordConfirmation') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div class="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
                    <p class="text-xs text-blue-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {{ __('سيتمكن الموظف من تسجيل الدخول للنظام بهذا البريد وكلمة المرور') }}
                    </p>
                </div>
            @else
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                    <p class="text-sm text-gray-600">{{ __('لن يتم إنشاء حساب مستخدم. يمكنك إنشاؤه لاحقاً من صفحة المستخدمين.') }}</p>
                </div>
            @endif
        @endif

        {{-- Step 6: Review --}}
        @if($currentStep === 6 && !$completed)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('مراجعة وتأكيد') }}</h2>
            <dl class="space-y-3">
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الاسم') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $personNameAr }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $personPhone }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('القسم') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $department }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('المسمى الوظيفي') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $position }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('نوع التوظيف') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ \App\Domain\HR\Enums\EmploymentType::from($employmentType)->label() }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $startDate }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الراتب') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format((float)$salaryAmount, 2) }} {{ __('ج.م') }} / {{ \App\Domain\HR\Enums\SalaryFrequency::from($salaryFrequency)->label() }}</dd>
                </div>
                @if($workingHoursPerWeek)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('ساعات العمل') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ $workingHoursPerWeek }} {{ __('ساعة/أسبوع') }}</dd>
                </div>
                @endif
                @if($createUserAccount)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('حساب المستخدم') }}</dt>
                    <dd class="text-sm font-medium text-green-700">{{ __('سيتم إنشاؤه') }} ({{ $userEmail }})</dd>
                </div>
                @else
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('حساب المستخدم') }}</dt>
                    <dd class="text-sm font-medium text-gray-500">{{ __('لن يتم إنشاؤه') }}</dd>
                </div>
                @endif
            </dl>
        @endif

        {{-- Success State --}}
        @if($completed)
            <div class="text-center py-8">
                <div class="mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ __('تم إضافة الموظف بنجاح') }}</h3>
                <p class="text-sm text-gray-600 mb-6">{{ __('يمكنك الآن عرض بيانات الموظف أو إضافة موظف آخر') }}</p>
                <div class="flex items-center justify-center gap-3">
                    <a href="{{ route('employees.list') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        {{ __('قائمة الموظفين') }}
                    </a>
                    <button wire:click="$refresh" onclick="window.location.reload()" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                        {{ __('إضافة موظف آخر') }}
                    </button>
                </div>
            </div>
        @endif
    </div>

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