import {LstCard} from "@/components/extendedUI/LstCard";
import {CardFooter, CardHeader} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Label} from "@radix-ui/react-dropdown-menu";
import {createFileRoute} from "@tanstack/react-router";

export const Route = createFileRoute("/_eom/article/$av")({
    component: RouteComponent,
    loader: () => {
        return [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}];
    },
});

function RouteComponent() {
    const {av} = Route.useParams();
    const loaded = Route.useLoaderData();

    console.log(loaded, av);
    return (
        <div className="w-full m-2">
            <form className="w-1/2">
                <div>
                    <h1>AV - Description</h1>
                </div>
                <hr className="w-48"></hr>
                <LstCard className="m-2">
                    <CardHeader className="place-content-center">
                        <h3>Inventory Data</h3>
                    </CardHeader>
                    <div className="flex flex-row">
                        <div className="w-96 m-2">
                            <Label>Starting Inv</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>At The Line</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Inhouse endinging</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>In transit</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Comments</Label>
                            <Input></Input>
                        </div>
                    </div>
                    <CardFooter>
                        <div className="flex justify-end">
                            <Label>Total Inv</Label>
                        </div>
                    </CardFooter>
                </LstCard>
                <LstCard className="m-2">
                    <CardHeader className="place-content-center">
                        <h3>Purchasing</h3>
                    </CardHeader>
                    <div className="flex flex-row">
                        <div className="w-96 m-2">
                            <Label>Purchased</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Recived in GP</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Varation</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Comments</Label>
                            <Input></Input>
                        </div>
                    </div>
                </LstCard>
                <LstCard className="m-2">
                    <CardHeader className="place-content-center">
                        <h3>Transfers</h3>
                    </CardHeader>
                    <div className="flex flex-row">
                        <div className="w-96 m-2">
                            <Label>Transfered in</Label>
                            <Input></Input>
                        </div>
                        <div className="w-96 m-2">
                            <Label>Transfered out</Label>
                            <Input></Input>
                        </div>

                        <div className="w-96 m-2">
                            <Label>Comments</Label>
                            <Input></Input>
                        </div>
                    </div>
                </LstCard>
                <LstCard className="m-2">
                    <CardHeader className="place-content-center">
                        <h3>Calculations</h3>
                    </CardHeader>
                    <div className="flex flex-row">
                        <div className="w-96 m-2 flex flex-col">
                            <Label>Actual Consumption: 1452541</Label>
                            <Label>Production Consumption: 146854</Label>
                        </div>

                        <div className="w-96 m-2 flex flex-col">
                            <Label>Difference: -2541</Label>
                            <Label>Waste: -5%</Label>
                        </div>

                        <div className="w-96 m-2 flex flex-col">
                            <Label>Price/Kg: $2.20</Label>
                            <Label>$Loss/$Gain: $35.00</Label>
                        </div>
                    </div>
                </LstCard>
            </form>
        </div>
    );
}
