import { useDispatch, useSelector } from "react-redux";
import { submitProperty } from "../redux/features/propertySlice";
import { useState, useEffect } from "react";
import Navbar from "./Navbar";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import FileBase64 from "react-file-base64";
import "../addproperty.css";

const Addproperty = () => {
  const [activeTab, setActiveTab] = useState("propertydetails");
  const handleContinue = () => {
    if (activeTab === "propertydetails") setActiveTab("Images");
    if (activeTab === "Images") setActiveTab("Accounting");
  };

  const handleBack = () => {
    if (activeTab === "Images") setActiveTab("propertydetails");
    if (activeTab === "Accounting") setActiveTab("Images");
  };

  const dispatch = useDispatch();
  const { status, error } = useSelector((state) => state.property);
  const { user } = useSelector((state) => ({ ...state.auth }));
  const renovationRiskOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Array of options

  const [formData, setFormData] = useState({
    propertyTaxInfo: [
      { propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
    ],
    images: [{ title: "", file: "" }], // Array to hold image objects
    googleMapLink: "", // Field for Google Maps link
    renovationRisk: null,
    purchaseCost: "",
    costPaidAtoB: [
      { title: "Closing Fees - Settlement Fee", price: "" },
      { title: "Closing Fees - Owner's Title Insurance", price: "" },
      { title: "Courier Fees", price: "" },
      { title: "Wire Fee", price: "" },
      { title: "E recording Fee", price: "" },
      { title: "Recording Fee", price: "" },
      { title: "Property Tax", price: "" },
    ],
    credits: [{ title: "Credits received on settlement", price: "" }],
    cashAdjustments: [{ title: "Credits received on settlement", price: "" }],
    incidentalCost: [
      { title: "Accounting Fees", price: "" },
      { title: "Bank Charges", price: "" },
      { title: "Legal Fees", price: "" },
      { title: "Property Taxes", price: "" },
      { title: "Travel Expenses", price: "" },
    ],
    utilMaintenance: [
      { title: "Electricity", price: "" },
      { title: "Water and Sewer", price: "" },
      { title: "Natural Gas", price: "" },
      { title: "Trash and Recycling", price: "" },
      { title: "Internet and Cable", price: "" },
      { title: "Heating Oil/Propane", price: "" },
      { title: "HOA fees", price: "" },
      { title: "Dump fees", price: "" },
      { title: "Insurance", price: "" },
      { title: "Interest on Loans", price: "" },
      { title: "Loan Payment", price: "" },
      { title: "Property Taxes", price: "" },
      { title: "Security", price: "" },
      { title: "Real Estates fees", price: "" },
    ],
    renovationCost: [
      {
        title: "Demolition: Removing existing structures or finishes",
        price: "",
      },
      { title: "Framing: Making structural changes or additions", price: "" },
      {
        title: "Plumbing: Installing or modifying plumbing systems",
        price: "",
      },
      { title: "Electrical: Updating wiring and fixtures", price: "" },
      {
        title: "HVAC: Installing or upgrading heating and cooling systems",
        price: "",
      },
      { title: "Insulation: Adding or replacing insulation", price: "" },
      { title: "Drywall: Hanging and finishing drywall", price: "" },
      {
        title: "Interior Finishes: Painting, flooring, cabinetry, and fixtures",
        price: "",
      },
      {
        title:
          "Exterior Work: Addressing siding, roofing, or landscaping, if applicable",
        price: "",
      },
      {
        title: "Final Inspections: Ensuring everything meets codes",
        price: "",
      },
      { title: "Punch List: Completing any remaining task", price: "" },
    ],
  });

  const [submitted, setSubmitted] = useState(false);

  const handleImageChange = (file, index) => {
    const updatedImages = [...formData.images];
    updatedImages[index].file = file.base64; // store base64 format of image
    setFormData({ ...formData, images: updatedImages });
  };

  const handleAddImage = () => {
    setFormData({
      ...formData,
      images: [...formData.images, { title: "", file: "" }],
    });
  };

  const handleDeleteImage = (index) => {
    const updatedImages = formData.images.filter((_, i) => i !== index);
    setFormData({ ...formData, images: updatedImages });
  };

  const handleImageTitleChange = (index, e) => {
    const updatedImages = [...formData.images];
    updatedImages[index].title = e.target.value;
    setFormData({ ...formData, images: updatedImages });
  };

  const handleInputChange = (e, index, fieldName) => {
    const { name, value } = e.target;
    if (fieldName === "propertyTaxInfo") {
      const updatedPropertyTaxInfo = [...formData.propertyTaxInfo];
      updatedPropertyTaxInfo[index][name] = value;
      setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  const addPropertyTaxField = () => {
    setFormData({
      ...formData,
      propertyTaxInfo: [
        ...formData.propertyTaxInfo,
        { propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
      ],
    });
  };

  const deletePropertyTaxField = (index) => {
    const updatedPropertyTaxInfo = formData.propertyTaxInfo.filter(
      (_, i) => i !== index
    );
    setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
  };

  const addCost = () => {
    setFormData((prevData) => ({
      ...prevData,
      costPaidAtoB: [...prevData.costPaidAtoB, { title: "", price: "" }],
    }));
  };

  const deleteCost = (index) => {
    const updatedCosts = formData.costPaidAtoB.filter((_, i) => i !== index);
    setFormData((prevData) => ({
      ...prevData,
      costPaidAtoB: updatedCosts,
    }));
  };

  // Function to handle changes to title and price
  const handleCostChange = (index, field, value) => {
    const updatedCosts = [...formData.costPaidAtoB];
    updatedCosts[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      costPaidAtoB: updatedCosts,
    }));
  };

  const handlePriceChange = (e, index) => {
    const value = e.target.value;

    // Use a regular expression to allow only numbers and decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedCosts = formData.costPaidAtoB.map((cost, i) =>
        i === index
          ? { ...cost, price: value, isInvalid: false } // Reset isInvalid if valid number
          : cost
      );
      setFormData({ ...formData, costPaidAtoB: updatedCosts });
    } else {
      const updatedCosts = formData.costPaidAtoB.map((cost, i) =>
        i === index
          ? { ...cost, isInvalid: true } // Keep isInvalid true for invalid input
          : cost
      );
      setFormData({ ...formData, costPaidAtoB: updatedCosts });
    }
  };

  const calculateTotalCosts = () => {
    const totalCostsFromArray = formData.costPaidAtoB.reduce((total, cost) => {
      const price = parseFloat(cost.price) || 0; // Convert price to number
      return total + price;
    }, 0);

    const purchaseCost = parseFloat(formData.purchaseCost) || 0; // Convert purchase cost to number

    return totalCostsFromArray + purchaseCost; // Return the total
  };

  const addCredits = () => {
    setFormData((prevData) => ({
      ...prevData,
      credits: [...prevData.credits, { title: "", price: "" }],
    }));
  };

  const deleteCredits = (index) => {
    const updatedCredits = formData.credits.filter((_, i) => i !== index);
    setFormData((prevData) => ({
      ...prevData,
      credits: updatedCredits,
    }));
  };

  // Function to handle changes to credits title and price
  const handleCreditChange = (index, field, value) => {
    const updatedCredits = [...formData.credits];
    updatedCredits[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      credits: updatedCredits,
    }));
  };

  const handleCreditPriceChange = (e, index) => {
    const value = e.target.value;

    // Regular expression to allow only numbers and optional decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedCredits = formData.credits.map((credit, i) =>
        i === index
          ? { ...credit, price: value, isInvalid: false } // Reset isInvalid if valid number
          : credit
      );
      setFormData({ ...formData, credits: updatedCredits });
    } else {
      const updatedCredits = formData.credits.map((credit, i) =>
        i === index
          ? { ...credit, isInvalid: true } // Set isInvalid true for invalid input
          : credit
      );
      setFormData({ ...formData, credits: updatedCredits });
    }
  };

  const calculateTotalCredits = () => {
    return formData.credits.reduce((total, credits) => {
      const price = parseFloat(credits.price);
      return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
    }, 0);
  };

  const calculateTotalCostsWithCredits = () => {
    // Calculate total from costPaidAtoB array
    const totalCostsFromArray = formData.costPaidAtoB.reduce((total, cost) => {
      const price = parseFloat(cost.price) || 0; // Convert price to number
      return total + price;
    }, 0);

    // Calculate total from credits array
    const totalCreditsFromArray = formData.credits.reduce((total, credit) => {
      const price = parseFloat(credit.price) || 0; // Convert price to number
      return total + price;
    }, 0);

    // Convert purchase cost to number
    const purchaseCost = parseFloat(formData.purchaseCost) || 0;
    return totalCostsFromArray + totalCreditsFromArray + purchaseCost;
  };

  const addcashAdjustments = () => {
    setFormData((prevData) => ({
      ...prevData,
      cashAdjustments: [...prevData.cashAdjustments, { title: "", price: "" }],
    }));
  };

  const deletecashAdjustments = (index) => {
    const updatedcashAdjustments = formData.cashAdjustments.filter(
      (_, i) => i !== index
    );
    setFormData((prevData) => ({
      ...prevData,
      cashAdjustments: updatedcashAdjustments,
    }));
  };

  // Function to handle changes to cashAdjustments title and price
  const handlecashAdjustmentsTitle = (index, field, value) => {
    const updatedcashAdjustments = [...formData.cashAdjustments];
    updatedcashAdjustments[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      cashAdjustments: updatedcashAdjustments,
    }));
  };

  const handlecashAdjustmentsCostChange = (e, index) => {
    const value = e.target.value;

    // Regular expression to allow only numbers and optional decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedcashAdjustments = formData.cashAdjustments.map(
        (cashAdjustments, i) =>
          i === index
            ? { ...cashAdjustments, price: value, isInvalid: false } // Reset isInvalid if valid number
            : cashAdjustments
      );
      setFormData({ ...formData, cashAdjustments: updatedcashAdjustments });
    } else {
      const updatedcashAdjustments = formData.cashAdjustments.map(
        (cashAdjustments, i) =>
          i === index
            ? { ...cashAdjustments, isInvalid: true } // Set isInvalid true for invalid input
            : cashAdjustments
      );
      setFormData({ ...formData, cashAdjustments: updatedcashAdjustments });
    }
  };

  // Calculate total from cash Adjustments array
  const calculatecashAdjustments = () => {
    return formData.cashAdjustments.reduce((total, cashAdjustments) => {
      const price = parseFloat(cashAdjustments.price);
      return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
    }, 0);
  };

  const addincidentalCost = () => {
    setFormData((prevData) => ({
      ...prevData,
      incidentalCost: [...prevData.incidentalCost, { title: "", price: "" }],
    }));
  };

  const deleteincidentalCost = (index) => {
    const updatedincidentalCost = formData.incidentalCost.filter(
      (_, i) => i !== index
    );
    setFormData((prevData) => ({
      ...prevData,
      incidentalCost: updatedincidentalCost,
    }));
  };

  // Function to handle changes to incidentalCost title and price
  const handleincidentalCostTitle = (index, field, value) => {
    const updatedincidentalCost = [...formData.incidentalCost];
    updatedincidentalCost[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      incidentalCost: updatedincidentalCost,
    }));
  };

  const handleincidentalCostChange = (e, index) => {
    const value = e.target.value;

    // Regular expression to allow only numbers and optional decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedincidentalCost = formData.incidentalCost.map(
        (incidentalCost, i) =>
          i === index
            ? { ...incidentalCost, price: value, isInvalid: false } // Reset isInvalid if valid number
            : incidentalCost
      );
      setFormData({ ...formData, incidentalCost: updatedincidentalCost });
    } else {
      const updatedincidentalCost = formData.incidentalCost.map(
        (incidentalCost, i) =>
          i === index
            ? { ...incidentalCost, isInvalid: true } // Set isInvalid true for invalid input
            : incidentalCost
      );
      setFormData({ ...formData, incidentalCost: updatedincidentalCost });
    }
  };

  // Calculate total from incidentalCost array
  const calculateTotalincidentalCost = () => {
    return formData.incidentalCost.reduce((total, incidentalCost) => {
      const price = parseFloat(incidentalCost.price);
      return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
    }, 0);
  };

  const addutilMaintenanceCost = () => {
    setFormData((prevData) => ({
      ...prevData,
      utilMaintenance: [...prevData.utilMaintenance, { title: "", price: "" }],
    }));
  };

  const deleteutilMaintenanceCost = (index) => {
    const updatedutilMaintenance = formData.utilMaintenance.filter(
      (_, i) => i !== index
    );
    setFormData((prevData) => ({
      ...prevData,
      utilMaintenance: updatedutilMaintenance,
    }));
  };

  // Function to handle changes to incidentalCost title and price
  const handleutilMaintenanceTitle = (index, field, value) => {
    const updatedutilMaintenance = [...formData.utilMaintenance];
    updatedutilMaintenance[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      utilMaintenance: updatedutilMaintenance,
    }));
  };

  const handleutilMaintenanceCostChange = (e, index) => {
    const value = e.target.value;

    // Regular expression to allow only numbers and optional decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedutilMaintenance = formData.utilMaintenance.map(
        (utilMaintenance, i) =>
          i === index
            ? { ...utilMaintenance, price: value, isInvalid: false } // Reset isInvalid if valid number
            : utilMaintenance
      );
      setFormData({ ...formData, utilMaintenance: updatedutilMaintenance });
    } else {
      const updatedutilMaintenance = formData.utilMaintenance.map(
        (utilMaintenance, i) =>
          i === index
            ? { ...utilMaintenance, isInvalid: true } // Set isInvalid true for invalid input
            : utilMaintenance
      );
      setFormData({ ...formData, utilMaintenance: updatedutilMaintenance });
    }
  };

  // Calculate total from incidentalCost array
  const calculatetotalutilMaintenanceCost = () => {
    return formData.utilMaintenance.reduce((total, utilMaintenance) => {
      const price = parseFloat(utilMaintenance.price);
      return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
    }, 0);
  };

  const addrenovationCost = () => {
    setFormData((prevData) => ({
      ...prevData,
      renovationCost: [...prevData.renovationCost, { title: "", price: "" }],
    }));
  };

  const deleterenovationCost = (index) => {
    const updatedrenovationCost = formData.renovationCost.filter(
      (_, i) => i !== index
    );
    setFormData((prevData) => ({
      ...prevData,
      renovationCost: updatedrenovationCost,
    }));
  };

  // Function to handle changes to renovation Cost title and price
  const handlerenovationCostTitle = (index, field, value) => {
    const updatedrenovationCost = [...formData.renovationCost];
    updatedrenovationCost[index][field] = value;
    setFormData((prevData) => ({
      ...prevData,
      renovationCost: updatedrenovationCost,
    }));
  };

  const handlerenovationCostChange = (e, index) => {
    const value = e.target.value;

    // Regular expression to allow only numbers and optional decimals
    const isNumber = /^\d*\.?\d*$/.test(value);

    // If valid number, update state, otherwise show the alert
    if (isNumber || value === "") {
      const updatedrenovationCost = formData.renovationCost.map(
        (renovationCost, i) =>
          i === index
            ? { ...renovationCost, price: value, isInvalid: false } // Reset isInvalid if valid number
            : renovationCost
      );
      setFormData({ ...formData, renovationCost: updatedrenovationCost });
    } else {
      const updatedrenovationCost = formData.renovationCost.map(
        (renovationCost, i) =>
          i === index
            ? { ...renovationCost, isInvalid: true } // Set isInvalid true for invalid input
            : renovationCost
      );
      setFormData({ ...formData, renovationCost: updatedrenovationCost });
    }
  };

  // Calculate total from incidentalCost array
  const calculaterenovationCost = () => {
    return formData.renovationCost.reduce((total, renovationCost) => {
      const price = parseFloat(renovationCost.price);
      return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
    }, 0);
  };

  const calculatecostsAfterPropertyAcquisition = () => {
    const totalIncidentalCost = calculateTotalincidentalCost();
    const totalUtilMaintenanceCost = calculatetotalutilMaintenanceCost();
    const totalRenovationCost = calculaterenovationCost();

    // Sum up all the values from the three functions
    return totalIncidentalCost + totalUtilMaintenanceCost + totalRenovationCost;
  };

  const handleNumericInput = (e) => {
    const value = e.target.value;

    // Check if the input is not a valid number
    if (isNaN(value)) {
      setFormData({
        ...formData,
        isInvalid: true, // Set validation flag if not a number
      });
    } else {
      setFormData({
        ...formData,
        totalcashsurplus: value,
        isInvalid: false, // Reset validation flag if valid
      });
    }
  };

  const handleSubmit = () => {
    if (
      formData.address &&
      formData.city &&
      formData.state &&
      formData.county &&
      formData.zip &&
      formData.parcel &&
      formData.subdivision &&
      formData.legal &&
      formData.costpersqft &&
      formData.propertyType &&
      formData.lotacres &&
      formData.yearBuild &&
      formData.totallivingsqft &&
      formData.beds &&
      formData.baths &&
      formData.stories &&
      formData.garage &&
      formData.garagesqft &&
      formData.poolspa &&
      formData.fireplaces &&
      formData.ac &&
      formData.heating &&
      formData.buildingstyle &&
      formData.sitevacant &&
      formData.extwall &&
      formData.roofing &&
      formData.totalSqft &&
      formData.renovationRisk &&
      formData.totalcashsurplus &&
      formData.sellpricebtoc &&
      formData.closeDateAtoB &&
      formData.closeDateBtoC  
    ) {
      const totalCostsAtoB = calculateTotalCosts();
      const totalCostsAtoBaftercredits = calculateTotalCostsWithCredits();
      const totalcashAdjustments = calculatecashAdjustments();
      const totalincidentalCost = calculateTotalincidentalCost();
      const totalcredits = calculateTotalCredits();
      const totalutilMaintenanceCost = calculatetotalutilMaintenanceCost();
      const totalrenovationCost = calculaterenovationCost();
      const costsAfterPropertyAcquisition =
        calculatecostsAfterPropertyAcquisition();

      // Add user info to formData, including the propertyTaxInfo array
      const formDataWithUserInfo = {
        ...formData,
        userfirstname: user?.result?.firstName,
        usermiddlename: user?.result?.middleName,
        userlastname: user?.result?.lastName,
        usertitle: user?.result?.title,
        useremail: user?.result?.email,
        userId: user?.result?.userId,
        totalCostsAtoB: totalCostsAtoB,
        totalcredits: totalcredits,
        totalCostsAtoBaftercredits: totalCostsAtoBaftercredits,
        totalcashAdjustments: totalcashAdjustments,
        totalincidentalCost: totalincidentalCost,
        totalutilMaintenanceCost: totalutilMaintenanceCost,
        totalrenovationCost: totalrenovationCost,
        costsAfterPropertyAcquisition: costsAfterPropertyAcquisition,
      };

      // Check if propertyTaxInfo is an array and has values
      if (
        Array.isArray(formData.propertyTaxInfo) &&
        formData.propertyTaxInfo.length > 0
      ) {
        formDataWithUserInfo.propertyTaxInfo = formData.propertyTaxInfo; // Include propertyTaxInfo
      } else {
        formDataWithUserInfo.propertyTaxInfo = []; // Ensure it's an empty array if not filled
      }

      // Dispatch the form data with user info
      dispatch(submitProperty(formDataWithUserInfo));
      setSubmitted(true);
    } else {
      toast.error("Please fill all fields before submitting", {
        position: "top-right",
        autoClose: 3000,
      });
    }
  };

  useEffect(() => {
    if (submitted) {
      if (status === "succeeded") {
        toast.success("Property submitted successfully!", {
          position: "top-right",
          autoClose: 3000,
        });
        setSubmitted(false);
      } else if (status === "failed") {
        toast.error(`Failed to submit: ${error}`, {
          position: "top-right",
          autoClose: 3000,
        });
        setSubmitted(false);
      }
    }
  }, [status, error, submitted]);

  const [turnTime, setTurnTime] = useState("0 days"); // Store the calculated turn time

  const calculateTurnTime = (closeDateAtoB, closeDateBtoC) => {
    if (closeDateAtoB && closeDateBtoC) {
      const dateA = new Date(closeDateAtoB);
      const dateB = new Date(closeDateBtoC);
  
      // Calculate difference in time
      const diffTime = Math.abs(dateB - dateA);
  
      // Calculate difference in days
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
      // Update state with the calculated turn time
      // setTurnTime(diffDays);
      setTurnTime(`${diffDays} days`);
    } else {
      setTurnTime("0 days"); // Reset if dates are not available
    }
  };
  

  return (
    <>
      <div className="container tabs-wrap">
        <Navbar />

        <ul className="nav nav-tabs" role="tablist">
          <li
            role="presentation"
            className={activeTab === "propertydetails" ? "active tab" : "tab"}
          >
            <a onClick={() => setActiveTab("propertydetails")} role="tab">
              Property Details
            </a>
          </li>
          <li
            role="presentation"
            className={activeTab === "Images" ? "active tab" : "tab"}
          >
            <a onClick={() => setActiveTab("Images")} role="tab">
              Images, Maps
            </a>
          </li>

          <li
            role="presentation"
            className={activeTab === "Accounting" ? "active tab" : "tab"}
          >
            <a onClick={() => setActiveTab("Accounting")} role="tab">
              Accounting
            </a>
          </li>
        </ul>

        <div className="tab-content">
          {activeTab === "propertydetails" && (
            <div role="tabpanel" className="card tab-pane active">
              <form>
                <h3
                  style={{
                    color: "#fda417",
                    border: "#fda417",
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}
                >
                  Property Location
                </h3>
                <hr
                  style={{
                    borderColor: "#fda417", // Set the color of the line
                    borderWidth: "1px", // Optional: Adjust the thickness of the line
                    backgroundColor: "#fda417", // Optional: Apply color if using for background
                    height: "1px", // Optional: Set height to match the border width
                  }}
                />
                <div className="row gy-3">
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Property Address
                      <input
                        type="text"
                        className="form-control"
                        name="address"
                        value={formData.address}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      City
                      <input
                        type="text"
                        className="form-control"
                        name="city"
                        value={formData.city}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      State
                      <select
                        className="form-floating mb-3 form-control"
                        name="state"
                        value={formData.state}
                        onChange={handleInputChange}
                        required
                      >
                        <option value="">Please Select</option>
                        <option value="Alaska">Alaska</option>
                        <option value="Alabama">Alabama</option>
                        <option value="Arkansas">Arkansas</option>
                        <option value="Arizona">Arizona</option>
                        <option value="California">California</option>
                        <option value="Colorado">Colorado</option>
                        <option value="Connecticut">Connecticut</option>
                        <option value="District Of Columbia">
                          District Of Columbia
                        </option>
                        <option value="Delaware">Delaware</option>
                        <option value="Florida">Florida</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Hawaii">Hawaii</option>
                        <option value="Iowa">Iowa</option>
                        <option value="Idaho">Idaho</option>
                        <option value="Illinois">Illinois</option>
                        <option value="Indiana">Indiana</option>
                        <option value="Kansas">Kansas</option>
                        <option value="Kentucky">Kentucky</option>
                        <option value="Louisiana">Louisiana</option>
                        <option value="Massachusetts">Massachusetts</option>
                        <option value="Maryland">Maryland</option>
                        <option value="Michigan">Michigan</option>
                        <option value="Minnesota">Minnesota</option>
                        <option value="Missouri">Missouri</option>
                        <option value="Mississippi">Mississippi</option>
                        <option value="Montana">Montana</option>
                        <option value="North Carolina">North Carolina</option>
                        <option value="North Dakota">North Dakota</option>
                        <option value="Nebraska">Nebraska</option>
                        <option value="New Hampshire">New Hampshire</option>
                        <option value="New Jersey">New Jersey</option>
                        <option value="New Mexico">New Mexico</option>
                        <option value="Nevada">Nevada</option>
                        <option value="New York">New York</option>
                        <option value="Ohio">Ohio</option>
                        <option value="Oklahoma">Oklahoma</option>
                        <option value="Oregon">Oregon</option>
                        <option value="Pennsylvania">Pennsylvania</option>
                        <option value="Rhode Island">Rhode Island</option>
                        <option value="South Carolina">South Carolina</option>
                        <option value="South Dakota">South Dakota</option>
                        <option value="Tennessee">Tennessee</option>
                        <option value="Texas">Texas</option>
                        <option value="Texas">Travis</option>
                        <option value="Utah">Utah</option>
                        <option value="Virginia">Virginia</option>
                        <option value="Vermont">Vermont</option>
                        <option value="Washington">Washington</option>
                        <option value="Wisconsin">Wisconsin</option>
                        <option value="West Virginia">West Virginia</option>
                        <option value="Wyoming">Wyoming</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    County
                    <select
                      className="form-floating mb-3 form-control"
                      name="county"
                      value={formData.county}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="Abbeville">Abbeville</option>
                      <option value="Aiken">Aiken</option>
                      <option value="Allendale">Allendale</option>
                      <option value="Anderson">Anderson</option>
                      <option value="Bamberg">Bamberg</option>
                      <option value="Barnwell">Barnwell</option>
                      <option value="Beaufort">Beaufort</option>
                      <option value="Berkeley">Berkeley</option>
                      <option value="Calhoun">Calhoun</option>
                      <option value="Charleston">Charleston</option>
                      <option value="Cherokee">Cherokee</option>
                      <option value="Chester">Chester</option>
                      <option value="Chesterfield">Chesterfield</option>
                      <option value="Clarendon">Clarendon</option>
                      <option value="Colleton">Colleton</option>
                      <option value="Darlington">Darlington</option>
                      <option value="Dillon">Dillon</option>
                      <option value="Dorchester">Dorchester</option>
                      <option value="Edgefield">Edgefield</option>
                      <option value="Fairfield">Fairfield</option>
                      <option value="Florence">Florence</option>
                      <option value="Georgetown">Georgetown</option>
                      <option value="Greenville">Greenville</option>
                      <option value="Greenwood">Greenwood</option>
                      <option value="Hampton">Hampton</option>
                      <option value="Horry">Horry</option>
                      <option value="Jasper">Jasper</option>
                      <option value="Kershaw">Kershaw</option>
                      <option value="Lancaster">Lancaster</option>
                      <option value="Laurens">Laurens</option>
                      <option value="Lee">Lee</option>
                      <option value="Lexington">Lexington</option>
                      <option value="Marion">Marion</option>
                      <option value="Marlboro">Marlboro</option>
                      <option value="McCormick">McCormick</option>
                      <option value="Newberry">Newberry</option>
                      <option value="Oconee">Oconee</option>
                      <option value="Orangeburg">Orangeburg</option>
                      <option value="Pickens">Pickens</option>
                      <option value="Richland">Richland</option>
                      <option value="Saluda">Saluda</option>
                      <option value="Spartanburg">Spartanburg</option>
                      <option value="Sumter">Sumter</option>
                      <option value="Union">Union</option>
                      <option value="Williamsburg">Williamsburg</option>
                      <option value="York">York</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Zip
                      <input
                        type="text"
                        className="form-control"
                        name="zip"
                        value={formData.zip}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Parcel
                      <input
                        type="text"
                        className="form-control"
                        name="parcel"
                        value={formData.parcel}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Sub division
                      <input
                        type="text"
                        className="form-control"
                        name="subdivision"
                        value={formData.subdivision}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Legal Description
                      <textarea
                        type="text"
                        className="form-control"
                        name="legal"
                        value={formData.legal}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>

                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Cost per SQFT
                      <input
                        type="text"
                        className="form-control"
                        name="costpersqft"
                        value={formData.costpersqft}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    Property Type
                    <select
                      className="form-floating mb-3 form-control"
                      name="propertyType"
                      value={formData.propertyType}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="Residential">Residential</option>
                      <option value="Land">Land</option>
                      <option value="Commercial">Commercial</option>
                      <option value="Industrial">Industrial</option>
                      <option value="Water">Water</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Lot Acres/Sqft
                      <input
                        type="text"
                        className="form-control"
                        name="lotacres"
                        value={formData.lotacres}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Year Build
                      <input
                        type="text"
                        className="form-control"
                        name="yearBuild"
                        value={formData.yearBuild}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Total Living SQFT
                      <input
                        type="text"
                        className="form-control"
                        name="totallivingsqft"
                        value={formData.totallivingsqft}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Beds
                      <input
                        type="text"
                        className="form-control"
                        name="beds"
                        value={formData.beds}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Baths
                      <input
                        type="text"
                        className="form-control"
                        name="baths"
                        value={formData.baths}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    Stories
                    <select
                      className="form-floating mb-3 form-control"
                      name="stories"
                      value={formData.stories}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="0">0</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    Garage
                    <select
                      className="form-floating mb-3 form-control"
                      name="garage"
                      value={formData.garage}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="0">0</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Garage SQFT
                      <input
                        type="text"
                        className="form-control"
                        name="garagesqft"
                        value={formData.garagesqft}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    Pool/SPA
                    <select
                      className="form-floating mb-3 form-control"
                      name="poolspa"
                      value={formData.poolspa}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="Yes- Pool Only">Yes- Pool Only</option>
                      <option value="Yes- SPA only">Yes- SPA only</option>
                      <option value="Yes - Both Pool and SPA">
                        Yes - Both Pool and SPA
                      </option>
                      <option value="4">None</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    Fire places
                    <select
                      className="form-floating mb-3 form-control"
                      name="fireplaces"
                      value={formData.fireplaces}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    A/C
                    <select
                      className="form-floating mb-3 form-control"
                      name="ac"
                      value={formData.ac}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="Central">Central</option>
                      <option value="Heat Pump">Heat Pump</option>
                      <option value="Warm Air">Warm Air</option>
                      <option value="Forced Air">Forced Air</option>
                      <option value="Gas">Gas</option>
                    </select>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    Heating
                    <select
                      className="form-floating mb-3 form-control"
                      name="heating"
                      value={formData.heating}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="Central">Central</option>
                      <option value="Heat Pump">Heat Pump</option>
                      <option value="Warm Air">Warm Air</option>
                      <option value="Forced Air">Forced Air</option>
                      <option value="Gas">Gas</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    Building Style
                    <select
                      className="form-floating mb-3 form-control"
                      name="buildingstyle"
                      value={formData.buildingstyle}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="One Story">One Story</option>
                      <option value="Craftsman">Craftsman</option>
                      <option value="Log/Cabin">Log/Cabin</option>
                      <option value="Split-Level">Split-Level</option>
                      <option value="Split-Foyer">Split-Foyer</option>
                      <option value="Stick Built">Stick Built</option>
                      <option value="Single wide">Single wide</option>
                      <option value="Double wide">Double wide</option>
                      <option value="Duplex">Duplex</option>
                      <option value="Triplex">Triplex</option>
                      <option value="Quadruplex">Quadruplex</option>
                      <option value="Two Story">Two Story</option>
                      <option value="Victorian">Victorian</option>
                      <option value="Tudor">Tudor</option>
                      <option value="Modern">Modern</option>
                      <option value="Art Deco">Art Deco</option>
                      <option value="Bungalow">Bungalow</option>
                      <option value="Mansion">Mansion</option>
                      <option value="Farmhouse">Farmhouse</option>
                      <option value="Conventional">Conventional</option>
                      <option value="Ranch">Ranch</option>
                      <option value="Ranch with Basement">
                        Ranch with Basement
                      </option>
                      <option value="Cape Cod">Cape Cod</option>
                      <option value="Contemporary">Contemporary</option>
                      <option value="Colonial">Colonial</option>
                      <option value="Mediterranean">Mediterranean</option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    Site Vacant
                    <select
                      className="form-floating mb-3 form-control"
                      name="sitevacant"
                      value={formData.sitevacant}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please select</option>
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                </div>

                <div className="row gy-3">
                  <div className="col-md-4">
                    Ext Wall
                    <select
                      className="form-floating mb-3 form-control"
                      name="extwall"
                      value={formData.extwall}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="Brick">Brick</option>
                      <option value="Brick/Vinyl Siding">
                        Brick/Vinyl Siding
                      </option>
                      <option value="Wood/Vinyl Siding">
                        Wood/Vinyl Siding
                      </option>
                      <option value="Brick/Wood Siding">
                        Brick/Wood Siding
                      </option>
                      <option value="Stone">Stone</option>
                      <option value="Masonry">Masonry</option>
                      <option value="Metal">Metal</option>
                      <option value="Fiberboard">Fiberboard</option>
                      <option value="Asphalt Siding">Asphalt Siding</option>
                      <option value="Concrete Block">Concrete Block</option>
                      <option value="Gable">Gable</option>
                      <option value="Brick Veneer">Brick Veneer</option>
                      <option value="Frame">Frame</option>
                      <option value="Siding">Siding</option>
                      <option value="Cement/Wood Fiber Siding">
                        Cement/Wood Fiber Siding
                      </option>
                      <option value="Fiber/Cement Siding">
                        Fiber/Cement Siding
                      </option>
                      <option value="Wood Siding">Wood Siding</option>
                      <option value="Vinyl Siding">Vinyl Siding</option>
                      <option value="Aluminium Siding">Aluminium Siding</option>
                      <option value="Wood/Vinyl Siding">
                        Alum/Vinyl Siding
                      </option>
                    </select>
                  </div>
                  <div className="col-md-4">
                    Roofing
                    <select
                      className="form-floating mb-3 form-control"
                      name="roofing"
                      value={formData.roofing}
                      onChange={handleInputChange}
                      required
                    >
                      <option value="">Please Select</option>
                      <option value="N/A">N/A</option>
                      <option value="Asphalt Shingle">Asphalt Shingle</option>
                      <option value="Green Roofs">Green Roofs</option>
                      <option value="Built-up Roofing">Built-up Roofing</option>
                      <option value="Composition Shingle">
                        Composition Shingle
                      </option>
                      <option value="Composition Shingle Heavy">
                        Composition Shingle Heavy
                      </option>
                      <option value="Solar tiles">Solar tiles</option>
                      <option value="Metal">Metal</option>
                      <option value="Stone-coated steel">
                        Stone-coated steel
                      </option>
                      <option value="Slate">Slate</option>
                      <option value="Rubber Slate">Rubber Slate</option>
                      <option value="Clay and Concrete tiles">
                        Clay and Concrete tiles
                      </option>
                    </select>
                  </div>

                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      Total SQFT
                      <input
                        type="text"
                        className="form-control"
                        name="totalSqft"
                        value={formData.totalSqft}
                        onChange={handleInputChange}
                        required
                      />
                    </div>
                  </div>
                </div>

                <h3
                  style={{
                    color: "#fda417",
                    border: "#fda417",
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}
                >
                  <br />
                  Property Tax Information
                </h3>
                <hr
                  style={{
                    borderColor: "#fda417", // Set the color of the line
                    borderWidth: "1px", // Optional: Adjust the thickness of the line
                    backgroundColor: "#fda417", // Optional: Apply color if using for background
                    height: "1px", // Optional: Set height to match the border width
                  }}
                />

                {formData.propertyTaxInfo.map((taxInfo, index) => (
                  <div className="row gy-4" key={index}>
                    <div className="col-md-3">
                      <div className="form-floating mb-3">
                        Property Tax Owned
                        <input
                          type="text"
                          className="form-control"
                          name="propertytaxowned"
                          value={taxInfo.propertytaxowned}
                          onChange={(e) =>
                            handleInputChange(e, index, "propertyTaxInfo")
                          }
                          required
                        />
                      </div>
                    </div>
                    <div className="col-md-2">
                      <div className="form-floating mb-2">
                        Owned Year
                        <input
                          type="text"
                          className="form-control"
                          name="ownedyear"
                          value={taxInfo.ownedyear}
                          onChange={(e) =>
                            handleInputChange(e, index, "propertyTaxInfo")
                          }
                          required
                        />
                      </div>
                    </div>
                    <div className="col-md-2">
                      <div className="form-floating mb-2">
                        Tax Assessed
                        <input
                          type="text"
                          className="form-control"
                          name="taxassessed"
                          value={taxInfo.taxassessed}
                          onChange={(e) =>
                            handleInputChange(e, index, "propertyTaxInfo")
                          }
                          required
                        />
                      </div>
                    </div>
                    <div className="col-md-2">
                      <div className="form-floating mb-2">
                        Tax Year
                        <input
                          type="text"
                          className="form-control"
                          name="taxyear"
                          value={taxInfo.taxyear}
                          onChange={(e) =>
                            handleInputChange(e, index, "propertyTaxInfo")
                          }
                          required
                        />
                      </div>
                    </div>

                    <div className="col-md-3">
                      <div className="form-floating mb-2">
                        <br />
                        <button
                          className="btn btn-danger"
                          onClick={() => deletePropertyTaxField(index)}
                          style={{ height: "25px", width: "35px" }}
                        >
                          X
                        </button>
                      </div>
                    </div>
                  </div>
                ))}

                <button
                  className="btn btn-secondary"
                  onClick={addPropertyTaxField}
                >
                  + Add Another Property Tax Info
                </button>
              </form>

              <button
                className="btn btn-primary continue"
                onClick={handleContinue}
                style={{ backgroundColor: "#fda417", border: "#fda417" }}
              >
                Continue
              </button>
            </div>
          )}

          {activeTab === "Images" && (
            <div role="tabpanel" className="card tab-pane active">
              <h3
                style={{
                  color: "#fda417",
                  border: "#fda417",
                  fontSize: "20px",
                  fontWeight: "normal",
                }}
              >
                Upload Images{" "}
              </h3>
              <form>
                {formData.images.map((image, index) => (
                  <div key={index} className="row gy-3 align-items-center">
                    <div className="col-md-4">
                      <input
                        type="text"
                        className="form-control"
                        value={image.title}
                        placeholder="Image Title"
                        onChange={(e) => handleImageTitleChange(index, e)}
                      />
                    </div>
                    <div className="col-md-4 d-flex align-items-center">
                      <FileBase64
                        multiple={false}
                        onDone={(file) => handleImageChange(file, index)}
                      />
                      <button
                        type="button"
                        className="btn btn-danger"
                        onClick={() => handleDeleteImage(index)}
                        style={{
                          marginLeft: "5px", // Adjust this to minimize space between the buttons
                        }}
                      >
                        Delete
                      </button>
                    </div>

                    {image.file && (
                      <div className="col-md-12">
                        <img
                          src={image.file}
                          alt="uploaded"
                          style={{ width: "150px", height: "150px" }}
                        />
                      </div>
                    )}
                  </div>
                ))}

                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={handleAddImage}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  + Add Image
                </button>

                <hr
                  style={{
                    borderColor: "#fda417", // Set the color of the line
                    borderWidth: "1px", // Optional: Adjust the thickness of the line
                    backgroundColor: "#fda417", // Optional: Apply color if using for background
                    height: "1px", // Optional: Set height to match the border width
                  }}
                />
                <div className="mb-3">
                  <label htmlFor="googleMapLink" className="form-label">
                    <h3
                      style={{
                        color: "#fda417",
                        border: "#fda417",
                        fontSize: "20px",
                        fontWeight: "normal",
                      }}
                    >
                      Google Maps Link{" "}
                    </h3>
                  </label>
                  <input
                    type="text"
                    className="form-control"
                    name="googleMapLink"
                    value={formData.googleMapLink}
                    onChange={handleInputChange}
                    placeholder="Enter Google Maps link"
                  />
                </div>

                {formData.googleMapLink && (
                  <iframe
                    title="Google Map"
                    width="100%"
                    height="300"
                    src={`https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY&center=${formData.googleMapLink}&zoom=10`}
                    frameBorder="0"
                    allowFullScreen
                  ></iframe>
                )}
              </form>
              <button
                className="btn btn-primary back"
                onClick={handleBack}
                style={{ backgroundColor: "#fda417", border: "#fda417" }}
              >
                Go Back
              </button>{" "}
              <button
                className="btn btn-primary continue"
                onClick={handleContinue}
                style={{ backgroundColor: "#fda417", border: "#fda417" }}
              >
                Continue
              </button>
            </div>
          )}

          {activeTab === "Accounting" && (
            <div
              className="card"
              style={{
                color: "#fda417",
                border: "1px solid #fda417",
                padding: "10px",
                borderRadius: "8px",
              }}
            >
              <br />

              <div className="row gy-3">
  {/* Close Date A to B */}
  <div className="col-md-4">
    <input
      type="text"
      className="form-control"
      placeholder="Close Date A to B"
      required
      disabled
    />
  </div>
  <div className="col-md-4">
    <input
      type="date"
      className="form-control"
      name="closeDateAtoB"
      value={formData.closeDateAtoB}
      onChange={(e) => {
        const value = e.target.value;
        setFormData({
          ...formData,
          closeDateAtoB: value,
        });
        calculateTurnTime(value, formData.closeDateBtoC);
      }}
      placeholder="Close Date A to B"
      style={{ textAlign: "right" }}
      required
    />
  </div>
</div>

<br />

<div className="row gy-3">
  {/* Close Date B to C */}
  <div className="col-md-4">
    <input
      type="text"
      className="form-control"
      placeholder="Close Date B to C"
      required
      disabled
    />
  </div>

  <div className="col-md-4">
    <input
      type="date"
      className="form-control"
      name="closeDateBtoC"
      value={formData.closeDateBtoC}
      onChange={(e) => {
        const value = e.target.value;
        setFormData({
          ...formData,
          closeDateBtoC: value,
        });
        calculateTurnTime(formData.closeDateAtoB, value);
      }}
      placeholder="Close Date B to C"
      style={{ textAlign: "right" }}
      required
    />
  </div>
</div>

<br />

<div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Turn Time
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    value={turnTime}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    placeholder="Total Costs to Buy A to B"
                    required
                  />
                </div>
              </div>
              <br />
              <div className="row gy-3 align-items-center">
              <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
Renovation Risk
                </span>

                <div className="col-md-7">
    {renovationRiskOptions.map((option) => (
      <div className="form-check form-check-inline" key={option}>
        <input
          className="form-check-input"
          type="radio"
          name="renovationRisk"
          id={`renovationRisk${option}`}
          value={option}
          checked={formData.renovationRisk === option}
          onChange={(e) => {
            const value = parseInt(e.target.value, 10);
            setFormData({
              ...formData,
              renovationRisk: value,
            });
          }}
        />
        <label
          className="form-check-label"
          htmlFor={`renovationRisk${option}`}
        >
          {option}
        </label>
      </div>
    ))}
  </div>
</div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Property Acquisition A to B:
              </span>

              <br />
              <div className="row gy-3">
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Purchase Cost"
                    required
                    disabled
                  />
                </div>
                <div className="col-md-4">
                  <input
                    type="text"
                    className={`form-control ${
                      formData.isPurchaseCostInvalid ? "is-invalid" : ""
                    }`}
                    value={formData.purchaseCost}
                    onChange={(e) => {
                      const value = e.target.value;
                      const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
                      setFormData({
                        ...formData,
                        purchaseCost: value,
                        isPurchaseCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
                      });
                    }}
                    onKeyPress={(e) => {
                      const charCode = e.charCode;
                      // Allow only numbers and decimal points
                      if ((charCode < 48 || charCode > 57) && charCode !== 46) {
                        e.preventDefault(); // Prevent non-numeric input
                        setFormData({
                          ...formData,
                          isPurchaseCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
                        });
                      }
                    }}
                    placeholder="Enter Purchase Cost"
                    style={{ textAlign: "right" }}
                    required
                  />
                  {formData.isPurchaseCostInvalid && (
                    <div className="invalid-feedback">
                      Please enter a valid number.
                    </div>
                  )}
                </div>
              </div>
              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Costs paid out of Closing Hud A to B:
              </span>

              {formData.costPaidAtoB.map((cost, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={cost.title}
                      onChange={(e) =>
                        handleCostChange(index, "title", e.target.value)
                      }
                      placeholder="Title"
                      required
                    />
                  </div>
                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        cost.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={cost.price}
                      onChange={(e) => handlePriceChange(e, index)} // Use a new handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {cost.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deleteCost(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  onClick={addCost}
                  className="btn btn-primary back"
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add Extra Cost
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Costs to Buy A to B
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalCostsAtoB"
                    value={calculateTotalCosts()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    placeholder="Total Costs to Buy A to B"
                    required
                  />
                </div>
              </div>
              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Credits received on settlement:
              </span>

              {formData.credits.map((credits, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={credits.title}
                      onChange={(e) =>
                        handleCreditChange(index, "title", e.target.value)
                      }
                      placeholder="credits"
                      required
                    />
                  </div>
                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        credits.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={credits.price}
                      onChange={(e) => handleCreditPriceChange(e, index)} // New handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {credits.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deleteCredits(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={addCredits}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add credits
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total credits received on settlement
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalcredits"
                    value={calculateTotalCredits()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Costs to Buy A to B After credits
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalCostsAtoBaftercredits"
                    value={calculateTotalCostsWithCredits()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Costs to Buy A to B After credits"
                    required
                  />
                </div>
              </div>
              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Cash Adjustments:
              </span>

              {formData.cashAdjustments.map((cost, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={cost.title}
                      onChange={(e) =>
                        handlecashAdjustmentsTitle(
                          index,
                          "title",
                          e.target.value
                        )
                      }
                      placeholder="Title"
                      required
                    />
                  </div>
                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        cost.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={cost.price}
                      onChange={(e) =>
                        handlecashAdjustmentsCostChange(e, index)
                      } // Use a new handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {cost.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deletecashAdjustments(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={addcashAdjustments}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add Cash Adjustments
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Cash Adjustments on Settlement
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalcashAdjustments"
                    value={calculatecashAdjustments()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Incidental Cost"
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Cash Required/(Surplus) on Settlement
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className={`form-control ${
                      formData.isInvalid ? "is-invalid" : ""
                    }`} // Apply 'is-invalid' class if invalid
                    name="totalcashsurplus"
                    value={formData.totalcashsurplus}
                    onChange={handleNumericInput} // Add handler for numeric validation
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    placeholder="Enter only numbers"
                    required
                  />
                  {formData.isInvalid && (
                    <div className="invalid-feedback">
                      Please enter a valid number.
                    </div>
                  )}
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Incidental Cost:
              </span>

              {formData.incidentalCost.map((cost, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={cost.title}
                      onChange={(e) =>
                        handleincidentalCostTitle(
                          index,
                          "title",
                          e.target.value
                        )
                      }
                      placeholder="Title"
                      required
                    />
                  </div>
                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        cost.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={cost.price}
                      onChange={(e) => handleincidentalCostChange(e, index)} // Use a new handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {cost.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deleteincidentalCost(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={addincidentalCost}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add Incidental Cost
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Incidental Cost
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalincidentalCost"
                    value={calculateTotalincidentalCost()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Incidental Cost"
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Carry Costs:
              </span>

              {formData.utilMaintenance.map((cost, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={cost.title}
                      onChange={(e) =>
                        handleutilMaintenanceTitle(
                          index,
                          "title",
                          e.target.value
                        )
                      }
                      placeholder="Title"
                      required
                    />
                  </div>
                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        cost.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={cost.price}
                      onChange={(e) =>
                        handleutilMaintenanceCostChange(e, index)
                      } // Use a new handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {cost.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deleteutilMaintenanceCost(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={addutilMaintenanceCost}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add Carry Cost
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Carry Cost
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalutilMaintenanceCost"
                    value={calculatetotalutilMaintenanceCost()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Incidental Cost"
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <span
                style={{
                  color: "#fda417",
                  fontSize: "14px",
                  fontWeight: "bold",
                }}
              >
                Renovation and Holding Costs
              </span>

              {formData.renovationCost.map((cost, index) => (
                <div key={index} className="row gy-3 align-items-center">
                  <div className="col-md-4">
                    <input
                      type="text"
                      className="form-control"
                      value={cost.title}
                      onChange={(e) =>
                        handlerenovationCostTitle(
                          index,
                          "title",
                          e.target.value
                        )
                      }
                      placeholder="Title"
                      required
                      style={{
                        fontSize: "10px", // Set the desired font size
                      }}
                    />
                  </div>

                  <div className="col-md-4">
                    <input
                      type="text"
                      className={`form-control ${
                        cost.isInvalid ? "is-invalid" : ""
                      }`} // Apply 'is-invalid' class when invalid
                      value={cost.price}
                      onChange={(e) => handlerenovationCostChange(e, index)} // Use a new handler for price validation
                      placeholder="Price"
                      style={{ textAlign: "right" }}
                      required
                    />
                    {cost.isInvalid && (
                      <div className="invalid-feedback">
                        Please enter a valid number.
                      </div>
                    )}
                  </div>
                  <div className="col-md-2 d-flex justify-content-start">
                    <button
                      className="btn btn-danger"
                      onClick={() => deleterenovationCost(index)}
                      style={{ marginLeft: "5px" }}
                    >
                      x
                    </button>
                  </div>
                </div>
              ))}

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={addrenovationCost}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  <span
                    style={{
                      fontSize: "20px",
                      fontWeight: "normal",
                    }}
                  >
                    +
                  </span>{" "}
                  Add Renovation and Holding cost
                </button>
              </div>

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Renovation and Holding cost
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="totalrenovationCost"
                    value={calculaterenovationCost()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Incidental Cost"
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Total Costs After Property Acquisition
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className="form-control"
                    name="costsAfterPropertyAcquisition"
                    value={calculatecostsAfterPropertyAcquisition()}
                    readOnly
                    style={{
                      borderColor: "#fda417", // Custom border color for the input field
                      color: "#fda417", // Optionally apply text color to the input text
                      textAlign: "right",
                    }}
                    // placeholder="Total Incidental Cost"
                    required
                  />
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <div className="row gy-3 align-items-center">
                <span
                  className="col-md-4"
                  style={{
                    color: "#fda417",
                    fontSize: "14px",
                    fontWeight: "bold",
                  }}
                >
                  Selling Price B to C
                </span>
                <div className="col-md-4">
                  <input
                    type="text"
                    className={`form-control ${
                      formData.isInvalid ? "is-invalid" : ""
                    }`}
                    name="sellpricebtoc"
                    value={formData.sellpricebtoc}
                    onChange={(e) => {
                      const value = e.target.value;
                      const isValid = /^\d*\.?\d*$/.test(value); // Allow only numbers and decimal points
                      setFormData({
                        ...formData,
                        sellpricebtoc: value,
                        isInvalid: !isValid, // Set isInvalid to true if the value is not a valid number
                      });
                    }}
                    onKeyPress={(e) => {
                      const charCode = e.charCode;
                      // Allow only numbers and decimal point
                      if ((charCode < 48 || charCode > 57) && charCode !== 46) {
                        e.preventDefault(); // Prevent non-numeric input
                        setFormData({
                          ...formData,
                          isInvalid: true, // Set isInvalid to true to show the alert
                        });
                      }
                    }}
                    placeholder="Selling Price B to C"
                    style={{ textAlign: "right" }}
                    required
                  />
                  {formData.isInvalid && (
                    <div className="invalid-feedback">
                      Please enter a valid number.
                    </div>
                  )}
                </div>
              </div>

              <hr
                style={{
                  borderColor: "#fda417", // Set the color of the line
                  borderWidth: "1px", // Optional: Adjust the thickness of the line
                  backgroundColor: "#fda417", // Optional: Apply color if using for background
                  height: "1px", // Optional: Set height to match the border width
                }}
              />

              <div className="col-md-4">
                <button
                  className="btn btn-primary back"
                  onClick={handleBack}
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                >
                  Go Back
                </button>{" "}
                <button
                  type="button"
                  className="btn btn-primary continue"
                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
                  onClick={handleSubmit}
                >
                  Submit
                </button>{" "}
              </div>
              <br />
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default Addproperty;
