<div class="entity-attribute entity-attribute-images<?php echo e(count($attribute->errors) == 0 ? '' : ' error'); ?> <?php echo e($attribute->class); ?>" title="<?php echo e(isset($attribute->errors[0]) ? $attribute->errors[0] : ''); ?>">
    <?php echo Form::label($attribute->key, $attribute->label); ?>

    <div id="image-list-<?php echo e($attribute->key); ?>" class="image-list">

        <input type="hidden" id="<?php echo $attribute->key; ?>" name="<?php echo $attribute->key; ?>" value="<?php echo e($attribute->getValueAsJson()); ?>" />

        <ul class="thumbs">
            <li class="new-image">
                <input type="file" id="image-upload-<?php echo e($attribute->key); ?>-0" name="image-upload-<?php echo e($attribute->key); ?>-0" accept="image/*" />
            </li>
            <?php if($attribute->getValue()): ?>
                <?php foreach($attribute->getValue() as $image): ?>
                <li class="image-thumb-li" id="image-thumb-<?php echo e($image->id); ?>">
                    <img class="image-thumb image-thumb-existing" data-image-id="<?php echo e($image->id); ?>" src="<?php echo e($image->thumb); ?>" />
                </li>
                <?php endforeach; ?>
            <?php endif; ?>
        </ul>

        <div class="uploads"></div>

        <script>
            $(function(){
                var currentImageListId = "#image-list-<?php echo e($attribute->key); ?>";
                var fileCounter = 0;
                var maxImages = '<?php echo $attribute->maxImages; ?>';
                var images = <?php echo $attribute->getValueAsJson(); ?>;
 
                // Click on an existing image to remove it
                $(currentImageListId + ' .image-thumb-li').click(function(){
                    $(this).remove();
                    removeFromImages($('img',this).attr('data-image-id'));
                });

                // When a file is selected for uploading
                $(document).on('click', currentImageListId + ' .new-image input', function(e) {
                    console.log(countActiveImages());
                    if(maxImages != '' && countActiveImages() >= maxImages){
                        e.preventDefault();
                        return;
                    }
                });
                $(document).on('change', currentImageListId + ' .new-image input', function(){
                    if(maxImages != '' && countActiveImages() >= maxImages) return;
                    var $oldInput = $('#image-upload-<?php echo e($attribute->key); ?>-'+fileCounter);
                    $(currentImageListId + ' .uploads').append($oldInput);
                    images.push({
                        id: null,
                        name: $oldInput.attr('id'),
                        delete: false
                    });
                    updateImages();
                    $oldInput.unbind('change');

                    var files = $oldInput.prop('files');

                    // Removing multiple files doesn't work yet, so it is disabled
                    for(var i = 0; i < files.length ; i++){
                        insertImage(files[i], fileCounter, i);
                    }

                    fileCounter++;
                    $(currentImageListId + ' .new-image').append(
                        '<input type="file" id="image-upload-<?php echo e($attribute->key); ?>-' + fileCounter + '" name="image-upload-<?php echo e($attribute->key); ?>-' + fileCounter + '" accept="image/*" />'
                    );
                });

                function insertImage(file, fileCounter, imageCounter){
                    var reader = new FileReader();
                    reader.onload = function(e){
                        var dataURL = e.target.result;
                        $(currentImageListId + ' .thumbs').append('' +
                        '<li id="image-thumb-<?php echo e($attribute->key); ?>-' + fileCounter + '-' + imageCounter + '">' +
                        '<img src="' + dataURL + '" />' +
                        '</li>');
                        var thumb = $('#image-thumb-<?php echo e($attribute->key); ?>-' + fileCounter + '-' + imageCounter);
                        // Remove image for uploading when clicked
                        thumb.click(function(){
                            removeFromImages('image-upload-<?php echo e($attribute->key); ?>-' + fileCounter);
                            thumb.remove();
                            $('#image-upload-<?php echo e($attribute->key); ?>-' + fileCounter).val('');
                            $('#image-upload-<?php echo e($attribute->key); ?>-' + fileCounter).remove();
                        });
                    };
                    reader.readAsDataURL(file);
                }

                function updateImages(){
                    $('#<?php echo e($attribute->key); ?>').val(JSON.stringify(images, null, 2));
                }

                function countActiveImages(){
                    var count = 0;
                    for(var i=0; i<images.length; i++) {
                        if(!images[i].delete) count++;
                    }
                    return count;
                }

                function removeFromImages(idOrFileInputName){
                    for(var i=0; i<images.length; i++) {
                        if (images[i].name == idOrFileInputName) {
                            images.splice(i, 1);
                            updateImages();
                            return;
                        }
                        if (images[i].id == idOrFileInputName) {
                            images[i].delete = true;
                            updateImages();
                            return;
                        }
                    }
                }

            });

        </script>

    </div>

</div>