import DrawerAdmin from "../../components/Fragments/DrawerAdmin"
import { IoIosArrowBack } from "react-icons/io";
import { IoIosPerson } from "react-icons/io";
import { MdEmail } from "react-icons/md";
import { BsFillTelephoneFill } from "react-icons/bs";
import { MdOutlinePayment } from "react-icons/md";
import { FaMoneyBill1Wave } from "react-icons/fa6";

const DetailOrder = () => {
    return (
        <>
            <DrawerAdmin>
                <div className="bg-white w-full  shadow-lg border mt-5">
                    <div className="w-full border flex justify-between p-4">
                        <div className="flex items-center gap-3">
                            <IoIosArrowBack className="text-2xl"/>
                            <p className="text-lg">Back</p>
                        </div>
                        <p className="text-md text-gray-700 font-semibold">ORDER NO.250722AD4DCUSP</p>
                    </div>
                    <div className="grid m-5">

                        <div className="flex justify-between ">
                            <div className="flex items-center gap-2 w-full">
                                <img src="/image/produk.png" alt="" className="w-20 mr-10 " />
                                <div className="grid w-full">
                                    <div className="flex justify-between">

                                        <p className="text-lg font-bold">Savva Teh Tarik Caramel Flavour</p>
                                        <p className="ml-auto text-lg font-bold">1X</p>
                                    </div>
                                    <p className="text-sm text-gray-400">1 Box Savva Teh Tarik Caramel lorem Flavour(20g x 30 sachets)</p>
                                    <div className="lg:flex lg:justify-between mt-5 grid lg:gap-0 gap-3">
                                        <p className="text-lg text-[#AFA0D7] font-bold">$15.00 USD</p>
                                        <button className="flex items-center py-2 px-5  border-2 border-[#0C359E] rounded-xl gap-3 text-lg text-[#0C359E]">
                                        <FaMoneyBill1Wave className="text-2xl text-[#0C359E]"/>
                                            Proof Of Bill
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex gap-2 mt-3 mb-3">
                            <p>Orders Made :    </p>
                            <p className="text-md font-semibold">27 August 2024</p>
                        </div>
                        <hr />
                        <div className="grid gap-5 mt-4">
                            <p className="text-[#AFA0D7] text-xl font-semibold">Customers Details</p>
                            <div className="flex gap-5">
                                <IoIosPerson />
                                <p>Rachel Derek</p>
                            </div>
                            <div className="flex gap-5">
                                <MdEmail />
                                <p>RachelDerek14@gmail.com</p>
                            </div>
                            <div className="flex gap-5">
                                <BsFillTelephoneFill />
                                <p>+60 857 225 345 7110</p>
                            </div>
                            <div className="border flex lg:p-5 p-3 lg:max-w-lg w-full shadow-lg rounded-xl">
                                <div className="flex  items-center gap-5">
                                <MdOutlinePayment className="text-3xl"/>
                                <p className="text-lg">Payment Methods :
                                </p>
                                    <img src="/image/dana.png" alt="" className="lg:w-40 w-28 ml-7"/>
                                </div>
                               
                         
                               
                            </div>
                        </div>
                    </div>
                </div>

                <div className="w-full bg-white shadow-lg border p-5 grid gap-4 mt-5">

                    <p className="text-black font-bold text-xl">Payment Summary </p>
                    <div className="flex justify-between items-center">
                        <p className="text-black text-md">Subtotal (1 Items)</p>
                        <p className="text-black font-semibold text-md">$15.00 USD</p>
                    </div>
                    <div className="flex justify-between items-center">
                        <p className="text-black text-md">Delivery</p>
                        <p className="text-black font-semibold text-md">$20.00 USD</p>
                    </div>
                    <div className="flex justify-between items-center">
                        <p className="text-black text-md">Shipping Discount Subtotal</p>
                        <p className="text-black font-semibold text-md">$15.00 USD</p>
                    </div>
                    <div className="flex justify-between items-center">
                        <p className="text-black text-md">Voucher Used</p>
                        <p className="text-black font-semibold text-md">$0 USD</p>
                    </div>
                    <div className="flex justify-between items-center">
                        <p className="text-black text-md font-semibold">Voucher Used</p>
                        <p className="text-[#AFA0D7] font-semibold text-md">$15.00 USD</p>
                    </div>
                </div>
            </DrawerAdmin>
        </>
    )
}

export default DetailOrder