Fix toggle switches broken in RTL — force dir=ltr on switch element

The knob was offset because `after:start-[2px]` + `rtl:peer-checked:after:-translate-x-full`
creates conflicting positioning in RTL. Fix: wrap the toggle in dir="ltr" and use
`after:left-[2px]` so the switch itself is always LTR (knob moves left→right when on),
while the label text around it remains RTL.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/admin/system-settings.blade.php

@@ -53,17 +53,19 @@ class="shrink-0 px-3 sm:px-4 py-2.5 text-sm font-medium whitespace-nowrap border
 
                             @if($config['type'] === 'boolean')
                                 {{-- Toggle switch --}}
-                                <label class="relative inline-flex items-center cursor-pointer">
-                                    <input
-                                        type="checkbox"
-                                        id="setting-{{ $key }}"
-                                        wire:model="settings.{{ $key }}"
-                                        value="1"
-                                        @checked(filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN))
-                                        class="sr-only peer"
-                                    >
-                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                                    <span class="ms-3 text-sm text-gray-600">
+                                <label class="inline-flex items-center cursor-pointer gap-3">
+                                    <span class="relative" dir="ltr">
+                                        <input
+                                            type="checkbox"
+                                            id="setting-{{ $key }}"
+                                            wire:model="settings.{{ $key }}"
+                                            value="1"
+                                            @checked(filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN))
+                                            class="sr-only peer"
+                                        >
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                    </span>
+                                    <span class="text-sm text-gray-600">
                                         {{ filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN) ? __('مفعّل') : __('معطّل') }}
                                     </span>
                                 </label>
@@ -112,6 +114,10 @@ class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-50
                                     class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                 >
                             @endif
+
+                            @if(!empty($config['hint']))
+                                <p class="mt-1.5 text-xs text-gray-500">{{ __($config['hint']) }}</p>
+                            @endif
                         </div>
                     @endforeach
                 </div>

resources/views/livewire/notifications/notification-template-form.blade.php

@@ -93,9 +93,9 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:r
 
             {{-- Active --}}
             <div class="min-h-[44px] flex items-center gap-3 pt-6">
-                <label class="relative inline-flex items-center cursor-pointer">
+                <label class="relative inline-flex items-center cursor-pointer" dir="ltr">
                     <input type="checkbox" wire:model="is_active" class="sr-only peer">
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                 </label>
                 <span class="text-sm font-medium text-gray-700">{{ __('القالب نشط') }}</span>
             </div>

resources/views/livewire/receptionist/enroll-existing-wizard.blade.php

@@ -277,9 +277,9 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-emerald-600 text-whi
             @if($program && $program->fee_amount)
             <div class="border-t border-gray-200 pt-6">
                 <div class="flex items-center gap-4 mb-4">
-                    <label class="relative cursor-pointer">
+                    <label class="relative cursor-pointer" dir="ltr">
                         <input type="checkbox" wire:model.live="pay_now" class="peer sr-only">
-                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:start-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6 rtl:peer-checked:after:-translate-x-6"></div>
+                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6"></div>
                     </label>
                     <span class="text-base font-medium text-gray-700">{{ __('الدفع الآن') }}</span>
                 </div>

resources/views/livewire/receptionist/new-registration-wizard.blade.php

@@ -532,21 +532,6 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
                                 <span class="text-gray-500">{{ __('رسوم البرنامج') }}:</span>
                                 <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
                             </div>
-                            @if($this->platformFee > 0)
-                            <div class="flex items-center justify-between">
-                                <span class="text-gray-500">{{ __('رسوم الخدمة (3%)') }}:</span>
-                                <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->platformFee / 100, 2) }} {{ __('ج.م') }}</span>
-                            </div>
-                            <div class="flex items-center justify-between pt-2 border-t border-gray-200">
-                                <span class="font-semibold text-gray-700">{{ __('الإجمالي') }}:</span>
-                                <span class="font-bold text-green-700" dir="ltr">{{ number_format($this->totalWithFee / 100, 2) }} {{ __('ج.م') }}</span>
-                            </div>
-                            @else
-                            <div class="flex items-center justify-between">
-                                <span class="font-semibold text-gray-700">{{ __('الإجمالي') }}:</span>
-                                <span class="font-bold text-green-700" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
-                            </div>
-                            @endif
                         </div>
                         @else
                         <p class="mt-2 text-gray-500">{{ __('بدون رسوم') }}</p>
