@props(['cats'=>'','selected'=>''])
@php

    if(isset($attributes['url']) && $attributes['url'] !=''){
        $init = 'initWithURL()';
        $route = $attributes['url'];
    }else{
        $init="";
        $route="";
    }

@endphp
<div x-init="{{$init}}" class="px-8" x-data="data({{json_encode($cats)}},{{json_encode($selected)}})">
    <div class="flex items-center mb-4">
        <x-wm-admin::inputs.checkbox class="ml-4" label="نمایش در برگه محصول">

        </x-wm-admin::inputs.checkbox>
        <x-wm-admin::inputs.checkbox label="استفاده برای متغیر ها">

        </x-wm-admin::inputs.checkbox>
    </div>
    <div class="flex items-center">
        <input x-on:change="type" @click.away="modal=false" x-on:focus="modal=true"
               class="py-2 px-4 outline-none rounded-lg w-full bg-gray-200 focus:bg-white transition duration-300 ease-in-out"
               id="addingItem"/>
        <button @click="addItem()" class="py-2 mr-2 px-4 border border-button text-button rounded-lg">
            افزودن
        </button>
    </div>
    <div class="mt-1 relative">
        <ul>
            <template x-for="(selected, index) in selecteds" :key="index">
                <li class="py-1 flex items-center px-4 bg-white border border-black border-opacity-12 rounded-lg mb-1">
                    <button class="ml-2" @click="deleteItem(index)">
                        <i class="mdi mdi-close-circle text-black text-opacity-50 mdi-24px mr-2"></i>
                    </button>
                    <div class="flex-grow">
                        <span x-text="selected.name"></span>
                    </div>
                    <div class="ml-4">

                    </div>
                    <div class="flex items-center">
                        <button x-bind:disabled="index===0" @click="prev(index)">
                            <i class="mdi mdi-chevron-up mdi-24px"></i>
                        </button>
                        <button x-bind:disabled="index===selecteds.length-1" @click="next(index)">
                        <i class="mdi mdi-chevron-down mdi-24px"></i>
                        </button>
                    </div>
                    <input name="{{$attributes['name']}}[]" type="hidden" x-bind:value="selected.name"/>
                </li>


                {{--                <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="selected.name"></span>--}}

                {{--                    </div>--}}
                {{--                    <input name="{{$attributes['name']}}[]" type="hidden" x-bind:value="selected.name"/>--}}
                {{--                </div>--}}
            </template>
        </ul>
        <div x-show="modal" class="absolute  top-0 right-0 w-full h-56  ">
            <div class=" rounded-xl bg-white max-h-full overflow-scroll">
                <ul class="py-2">
                    <template x-for="(item, index) in items" :key="index">
                        <li :class="{'text-button bg-black bg-opacity-12 cursor-not-allowed' : selecteds.findIndex(s=>s.id === item.id)>=0}"
                            @click="add(item)"
                            class="py-2 cursor-pointer px-4 transition duration-300 hover:bg-black hover:bg-opacity-12"
                            x-text="item.name"></li>
                    </template>
                </ul>
            </div>
        </div>
    </div>

</div>
@push('scripts')
    <script>
        function data(items, selected) {
            return {
                modal: false,
                items: items,
                selecteds: selected,
                addItem() {
                    var arr = this.selecteds;
                    var value = document.getElementById('addingItem').value
                    arr.push({name: value, id: 0})
                    this.selecteds = arr
                },
                prev(index) {
                    var l = this.selecteds[index]
                    this.selecteds[index] = this.selecteds[index - 1];
                    this.selecteds[index - 1] = l;
                },
                next(index) {
                    var l = this.selecteds[index]
                    this.selecteds[index] = this.selecteds[index + 1];
                    this.selecteds[index + 1] = l;
                },
                add(item) {
                    var arr = this.selecteds;
                    if (this.selecteds.findIndex(s => s.id === item.id) === -1) {
                        arr.push(item)
                        this.selecteds = arr;
                    }
                },
                type(e) {
                    console.log(e)
                    this.initWithURL(e.target.value)
                },
                deleteItem(index) {
                    var arr = this.selecteds;
                    this.selecteds = [...arr.slice(0, index), ...arr.slice(index + 1)]
                },
                initWithURL(s) {
                    if (s) {
                        fetch('{{$route}}' + '?s=' + s)
                            .then(res => res.json())
                            .then(data => {
                                this.items = data.data;
                            });
                    } else {
                        fetch('{{$route}}')
                            .then(res => res.json())
                            .then(data => {
                                this.items = data.data;
                            });
                    }
                }
            }
        }
    </script>
@endpush