107 lines
5.2 KiB
PHP
107 lines
5.2 KiB
PHP
@php use Illuminate\Support\Facades\Storage; @endphp
|
|
<div>
|
|
@if($showModal && count($slides) > 0)
|
|
<div x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide') }"
|
|
x-show="open"
|
|
x-cloak
|
|
x-init="$watch('open', value => {
|
|
if(value) {
|
|
document.documentElement.style.overflow = 'hidden';
|
|
} else {
|
|
document.documentElement.style.overflow = '';
|
|
}
|
|
})"
|
|
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden pointer-events-none">
|
|
|
|
|
|
@if($this->showBackdrop)
|
|
<div class="absolute inset-0 bg-black/50 transition-opacity duration-300 pointer-events-auto"
|
|
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-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
wire:click="finish"></div>
|
|
@endif
|
|
|
|
|
|
<div class="w-full max-w-xl mx-4 md:mx-auto bg-background-secondary border border-neutral rounded-lg shadow-2xl overflow-hidden h-[500px] flex flex-col relative z-10 pointer-events-auto"
|
|
x-show="open"
|
|
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-300"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-90">
|
|
|
|
|
|
@foreach($slides as $index => $slide)
|
|
<div wire:key="slide-{{ $slide['id'] }}"
|
|
x-show="currentSlide === {{ $index }}"
|
|
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"
|
|
class="flex flex-col h-full absolute inset-0">
|
|
|
|
|
|
@if($slide['image'])
|
|
<div class="w-full h-56 flex-shrink-0 overflow-hidden rounded-t-lg">
|
|
<img class="w-full h-full object-cover"
|
|
src="{{ Storage::url($slide['image']) }}"
|
|
alt="{{ $slide['title'] }}">
|
|
</div>
|
|
@endif
|
|
|
|
|
|
<div class="p-6 flex-1 overflow-y-auto">
|
|
<h3 class="text-xl font-bold text-primary-100 mb-2.5">
|
|
{{ $slide['title'] }}
|
|
</h3>
|
|
<p class="text-sm text-base/80 leading-relaxed">
|
|
{{ $slide['description'] }}
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div class="flex justify-center gap-2 px-6 pb-4 flex-shrink-0">
|
|
@foreach($slides as $dotIndex => $dot)
|
|
<div class="h-1.5 rounded-full transition-all duration-300"
|
|
:class="currentSlide === {{ $dotIndex }} ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
<div class="flex justify-between items-center px-6 pb-5 pt-1 flex-shrink-0">
|
|
<button wire:click="previousSlide"
|
|
:disabled="currentSlide === 0"
|
|
class="px-4 py-1.5 text-sm text-base/70 hover:text-primary-100 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<div class="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
|
|
</div>
|
|
</button>
|
|
|
|
<button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()"
|
|
class="px-5 py-1.5 text-sm bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition shadow-sm">
|
|
<div class="flex items-center gap-1.5">
|
|
<span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
|
|
<svg x-show="currentSlide !== {{ count($slides) - 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>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|