import React from 'react'
import DrawerAdmin from '../../components/Fragments/DrawerAdmin'
import { IoDocumentText } from "react-icons/io5";
import Pagination from '../../components/Elements/Pagination'
import BarChartPayment from '../../components/Elements/BarChart/Payment';
import Button from '../../components/Elements/Buttons';
import { MenuWithCheckbox } from '../../components/Elements/Select/cekbox';
import { NestedMenu } from '../../components/Elements/Select';
import { MenuItem } from "@material-tailwind/react";
import {Checkbox }from "@material-tailwind/react";
const Payment = () => {

    return (
        <>
            <DrawerAdmin>
                <div className='bg-white rounded-lg shadow-md border w-full mt-5'>
                    <div className='flex justify-between items-center mx-3'>
                        <div className='flex gap-2'>

                        <MenuWithCheckbox name={"Metod Payment"}>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-1"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-1"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        COD
                    </label>
                </MenuItem>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-2"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-2"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        Bank
                    </label>
                </MenuItem>
                    <MenuItem className="p-0">
                    <label
                        htmlFor="item-3"
                        className="flex cursor-pointer items-center gap-2 p-2"
                    >
                        <Checkbox
                            ripple={false}
                            id="item-3"
                            containerProps={{ className: "p-0" }}
                            className="hover:before:content-none"
                        />
                        Pay latter
                    </label>
                </MenuItem>
                    </MenuWithCheckbox>

                            <NestedMenu />
                        </div>
                        <button className="border-2 border-green-500 p-1 flex items-center gap-1 rounded-lg lg:p-2 m-5">
                            <IoDocumentText className="text-green-500 text-2xl" />
                            Export PDF
                        </button>
                    </div>

                    <div className="overflow-x-auto">
                        <table className="table table-xs table-pin-rows table-pin-cols">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <td>ID_SALES</td>
                                    <td>id_product</td>
                                    <td>payment method</td>
                                    <td>Date</td>
                                    <td>price</td>
                                    <td>discount</td>
                                    <td>Total</td>
                                    <td>status</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>S4L501</td>
                                    <td>P00RD1</td>
                                    <td>Bank: BCA</td>
                                    <td>23 Aug 2024</td>
                                    <td>45.000</td>
                                    <td>5.000</td>
                                    <td>40.000</td>
                                    <td>Paid</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <Pagination></Pagination>
                </div>
                <BarChartPayment />
                <Button variant=" text-white bg-blue-700 py-3 my-5 lg:max-w-xs bg-green-500 w-full ">Download File</Button>

            </DrawerAdmin>

        </>
    )
}

export default Payment