import { Separator } from "@/components/ui/separator";
import { LstCard } from "../../extendedUi/LstCard";
import ForecastImport from "./ForecastImport";
import OrderImport from "./OrderImport";
import StandardForecastTemplate from "./StandardForecastTemplate";
import StandardOrderTemplate from "./StandardOrderTemplate";

export default function DmPage() {
	return (
		<div className="flex flex-row gap-2">
			<LstCard className="w-1/2">
				<div className="w-96">
					<h4 className="text-center underline text-2xl">
						Simple instructions for creating/updating orders
					</h4>
					<div className="flex flex-row gap-3 m-1">
						<OrderImport fileType={"standard"} name={"Standard Order Import"} />
						<StandardOrderTemplate />
					</div>
					<Separator />
				</div>

				<ul className="list-disc mr-2">
					<li>
						Download the standard template if you have not yet done so, Above
						click Standard Order Template.
					</li>
					<li>Add in the orders like you see in the example below.</li>
					<li>
						When updating orders you are required to have the
						customerOrderNumber, customerLineNumber, and customerReleaseNumber.
						Quatity and dates can change.
					</li>
					<li>
						Once you have all the orders entered, click Standard Order Import
					</li>
				</ul>

				<Separator className="my-4" />
				<div className="m-5">
					<h4 className="text-center underline text-2xl">
						Some notes to consider
					</h4>

					<ul className="list-disc mr-2">
						<li>
							No longer need to add in the invoice id, we take the default one.
						</li>
						<li>
							You can have as many customers you want in the file and in any
							order.
						</li>
						<li>
							Orders created Manually, can not be updated with this process.
						</li>
						<li>
							If you desire you can send up to 1000 orders at one time... or
							more....
						</li>
						<li>
							Customer mappings can be added, this means that you can upload
							your customer file and it will parse onces mapped, you need to
							request this.
						</li>
						<li>
							Custom imports will be at the top right under custom, here you
							will just upload the customer file once mapped.
						</li>
					</ul>
				</div>
				<Separator className="my-4" />
				<p className="text-center underline text-2xl">Example order</p>
				<div className="flex justify-center">
					<img
						src="/lst/app/imgs/ordersInExample.png"
						alt="orders in example"
						className="w-[680px] h-[280px]"
					/>
				</div>
			</LstCard>
			<LstCard className="w-1/2">
				<div className="w-96">
					<h4 className="text-center underline text-2xl">
						Simple instructions for creating forecast
					</h4>
					<div className="flex flex-row gap-3 m-1">
						<ForecastImport
							fileType={"standard"}
							name={"Standard Forecast Import"}
						/>
						<StandardForecastTemplate />
						<Separator className="my-4" />
					</div>
				</div>
				<div className="m-5">
					<ul className="list-disc mr-2">
						<li>Download the template if you have not yet done so.</li>
						<li>Add in the forecast like you see in the example below.</li>

						<li>
							Once you have all the forecast enters click the upload button on
							the top right
						</li>
					</ul>
				</div>
				<Separator className="my-4" />
				<div className="m-5">
					<h4 className="text-center underline text-2xl">
						Some notes to consider.
					</h4>
					<ul className="list-disc mr-2">
						<li>You can only use one customer at a time.</li>

						<li>If you desire you can send up to 1000 orders at one time...</li>
						<li>
							The customer MUST be set as default address in order for the
							system to validate the av.
						</li>
					</ul>
				</div>
				<Separator className="my-4" />
				<p className="text-center underline text-2xl">Example forecast</p>
				<div className="flex justify-center">
					<img
						src="/lst/app/imgs/exampleforecast.png"
						alt="orders in example"
						className="w-[480px] h-[280px]"
					/>
				</div>
			</LstCard>
		</div>
	);
}
