@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)
    <style>
        .onboarding-modal[x-cloak],
        .onboarding-modal [x-cloak] {
            display: none !important;
        }
    </style>

    <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()"
         x-cloak>
        <div 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-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: auto;">

            <div class="absolute inset-0"
                 :style="showBackdrop ? 'background-color: rgba(0,0,0,0.55);' : 'background-color: rgba(0,0,0,0.15);'"
                 @click="finish()"></div>

            <div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl"
                 style="position: relative; width: min(32rem, calc(100% - 2rem)); pointer-events: auto; z-index: 10;"
                 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">

                <template x-for="(slide, index) in slides" :key="slide.id">
                    <div x-show="currentSlide === index"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 translate-y-2"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 translate-y-0"
                         x-transition:leave-end="opacity-0 translate-y-2"
                         style="display: flex; flex-direction: column;"
                         x-cloak>

                        <template x-if="slide.image">
                            <div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 1rem 1rem 0 0;">
                                <img :src="slide.image_url ?? slide.image"
                                     :alt="slide.title"
                                     style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </template>

                        <div style="padding: 1.5rem;">
                            <h3 class="text-primary-100"
                                style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;"
                                x-text="slide.title"></h3>
                            <p class="text-base/80"
                               style="font-size: 0.9rem; line-height: 1.6;"
                               x-text="slide.description"></p>
                        </div>

                        <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
                            <template x-for="dotIndex in slides.length" :key="'dot-' + dotIndex">
                                <div style="height: 0.4rem; border-radius: 9999px; transition: all 0.3s;"
                                     :style="currentSlide === dotIndex - 1 ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.4rem; background-color: var(--color-neutral, #525252);'"></div>
                            </template>
                        </div>

                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem 1.5rem 1.5rem;">
                            <button @click="previous()"
                                    :disabled="currentSlide === 0"
                                    class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                    style="padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;">
                                <span style="display: flex; align-items: center; gap: 0.4rem;">
                                    <svg style="width: 1rem; height: 1rem;" 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') }}
                                </span>
                            </button>

                            <button @click="next()"
                                    class="bg-primary hover:bg-primary/90"
                                    style="padding: 0.45rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: none; color: white; cursor: pointer;">
                                <span style="display: flex; align-items: center; gap: 0.4rem;">
                                    <span x-text="primaryActionLabel(index)"></span>
                                    <svg x-show="index !== slides.length - 1"
                                         style="width: 1rem; height: 1rem;"
                                         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>
                                </span>
                            </button>
                        </div>
                    </div>
                </template>
            </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';
                        }
                    },
                    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