@php use Illuminate\Support\Facades\Storage; @endphp
<div>
@if($showModal && count($slides) > 0)
<div id="onboarding-modal-wrapper" 
     style="opacity: 0; visibility: hidden;"
     x-data="{ 
         open: @entangle('showModal'), 
         currentSlide: @entangle('currentSlide'),
         ready: false,
         init() {
             setTimeout(() => {
                 this.ready = true;
                 this.$el.style.opacity = '1';
                 this.$el.style.visibility = 'visible';
             }, 50);
             this.$watch('open', value => { 
                 if(value) { 
                     document.documentElement.style.overflow = 'hidden'; 
                 } else { 
                     document.documentElement.style.overflow = ''; 
                 } 
             });
         }
     }">
    
    {{-- Modal Container --}}
    <div x-show="open"
         style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
        
        {{-- Backdrop --}}
        @if($this->showBackdrop)
        <div class="bg-black/50"
             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
             wire:click="finish"></div>
        @endif
        
        {{-- Modal Dialog --}}
        <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
             style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;">

            {{-- Single slide container that updates content --}}
            @php $slide = $slides[$currentSlide] ?? $slides[0]; @endphp
            <div style="display: flex; flex-direction: column;">
                
                {{-- Slide Image --}}
                @if($slide['image'])
                <div style="width: 100%; height: 14rem; flex-shrink: 0; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
                    <img style="width: 100%; height: 100%; object-fit: cover;" 
                         src="{{ Storage::url($slide['image']) }}" 
                         alt="{{ $slide['title'] }}">
                </div>
                @endif
                
                {{-- Slide Content --}}
                <div style="padding: 1.5rem;">
                    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
                        {{ $slide['title'] }}
                    </h3>
                    <p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
                        {{ $slide['description'] }}
                    </p>
                </div>

                {{-- Slide Indicators --}}
                <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
                    @foreach($slides as $dotIndex => $dot)
                        <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s; {{ $dotIndex === $currentSlide ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);' }}"></div>
                    @endforeach
                </div>

                {{-- Navigation Buttons --}}
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
                    <button wire:click="previousSlide" 
                            @if($currentSlide === 0) disabled @endif
                            style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer; {{ $currentSlide === 0 ? 'opacity: 0.5; cursor: not-allowed;' : '' }}"
                            class="text-base/70 hover:text-primary-100">
                        <span style="display: flex; align-items: center; gap: 0.375rem;">
                            <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 wire:click="{{ $currentSlide === count($slides) - 1 ? 'finish' : 'nextSlide' }}" 
                            style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.15s; border: none; cursor: pointer; color: white;"
                            class="bg-primary hover:bg-primary/90">
                        <span style="display: flex; align-items: center; gap: 0.375rem;">
                            {{ $currentSlide === count($slides) - 1 ? 'Finish' : (($slide['is_guided'] ?? false) ? 'Continue' : 'Next') }}
                            @if($currentSlide !== count($slides) - 1)
                            <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="M9 5l7 7-7 7"/>
                            </svg>
                            @endif
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
</div>