import React, { forwardRef } from "react";
import { PropTypes } from "prop-types";
import logo from "../../../../assets/images/logo.png";
// import logoFooter from "../../../../assets/images/reportFooter.png";
import "./styles.css";
import checkIcon from "../../../../assets/images/check-icon-small.png";
import waitingIcon from "../../../../assets/images/waiting-icon.png";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
import moment from "moment";

const styles = {
  page: {
    width: "214mm",
    height: "302mm",
    display: "flex",
    margin: "0 auto",
    flexDirection: "column",
    position: "relative",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  pageData: {
    position: "relative",
    display: "flex",
    direction: "rtl",
    flexDirection: "column",
  },
  tableInNewPage: {
    pageBreakAfter: "always",
    paddingLeft: "40px",
    paddingRight: "40px",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  container: {
    width: "95%",
    alignSelf: "center",
    pageBreakInside: "avoid",
  },
  p: {
    fontFamily: "titr",
    fontWeight: "bold",
    pAlign: "justify",
  },
  span: {
    fontFamily: "titr",
    fontWeight: "bold",
    pAlign: "justify",
  },
  invoiceTable: {
    width: "195mm",
    borderCollapse: "collapse",
    alignSelf: "center",
  },
  tableCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
  },
  tableCellAlert: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
    color: "red",
  },
  tableCellMobile: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
  },
  tableInnerCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 7,
    whiteSpace: "nowrap",
  },
  tableHeader: {
    pageBreakAfter: "auto",
  },
  headerRow: {
    backgroundColor: "rgba(32, 95, 243, 0.8)",
    color: "white",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },
  logo: {
    marginTop: "15px",
    width: "100px",
    height: "auto",
    zIndex: 10,
  },
  logoFooter: {
    width: "100px",
    height: "auto",
  },
  contentContainer: {
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
    marginRight: "20px",
    marginLeft: "20px",
  },
  contentInLine: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  mainTitle: {
    fontFamily: "titr",
    fontSize: 11,
    pAlign: "center",
    fontWeight: "bolder",
  },
  signature: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    marginLeft: "20px",
  },
  watermarkContainer: {
    position: "fixed",
    top: 350,
    left: 30,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    opacity: 0.15,
    zIndex: -1,
    userSelect: "none",
  },
  watermarkp: {
    fontFamily: "nazanin",
    fontSize: 100,
    fontWeight: "bolder",
    color: "grey",
    transform: "rotate(-45deg)",
    left: "50%",
    userSelect: "none",
  },
  title: {
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  titleTopic: {
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  firsttitle: {
    pAlign: "center",
    color: "#00008b",
    fontWeight: "800",
  },
  options: {
    marginLeft: "50px",
    padding: "10px",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
  },
  divider: {
    alignSelf: "center",
    width: "120mm",
    height: "1px",
    backgroundColor: "black",
    margin: "0em",
  },
  pTitleContainer: {
    pAlign: "center",
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
    fontFamily: "nazanin",
    fontSize: "20px",
    fontWeight: "bolder",
  },
  tableHeaderCell: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
  },
  footer: {
    left: 0,
    bottom: 0,
    width: "100%",
    position: "absolute",
  },
  footerContainer: {
    alignItems: "center",
    display: "flex",
  },
  circle: {
    borderRadius: "50%",
    width: "20px",
    height: "20px",
    padding: "10px",
    background: "#ecf0f1",
    border: " 1px solid #000",
    color: "#000",
    textAlign: "center",
    marginRight: "130px",
  },
  tableRowEven: {
    backgroundColor: "rgba(207, 213, 234, 0.5)",
  },
  levelDetails: {
    color: "red",
    fontSize: 10,
  },
};

