Untitled

import React from 'react';
import {Grid, Typography} from "@mui/material";
import {Colors} from "../../assets/css/ColorConstants";
import LogoImage from "../../assets/img/logo/logo.png";
import {Row} from "reactstrap";
import "./reviewBooking.css"
const Receipt = ({data} :any) => {

    const isMobile = window.innerWidth < 576;

    return (
        <div className="hotel-voucher">
            <div className="voucher-content">
                <div className="voucher-section">
                    {data.id !== undefined && data.id !== null && data.id !== '' ?<p><strong>Travelom Booking ID:</strong> {data?.id}</p>:null}
                    <p><strong>Booking Date:</strong> {data.date}</p>
                    <p><strong>Primary Guest:</strong> {data.fullName}</p>
                    {data.confirmationNumber !== undefined && data.confirmationNumber !== null && data.confirmationNumber !== '' ?<p><strong>Confirmation Number:</strong> {data?.confirmationNumber}</p>:null}
                </div>
                <div className="voucher-section">
                    <div style={{display: 'flex', justifyContent: 'space-evenly'}}>
                        <Typography
                            fontSize={35}
                            style={{
                                display: "flex",
                                alignItems: "center",
                                color: Colors.button.primary,
                                width: "15%",
                                cursor: 'pointer'
                            }}
                        >
                            <img
                                className="navigationBarHotelIcon"
                                src={LogoImage}
                            />
                            <span>Travelom</span>
                        </Typography>
                    </div>

                </div>
                <div className="voucher-section">
                    <h5>Hotel Details</h5>
                    <p>{data.hotelName}</p>
                    {/*<p>{data.hotelAddress}</p>*/}
                    {/*<p>{data.hotelPhone}</p>*/}
                </div>
                {!isMobile ? (
                    <table className="voucher-table">
                        <thead>
                        <tr>
                            <th>Room</th>
                            <th>Check In</th>
                            <th>Check Out</th>
                            <th>Travelers</th>
                            <th>Daily Rate</th>
                            <th>Extra Charges</th>
                            <th>Total</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{data.items[0].room}</td>
                            <td>{data.checkInDate}</td>
                            <td>{data.checkOutDate}</td>
                            <td>{data.items[0].totalMember}</td>
                            <td>{data.items[0].price}</td>
                            <td>{data.items[0].tax}</td>
                            <td>{data.items[0].priceInclusive}</td>
                        </tr>
                        </tbody>
                    </table>
                ) :<Grid container spacing={2}>
                    {/* First Column */}
                    <Grid item xs={12} sm={6}>
                        <table className="voucher-table">
                            <tbody>
                            <tr>
                                <td>Room:</td>
                                <td>{data.items[0].room}</td>
                            </tr>
                            <tr>
                                <td>Check In:</td>
                                <td>{data.checkInDate}</td>
                            </tr>
                            <tr>
                                <td>Check Out:</td>
                                <td>{data.checkOutDate}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Grid>

                    {/* Second Column */}
                    <Grid item xs={12} sm={6}>
                        <table className="voucher-table">
                            <tbody>
                            <tr>
                                <td>Travelers:</td>
                                <td>{data.items[0].totalMember}</td>
                            </tr>
                            <tr>
                                <td>Daily Rate:</td>
                                <td>{data.items[0].price}</td>
                            </tr>
                            <tr>
                                <td>Extra Charges:</td>
                                <td>{data.items[0].tax}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Grid>

                    {/* Total */}
                    <Grid item xs={12}>
                        <table className="voucher-table">
                            <tbody>
                            <tr>
                                <td>Total:</td>
                                <td>{data.items[0].priceInclusive}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Grid>
                </Grid>

                  }




                <Row style={{width: '100%', display: 'flex', justifyContent: 'space-between', padding: 20}}>
                    <div>
                        <h5>Payment Details</h5>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"Total amount: "}
                            </p>
                            <p>{data.items[0].price}</p>

                        </div>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"Taxes and Fees: "}
                            </p>
                            <p>{data.items[0].tax}</p>

                        </div>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"Grand Total Amount:  "}
                            </p>
                            <p>{data.items[0].priceInclusive}</p>

                        </div>
                        {/*<p>Total amount: {data.items[0].price} </p>*/}
                        {/*<p>Taxes and fees: {data.items[0].tax}</p>*/}
                        {/*<p>Grand Total amount: {data.items[0].priceInclusive}</p>*/}


                    </div>
                    <div style={{textAlign: 'end'}}>
                        <h5>Traveler Information</h5>
                        <div style={{
                            justifyContent: 'space-between',
                            display: 'flex',
                            flexDirection: 'row',
                            padding: 0
                        }}>
                            <p style={{color: 'black'}}>
                                {"Name: "}
                            </p>
                            <p>{data.fullName}</p>
                        </div>
                        <div style={{
                            justifyContent: 'space-between',
                            display: 'flex',
                            flexDirection: 'row',
                            padding: 0
                        }}>
                            <p style={{color: 'black'}}>
                                {"Address: "}
                            </p>
                            <p>{data.address}</p>
                        </div>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"Zip Code: "}
                            </p>
                            <p>{data.zipCode}</p>
                        </div>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"City: "}
                            </p>
                            <p>{data.city}</p>
                        </div>
                        <div style={{justifyContent: 'space-between', display: 'flex', flexDirection: 'row'}}>
                            <p style={{color: 'black'}}>
                                {"Country: "}
                            </p>
                            <p>{data.country}</p>
                        </div>
                    </div>
                </Row>
            </div>
        </div>
    );
};

export default Receipt;