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

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

    <form wire:submit="save" class="space-y-6">
        {{-- Basic Info --}}
        <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">{{ __('اسم البرنامج بالعربية') }} <span class="text-red-500">*</span></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') <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="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') <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="activity_id" 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>
                        @foreach($activities as $activity)
                        <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('activity_id') <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="branch_id" 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>
                        @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                        @endforeach
                    </select>
                    @error('branch_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف بالعربية') }}</label>
                    <textarea wire:model="description_ar" rows="3" 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>
        </div>

        {{-- Configuration --}}
        <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>
                    <select wire:model="skill_level" 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="all">{{ __('الكل') }}</option>
                        <option value="beginner">{{ __('مبتدئ') }}</option>
                        <option value="intermediate">{{ __('متوسط') }}</option>
                        <option value="advanced">{{ __('متقدم') }}</option>
                        <option value="professional">{{ __('محترف') }}</option>
                    </select>
                </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="all">{{ __('الكل') }}</option>
                        <option value="male">{{ __('ذكور') }}</option>
                        <option value="female">{{ __('إناث') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سياسة التجديد') }}</label>
                    <select wire:model="renewal_policy" 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="manual_renew">{{ __('تجديد يدوي') }}</option>
                        <option value="auto_renew">{{ __('تجديد تلقائي') }}</option>
                        <option value="one_time">{{ __('مرة واحدة') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label>
                    <input type="number" wire:model="age_min" min="1" max="99" 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="number" wire:model="age_max" min="1" max="99" 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">{{ __('حصص/أسبوع') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="sessions_per_week" min="1" max="7" 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('sessions_per_week') <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="number" wire:model="session_duration_minutes" min="15" max="240" 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('session_duration_minutes') <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="total_sessions" min="1" 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="number" wire:model="program_duration_weeks" min="1" 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>
        </div>

        {{-- Capacity --}}
        <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">{{ __('الحد الأدنى') }} <span class="text-red-500">*</span></label>
                    <input type="number" wire:model="min_participants" min="1" 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('min_participants') <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="number" wire:model="max_participants" min="1" 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('max_participants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="min-h-[44px] flex items-center">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model="allow_waitlist" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('تفعيل قائمة الانتظار') }}</span>
                    </label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الحضور المطلوبة %') }}</label>
                    <input type="number" wire:model="attendance_requirement_percent" min="0" max="100" 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 class="min-h-[44px] flex items-center">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model="assessment_required" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('يتطلب تقييم') }}</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- Dates --}}
        <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="date" wire:model="program_start_date" 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="date" wire:model="program_end_date" 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="date" wire:model="registration_deadline" 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 class="min-h-[44px] flex items-center">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model="registration_open" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('التسجيل مفتوح') }}</span>
                    </label>
                </div>
                <div class="min-h-[44px] flex items-center">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model="featured" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">{{ __('برنامج مميز') }}</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- Pricing --}}
        <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-800 mb-4 border-b border-gray-100 pb-2">{{ __('الأسعار') }}</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="number" wire:model="member_price" dir="ltr" step="0.01" min="0"
                           placeholder="0.00"
                           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('member_price') border-red-500 @enderror">
                    @error('member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    <p class="text-xs text-gray-500 mt-1">{{ __('السعر لأعضاء النادي') }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر غير العضو (ج.م)') }}</label>
                    <input type="number" wire:model="non_member_price" dir="ltr" step="0.01" min="0"
                           placeholder="0.00"
                           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('non_member_price') border-red-500 @enderror">
                    @error('non_member_price') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    <p class="text-xs text-gray-500 mt-1">{{ __('السعر لغير الأعضاء') }}</p>
                </div>
            </div>
        </div>

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