const ProvinceGetCaseFile = forwardRef((props, ref) => {
  const { item } = props;
  //   const { targetperson } = props;
  //   const { reportType } = props;
  const getSellType = (item) => {
    let sellType = "";
    if (item?.directBuying) {
      sellType = "خرید مستقیم";
    } else if (item?.union) {
      sellType = "خرید خارج از استان";
    } else {
      sellType = "اتحادیه";
    }
    return sellType;
  };

  // const getItemState = (item) => {
  //   let sellType = "";
  //   if (item?.directBuying) {
  //     sellType = "خرید مستقیم";
  //   } else if (item?.union) {
  //     sellType = "خرید خارج از استان";
  //   } else {
  //     sellType = "اتحادیه";
  //   }
  //   return sellType;
  // };

  const HeaderPDF = () => {
    return (
      <>
        <div style={styles.contentContainer}>
          <div style={styles.contentInLine}></div>
          <div style={{ ...styles.contentInLine, marginRight: "100px" }}>
            <span
              style={{
                ...styles.firsttitle,
                fontSize: 14,
                zIndex: 1,
              }}
            >
              مشخصات پرونده با کد سفارش {item?.orderCode}
            </span>
            <span style={{ fontSize: "15px", color: "#485460" }}>
              فروش از طریق {getSellType(item)}
            </span>
            <span
              style={{
                fontSize: "10px",
                color: "red",
              }}
            >
              این گزارش در تاریخ {formatJustDate(moment())} ساعت{" "}
              {formatJustTime(moment())} صادر شده است.
            </span>
            <hr style={styles.divider} />
            <span
              style={{
                fontSize: "14px",
                color: "#2d3436",
              }}
            >
              اطلاعات پرونده کشتار تاریخ {formatJustDate(item?.sendDate)}{" "}
              مرغداری {item?.poultry?.unitName}
            </span>
          </div>

          <div style={styles.contentInLine}>
            <img alt="logo" src={logo} style={styles.logo} />
          </div>
        </div>
      </>
    );
  };

  //   let pageNumber = 0;
  //   const FooterPDF = () => {
  //     pageNumber++;
  //     return (
  //       <>
  //         <div style={styles.footer}>
  //           <div style={styles.divider} />
  //           <div style={styles.footerContainer}>
  //             <img alt="logo" src={logoFooter} style={styles.logoFooter} />

  //             <p style={{ fontSize: 15, padding: "10px", marginRight: "10px" }}>
  //               گزارش فرآیند کامل کشتار و پخش مرغ گوشتی سامانه رصدیار
  //               www.rasadyaar.ir
  //             </p>
  //             <div style={styles.circle}>{pageNumber}</div>
  //           </div>
  //         </div>
  //       </>
  //     );
  //   };

  const Table1 = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>کد سفارش</th>
            <th style={styles.tableHeaderCell}>مرغدار</th>
            <th style={styles.tableHeaderCell}>تلفن</th>
            <th style={styles.tableHeaderCell}>تاریخ درخواست کشتار</th>
            <th style={styles.tableHeaderCell}>آدرس</th>
            <th style={styles.tableHeaderCell}>تاریخ جوجه ریزی</th>
            <th style={styles.tableHeaderCell}>تعداد جوجه ریزی</th>
            <th style={styles.tableHeaderCell}>مانده در سالن</th>
            <th style={styles.tableHeaderCell}>سفارش کشتار (قطعه)</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>وزن تقریبی سفارش</th>
            <th style={styles.tableHeaderCell}>قیمت پیشنهادی</th>
            <th style={styles.tableHeaderCell}>نوع فروش</th>
            <th style={styles.tableHeaderCell}>فرآیند مالی</th>
            <th style={styles.tableHeaderCell}>دامپزشک فارم</th>
          </tr>
        </thead>
        <tbody>
          <tr style={styles.tableRow}>
            <td style={styles.tableCell}>{item?.orderCode}</td>
            <td style={styles.tableCell}>{item?.poultry?.unitName}</td>
            <td style={styles.tableCell}>{item?.poultry?.user?.mobile}</td>
            <td style={styles.tableCell}>{formatJustDate(item?.sendDate)}</td>
            <td style={styles.tableCell}>{item?.poultry?.address?.address}</td>
            <td style={styles.tableCell}>{formatJustDate(item?.sendDate)}</td>
            <td style={styles.tableCell}>{item?.amount?.toLocaleString()}</td>
            <td style={styles.tableCell}>
              {item?.hatching?.leftOver?.toLocaleString()}
            </td>
            <td style={styles.tableCell}>{item?.quantity?.toLocaleString()}</td>
            <td style={styles.tableCell}>{item?.IndexWeight}</td>
            <td style={styles.tableCell}>{item?.hatching?.weight}</td>
            <td style={styles.tableCell}>{item?.amount?.toLocaleString()}</td>
            <td style={styles.tableCell}>
              {item?.freeSaleInProvince === false ? "دولتی" : "آزاد"}
            </td>
            <td style={styles.tableCell}>
              {item?.financialOperation === "outside-system"
                ? "خارج از سامانه"
                : "از طریق سامانه"}
            </td>
            <td style={styles.tableCell}>
              {item?.hatching?.vetFarmInfo
                ? `${item?.vetFarm?.vetFarmFullName} (${item?.vetFarm?.vetFarmMobile})`
                : "ندارد"}
            </td>
          </tr>
        </tbody>
      </table>
    );
  };

  const TableCityLevel = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>اپراتور</th>
            <th style={styles.tableHeaderCell}>سمت</th>
            <th style={styles.tableHeaderCell}>تلفن</th>
            <th style={styles.tableHeaderCell}>تعاونی مرغدار</th>
            <th style={styles.tableHeaderCell}>آدرس</th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
          </tr>
        </thead>
        {item?.cityState?.date ? (
          <tbody>
            <tr style={styles.tableRow}>
              <td style={styles.tableCell}>
                {item?.cityState?.cityOperatorFullname}
              </td>
              <td style={styles.tableCell}>سمت</td>
              <td style={styles.tableCell}>
                {item?.cityState?.cityOperatorMobile}
              </td>
              <td style={styles.tableCell}>{item?.cityState?.poultry}</td>
              <td style={styles.tableCell}>
                {item?.cityState?.province + " - " + item?.cityState?.city}
              </td>
              <td style={styles.tableCell}>
                {item?.cityState?.state === "accept" ? "تایید شده" : "رد شده"}
              </td>
            </tr>
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={6}>
            هنوز شهرستان پرونده را تائید نکرده است
          </td>
        )}
      </table>
    );
  };

  const TableProvinceLevel = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>اپراتور</th>
            <th style={styles.tableHeaderCell}>سمت</th>
            <th style={styles.tableHeaderCell}>تلفن</th>
            <th style={styles.tableHeaderCell}>تعاونی مرغدار</th>
            <th style={styles.tableHeaderCell}>آدرس</th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
          </tr>
        </thead>
        {item?.provinceState?.date ? (
          <tbody>
            <tr style={styles.tableRow}>
              <td style={styles.tableCell}>
                {item?.provinceState?.provinceOperatorFullname}
              </td>
              <td style={styles.tableCell}>اپراتور استان</td>
              <td style={styles.tableCell}>
                {item?.provinceState?.cityOperatorMobile}
              </td>
              <td style={styles.tableCell}>{item?.provinceState?.poultry}</td>
              <td style={styles.tableCell}>
                {item?.provinceState?.province +
                  " - " +
                  item?.provinceState?.city}
              </td>
              <td style={styles.tableCell}>
                {item?.provinceState?.state === "accept"
                  ? "تایید شده"
                  : "رد شده"}
              </td>
            </tr>
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={6}>
            هنوز استان پرونده را تائید نکرده است
          </td>
        )}
      </table>
    );
  };

  const TableSalughterAllocationLevel = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>ماهیت خریدار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>نوع تخصیص</th>
            <th style={styles.tableHeaderCell}>تعداد تخصیصی</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>وزن تخصیصی</th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
          </tr>
        </thead>
        {item?.provinceKillRequests?.provinceKillRequestSerializer ? (
          <tbody>
            {item?.provinceKillRequests?.provinceKillRequestSerializer.map(
              (item, i) => (
                <tr key={i} style={styles.tableRow}>
                  <td style={styles.tableCell}>{i + 1}</td>
                  <td style={styles.tableCell}>
                    {item?.killhouseUser?.killer === false
                      ? "کشتارگاه"
                      : "کشتارکن"}
                  </td>
                  <td style={styles.tableCell}>
                    {`${item?.killhouseUser?.killHouseOperator?.user?.fullname} (${item?.killhouseUser?.killHouseOperator?.user?.mobile})`}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.automatic === false ? "دستی" : "اتوماتیک"}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.provinceKillRequestQuantity}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.provinceKillRequestIndexWeight}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.provinceKillRequestWeight}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.state === "accepted"
                      ? "تایید شده"
                      : item?.state === "rejected"
                      ? "رد شده"
                      : "در انتظار تایید"}
                  </td>
                </tr>
              )
            )}
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={8}>
            داده ای ثبت نشده!
          </td>
        )}
      </table>
    );
  };

  const TableSlaughterAddCar = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>کد بار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>ماشین</th>
            <th style={styles.tableHeaderCell}>راننده</th>
            <th style={styles.tableHeaderCell}>تعداد</th>
            <th style={styles.tableHeaderCell}>وزن بار</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>کد قرنطینه</th>
            <th style={styles.tableHeaderCell}>محل کشتار</th>
          </tr>
        </thead>
        {item?.killHouseRequests?.killHouseRequestsSerializer ? (
          <tbody>
            {item?.killHouseRequests?.killHouseRequestsSerializer.map(
              (item, i) => (
                <tr key={i} style={styles.tableRow}>
                  <td style={styles.tableCell}>{i + 1}</td>
                  <td style={styles.tableCell}>{item?.barCode}</td>
                  <td style={styles.tableCell}>
                    {`${item?.killhouseUser?.killHouseOperator?.user?.fullname} (${item?.killhouseUser?.killHouseOperator?.user?.mobile})`}
                  </td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.typeCar} (${item?.addCar?.driver?.pelak})`}</td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.driverName} (${item?.addCar?.driver?.driverMobile})`}</td>
                  <td style={styles.tableCell}>
                    {item?.quantity.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>{item?.weightInfo?.weight}</td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.indexWeight}
                  </td>
                  <td style={styles.tableCell}>{item?.clearanceCode}</td>
                  <td style={styles.tableCell}>{item?.killPlace}</td>
                </tr>
              )
            )}
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={10}>
            داده ای ثبت نشده!
          </td>
        )}
      </table>
    );
  };

  const TableSVetAcceptDischarge = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>کد بار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>ماشین</th>
            <th style={styles.tableHeaderCell}>راننده</th>
            <th style={styles.tableHeaderCell}>تعداد</th>
            <th style={styles.tableHeaderCell}>وزن بار</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>کد قرنطینه</th>
            <th style={styles.tableHeaderCell}>تعداد تخلیه شده </th>
            <th style={styles.tableHeaderCell}>وزن تخلیه شده </th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
            <th style={styles.tableHeaderCell}>اطلاعات تخلیه</th>
          </tr>
        </thead>
        {item?.killHouseRequests?.killHouseRequestVetCheckSerializer ? (
          <tbody>
            {item?.killHouseRequests?.killHouseRequestVetCheckSerializer.map(
              (item, i) => (
                <tr key={i} style={styles.tableRow}>
                  <td style={styles.tableCell}>{i + 1}</td>
                  <td style={styles.tableCell}>{item?.barCode}</td>
                  <td style={styles.tableCell}>
                    {`${item?.killhouseUser?.killHouseOperator?.user?.fullname} (${item?.killhouseUser?.killHouseOperator?.user?.mobile})`}
                  </td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.typeCar} (${item?.addCar?.driver?.pelak})`}</td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.driverName} (${item?.addCar?.driver?.driverMobile})`}</td>
                  <td style={styles.tableCell}>
                    {item?.quantity.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>{item?.weightInfo?.weight}</td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.indexWeight}
                  </td>
                  <td style={styles.tableCell}>{item?.clearanceCode}</td>
                  <td style={styles.tableCell}>
                    {item?.vetAcceptedRealQuantity?.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.vetAcceptedRealWeight?.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.vetState === "accepted"
                      ? "تخلیه شده"
                      : "در انتظار تخلیه"}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.vetState === "accepted"
                      ? `${item?.killHouseVet?.fullname} (${item?.killHouseVet?.mobile})`
                      : "-"}
                  </td>
                </tr>
              )
            )}
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={13}>
            داده ای ثبت نشده!
          </td>
        )}
      </table>
    );
  };

  const TableSlaughterInputBarData = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>کد بار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>ماشین</th>
            <th style={styles.tableHeaderCell}>راننده</th>
            <th style={styles.tableHeaderCell}>تعداد</th>
            <th style={styles.tableHeaderCell}>وزن بار</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>کد قرنطینه</th>
            <th style={styles.tableHeaderCell}>تعداد تخلیه شده (دامپزشک)</th>
            <th style={styles.tableHeaderCell}>وزن تخلیه شده (دامپزشک)</th>
            <th style={styles.tableHeaderCell}>تعداد نهایی</th>
            <th style={styles.tableHeaderCell}>وزن خالص واقعی</th>
          </tr>
        </thead>
        {item?.killHouseRequests?.killHouseRequestAssignmentSerializer ? (
          <tbody>
            {item?.killHouseRequests?.killHouseRequestAssignmentSerializer.map(
              (item, i) => (
                <tr key={i} style={styles.tableRow}>
                  <td style={styles.tableCell}>{i + 1}</td>
                  <td style={styles.tableCell}>{item?.barCode}</td>
                  <td style={styles.tableCell}>
                    {`${item?.killhouseUser?.killHouseOperator?.user?.fullname} (${item?.killhouseUser?.killHouseOperator?.user?.mobile})`}
                  </td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.typeCar} (${item?.addCar?.driver?.pelak})`}</td>
                  <td
                    style={styles.tableCell}
                  >{`${item?.addCar?.driver?.driverName} (${item?.addCar?.driver?.driverMobile})`}</td>
                  <td style={styles.tableCell}>
                    {item?.quantity.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>{item?.weightInfo?.weight}</td>
                  <td style={styles.tableCell}>
                    {item?.weightInfo?.indexWeight}
                  </td>
                  <td style={styles.tableCell}>{item?.clearanceCode}</td>
                  <td style={styles.tableCell}>
                    {item?.vetAcceptedRealQuantity?.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.vetAcceptedRealWeight?.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.acceptedRealQuantity?.toLocaleString()}
                  </td>{" "}
                  <td style={styles.tableCell}>
                    {item?.acceptedRealWeight?.toLocaleString()}
                  </td>
                </tr>
              )
            )}
          </tbody>
        ) : (
          <td style={styles.tableCellAlert} colSpan={13}>
            داده ای ثبت نشده!
          </td>
        )}
      </table>
    );
  };

  const TableSlaughterFinanceInfo = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>کد بار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>ماشین</th>
            <th style={styles.tableHeaderCell}>راننده</th>
            <th style={styles.tableHeaderCell}>نژاد</th>
            <th style={styles.tableHeaderCell}>کد قرنطینه</th>
            <th style={styles.tableHeaderCell}>تعداد نهایی</th>
            <th style={styles.tableHeaderCell}>وزن خالص بار</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>مبلغ فاکتور</th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
            <th style={styles.tableHeaderCell}>
              اطلاعات پرداخت (شناسه پرداخت)
            </th>
          </tr>
        </thead>
        {item?.provinceState?.date && (
          <tbody>
            <tr style={styles.tableRow}>
              {/* <td style={styles.tableCell}>
                {item?.provinceState?.provinceOperatorFullname}
              </td> */}
            </tr>
          </tbody>
        )}
      </table>
    );
  };

  const TableInspector = () => {
    return (
      <table style={styles.invoiceTable}>
        <thead style={styles.tableHeader}>
          <tr style={styles.headerRow}>
            <th style={styles.tableHeaderCell}>ردیف</th>
            <th style={styles.tableHeaderCell}>کد بار</th>
            <th style={styles.tableHeaderCell}>خریدار</th>
            <th style={styles.tableHeaderCell}>ماشین</th>
            <th style={styles.tableHeaderCell}>راننده</th>
            <th style={styles.tableHeaderCell}>نژاد</th>
            <th style={styles.tableHeaderCell}>کد قرنطینه</th>
            <th style={styles.tableHeaderCell}>تعداد نهایی</th>
            <th style={styles.tableHeaderCell}>وزن خالص بار</th>
            <th style={styles.tableHeaderCell}>میانگین وزن</th>
            <th style={styles.tableHeaderCell}>مبلغ فاکتور</th>
            <th style={styles.tableHeaderCell}>وضعیت پرداخت</th>
            <th style={styles.tableHeaderCell}>وضعیت</th>
            <th style={styles.tableHeaderCell}>نظر بازرس</th>
          </tr>
        </thead>
        {item?.provinceState?.date && (
          <tbody>
            <tr style={styles.tableRow}>
              {/* <td style={styles.tableCell}>
                {item?.provinceState?.provinceOperatorFullname}
              </td> */}
            </tr>
          </tbody>
        )}
      </table>
    );
  };

  return (
    <div ref={ref}>
      <div style={styles.watermarkContainer}>
        <p style={styles.watermarkp}>سامانه رصدیار </p>
      </div>
      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <div className="timeline">
            <ul className="base-timeline activity-timeline">
              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={checkIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">مشخصات درخواست</div>
                  <div className="base-timeline-info">
                    <Table1 />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img
                    src={
                      item?.cityState?.state === "accept"
                        ? checkIcon
                        : waitingIcon
                    }
                    alt="icon"
                    className="icon-image"
                  />
                </div>
                <div className="timeline-content">
                  <div className="act-time">مرحله شهرستان</div>
                  <div className="base-timeline-info">
                    <TableCityLevel />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img
                    src={
                      item?.provinceState?.state === "accept"
                        ? checkIcon
                        : waitingIcon
                    }
                    alt="icon"
                    className="icon-image"
                  />
                </div>
                <div className="timeline-content">
                  <div className="act-time">مرحله استان</div>
                  <div className="base-timeline-info">
                    <TableProvinceLevel />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={checkIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">
                    تخصیصات استان به کشتارگاه
                    {" ( "}
                    <span style={styles.levelDetails}>
                      تعداد درخواست:{" "}
                      {item?.provinceKillRequests?.provinceKillRequestsTotalInfo?.poultryRequestQuantity.toLocaleString()}
                      ، تعداد تخصیصی به کشتارگاه:{" "}
                      {item?.provinceKillRequests?.provinceKillRequestsTotalInfo?.allocatedQuantity.toLocaleString()}
                      ، مانده قابل تخصیصی:{" "}
                      {item?.provinceKillRequests?.provinceKillRequestsTotalInfo?.poultryRequestRemainQuantity.toLocaleString()}
                    </span>
                    {" ) "}
                  </div>
                  <div className="base-timeline-info">
                    <TableSalughterAllocationLevel />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={checkIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">
                    ثبت ماشین توسط خریدار (ایجاد بار)
                    {" ( "}
                    <span style={styles.levelDetails}>
                      تعداد تخصیص به خریداران:{" "}
                      {item?.killHouseRequests?.allocatedQuantity?.toLocaleString()}
                      ، تعداد بارها:{" "}
                      {item?.killHouseRequests?.numberOfBars?.toLocaleString()}،
                      تعداد تخصیص به ماشین:{" "}
                      {item?.killHouseRequests?.killHouseRequestQuantity?.toLocaleString()}
                      ، مانده قابل تخصیص:{" "}
                      {item?.killHouseRequests?.remainQuantity?.toLocaleString()}
                    </span>
                    {" ) "}
                  </div>
                  <div className="base-timeline-info">
                    <TableSlaughterAddCar />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={checkIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">
                    تایید تخلیه توسط دامپزشک کشتارگاه
                    {" ( "}
                    <span style={styles.levelDetails}>
                      تعداد بارها:{" "}
                      {item?.killHouseRequests?.numberOfBars?.toLocaleString()}،
                      تایید تخلیه:{" "}
                      {item?.killHouseRequests?.vetAcceptedNumberOfBars?.toLocaleString()}
                      ، تخلیه نشده:{" "}
                      {item?.killHouseRequests?.vetRemainNumberOfBars?.toLocaleString()}
                    </span>
                    {" ) "}
                  </div>
                  <div className="base-timeline-info">
                    <TableSVetAcceptDischarge />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={checkIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">
                    ورود اطلاعات بار توسط کشتارگاه
                    {" ( "}
                    <span style={styles.levelDetails}>
                      تعداد بارها:{" "}
                      {item?.killHouseRequests?.numberOfBars?.toLocaleString()}،
                      ورود اطلاعات بار:{" "}
                      {item?.killHouseRequests?.killHouseRequestAssignment?.toLocaleString()}
                      ، وارد نشده:{" "}
                      {item?.killHouseRequests?.assignmentRemainNumberOfBars?.toLocaleString()}
                    </span>
                    {" ) "}
                  </div>
                  <div className="base-timeline-info">
                    <TableSlaughterInputBarData />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={waitingIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">اطلاعات مالی</div>
                  <div className="base-timeline-info">
                    <TableSlaughterFinanceInfo />
                  </div>
                </div>
              </li>

              <li className="main-level-item">
                <div className="timeline-icon bg-primary">
                  <img src={waitingIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">بازرس</div>
                  <div className="base-timeline-info">
                    <TableInspector />
                  </div>
                </div>
              </li>

              <div style={{ display: "flex" }}>
                <div className="timeline-icon bg-primary">
                  <img src={waitingIcon} alt="icon" className="icon-image" />
                </div>
                <div className="timeline-content">
                  <div className="act-time">
                    اتمام پرونده
                    {/* {" ( "}
                    <span style={styles.levelDetails}>
                      پرونده در تاریخ 1400/02/04 خاتمه یافت.
                    </span>
                    {" ) "} */}
                  </div>
                </div>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
});

ProvinceGetCaseFile.displayName = "ProvinceGetCaseFile";

export default ProvinceGetCaseFile;

ProvinceGetCaseFile.propTypes = {
  item: PropTypes.any,
};
