<div class="entity-attribute entity-attribute-images @if($errors->has($attribute->key)) error @endif {!!$attribute->class!!}" title="{!! $attribute->errors[0] or '' !!}">

    {!! Form::label($attribute->key, $attribute->label()) !!}

    <div id="image-list-{!! $attribute->key !!}" class="image-list">

        <input type="hidden" id="{!!$attribute->key!!}" name="{!!$attribute->key!!}" value="{!!$attribute->getValueAsJson()!!}" />

        <ul class="thumbs">
            <li class="new-image">
                <input type="file" id="image-upload-{!! $attribute->key !!}-0" name="image-upload-{!! $attribute->key !!}-0" accept="image/*" />
            </li>
            @if($attribute->getValue())
                @foreach($attribute->getValue() as $image)
                <li class="image-thumb-li" id="image-thumb-{!! $image->id !!}">
                    <img class="image-thumb image-thumb-existing" data-image-id="{!! $image->id !!}" src="{!!$image->thumb!!}" />
                </li>
                @endforeach
            @endif
        </ul>

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

        <script>
            $(function(){
                var currentImageListId = "#image-list-{!! $attribute->key !!}";
                var fileCounter = 0;
                var maxImages = '{!!$attribute->maxImages!!}';
                var images = {!!$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-{!! $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-{!! $attribute->key !!}-' + fileCounter + '" name="image-upload-{!! $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-{!! $attribute->key !!}-' + fileCounter + '-' + imageCounter + '">' +
                        '<img src="' + dataURL + '" />' +
                        '</li>');
                        var thumb = $('#image-thumb-{!! $attribute->key !!}-' + fileCounter + '-' + imageCounter);
                        // Remove image for uploading when clicked
                        thumb.click(function(){
                            removeFromImages('image-upload-{!! $attribute->key !!}-' + fileCounter);
                            thumb.remove();
                            $('#image-upload-{!! $attribute->key !!}-' + fileCounter).val('');
                            $('#image-upload-{!! $attribute->key !!}-' + fileCounter).remove();
                        });
                    };
                    reader.readAsDataURL(file);
                }

                function updateImages(){
                    $('#{!! $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>