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

    <?php echo Form::label($attribute->key, $attribute->label); ?>



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

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

        <span class="message" id="files-js-error"></span>
        <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-file">
                <?php /* Todo: add accept */ ?>
                <input type="file" id="file-upload-<?php echo e($attribute->key); ?>-0" name="file-upload-<?php echo e($attribute->key); ?>-0" />
            </li>

            <?php if($attribute->getValue()): ?>

                <?php /* Get current files*/ ?>
                <?php foreach($attribute->getValue() as $file): ?>
                    <li class="file-thumb-li" id="file-thumb-<?php echo e($file->id); ?>">
                        <?php /*<img class="image-thumb image-thumb-existing" data-file-id="<?php echo e($file->id); ?>" src="" />*/ ?>
                        <?php if(isset($file->path)): ?><?php echo $file->path; ?><?php endif; ?><span class="delete" data-file-id="<?php echo e($file->id); ?>"></span>
                    </li>
                <?php endforeach; ?>

            <?php endif; ?>
        </ul>

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

        <script>

            $(function(){
                var currentListId = "#file-list-<?php echo e($attribute->key); ?>";
                var fileCounter = 0;
                var maxFiles = '<?php echo $attribute->maxFiles; ?>';
                var fileJson = <?php echo $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-<?php echo e($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-<?php echo e($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-<?php echo e($attribute->key); ?>-' + fileCounter + '" name="file-upload-<?php echo e($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-<?php echo e($attribute->key); ?>-' + fileInputCounter + '-' + fileCounter + '">' +
                                file.name + '<span class="delete"></span>' +
                                '</li>');

                        var thumb = $('#file-thumb-<?php echo e($attribute->key); ?>-' + fileInputCounter + '-' + fileCounter);

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

                            removeFromFiles('file-upload-<?php echo e($attribute->key); ?>-' + fileInputCounter);

                            thumb.remove();
                            $('#file-upload-<?php echo e($attribute->key); ?>-' + fileInputCounter).val('');
                            $('#file-upload-<?php echo e($attribute->key); ?>-' + fileInputCounter).remove();
                        });
                    };
                    reader.readAsDataURL(file);
                }

                function updateFiles(){
                    $('#<?php echo e($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>