<div>
    <div class="max-w-3xl mx-auto">
        {{-- Header --}}
        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('employees.list') }}" wire:navigate class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l5-5-5-5M18 12H4"/></svg>
            </a>
            <h1 class="text-2xl font-bold text-gray-900">{{ $editing ? __('تعديل موظف') : __('إضافة موظف جديد') }}</h1>
        </div>

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

        <form wire:submit="save" class="space-y-6">
            {{-- Person Selection --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الشخص') }}</h2>

                @if($personId)
                    <div class="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <span class="font-medium text-blue-900">{{ $selectedPersonName }}</span>
                        @unless($editing)
                        <button type="button" wire:click="$set('personId', null)" class="text-sm text-blue-600 hover:text-blue-800">{{ __('تغيير') }}</button>
                        @endunless
                    </div>
                @else
                    <div class="relative">
                        <input type="text" wire:model.live.debounce.300ms="personSearch"
                               placeholder="{{ __('ابحث بالاسم أو الهاتف أو الرقم القومي...') }}"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

                        @if(count($searchResults) > 0)
                            <div class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                                @foreach($searchResults as $person)
                                    <button type="button" wire:click="selectPerson({{ $person->id }})"
                                            class="w-full px-4 py-3 text-start hover:bg-gray-50 border-b border-gray-100 last:border-0">
                                        <p class="font-medium text-gray-900">{{ $person->name_ar }}</p>
                                        <p class="text-xs text-gray-500 mt-0.5">{{ $person->phone ?? '' }} {{ $person->national_id ? '- ' . $person->national_id : '' }}</p>
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
                @error('personId') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Employment Details --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 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="employmentType" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            @foreach($employmentTypes as $t)
                                <option value="{{ $t->value }}">{{ $t->label() }}</option>
                            @endforeach
                        </select>
                        @error('employmentType') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                        <select wire:model="branchId" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">{{ __('-- اختر --') }}</option>
                            @foreach($branches as $b)
                                <option value="{{ $b->id }}">{{ $b->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القسم') }}</label>
                        <input type="text" wire:model="department" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="{{ __('مثال: التدريب') }}">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المنصب') }}</label>
                        <input type="text" wire:model="position" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="{{ __('مثال: مدرب أول') }}">
                    </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-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                        @error('startDate') <p class="text-sm text-red-600 mt-1">{{ $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-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدير المباشر') }}</label>
                        <select wire:model="managerId" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">{{ __('-- بدون --') }}</option>
                            @foreach($managers as $m)
                                <option value="{{ $m->id }}">{{ $m->person->name_ar ?? $m->employee_number }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Salary --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('الراتب') }}</h2>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ (ج.م)') }}</label>
                        <input type="number" wire:model="salaryAmount" step="0.01" min="0" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="0.00">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('دورة الصرف') }}</label>
                        <select wire:model="salaryFrequency" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">{{ __('-- اختر --') }}</option>
                            @foreach($salaryFrequencies as $f)
                                <option value="{{ $f->value }}">{{ $f->label() }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ساعات العمل/أسبوع') }}</label>
                        <input type="number" wire:model="workingHoursPerWeek" step="0.5" min="0" max="168" dir="ltr"
                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="40">
                    </div>
                </div>
            </div>

            {{-- Notes --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
                <textarea wire:model="notes" rows="3" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500" placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
            </div>

            {{-- Submit --}}
            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('employees.list') }}" wire:navigate class="px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100">{{ __('إلغاء') }}</a>
                <button type="submit" wire:loading.attr="disabled" wire:target="save"
                        class="px-6 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
                    <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التغييرات') : __('إضافة الموظف') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>
