<div class="container py-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold text-primary">Our Recent Jobs</h2>
        <p class="lead">Take a look at some of our recent jobs.</p>
    </div>

    <div id="jobsCarousel" class="carousel slide shadow-lg rounded-3 overflow-hidden">
        <div class="carousel-inner bg-light" id="carousel-items" style="min-height: 400px;">
            <div class="carousel-item active">
                <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#jobsCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#jobsCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
            <span class="visually-hidden">Next</span>
        </button>

        <div class="carousel-indicators" id="carousel-indicators">
            <!-- Indicators will be injected here -->
        </div>
    </div>
</div>

<style>
    #jobsCarousel .carousel-item img {
        height: 500px;
        object-fit: contain;
        background-color: #f8f9fa;
    }

    @media (max-width: 768px) {
        #jobsCarousel .carousel-item img {
            height: 350px;
        }
        #jobsCarousel .carousel-inner,
        #jobsCarousel .carousel-item > div {
            min-height: 350px !important;
            height: 350px !important;
        }
    }

    #jobsCarousel .carousel-indicators [data-bs-target] {
        background-color: var(--bs-primary);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carouselInner = document.getElementById('carousel-items');
    const indicatorsContainer = document.getElementById('carousel-indicators');

    fetch('{{ route('Images.jobs') }}')
        .then(response => response.json())
        .then(images => {
            if (!images || images.length === 0) {
                carouselInner.innerHTML = `
                    <div class="carousel-item active">
                        <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
                            <p class="text-muted">No recent job images available.</p>
                        </div>
                    </div>`;
                return;
            }

            carouselInner.innerHTML = '';
            indicatorsContainer.innerHTML = '';

            images.forEach((image, index) => {
                // Create Item
                const item = document.createElement('div');
                item.className = `carousel-item ${index === 0 ? 'active' : ''}`;

                const img = document.createElement('img');
                img.src = `/images/Jobs/${image}`;
                img.className = 'd-block w-100';
                img.alt = `Job image ${index + 1}`;

                item.appendChild(img);
                carouselInner.appendChild(item);

                // Create Indicator
                const indicator = document.createElement('button');
                indicator.type = 'button';
                indicator.dataset.bsTarget = '#jobsCarousel';
                indicator.dataset.bsSlideTo = index;
                indicator.className = index === 0 ? 'active' : '';
                indicator.setAttribute('aria-label', `Slide ${index + 1}`);
                if (index === 0) indicator.setAttribute('aria-current', 'true');

                indicatorsContainer.appendChild(indicator);
            });

            if (images.length <= 1) {
                document.querySelectorAll('#jobsCarousel [data-bs-slide]').forEach(el => el.style.display = 'none');
                indicatorsContainer.style.display = 'none';
            }

            // Initialize carousel after items are added
            if (window.bootstrap && window.bootstrap.Carousel) {
                new window.bootstrap.Carousel(document.getElementById('jobsCarousel'), {
                    ride: 'carousel',
                    interval: 5000
                });
            }
        })
        .catch(error => {
            console.error('Error loading job images:', error);
            carouselInner.innerHTML = `
                <div class="carousel-item active">
                    <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
                        <p class="text-danger">Failed to load images. Please try again later.</p>
                    </div>
                </div>`;
        });
});
</script>
