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

    {{-- Flash Messages --}}
    @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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <form wire:submit="save">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {{-- Name Arabic --}}
                <div>
                    <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="name_ar" 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-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Name English --}}
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                    <input type="text" id="name" 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"
                </div>

                {{-- Rule Type --}}
                <div>
                    <label for="rule_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع القاعدة') }} <span class="text-red-500">*</span></label>
                    <select id="rule_type" wire:model.live="rule_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 @error('rule_type') border-red-500 @enderror">
                        <option value="">{{ __('اختر نوع القاعدة') }}</option>
                        @foreach($ruleTypes as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('rule_type') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Adjustment Type --}}
                <div>
                    <label for="adjustment_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التعديل') }} <span class="text-red-500">*</span></label>
                    <select id="adjustment_type" wire:model.live="adjustment_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 @error('adjustment_type') border-red-500 @enderror">
                        <option value="">{{ __('اختر نوع التعديل') }}</option>
                        @foreach($adjustmentTypes as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('adjustment_type') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Adjustment Value --}}
                <div>
                    <label for="adjustment_value" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('قيمة التعديل') }} <span class="text-red-500">*</span>
                        @if(in_array($adjustment_type, ['percentage_discount', 'percentage_increase']))
                            <span class="text-gray-400 text-xs">({{ __('%') }})</span>
                        @elseif(in_array($adjustment_type, ['fixed_discount', 'fixed_price']))
                            <span class="text-gray-400 text-xs">({{ __('ج.م') }})</span>
                        @endif
                    </label>
                    <input type="number" id="adjustment_value" wire:model="adjustment_value" step="0.01" min="0.01" 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('adjustment_value') border-red-500 @enderror">
                    @error('adjustment_value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Branch --}}
                <div>
                    <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                    <select id="branch_id" 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>
                </div>

                {{-- Priority --}}
                <div>
                    <label for="priority" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأولوية') }}</label>
                    <input type="number" id="priority" wire:model="priority" min="0" 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"
                    <p class="mt-1 text-xs text-gray-500">{{ __('الرقم الأقل يُطبّق أولاً') }}</p>
                </div>

                {{-- Max Discount Percent --}}
                <div>
                    <label for="max_discount_percent" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للخصم %') }}</label>
                    <input type="number" id="max_discount_percent" wire:model="max_discount_percent" min="1" 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 @error('max_discount_percent') border-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لعدم وجود حد') }}</p>
                    @error('max_discount_percent') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Usage Limit --}}
                <div>
                    <label for="usage_limit" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام') }}</label>
                    <input type="number" id="usage_limit" wire:model="usage_limit" 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"
                    <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً لاستخدام غير محدود') }}</p>
                </div>

                {{-- Effective From --}}
                <div>
                    <label for="effective_from" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label>
                    <input type="date" id="effective_from" wire:model="effective_from" 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('effective_from') border-red-500 @enderror">
                    @error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Effective To --}}
                <div>
                    <label for="effective_to" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label>
                    <input type="date" id="effective_to" wire:model="effective_to" 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('effective_to') border-red-500 @enderror">
                    @error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Is Stackable --}}
                <div class="min-h-[44px] flex items-center gap-3 pt-6">
                    <input type="checkbox" id="is_stackable" wire:model="is_stackable"
                           class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <label for="is_stackable" class="text-sm font-medium text-gray-700">{{ __('قابل للتكديس مع قواعد أخرى') }}</label>
                </div>

                {{-- Is Active --}}
                <div class="min-h-[44px] flex items-center gap-3 pt-6">
                    <input type="checkbox" id="is_active" wire:model="is_active"
                           class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <label for="is_active" class="text-sm font-medium text-gray-700">{{ __('نشط') }}</label>
                </div>
            </div>

            {{-- Conditions Section --}}
            @if($rule_type)
            <div class="mt-6 border-t border-gray-200 pt-6">
                <h3 class="text-base sm:text-lg font-medium text-gray-800 mb-4">{{ __('الشروط') }}</h3>
                <div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }">
                    @switch($rule_type)
                        @case('age')
                            <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" min="0" dir="ltr"
                                           x-model.number="conditions.min_age"
                                           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" min="0" dir="ltr"
                                           x-model.number="conditions.max_age"
                                           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>
                            @break

                        @case('membership_duration')
                            <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" min="0" dir="ltr"
                                           x-model.number="conditions.min_months"
                                           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" min="0" dir="ltr"
                                           x-model.number="conditions.max_months"
                                           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>
                            @break

                        @case('family_size')
                            <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" min="1" dir="ltr"
                                           x-model.number="conditions.min_family_size"
                                           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" min="1" dir="ltr"
                                           x-model.number="conditions.max_family_size"
                                           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>
                            @break

                        @case('sibling_order')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ترتيب الأخ (مثال: 2 = الثاني)') }}</label>
                                <input type="number" min="1" dir="ltr"
                                       x-model.number="conditions.sibling_order"
                                       class="w-full max-w-xs 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>
                            @break

                        @case('classification')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيفات المؤهلة') }}</label>
                                <div class="flex flex-wrap gap-3 mt-2">
                                    @foreach(['regular' => 'عادي', 'vip' => 'VIP', 'scholarship' => 'منحة', 'staff_child' => 'ابن موظف', 'trial' => 'تجريبي'] as $val => $lbl)
                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                        <input type="checkbox" value="{{ $val }}"
                                               x-model="conditions.classifications"
                                               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">{{ __($lbl) }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                            @break

                        @case('gender')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
                                <div class="flex gap-4 mt-2">
                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                        <input type="radio" value="male" x-model="conditions.gender"
                                               class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">{{ __('ذكر') }}</span>
                                    </label>
                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                        <input type="radio" value="female" x-model="conditions.gender"
                                               class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">{{ __('أنثى') }}</span>
                                    </label>
                                </div>
                            </div>
                            @break

                        @case('enrollment_timing')
                            <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="date" dir="ltr"
                                           x-model="conditions.before_date"
                                           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" min="1" dir="ltr"
                                           x-model.number="conditions.within_days"
                                           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>
                            @break

                        @case('enrollment_volume')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للتسجيلات') }}</label>
                                <input type="number" min="1" dir="ltr"
                                       x-model.number="conditions.min_enrollments"
                                       class="w-full max-w-xs 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>
                            @break

                        @case('seasonal')
                            <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="date" dir="ltr"
                                           x-model="conditions.season_start"
                                           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" dir="ltr"
                                           x-model="conditions.season_end"
                                           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>
                            @break

                        @case('day_time')
                            <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>
                                    <div class="flex flex-wrap gap-2 mt-1">
                                        @foreach(['saturday' => 'السبت', 'sunday' => 'الأحد', 'monday' => 'الاثنين', 'tuesday' => 'الثلاثاء', 'wednesday' => 'الأربعاء', 'thursday' => 'الخميس', 'friday' => 'الجمعة'] as $day => $dayLabel)
                                        <label class="inline-flex items-center gap-1">
                                            <input type="checkbox" value="{{ $day }}"
                                                   x-model="conditions.days"
                                                   class="w-3 h-3 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                            <span class="text-xs text-gray-700">{{ __($dayLabel) }}</span>
                                        </label>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label>
                                        <input type="time" dir="ltr"
                                               x-model="conditions.start_time"
                                               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="time" dir="ltr"
                                               x-model="conditions.end_time"
                                               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>
                            @break

                        @case('loyalty')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للنقاط') }}</label>
                                <input type="number" min="0" dir="ltr"
                                       x-model.number="conditions.min_points"
                                       class="w-full max-w-xs 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>
                            @break

                        @case('branch')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفروع المؤهلة') }}</label>
                                <div class="flex flex-wrap gap-3 mt-2">
                                    @foreach($branches as $branch)
                                    <label class="inline-flex items-center gap-2">
                                        <input type="checkbox" value="{{ $branch->id }}"
                                               x-model="conditions.branch_ids"
                                               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">{{ $branch->name_ar }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                            @break

                        @case('custom')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وصف الشرط المخصص') }}</label>
                                <textarea x-model="conditions.description" 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"
                                          placeholder="{{ __('اكتب وصف الشرط المخصص...') }}"></textarea>
                            </div>
                            @break
                    @endswitch
                </div>
            </div>
            @endif

            {{-- Submit --}}
            <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
                <a href="{{ route('pricing.rules') }}" wire:navigate
                   class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 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>
</div>
