<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('people.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة للقائمة') }}</a>
    </div>

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

    <form wire:submit="save" class="space-y-6">
        <!-- Names -->
        <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">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
                    <input type="text" wire:model="name_ar"
                           class="w-full px-4 py-2.5 text-sm 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>
                <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 text-sm 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>
            </div>
        </div>

        <!-- Identity -->
        <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-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model.live.debounce.500ms="national_id" dir="ltr" maxlength="14"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('national_id') border-red-500 @enderror"
                           placeholder="{{ __('14 رقم') }}">
                    @error('national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    <p class="mt-1 text-xs text-gray-400">{{ __('سيتم استخراج تاريخ الميلاد والجنس والمحافظة تلقائياً') }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="date_of_birth" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    @error('date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} *</label>
                    <select wire:model="gender"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Contact -->
        <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">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="01xxxxxxxxx">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف بديل') }}</label>
                    <input type="text" wire:model="phone_secondary" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                    <input type="email" wire:model="email" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    @error('email') <p class="mt-1 text-sm 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="governorate"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدينة') }}</label>
                    <input type="text" wire:model="city"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label>
                    <input type="text" wire:model="address"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
            </div>
        </div>

        <!-- Emergency Contact -->
        <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-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم') }}</label>
                    <input type="text" wire:model="emergency_contact_name"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="emergency_contact_phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    @error('emergency_contact_phone') <p class="mt-1 text-sm 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="emergency_contact_relation"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('أب، أم، أخ...') }}">
                </div>
            </div>
        </div>

        <!-- Additional -->
        <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-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنسية') }}</label>
                    <input type="text" wire:model="nationality"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('فصيلة الدم') }}</label>
                    <select wire:model="blood_type"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label>
                    <select wire:model="classification"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        <option value="regular">{{ __('عادي') }}</option>
                        <option value="vip">VIP</option>
                        <option value="scholarship">{{ __('منحة') }}</option>
                        <option value="staff_child">{{ __('ابن موظف') }}</option>
                        <option value="trial">{{ __('تجريبي') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المصدر') }}</label>
                    <input type="text" wire:model="source"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="{{ __('كيف عرف عنا') }}">
                </div>
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات طبية') }}</label>
                <textarea wire:model="medical_notes" rows="2"
                          class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"</textarea>
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات عامة') }}</label>
                <textarea wire:model="notes" rows="2"
                          class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"</textarea>
            </div>
        </div>

        <!-- Submit -->
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('people.list') }}" wire:navigate
               class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">{{ __('إلغاء') }}</a>
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                    class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
                <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إضافة الشخص') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
