<div class="entity-attribute entity-attribute-dynamic <?php echo e(count($attribute->errors) == 0 ? '' : ' error'); ?> <?php echo e($attribute->class); ?>"
     ng-controller="KmsAttributeDynamicController" ng-init="key = '<?php echo $attribute->key; ?>'">

    <?php /* Form::label($attribute->key, $attribute->label) */ ?>
    <?php echo Form::hidden('dynamic_page', $attribute->key); ?>

    <?php echo Form::hidden('key', $attribute->key, ['ng-model' => 'key']); ?>

    <?php echo Form::hidden($attribute->key, $attribute->getValue(), ['ng-value' => 'blocks | json', 'style'=>'width:100%;', 'class'=> 'hidden-json']); ?>

    <?php echo Form::hidden('block-settings', $attribute->blockSettings, ['style'=>'width:100%;', 'class'=> 'hidden-json', 'id'=> 'blockSettings']); ?>


    <script type="application/json" id="<?php echo $attribute->key; ?>_data"><?php echo $attribute->getValue(); ?></script>

    <div id="<?php echo $attribute->key; ?>_blocks">
        <div class="inner">
            <block ng-repeat="(block_key,block) in blocks"></block>
        </div>
    </div>

    <div class="add-new-block-row">
        <label><?php echo Config::get('kms::'.$lang.'/translations.addNewDynamicBlock'); ?></label>
        <select ng-model="blockTypeToAdd" ng-options="type.typeName for (key,type) in blockTypes">
            <option value=""><?php echo Config::get('kms::'.$lang.'/translations.chooseADynamicBlock'); ?></option>
        </select>
        <input type="button" value="+" ng-click="addBlock(blockTypeToAdd)"/>
    </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 object = $.parseJSON($('.hidden-json').val())

            var fileList = getFileList();
            $.each(object, function (key, value) {

                if (typeof fileList[key] === "undefined") fileList[key] = [];

                if (value.images) {
                    if (typeof fileList[key] === "undefined") fileList[key] = [];
                    fileList[key] = setImages(value, key)
                }
                if (value.tab) {
                    $.each(value.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));
                    });


                }

            });
            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) {
            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>