<div class="entity-attribute entity-attribute-images @if($errors->has((string)$attribute->getKey())) error @endif {!!$attribute->getStyleClass()!!}">

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

    <div id="image-list-{!! (string)$attribute->getKey() !!}" class="image-list">

        {{--{{dd($attribute)}}--}}
        {{--<input type="hidden" id="{!!(string)$attribute->getKey() !!}" name="{!!(string)$attribute->getKey()!!}" />--}}
        <input type="hidden" id="{!!$attribute->getKey() !!}" name="{!!$attribute->getKey()!!}" value="{{ json_encode($images) }} " />

        <ul class="thumbs">
        <li class="new-image">
            <input type="file" id="{!! (string)$attribute->getKey() !!}-0" name="{!! (string)$attribute->getKey() !!}-0" accept="image/*" />
        </li>
        @if($images)
                @foreach($images 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_image_url!!}" />
                    <div class="deleteImage">⨯</div>
                </li>
                @endforeach
            @endif
        </ul>

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

        <script>
            $(function(){
                var currentImageListId = "#image-list-{!! (string)$attribute->getKey() !!}";
                var fileCounter = 0;
                var maxImages = '{!!$attribute->getMaxImages()!!}';
                var images = {!!json_encode($images)!!};

                checkNewButtonState();

                // 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(){
                    console.log("images.blade.php: Change event triggered");

                    if(maxImages != '' && countActiveImages() >= maxImages) return;
                    var $oldInput = $('#{!! (string)$attribute->getKey() !!}-'+fileCounter);
                    console.log("old input: ");
                    console.log($oldInput);
                    console.log("current image list element: "+currentImageListId + ' .uploads :');
                    console.log($(currentImageListId + ' .uploads'));

                    $(currentImageListId + ' .uploads').append($oldInput);
                    images.push({
                        id: null,
                        name: $oldInput.attr('id'),
                        delete: false
                    });
                    updateImages();
                    $oldInput.unbind('change');
                    console.log("unbinded change event from the old input element");

                    var files = $oldInput.prop('files');
                    console.log("files from property from the old input: ");
                    console.log(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="{!! (string)$attribute->getKey() !!}-' + fileCounter + '" name="{!! (string)$attribute->getKey() !!}-' + 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-{!! (string)$attribute->getKey() !!}-' + fileCounter + '-' + imageCounter + '">' +
                        '<img src="' + dataURL + '" />' +
                        '<div class="deleteImage">⨯</div>' +
                        '</li>');
                        var thumb = $('#image-thumb-{!! (string)$attribute->getKey() !!}-' + fileCounter + '-' + imageCounter);
                        // Remove image for uploading when clicked
                        thumb.click(function(){
                            removeFromImages('{!! (string)$attribute->getKey() !!}-' + fileCounter);
                            thumb.remove();
                            $('#{!! (string)$attribute->getKey() !!}-' + fileCounter).val('');
                            $('#{!! (string)$attribute->getKey() !!}-' + fileCounter).remove();
                        });
                    };
                    checkNewButtonState();
                    reader.readAsDataURL(file);
                }

                function checkNewButtonState()
                {
                    var button = $(currentImageListId + ' .new-image');
                    if(maxImages !== undefined && countActiveImages() >= maxImages){
                        //hide the button
                        button.hide();
                        // console.log("hide add new image button");
                    } else {
                        //show the button
                        button.show();
                        // console.log("show add new image button");
                    }
                }

                function updateImages(){
                    $('#{!! (string)$attribute->getKey() !!}').val(JSON.stringify(images, null, 2));
                    console.log("Updated images: id:"+'#{!! (string)$attribute->getKey() !!}'+" with json data:"+JSON.stringify(images, null, 2));
                    console.log($('#{!! (string)$attribute->getKey() !!}'));
                    checkNewButtonState();
                }
                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>