From dadf71c94ba0eaef810611b95122b98ef34adbf1 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:52:44 -0500
Subject: [PATCH] refactor: enhance onboarding modal structure and improve
 slide handling for better user interaction

---
 .../resources/views/modal.blade.php           | 52 ++++++-------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index dc1ce0474..0caa3a835 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -6,9 +6,10 @@
      x-data="{ 
          open: @entangle('showModal'), 
          currentSlide: @entangle('currentSlide'),
+         ready: false,
          init() {
-             // Small delay to ensure DOM is settled before showing
              setTimeout(() => {
+                 this.ready = true;
                  this.$el.style.opacity = '1';
                  this.$el.style.visibility = 'visible';
              }, 50);
@@ -24,12 +25,6 @@
     
     {{-- Modal Container --}}
     <div x-show="open"
-         x-transition:enter="transition ease-out duration-300"
-         x-transition:enter-start="opacity-0"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-200"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0"
          style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
         
         {{-- Backdrop --}}
@@ -40,27 +35,12 @@
         @endif
         
         {{-- Modal Dialog --}}
-        <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
-             style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
-             x-transition:enter="transition ease-out duration-300"
-             x-transition:enter-start="opacity-0 scale-90"
-             x-transition:enter-end="opacity-100 scale-100"
-             x-transition:leave="transition ease-in duration-200"
-             x-transition:leave-start="opacity-100 scale-100"
-             x-transition:leave-end="opacity-0 scale-90">
+        <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
+             style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;">
 
-        {{-- Slides --}}
-        @foreach($slides as $index => $slide)
-            <div wire:key="slide-{{ $slide['id'] }}" 
-                 x-show="currentSlide === {{ $index }}"
-                 x-cloak
-                 x-transition:enter="transition ease-out duration-150"
-                 x-transition:enter-start="opacity-0"
-                 x-transition:enter-end="opacity-100"
-                 x-transition:leave="transition ease-in duration-150"
-                 x-transition:leave-start="opacity-100"
-                 x-transition:leave-end="opacity-0"
-                 style="flex-direction: column;{{ $index === $currentSlide ? ' display: flex;' : ' display: none;' }}">
+            {{-- Single slide container that updates content --}}
+            @php $slide = $slides[$currentSlide] ?? $slides[0]; @endphp
+            <div style="display: flex; flex-direction: column;">
                 
                 {{-- Slide Image --}}
                 @if($slide['image'])
@@ -84,17 +64,16 @@
                 {{-- Slide Indicators --}}
                 <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
                     @foreach($slides as $dotIndex => $dot)
-                        <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;" 
-                             :style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
+                        <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s; {{ $dotIndex === $currentSlide ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);' }}"></div>
                     @endforeach
                 </div>
 
                 {{-- Navigation Buttons --}}
                 <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
                     <button wire:click="previousSlide" 
-                            :disabled="currentSlide === 0"
-                            style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer;"
-                            class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed">
+                            @if($currentSlide === 0) disabled @endif
+                            style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer; {{ $currentSlide === 0 ? 'opacity: 0.5; cursor: not-allowed;' : '' }}"
+                            class="text-base/70 hover:text-primary-100">
                         <span style="display: flex; align-items: center; gap: 0.375rem;">
                             <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
@@ -103,19 +82,20 @@
                         </span>
                     </button>
 
-                    <button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()" 
+                    <button wire:click="{{ $currentSlide === count($slides) - 1 ? 'finish' : 'nextSlide' }}" 
                             style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.15s; border: none; cursor: pointer; color: white;"
                             class="bg-primary hover:bg-primary/90">
                         <span style="display: flex; align-items: center; gap: 0.375rem;">
-                            <span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
-                            <svg x-show="currentSlide !== {{ count($slides) - 1 }}" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            {{ $currentSlide === count($slides) - 1 ? 'Finish' : (($slide['is_guided'] ?? false) ? 'Continue' : 'Next') }}
+                            @if($currentSlide !== count($slides) - 1)
+                            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                             </svg>
+                            @endif
                         </span>
                     </button>
                 </div>
             </div>
-        @endforeach
         </div>
     </div>
 </div>