<div class="row" id="{{ $prefix ?? '' }}uploader-mini-gallery"></div>

<div class="modal fade" id="{{ $prefix ?? '' }}mini-gallery-lightbox" tabindex="-1" role="dialog" aria-labelledby="mini-gallery-lightbox" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body">
				<img src="" class="img-fluid lightbox" >
			</div>
		</div>
	</div>
</div>

@push('js')
	<script>
		function {{ $prefix ?? '' }}handleDeleteImages() {
			$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-trash').click(function() {
				id = $('#id').val();
				index = $(this).data('index');
				$.ajax({
					type: 'post',
					url: "{{ $delete_url ?? '' }}",
					data: {
						id: id,
						index: index
					},
					success: function(data) {
						{{ $prefix ?? '' }}loadImages();
					}
				});
			})
		}
		
		function {{ $prefix ?? '' }}handleEnlargeImages() {
			$('#{{ $prefix ?? '' }}uploader-mini-gallery .fa-expand-alt').click(function() {
				$img = $(this).parents('figure').find('.img-thumbnail');
				url = $img.attr('src');
				$('#{{ $prefix ?? '' }}mini-gallery-lightbox .lightbox').attr('src', url);
				$('#{{ $prefix ?? '' }}mini-gallery-lightbox').modal('show');
			})
		}

	</script>
@endpush