<div class="entity-attribute entity-attribute-autocomplete-combo-box {{$attribute->getStyleClass()}}">
    {!! Form::label($attribute->getKey(), $attribute->getLabelText()) !!}

    @if($attribute->getReadOnly())
        <div class="content"><strong>{!! (empty($attribute->getValue)?'-':$attribute->getValue()) !!}</strong></div>
        {!! Form::hidden($attribute->getKey(), $attribute->getValue()) !!}
    @else
        <div class="ui-widget">
            <input id="{{$attribute->getKey()}}-fake" placeholder=" @lang('kms/global.search2') {{$attribute->getLabelText()}}">
            <span class="dropdown" id="{{$attribute->getKey()}}-open"></span>
            <input type="hidden" id="{{$attribute->getKey()}}" name="{{$attribute->getKey()}}" value="">
        </div>
        <div class="items" id="{{$attribute->getKey()}}_items">

        </div>

        <script>
            $( function() {
                let attributeKey = "{{$attribute->getKey()}}";

                /**Select all elements for easy access later on**/
                let input = document.getElementById(attributeKey);
                let openbutton = document.getElementById(attributeKey+"-open");
                let autoCompleteSelectField = document.getElementById(attributeKey+"-fake");
                let itemsWrapper = document.getElementById("{{$attribute->getKey()}}_items");


                /** The dataset for the autocomplete. Just an array of objects containing id and value properties**/
                let dataSet = [
                    @foreach($attribute->getItems() as $selectOptionModel)
                    {
                        "id": "{{ html_entity_decode($selectOptionModel->getValue()) }}",
                        "value": "{{ html_entity_decode($selectOptionModel->getHtmlContent()) }}",
                    }@if(!$loop->last),@endif
                    @endforeach()
                ];

                /**
                 * Makes the fake input field and autocomplete input field.
                 * Focus method is triggered when you hover over items in the menu
                 * select method is triggered when you click an item in the list.
                 */
                $( "#{{$attribute->getKey()}}-fake" ).autocomplete({
                    source: dataSet,
                    minLength: 0,

                    focus: function( event, ui ) {
                        return false;
                    },
                    select: function( event, ui ) {
                        $(autoCompleteSelectField).val("");
                        addItem(ui.item.id, ui.item.value);
                        updateRealInput();
                        return false;
                    },
                });

                /**
                 * Make sure we can open the autocomplete field dropdown with the open button
                 */
                openbutton.addEventListener('click', (event) => {
                    $(autoCompleteSelectField).autocomplete( "search", "" );
                });

                /**
                 * Adds a span tag containing the value given and the data-id property set to id given to
                 * the p tag with class items.
                 */
                function addItem(id, value)
                {
                    let itemTemplate = `<p class="item" data-id="${id}">${value}</p>`;

                    let parser = new DOMParser();
                    let document = parser.parseFromString(itemTemplate, 'text/html');
                    let itemElement = document.body.firstChild;

                    itemsWrapper.appendChild(itemElement);

                    itemElement.addEventListener('click',
                        (function(itemToRemove) {
                            return () => {
                                removeItem(itemToRemove);
                            }
                        })(id)
                    )
                }

                /**
                 * Iterates over the child elements of the p element with class items and removes the element that has
                 * data-id set to the specified id. Then calls updateRealInput to update the hidden input
                 */
                function removeItem(id)
                {
                    let items = itemsWrapper.children;
                    for(let item of items) {
                        if(item.dataset.id === id) {
                            itemsWrapper.removeChild(item);
                            break;
                        }
                    }
                    updateRealInput();
                }

                /**
                 * Iterates over the child elements of the p element with class items and concatenates their data-id
                 * values into a string. After that it sets the hidden input with the id string
                 */
                function updateRealInput()
                {
                    let ids = [];
                    let items = itemsWrapper.children;
                    for(let item of items) {
                        ids[ids.length] = item.dataset.id;
                    }
                    let idString = ids.join(',');

                    input.setAttribute('value', idString);
                }

                //INITIALIZE
                //Attribute value is something like this "1,2,3"
                let valuesFromAttribute = "{{$attribute->getValue() != '' ? $attribute->getValue() : $attribute->getDefaultValue()}}".split(',');
                {{--console.log('{{$attribute->gedDefaultValue()}}');--}}
                {{--console.log(valuesFromAttribute);--}}
                for(let idFromAttribute of valuesFromAttribute)
                {
                    for(let item of dataSet) {
                        if (item.id === idFromAttribute) {
                            addItem(item.id, item.value);
                            break;
                        }
                    }
                }
                updateRealInput();
            });
        </script>
    @endif
</div>