let qty =1;
function operation(param,constant){
    const meter_qty = document.querySelector('.meter-qty');
    const box_qty = document.querySelector('.s-quantity-input-input')
    qty = Number(qty)
    
    if(param == '+') qty++
    else if (param == '-'){qty =  qty > 1 ? qty-1 : 1 }
    else { qty = meter_qty.value < 1 ? 1 : meter_qty.value; }

    meter_qty.value = qty;
 
    let box_count = qty/constant;
    let has_dicemal = (box_count + "").split(".")[1] ? true : false ;
    let box_value = has_dicemal ?  Math.floor(box_count) + 1 : Math.floor(box_count);
        
    box_qty.value = box_value
    document.querySelector('salla-quantity-input').value = box_value;

    setTimeout(()=>{
        const event = new Event('change', { bubbles: true });
        document.querySelector('salla-quantity-input').dispatchEvent(event);  
    },200)
}

salla.onReady() 
    .then(() => salla.lang.onLoaded())
    .then(async () => {
        if(salla.config.get('page.slug') !== 'product.single'){
            return;
        }

        let product_id = Number(document.querySelector('.btn--wishlist').dataset.id);
        await salla.product.getDetails(product_id, ["tags"])
        .then((res) => {
            if(res.data.tags.lenght < 1 ){
                return
            }
            let constant = Number(res.data.tags[0].name.split('-')[0].replace(',','.'));
            function create_inputs_dom() {
                let parent_Dom = document.querySelector('.product-fixed-bar .product-form').getElementsByTagName('div')[0];
                let NewDom = document.createElement('div')
                NewDom.innerHTML = `
                    <div class="flex border h-10 border-gray-200 rounded" style=" display: flex;border: 1px solid;border-radius: 15px;height: 2.5rem;border-color: #e5e7eb;min-width: 8.5rem;">
                        <span style="width: 2.75rem;" class="flex items-center justify-center text-base border-l" onclick="operation('+',${constant})"><i class="sicon-add"></i></span>
                        <input type="number" class="meter-qty" onchange="operation('',${constant})" value=1 style="border:none; max-width:5rem; min-width: 44px; text-align: center;padding:0">
                        <span class="flex w-11 items-center justify-center text-base" style="width: 2.75rem;border-right-width:1px;"onclick="operation('-',${constant})"><i class="sicon-minus"></i></span>
                    </div>
                    `
                parent_Dom.insertBefore(NewDom, parent_Dom.children[0]);
            }
                    
            function changeCartoons(qty) {
                qty = Number(qty)
                document.querySelector('#qty_metre').innerHTML = `${salla.lang.choice('cartoon',qty)} = <span class="text-primary">${(qty * constant).toFixed(2)} متر<sup>2</sup></span>`;
            }

            let s_qty_input = document.querySelector('salla-quantity-input');
            salla.lang.messages['ar.trans'].cartoon = salla.lang.messages['en.trans'].cartoon = "{0} <span></span>|{1} <span class=text-primary>كرتون واحد</span>|{2} <span class='text-primary'>كرتونان</span>|[3,10] <span class='text-primary'>:count</span> كراتين|[11,*] <span class='text-primary'>:count</span> كرتون";
            let myDom = document.createElement('div');
            let element = document.querySelector('.product-fixed-bar .product-form')
            element.insertBefore(myDom, element.children[2])
            
            myDom.outerHTML = `
            <div class="flex mt-2.5 sm:mt-5 flex-col w-full">
                <label>عدد الكراتين</label>
                <p class="border bg-white p-2 sm:p-2 rounded mt-1 font-semibold text-xl" id="qty_metre"></p>
            </div>`;
            
            s_qty_input.addEventListener('change', (event) => changeCartoons(Number(event.target.value)));
            changeCartoons(1);
            
            s_qty_input.parentElement.style.display = 'none'
            setTimeout(()=>{
               create_inputs_dom();
            },300)
            });
        
    });