@props(['vars' => json_encode($variations ?? []), 'statuses' => json_encode($statusList) ])

<hr>
<h1 class="text-lg font-bold mt-2">
    متغیر ها
</h1>
<div class="w-full" x-data="variationData({{$vars}}, {{$statuses}})">
    <div class="flex align-items-center align-middle my-2">
        <button class="font-bold" @click="addVar()" @if(!$pid) disabled @endif>
            <span @if($pid) style="cursor:  pointer" @endif @if(!$pid) disabled @endif  class="text-center transition duration-300 flex items-center justify-center
                 ease-in-out  w-full p-2  bg-white @if($pid) hover:bg-green-400 hover:bg-opacity-12 @endif
                  border border-green-400 text-green-400 rounded-lg">
                <i class="mdi mdi-plus-circle-outline mdi-18px me-2"></i>
                            افزودن محصول مشتق
            </span>
        </button>

        <button class="font-bold mr-2" @click="generateAllModal = true" @if(!$pid) disabled @endif>
            <span @if($pid) style="cursor:  pointer" @endif @if(!$pid) disabled @endif  class="text-center transition duration-300 flex items-center justify-center
                 ease-in-out  w-full p-2  bg-white @if($pid) hover:bg-green-400 hover:bg-opacity-12 @endif
                 border border-green-400 text-green-400 rounded-lg">
                <i class="mdi mdi-plus-circle-outline mdi-18px me-2"></i>
                تولید تمام حالت ها
            </span>
            <input x-ref="generateVars" type="hidden" value="0" name="generateVars">
        </button>
    </div>

    <template x-for="(variation, index) in variations" :key="index">
        <div class="border  border-black border-opacity-12 rounded-xl py-2 px-4 mb-2 bg-white">

            <div class=" flex items-center">
                <div @click="deleteVar(index,variation.id)"
                     title="حذف"
                     class="w-10 h-10 text-black flex cursor-pointer items-center justify-center">
                    <i class="mdi mdi-delete-outline mdi-24px text-red-500"></i>
                </div>
                <div class="flex-grow flex justify-start gap-2">

                    <span x-text="variation.object_data.title" class="col-span-3"></span>

                    <a x-bind:href="generateEditUrl(variation.id)" target="_blank"
                       class="border border-green-400 rounded-lg  px-2 text-green-400 text-sm" title="برای ویرایش با جزئیات کلیک کنید">ویرایش</a>
                </div>
                <span x-text="computeTitle(variation.status)"></span>
                <div @click="openVarItems(index)"
                     class="w-10 h-10 text-black flex cursor-pointer items-center justify-center">
                    <i :class="{'mdi-chevron-up' :open===index , 'mdi-chevron-down' :open!==index}"
                       class="mdi  mdi-24px"></i>
                </div>
            </div>

            <div x-show="
                    open===index;
                     $nextTick(function () {
                            open === index ? attributeSelector(variation.id) : ''
                     });
                 "
                 class="my-4 py-4 px-2 bg-gray-100 rounded border
                 border-black border-opacity-12 grid grid-cols-12 gap-3">

                <div class="col-span-12">
                    <div class="w-full row-end-auto">
                        <label class=" mb-1 ml-1">وضعیت: </label>
                        <select
                            x-model="variation.status"
                            x-bind:name="'variations['+variation.id+'][status]'"
                            class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                                       bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none"
                        >

                            <template x-for="(status) in statuses" :key="status.value">
                                <option :value="status.value" x-text="status.name"></option>
                            </template>
                        </select>
                    </div>
                </div>
                <div class="col-span-12">
                    <div class="w-full">
                        <label class="block mb-1">عنوان</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                     bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none "
                               x-model="variation.object_data.title"
                               x-bind:name="'variations['+variation.id+'][objectData][title]'"
                               type="text" placeholder="عنوان">
                    </div>
                </div>
                <div class="col-span-12">
                    <div class="w-full">
                        <label class="block mvar variation;
                    b-1">عنوان ثانویه</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                     bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none"
                               x-bind:name="'variations['+variation.id+'][objectData][secondary_title]'"
                               x-model="variation.object_data.secondary_title" type="text"
                               placeholder="عنوان ثانویه">
                    </div>
                </div>
                <div class="col-span-12">
                    <div class="w-full">
                        <label class="block mb-1">اسلاگ</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                     bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none "
                               x-bind:name="'variations['+variation.id+'][objectData][slug]'"
                               x-model="variation.object_data.slug" type="text" placeholder="اسلاگ">
                    </div>
                </div>

                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">قیمت</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                     bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none "
                               x-bind:name="'variations['+variation.id+'][objectData][price]'"
                               x-model="variation.object_data.price"
                               type="number" placeholder="قیمت">
                    </div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">SKU</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                                       bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none "
                               x-bind:name="'variations['+variation.id+'][sku]'"
                               x-model="variation.sku"
                               type="text" placeholder="SKU">
                    </div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">موجودی کل</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full focus:bg-white
                         bg-gray-200 transition duration-300 border border-gray-100 py-2 px-4 rounded-lg outline-none"
                               x-bind:name="'variations['+variation.id+'][quantity]'"
                               x-model="variation.quantity"
                               type="number" placeholder="موجودی کل">
                    </div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">کد انبار</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full
                               focus:bg-white bg-gray-200 transition duration-300 border border-gray-100 py-2
                               px-4 rounded-lg outline-none"
                               x-bind:name="'variations['+variation.id+'][stock_code]'"
                               x-model="variation.stock_code"
                               type="text" placeholder="کد انبار">
                    </div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">تعداد در</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full
                               focus:bg-white bg-gray-200 transition duration-300 border border-gray-100 py-2
                               px-4 rounded-lg outline-none"
                               x-bind:name="'variations['+variation.id+'][stock_qua]'"
                               x-model="variation.stock_qua"
                               type="number" placeholder="تعداد در">
                    </div>
                </div>
                <div class="col-span-12 sm:col-span-6">
                    <div class="w-full">
                        <label class="block mb-1">حد اکثر افزودن به سبد</label>
                        <input class="focus:shadow-md border focus:border-opacity-25 focus:border-black w-full
                               focus:bg-white bg-gray-200 transition duration-300 border border-gray-100 py-2
                               px-4 rounded-lg outline-none"
                               x-bind:name="'variations['+variation.id+'][maximum_add_to_cart]'"
                               x-model="variation.maximum_add_to_cart"
                               type="number" placeholder="حد اکثر افزودن به سبد">
                    </div>
                </div>
                <div class="col-span-12">
                    <label class=" font-bold text-base">افزودن امکانات</label>
                    <div class="mt-2">
                        <div>
                            <div class="flex items-center mb-4">
                                <div class="w-10/12 ml-3">
                                    <select
                                        x-bind:x-ref="'selectAttrX-'+variation.id"
                                        x-bind:name="'attribute-variation-'+variation.id"></select>
                                </div>
                                <button @click="addVarAttribute(variation.id)" type="button"
                                        class="border border-red-600 rounded-lg px-6 py-2 text-red-600">
                                    افزودن
                                </button>
                            </div>
                            <template x-if="variation.attributes !== undefined">
                                <template x-for="(vItem, aIndex) in variation.attributes" :key="aIndex">
                                    <div
                                        class="border  border-black border-opacity-12 rounded-xl py-2 px-4 mb-2 bg-white">
                                        <div class="flex items-center">
                                            <div @click="deleteVarAttribute(aIndex, variation.id)"
                                                 class="w-10 h-10 text-black flex cursor-pointer items-center justify-center">
                                                <i class="mdi mdi-delete-outline mdi-24px text-red-500"></i>
                                            </div>
                                            <div class="flex-grow">
                                                <div x-text="vItem.attribute.object_data.title"
                                                     class="col-span-3"></div>
                                                <input type="hidden"
                                                       x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][id]'"
                                                       :value="vItem.attribute_id">
                                            </div>

                                            <div @click="openVarAttrItems(aIndex, vItem.attribute_id, variation.id)"
                                                 class="w-10 h-10 text-black flex cursor-pointer items-center justify-center">
                                                <i :class="{'mdi-chevron-up' :attrOpen === aIndex , 'mdi-chevron-down' :attrOpen !== aIndex}"
                                                   class="mdi  mdi-24px"></i>
                                            </div>
                                        </div>

                                        <div x-show="attrOpen===aIndex"
                                             class="my-4 py-4 px-2 bg-gray-100 rounded border  border-black border-opacity-12">

                                            <div class="flex items-center mb-4">
                                                <div class="grid flex items-center grid-cols-12 gap-4">
                                                    <div class="col-span-5 flex items-center">
                                                        <div class="w-6/12">
                                                            مرتب سازی :
                                                        </div>
                                                        <div class="w-6/12">
                                                            <input
                                                                x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][sort]'"
                                                                type="number"
                                                                :value="vItem.sort"
                                                                class="py-2 px-4 bg-gray-200 rounded-lg w-full border border-black border-opacity-12 focus:bg-white transition duration-300 ease-in-out"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-span-3">
                                                        <div class="flex items-center">
                                                            <label class="ml-1">نمایش در لیست </label>
                                                            <input type="checkbox"
                                                                   x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][is_in_specification]'"
                                                                   x-bind:checked="vItem.is_in_specification===1?true:false"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-span-3">
                                                        <div class="flex items-center">
                                                            <label class="ml-1">متغیر </label>
                                                            <input type="checkbox"
                                                                   x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][is_variable]'"
                                                                   x-bind:checked="vItem.is_variable === 1 ? true : false"/>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <hr>

                                            <div class="flex items-center m-4">
                                                <div class="block ml-2">
                                                    افزودن مقدار:
                                                </div>
                                                <div class="w-4/12 ml-3">
                                                    <select
                                                        x-bind:x-ref="'selectAttributeItem-'+variation.id+'-'+vItem.attribute_id"

                                                    ></select>
                                                </div>
                                                <button @click="addVarAttributeItem(variation.id,vItem.attribute_id)"
                                                        type="button"
                                                        class="border border-red-600 rounded-lg px-6 py-2 text-red-600">
                                                    افزودن
                                                </button>
                                            </div>

                                            <hr>
                                            <h5>
                                                مقادیر:
                                            </h5>

                                            <template x-for="(ai2, i2) in vItem.items" :key="i2">
                                                <div
                                                    class="grid flex items-center grid-cols-12 gap-4 mb-2 border   border-black border-opacity-12 rounded-xl bg-white">

                                                    <div class="text-right">
                                                        <div
                                                            @click="deleteVarAttributeItem(i2,vItem.attribute_id,variation.id)"
                                                            class="w-10 h-10 text-black flex cursor-pointer items-center justify-center">
                                                            <i class="mdi mdi-delete-outline mdi-24px text-red-500"></i>
                                                        </div>
                                                    </div>
                                                    <div x-text="ai2.attribute_item.object_data.title"
                                                         class="col-span-8"></div>
                                                    <input type="hidden"
                                                           x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][items]['+ai2.attribute_item_id+'][id]'"
                                                           :value="ai2.attribute_item_id">
                                                    <div class="col-span-12 flex items-center">
                                                        <label class="w-3/12">
                                                            مرتب سازی :
                                                        </label>
                                                        <div class="w-2/12">
                                                            <input
                                                                x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][items]['+ai2.attribute_item_id+'][sort]'"
                                                                type="number"
                                                                :value="ai2.sort"
                                                                class="py-2 px-4 bg-gray-200 rounded-lg w-full border border-black border-opacity-12 focus:bg-white transition duration-300 ease-in-out"/>
                                                        </div>
                                                        <div class="flex items-center">
                                                            <label class="ml-1">نمایش در لیست </label>
                                                            <input type="checkbox"
                                                                   x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][items]['+ai2.attribute_item_id+'][is_in_specification]'"
                                                                   x-bind:checked="ai2.is_in_specification === 1 ? true : false"/>
                                                        </div>

                                                        <div class="flex items-center">
                                                            <label class="ml-1">متغییر</label>
                                                            <input type="checkbox"
                                                                   x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][items]['+ai2.attribute_item_id+'][is_optional]'"
                                                                   x-bind:checked="ai2.is_optional === 1 ? true : false "/>
                                                        </div>
                                                    </div>

                                                    <div class="col-span-6 flex items-center">
                                                        <label class="ml-1">قیمت افزوده</label>
                                                        <input type="number"
                                                               class="py-2 px-4 bg-gray-200 rounded-lg w-full border border-black border-opacity-12 focus:bg-white transition duration-300 ease-in-out"
                                                               x-bind:name="'variations['+variation.id+'][attributes]['+vItem.attribute_id+'][items]['+ai2.attribute_item_id+'][add_price]'"
                                                               :value="ai2.add_price"/>
                                                    </div>

                                                </div>
                                            </template>


                                        </div>
                                    </div>
                                </template>
                            </template>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </template>

    {{-- Remove modal --}}
    <template x-if="removeModal">
        <div x-show="isRemoveModalOpen()"
             class="modal fixed z-40 w-4/12 top-0 left-0  mt-64 transition-all duration-200 ease-in-out">
            <div class="w-full bg-white p-4 rounded-lg shadow-lg">
                <div class="flex mb-1 items-center text-gray-900">
                    <div @click="RemoveModalClose"
                         class="hover:bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center">
                        <i class="mdi mdi-close mdi-24px"></i>
                    </div>
                </div>
                <div class="pb-4 pt-3">
                    <p class="text-lg">
                        {{__("Are you sure to delete these data?")}}
                    </p>
                </div>
                <div class="flex items-center justify-end">
                    <button @click="RemoveModalClose" class="px-5 py-2 bg-white border-gray-900 border rounded-md me-4">
                        {{__("Cancel")}}
                    </button>
                    {{--                    <form x-bind:action="'/admin/obj/'+obj+'/'+removeId" method="post">--}}
                    {{--                        @csrf--}}
                    {{--                        @method('delete')--}}
                    <button
                        @click="sendDeleteRequest"
                        class="px-5 py-2 bg-red-600 border-red-600 text-white border rounded-md hover:bg-red-500 hover:border-red-500">
                        {{__("Delete")}}
                    </button>
                    {{--                    </form>--}}
                </div>
            </div>
        </div>
    </template>

    {{-- Generate All Variations modal --}}
    <template x-if="generateAllModal">
        <div x-show="generateAllModal"
             class="modal fixed z-40 w-4/12 top-0 left-0  mt-64 transition-all duration-200 ease-in-out">
            <div class="w-full bg-white p-4 rounded-lg shadow-lg">
                <div class="flex mb-1 items-center text-gray-900">
                    <div @click="generateAllModal = false"
                         class="hover:bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center">
                        <i class="mdi mdi-close mdi-24px"></i>
                    </div>
                </div>
                <div class="pb-4 pt-3">
                    <p class="text-lg">
                        آیا از تولید تمام محصولات مشتق اطمینان دارید؟
                    </p>
                </div>
                <div class="flex items-center justify-end">
                    <button @click="generateAllModal = false"
                            class="px-5 py-2 bg-white border-gray-900 border rounded-md me-4">
                        {{__("Cancel")}}
                    </button>
                    <button
                        @click="generateVarsArg"
                        class="px-5 py-2 bg-green-600 border-green-600 text-white border rounded-md hover:bg-green-500 hover:border-green-500">
                        تولید
                    </button>

                </div>
            </div>
        </div>
    </template>

    {{-- loader --}}
    <div x-ref="mloading"
         class="fixed inline-flex w-full  bg-gray-500 bg-opacity-50 rounded-lg items-center top-0 right-0"
         style="backdrop-filter: blur(8px);z-index: 900; height: 100%; display: none;">
        <img class="m-auto max-w-xs"
             src="{{asset('loading.gif')}}" id="loadimg" loading="lazy">

    </div>
