<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.base-prices') }}" 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>

                {{-- Priceable Type --}}
                <div>
                    <label for="priceable_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العنصر') }} <span class="text-red-500">*</span></label>
                    <select id="priceable_type" wire:model.live="priceable_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('priceable_type') border-red-500 @enderror">
                        <option value="">{{ __('اختر نوع العنصر') }}</option>
                        <option value="training_program">{{ __('برنامج تدريبي') }}</option>
                        <option value="activity">{{ __('نشاط') }}</option>
                    </select>
                    @error('priceable_type') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Priceable ID --}}
                <div>
                    <label for="priceable_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنصر') }} <span class="text-red-500">*</span></label>
                    <select id="priceable_id" wire:model="priceable_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 @error('priceable_id') border-red-500 @enderror"
                            {{ empty($priceable_type) ? 'disabled' : '' }}>
                        <option value="">{{ __('اختر العنصر') }}</option>
                        @foreach($priceableOptions as $id => $label)
                        <option value="{{ $id }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('priceable_id') <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>
                    @error('branch_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Amount --}}
                <div>
                    <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المبلغ (ج.م)') }} <span class="text-red-500">*</span></label>
                    <input type="number" id="amount" wire:model="amount" 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('amount') border-red-500 @enderror">
                    @error('amount') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </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">
                    <p class="mt-1 text-xs text-gray-500">{{ __('اتركه فارغاً للسعر المفتوح') }}</p>
                    @error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </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>

                {{-- 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>

                {{-- Notes --}}
                <div class="sm:col-span-2">
                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
                    <textarea id="notes" wire:model="notes" 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>
                    @error('notes') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            {{-- 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.base-prices') }}" 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>