@@ -554,6 +539,109 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
                     </div>
                     @endif
                 </div>
+
+                {{-- Hot-Buy: Quick product/kit sale --}}
+                <div class="p-4 bg-amber-50 rounded-xl border border-amber-200" x-data="{ showSearch: false }">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="font-semibold text-gray-700 flex items-center gap-2">
+                            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
+                            </svg>
+                            {{ __('بيع سريع (اختياري)') }}
+                        </h3>
+                        <button type="button" @click="showSearch = !showSearch"
+                                class="text-sm text-amber-700 hover:text-amber-900 font-medium">
+                            <span x-show="!showSearch">{{ __('إضافة منتج') }}</span>
+                            <span x-show="showSearch" x-cloak>{{ __('إغلاق') }}</span>
+                        </button>
+                    </div>
+
+                    {{-- Search --}}
+                    <div x-show="showSearch" x-cloak x-transition class="mb-3">
+                        <input type="text" wire:model.live.debounce.300ms="hotbuy_search"
+                               class="w-full px-4 py-3 border border-amber-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 text-sm"
+                               placeholder="{{ __('ابحث بالاسم أو الكود أو الباركود...') }}">
+
+                        @if(count($this->hotbuyResults) > 0)
+                        <div class="mt-2 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
+                            @foreach($this->hotbuyResults as $result)
+                            <button type="button" wire:click="addHotbuyItem({{ $result['id'] }}, '{{ $result['type'] }}')"
+                                    class="w-full flex items-center justify-between px-4 py-3 text-start hover:bg-amber-50 border-b border-gray-100 last:border-0 transition-colors">
+                                <div>
+                                    <p class="text-sm font-medium text-gray-800">{{ $result['name_ar'] }}</p>
+                                    <p class="text-xs text-gray-500">
+                                        {{ $result['type'] === 'kit' ? __('طقم') : __('منتج') }}
+                                        @if($result['sku']) — {{ $result['sku'] }} @endif
+                                    </p>
+                                </div>
+                                <span class="text-sm font-bold text-green-700" dir="ltr">{{ number_format($result['price'] / 100, 2) }} {{ __('ج.م') }}</span>
+                            </button>
+                            @endforeach
+                        </div>
+                        @elseif(strlen($hotbuy_search) >= 2)
+                        <p class="mt-2 text-xs text-gray-500 text-center">{{ __('لا توجد نتائج') }}</p>
+                        @endif
+                    </div>
+
+                    {{-- Cart items --}}
+                    @if(count($hotbuyCart) > 0)
+                    <div class="space-y-2">
+                        @foreach($hotbuyCart as $key => $cartItem)
+                        <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-200">
+                            <div class="flex-1">
+                                <p class="text-sm font-medium text-gray-800">{{ $cartItem['name_ar'] }}</p>
+                                <p class="text-xs text-gray-500" dir="ltr">{{ number_format($cartItem['price'] / 100, 2) }} {{ __('ج.م') }}</p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] - 1 }})"
+                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">−</button>
+                                <span class="w-8 text-center text-sm font-bold">{{ $cartItem['quantity'] }}</span>
+                                <button type="button" wire:click="updateHotbuyQuantity('{{ $key }}', {{ $cartItem['quantity'] + 1 }})"
+                                        class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 text-lg font-bold">+</button>
+                                <button type="button" wire:click="removeHotbuyItem('{{ $key }}')"
+                                        class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center hover:bg-red-200 ms-2">
+                                    <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="M6 18L18 6M6 6l12 12"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                    @else
+                    <p class="text-xs text-gray-500">{{ __('يمكنك إضافة منتجات أو طقم (يونيفورم، كرة، إلخ) على نفس الفاتورة') }}</p>
+                    @endif
+                </div>
+
+                {{-- Grand Total Summary --}}
+                @if($this->selectedProgramFee > 0 || $this->hotbuyTotal > 0)
+                <div class="p-4 bg-green-50 rounded-xl border border-green-200">
+                    <div class="space-y-1.5 text-sm">
+                        @if($this->selectedProgramFee > 0)
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600">{{ __('رسوم البرنامج') }}</span>
+                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
+                        </div>
+                        @endif
+                        @if($this->hotbuyTotal > 0)
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-600">{{ __('منتجات إضافية') }}</span>
+                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->hotbuyTotal / 100, 2) }} {{ __('ج.م') }}</span>
+                        </div>
+                        @endif
+                        @if($this->platformFee > 0)
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-500">{{ __('رسوم الخدمة') }}</span>
+                            <span class="font-medium text-gray-800" dir="ltr">{{ number_format($this->platformFee / 100, 2) }} {{ __('ج.م') }}</span>
+                        </div>
+                        @endif
+                        <div class="flex items-center justify-between pt-2 border-t border-green-200">
+                            <span class="font-bold text-gray-800">{{ __('الإجمالي') }}</span>
+                            <span class="font-bold text-green-700 text-lg" dir="ltr">{{ number_format($this->totalWithFee / 100, 2) }} {{ __('ج.م') }}</span>
+                        </div>
+                    </div>
+                </div>
+                @endif
             </div>
 
             <div class="flex justify-between mt-8">