</div>


@push('scripts')

    <script>
        function variationData(variations, statuses) {
            return {
                obj: '{{request()->route('obj')}}',
                variations: variations,
                statuses: statuses,
                counter: 10000000,
                open: -1,
                attrOpen: -1,
                removeModal: false,
                removeId: '',
                removeIndex: -1,
                generateAllModal: false,

                generateEditUrl(productId) {
                    return `/admin/obj/shop-product/${productId}/edit`;
                },
                isRemoveModalOpen() {
                    return this.removeModal === true
                },
                RemoveModalClose() {
                    this.removeModal = false
                    this.removeId = '';
                    this.removeIndex = -1;
                },
                removeModalOpen(vIndex, vId) {
                    this.removeId = vId;
                    this.removeIndex = vIndex;
                    this.removeModal = true;
                },
                sendDeleteRequest() {
                    if (this.removeIndex !== -1 && this.removeId !== '') {
                        this.$refs.mloading.style.display = 'block';
                        const res = axios.delete('/admin/obj/' + this.obj + '/' + this.removeId)
                            .then(response => {
                                this.variations = this.removeAttributeOrItemWithSlice(this.removeIndex, this.variations);
                                this.RemoveModalClose();
                                this.$refs.mloading.style.display = 'none';
                            }).catch(reason => {
                                this.$refs.mloading.style.display = 'none';
                                console.log(reason);
                            });
                    }
                },

                computeTitle(status) {
                    for (const st of this.statuses)
                        if (st.value === status)
                            return st.name;
                },
                select2Caller(selector, route) {
                    $(this.$refs[selector]).select2({
                        placeholder: '-',
                        allowClear: true,
                        multiple: false,
                        ajax: {
                            url: route,
                            dataType: 'json',
                            data: function (params) {
                                var query = {
                                    s: params.term,
                                    page: params.page || 1
                                };
                                return query;
                            },
                            processResults: function (data) {
                                return {
                                    results: $.map(data.data, function (item, index) {
                                        return {
                                            text: item['text'],
                                            id: item['id'],
                                        }
                                    }),
                                    pagination: {
                                        more: data.next_page_url != null
                                    }
                                };
                            }
                        }
                    });
                },

                openVarItems(index) {
                    if (this.open === index) this.open = -1;
                    else this.open = index;
                },
                openVarAttrItems(index, attributeId, varId) {
                    if (this.attrOpen === index) {
                        this.attrOpen = -1;
                    } else {
                        this.attrOpen = index;
                        this.attributeItemSelector(attributeId, varId);
                    }
                },

                attributeSelector(variantId) {
                    this.select2Caller('selectAttrX-' + variantId, '{{route('api.obj.list',['shop-attribute'])}}');
                },
                attributeItemSelector(attributeId, varId) {
                    this.select2Caller('selectAttributeItem-' + varId + '-' + attributeId, '/admin/obj/shop-attributeitem/list?attribute_id=' + attributeId);
                },


                addVar() {
                    const pid = parseInt('{{$pid ?? null}}');
                    if (pid) {
                        this.$refs.mloading.style.display = 'block';
                        const res = axios.post('/admin/obj/shop-product/store', {
                            parent_id: pid,
                            maximum_add_to_cart: 3,
                            is_featured_sale: 0,
                            is_featured: 0,
                            status: 'out_of_stock',
                            rate: null,
                            stock_code: null,
                            stock_qua: 1,
                            stores: {
                                1: '0'
                            },
                            objectData: {
                                title: '{{$currentProduct->objectData->title}}',
                                price: 0,
                                sale_price: null,
                                old_content: null,
                                old_short_content: null,
                                language_code: 'fa',
                            },
                        }).then(response => {
                            const {data} = response;
                            data['attributes'] = [];
                            this.variations.push(data);
                            this.openVarItems(this.variations.length - 1);
                            this.$refs.mloading.style.display = 'none';
                        }).catch(reason => {
                            console.log(reason.error);
                            this.$refs.mloading.style.display = 'none';
                        });
                    }
                },
                addVarAttribute(varId) {
                    const selectAttrX = this.$refs['selectAttrX-' + varId];
                    const variant = this.variations.find(v => v.id == varId);
                    if (variant.attributes.findIndex(item => item.attribute_id === parseInt(selectAttrX.options[selectAttrX.selectedIndex].value)) === -1) {
                        variant.attributes.push({
                            is_in_specification: 0,
                            id: parseInt(selectAttrX.options[selectAttrX.selectedIndex].value),
                            attribute_id: parseInt(selectAttrX.options[selectAttrX.selectedIndex].value),
                            sort: 0,
                            items: [],
                            attribute: {
                                object_data: {
                                    title: selectAttrX.options[selectAttrX.selectedIndex].text,
                                    id: parseInt(selectAttrX.options[selectAttrX.selectedIndex].value)
                                }
                            }
                        });
                    }
                },
                addVarAttributeItem(varId, attributeId) {
                    const selectAttrItem = this.$refs['selectAttributeItem-' + varId + '-' + attributeId];
                    const vAttr = this.variations.find(v => v.id === parseInt(varId)).attributes.find(a => a.attribute_id === parseInt(attributeId));

                    if (vAttr.items.findIndex(item => item.attribute_item_id === parseInt(selectAttrItem.options[selectAttrItem.selectedIndex].value)) === -1) {
                        vAttr.items.push({
                            sort: 0,
                            id: parseInt(selectAttrItem.options[selectAttrItem.selectedIndex].value),
                            attribute_item_id: parseInt(selectAttrItem.options[selectAttrItem.selectedIndex].value),
                            attribute_item: {
                                object_data: {
                                    title: selectAttrItem.options[selectAttrItem.selectedIndex].text,
                                    id: parseInt(selectAttrItem.options[selectAttrItem.selectedIndex].value)
                                }
                            }
                        })
                    }
                },

                removeAttributeOrItemWithSlice(index, items) {
                    const firstArr = items.slice(0, index);
                    const secondArr = items.slice(index + 1);
                    return [...firstArr, ...secondArr]
                },

                deleteVar(index, variationId) {
                    this.removeModalOpen(index, variationId);
                },
                deleteVarAttribute(index, varId) {
                    const variation = this.variations.find(v => v.id == varId);
                    variation.attributes = this.removeAttributeOrItemWithSlice(index, variation.attributes);
                },
                deleteVarAttributeItem(index, attributeId, varId) {
                    const attributes = this.variations.find(v => v.id == varId).attributes.find(a => a.attribute_id == attributeId);
                    attributes.items = this.removeAttributeOrItemWithSlice(index, attributes.items);
                },

                generateVarsArg() {
                    this.$refs.generateVars.value = 1;
                    formSubmit(this);
                    this.generateAllModal = false;
                    this.$refs.mloading.style.display = 'block';
                }

            }
        }


    </script>
@endpush