amber/src/components/ConfirmOrder/ConfirmOrder.jsx

import React, { useState } from 'react';
import {
  Box,
  Button,
  Typography,
  Link,
} from '@mui/material';
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 Grid from '@mui/material/Grid2';
import ProductSuggestion from '../../components/ProductSuggestion';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';



const ConfirmOrder = () => {

  const rows = [
    {
      img_src: 'https://via.placeholder.com/300',
      name: 'MELUR',
      description: 'Atma Sari New Raya Collection 2024',
      colour: 'black',
      quantity: 1,
      price: 335.50
    }
  ];

  const [shippingMethod, setShippingMethod] = useState('COD');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic
    console.log('Form submitted');
  };

  const FieldContainer = ({ label, children }) => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
        {label}
      </Typography>
      {children}
    </Box>
  );

  return (
    <Box

      onSubmit={handleSubmit}
      sx={{
        width: '100%',
      }}
    >
      <Box sx={{ mt: 5, mb: 3 }}>
        <Typography variant='body1' sx={{ fontWeight: "500", mb: 3 }}>THANK YOU MR. OLSON</Typography>
        <Typography variant='body2'>Thank you for your order. Your order number is 347982. <br />A confirmation email has also been sent to the email address provided.</Typography>
      </Box>

      {/* Product TableList */}
      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>ORDER CONFIRMATION</Typography>

      <TableContainer>
        <Table sx={{ minWidth: 650, backgroundColor: "#F7FBFF" }}>
          <TableHead>
            <TableRow>
              <TableCell width={150}>
                <Typography variant='body1'>Item</Typography>
              </TableCell>
              <TableCell width={150}>
                {/* This is just for table offset */}
                <Typography variant='body1'></Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Colour</Typography>
              </TableCell>
              <TableCell align='center'>

                <Typography variant='body1'>Quantity</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Unit Price</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Shipping</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Tax</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Duties</Typography>
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow
                key={row.id}
                sx={{
                  '& td, & th': { border: 0 },
                  '&:last-child td, &:last-child th': { border: 0 }
                }}
              >
                <TableCell component="th" scope="row">
                  <img
                    src={row.img_src}
                    alt={row.img_src}
                    style={{
                      width: 100,
                      height: 100,
                      aspectRatio: '4 / 4',
                      objectFit: 'cover',
                    }}
                  />
                </TableCell>
                <TableCell>
                  <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
                  <Typography variant='body2'>{row.description}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <Box sx={{
          backgroundColor: "#F7FBFF",
          borderTop: "1px solid rgba(0,0,0,0.1)",
          borderBottom: "1px solid rgba(0,0,0,0.1)",
          pl: 2,
          pr: 6,
          py: 2,
          mb: 5,
          display: "flex",
          justifyContent: "space-between"

        }}>
          <Link variant='body2' sx={{ textDecoration: "underline", color: "#000", fontWeight: "200", letterSpacing: 1 }}>ADD A GIFT CARD OR PROMOTION CODE</Link>
          <Typography variant='body2'> Total <span style={{ fontWeight: "bold" }}>{`RM ${parseFloat(250).toFixed(2)}`}</span> </Typography>
        </Box>
      </TableContainer>

      <Box>
        <Grid container>
          <Grid size={{xs:12, md:6}} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", mb:{xs:2, md:0} }}>
            <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>PAYMENT METHOD</Typography>
            <Box sx={{ display: "flex", flexDirection: {xs:"column", md:"row"} }}>
              <Typography variant='body2' sx={{ mr: 5 }}>Credit Card Number</Typography>
              <Typography variant="body2" sx={{ display: 'flex' }}>
                {[...Array(12)].map((_, index) => (
                  <FiberManualRecordIcon sx={{ fontSize: 'inherit', verticalAlign: 'middle', mr: ((index + 1) % 4 == 0) ? 2 : 0 }} />
                ))}
                <span>0046</span>
              </Typography>
            </Box>
          </Grid>
          <Grid size={{xs:12, md:6}} sx={{pl:{xs:0, md:2}, pb:2}}>
            <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>SHIPPING DETAILS</Typography>
            <Typography variant='body2' sx={{mb:3}}>Your will receive your order in 3-4 business days</Typography>
            <Button
              variant="contained"
              color="common.black"
              onClick={() => { window.location.href = "/checkout" }}
              sx={{
                backgroundColor: (theme) => theme.palette.common.black,
                color: "white",
                textTransform: "none",
                px: 8,
                py: 2,
                width: "fit-content",
                "&:hover": {
                  backgroundColor: (theme) => theme.palette.grey[900],
                },
              }}>TRACK ORDER</Button>

          </Grid>
        </Grid>
      </Box>

      <Box sx={{
        width: "100%",
        borderTop: "1px solid rgba(0,0,0,0.2)",
        borderBottom: "1px solid rgba(0,0,0,0.2)",
        py: 4,
        textAlign: "center"
      }}>
        <Typography variant='body1' sx={{ fontWeight: "500", mb: 4 }}>
          THE ESSENTIALS BASED ON YOUR LAST PURCHASE
        </Typography>

        <ProductSuggestion />

      </Box> 

      <Typography variant='body2' sx={{ mb: 4, color: "#AEAEAE", letterSpacing: 1, textAlign:"center", mt:3, mb:6 }}>
        <span style={{ color: "#000", fontWeight: "bold" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES
      </Typography>


    </Box>
  );
};

export default ConfirmOrder;