<div class="entity-attribute entity-attribute-files{{{ count($attribute->errors) == 0 ? '' : ' error' }}} {{{$attribute->class}}} @if( !in_array(\Auth::user()->get()->user_role, $attribute->roles) ) hidden @endif photo "
     title="{{{ $attribute->errors[0] or '' }}}">

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


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

        <p>
            Bestandsgrootte: <strong>Maximaal 5mb</strong>
        </p>

        <span class="message" id="files-js-error"></span>
        <input type="hidden" id="{{$attribute->key}}" name="{{$attribute->key}}" value="{{{$attribute->getValueAsJson()}}}" />

        <ul class="thumbs">
            <li class="new-file">
                {{-- Todo: add accept --}}
                <input type="file" id="file-upload-{{{ $attribute->key }}}-0" name="file-upload-{{{ $attribute->key }}}-0" />
            </li>

            @if($attribute->getValue())

                {{-- Get current files--}}
                @foreach($attribute->getValue() as $file)
                    <li class="file-thumb-li" id="file-thumb-{{{ $file->id }}}">
                        {{--<img class="image-thumb image-thumb-existing" data-file-id="{{{ $file->id }}}" src="" />--}}
                        @if(isset($file->path)){{ $file->path }}@endif<span class="delete" data-file-id="{{{ $file->id }}}"></span>
                    </li>
                @endforeach

            @endif
        </ul>

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

        <script>

            $(function(){
                var currentListId = "#file-list-{{{ $attribute->key }}}";
                var fileCounter = 0;
                var maxFiles = '{{$attribute->maxFiles}}';
                var fileJson = {{$attribute->getValueAsJson()}};

                // Click on an existing image to remove it
                $(currentListId + ' .file-thumb-li').children('.delete').click(function(){
                    $(this).parent().remove();
                    removeFromFiles($(this).attr('data-file-id'));
                });

                // When a file is selected for uploading
                $(currentListId + ' .new-file input').bind('click', function(e) {
                    if(maxFiles != '' && countActiveFiles() >= maxFiles){
                        e.preventDefault();
                        return;
                    }
                });


                $(currentListId + ' .new-file input').bind('change', function(){

                    // Check if more files are allowed
                    if(maxFiles != '' && countActiveFiles() >= maxFiles) return;

                    // Get input and save it into old input value
                    var $oldInput = $('#file-upload-{{{ $attribute->key }}}-'+fileCounter);

                    // Get Files from input
                    var files = $oldInput.prop('files');

                    // Validate size
                    var valid = true;
                    if(files[0].size > (10 * 1000000))
                    {
                        $('#file-upload-{{{ $attribute->key }}}-'+fileCounter).remove();
                        $('#files-js-error').html('Het bestand mag niet groter zijn dan 10mb');
                        valid = false;
                    }

                    // Add input to the list we are going to upload
                    if(valid)
                    {
                        $(currentListId + ' .uploads').append($oldInput);

                        // Update JSON string
                        fileJson.push({id: null, tmpName: $oldInput.attr('id'), delete: false});
                        updateFiles();

                        // Unbind the change element
                        $oldInput.unbind('change');

                        // Add the new file to the visual file list
                        // Removing multiple files doesn't work yet, so it is disabled
                        for (var i = 0; i < files.length; i++) {
                            insertFile(files[i], fileCounter, i);
                        }

                        fileCounter++;
                    }

                    $(currentListId + ' .new-file').append(
                            '<input type="file" id="file-upload-{{{ $attribute->key }}}-' + fileCounter + '" name="file-upload-{{{ $attribute->key }}}-' + fileCounter + '" />'
                    );
                });

                function insertFile(file, fileInputCounter, fileCounter){
                    var reader = new FileReader();

                    reader.onload = function(e){
                        var dataURL = e.target.result;

                                console.log(file);

                        $(currentListId + ' .thumbs').append('' +
                                '<li id="file-thumb-{{{ $attribute->key }}}-' + fileInputCounter + '-' + fileCounter + '">' +
                                file.name + '<span class="delete"></span>' +
                                '</li>');

                        var thumb = $('#file-thumb-{{{ $attribute->key }}}-' + fileInputCounter + '-' + fileCounter);

                        // Remove file for uploading when clicked
                        thumb.click(function(){

                            removeFromFiles('file-upload-{{{ $attribute->key }}}-' + fileInputCounter);

                            thumb.remove();
                            $('#file-upload-{{{ $attribute->key }}}-' + fileInputCounter).val('');
                            $('#file-upload-{{{ $attribute->key }}}-' + fileInputCounter).remove();
                        });
                    };
                    reader.readAsDataURL(file);
                }

                function updateFiles(){
                    $('#{{{ $attribute->key }}}').val(JSON.stringify(fileJson, null, 2));
                }

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


                function removeFromFiles(idOrFileInputName)
                {
                    for(var i=0; i<fileJson.length; i++) {
                        if (fileJson[i].tmpName == idOrFileInputName)
                        {
                            fileJson.splice(i, 1);
                            updateFiles();
                            return;
                        }
                        if (fileJson[i].id == idOrFileInputName) {

                            fileJson[i].delete = true;
                            updateFiles();
                            return;
                        }
                    }
                }

            });

        </script>

    </div>

</div>