<?php
    $slider_query = new WP_Query(array(
        'post_type' => 'slides', 
        'posts_per_page' => -1,
        'orderby' => 'date',
        'order' => 'DESC',
    ));
    
    $first_slide = true;
    $slide_count = $slider_query->found_posts;
?>

<div id="autoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000" data-bs-pause="hover">
    <div class="carousel-inner">
        <?php if ($slider_query->have_posts()): ?>
            <?php while ($slider_query->have_posts()): ?>
                <?php $slider_query->the_post();
                    $title = get_the_title();
                    $description = get_the_excerpt();
                    $url = get_post_meta(get_the_ID(), 'slide_url', true);
                    $backgroundImg = get_the_post_thumbnail_url(get_the_ID());
                ?>
                <div class="carousel-item <?php echo $first_slide ? 'active' : ''; ?>">
                    <div class="image-layer">
                        <img src="<?php echo esc_url($backgroundImg); ?>" class="d-block w-100" alt="<?php echo esc_attr($title); ?>">
                    </div>
                    <div class="carousel-capt">
                        <h2><?php echo esc_html($title); ?></h2>
                        <p><?php echo esc_html($description); ?></p>
                        <a href="<?php echo esc_url($url); ?>" class="btn-one">
                            <span class="txt">Read More</span>
                        </a>
                    </div>
                </div>
                <?php $first_slide = false; ?>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
    
    <!-- Carousel Indicators -->
    <?php if ($slide_count > 1): ?>
    <div class="carousel-indicator">
        <?php $slide_index = 0; ?>
        <?php $slider_query->rewind_posts(); ?>
        <?php while ($slider_query->have_posts()): ?>
            <?php $slider_query->the_post(); ?>
            <button type="button" data-bs-target="#autoCarousel" data-bs-slide-to="<?php echo $slide_index; ?>" <?php echo $slide_index === 0 ? 'class="active"' : ''; ?> aria-label="Slide <?php echo $slide_index + 1; ?>"></button>
            <?php $slide_index++; ?>
        <?php endwhile; ?>
    </div>
    <?php endif; ?>
    
    <!-- Manual Controls (optional) -->
    <?php if ($slide_count > 1): ?>
    <button class="carousel-control-prev" type="button" data-bs-target="#autoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#autoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    <?php endif; ?>
    
    <?php wp_reset_postdata(); ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap carousel manually if needed
    if (typeof bootstrap !== 'undefined' && bootstrap.Carousel) {
        var carouselElement = document.getElementById('autoCarousel');
        if (carouselElement) {
            var carousel = new bootstrap.Carousel(carouselElement, {
                interval: 4000,
                ride: 'carousel',
                pause: 'hover',
                wrap: true
            });
        }
    }
});
</script>