Notes

// import React from 'react'
// import Counter from '../Configuration/Counter'
// import { createTheme, ThemeProvider } from '@mui/material/styles';
// import Typography from '@mui/material/Typography';
// import Checkout from './Checkout';
// import Button from '@mui/material/Button';
// import { useState, useEffect } from 'react'
// import { Route, Link, Routes, BrowserRouter as Router, Switch } from 'react-router-dom'


// const theme = createTheme();

// theme.typography.h3 = {
// fontSize: '1.2rem',
// '@media (min-width:600px)': {
// fontSize: '1.5rem',
// },
// [theme.breakpoints.up('md')]: {
// fontSize: '2rem',
// },
// };



// export default function Cart() {

// return (
// <div>
// <ThemeProvider theme={theme}>
// <Typography variant="h3">Your Items In Cart</Typography><br></br>
// <Typography variant="h5">Item 1</Typography>
// <Typography >Price</Typography>
// <Typography >Total</Typography>
// <Counter />


// </ThemeProvider>

// <Link to="/Checkout">
// <Button variant="contained" style={{ background: "#f44336" }}>Proceed To Checkout</Button>
// </Link>

// </div>

// )
// }

// import * as React from 'react';
// import Table from '@mui/material/Table';
// import TableBody from '@mui/material/TableBody';
// import TableCell from '@mui/material/TableCell';
// import TableContainer from '@mui/material/TableContainer';
// import TableHead from '@mui/material/TableHead';
// import TableRow from '@mui/material/TableRow';
// import Paper from '@mui/material/Paper';
// import DeleteIcon from '@mui/icons-material/Delete';
// import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
// import Counter from '../Configuration/Counter'

// function createData(name, calories, fat, carbs, protein) {
// return { name, calories, fat, carbs, protein };
// }

// const rows = [
// createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
// createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
// createData('Eclair', 262, 16.0, 24, 6.0),
// createData('Cupcake', 305, 3.7, 67, 4.3),
// createData('Gingerbread', 356, 16.0, 49, 3.9),
// ];

// export default function BasicTable() {
// return (
// <TableContainer component={Paper}>
// <Table sx={{ minWidth: 650 }} aria-label="simple table">
// <TableHead >
// <TableRow>
// <TableCell sx={{ fontWeight: 'bold' }}>Item Name</TableCell>
// <TableCell sx={{ fontWeight: 'bold' }} align="right">Description</TableCell>
// <TableCell sx={{ fontWeight: 'bold' }} align="right">No. Of Items</TableCell>
// <TableCell sx={{ fontWeight: 'bold' }}align="right">Image</TableCell>
// <TableCell sx={{ fontWeight: 'bold' }} align="right">Remove&nbsp;(g)</TableCell>
// </TableRow>
// </TableHead>
// <TableBody>
// {rows.map((row) => (
// <TableRow
// key={row.name}
// sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
// >
// <TableCell component="th" scope="row">
// {row.name}
// </TableCell>
// <TableCell align="right">{row.calories}</TableCell>
// <TableCell align="right"><Counter/></TableCell>
// <TableCell align="right">{row.fat}</TableCell>
// {/* <TableCell align="right">{row.carbs}</TableCell> */}
// {/* <TableCell align="right"> {row.protein}</TableCell> */}
// <TableCell align="right"> <DeleteOutlinedIcon /></TableCell>
// </TableRow>
// ))}
// </TableBody>
// </Table>
// </TableContainer>
// );
// }


import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Counter from '../Configuration/Counter'
import Button from '@mui/material/Button';
import { Route, Link, Routes, BrowserRouter as Router, Switch } from 'react-router-dom'
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';

const TAX_RATE = 0.07;

function ccyFormat(num) {
return `${num.toFixed(2)}`;
}

function priceRow(qty, unit) {
return qty * unit;
}

function createRow(desc, qty, unit) {
const price = priceRow(qty, unit);
return { desc, qty, unit, price };
}

function subtotal(items) {
return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
}

const rows = [
createRow('Paperclips (Box)', 100, 1.15),
createRow('Paper (Case)', 10, 45.99),
createRow('Waste Basket', 2, 17.99),
];

const invoiceSubtotal = subtotal(rows);
const invoiceTaxes = TAX_RATE * invoiceSubtotal;
const invoiceTotal = invoiceTaxes + invoiceSubtotal;

export default function SpanningTable() {
return (

<div>

<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="spanning table">
<TableHead>
<TableRow>
<TableCell sx={{ fontWeight: 'bold' }} align="center" colSpan={4}>
Product Details
</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Price</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: 'bold' }}>Description</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Qty.</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Remove</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Unit</TableCell>
<TableCell sx={{ fontWeight: 'bold' }} align="right">Sum</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.desc}>
<TableCell>{row.desc}</TableCell>
{/* <TableCell align="right">{row.qty}</TableCell> */}
<TableCell align="right"><Counter/></TableCell>
<TableCell align="right"> <DeleteOutlinedIcon /></TableCell>
<TableCell align="right">{row.unit}</TableCell>
<TableCell align="right">{ccyFormat(row.price)}</TableCell>

</TableRow>
))}

<TableRow>
<TableCell rowSpan={4} />
<TableCell sx={{ fontWeight: 'bold' }} colSpan={3}>Subtotal</TableCell>
<TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: 'bold' }} colSpan={2}>Tax</TableCell>
<TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
<TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: 'bold' }} colSpan={3}>Total</TableCell>
<TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
</TableRow>
</TableBody>
</Table>
<Link to="/Checkout" style={{ float: "right" }}>
<Button variant="contained" style={{ background: "#f44336" }}>Proceed To Checkout</Button>
</Link>
</TableContainer>

</div>

);
}