155 lines
7.4 KiB
PHP
155 lines
7.4 KiB
PHP
@php
|
|
use Illuminate\Support\Facades\Storage;
|
|
|
|
$preparedSlides = collect($slides)->map(function ($slide) {
|
|
$slide['image_url'] = $slide['image'] ? Storage::url($slide['image']) : null;
|
|
return $slide;
|
|
})->values();
|
|
@endphp
|
|
|
|
@if($showModal && count($slides) > 0)
|
|
<div class="onboarding-modal"
|
|
x-data="paymenterOnboarding({
|
|
open: @entangle('showModal').live,
|
|
currentSlide: @entangle('currentSlide').live,
|
|
slides: @js($preparedSlides),
|
|
componentId: '{{ $this->getId() }}',
|
|
showBackdrop: @json($this->showBackdrop)
|
|
})"
|
|
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"
|
|
style="display: flex !important;">
|
|
|
|
<div class="absolute inset-0 transition-opacity duration-300"
|
|
:class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
|
|
@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]"
|
|
style="display: block !important;"
|
|
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">
|
|
|
|
<!-- Image Section -->
|
|
<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">
|
|
<h3 class="text-primary-100 text-xl font-semibold"
|
|
x-text="slides[currentSlide]?.title">Loading...</h3>
|
|
<p class="text-base/80 text-sm leading-6"
|
|
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">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<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">
|
|
<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()"
|
|
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="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"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
<script>
|
|
function paymenterOnboarding(config) {
|
|
return {
|
|
open: config.open,
|
|
currentSlide: config.currentSlide,
|
|
slides: config.slides ?? [],
|
|
showBackdrop: config.showBackdrop ?? false,
|
|
componentId: config.componentId,
|
|
init() {
|
|
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.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
|