175 lines
9.0 KiB
PHP
175 lines
9.0 KiB
PHP
@php
|
|
use Illuminate\Support\Facades\Storage;
|
|
@endphp
|
|
|
|
<div>
|
|
@if($showModal)
|
|
<div class="onboarding-modal"
|
|
x-data="{
|
|
open: @js($showModal),
|
|
showBackdrop: @js($this->showBackdrop ?? false),
|
|
loading: false,
|
|
init() {
|
|
this.$watch('open', value => {
|
|
document.documentElement.style.overflow = value ? 'hidden' : '';
|
|
});
|
|
if (this.open) {
|
|
document.documentElement.style.overflow = 'hidden';
|
|
}
|
|
},
|
|
destroy() {
|
|
// Ensure overflow is reset when component is destroyed
|
|
document.documentElement.style.overflow = '';
|
|
},
|
|
previous() {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
@this.call('previousSlide').then(() => {
|
|
this.loading = false;
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
next() {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
@this.call('nextSlide').then(() => {
|
|
this.loading = false;
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
finish() {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
// Reset overflow before closing
|
|
document.documentElement.style.overflow = '';
|
|
@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">
|
|
|
|
<div x-show="showBackdrop"
|
|
class="absolute inset-0 bg-black/70 transition-opacity duration-300"
|
|
@click="finish()"></div>
|
|
|
|
<div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden min-h-[400px]"
|
|
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 wire:key="slide-wrapper-{{ $currentSlide }}">
|
|
<!-- Image Section -->
|
|
@if($slides[$currentSlide]['image'] ?? false)
|
|
<div class="w-full h-56 overflow-hidden">
|
|
<img src="{{ Storage::url($slides[$currentSlide]['image']) }}"
|
|
alt="{{ $slides[$currentSlide]['title'] ?? '' }}"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Content Section -->
|
|
<div class="p-6 space-y-3">
|
|
<!-- Show content when slides exist -->
|
|
@if(count($slides) > 0 && isset($slides[$currentSlide]))
|
|
<div>
|
|
<h3 class="text-primary-100 text-xl font-semibold mb-3">
|
|
{{ $slides[$currentSlide]['title'] ?? 'Loading...' }}
|
|
</h3>
|
|
<div class="prose prose-sm dark:prose-invert max-w-none">
|
|
{!! \Illuminate\Support\Str::markdown($slides[$currentSlide]['description'] ?? 'Please wait...', [
|
|
'allow_unsafe_links' => false,
|
|
'renderer' => [
|
|
'soft_break' => "<br>"
|
|
]
|
|
]) !!}
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Show error message when no slides -->
|
|
@if(count($slides) === 0)
|
|
<div class="text-center py-8">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<svg class="w-16 h-16 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-error mb-2">Setup Required</h3>
|
|
<p class="text-base/80 text-sm max-w-md">
|
|
The onboarding system needs to be configured. Please ensure:
|
|
</p>
|
|
<ul class="text-left text-sm text-base/70 mt-3 space-y-2 max-w-md mx-auto">
|
|
<li>1. Database migrations have been run</li>
|
|
<li>2. Onboarding slides have been created in the admin panel</li>
|
|
</ul>
|
|
<p class="text-xs text-base/60 mt-4">
|
|
Run: <code class="bg-gray-800 px-2 py-1 rounded">php artisan migrate</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Dots -->
|
|
@if(count($slides) > 0)
|
|
<div class="flex justify-center gap-2 px-6 pb-4">
|
|
@foreach($slides as $index => $slide)
|
|
<div class="h-1.5 rounded-full transition-all duration-300 {{ $currentSlide === $index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral' }}"
|
|
wire:key="dot-{{ $index }}"></div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Navigation Buttons -->
|
|
@if(count($slides) > 0)
|
|
<div class="flex items-center justify-between px-6 pb-6">
|
|
<button @click="previous()"
|
|
wire:loading.attr="disabled"
|
|
@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 transition-opacity">
|
|
<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="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
{{ __('Back') }}
|
|
</button>
|
|
|
|
<button @click="next()"
|
|
wire:loading.attr="disabled"
|
|
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 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
|
|
<span>{{ $currentSlide === count($slides) - 1 ? 'Finish' : 'Next' }}</span>
|
|
@if($currentSlide !== count($slides) - 1)
|
|
<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="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
@endif
|
|
<svg wire:loading wire:target="nextSlide,previousSlide" class="animate-spin h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Close button when no slides -->
|
|
@if(count($slides) === 0)
|
|
<div class="flex justify-center px-6 pb-6">
|
|
<button @click="finish()"
|
|
class="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium text-white bg-error hover:bg-error/90 rounded-md">
|
|
Close Setup Message
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|