@php
    $sliderModel = isset($slider_id)
        ? AleshaSlider::with('activeSlides')->find($slider_id)
        : null;

    if (!$sliderModel || $sliderModel->activeSlides->isEmpty()) return;

    $uid      = 'slider_' . $sliderModel->id;
    $slides   = $sliderModel->activeSlides;
    $autoplay = $sliderModel->autoplay ? 'true' : 'false';
    $interval = (int) $sliderModel->interval;
@endphp

<div id="{{ $uid }}" class="relative overflow-hidden bg-gray-900" style="height: 520px;"
     data-autoplay="{{ $autoplay }}" data-interval="{{ $interval }}">

    @foreach($slides as $index => $slide)
    <div class="slider-slide absolute inset-0 transition-opacity duration-700"
         style="opacity: {{ $index === 0 ? '1' : '0' }}; z-index: {{ $index === 0 ? '1' : '0' }};">
        @if($slide->image_url)
        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ $slide->image_url }}')"></div>
        <div class="absolute inset-0 bg-black/40"></div>
        @endif
        <div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-6">
            @if($slide->title)
            <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 leading-tight">{{ $slide->title }}</h2>
            @endif
            @if($slide->subtitle)
            <p class="text-lg md:text-xl text-white/80 mb-8 max-w-2xl">{{ $slide->subtitle }}</p>
            @endif
            @if($slide->button_text && $slide->button_url)
            <a href="{{ $slide->button_url }}" target="{{ $slide->button_target }}"
               class="inline-flex items-center px-6 py-3 bg-white text-gray-900 font-semibold rounded-lg hover:bg-gray-100 transition-colors">
                {{ $slide->button_text }}
            </a>
            @endif
        </div>
    </div>
    @endforeach

    @if($slides->count() > 1)
    {{-- Prev / Next --}}
    <button type="button" onclick="sliderPrev('{{ $uid }}')"
            class="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors">
        <svg class="w-5 h-5" 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>
    </button>
    <button type="button" onclick="sliderNext('{{ $uid }}')"
            class="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors">
        <svg class="w-5 h-5" 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>

    {{-- Dots --}}
    <div class="absolute bottom-4 left-0 right-0 z-20 flex justify-center gap-2" id="{{ $uid }}_dots">
        @foreach($slides as $index => $slide)
        <button type="button" onclick="sliderGoTo('{{ $uid }}', {{ $index }})"
                class="slider-dot w-2.5 h-2.5 rounded-full transition-all {{ $index === 0 ? 'bg-white scale-125' : 'bg-white/50' }}"></button>
        @endforeach
    </div>
    @endif
</div>

<script>
(function() {
    const id = '{{ $uid }}';
    const el = document.getElementById(id);
    if (!el) return;

    const slideEls = el.querySelectorAll('.slider-slide');
    const dots     = el.querySelectorAll('.slider-dot');
    let current    = 0;
    let timer      = null;
    const autoplay = el.dataset.autoplay === 'true';
    const interval = parseInt(el.dataset.interval) || 5000;

    function goTo(idx) {
        slideEls[current].style.opacity = '0';
        slideEls[current].style.zIndex  = '0';
        dots[current]?.classList.remove('bg-white', 'scale-125');
        dots[current]?.classList.add('bg-white/50');

        current = (idx + slideEls.length) % slideEls.length;

        slideEls[current].style.opacity = '1';
        slideEls[current].style.zIndex  = '1';
        dots[current]?.classList.add('bg-white', 'scale-125');
        dots[current]?.classList.remove('bg-white/50');
    }

    window.sliderNext = function(sid) { if (sid === id) { goTo(current + 1); resetTimer(); } };
    window.sliderPrev = function(sid) { if (sid === id) { goTo(current - 1); resetTimer(); } };
    window.sliderGoTo = function(sid, idx) { if (sid === id) { goTo(idx); resetTimer(); } };

    function resetTimer() {
        clearInterval(timer);
        if (autoplay && slideEls.length > 1) timer = setInterval(() => goTo(current + 1), interval);
    }

    resetTimer();
})();
</script>
