import { useEffect, useState, useRef } from "react";
import { ScaleLoader } from "react-spinners";

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import {
  getCarries,
  addFavourite,
  getCarrierIds,
  getMarket,
  MarketingGet,
  getStates,
  getArrMarket,
  DownloadRecord,
  toGetTableColumnData,
  toResetTableHeaderColumns,
} from "@/services/public";
import { useSession } from "next-auth/react";
import "primereact/resources/primereact.css";
import useAuthProvider from "@/useAuthProvider";
import "primeicons/primeicons.css";
import ViewCarrierData from "./ViewCarrierData";
import "primereact/resources/themes/saga-blue/theme.css";
import { MultiSelect, MultiSelectChangeEvent } from "primereact/multiselect";
import { CarriersCsvUpload } from "@/services/profile";
import { Button } from "primereact/button";
import "rsuite/dist/rsuite.min.css";
import { useRouter } from "next/router";
import { Paginator } from "primereact/paginator";
import CarrierDetailsLanding from "../modal/CarrierDetailsLanding";
import { ToastContainer, toast } from "react-toastify";
import Image from "next/image";
import { Dialog } from "primereact/dialog";
import verified from "../../../public/images/verified.png";
import SubscriptionPlansModal from "../modal/SubscriptionPlansModal";
import { FormGroup, Row, Col } from "react-bootstrap";
import { useForm, Controller } from "react-hook-form";
import PaginationTitle from "../pages/PaginationTitle";
import styles from "@/styles/MultiSelect.module.css";
import { toUpdateTableColumn } from "@/helpers/toUpdateTableColumn";

interface Props {
  datalisting: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}
