ADD TO CART

 import React, { useEffect, useState } from 'react';

import { useNavigate } from 'react-router-dom';

const Cart = () => {

const navigate = useNavigate();

const [cartItems, setCartItems] = useState([]);

useEffect(() => {

getProducts();

}, []);

function getProducts() {

fetch('http://localhost/Petshop/showcart.php')

.then((res) => res.json())

.then((data) => {

// Ensure quantity is parsed as number

const itemsWithId = data.map((item, index) => ({ ...item, id: index + 1, quantity: parseInt(item.quantity) }));

console.log(itemsWithId);

setCartItems(itemsWithId);

})

.catch((error) => {

console.error('Error fetching products:', error);

});

}

const increaseQuantity = (id) => {

setCartItems(prevCartItems => {

return prevCartItems.map(item => {

if (item.id === id) {

return { ...item, quantity: item.quantity + 1 };

}

return item;

});

});

};

const decreaseQuantity = (id) => {

setCartItems(prevCartItems => {

return prevCartItems.map(item => {

if (item.id === id && item.quantity > 1) {

return { ...item, quantity: item.quantity - 1 };

}

return item;

});

});

};

const calculateTotal = () => {

return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);

};

return (

<div style={{ fontFamily: 'Arial, sans-serif', margin: 0, padding: 0, backgroundColor: '#f5f5f5' }}>

<div style={{ maxWidth: '800px', margin: '20px auto', padding: '20px', backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>

<h1 style={{ textAlign: 'center', color: '#333' }}>Shopping Cart</h1>

<table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '20px' }}>

<thead>

<tr>

<th style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left', backgroundColor: '#f2f2f2' }}>Product</th>

<th style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left', backgroundColor: '#f2f2f2' }}>Price</th>

<th style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left', backgroundColor: '#f2f2f2' }}>Quantity</th>

<th style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left', backgroundColor: '#f2f2f2' }}>Total</th>

</tr>

</thead>

<tbody>

{cartItems.map(item => (

<tr key={item.id}>

<td style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left' }}>{item.pname}</td>

<td style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left' }}>Rs.{item.price}</td>

<td style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left' }}>

<button onClick={() => decreaseQuantity(item.id)} style={{ backgroundColor: '#4caf50', color: '#fff', border: 'none', borderRadius: '4px', padding: '5px 10px', cursor: 'pointer' }}>-</button>

<span style={{ margin: '0 5px' }}>{item.quantity}</span>

<button onClick={() => increaseQuantity(item.id)} style={{ backgroundColor: '#4caf50', color: '#fff', border: 'none', borderRadius: '4px', padding: '5px 10px', cursor: 'pointer' }}>+</button>

</td>

<td style={{ padding: '10px', borderBottom: '1px solid #ddd', textAlign: 'left' }}>Rs.{(item.price * item.quantity)}</td>

</tr>

))}

</tbody>

<tfoot>

<tr>

<td colSpan="3" style={{ padding: '10px', textAlign: 'right', borderTop: '1px solid #ddd' }}>Subtotal</td>

<td style={{ padding: '10px', borderTop: '1px solid #ddd' }}>Rs.{calculateTotal()}</td>

</tr>

<tr>

<td colSpan="3" style={{ padding: '10px', textAlign: 'right' }}>Tax (10%)</td>

<td style={{ padding: '10px' }}>Rs.{(calculateTotal() * 0.1)}</td>

</tr>

<tr>

<td colSpan="3" style={{ padding: '10px', textAlign: 'right' }}><strong>Total</strong></td>

<td style={{ padding: '10px' }}><strong>Rs.{(parseFloat(calculateTotal()) + (parseFloat(calculateTotal()) * 0.1))}</strong></td>

</tr>

</tfoot>

</table>

<button style={{ display: 'block', width: '100%', padding: '10px', marginTop: '20px', textAlign: 'center', backgroundColor: '#4caf50', color: '#fff', textDecoration: 'none', border: 'none', borderRadius: '4px', cursor: 'pointer', transition: 'background-color 0.3s ease' }} className="checkout-btn">Proceed to Checkout</button>

</div>

</div>

);

};

export default Cart;