Woocommerce added custom fee, trying to manipulate with checkbox via AJAX - php

Question

i was hoping if i could get some information about whats going on in here.
I added an extra fee in the totals part of the checkout, it adds the 10% of the subtotal.
Now this works since i added the following code snippet via a plugin:
add_action( 'woocommerce_cart_calculate_fees','endo_handling_fee' );
function endo_handling_fee() {
global $woocommerce;
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
$subtotal = $woocommerce->cart->subtotal;
$fee_percentage = 0.1; // 10 percent
$fee = ($subtotal * $fee_percentage);
$woocommerce->cart->add_fee( 'Seguro de Envio', $fee, true, 'standard' );
}
And it actually works but i have to be able to activate it via a checkbox.
Check box was created by going into cart-totals and using this code:
<?php foreach ( WC()->cart->get_fees() as $fee ) : ?>
<tr class="fee">
<th><?php echo esc_html( $fee->name ); ?> <input type="checkbox" id="envio"> </th>
<td id="seguroenvio" data-title="<?php echo esc_html( $fee->name ); ?>"><? php wc_cart_totals_fee_html( $fee ); ?></td>
</tr>
<?php endforeach; ?>
Also at the bottom of cart-totals.php file, i added this:
<?php do_action( 'woocommerce_after_cart_totals' ); ?>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
$("#envio").on("change", function() {
var mee = ($(this).is(":checked") == true) ? "yes" : "no";
$.ajax({
type: 'post',
url: 'http://valaidp.com/mrelectronicstest/wp- content/plugins/woocommerce/templates/cart/fields.php',
data: {status:mee},
success: function(output) {
$('#seguroenvio').text(output);
}
});
});
</script>
<?php
function custom_checkbox_checker () {
if ( is_checkout() ) {
wp_enqueue_script( 'jquery' ); ?>
<script type="text/javascript">
jQuery(document).ready( function (e) {
var $ = jQuery;
// wc_checkout_params is required to continue, ensure the object exists
if ( typeof wc_checkout_params === 'undefined' )
return false;
var updateTimer,
dirtyInput = false,
xhr;
function update_shipping() {
if ( xhr ) xhr.abort();
var liftgate = $( '#envio:checked' ).val();
var data = {
action: 'woocommerce_update_order_review',
security: wc_checkout_params.update_order_review_nonce,
liftgate: liftgate,
post_data: $( 'form' ).serialize()
};
xhr = $.ajax({
type: 'POST',
url: wc_checkout_params.ajax_url,
data: data,
success: function( response ) {
if ( response ) {
//$( '#order_review' ).html( $.trim( response ) );
$( '#order_review' ).find( '#envio:checked' ).trigger('click');
$( 'body' ).trigger('updated_checkout' );
}
}
});
}
jQuery('#envio').on('click', function() {
update_shipping();
$woocommerce->cart->add_fee( 'Seguro de Envio', $fee, true, 'standard' );
});
});
</script>
<?php }
}
And to finish off, in the same location of the cart-totals.php i added a fields.php file that i created adding this code:
<?php
global $woocommerce;
add_action( 'woocommerce_cart_calculate_fees','endo_handling_fee' );
/*global $woocommerce;
$subtotal = $woocommerce->cart->subtotal;
$fee_percentage = 0.1; // 10 percent
$fee = ($subtotal * $fee_percentage);
$woocommerce->cart->add_fee( 'Seguro de Envio', $fee, true, 'standard' );
echo $fee." ";
require('../../../../../wp-includes/functions.php'); */
function endo_handling_fee() {
global $woocommerce;
if (is_admin() && ! defined( 'DOING_AJAX' ) )
return;
$subtotal = $woocommerce->cart->subtotal;
$fee_percentage = 0.1; // 10 percent
$fee = ($subtotal * $fee_percentage);
if($_POST["status"] == "yes"){
$woocommerce->cart->add_fee( 'Seguro de Envio', $fee, true, 'standard' );
echo $fee." ";
}
else
{
$woocommerce->cart->add_fee( 'Seguro de Envio', 0, true, 'standard' );
echo "0";
}
echo 0;
}
?>
The checkbox appears but its not triggering anything when clicked.
Any help is much appreciated.
Woocommerce version 4.4.2
Site url: valaidp.com/mrelectronicstest