@props(['items'=>''])

<div x-data="data({{json_encode($items)}})">
    <div class="flex items-center">
        <x-wm-admin::inputs.text-field id="addingItem"></x-wm-admin::inputs.text-field>
        <button @click="addItem()" class="py-2 mr-2 px-4 border border-button text-button rounded-lg">
            افزودن
        </button>
    </div>
    <div class="mt-1">
        <div class="max-w-full flex flex-wrap">
            <template x-for="(item, index) in items" :key="index">
                <div class="mt-1 max-w-full">
                    <div
                        class="max-w-full  bg-gray-200 flex items-center rounded-full pr-4 pl-2 ml-2 py-px border border-black border-opacity-12">
                        <span class="max-w-full truncate" x-text="item.name"></span>
                        <button @click="deleteItem(index)">
                            <i class="mdi mdi-close-circle text-black text-opacity-75 mdi-18px mr-2"></i>
                        </button>
                    </div>
                    <input name="{{$attributes['name']}}[]" type="hidden" x-bind:value="item.name"/>
                </div>
            </template>
        </div>

    </div>

</div>
@push('scripts')
    <script>
        function data(items) {
            return {
                items: items,
                deleteItem(index) {
                    var arr = this.items;
                    this.items = [...arr.slice(0, index), ...arr.slice(index + 1)]
                },
                addItem() {

                    var arr = this.items;
                    var value = document.getElementById('addingItem').value
                    arr.push({name: value})
                    this.items = arr
                }
            }
        }
    </script>
@endpush