From f0cbf2ac7318b175ab2a462c7e14e5395a4122be Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 23:53:19 -0500
Subject: [PATCH] refactor: simplify onboarding modal initialization and
 enhance slide navigation functionality for improved user experience

---
 .../resources/views/modal.blade.php           | 121 +++++++-----------
 1 file changed, 44 insertions(+), 77 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index ada00b671..dd723633c 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -10,24 +10,62 @@
 @if($showModal)
     <!-- Debug: PHP Data Check -->
     <script>
-        console.log('📦 PHP Data:', {
+        const phpData = {
             showModal: @json($showModal),
             slidesCount: @json(count($slides)),
             currentSlide: @json($currentSlide),
             slides: @json($preparedSlides),
             showBackdrop: @json($this->showBackdrop ?? false)
-        });
+        };
+        console.log('📦 PHP Data:', phpData);
+        console.log('📊 Prepared Slides:', @json($preparedSlides));
     </script>
     
     <div class="onboarding-modal"
-         x-data="paymenterOnboarding({
+         x-data="{
             open: @js($showModal),
             currentSlide: @js($currentSlide),
             slides: @js($preparedSlides),
             componentId: @js($this->getId()),
-            showBackdrop: @js($this->showBackdrop ?? false)
-         })"
-         x-init="init()">
+            showBackdrop: @js($this->showBackdrop ?? false),
+            init() {
+                console.log('🚀 Alpine Init - Direct Data');
+                console.log('Slides:', this.slides);
+                console.log('Current Slide:', this.currentSlide);
+                console.log('Slides Length:', this.slides?.length);
+                
+                this.$watch('open', value => {
+                    document.documentElement.style.overflow = value ? 'hidden' : '';
+                });
+                if (this.open) {
+                    document.documentElement.style.overflow = 'hidden';
+                }
+            },
+            get activeSlide() {
+                return this.slides[this.currentSlide] ?? null;
+            },
+            primaryActionLabel(index) {
+                const isLast = index === this.slides.length - 1;
+                if (isLast) return 'Finish';
+                return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
+            },
+            previous() {
+                if (this.currentSlide <= 0) return;
+                this.currentSlide--;
+                @this.call('previousSlide');
+            },
+            next() {
+                if (this.currentSlide >= this.slides.length - 1) {
+                    this.finish();
+                    return;
+                }
+                this.currentSlide++;
+                @this.call('nextSlide');
+            },
+            finish() {
+                @this.call('finish');
+            }
+         }"
         <div x-show="open"
              x-transition.opacity
              class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
@@ -148,75 +186,4 @@
         </div>
     </div>
 
-    @once
-        <script>
-            function paymenterOnboarding(config) {
-                console.log('🎯 Onboarding Modal Initialized with config:', config);
-                
-                const data = {
-                    open: config?.open ?? true,
-                    currentSlide: config?.currentSlide ?? 0,
-                    slides: config?.slides ?? [],
-                    showBackdrop: config?.showBackdrop ?? false,
-                    componentId: config?.componentId ?? '',
-                    init() {
-                        console.log('🚀 Alpine.js Init Called');
-                        console.log('📊 Data after init:', {
-                            slides: this.slides,
-                            currentSlide: this.currentSlide,
-                            open: this.open,
-                            slidesLength: this.slides?.length,
-                            slideData: this.slides[this.currentSlide]
-                        });
-                        
-                        this.$watch('open', value => {
-                            console.log('👁️ Open changed to:', value);
-                            document.documentElement.style.overflow = value ? 'hidden' : '';
-                        });
-
-                        if (this.open) {
-                            document.documentElement.style.overflow = 'hidden';
-                        }
-                    },
-                    get activeSlide() {
-                        return this.slides[this.currentSlide] ?? null;
-                    },
-                    primaryActionLabel(index) {
-                        const isLast = index === this.slides.length - 1;
-                        if (isLast) {
-                            return 'Finish';
-                        }
-                        return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
-                    },
-                    previous() {
-                        if (this.currentSlide <= 0) {
-                            return;
-                        }
-                        this.currentSlide--;
-                        this.callLivewire('previousSlide');
-                    },
-                    next() {
-                        if (this.currentSlide >= this.slides.length - 1) {
-                            this.finish();
-                            return;
-                        }
-                        this.currentSlide++;
-                        this.callLivewire('nextSlide');
-                    },
-                    finish() {
-                        this.callLivewire('finish');
-                    },
-                    callLivewire(method) {
-                        if (!method || !window.Livewire) {
-                            return;
-                        }
-                        const component = window.Livewire.find(this.componentId);
-                        if (component) {
-                            component.call(method);
-                        }
-                    }
-                };
-            }
-        </script>
-    @endonce
 @endif