import React from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useEmployee } from "../../hooks/useEmployees";
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
import { useForm } from "react-hook-form";
import Label from "../../components/common/Label";
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";

const AdvancePaymentPage = () => {
  const { control, watch } = useForm({
    defaultValues: {
      employeeId: "",
    },
  });

  const selectedEmployeeId = watch("employeeId");
  return (
    <div className="container-fluid">
      <Breadcrumb
        data={[
          { label: "Home", link: "/" },
          { label: "Finance", link: "/advance-payment" },
          { label: "Advance Payment" },
        ]}
      />
      <div className="card px-2 py-2 page-min-h">
        <div className="row">
          <div className="col-12 ">
           <div className="d-block w-max w-25 text-start" >
            <Label>Search Employee</Label>
             <EmployeeSearchInput
              control={control}
              name="employeeId"
              projectId={null}
              forAll={true}
            />
           </div>
          </div>
        </div>
        <AdvancePaymentList employeeId={selectedEmployeeId}/>
      </div>
    </div>
  );
};

export default AdvancePaymentPage;