
<script>
    var attr_index=0;



    jQuery(".li-for-variable-tab").click(function () {
    })
    jQuery(".add-variable-btn").click(function (e) {
        e.preventDefault();
        var id ='{{ request()->id }}';
        if(id.length==0){
            id=jQuery("input[name=product_nick_name]").val()
        }
        console.log(id)
        var selectVariable=jQuery(".variable-select");
        var selectValue=selectVariable.val();

        if(selectValue == "variable_new"){

            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery(".admin-media-form-file input[name='_token']").val()
                }
            });
            jQuery(".admin-ajax-loading").addClass("active")
            jQuery.ajax({
                type: "post",

                url: `{{ route("get_product_attribute_use_for_variable") }}`,

                data: {"product_id": id },

                success: function (data) {
                    var variable_item=`<div class="variable-item">
                                            <section class="variable-item-top">
                                                <div class="variable-item-top-right">

                                                </div>
                                                <div class="variable-item-top-left">
                                                    <div class="variable-item-top-left-closeBtn">
                                                        <i class="fa fa-angle-down"></i>
                                                    </div>
                                                    <div class="variable-item-top-left-deleteBtn">
                                                        <span>حذف</span>
                                                    </div>
                                                </div>
                                            </section>
                                            <div class="variable-item-content">
                                                <div class="row">
                                                    <div class="col-md-6 variable-input-box">
                                                        <label>قیمت</label>
                                                        <input type="text" name="variable_price[${attr_index}]" placeholder="قیمت را وارد کنید">
                                                    </div>
                                                    @if(isset($group_product) && $group_product==true)
                    <div class="col-md-6 variable-input-box">
                                                    <label>وزن (kg)</label>
                                                    <input type="text"  name="variable_weight[${attr_index}]" placeholder="وزن را وارد کنید">
                                                    </div>
                                                        <div class="col-md-6 variable-input-box">
                                                            <label>حداقل قیمت تخفیف اول</label>
                                                            <input type="text"  name="variable_offer_1_min[${attr_index}]" placeholder="حداقل قیمت تخفیف اول را وارد کنید" >
                                                        </div>
                                                        <div class="col-md-6 variable-input-box">
                                                            <label>درصد تخفیف اول</label>
                                                            <input type="text"  name="variable_offer_1_percent[${attr_index}]" placeholder="درصد تخفیف اول را وارد کنید" >
                                                        </div>
                                                        <div class="col-md-6 variable-input-box">
                                                            <label>حداقل قیمت تخفیف دوم</label>
                                                            <input type="text"  name="variable_offer_2_min[${attr_index}]" placeholder="حداقل قیمت تخفیف دوم را وارد کنید" >
                                                        </div>
                                                        <div class="col-md-6 variable-input-box">
                                                            <label>درصد تخفیف دوم</label>
                                                            <input type="text"  name="variable_offer_2_percent[${attr_index}]" placeholder="درصد تخفیف دوم را وارد کنید" >
                                                        </div>
                                                    @else
                                                        <div class="col-md-6 variable-input-box">
                                                           <label>قیمت فروش ویژه</label>
                                                           <input type="text"  name="variable_offer_price[${attr_index}]" placeholder="قیمت  فروش ویژه را وارد کنید">
                                                        </div>
                                                        <div class="col-md-6 variable-input-box">
                                                        <label>وزن (kg)</label>
                                                        <input type="text"  name="variable_weight[${attr_index}]" placeholder="وزن را وارد کنید">
                                                    </div>
                                                    @endif



                                                    <div class="col-md-6 variable-input-box">
                                                        <label>ابعاد (L×W×H) (cm)</label>
                                                        <div class="row">
                                                             <div class="col-md-4">
                                                                <input type="text"  name="variable_length[${attr_index}]" placeholder="طول">
                                                             </div>
                                                            <div class="col-md-4">
                                                                <input type="text"  name="variable_width[${attr_index}]" placeholder="عرض">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <input type="text"  name="variable_height[${attr_index}]" placeholder="ارتفاع">
                                                            </div>
                                                        </div>

                                                    </div>
 <div class="variable-input-box col-12">
                                                            <p>
                                                                <label for="">شناسه محصول</label>
                                                                <input type="text" name="variable_sku[${attr_index}]">
                                                            </p>
                                                            <p>
                                                                <input type="checkbox" name="variable_manage_stock[${attr_index}]">
                                                                <label for="">مدیریت موجودی انبار؟</label>
                                                            </p>



                                                            <div class="manage-stock-number">
                                                                <p>
                                                                    <label for="">تعداد موجود در انبار.</label>
                                                                    <input type="number" name="variable_stock_number[${attr_index}]" >
                                                                </p>
                                                                <p>
                                                                    <label for="">آستانه کم‌بودن موجودی انبار.</label>
                                                                    <input type="number" name="variable_low_stock_amount[${attr_index}]">
                                                                </p>
                                                            </div>

                                                        </div>
                                                </div>
                                            </div>
                                        </div>`;
                    document.querySelector(".variable-items-box").insertAdjacentHTML("afterbegin",variable_item);
                    var first_variable=document.querySelector(".variable-items-box .variable-item:first-child .variable-item-top-right");
                    console.log(data)
                    Object.entries(data).forEach(i => {
                        first_variable.insertAdjacentHTML("afterbegin",`
                         <div class="variable-item-top-right-select-item">
                                                        <select class="variable-select_${i[0]}" name='attribute_select[${attr_index}][${i[1].parent.id}]'>
                                                            <option value="" selected>${i[1].parent.name}</option>
                                                        </select>
                                                    </div>

                        `)


                    var variable_select=document.querySelector(`.variable-select_${i[0]}`);
                        Object.entries(i[1].values).forEach(v => {
                            variable_select.insertAdjacentHTML("beforeend",`
                                <option value="${v[1].id}" >${v[1].name }</option>
                            `)
                        })
                    })
                    attr_index++;
                    jQuery(".admin-ajax-loading").removeClass("active")
                }
            })

        }


    });

    jQuery("#variable").click(function (e) {
        var section=e.target.closest("section");
        if(section.classList.contains("variable-item-top") && e.target.tagName != "SELECT" && e.target.tagName != "OPTION" && e.target.tagName != "SPAN" && !e.target.classList.contains("variable-item-top-left-deleteBtn") ){

            jQuery(section).parents(".variable-item").children(".variable-item-content").stop().slideToggle(400)
            jQuery(section).parents(".variable-item").toggleClass("open")
        }
        else if(e.target.closest("div").classList.contains("variable-item-top-left-deleteBtn")){
            var parent=e.target.closest(".variable-item");
            if(confirm("از حذف این متغیر اطمینان دارید؟")){
                jQuery.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery(".admin-media-form-file input[name='_token']").val()
                    }
                });
                var variation_id_for_delete=jQuery(parent).find("input.variation_id").val()
                if(variation_id_for_delete) {
                    jQuery.ajax({
                        type: "DELETE",

                        url: `{{ route("remove_product_variation") }}`,

                        data: {"variation_id": variation_id_for_delete},
                        success: function (data) {
                            parent.remove();
                        }
                    })
                } else{
                    parent.remove();
                }

            }
        }
    });




</script>
