var approve_price = document.querySelector('.woocommerce-Price-amount bdi').innerHTML;
approve_price = approve_price.replace(/<\/?span[^>]*>||^.*\$/g,"");
approve_price = approve_price.replace(/^.*\$/,'');
approve_price = approve_price.replace(/,/,'');

var approve_model = document.querySelector('.product_title').innerHTML;
approve_model = approve_model.replace(/(\r\n|\n|\r|\t)/gm, "");

var approve_qty = document.querySelector('.quantity input').value;

// Putting button on page
function init_button(){ 
    var new_button = document.createElement('approve-button');
	new_button.id = "approve_button_id";
	new_button.style.display="inline-block";
	new_button.style.margin="0px 0px 2em 0px";
	new_button.setAttribute('application-type',"embedded_app");
	var price_element = document.querySelector('.cart');
	price_element.after(new_button);    
}

// Adding appropiate info to the button
function update_button(){

    var extra_price_check = document.getElementById("extra_amount");
    if (extra_price_check){
        var extra_price = document.querySelector('#extra_amount').innerHTML;
        extra_price = extra_price.replace(/<\/?span[^>]*>||^.*\$/g,"");
        extra_price = extra_price.replace(/^.*\$/,'');
        extra_price = extra_price.replace(/,/,'');
        total_price = + parseFloat(approve_price) + parseFloat(extra_price);
    } else {
        total_price = parseFloat(approve_price);
    }
    total_price = parseFloat(total_price).toFixed(2);

    var approve_qty = document.querySelector('.quantity input').value;

	if(isNaN(total_price)) return;
	if(!approve_model) return;
    if (!approve_qty){
        approve_qty = 1;
    }

	document.getElementById('approve_button_id').setAttribute('price',total_price);
	document.getElementById('approve_button_id').setAttribute('qty',approve_qty);
    document.getElementById('approve_button_id').setAttribute('model',approve_model);
	document.getElementById('approve_button_id').setAttribute('type',"new_product");
}

// Updating the button on option changes
function option_update_button(item){
    var option_price = item.dataset.price;
    option_price = option_price.replace(/<\/?span[^>]*>||^.*\$/g,"");
    option_price = option_price.replace(/^.*\$/,'');
    option_price = option_price.replace(/,/,'');
    
    // Get total price
    var extra_price_check = document.getElementById("extra_amount");
    if (extra_price_check){
        var extra_price = document.querySelector('#extra_amount').innerHTML;
        extra_price = extra_price.replace(/<\/?span[^>]*>||^.*\$/g,"");
        extra_price = extra_price.replace(/^.*\$/,'');
        extra_price = extra_price.replace(/,/,'');
        total_price = + parseFloat(approve_price) + parseFloat(extra_price);
    } else {
        total_price = parseFloat(approve_price);
    }
    // Get option name and add to model
    var option_model = item.dataset.name;
    option_model = option_model.replace(/(\r\n|\n|\r|\t)/gm, "");

    if (item.checked){
        total_price = parseFloat(total_price) + (parseFloat(option_price));
        total_price = parseFloat(total_price).toFixed(2);

        approve_model = approve_model + ' | ' + option_model;
    } else {
        total_price = parseFloat(total_price) - (parseFloat(option_price));
        total_price = parseFloat(total_price).toFixed(2);

        approve_model = approve_model.replace(' | ' + option_model,'');
    }
    

    if(isNaN(total_price)) return;
    if(!approve_model) return;

    document.getElementById('approve_button_id').setAttribute('price',total_price);
    document.getElementById('approve_button_id').setAttribute('model',approve_model);
}

function addListener(item){
    item.addEventListener("click", function(){
        option_update_button(item)
    });
}

init_button();
update_button();

// Add event listeners to option checkboxes
var checkboxes = document.querySelectorAll('.extra-variation-box input[type=checkbox]');
checkboxes.forEach(function (item, index) {
    addListener(item);
});

// Add mutation observer to qty element
var product_container = document.querySelector('.product-detail-section-right');
var qty_ele = product_container.querySelector('.quantity input');
qty_ele.addEventListener("change", function(){
    update_button();
});