<div class="entity-attribute entity-attribute-dynamic "
         ng-controller="KmsAttributeDynamicController"  data-key="{{$attribute->getKey()}}" data-for-model="{{ $forModel }}" data-for-model-id="{{ $forModel->id }}">

        {!! Form::label($attribute->getKey(), $attribute->getLabelText()) !!}
        {!! Form::hidden('dynamic_page', $attribute->getKey()) !!}
        {!! Form::hidden('key', $attribute->getKey(), ['ng-model' => 'key']) !!}

        <script>console.log("Rendering dynamic attribute with value: ")</script>
        <script>console.log({!!$attribute->getValue()!!})</script>
        {!! Form::hidden($attribute->getKey(), $attribute->getValue(), ['ng-value' => 'blocks | json', 'style'=>'width:100%;', 'class'=> 'hidden-json']) !!}
        {!! Form::hidden('block-settings', $attribute->getBlockSettings(), ['style'=>'width:100%;', 'class'=> 'hidden-json', 'id'=> 'blockSettings']) !!}

        <script type="application/json" id="{{$attribute->getKey()}}_data">{!!$attribute->getValue()!!}</script>

        <script>console.log("data tag should be loaded: "+document.querySelector("#{{$attribute->getKey()}}").innerHTML)</script>

        <div id="{{$attribute->getKey()}}_blocks">
            <div class="inner">
                <block @if(isset($attribute->dynamicLock) && $attribute->dynamicLock) class="locked" @endif ng-repeat="(block_key,block) in blocks" data-data-element="#{{$attribute->getKey()}}"></block>
            </div>
        </div>

        <div class="add-new-block-row">
            <label>{{$attribute->getLabelText()}}</label>

            <div ng-repeat="(key, value) in blockTypes" class="contentBlockAddButton" ng-click="addBlock(value)">
                <img id="@{{ key }}" class="contentBlockAddButton" ng-src="/img/kms/dynamic/@{{value.typeSlug}}.svg" alt="">
                <label for="@{{ key }}">@{{value.typeName}}</label>
            </div>
        </div>

        <div id="preview"></div>

        <script>
            var maxImages = 5;
            var fileCounter = [];
            var fileList = [];

            //is add images
            function handleFiles(files, id) {

                maxImages = getMaxImages(id)
                //create tabs
                tabs = false;

                //the dynamic field id
                dynamic_id = extractDynamicId(id)
                //the preview id
                preview_id = 'preview-' + dynamic_id

                if (dynamic_ids = dynamic_id.match(/([0-9]+)#([0-9]+)/)) tabs = true;

                //Check if the fileList for the current dynamic exist if not create as empty array
                if (!fileList[dynamic_id]) fileList[dynamic_id] = [];

                //Check if it is in an tab, and the current filelist exist, if not create as empty array;
                if (tabs && typeof fileList[dynamic_ids[1]] === 'undefined') fileList[dynamic_ids[1]] = [];
                if (tabs && typeof fileList[dynamic_ids[1]][dynamic_ids[2]] === 'undefined') fileList[dynamic_ids[1]][dynamic_ids[2]] = [];
                //
                var imageCount = 0
                //

                //Count the current iamges
                var imageCount = fileList[dynamic_id].length
                //If there are tabs, count the current images in the current tab
                if (tabs) imageCount = fileList[dynamic_ids[1]][dynamic_ids[2]].length

                //loop trough the added files
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var imageType = /^image\//;

                    //add index to currentFiles
                    imageCount++;
                    //If imageCount is bigger then maxImages, stop
                    if (imageCount > maxImages) {
                        disableAddButton(id);
                        return false;
                    }

                    //if it is not an image continue
                    if (!imageType.test(file.type)) continue;

                    //create image elment
                    var img = document.createElement("img");
                    //add the class
                    img.classList.add("obj");
                    //add the file
                    img.file = file;

                    //create li element
                    var li = document.createElement('li');
                    //add the classs
                    li.classList.add("image-thumb-li");

                    var imageSpan = document.createElement('span')
                    imageSpan.classList.add('image-thumb-span')
                    imageSpan.classList.add('tab')
                    imageSpan.appendChild(img)

                    //add the image to the li
                    li.appendChild(imageSpan)

                    //append the li with the image to the preview_id
                    document.getElementById(preview_id).appendChild(li);

                    //create the file
                    var reader = new FileReader();
                    reader.onload = (function (aImg) {
                        return function (e) {
                            aImg.src = e.target.result;
                            //Check if tabs are acvtive
                            if (tabs) {
                                //yes push in the tab
                                fileList[dynamic_ids[1]][dynamic_ids[2]].push(aImg);
                            } else {
                                //no do default
                                fileList[dynamic_id].push(aImg);
                            }
                        };
                    })(img);
                    var dataUrl = reader.readAsDataURL(file);

                    if (imageCount >= maxImages) {
                        disableAddButton(id);
                    }
                }
            }

            $(function ($) {
                $(document).on('click', 'li.image-thumb-li', function (event) {

                    if (event.target.nodeName == 'IMG') {
                        return;
                    }

                    //todo : fix this
                    $this = $(this);

                    //get the index of the image
                    var index = ($this.index()) - 1;
                    //load the dynamic id
                    var dynamic_id = extractDynamicId($this.parents('.image-list').find('.image-field').attr('id'));

                    //load the fileList
                    var fileList = getFileList()

                    //Check if there is an # beteween to numbers (tabs)
                    if (id_parts = dynamic_id.match(/([0-9]+)#([0-9]+)/)) {

                        //Image in tabs
                        var element = fileList[id_parts[1]][id_parts[2]][(index)].toString();

                        //Check if it is an existing image
                        if (matches = element.match(/^existing([0-9]+)#([0-9]+)-([0-9]+)/)) {
                            //It is so remove from the file list in vaule

                            //load the object
                            var object = $.parseJSON($('.hidden-json').val())

                            //remove element from current image list
                            delete object[matches[1]].tab[matches[2]].images[matches[3]]

                            //return edited object
                            $('.hidden-json').val(JSON.stringify(object))

                        }
                        //Remove file from the file list
                        fileList[id_parts[1]][id_parts[2]].splice(index, 1);

                    } else {
                        //Image not in tabs
                        var element = fileList[dynamic_id][(index)].toString();
                        //Check if it is an existing image (not in tab)
                        if (matches = element.match(/^existing([0-9]+)-([0-9]+)/)) {
                            //It is so remove from the file list in vaule

                            //load the object
                            var object = $.parseJSON($('.hidden-json').val())
                            //remove element from current image list
                            delete object[matches[1]].images[matches[2]]

                            //return edited object
                            $('.hidden-json').val(JSON.stringify(object))
                        }

                        //remove element from list
                        fileList[dynamic_id].splice(index, 1);
                    }

                    //Enable the input field
                    //Fist get the input field id
                    var inputId = $(this).parents('.image-list').find('input.image-field').attr('id');
                    //there is an delete so always place for an add
                    enableAddButton(inputId)


                    //set fileList
                    setFileList(fileList);

                    //trigger the remove of the file
                    $this.find('img').trigger('click');

                    $this.find('img').parents('.image-thumb-li').remove()
                });

                loadImages($);
            });

            function loadImages($) {
                var hiddenjson = $('.hidden-json');
                if(hiddenjson.length > 0) {
                    var object = hiddenjson.val();
                    //                console.log(object);

                    var fileList = getFileList();

                    for (var key in object) {
                        if(!object.hasOwnProperty(key)) continue;

                        if (fileList.hasOwnProperty(key)) fileList[key] = [];

                        if (object[key].images) {
                            if (typeof fileList[key] === "undefined") fileList[key] = [];
                            fileList[key] = setImages(object[key], key)
                        }
                        if (object[key].tab) {
                            $.each(object[key].tab, function (tab_key, tab) {
                                if (typeof fileList[key] === "undefined") fileList[key] = [];
                                if (typeof fileList[key][tab_key] === "undefined") fileList[key][tab_key] = [];
                                fileList[key][tab_key] = setImages(tab, (key + '#' + tab_key));
                            });
                        }
                    }
                } else {
                    console.log('Not loading images because there isn\'t an element with class hidden-json');
                }
                setFileList(fileList);
            }

            function disableAddButton(id) {
                $(document.getElementById(id)).attr('disabled', 'disabled')

            }

            function enableAddButton(id) {
                $(document.getElementById(id)).attr('disabled', false)
            }

            function getMaxImages(id) {

                //fast solutuion for my fuck up to use # in ids's
                var max = $(document.getElementById(id)).parents('.max-images').attr('data-max-images');
                if (typeof max == 'undefined') {
                    return 5
                }
                return max
            }

            function setImages(value, key) {
                console.log("Set images value: ");
                console.log(value);
                console.log("Set images key: ");
                console.log(key);

                var fileList = [];
                $.each(value.images, function (img_key, image) {
                    //create image elment
                    var img = document.createElement("img");
                    //add the class
                    img.classList.add("obj");
                    //add the file

                    img.src = image.thumb;
                    //create li element
                    var li = document.createElement('li');
                    //add the classs
                    li.classList.add("image-thumb-li");
                    //add the image to the li
                    li.appendChild(img)

                    //                preview_id = 'preview-' + key

                    //Add the file to the filelist array
                    //Check if the fileList for the current dynamic exist if not create as empty array

                    //Add the current image to the fileList
                    fileList[img_key] = 'existing' + key + '-' + img_key

                });
                return fileList
            }


            function getFileList() {
                return fileList;
            }
            function setFileList(fileList_l) {
                fileList = fileList_l;
            }
            function extractDynamicId(id) {
                var dynamic_id_parts = id.replace('image-upload-images-', '').split('-');
                return dynamic_id_parts[0];
            }

            function extractImageNumber(id) {
                var dynamic_id_parts = id.replace('image-upload-images-', '').split('-');
                return dynamic_id_parts[1];
            }

        </script>

    </div>