function LandingDashboard(props: any) {
  const [totalRecords, setTotalRecords] = useState(0);
  const { Permission: userData } = useAuthProvider();
  const dtRef = useRef(null);
  const [first, setFirst] = useState(0);
  const [rateQuotesdata, setRateQuotesdata] = useState([]);
  const [quoteFilterValue, setquoteFilterValue] = useState("");
  const [LegalValue, setLegalValue] = useState("");
  const [LocationValue, setLocationValue] = useState("");
  const [PhoneValue, setPhoneValue] = useState();
  const [marketvalue, setMarketvalue] = useState("");
  const [customerLeadFilterValue, setcustomerLeadFilterValue] = useState("");
  const [portTerminal, setPortTerminal] = useState("");
  const [typesvalue, setTypesvalue] = useState("");
  const [sizevalue, setSizevalue] = useState("");
  const [hazvalue, setHazvalue] = useState("");
  const [bondedvalue, setBondedvalue] = useState("");
  const [chassisvalue, setChassisvalue] = useState("");
  const [transloadvalue, setTransloadvalue] = useState("");
  const [isloading, setIsloading] = useState(false);
  const [parkingvalue, setParkingvalue] = useState("");
  const [order, setOrder] = useState("");
  const [fieldBy, setFieldBy] = useState();
  const [sortField, setSortField] = useState(null);
  const [unchecked, setunchecked] = useState([]);
  const [allState, setAllState] = useState();
  const [sortOrder, setSortOrder] = useState(null);
  const Router = useRouter();
  const [rows, setRows] = useState(10);
  const [fullUrl, setFullUrl] = useState("");
  const [modalStatus, setModalStatus] = useState(false);
  const [perPageDataShow, setPerPageDataShow] = useState(0);
  const [columns, setColumns] = useState<any>([]);
  const [columnsUpdateStatusCount, setColumnsUpdateStatusCount] = useState(0);
  const [tableHeaderId, setTableHeaderId] = useState("");
  const [resetTableHeaderStatus, setResetTableHeaderStatus] = useState(false);
  const [tableKey, setTableKey] = useState(0);

  const { control } = useForm({});
  useEffect(() => {
    const protocol = window.location.protocol;
    const host = window.location.host;
    const path = window.location.pathname;
    const queryString = window.location.search;
    const hash = window.location.hash;
    const Url = `${protocol}//${host}${path}${queryString}${hash}`;

    setFullUrl(Url);
  }, []);

  const formData = Router.query;
  const fetchTableColumn = async ()=>{
    const requestPayload: any = {
      requestType: 'carriers'
    }
    const response = await toGetTableColumnData(requestPayload);
    if(response?.status == 'success'){
      setColumns(response?.data?.column_preferences);
      setTableHeaderId(response?.data?.id);
    }
  }

  useEffect(()=>{
    fetchTableColumn();
  },[columnsUpdateStatusCount, resetTableHeaderStatus])
  
  const onShow = () => {
    let selectAllCheckbox = document.querySelector(
      ".p-multiselect-header > .p-checkbox"
    );
    selectAllCheckbox.style.marginRight = "8px";
    selectAllCheckbox.after(" Select All");
  };
  const [visible, setVisible] = useState(false);

  const openPopup = () => setVisible(true);
  const closePopup = () => setVisible(false);
  const [visibleColumns, setVisibleColumns] = useState(columns);
  const preStatefilter = props?.stateName ? props?.stateName : props?.MapState;
  const searchState = preStatefilter ? preStatefilter : "";
  const searchMarket = props?.address
    ? props?.address
    : props?.selectedMarketss?.name;
  const user = useSession();
  const userType = user?.data?.user?.group_type
  const [marketName, setMarketName] = useState([]);
  const [selectedMarkets, setSelectedMarkets] = useState();
  const [states, setStates] = useState([]);
  const [allMarket, setAllMarket] = useState();
  const MarketGet = async () => {
    let res = await getArrMarket();
    setAllMarket(res?.data);
    setAllState(res?.data);
  };

  useEffect(() => {
    const storedCarrierColumn = localStorage.getItem('carrier_selection');
    let selectedCarrierColumn: any[] = [];
    try {
      const parsed = JSON.parse(storedCarrierColumn ?? '[]');
      if (Array.isArray(parsed)) {
        selectedCarrierColumn = parsed;
      }
    } catch (error) {
      selectedCarrierColumn = [];
    }
    if (selectedCarrierColumn.length > 0) {
      const oldFieldSet = new Set(selectedCarrierColumn.map(item => item.field));
      const matchedData = columns.filter((item: { field: any; }) => oldFieldSet.has(item.field));
      setVisibleColumns(matchedData);
    } else {
      setVisibleColumns(columns);
    }
    MarketGet();
  }, [columns]);
  const [alert, setAlert] = useState();
  const [marketHandle, setMarketHandle] = useState();
  const [stateHandle, setStateHandle] = useState();

  useEffect(() => {
    if (props) {
      let arr: string | any[];
      if (typeof searchState === "string" && searchState) {
        arr = searchState.toUpperCase();
      } else {
        console.error('states is not an object with a "name" property');
      }
      const filteredStates = states?.filter((item) =>
        arr?.includes(item?.state_name)
      );

      const stateCodes = filteredStates?.map(
        (state: { state_code: any }) => state?.state_code
      );

      const payload = {
        state_code: [stateCodes],
      };
      getMarketData(payload, true);

      const filteredMarket = allMarket?.filter((item: { name: any }) =>
        searchMarket?.includes(item?.name)
      );

      const filteredMarketMap = allMarket?.filter((item: { name: any }) =>
        props?.selectedMarketss?.name?.includes(item?.name)
      );
      const stateCodescode = filteredMarket?.map(
        (market: { market: any }) => market?.market
      );
      const state_code = filteredStates?.map(
        (state_name: { state_name: any }) => state_name?.state_name
      );

      const queryStringState = JSON.stringify(state_code);
      const queryStringMarket = JSON.stringify(stateCodescode);
      setStateHandle(queryStringState);
      setMarketHandle(queryStringMarket);
      setPortTerminal(props?.selectedTerminal ?? "");

      if (filteredMarketMap) {
        setSelectedMarkets(filteredMarketMap);
      }
      if (filteredMarket) {
        setSelectedMarkets(filteredMarket);
      }

      setcustomerLeadFilterValue(filteredStates);
      const query = {
        carrier_name: quoteFilterValue,
        terminal: props?.selectedTerminal,
        haz: hazvalue,
        bonded: bondedvalue,
        chassis: chassisvalue,
        transload: transloadvalue,
        parking: parkingvalue,
        size: sizevalue,
        height: typesvalue,
        full_url: fullUrl,
        sort_by: fieldBy,
        order: order,
        // location: state_format,
        phone: PhoneValue,
      };

      rateQuotesDataGet(1, query, queryStringState, queryStringMarket, rows);
    } else {
      setAlert(false);
    }
  }, [props?.selectedTerminal,props?.selectedMarketss?.name,preStatefilter, searchMarket,searchState,states]);
  
  const buildQueryParams = (
    {
      carrier_name = "",
      leagal_name = "",
      terminal = "",
      haz = "",
      bonded = "",
      chassis = "",
      transload = "",
      parking = "",
      size = "",
      height = "",
      my_carrier_list = "",
      sort_by = "",
      order: queryOrder = "", // Renaming 'order' to avoid conflict
      location = "",
      phone = "",
    }: any,
    event = ""
  ) => {
    const sanitizedPhone =
      typeof phone === "string" ? phone.replace(/\D/g, "") : "";

    return {
      carrier_name,
      entity_type: leagal_name,
      terminal,
      haz,
      bonded,
      chassis,
      transload,
      parking,
      size,
      height,
      my_carrier_list,
      full_url: fullUrl,
      paginate_count: event,
      sort_by,
      order: queryOrder,
      location,
      phone: sanitizedPhone,
    };
  };

  const handleResponse = (response: any) => {
    if (response?.status === "success") {
      setIsloading(false);
      setTotalRecords(response?.meta?.total);
      setPerPageDataShow(response?.meta?.per_page);
      setRateQuotesdata(response?.data);
      const filteredData = response?.data?.filter(
        (item: { is_my_carrier: number }) => item?.is_my_carrier === 1
      );
      const idValues = filteredData.map((item: { id: any }) => item?.id);
      const desiredData = response?.data?.filter((item: { id: any }) =>
        idValues.includes(item.id)
      );
      setSelectedRows([...desiredData]);
    } else {
      setIsloading(false);
    }
  };

  const rateQuotesDataGet = async (
    pageno: any,
    query: any,
    state: any,
    market: any,
    event: number | undefined
  ) => {
    setIsloading(true);

    try {
      const queryParams = buildQueryParams(query, event);
      const queryParameters = new URLSearchParams(queryParams).toString();
      const response = await getCarries(
        user?.data?.user?.image,
        pageno,
        queryParameters,
        state ? JSON.parse(state) : [],
        market ? JSON.parse(market) : []
      );
      handleResponse(response);
    } catch (error) {
      setIsloading(false);
      return error;
    }
  };

  const onColumnToggle = (event: { value: any }) => {
    let selectedColumns = event.value;
    let orderedSelectedColumns = columns.filter((col) =>
      selectedColumns.some(
        (sCol: { field: string }) => sCol.field === col.field
      )
    );
    setVisibleColumns(orderedSelectedColumns);
    localStorage.setItem('carrier_selection', JSON.stringify(orderedSelectedColumns));
  };
  //Clear Filters

  const clearFilter = () => {
    if (props?.list !== 1) {
      props?.setSelectedTerminal("");
      props?.setSelectedMarket("");
      props?.setMarketData("");
      props?.setMarketSectionVisible(true);
    }

    setTypesvalue("");
    setSizevalue("");
    setHazvalue("");
    setBondedvalue("");
    setChassisvalue("");
    setTransloadvalue("");
    setParkingvalue("");
    props?.resetState?.SetMapState(null);
    props?.resetState?.SetgetstateName(null);
    props?.clearMap(null);
    props?.clearAddress(null);
    props?.clearState(null);
    setCheckboxState({
      size20_40FT: false,
      size53FT: false,
      haz: false,
      transload: false,
      chassis: false,
      bonded: false,
      parking: false,
    });
    setPhoneValue("");
    setSortOrder("");
    setSortField("");
    setLocationValue("");
    props?.resetState?.SetAddress(null);
    setCarrierChange(false);

    setRows(10);
    setRateQuotesdata([]);
    setFirst(0);
    setMarketHandle("");
    setStateHandle("");
    setquoteFilterValue("");
    setSelectedMarkets("");
    setLegalValue("");
    setMarketvalue("");
    setcustomerLeadFilterValue("");
    setPortTerminal("");
    setOrder("");
    setFieldBy("");
    setLegalValue("");
    const queryclear = {
      carrier_name: "",
      terminal: "",
      haz: "",
      bonded: "",
      chassis: "",
      transload: "",
      parking: "",
      size: "",
      height: "",
      legal: "",
      full_url: fullUrl,
      sort_by: "",
      order: "",
      location: "",
      phone: "",
    };
    rateQuotesDataGet(1, queryclear, "", "", 10);
  };

  const onPageChange = (event: any) => {
    let perpage = event.page + 1;
    setFirst(event.first);
    setRows(event.rows);
    const query1 = {
      carrier_name: quoteFilterValue,
      // market: marketvalue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
      leagal_name: LegalValue,
    };
    const querymyall = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      my_carrier_list: 1,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };

    rateQuotesDataGet(
      perpage,
      carrierChange ? querymyall : query1,
      stateHandle,
      marketHandle,
      event.rows
    );
  };

  const spacehandler = (event: {
    which: number;
    target: { value: string };
    preventDefault: () => void;
  }) => {
    if (event.which === 32 && event.target.value.trim() === "") {
      event.preventDefault();
    }
  };

  const CarrierNameHandler = (e: {
    target: { value: SetStateAction<string> };
  }) => {
    setquoteFilterValue(e?.target?.value);
    const query2 = {
      carrier_name: e?.target?.value,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    rateQuotesDataGet(1, query2, stateHandle, marketHandle, rows);
  };

  const genericHandlers = (
    e: { target: { value: string } },
    setFilterValue: {
      (value: SetStateAction<string>): void;
      (arg0: any): void;
    },
    key: string
  ) => {
    let inputValue = e?.target?.value;

    if (key === "phone") {
      inputValue = inputValue.replace(/\D/g, "");

      if (inputValue.length > 10) {
        inputValue = inputValue.slice(0, 10);
      }

      if (inputValue.length > 3 && inputValue.length <= 6) {
        inputValue = `${inputValue.slice(0, 3)}-${inputValue.slice(3)}`;
      } else if (inputValue.length > 6) {
        inputValue = `${inputValue.slice(0, 3)}-${inputValue.slice(3, 6)}-${inputValue.slice(6)}`;
      }

      const isValid = /^[0-9\-]*$/.test(inputValue);
      if (!isValid) {
        return;
      }
    }

    if (key === "state") {
      if (inputValue === "") {
        props?.resetState?.SetMapState(null);
        props?.resetState?.SetgetstateName(null);
      }
    }

    setFilterValue(inputValue);

    const query3 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      bonded: bondedvalue,
      height: typesvalue,
      leagal_name: LegalValue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      sort_by: fieldBy,
      location: LocationValue,
      phone: PhoneValue,
      order: order,
      full_url: fullUrl,
      haz: hazvalue,
      size: sizevalue,
      [key]: inputValue.replace(/-/g, ""), // Remove dashes for API query
    };
    setFirst(1);
    // Call the API with the updated query
    rateQuotesDataGet(1, query3, stateHandle, marketHandle, rows);
  };

  const genericHandler = (
    e: { target: { value: string | any[] } },
    setFilterValue: {
      (value: SetStateAction<string>): void;
      (arg0: any): void;
    },
    key: string
  ) => {
    if (key === "state") {
      setMarketvalue("");
      if (e?.target?.value === "") {
        props?.resetState?.SetMapState(null);
        props?.resetState?.SetgetstateName(null);
      }
    }
    setFilterValue(e?.target?.value);
    if (Array.isArray(e?.target?.value)) {
      const stateNames = e?.target?.value.map(
        (item: { state_name: any }) => item.state_name
      );
      const queryStringState = JSON.stringify(stateNames);
      const query3 = {
        carrier_name: quoteFilterValue,
        market: marketvalue,
        terminal: portTerminal,
        haz: hazvalue,
        bonded: bondedvalue,
        chassis: chassisvalue,
        transload: transloadvalue,
        parking: parkingvalue,
        size: sizevalue,
        height: typesvalue,
        leagal_name: LegalValue,
        full_url: fullUrl,
        paginate_count: "",
        sort_by: fieldBy,
        order: order,
        location: LocationValue,
        phone: PhoneValue,
      };

      setStateHandle(queryStringState);
      setFirst(1);

      rateQuotesDataGet(
        1,
        query3,
        queryStringState,
        key === "state" ? "" : marketvalue,
        rows
      );
    } else {
      console.error("_customerLeadFilterValue is not an array");
    }
  };

  useEffect(() => {
    getStates().then((response) => {
      if (response?.status == "success") {
        setStates(response?.data);
      } else {
        setStates(null);
      }
    });
  }, [setStates]);

  const getMarketData = (payload, status: boolean | undefined) => {
    if (searchMarket) {
      setMarketName(allState);
      return;
    }
    getMarket(payload).then((response) => {
      if (response?.status == "success") {
        setMarketName(response?.data);
      }
    });
  };

  const StateHandler = (e: any) =>
    genericHandler(e, setcustomerLeadFilterValue, "state");
  const LegalHandler = (e: any) =>
    genericHandlers(e, setLegalValue, "leagal_name");
  const LocationHandler = (e: any) =>
    genericHandlers(e, setLocationValue, "location");
  const PhoneHandler = (e: any) => genericHandlers(e, setPhoneValue, "phone");
  const marketHandler = (e: MultiSelectChangeEvent) => {
    if (e?.target?.value === "") {
      props?.resetState?.SetAddress(null);
    }

    if (Array.isArray(e?.target?.value)) {
      const marketNames = e?.target?.value.map(
        (item: { market: any }) => item.market
      );
      const queryStringState = JSON.stringify(marketNames);
      setMarketvalue(queryStringState);
      const query4 = {
        carrier_name: quoteFilterValue,
        // market: queryStringState,
        terminal: portTerminal,
        haz: hazvalue,
        bonded: bondedvalue,
        chassis: chassisvalue,
        transload: transloadvalue,
        parking: parkingvalue,
        size: sizevalue,
        height: typesvalue,
        leagal_name: LegalValue,
        full_url: fullUrl,
        sort_by: fieldBy,
        order: order,
        location: LocationValue,
        phone: PhoneValue,
      };
      setMarketHandle(queryStringState);
      setFirst(1);
      rateQuotesDataGet(1, query4, stateHandle, queryStringState, rows);
    } else {
      console.error("_customerLeadFilterValue is not an array");
    }
  };

  const terminalHandler = (e: {
    target: { value: SetStateAction<string> };
  }) => {
    setPortTerminal(e?.target?.value);
    const query5 = {
      carrier_name: quoteFilterValue,
      terminal: e?.target?.value,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);
    rateQuotesDataGet(1, query5, stateHandle, marketHandle, rows);
  };

  const typeHandler = (e: ChangeEvent<HTMLInputElement>, field) => {
    const value = e.target.checked ? "1" : "0"; // Toggle value based on checkbox state
    setTypesvalue(value);
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    const query12 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: value, // Assuming this is based on checkbox toggle
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query12, stateHandle, marketHandle, rows);
  };

  const sizeHandler = (
    e: React.ChangeEvent<HTMLInputElement>,
    field: string
  ) => {
    const value = e.target.checked ? "1" : "0";
    setSizevalue(value);
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));

    const query11 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: value,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query11, stateHandle, marketHandle, rows);
  };

  const parkingHandler = (e: ChangeEvent<HTMLSelectElement>, field) => {
    const value = e.target.checked ? "1" : "0";
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    setParkingvalue(value);
    const query10 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: value,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query10, stateHandle, marketHandle, rows);
  };

  const transloadHandler = (e: ChangeEvent<HTMLSelectElement>, field) => {
    const value = e.target.checked ? "1" : "0";
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    setTransloadvalue(value);

    const query9 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: value,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query9, stateHandle, marketHandle, rows);
  };

  const chassisHandler = (e: ChangeEvent<HTMLSelectElement>, field) => {
    const value = e.target.checked ? "1" : "0";
    setChassisvalue(value);
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    const query8 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: bondedvalue,
      chassis: value,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query8, stateHandle, marketHandle, rows);
  };

  const bondedHandler = (e: ChangeEvent<HTMLSelectElement>, field) => {
    const value = e.target.checked ? "1" : "0";
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    setBondedvalue(value);
    const query7 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: hazvalue,
      bonded: value,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query7, stateHandle, marketHandle, rows);
  };

  const hazHandler = (e: ChangeEvent<HTMLSelectElement>, field) => {
    const value = e.target.checked ? "1" : "0";
    setCheckboxState((prevState) => ({
      ...prevState,
      [field]: e.target.checked,
    }));
    setHazvalue(value);
    const query6 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: value,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: fieldBy,
      order: order,
      location: LocationValue,
      phone: PhoneValue,
    };
    setFirst(1);

    rateQuotesDataGet(1, query6, stateHandle, marketHandle, rows);
  };
  //Sort Data Server side
  const onSortChange = (e: any) => {
    setSortOrder(e.sortOrder);
    setSortField(e.sortField);
    if (e.sortField === "carrier_name") {
      e.sortField = "billing_company";
    }
    if (e.sortField === "phone") {
      e.sortField = "phone";
    }
    if (e.sortField === "LEGAL") {
      e.sortField = "entity_type";
    }
    if (e.sortField === "state_names") {
      e.sortField = "state";
    }
    if (e.sortField === "markets") {
      e.sortField = "market";
    }
    if (e.sortField === "terminal_names") {
      e.sortField = "terminal";
    }
    if (e.sortField === "_20_40FT") {
      e.sortField = "size";
    }
    if (e.sortField === "_53FT") {
      e.sortField = "height";
    }
    if (e.sortField === "HAZ") {
      e.sortField = "is_hazmat";
    }
    if (e.sortField === "TRANSLOAD") {
      e.sortField = "transload";
    }
    if (e.sortField === "CHASSIS") {
      e.sortField = "chassis";
    }
    if (e.sortField === "BONDED") {
      e.sortField = "bonded";
    }
    if (e.sortField === "PARKING") {
      e.sortField = "parking";
    }
    let sortOrderBy;

    if (e.sortOrder === 1) {
      sortOrderBy = "ASC";
    } else if (e.sortOrder === -1) {
      sortOrderBy = "DESC";
    }
    let orderBySort = sortOrderBy;
    setOrder(orderBySort);
    setFieldBy(e.sortField);
    const query8 = {
      carrier_name: quoteFilterValue,
      terminal: portTerminal,
      haz: e?.target?.value,
      bonded: bondedvalue,
      chassis: chassisvalue,
      transload: transloadvalue,
      parking: parkingvalue,
      size: sizevalue,
      height: typesvalue,
      leagal_name: LegalValue,
      full_url: fullUrl,
      sort_by: e.sortField,
      order: orderBySort,
      location: LocationValue,
      phone: PhoneValue,
    };
    rateQuotesDataGet(1, query8, stateHandle, marketHandle, rows);
  };

  const quoteFilter = (
    <input
      type="text"
      className="form-control"
      onChange={CarrierNameHandler}
      value={quoteFilterValue}
      placeholder="Carrier Company Name"
      onKeyDown={spacehandler}
    />
  );
  const handleSelectStateChange = (
    e: MultiSelectChangeEvent,
    currentVal: any[]
  ) => {
    if (e?.target?.value.length > 0) {
      const stateCode = e?.target?.value;
      const stateCodes = stateCode?.map(
        (state: { state_code: any }) => state?.state_code
      );
      const payload = {
        state_code: stateCodes,
      };
      setcustomerLeadFilterValue(payload);
      getMarketData(payload);
      setMarketHandle("");
      setSelectedMarkets(null);
    } else {
      setSelectedMarkets(null);
      setMarketName([]);
      setPortTerminal("");
    }
  };

  const handleSelectMarketChange = (e: MultiSelectChangeEvent) => {
    const selected = e?.target?.value || [];
    setSelectedMarkets(selected);
    if (selected.length === 0) {
      setPortTerminal("");
      props?.setSelectedTerminal("");
      props?.setSelectedMarket("");
      props?.setMarketSectionVisible(true);
    }
  };

  useEffect(() => {
    useEffectModLeadFilter(customerLeadFilterValue, setMarketName);
  }, [customerLeadFilterValue]);

  const customerLeadFilter = (
    <>
      <Row>
        <div style={{ display: "flex", gap: "10px" }}>
          <Col lg={6}>
            <FormGroup className="form-group">
              <div className="statespan">
                <Controller
                  name="selectedStateOptions"
                  control={control}
                  render={({ field }) => (
                    <MultiSelect
                      display="chip"
                      options={states}
                      style={{ width: "fit-content", borderRadius: "5px" }}
                      value={customerLeadFilterValue}
                      onChange={(e) => {
                        field.onChange(e.value);
                        handleSelectStateChange(e, field.value);
                        StateHandler(e, field.value);
                      }}
                      optionLabel="state_name"
                      placeholder="Select State/Province"
                      filter
                      resetFilterOnHide={true}
                    />
                  )}
                />
              </div>
            </FormGroup>
          </Col>
        </div>
      </Row>
    </>
  );
  const legalFilter = (
    <select
      className="form-control"
      onChange={LegalHandler}
      value={LegalValue}
      onKeyDown={spacehandler}
    >
      <option value="">Select</option>
      <option value="Carrier">Carrier</option>
      <option value="Broker">Broker</option>
    </select>
  );
  const LocationFilter = (
    <input
      type="text"
      className="form-control"
      onChange={LocationHandler}
      value={LocationValue}
      placeholder="Location"
      onKeyDown={spacehandler}
    />
  );

  const PhoneFilter = (
    <input
      type="text"
      className="form-control"
      onChange={PhoneHandler}
      value={PhoneValue}
      placeholder="Phone"
      onKeyDown={spacehandler}
    />
  );

  const marketFilter = (

    <Col lg={6}>
      <FormGroup className="form-group">
        <div className="marketspan">
          <Controller
            name="selectedMarkets"
            control={control}
            render={({ field }) => (
              <MultiSelect
                display="chip"
                style={{
                  width: "fit-content",
                  padding: "inherit",
                  borderRadius: "5px",
                }}
                options={[...marketName].sort((a, b) =>
                  a.market.localeCompare(b.market)
                )}
                value={selectedMarkets}
                onChange={(e) => {
                  field.onChange(e.value);
                  handleSelectMarketChange(e);
                  marketHandler(e);
                }}
                optionLabel="market"
                className="form-control"
                placeholder="Select Market"
                filter
                resetFilterOnHide={true}
              />
            )}
          />
        </div>
      </FormGroup>
    </Col>
  );

  const portTerminalFilter = (
    <input
      type="text"
      className="form-control"
      value={portTerminal}
      onChange={terminalHandler}
      placeholder="Port/Terminal"
      onKeyDown={spacehandler}
    />
  );

  const [viewId, setViewId] = useState();

  const handleIconClick = (e, rowData) => {
    e.stopPropagation(); // Prevent row selection or any other parent click handlers
    openPopup();
    setViewId(rowData?.id);
  };
  const QuoteBodyTemplate = (rowData) => {
    return (
      <>
        <div className="verified-div">
          <div className="pro_list">
            <a className="showmorebutton" href={`/carriers/${rowData?.id}`}>
              {rowData?.carrier_name}
            </a>
          </div>

          <div style={{ display: "flex", gap: "5px" }}>
            <div>
              <i
                className="verified"
                style={{
                  height: "17px",
                  fontSize: "20px",
                  cursor: "pointer",
                  color: "#5e76f7",
                }}
                onClick={(e) => handleIconClick(e, rowData)}
                class="bi bi-eye"
              ></i>
            </div>
            {rowData?.is_verify === 1 && props?.keys === "1" ? (
              <Image className="verified" src={verified} />
            ) : (
              ""
            )}
          </div>
        </div>
      </>
    );
  };

  const SalesRepBodyTemplate = (rowData: any) => {
    if (
      rowData?.markets === undefined ||
      rowData?.markets === null ||
      rowData?.markets?.length === 0
    ) {
      return <p>N/A</p>;
    } else {
      const MarketsNamesArray = rowData?.markets?.split(",");
      return (
        <>
          {MarketsNamesArray?.slice(0, 1)?.map((market: any, index: any) => (
            <>
              <p key={index}>{market}</p>
            </>
          ))}

          {MarketsNamesArray?.length > 1 && (
            <CarrierDetailsLanding
              id={{ id: rowData?.markets, d: "Markets Details" }}
            />
          )}
        </>
      );
    }
  };

  const Port_terminal = (rowData: any) => {
    if (
      rowData?.terminal_names === undefined ||
      rowData?.terminal_names === null ||
      rowData?.terminal_names?.length === 0
    ) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      const terminalNamesArray = rowData?.terminal_names?.split(",");
      return (
        <>
          {terminalNamesArray?.slice(0, 1)?.map((terminal: any, index: any) => (
            <>
              <p key={index}>{terminal}</p>
            </>
          ))}

          {terminalNamesArray?.length > 1 && (
            <CarrierDetailsLanding
              id={{ id: rowData?.terminal_names, d: "Port/Terminal Details" }}
            />
          )}
        </>
      );
    }
  };

  const CustomerBodyTemplate = (rowData: any) => {
    if (rowData?.state_names === undefined || rowData?.state_names === null) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      const StateNamesArray = rowData?.state_names?.split(",");
      return (
        <>
          {StateNamesArray?.slice(0, 1)?.map((state: any, index1: any) => (
            <>
              <p key={index1}>{state}</p>
            </>
          ))}

          {StateNamesArray?.length > 1 && (
            <CarrierDetailsLanding
              id={{ id: rowData?.state_names, d: " States Details " }}
            />
          )}
        </>
      );
    }
  };
  const legalTemplate = (rowData: any, index: any) => {
    return (
      <>
        {rowData?.entity_type === undefined ||
        rowData?.entity_type === null ||
        rowData?.entity_type === "" ? (
          <p>N/A</p>
        ) : (
          <>
            <p>{rowData?.entity_type}</p>
          </>
        )}
      </>
    );
  };
  const PhoneTemplate = (rowData: any, index: any) => {
    const formatPhoneNumber = (phone: string) => {
      const digits = phone.replace(/\D/g, "");

      let formatted = "";

      if (digits.length === 10) {
        formatted = digits.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
      } else if (digits.length === 9) {
        formatted = digits.replace(/(\d{3})(\d{3})(\d{3})/, "$1-$2-$3");
      } else if (digits.length > 10) {
        formatted = digits
          .slice(0, 10)
          .replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        formatted += digits.slice(10);
      } else {
        if (digits.length > 3) {
          formatted = digits.replace(/(\d{3})(?=\d)/g, "$1-");
        } else {
          formatted = digits;
        }
      }

      return formatted;
    };

    return (
      <>
        {rowData?.phone === undefined ||
        rowData?.phone === null ||
        rowData?.phone === "" ? (
          <p>N/A</p>
        ) : (
          <p>{formatPhoneNumber(rowData.phone)}</p>
        )}
      </>
    );
  };

  const LocationBodyTemplate = (rowData: any, index: any) => {
    return (
      <>
        {rowData?.location === undefined ||
        rowData?.location === null ||
        rowData?.location === "" ? (
          <p>N/A</p>
        ) : (
          <>
            <p>{rowData?.location}</p>
          </>
        )}
      </>
    );
  };

  const _20_40FT: any = (rowData: any) => {
    if (
      rowData?.size === 1 &&
      rowData?.size != undefined &&
      rowData?.size != null
    ) {
      return (
        <>
          <i
            className="pi pi-check"
            style={{ color: "green", fontWeight: "bold", fontSize: "22px" }}
          ></i>
        </>
      );
    } else {
      return (
        <>
          <i
            className="pi pi-times"
            style={{ color: "red", fontWeight: "bold", fontSize: "22px" }}
          ></i>
        </>
      );
    }
  };

  const [selectedRows, setSelectedRows] = useState([]);
  const yourData: string | any[] = [];
  const [count, SetCount] = useState(false);
  const selectAllRows = () => {
    setSelectedRows((prevSelectedRows) => [...prevSelectedRows, ...yourData]);
  };
  const customToastStyle = {
    cursor: "grab",
  };
  const AddTomyCarrier = async (
    e: MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    setIsloading(true);
    const idValues = selectedRows?.map((item) => item?.id) || [];
    const existingIds = await getCarrierIds(user?.data?.user?.image);
    const existingIdsArray = existingIds.data || [];
    const updatedIds = [
      ...new Set(existingIdsArray.filter((id: any) => !unchecked.includes(id))),
      ...idValues,
    ];
    const uniqueUpdatedIds = [...new Set(updatedIds)];
    let res = await addFavourite(user?.data?.user?.image, uniqueUpdatedIds);

    if (res?.status === "success") {
      setFirst(0);
      setSelectedRows([]);
      setunchecked([]);
      setIsloading(false);
      toast.success(res?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setMarketvalue(formData?.market);
      const query = {
        market: formData?.market,
      };
      return rateQuotesDataGet(1, query, stateHandle, marketHandle, rows);
    } else {
      setFirst(0);
      setSelectedRows([]);
      setunchecked([]);
      setIsloading(false);
      toast.error(
        <div style={{ textAlign: "center", maxWidth: "500px" }}>
          <Image className="Access-img" src={alert} /> Hold up! You have reached
          the 30-carrier limit. Upgrade now for the freedom to add unlimited
          carriers and enhance your reach.
          <br />
          <div
            style={{
              display: "flex",
              gap: "2px",
              justifyContent: "center",
              marginTop: "10px",
              height: "37px",
              padding: "revert",
              width: "auto",
            }}
          >
            <button
              className="btn btn-secondary"
              style={{
                marginRight: "7px",
                fontSize: "13px",
                padding: "3px 14px",
                cursor: "grab",
              }}
            >
              Cancel
            </button>
            <button
              style={{
                backgroundColor: "#2196F3 !important",
                fontSize: "13px",
                padding: "3px 6px",
                cursor: "grab",
              }}
              onClick={() => setModalStatus(true)}
              className="btn btn-primary"
            >
              Explore Plans
            </button>
          </div>
        </div>,
        {
          style: customToastStyle,

          position: toast.POSITION.TOP_CENTER,
          icon: false,
          autoClose: 8000, // Adjust this value as needed
        }
      );
    }
    SetCount(false);
  };

  useEffect(() => {
    if (!selectedRows?.length) {
      SetCount(false);
    }
  }, [selectedRows]);
  const [carrierChange, setCarrierChange] = useState(false);
  const changehandler = (i: any) => {
    if (i === "ok") {
      const querymyall = {
        carrier_name: quoteFilterValue,
        terminal: portTerminal,
        haz: hazvalue,
        bonded: bondedvalue,
        chassis: chassisvalue,
        transload: transloadvalue,
        parking: parkingvalue,
        size: sizevalue,
        height: typesvalue,
        my_carrier_list: 1,
        full_url: fullUrl,
        sort_by: fieldBy,
        order: order,
        location: LocationValue,
        phone: PhoneValue,
      };
      setCarrierChange(true);
      rateQuotesDataGet(1, querymyall, stateHandle, marketHandle, rows);
      SetCount(false);
    }
  };
  const buttonClassName = count
    ? "Carrier-Button divStylecss-update"
    : "Carrier-Button-Disable divStylecss-update";
  const isButtonDisabled = !count;
  const addToMyCarriersButton =
    props?.keys === "1" ? (
      <button
        className={buttonClassName}
        disabled={isButtonDisabled}
        onClick={(e) => AddTomyCarrier(e)}
      >
        Update Carrier List
      </button>
    ) : null;

  const [checkboxState, setCheckboxState] = useState({
    size20_40FT: false,
    size53FT: false,
    haz: false,
    transload: false,
    chassis: false,
    bonded: false,
    parking: false,
  });
  
  const fileInputRef = useRef(null); // Reference for file input element

  const maxFileSize = 2 * 1024 * 1024; // Maximum file size allowed (2MB)
  const allowedFileTypes = [
    "text/csv",
    "application/vnd.ms-excel",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  ];

  // Handler for file input change
  const handleFileChange = async (event) => {
    const selectedFile = event.target.files[0]; // Get the selected file
    if (selectedFile) {
      const fileTypeAllowed = allowedFileTypes.includes(selectedFile.type); // Check if file type is allowed
      if (!fileTypeAllowed) {
        toast.error(
          "Invalid file type. Please upload a CSV, XLS, or XLSX file.",
          {
            position: toast.POSITION.TOP_CENTER,
          }
        );
        return;
      }
      if (selectedFile.size > maxFileSize) {
        toast.error("File size exceeds 2MB. Please upload a smaller file.", {
          position: toast.POSITION.TOP_CENTER,
        });
        return;
      }

      try {
        const Data = new FormData();
        Data.append("carrier_file", selectedFile); // Append file to FormData
        // Call service function to upload file
        const response = await CarriersCsvUpload(
          user?.data?.user?.image,
          Data
        );

        if (response.status === "success") {
          toast.success(response.message, {
            position: toast.POSITION.TOP_CENTER,
          });
        
        } else {
          toast.error(`Upload failed: ${response.message}`, {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      } catch (error) {
        toast.error("An error occurred during the upload. Please try again.", {
          position: toast.POSITION.TOP_CENTER,
        });
      } finally {
        // Manually reset the file input after the upload
        if (fileInputRef.current) {
          fileInputRef.current.value = null; // Reset input value to allow re-uploading
        }
      }
    }
  };

 

  const DownloadFile = async () => {
    const allIds = selectedRows.map((row) => row.user_id);
    try {
      // Call the API to get the file download URL
      let res = await DownloadRecord(user?.data?.user?.image, allIds);
      // Ensure the response contains the file URL
      if (res?.status === "success" && res?.data) {
        const downloadUrl = res.data; // Correctly extract the file URL
        const anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = "user_carrier_export.xlsx"; // Default file name
        document.body.appendChild(anchor); // Append the anchor to the DOM
        anchor.click(); // Trigger the download
        document.body.removeChild(anchor); // Remove the anchor after download
      } else {
        console.error("Failed to get a valid file URL");
      }
    } catch (error) {
      console.error("Error downloading the file:", error);
    }
  };
  const myCarriersButton =
    props?.keys === "1" ? (
      <button
        onClick={() => changehandler("ok")}
        className="p-button divStylecss-clear"
      >
        My Carrier
      </button>
    ) : null;

  const clearSelectionFilter = () => {
    toast.success("View reset to default successfully.",{
      position: toast.POSITION.TOP_CENTER,
    });
    localStorage.removeItem('carrier_selection');
    setVisibleColumns(columns);
  }

  const editViewFooterTemplate = () => {
    return (
      <div className="py-2 text-center">
        <Button onClick={()=>clearSelectionFilter()}>Default</Button>
      </div>
    );
  };

  const clearResetOrder = async ()=>{
    try {
      if (!tableHeaderId) {
        return;
      }
      const response = await toResetTableHeaderColumns({ id: tableHeaderId });
      if (response?.status === 'success') {
        setResetTableHeaderStatus(prev => !prev);
        setTableKey(prev => prev + 1);
        toast.success(response.message || 'Reset successful', {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    } catch (error) {
      console.error('Error resetting table header:', error);
    }
  }

  const header = (
    <div className="table-header">
      <div className="d-flex justify-content-between align-items-center">
        <div className="new__btn">
          {userData?.SelectAddtoMyCarriers ? addToMyCarriersButton : null}
        </div>
        <div className="table-headers">
          {props?.keys === "1" ? null : (
            <h3 className="filter-text">Filters</h3>
          )}
        </div>

        <div
          key={1}
          className={"form-check form-switch filter_switch content "}
        >
          {/* <p>53FT</p> */}
          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              checked={checkboxState.size20_40FT}
              onChange={(e) => sizeHandler(e, "size20_40FT")}
            />
            <p style={{ fontSize: "small" }} htmlFor={`switch-${""}`}>
              20/40FT
            </p>
          </div>
          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              // checked={false}

              checked={checkboxState.size53FT}
              onChange={(e) => typeHandler(e, "size53FT")}
              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              53FT
            </p>
          </div>

          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              // checked={false}
              checked={checkboxState.haz}
              onChange={(e) => hazHandler(e, "haz")}
              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              HAZ
            </p>
          </div>
          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              checked={checkboxState.transload}
              // checked={false}
              onChange={(e) => transloadHandler(e, "transload")}
              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              TRANSLOAD
            </p>
          </div>
          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              // checked={false}
              onChange={(e) => chassisHandler(e, "chassis")}
              checked={checkboxState.chassis}

              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              CHASSIS
            </p>
          </div>

          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              // checked={false}
              onChange={(e) => bondedHandler(e, "bonded")}
              checked={checkboxState.bonded}

              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              BONDED
            </p>
          </div>

          <div className="switch_box">
            <input
              className="form-check-input check-text-box"
              type="checkbox"
              // id={`switch-${col.field}`}
              // checked={false}
              checked={checkboxState.parking}
              onChange={(e) => parkingHandler(e, "parking")}
              // onChange={() => handleSwitchChange(col.field)}
            />
            <p
              style={{ fontSize: "small" }}
              className=""
              htmlFor={`switch-${""}`}
            >
              PARKING
            </p>
          </div>
        </div>

        <div className="recent_quote">
          {userData?.SelectMyCarriers ? myCarriersButton : ""}
          <MultiSelect
            maxSelectedLabels={0}
            optionLabel="header"
            options={columns}
            placeholder="Edit View"
            selectedItemsLabel="Edit View"
            onChange={onColumnToggle}
            value={visibleColumns}
            className={`${styles.MultiSelect} w-full sm:w-20rem divStylecss`}
            onShow={onShow}
            panelFooterTemplate={editViewFooterTemplate}
          />

          <Button
            className="divStylecss-clear "
            type="button"
            icon="pi pi-filter-slash"
            label="Clear"
            onClick={clearFilter}
          />
          <Button
            className="divStylecss-clear reset-order-button"
            type="button"
            label="Reset Order"
            onClick={clearResetOrder}
          />
          {userType === "super_admin"?<div className="admin-box">
            <Button
              label="Download"
              type="button"
              icon="pi pi-download"
              className="divStylecss-upload "
              disabled={!selectedRows?.length}
              onClick={() => DownloadFile()}
            />
            <div className="">
              <a
                href="/sample_carrier.csv"
                className="anchor"
                style={{ textDecoration: "none", color: "#025bcf !important" }}
                download
              >
                Sample CSV
              </a>
              <input
                type="file"
                id="fileInput"
                onChange={handleFileChange}
                ref={fileInputRef}
                style={{ display: "none" }}
              />
              <label className="btn btn-primary mx-2" htmlFor="fileInput">
                Upload CSV
              </label>
            </div>
          </div>:""}
          
        </div>
      </div>
    </div>
  );
  const headerCheckbox = (
    <input
      type="checkbox"
      className="p-checkbox none-box"
      onChange={selectAllRows}
      disabled={selectedRows?.length === yourData.length}
    />
  );
  const columnComponent =
    props?.keys === "1" ? (
      <Column
        // hidden={disable}
        selectionMode="multiple"
        style={{ width: "3em" }}
        header={headerCheckbox}
      />
    ) : null;
  const rowClass = (data: { is_blocked: number; is_my_carrier: number }) => {
    if (props?.keys === "1") {
      return {
        "bg-danger1": data.is_blocked === 1,
        "bg-fav1": data.is_my_carrier === 1,
      };
    }

    return {};
  };

  const handleReorderTableColumn = async (event: any) => {
    const dataObj: any = {
      intialTableColumn: columns,
      updatedTableColumn: event,
      requestType: 'carriers',
      visibleColumns: visibleColumns,
      setVisibleColumns: setVisibleColumns
    };
    try {
      const responceData = await toUpdateTableColumn(dataObj);
      if (responceData === true) {
        setColumnsUpdateStatusCount(columnsUpdateStatusCount+1);
      } else {
        console.warn("Reorder update failed or unchanged");
        setColumnsUpdateStatusCount(0);
      }
    } catch (err) {
      console.error("Error during reorder update", err);
      setColumnsUpdateStatusCount(0);
    }
  };

  return (
    <div>
      <ToastContainer />
      <>
        <div>
          <SubscriptionPlansModal
            modalStatus={modalStatus}
            SetModalStatus={setModalStatus}
          />

          <div style={{ position: "unset" }} className="userManaagementheader">
            <div style={{ position: "unset" }} className="form-group secDiv">
              {isloading && (
                <div id="loader_table">
                  <ScaleLoader color="#3180f3" className="table_loader" />
                </div>
              )}
              <>
                <div className="datatable-filter-demo">
                  <div
                    className="card table_height"
                    style={{ position: "unset" }}
                  >
                    <Dialog
                      header="Carrier Information"
                      visible={visible}
                      className="custom-dialog"
                      style={{ width: "50vw" }}
                      onHide={closePopup}
                      modal
                    >
                      <div className="ViewDataCarrier">
                        {" "}
                        {/* Top and bottom padding */}
                        <ViewCarrierData viewId={viewId} />
                      </div>
                    </Dialog>

                    <DataTable
                      key={tableKey}
                      rowClassName={rowClass}
                      lazy
                      selection={selectedRows}
                      onSelectionChange={(e: {
                        value: string | SetStateAction<never[]>;
                      }) => {
                        if (e.value.length > selectedRows.length) {
                          SetCount(true);
                          setSelectedRows(e.value);
                        } else {
                          const uncheckedRows = selectedRows.filter(
                            (row) => !e.value.includes(row)
                          );
                          const uncheckedArray = Array.isArray(unchecked)
                            ? unchecked
                            : [unchecked];
                          const uncheckedRowsArray = uncheckedRows.map(
                            (row) => row.id
                          );
                          const updatedUnchecked = [
                            ...new Set([
                              ...uncheckedArray,
                              ...uncheckedRowsArray,
                            ]),
                          ];

                          setunchecked(updatedUnchecked);
                          SetCount(true);
                          setSelectedRows(e.value);
                        }
                      }}
                      filterDisplay="row"
                      ref={dtRef}
                      header={header}
                      value={rateQuotesdata}
                      paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
                      first={first}
                      rows={5}
                      sortField={sortField}
                      sortOrder={sortOrder}
                      onSort={onSortChange}
                      onPage={(e) => {
                        onPageChange(e);
                      }}
                      className="p-datatable-customers table-1233"
                      emptyMessage="No record found."
                      reorderableColumns
                      onColReorder={(e) => handleReorderTableColumn(e.columns)}
                    >
                      {columnComponent}
                      {visibleColumns.map((col) => {
                        const filterElementMap = {
                          carrier_name: quoteFilter,
                          state_names: customerLeadFilter,
                          LEGAL: legalFilter,
                          markets: marketFilter,
                          terminal_names: portTerminalFilter,
                          location: LocationFilter,
                          phone: PhoneFilter,
                        };

                        const bodyTemplateMap = {
                          carrier_name: QuoteBodyTemplate,
                          state_names: CustomerBodyTemplate,
                          LEGAL: legalTemplate,
                          location: LocationBodyTemplate,
                          markets: SalesRepBodyTemplate,
                          terminal_names: Port_terminal,
                          phone: PhoneTemplate,
                        };
                        return (
                          <Column
                            sortable
                            key={col.field}
                            field={col.field}
                            columnKey={col.field}
                            header={col.header}
                            filter
                            filterElement={filterElementMap[col.field]}
                            body={bodyTemplateMap[col.field]}
                            className={col.field === 'carrier_name' ? 'title_heading' : ''}
                          />
                        );
                      })}
                    </DataTable>
                    <div className="pagination_footer">
                      <PaginationTitle first={first} totalRecords={totalRecords} perPageData={perPageDataShow}/>
                      <Paginator
                        rows={rows}
                        first={first}
                        totalRecords={totalRecords}
                        onPageChange={onPageChange}
                        rowsPerPageOptions={[10, 20, 30, 50, 100]}
                      />
                    </div>
                  </div>
                </div>
              </>
            </div>
          </div>
        </div>
      </>
    </div>
  );
}
export default LandingDashboard;
function useEffectModLeadFilter(
  customerLeadFilterValue: string,
  setMarketName
) {
  if (customerLeadFilterValue?.length === 0) {
    MarketingGet("").then((response) => {
      useEffectModLeadFilterMarket(response, setMarketName);
    });
  }
}

function useEffectModLeadFilterMarket(response: any, setMarketName: any) {
  if (ResponseStatus(response)) {
    setMarketName(response?.data);
  }
}

function ResponseStatus(response: any) {
  return response?.status == "success";
}