@@ -581,15 +669,23 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
         <div>
             <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الدفع') }}</h2>
 
-            @if($this->selectedProgramFee > 0)
+            @if($this->totalWithFee > 0)
             <div class="p-4 bg-blue-50 border border-blue-200 rounded-xl mb-6 space-y-2">
+                @if($this->selectedProgramFee > 0)
                 <div class="flex items-center justify-between text-sm">
                     <span class="text-blue-600">{{ __('رسوم البرنامج') }}</span>
                     <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->selectedProgramFee / 100, 2) }} {{ __('ج.م') }}</span>
                 </div>
+                @endif
+                @if($this->hotbuyTotal > 0)
+                <div class="flex items-center justify-between text-sm">
+                    <span class="text-blue-600">{{ __('منتجات إضافية') }} ({{ count($hotbuyCart) }})</span>
+                    <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->hotbuyTotal / 100, 2) }} {{ __('ج.م') }}</span>
+                </div>
+                @endif
                 @if($this->platformFee > 0)
                 <div class="flex items-center justify-between text-sm">
-                    <span class="text-blue-600">{{ __('رسوم الخدمة (3%)') }}</span>
+                    <span class="text-blue-600">{{ __('رسوم الخدمة') }}</span>
                     <span class="font-medium text-blue-700" dir="ltr">{{ number_format($this->platformFee / 100, 2) }} {{ __('ج.م') }}</span>
                 </div>
                 @endif
@@ -609,9 +705,9 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
             <div class="space-y-6">
                 {{-- Pay now toggle --}}
                 <div class="flex items-center gap-4">
-                    <label class="relative cursor-pointer">
+                    <label class="relative cursor-pointer" dir="ltr">
                         <input type="checkbox" wire:model.live="pay_now" class="peer sr-only">
-                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:start-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6 rtl:peer-checked:after:-translate-x-6"></div>
+                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6"></div>
                     </label>
                     <span class="text-base font-medium text-gray-700">{{ __('الدفع الآن') }}</span>
                 </div>

resources/views/livewire/settings/branding-settings.blade.php

@@ -465,9 +465,9 @@ class="px-3 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-medium whitespace-now
                         'compact_sidebar' => ['شريط جانبي مضغوط', 'يعرض الشريط الجانبي بحجم أصغر (أيقونات فقط)'],
                     ] as $field => [$label, $desc])
                         <label class="flex items-start gap-4 cursor-pointer group">
-                            <div class="relative mt-0.5">
+                            <div class="relative mt-0.5" dir="ltr">
                                 <input type="checkbox" wire:model="{{ $field }}" class="sr-only peer">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                             </div>
                             <div>
                                 <span class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors">{{ __($label) }}</span>

resources/views/livewire/settings/system-settings-form.blade.php

@@ -67,7 +67,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
                             </label>
 
                             @if($type === 'boolean')
-                                <label class="relative inline-flex items-center cursor-pointer min-h-[44px]">
+                                <label class="relative inline-flex items-center cursor-pointer" dir="ltr">
                                     <input
                                         type="checkbox"
                                         id="setting-{{ $key }}"
@@ -75,7 +75,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
                                         value="1"
                                         @checked(filter_var($value, FILTER_VALIDATE_BOOLEAN))
                                         class="sr-only peer">
-                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                 </label>
                             @elseif($type === 'integer' || $type === 'float')
                                 <input