Remove all Alpine dependency from setup wizard — use server-side @if

Replaced x-data/x-show/x-transition with @if($currentStep === N)/@endif.
Livewire re-renders the component on each step change, so only the
active step's HTML is sent to the browser. No JS needed, no entangle,
no Alpine timing issues.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/wizards/setup-wizard.blade.php

-<div x-data="{
-    get currentStep() { return $wire.currentStep },
-    get totalSteps() { return $wire.totalSteps },
-    animating: false,
-    direction: 'forward'
-}" class="space-y-8">
+<div class="space-y-8">
 
     {{-- ─── Progress Bar ─────────────────────────────────────────── --}}
     <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
@@ -61,14 +56,8 @@
     <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
 
         {{-- Step 1: Welcome --}}
-        <div x-show="currentStep === 1"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 1)
+        <div class="p-8">
             <div class="text-center mb-8">
                 <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                     <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -107,16 +96,11 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
                 </div>
             </div>
         </div>
+        @endif
 
         {{-- Step 2: Branches --}}
-        <div x-show="currentStep === 2"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 2)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('الفروع') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('أضف فروع الأكاديمية. يجب إضافة فرع واحد على الأقل.') }}</p>
@@ -198,16 +182,11 @@ class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gr
                 {{ __('إضافة فرع') }}
             </button>
         </div>
+        @endif
 
         {{-- Step 3: Activities --}}
-        <div x-show="currentStep === 3"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 3)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('الأنشطة') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('أضف الأنشطة الرياضية أو التعليمية التي تقدمها الأكاديمية. يمكنك تخطي هذه الخطوة وإضافتها لاحقاً.') }}</p>
@@ -288,16 +267,11 @@ class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gr
                 {{ __('إضافة نشاط') }}
             </button>
         </div>
+        @endif
 
         {{-- Step 4: Programs --}}
-        <div x-show="currentStep === 4"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 4)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('البرامج التدريبية') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('أضف البرامج المرتبطة بالأنشطة التي أضفتها. يمكنك تخطي هذه الخطوة.') }}</p>
@@ -401,16 +375,11 @@ class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gr
                 </button>
             @endif
         </div>
+        @endif
 
         {{-- Step 5: Facilities --}}
-        <div x-show="currentStep === 5"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 5)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('المنشآت') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('أضف الملاعب والمنشآت الرياضية الخاصة بالأكاديمية. يمكنك تخطي هذه الخطوة.') }}</p>
@@ -491,16 +460,11 @@ class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gr
                 {{ __('إضافة منشأة') }}
             </button>
         </div>
+        @endif
 
         {{-- Step 6: Users --}}
-        <div x-show="currentStep === 6"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 6)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('المستخدمين') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('أضف حسابات الموظفين. كلمة المرور الافتراضية هي "password" وسيُطلب منهم تغييرها عند أول تسجيل دخول.') }}</p>
@@ -587,16 +551,11 @@ class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl p-4 text-gr
                 {{ __('إضافة مستخدم') }}
             </button>
         </div>
+        @endif
 
         {{-- Step 7: Settings --}}
-        <div x-show="currentStep === 7"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 7)
+        <div class="p-8">
             <div class="mb-6">
                 <h2 class="text-xl font-bold text-gray-800">{{ __('الإعدادات العامة') }}</h2>
                 <p class="text-sm text-gray-500 mt-1">{{ __('اضبط الإعدادات الأساسية للنظام. يمكنك تعديلها لاحقاً من صفحة الإعدادات.') }}</p>
@@ -669,16 +628,11 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
                 </div>
             </div>
         </div>
+        @endif
 
         {{-- Step 8: Done --}}
-        <div x-show="currentStep === 8"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 translate-x-4"
-             x-transition:enter-end="opacity-100 translate-x-0"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 translate-x-0"
-             x-transition:leave-end="opacity-0 -translate-x-4"
-             class="p-8">
+        @if($currentStep === 8)
+        <div class="p-8">
             <div class="text-center mb-8">
                 <div class="w-20 h-20 bg-gradient-to-br from-green-100 to-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                     <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -723,6 +677,7 @@ class="p-8">
                 </div>
             </div>
         </div>
+        @endif
     </div>
 
     {{-- ─── Navigation Buttons ───────────────────────────────────── --}}