From 01625506b7c6f5e552a881974126992e139c0488 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 23:36:24 -0500
Subject: [PATCH] refactor: streamline onboarding modal by removing unnecessary
 styles and enhancing slide data handling for improved clarity and debugging

---
 .../resources/views/modal.blade.php           | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 2c6685062..95ab3d62c 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -8,13 +8,6 @@
 @endphp
 
 @if($showModal && count($slides) > 0)
-    <style>
-        .onboarding-modal[x-cloak],
-        .onboarding-modal [x-cloak] {
-            display: none !important;
-        }
-    </style>
-
     <div class="onboarding-modal"
          x-data="paymenterOnboarding({
             open: @entangle('showModal').live,
@@ -23,12 +16,11 @@
             componentId: '{{ $this->getId() }}',
             showBackdrop: @json($this->showBackdrop)
          })"
-         x-init="init()"
-         x-cloak>
+         x-init="init()">
         <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"
-             x-cloak>
+             style="display: flex !important;">
 
             <div class="absolute inset-0 transition-opacity duration-300"
                  :class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
@@ -44,24 +36,32 @@
                  x-transition:leave-end="opacity-0 scale-90">
 
                 <!-- Image Section -->
-                <div x-show="activeSlide && activeSlide.image_url" 
-                     class="w-full h-56 overflow-hidden"
-                     style="display: block;">
-                    <img x-bind:src="activeSlide ? activeSlide.image_url : ''"
-                         x-bind:alt="activeSlide ? activeSlide.title : ''"
+                <div x-show="slides[currentSlide] && slides[currentSlide].image_url" 
+                     class="w-full h-56 overflow-hidden">
+                    <img :src="slides[currentSlide]?.image_url || ''"
+                         :alt="slides[currentSlide]?.title || ''"
                          class="w-full h-full object-cover">
                 </div>
 
                 <!-- Content Section -->
-                <div class="p-6 space-y-3" style="display: block !important;">
+                <div class="p-6 space-y-3">
                     <h3 class="text-primary-100 text-xl font-semibold"
-                        x-text="activeSlide ? activeSlide.title : 'Loading...'"></h3>
+                        x-text="slides[currentSlide]?.title">Loading...</h3>
                     <p class="text-base/80 text-sm leading-6"
-                       x-text="activeSlide ? activeSlide.description : 'Please wait...'"></p>
+                       x-text="slides[currentSlide]?.description">Please wait...</p>
+                    
+                    <!-- Debug Info (remove after testing) -->
+                    <div class="mt-4 p-2 bg-gray-800 rounded text-xs" style="display: block;">
+                        <p class="text-gray-400">Debug Info:</p>
+                        <p class="text-gray-300">Current Slide: <span x-text="currentSlide">?</span></p>
+                        <p class="text-gray-300">Total Slides: <span x-text="slides.length">?</span></p>
+                        <p class="text-gray-300">Has Data: <span x-text="slides[currentSlide] ? 'Yes' : 'No'">?</span></p>
+                        <p class="text-gray-300">Title: <span x-text="slides[currentSlide]?.title || 'N/A'">?</span></p>
+                    </div>
                 </div>
 
                 <!-- Progress Dots -->
-                <div class="flex justify-center gap-2 px-6 pb-4" style="display: flex !important;">
+                <div class="flex justify-center gap-2 px-6 pb-4">
                     <template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
                         <div class="h-1.5 rounded-full transition-all duration-300"
                              :class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
@@ -69,7 +69,7 @@
                 </div>
 
                 <!-- Navigation Buttons -->
-                <div class="flex items-center justify-between px-6 pb-6" style="display: flex !important;">
+                <div class="flex items-center justify-between px-6 pb-6">
                     <button @click="previous()"
                             :disabled="currentSlide === 0"
                             class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
@@ -81,7 +81,7 @@
 
                     <button @click="next()"
                             class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
-                        <span x-text="primaryActionLabel(currentSlide)"></span>
+                        <span x-text="currentSlide === slides.length - 1 ? 'Finish' : 'Next'"></span>
                         <svg x-show="currentSlide !== slides.length - 1"
                              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="M9 5l7 7-7 7"/>