<div id="carousel-default" class="relative w-full h-full overflow-hidden">
    <div class="carousel-wrapper flex transition-transform duration-500 ease-in-out h-full" id="carousel-track">
        <div class="carousel-slide flex-shrink-0 w-full h-full">
            @if (Setting::get('masjid_photo_path'))
                <img src="{{ Storage::url(Setting::get('masjid_photo_path'))}}" class="w-full h-full object-cover rounded-2xl">
            @else
                <div class="bg-gray-100 h-full w-full"></div>
            @endif
        </div>
        @livewire('public-display.book-cards', ['theme' => $theme])
    </div>
    
    <!-- Navigation buttons -->
    <!--<button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75 transition-opacity" onclick="previousSlide()">
        <svg class="w-6 h-6" 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"></path>
        </svg>
    </button>
    <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75 transition-opacity" onclick="nextSlide()">
        <svg class="w-6 h-6" 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"></path>
        </svg>
    </button> -->
    
    <!-- Indicators -->
    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2" id="carousel-indicators">
        <!-- Indicators will be generated by JavaScript -->
    </div>
</div>

<script>
let currentSlide = 0;
let totalSlides = 0;
let autoSlideInterval;

function initCarousel() {
    const track = document.getElementById('carousel-track');
    const slides = track.children;
    totalSlides = slides.length;
    
    // Generate indicators
    const indicatorsContainer = document.getElementById('carousel-indicators');
    indicatorsContainer.innerHTML = '';
    for (let i = 0; i < totalSlides; i++) {
        const indicator = document.createElement('button');
        indicator.className = `w-3 h-3 rounded-full transition-colors ${
            i === 0 ? 'bg-white' : 'bg-white bg-opacity-50'
        }`;
        indicator.onclick = () => goToSlide(i);
        indicatorsContainer.appendChild(indicator);
    }
    
    // Start auto-slide
    startAutoSlide();
}

function updateCarousel() {
    const track = document.getElementById('carousel-track');
    const indicators = document.getElementById('carousel-indicators').children;
    
    track.style.transform = `translateX(-${currentSlide * 100}%)`;
    
    // Update indicators
    for (let i = 0; i < indicators.length; i++) {
        indicators[i].className = `w-3 h-3 rounded-full transition-colors ${
            i === currentSlide ? 'bg-white' : 'bg-white bg-opacity-50'
        }`;
    }
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    updateCarousel();
    resetAutoSlide();
}

function previousSlide() {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    updateCarousel();
    resetAutoSlide();
}

function goToSlide(index) {
    currentSlide = index;
    updateCarousel();
    resetAutoSlide();
}

function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 5000); // Auto-advance every 5 seconds
}

function resetAutoSlide() {
    clearInterval(autoSlideInterval);
    startAutoSlide();
}

// Initialize carousel when DOM is loaded
document.addEventListener('DOMContentLoaded', initCarousel);
</script>
