import React from "react";
import "../../../css/print.css";
import PrintHeader from "@/Components/PrintHeader";

function RequsitionPrient({ list, categorys, units, product, type }) {
    return (
        <>
            <div className="prient-table">
                <PrintHeader printType={type} />
                <div>
                    <div className="float-left w-50 text-12px">
                        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <tbody>
                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                    <th scope="col" className="px-6 py-3">
                                        Shop
                                    </th>
                                    <th
                                        scope="row"
                                        className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                                    >
                                        : {list.shop ? list.shop.name : "-"}
                                    </th>
                                </tr>
                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                    <th scope="col" className="px-6 py-3">
                                        Address
                                    </th>
                                    <th
                                        scope="row"
                                        className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                                    >
                                        : {list.shop ? list.shop.location : "-"}
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div className="float-right w-50">
                        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <tbody>
                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                    <th scope="col" className="px-6 py-3">
                                        RQ No
                                    </th>
                                    <th
                                        scope="row"
                                        className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                                    >
                                        : {list && list.invoice_no}
                                    </th>
                                </tr>
                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                    <th scope="col" className="px-6 py-3">
                                        RQ-Date
                                    </th>
                                    <th
                                        scope="row"
                                        className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                                    >
                                        :{" "}
                                        {list &&
                                            new Date(
                                                list.requisition_date
                                            ).toLocaleDateString("en-US")}
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div className="relative  w-full prient-table mt-[250px] ">
                    <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400  ">
                        <thead className="text-xs w-screen text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" className="px-6 py-3">
                                    Product name
                                </th>

                                <th scope="col" className="px-6 py-3">
                                    Category
                                </th>

                                <th scope="col" className="px-6 py-3">
                                    Qty
                                </th>
                                <th scope="col" className="px-6 py-3">
                                    Units
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {list.length !== 0 &&
                                list.requsition_detailes.map((data) => {
                                    return (
                                        <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                            <th
                                                scope="row"
                                                className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                                            >
                                                {(() => {
                                                    let products = product.find(
                                                        (value) => {
                                                            return (
                                                                value.id ==
                                                                data.product_id
                                                            );
                                                        }
                                                    );
                                                    return products
                                                        ? products.name
                                                        : "-";
                                                })()}
                                            </th>
                                            <td className="px-6 py-4">
                                                {(() => {
                                                    var category =
                                                        categorys.find(
                                                            (value) => {
                                                                return (
                                                                    value.id ==
                                                                    data.category_id
                                                                );
                                                            }
                                                        );
                                                    return category
                                                        ? category.name
                                                        : "-";
                                                })()}
                                            </td>

                                            <td className="px-6 py-4">
                                                {data.quantity}{" "}
                                            </td>
                                            <td className="px-6 py-4">
                                                {(() => {
                                                    var unit = units.find(
                                                        (value) => {
                                                            return (
                                                                value.id ==
                                                                data.unit_id
                                                            );
                                                        }
                                                    );
                                                    return unit
                                                        ? unit.name
                                                        : "-";
                                                })()}
                                            </td>
                                        </tr>
                                    );
                                })}
                        </tbody>
                        <tfoot>
                            <tr className="font-semibold text-gray-900 dark:text-white">
                                <th
                                    scope="row"
                                    className="px-6 py-3  text-base text-end"
                                    colSpan={3}
                                ></th>
                                <td className="px-6 col-span-4 py-3"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </>
    );
}

export default RequsitionPrient;
