import React from "react";
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
import DatePicker from "../common/DatePicker";
import Label from "../common/Label";

const PurchaseTransportDetails = () => {
  const {
    register,control,
    formState: { errors },
  } = useAppFormContext();

  return (
    <div className="row g-3 text-start">
      {/* Invoice Number */}
      <div className="col-12 col-md-6">
        <Label htmlFor="invoiceNumber" >
          Invoice Number
        </Label>

        <input
          id="invoiceNumber"
          type="text"
          className="form-control form-control-xs"
          {...register("invoiceNumber")}
        />

        {errors?.invoiceNumber && (
          <div className="small text-danger mt-1">
            {errors.invoiceNumber.message}
          </div>
        )}
      </div>

      {/* Invoice Date */}
      <div className="col-12 col-md-6">
        <Label htmlFor="invoiceDate">Invoice Date</Label>

     
          <DatePicker control={control} name="invoiceDate" className="w-full" size="xs"/>

        {errors?.invoiceDate && (
          <div className="small text-danger mt-1">
            {errors.invoiceDate.message}
          </div>
        )}
      </div>

      {/* E-Way Bill Number */}
      <div className="col-12 col-md-6">
        <Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>

        <input
          id="eWayBillNumber"
          type="text"
          className="form-control form-control-xs"
          {...register("eWayBillNumber")}
        />

        {errors?.eWayBillNumber && (
          <div className="small text-danger mt-1">
            {errors.eWayBillNumber.message}
          </div>
        )}
      </div>

      {/* E-Way Bill Date */}
      <div className="col-12 col-md-6">
        <Label htmlFor="eWayBillDate">E-Way Bill Date</Label>

    
             <DatePicker control={control} name="eWayBillDate" className="w-full"/>

        {errors?.eWayBillDate && (
          <div className="small text-danger mt-1">
            {errors.eWayBillDate.message}
          </div>
        )}
      </div>

      {/* Invoice Reference Number */}
      <div className="col-12 col-md-6">
        <Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>

        <input
          id="invoiceReferenceNumber"
          type="text"
          className="form-control form-control-xs"
          {...register("invoiceReferenceNumber")}
        />

        {errors?.invoiceReferenceNumber && (
          <div className="small text-danger mt-1">
            {errors.invoiceReferenceNumber.message}
          </div>
        )}
      </div>

      {/* Acknowledgment Number */}
      <div className="col-12 col-md-6">
        <Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>

        <input
          id="acknowledgmentNumber"
          type="text"
          className="form-control form-control-xs"
          {...register("acknowledgmentNumber")}
        />

        {errors?.acknowledgmentNumber && (
          <div className="small text-danger mt-1">
            {errors.acknowledgmentNumber.message}
          </div>
        )}
      </div>

      <div className="col-12 col-md-6 mb-2">
        <Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>

        <DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>

        {errors?.acknowledgmentDate && (
          <div className="small text-danger mt-1">
            {errors.acknowledgmentDate.message}
          </div>
        )}
      </div>
    </div>
  );
};

export default PurchaseTransportDetails;