const checkoutOrders=document.getElementById("checkout-orders");
const totalAmount=document.getElementById("total-amount");
const showCartoncheckout=()=>{
    let cart=JSON.parse(localStorage.getItem("cart")) || [];

if(cart.length==0){
    checkoutOrders.innerHTML+=`
<div id="emptyCartMessageContainer"  class="d-flex my-5 poppins flex-column justify-content-center align-items-center text-center" style="height: 100%; display: none;">
                <div>
                    <i class="fa-solid fa-cart-shopping fa-3x mb-3 text-secondary"></i>
                    <h5 class="fw-semibold">Your Cart is Empty</h5>
                    <p class="text-muted">Fill your cart with amazing items</p>
                    <a href="./index.php" class="btn btn-danger mt-2" >Shop Now</a>
                </div>
            </div>
    `
}
cart.forEach(item=>{
    checkoutOrders.innerHTML+=`
   <div class="cart-item p-3 d-flex poppins justify-content-between align-items-start mb-4 position-relative" data-id="${item.id}">
            
            <div class="d-flex align-items-center gap-2 ps-4">
                <img src="./Media/azadi-deal-1.png" class="rounded-circle bg-danger" width="40" height="40">
                <div class="d-flex justify-between">
                    <div class="fw-semibold">${item.name}</div>
                    
                    
                </div>
            </div>
            <div class="fw-bold">Rs.${item.price * item.quantity}</div>
        </div>
    `
})
}
showCartoncheckout();
const showTotal=()=>{
    let cart=JSON.parse(localStorage.getItem("cart")) ;
    let total= cart.reduce((s, e) => s + e.price * e.quantity,0);
totalAmount.innerHTML=`
<p class="fw-bold">
Sub Total:
${total}
</p>
`

}
showTotal();
