<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء قاعدة تسعير') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('إنشاء قاعدة خصم أو تعديل سعر جديدة') }}</p>
        </div>
    </div>

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

    {{-- Success State --}}
    @if($completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
        <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>
        <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('تم إنشاء القاعدة بنجاح') }}</h2>
        <p class="text-gray-500 mb-6">{{ __('تم حفظ قاعدة التسعير وستُطبق على العمليات القادمة') }}</p>
        <a href="{{ route('pricing.rules') }}" wire:navigate
           class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors">
            {{ __('العودة لقائمة القواعد') }}
        </a>
    </div>
    @else

    {{-- Step Indicator --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @foreach($this->getStepLabels() as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <button wire:click="goToStep({{ $num }})"
                        @if($num >= $currentStep) disabled @endif
                        class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors
                        {{ $num === $currentStep ? 'bg-emerald-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $currentStep)
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs font-medium hidden sm:inline
                        {{ $num === $currentStep ? 'text-emerald-600' : '' }}
                        {{ $num < $currentStep ? 'text-green-600' : '' }}
                        {{ $num > $currentStep ? 'text-gray-400' : '' }}">
                        {{ __($label) }}
                    </span>
                </button>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">

        {{-- Step 1: Rule Type --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('اختر نوع القاعدة') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد نوع الشرط الذي سيتم التحقق منه عند تطبيق الخصم') }}</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($ruleTypes as $type)
                <label class="relative cursor-pointer">
                    <input type="radio" wire:model="ruleType" value="{{ $type->value }}" class="peer sr-only">
                    <div class="p-4 border-2 rounded-xl transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                        border-gray-200 hover:border-gray-300">
                        <div class="font-medium text-gray-800">{{ $type->label() }}</div>
                        <div class="text-xs text-gray-500 mt-1">{{ $type->value }}</div>
                    </div>
                </label>
                @endforeach
            </div>

            @error('ruleType')
            <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>
        @endif

        {{-- Step 2: Conditions --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('شروط القاعدة') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد الشروط التي يجب تحققها لتطبيق هذه القاعدة') }}</p>

            @if($ruleType === 'age')
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للعمر') }}</label>
                    <input type="number" wire:model="minAge" dir="ltr" min="1" max="100"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    @error('minAge') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للعمر') }}</label>
                    <input type="number" wire:model="maxAge" dir="ltr" min="1" max="100"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    @error('maxAge') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            @elseif($ruleType === 'membership_duration')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لأشهر العضوية') }}</label>
                <input type="number" wire:model="minMonths" dir="ltr" min="1"
                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                @error('minMonths') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @elseif($ruleType === 'family_size')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لعدد الأبناء') }}</label>
                <input type="number" wire:model="minChildren" dir="ltr" min="2"
                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                @error('minChildren') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @elseif($ruleType === 'sibling_order')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ترتيب الأخ (مثال: 2 = الأخ الثاني)') }}</label>
                <input type="number" wire:model="orderNumber" dir="ltr" min="1"
                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                @error('orderNumber') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @elseif($ruleType === 'gender')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الجنس المستهدف') }}</label>
                <div class="flex gap-4">
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="targetGender" value="male" class="peer sr-only">
                        <div class="px-6 py-3 border-2 rounded-xl transition-all
                            peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                            border-gray-200 hover:border-gray-300 font-medium">
                            {{ __('ذكر') }}
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="targetGender" value="female" class="peer sr-only">
                        <div class="px-6 py-3 border-2 rounded-xl transition-all
                            peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                            border-gray-200 hover:border-gray-300 font-medium">
                            {{ __('أنثى') }}
                        </div>
                    </label>
                </div>
                @error('targetGender') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @elseif($ruleType === 'branch')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع المستهدف') }}</label>
                <select wire:model="targetBranchId"
                        class="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">{{ __('اختر الفرع') }}</option>
                    @foreach($branches as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                    @endforeach
                </select>
                @error('targetBranchId') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @elseif($ruleType === 'classification')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('التصنيف المستهدف') }}</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @php
                        $classifications = [
                            'regular' => 'عادي',
                            'vip' => 'VIP',
                            'scholarship' => 'منحة',
                            'staff_child' => 'ابن موظف',
                            'trial' => 'تجريبي',
                        ];
                    @endphp
                    @foreach($classifications as $value => $label)
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="targetClassification" value="{{ $value }}" class="peer sr-only">
                        <div class="px-4 py-3 border-2 rounded-xl transition-all text-center
                            peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                            border-gray-200 hover:border-gray-300 font-medium text-sm">
                            {{ __($label) }}
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('targetClassification') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            @else
            {{-- Generic conditions for: enrollment_timing, enrollment_volume, seasonal, day_time, loyalty, custom --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الشروط (JSON)') }}</label>
                <textarea wire:model="genericConditions" rows="5" dir="ltr"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-mono text-sm"
                          placeholder='{"key": "value"}'></textarea>
                <p class="text-xs text-gray-400 mt-1">{{ __('أدخل الشروط بصيغة JSON. اتركه فارغاً إذا لا توجد شروط إضافية.') }}</p>
            </div>
            @endif
        </div>
        @endif

        {{-- Step 3: Adjustment --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('نوع التعديل') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد كيف سيتم تعديل السعر عند تطبيق هذه القاعدة') }}</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                @foreach($adjustmentTypes as $type)
                <label class="relative cursor-pointer">
                    <input type="radio" wire:model="adjustmentType" value="{{ $type->value }}" class="peer sr-only">
                    <div class="p-4 border-2 rounded-xl transition-all
                        peer-checked:border-emerald-500 peer-checked:bg-emerald-50
                        border-gray-200 hover:border-gray-300">
                        <div class="font-medium text-gray-800">{{ $type->label() }}</div>
                    </div>
                </label>
                @endforeach
            </div>
            @error('adjustmentType') <p class="text-red-500 text-xs mb-4">{{ $message }}</p> @enderror

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('القيمة') }}
                        @if(in_array($adjustmentType, ['percentage_discount', 'percentage_increase']))
                            <span class="text-gray-400">({{ __('%') }})</span>
                        @else
                            <span class="text-gray-400">({{ __('ج.م') }})</span>
                        @endif
                    </label>
                    <input type="number" wire:model="adjustmentValue" dir="ltr" min="1"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    @if(in_array($adjustmentType, ['fixed_discount', 'fixed_price']))
                    <p class="text-xs text-gray-400 mt-1">{{ __('القيمة بالقروش (100 قرش = 1 جنيه)') }}</p>
                    @endif
                    @error('adjustmentValue') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للخصم %') }}</label>
                    <input type="number" wire:model="maxDiscountPercent" dir="ltr" min="1" max="100"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                           placeholder="{{ __('اختياري') }}">
                    @error('maxDiscountPercent') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @endif

        {{-- Step 4: Scope & Priority --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-2">{{ __('النطاق والأولوية') }}</h2>
            <p class="text-sm text-gray-500 mb-6">{{ __('حدد تفاصيل القاعدة ونطاق تطبيقها') }}</p>

            <div class="space-y-4">
                {{-- Name --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 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="nameAr"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        @error('nameAr') <p class="text-red-500 text-xs mt-1">{{ $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 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Target & Branch --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الهدف') }}</label>
                        <select wire:model="targetType"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="">{{ __('الكل') }}</option>
                            <option value="program">{{ __('برنامج') }}</option>
                            <option value="activity">{{ __('نشاط') }}</option>
                            <option value="product">{{ __('منتج') }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('معرف الهدف') }}</label>
                        <input type="number" wire:model="targetId" dir="ltr"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                               placeholder="{{ __('اختياري') }}">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                        <select wire:model="branchId"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            <option value="">{{ __('جميع الفروع') }}</option>
                            @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Priority & Stackable --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 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="priority" dir="ltr" min="1" max="100"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <p class="text-xs text-gray-400 mt-1">{{ __('رقم أقل = أولوية أعلى') }}</p>
                        @error('priority') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام') }}</label>
                        <input type="number" wire:model="usageLimit" dir="ltr" min="1"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                               placeholder="{{ __('بدون حد') }}">
                        @error('usageLimit') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="flex items-end gap-6 pb-2">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="isStackable"
                                   class="w-5 h-5 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                            <span class="text-sm font-medium text-gray-700">{{ __('قابلة للتراكم') }}</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="isActive"
                                   class="w-5 h-5 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                            <span class="text-sm font-medium text-gray-700">{{ __('مفعّلة') }}</span>
                        </label>
                    </div>
                </div>

                {{-- Dates --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ البدء') }} <span class="text-red-500">*</span></label>
                        <input type="date" wire:model="effectiveFrom" dir="ltr"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        @error('effectiveFrom') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء') }}</label>
                        <input type="date" wire:model="effectiveTo" dir="ltr"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <p class="text-xs text-gray-400 mt-1">{{ __('اتركه فارغاً لقاعدة مفتوحة') }}</p>
                        @error('effectiveTo') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- Step 5: Review --}}
        @if($currentStep === 5)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة القاعدة') }}</h2>

            <div class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('الاسم') }}</div>
                        <div class="font-medium text-gray-800">{{ $nameAr }}</div>
                        @if($name)
                        <div class="text-sm text-gray-500">{{ $name }}</div>
                        @endif
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('نوع القاعدة') }}</div>
                        <div class="font-medium text-gray-800">{{ $this->ruleTypeLabel }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('نوع التعديل') }}</div>
                        <div class="font-medium text-gray-800">{{ $this->adjustmentTypeLabel }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('قيمة التعديل') }}</div>
                        <div class="font-medium text-gray-800" dir="ltr">
                            @if(in_array($adjustmentType, ['percentage_discount', 'percentage_increase']))
                                {{ $adjustmentValue }}%
                            @else
                                {{ number_format($adjustmentValue / 100, 2) }} {{ __('ج.م') }}
                            @endif
                        </div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('الأولوية') }}</div>
                        <div class="font-medium text-gray-800">{{ $priority }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('قابلة للتراكم') }}</div>
                        <div class="font-medium text-gray-800">{{ $isStackable ? __('نعم') : __('لا') }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('تاريخ البدء') }}</div>
                        <div class="font-medium text-gray-800" dir="ltr">{{ $effectiveFrom }}</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-xs text-gray-500 mb-1">{{ __('تاريخ الانتهاء') }}</div>
                        <div class="font-medium text-gray-800" dir="ltr">{{ $effectiveTo ?: __('مفتوح') }}</div>
                    </div>
                </div>

                @if($maxDiscountPercent)
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                    <div class="text-sm text-amber-700">
                        {{ __('الحد الأقصى للخصم:') }} {{ $maxDiscountPercent }}%
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Navigation Buttons --}}
        <div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-200">
            <div>
                @if($currentStep > 1)
                <button wire:click="previousStep"
                        class="px-5 py-2.5 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium transition-colors">
                    {{ __('السابق') }}
                </button>
                @endif
            </div>
            <div>
                @if($currentStep < $totalSteps)
                <button wire:click="nextStep" wire:loading.attr="disabled" wire:target="nextStep"
                        class="px-6 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                    <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                </button>
                @else
                <button wire:click="confirm" wire:loading.attr="disabled" wire:target="confirm"
                        class="px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span>
                    <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
                </button>
                @endif
            </div>
        </div>
    </div>
    @endif
</div>
