/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @next/next/no-img-element */
import { N_A } from "@/Constant";
import { dateFormat, toUpperCaseString } from "../../../../../lib/Helper";
import { ImagePath } from "@/Constant";

export default function Header({ PriceList }: any) {
    const receiverDetails = {
        name: PriceList?.received_by_customer_id_details?.id
            ? `${PriceList?.received_by_customer_id_details?.firstName || ''} ${PriceList?.received_by_customer_id_details?.lastName || ''} `
            : `${PriceList?.received_by_warehouse_id_details?.code || ''} ${PriceList?.received_by_warehouse_id_details?.name || ''}`,
        address: PriceList?.receivedByAddress || '',
        email: PriceList?.received_by_customer_id_details?.id
            ? `${PriceList?.received_by_customer_id_details?.email || ''}`
            : `${PriceList?.received_by_warehouse_id_details?.staff?.email || ''}`,
        phone: PriceList?.received_by_customer_id_details?.id
            ? `${PriceList?.received_by_customer_id_details?.phone || ''}`
            : `${PriceList?.received_by_warehouse_id_details?.staff?.phone || ''}`,
    }
    const senderDetails = {
        name: PriceList?.shipped_by_customer_id_details?.id
            ? `${PriceList?.shipped_by_customer_id_details?.firstName || ''} ${PriceList?.shipped_by_customer_id_details?.lastName || ''} `
            : `${PriceList?.shipped_by_warehouse_id_details?.code || ''} ${PriceList?.shipped_by_warehouse_id_details?.name || ''}`,
        address: PriceList?.receivedByAddress || '',
        email: PriceList?.shipped_by_customer_id_details?.id
            ? `${PriceList?.shipped_by_customer_id_details?.email || ''}`
            : `${PriceList?.shipped_by_warehouse_id_details?.staff?.email || ''}`,
        phone: PriceList?.shipped_by_customer_id_details?.id
            ? `${PriceList?.shipped_by_customer_id_details?.phone || ''}`
            : `${PriceList?.shipped_by_warehouse_id_details?.staff?.phone || ''}`,
    }
    return (
        <>
            <table border={1} align="center" cellPadding={10} style={{
                width: "100%",
                margin: "auto",
                padding: "0px",
                border: "1px solid #eee",
                fontSize: "14px",
                lineHeight: "20px",
                fontFamily: "'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif",
                color: "#555"
            }}>
                <thead>
                    <tr>
                        <th rowSpan={8} style={{ width: "15%" }}>
                            <img width="100" src={`${ImagePath}/app/logo-hat.png`} alt="Logo" />
                        </th>

                        <th colSpan={4} rowSpan={8} style={{ width: "55%", textAlign: "left", fontSize: "0.8rem" }}>
                            <span style={{ fontWeight: 600, textTransform: "uppercase" }}>Delybell Logistics CO WLL</span><br />
                            C.R.111829-2, Box : 3117 Building 134Z Road 640 Manama-306<br />
                            Bahrain<br />
                            Tel: +(973) 37172727<br />
                            Email: delivery@delybell.com<br />
                            {/* <span style={{ fontWeight: 600 }}>VAT#</span>: 220002993200002 */}
                        </th>

                        <th colSpan={7} style={{
                            textAlign: "center",
                            fontSize: "20px",
                            fontWeight: 600,
                            color: "green"
                        }}>{PriceList?.status?.name || N_A}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Shipment ID.</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{PriceList?.shipmentId || N_A}</th>
                    </tr>


                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Shipment Date</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{dateFormat(PriceList?.settlementDate)}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>ETA</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{dateFormat(PriceList?.etaDate)}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Cargo Type</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{PriceList?.cargoName || N_A}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Vessel Name</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{PriceList?.vesselName || N_A}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Shipment Number</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{PriceList?.shipmentNumber || N_A}</th>
                    </tr>
                    <tr>
                        <th colSpan={2} style={{ textAlign: "right" }}>Mode of Transport</th>
                        <th colSpan={2} style={{ textAlign: "center", fontWeight: 600 }}>{PriceList?.mode?.name || N_A}</th>
                    </tr>

                </thead>


                <tbody>
                    {PriceList?.remarks ? (
                        <tr>
                            {/* <td colSpan={1} style={{ textAlign: "center" }}>Order Details</td> */}
                            <td colSpan={12}>
                                <span style={{ fontWeight: 600 }}>Remarks: {PriceList?.remarks || N_A}</span>
                            </td>

                        </tr>
                    ) : ''}

                    <tr>
                        <td colSpan={10} style={{ padding: 0, backgroundColor: "#752F8A", textAlign: "center" }}>
                            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px", alignItems: "center", color: "#fff" }}>
                                <div style={{ width: "33%", textAlign: "left" }}></div>
                                <div style={{ width: "33%", textAlign: "center" }}>
                                    <h6 style={{ margin: 0, fontSize: "24px", fontWeight: 700, color: "#fff", }}>{toUpperCaseString("Shipment Details")}</h6>
                                </div>
                                <div style={{ width: "33%", textAlign: "right" }}></div>
                            </div>
                        </td>
                    </tr>



                    <tr>
                        <td colSpan={10} className="border-0 p-0" style={{ border: 0 }}>
                            <table className="w-100 border-0" style={{ border: 0 }}>
                                <tr>
                                    <td colSpan={5} style={{ borderLeft: 0 }}>
                                        {/* <img src="https://demo.syntrio.in/designs/delybell-admin/img/app/barcode.png" style={{ height: "90px" }} /> */}
                                        <p className="mb-0" style={{ fontWeight: 700 }}>Shipped By:</p>
                                        <h6 style={{ fontWeight: 700, color: "#031b4e" }}>{senderDetails?.name}</h6>
                                        <p className="mb-0">
                                            {senderDetails?.address}
                                            {/* BLOCK {PriceList?.customer_details?.blockDetails?.code} {PriceList?.customer_details?.blockDetails?.name}
                                ROAD {PriceList?.customer_details?.roadDetails?.code} {PriceList?.customer_details?.roadDetails?.name},
                                BUILDING {PriceList?.customer_details?.buildingDetails?.code} {PriceList?.customer_details?.buildingDetails?.name}, */}
                                            <br />
                                            {/*
                                {PriceList?.customer_details?.cityDetails?.name ? (<>`${PriceList?.customer_details?.cityDetails?.name}`<br /></>) : ''} */}
                                            TEL: {senderDetails?.phone}<br />
                                            Email: {senderDetails?.email}<br />
                                            {/* A/c No.: {N_A}<br /> */}
                                            {/* Shipment No.: <span style={{ fontWeight: 600 }}>{PriceList?.settlementId}</span> {dateFormat(PriceList?.settlementDate)} */}
                                        </p>
                                    </td>
                                    <td colSpan={5} >
                                        {/* <img src="https://demo.syntrio.in/designs/delybell-admin/img/app/barcode.png" style={{ height: "90px" }} /> */}
                                        <p className="mb-0" style={{ fontWeight: 700 }}>Received By:</p>
                                        <h6 style={{ fontWeight: 700, color: "#031b4e" }}>{receiverDetails?.name}</h6>
                                        <p className="mb-0">
                                            {receiverDetails?.address}
                                            {/* BLOCK {PriceList?.customer_details?.blockDetails?.code} {PriceList?.customer_details?.blockDetails?.name}
                                ROAD {PriceList?.customer_details?.roadDetails?.code} {PriceList?.customer_details?.roadDetails?.name},
                                BUILDING {PriceList?.customer_details?.buildingDetails?.code} {PriceList?.customer_details?.buildingDetails?.name}, */}
                                            <br />
                                            {/*
                                {PriceList?.customer_details?.cityDetails?.name ? (<>`${PriceList?.customer_details?.cityDetails?.name}`<br /></>) : ''} */}
                                            TEL: {receiverDetails?.phone}<br />
                                            Email: {receiverDetails?.email}<br />
                                            {/* A/c No.: {N_A}<br /> */}
                                            {/* Shipment No.: <span style={{ fontWeight: 600 }}>{PriceList?.settlementId}</span> {dateFormat(PriceList?.settlementDate)} */}
                                        </p>
                                    </td>
                                    {/* <td colSpan={5} style={{ verticalAlign: "top", width: "50%" }}>
                                           <p style={{ fontWeight: 700 }}>Shipper:</p>
                                           <h6 style={{ fontWeight: 700, color: "#031b4e" }}>INTERCITY EXPRESS CARGO CO. WLL</h6>
                                           <p>
                                               ROAD 114, BLOCK 101, HIDD, KINGDOM OF BAHRAIN.<br />
                                               Call: 3717 2727, E-mail: accounts@delybell.com
                                           </p>
                                       </td> */}
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    )
}