<div id="carouselHomepage" class="carousel slide shadow-sm mb-4" data-bs-ride="carousel">
    <div class="carousel-inner rounded overflow-hidden">
        @foreach ($carousels as $index => $item)
            <div class="carousel-item @if($index === 0) active @endif">
                <img src="{{ asset('storage/' . $item->fail_path) }}" class="d-block w-100" style="height: 420px; object-fit: cover;" alt="{{ $item->tajuk }}">
                @if($item->tajuk || $item->keterangan)
                    <div class="carousel-caption bg-dark bg-opacity-50 rounded p-2">
                        <h5 class="text-light">{{ $item->tajuk }}</h5>
                        <p class="text-light small">{{ $item->keterangan }}</p>
                    </div>
                @endif
            </div>
        @endforeach
        @if(count($carousels) == 0) 
            <div class="carousel-item active">
                <img src="{{ asset('storage/caro/default1.jpg') }}" class="d-block w-100" style="height: 420px; object-fit: cover;" alt="Pemeriksaan Tapak">                
            </div>
            <div class="carousel-item">
                <img src="{{ asset('storage/caro/default2.jpg') }}" class="d-block w-100" style="height: 420px; object-fit: cover;" alt="Pemeriksaan Tapak">                
            </div>
        @endif
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselHomepage" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselHomepage" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>