@props(['cats'=>'','selected'=>''])
@php
$imageSelect = [['name' => 'almi', 'alt' => '', 'src' => '/images/image.jpg', 'id' => 'aa'],];
@endphp

<div x-data="data({{json_encode($cats)}},{{json_encode($selected)}})"
     class="w-8/12 bg-white border border-black border-opacity-12 rounded-xl py-2 px-4">
    <div class="grid grid-cols-3 gap-4">
        @foreach($cats as $cat)
            <x-wm-admin::inputs.select.custom-select label="{{$cat['name']}}" name="{{$cat['name']}}"
                                                     id="{{$cat['id']}}"
                                                     key-text="name" key-id="id"
                                                     url="{{$cat['url']}}">
            </x-wm-admin::inputs.select.custom-select>
        @endforeach
    </div>
    <button @click="addItem()" class="border mt-2 border-button text-button rounded-lg py-2 px-4 w-full">
        اضافه کردن
    </button>
    <div class="mt-4">
        <template x-for="(selected, index) in selecteds" :key="index">
            <div>
                <div @click="openExpand=index" class="py-2 px-4 bg-gray-100 rounded-lg mb-2">
                    <div class="flex items-center ">
                        <template x-for="(item, i) in selected.select" :key="i">
                            <div class="flex items-center ml-2">
                                <div x-text="items.find(s=>s.id===item.category_id).name + ' : '"></div>
                                <div x-text="item.name"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <div x-show="openExpand===index" class="bg-white mt-2 py-4 px-4 mb-2 rounded-lg border border-black border-opacity-12">
                    <div class="grid grid-cols-3 gap-4">
{{--                        <x-wm-admin::inputs.image-uploader :itemsSelected="$imageSelect" :isMulti="false">--}}
{{--                        </x-wm-admin::inputs.image-uploader>--}}
                        <x-wm-admin::inputs.switch-input title="وضعیت موجودی">
                            1
                        </x-wm-admin::inputs.switch-input>
                        <x-wm-admin::inputs.text-field label="قیمت ( تومان )"></x-wm-admin::inputs.text-field>
                        <x-wm-admin::inputs.text-field label="قیمت تخفیف ( تومان )"></x-wm-admin::inputs.text-field>
                        <x-wm-admin::inputs.text-field label="وزن"></x-wm-admin::inputs.text-field>
                        <x-wm-admin::inputs.text-field label="طول"></x-wm-admin::inputs.text-field>
                        <x-wm-admin::inputs.text-field label="عرض"></x-wm-admin::inputs.text-field>
                        <x-wm-admin::inputs.text-field label="ارتفاع"></x-wm-admin::inputs.text-field>

                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
@push('scripts')
    <script>
        var arrrrrs = []

        function data(items, selected) {
            return {
                items: items,
                selecteds: selected,
                openExpand:0,
                recursive(array, index) {
                    var value = [];
                    // console.log(index)
                    // console.log(array.length)
                    if (index === array.length) {
                        return arrrrrs;
                    } else {
                        // console.log(index)
                        // console.log(array[index].id)
                        var e = document.getElementById(array[index].id)
                        // this.recursive(array,++index)
                        // console.log(e.options[i].text)
                        for (var i = 0; i < e.options.length; i++) {
                        //     value.push(e.options[i].text)
                            this.recursive(array, ++index)
                        //
                        }
                        console.log(value)

                        arrrrrs.push(value)
                        console.log(arrrrrs)
                    }
                },
                addItem() {

                    const arr = this.items;
                    var selected = this.selecteds;
                    var select = []
                    // console.log(arr)
                    // console.log(this.selecteds)
                    this.recursive(arr, 0)
                    // for (var i = 0; i < arr.length; i++) {
                    //     var e = document.getElementById(arr[i].id)
                    //     for (var m = 0; m<e.options.length;m++){
                    //         console.log(e.options[m].text)
                    //         // select.push({category_id: arr[i].id, name: e.options[m].text})
                    //         // selected.push({select: select})
                    //     }
                    //
                    // }

                }
            }
        }
    </script>
@endpush