@props(['label'])
<div class="form-group">
    <label for="images" class="form-control-label">{{ $label }}</label>
    <input
        type="file"
        id="images"
        {{ $attributes->merge(['class' => 'form-control']) }}
        multiple
    />
    <div id="carouselExample" class="carousel slide mt-3" data-bs-ride="carousel" style="display: none;">
        <div class="carousel-inner" id="carousel-images"></div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

<script>
    document.getElementById('images').addEventListener('change', function (event) {
        const files = event.target.files;
        const carouselContainer = document.getElementById('carousel-images');
        const carouselElement = document.getElementById('carouselExample');

        // Clear previous images
        carouselContainer.innerHTML = '';

        if (files.length > 0) {
            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function (e) {
                    // Create carousel item
                    const carouselItem = document.createElement('div');
                    carouselItem.classList.add('carousel-item');
                    if (index === 0) {
                        carouselItem.classList.add('active');
                    }

                    // Create image element
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.classList.add('d-block', 'w-100');
                    img.alt = `Image ${index + 1}`;

                    // Append image to carousel item
                    carouselItem.appendChild(img);
                    carouselContainer.appendChild(carouselItem);
                };

                reader.readAsDataURL(file);
            });

            // Show the carousel
            carouselElement.style.display = 'block';
        } else {
            // Hide the carousel if no files are selected
            carouselElement.style.display = 'none';
        }
    });

</script>