<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
            {{ $editing ? __('تعديل العرض') : __('إضافة عرض / كوبون') }}
        </h1>
        <a href="{{ route('pricing.promotions') }}" 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 md:grid-cols-2 gap-6">
                {{-- 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 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 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                {{-- Type --}}
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('النوع') }} <span class="text-red-500">*</span></label>
                    <select id="type" wire:model.live="type"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
                        <option value="">{{ __('اختر النوع') }}</option>
                        @foreach($promotionTypes as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('type') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Code (only for coupon type) --}}
                <div x-data x-show="$wire.type === 'coupon'" x-cloak>
                    <label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('كود الكوبون') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="code" wire:model="code" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono uppercase @error('code') border-red-500 @enderror"
                           placeholder="SUMMER2026">
                    @error('code') <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 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 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 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>

                {{-- Min Purchase Amount --}}
                <div>
                    <label for="min_purchase_amount" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للشراء (ج.م)') }}</label>
                    <input type="number" id="min_purchase_amount" wire:model="min_purchase_amount" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 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 Amount --}}
                <div>
                    <label for="max_discount_amount" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للخصم (ج.م)') }}</label>
                    <input type="number" id="max_discount_amount" wire:model="max_discount_amount" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 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>

                {{-- Start Date --}}
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البداية') }} <span class="text-red-500">*</span></label>
                    <input type="date" id="start_date" wire:model="start_date" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('start_date') border-red-500 @enderror">
                    @error('start_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- End Date --}}
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ النهاية') }}</label>
                    <input type="date" id="end_date" wire:model="end_date" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('end_date') border-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً للعرض المفتوح') }}</p>
                    @error('end_date') <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 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>

                {{-- Per Participant Limit --}}
                <div>
                    <label for="per_participant_limit" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام لكل مشترك') }}</label>
                    <input type="number" id="per_participant_limit" wire:model="per_participant_limit" min="1" dir="ltr"
                           class="w-full px-4 py-2 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>

                {{-- 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 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                {{-- Is Active --}}
                <div class="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>

            {{-- Submit --}}
            <div class="mt-6 flex items-center gap-3">
                <button type="submit"
                        wire:loading.attr="disabled"
                        wire:target="save"
                        class="inline-flex items-center gap-2 px-6 py-2 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>
                <a href="{{ route('pricing.promotions') }}" wire:navigate
                   class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
                    {{ __('إلغاء') }}
                </a>
            </div>
        </form>
    </div>
</div>
