Calculating total in shopping cart shows Nan

Question

Hi Team

I am unable to calculate total to my shopping cart and discount, when a user add item on the basket(this shows both incrementing and decrementing). The problem is on getting the discount and total of those item being on the basket. Currently i can only see Nan as total need some help. 

// php code
<?php
session_start();


require_once 'dbconn.php';

// add to cart
if(isset($_POST['id'])) {
  $product_id = $_POST['id'];
  if(isset($_SESSION['cart'][$product_id])) {
    $_SESSION['cart'][$product_id]++;
  } else {
    $_SESSION['cart'][$product_id] = 1;
  }
  echo count($_SESSION['cart']);
  exit;
}

// update cart
if(isset($_POST['update_cart'])) {
  $cart_data = $_POST['cart_data'];
  foreach($cart_data as $product_id => $quantity) {
    $_SESSION['cart'][$product_id] = $quantity;
  }
  $total = $_POST['total'];
  echo json_encode(array('success' => true, 'total' => $total));
  exit;
}

?>




// jquery code
// Get the cart from local storage
function getCart() {
  var cart = localStorage.getItem('cart');
  if (cart) {
    return JSON.parse(cart);
  } else {
    return {};
  }
}

// Save the cart to local storage
function saveCart(cart) {
  localStorage.setItem('cart', JSON.stringify(cart));
}

// Update the cart count in the navbar
function updateCartCount() {
  var cartCount = Object.values(getCart()).reduce((a, b) => a + b, 0);
  $('#cart-count').text(cartCount);
}

// Add a product to the cart
function addToCart(productId, quantity) {
  var cart = getCart();
  if (cart.hasOwnProperty(productId)) {
    var newQuantity = parseInt(quantity);
    if (newQuantity <= 0) {
      delete cart[productId];
    } else {
      cart[productId] = newQuantity;
    }
  } else {
    cart[productId] = parseInt(quantity);
  }
  saveCart(cart);
  updateCartCount();
  calculate_total();

  // Display message
  var productName = $('#product-name-' + productId).text();
  $('#cart-message').text(quantity + 'x ' + productName + ' added to cart').show();
  
  setTimeout(function() {
    $('#cart-message').fadeOut('slow');
  }, 3000);
}

// Calculate and display the total amount in the shopping cart
function calculate_total() {
  var cart = getCart();
  var total = 0;
  for (var productId in cart) {
    var product = getProductId(productId);
    var price = parseFloat(product.price);
    var quantity = parseInt(cart[productId]);
    var subtotal = price * quantity * (1 - parseFloat(product.discount));
    total += subtotal;
  }
  $('#total-amount').text('$' + total.toFixed(0)); // update the text of the total td element
  $('#total').val(total.toFixed(0));
  return total.toFixed(0);
}


// get the product details.
function getProductId(productId) {
  return $.ajax({
    url: 'get_product_details.php',
    data: { productId: productId },
    dataType: 'json'
  });
}

// display data from the cart.

function display_cart() {
  var cart = getCart();
  var $cart_table = $('#cart-table');

  // Remove existing rows from the table
  $cart_table.find('tbody tr').remove();

  // Add new rows to the table for each product in the cart
  for (var productId in cart) {
    $.ajax({
      url: 'get-product-details.php',
      data: { productId: productId },
      success: function(product) {
        var price = parseFloat(product.unit_price);
        var quantity = parseInt(cart[product.productId]);
        var subtotal = price * quantity;
        var discount = parseFloat(product.discount);
        var total = subtotal - (subtotal * discount);
        var $row = $('<tr>').appendTo($cart_table.find('tbody'));
        $('<td>').append($('<img>').attr('src', 'img/detailsquare.jpg').attr('alt', product.product_name)).appendTo($row);
        $('<td>').append($('<a>').attr('', '').text(product.product_name)).appendTo($row);
        $('<td>').text(quantity).appendTo($row);
        $('<td>').text('$' + price.toFixed(2)).appendTo($row);
        $('<td>').text((discount * 100) + '%').appendTo($row);
        $('<td>').text('$' + total.toFixed(2)).appendTo($row);
      },
      error: function(xhr, status, error) {
        console.error('Error getting product details:', error);
      }
    });
  }

  // Update the total amount in the cart
  calculate_total();
}


$(document).ready(function() {
  $('.btn-plus').click(function() {
    var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
    var quantityInput = $(this).closest('.input-group').find('.product-quantity');
    var currentQuantity = parseInt(quantityInput.val());
    var newQuantity = currentQuantity + 1;
    quantityInput.val(newQuantity);
    addToCart(productId, newQuantity);
  });

  $('.btn-minus').click(function() {
    var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
    var quantityInput = $(this).closest('.input-group').find('.product-quantity');
    var currentQuantity = parseInt(quantityInput.val());
    if (currentQuantity > 1) {
      var newQuantity = currentQuantity - 1;
      quantityInput.val(newQuantity);
      addToCart(productId, newQuantity);
    }
  });

  // Initialize the cart count in the navbar
  updateCartCount();
});



// html code
<div id="basket" class="col-lg-9">
              <div class="box">
                <form method="post" action="add_to_cart.php">
                  <h1>Shopping cart</h1>
                  <p class="text-muted">You currently have <span id="cart-count"><?php echo count($_SESSION['cart']); ?></span>
                  <p id="cart-message" class="text-success" style="display: none;"></p>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th colspan="2">Product</th>
                          <th>Quantity</th>
                          <th>Unit price</th>
                          <th>Discount</th>
                          <th colspan="2"><span id="total-amount">Total</span></th>

                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><a ><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
                          <td><a >White Blouse Armani</a></td>
                          <td>
                <div class="input-group">
                <span class="input-group-btn">
                <button class="btn btn-default btn-minus" type="button">-</button>
                </span>
                <input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
              <span class="input-group-btn">
              <button class="btn btn-default btn-plus" type="button">+</button>
            </span>
          </div>
                          </td>
                          <td>R</td>
                          <td></td>
                          <td>R</td>
                          <td><a "><i class="fa fa-trash-o"></i></a></td>
                        </tr>
                        <tr>
  <td><a"><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
  <td><a >White Blouse Armani</a></td>
  <td>
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default btn-minus" type="button">-</button>
      </span>
      <input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
      <span class="input-group-btn">
        <button class="btn btn-default btn-plus" type="button">+</button>
      </span>
    </div>
  </td>
  <td>R</td>
  <td>%13</td>
  <td>R</td>
  <td><a ><i class="fa fa-trash-o"></i></a></td>
</tr>

                      </tbody>
                      <tfoot>
                        <tr>
                          <th colspan="5" id="total-amount">Total</th>
                          <th colspan="2"></th>
                          
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                  <p id="cart-message" class="text-success" style="display: none;"></p>
                  <!-- /.table-responsive-->
                  <div class="box-footer d-flex justify-content-between flex-column flex-lg-row">
                    <div class="left"><a href="category.html" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Continue shopping</a></div>
                    <div class="right">
                      <button id="add-to-cart-btn" class="btn btn-outline-secondary"><i class="fa fa-refresh"></i> Update cart</button>
                      <button class="btn btn-primary" type="submit" >Proceed to checkout <i class="fa fa-chevron-right"></i></button>
                    </div>
                  </div>
                </form>
              </div>