@props([
    'indexColor',
    'imgPath' => '',
    'numberImage' => ''
])

@empty($imgPath)
    <div class="col-sm-2 m-3 preview-image">
        <img class="img-fluid rounded js-preview-image-{{ $numberImage }}" src="/admin-panel/img/default.webp" alt="Image preview">

        <label class="btn btn-success col fileinput-button dz-clickable" for="upload-photo-{{ $numberImage }}">
            <i class="fas fa-plus"></i>
            <span>Add files</span>
        </label>
        <input wire:model="image" type="file" name="parameters[{{ $indexColor }}][images][]" data-image-id="{{ $numberImage }}" class="hidden-input upload-photos upload-photo-{{ $numberImage }}" id="upload-photo-{{ $numberImage }}">
    </div>
@else
    <div class="col-sm-2 m-2">
        <a href="{{ $imgPath }}" data-toggle="lightbox" data-gallery="gallery-products">
            <img src="{{ $imgPath }}" alt="" class="img-fluid rounded">
        </a>
    </div>
@endempty

@script
<script>
    let uploadPhoto = document.querySelector(".upload-photo-{{ $numberImage }}");
    let uploadPhotos = document.querySelectorAll(".upload-photos");

    previewImages();

    uploadPhoto.addEventListener('change', function(event) {
        previewImages();
    });

    function previewImages() {
        uploadPhotos.forEach(image => {
            const file = image.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(eventImage) {
                    document.querySelector('.js-preview-image-' + image.dataset.imageId).setAttribute('src', eventImage.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
    }
</script>
@endscript