import React, { useEffect, useState } from "react";
import {
  createJurors,
  getAllJurors,
  importJurors,
  getAllEducationLevels,
  getAllStates,
} from "@/services/jurorsService";
import {
  assignJurorToCase,
  alreadyAssignedToCase,
  getMaritalStatus,
} from "@/services/caseService";
import CustomSelect from "../../../common/CustomSelect";
import { toast } from "react-toastify";

export default function AddJurorsUpdated({ data }) {
  const [availableJurors, setAvailableJurors] = useState([]);
  const [selectedJurors, setSelectedJurors] = useState([]);
  const [currentStep, setCurrentStep] = useState(1);
  const [loading, setLoading] = useState(true);
  const [assignedJurors, setAssignedJurors] = useState([]);
  const [maritalStatusOptions, setMaritalStatusOptions] = useState([]);
  const [educationLevelOptions, setEducationLevelOptions] = useState([]);
  const [stateOptions, setStateOptions] = useState([]);
  const [errors, setErrors] = useState({
    addresses: [],
  });

  const fetchJurors = async () => {
    try {
      const { data } = await getAllJurors();
      // let a=data.results.filter(i=>{return })
      setAvailableJurors(data.results || []);
    } catch {
      // toast.error("Failed to load jurors");
    } finally {
      setLoading(false);
    }
  };

  const fetchMaritalStatus = async () => {
    try {
      const response = await getMaritalStatus();
      const options = (response?.data?.data || []).map((item) => ({
        label: item.name.charAt(0).toUpperCase() + item.name.slice(1),
        value: item.name,
      }));
      setMaritalStatusOptions(options);
    } catch (error) {}
  };

  const fetchEducationLevels = async () => {
    try {
      const response = await getAllEducationLevels();
      const options = (response?.data?.data || []).map((item) => ({
        label: item.name,
        value: item.id,
      }));
      setEducationLevelOptions(options);
    } catch (error) {}
  };
  const fetchStates = async () => {
    try {
      const response = await getAllStates();
      const options = (response?.data?.data || []).map((item) => ({
        label: item.short_name,
        value: item.id,
      }));
      setStateOptions(options);
    } catch (error) {}
  };

  const fetchAssignedJurors = async () => {
    try {
      const response = await alreadyAssignedToCase(data.id);
      setAssignedJurors(response.data.jurors.map((j) => j.id));
    } catch (error) {
      // toast.error("Failed to load assigned jurors");
    }
  };

  const formatUSPhone = (value) => {
    const digits = value.replace(/\D/g, "").slice(0, 10);

    if (digits.length <= 3) return digits;

    if (digits.length <= 6) {
      return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
    }

    return `(${digits.slice(0, 3)}) ${digits.slice(
      3,
      6,
    )}-${digits.slice(6, 10)}`;
  };

  useEffect(() => {
    fetchJurors();
    fetchAssignedJurors();
    fetchMaritalStatus();
    fetchEducationLevels();
    fetchStates();
  }, []);

  useEffect(() => {
    if (data) {
      setFormData((prev) => ({
        ...prev,
        caseNumber: data.case_id || "",
        caseName: data.name || "",
      }));
    }
  }, [data]);

  const [formData, setFormData] = useState({
    id: `JUR-${Date.now()}`,

    firstName: "",
    middleName: "",
    lastName: "",
    juryNumber: "",
    caseNumber: "",
    caseName: "",

    dob: "",
    age: "",
    gender: "",
    usCitizen: "",
    educationLevel: "",
    maritalStatus: "",
    race: "",
    birthCountry: "",

    spouseFullName: "",
    spouseEmploymentStatus: "",
    spouseOccupation: "",
    spouseEmployerName: "",

    religion: "",
    politicalAffiliation: "",
    votingRecord: "",
    relativeLawEnforcement: "",

    employerBusinessName: "",
    employmentStatus: "",
    occupation: "",
    jobTitle: "",

    civilJury: false,
    criminalJury: false,
    grandJury: false,
    verdictReached: "",

    partyToCivilSuit: false,
    accusedCriminalTrial: false,
    complainantCriminalTrial: false,
    witnessCriminalTrial: false,
    felonyProbationHistory: false,
    misdemeanorTheftConviction: false,

    analystNotes: "",
    notes: "",
    idiJson: "",
    status: "unassigned",

    photo: null,
    socialInformationLink: "",

    addresses: [
      {
        primaryEmail: "",
        streetAddress: "",
        city: "",
        state: "",
        county: "",
        zipCode: "",
        primaryPhone: "",
        mobilePhone: "",
        houseOwnership: "",
      },
    ],
  });

  const handleCheckbox = (id) => {
    setSelectedJurors((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
    );
  };

  // const handleInput = (e) => {
  //   setFormData({ ...formData, [e.target.name]: e.target.value });
  // };

  const allowOnlyText = (value) => {
    return value.replace(/[^a-zA-Z\s]/g, "");
  };

  const allowOnlyNumbers = (value) => {
    return value.replace(/[^0-9]/g, "");
  };

  const allowAlphaNumeric = (value) => {
    return value.replace(/[^a-zA-Z0-9\s]/g, "");
  };

  // const handleAddressChange = (index, field, value) => {
  //   const updated = [...formData.addresses];

  //   let updatedValue = value;
  //   if (["city", "state", "county"].includes(field)) {
  //     updatedValue = allowOnlyText(value);
  //   }
  //   if (["zipCode", "primaryPhone", "mobilePhone"].includes(field)) {
  //     updatedValue = allowOnlyNumbers(value);
  //   }
  //   if (["primaryPhone", "mobilePhone"].includes(field)) {
  //     updatedValue = updatedValue.slice(0, 10);
  //   }
  //   if (field === "zipCode") {
  //     updatedValue = updatedValue.slice(0, 6);
  //   }
  //   if (field === "streetAddress") {
  //     updatedValue = allowAlphaNumeric(value);
  //   }
  //   updated[index][field] = updatedValue;
  //   setFormData({
  //     ...formData,
  //     addresses: updated,
  //   });
  // };

  const handleAddressChange = (index, field, value) => {
    const updated = [...formData.addresses];
    let updatedValue = value;

    if (["city", "state", "county"].includes(field)) {
      updatedValue = allowOnlyText(value);
    }

    if (field === "zipCode") {
      updatedValue = allowOnlyNumbers(value).slice(0, 6);
    }

    if (["primaryPhone", "mobilePhone"].includes(field)) {
      updatedValue = formatUSPhone(value);
    }

    if (field === "zipCode") {
      updatedValue = updatedValue.slice(0, 6);
    }

    if (field === "streetAddress") {
      updatedValue = allowAlphaNumeric(value);
    }

    updated[index][field] = updatedValue;

    setFormData({
      ...formData,
      addresses: updated,
    });

    // 🔹 Validation
    let errorMsg = "";

    if (["primaryPhone", "mobilePhone"].includes(field)) {
      const digitsOnly = updatedValue.replace(/\D/g, "");
      if (digitsOnly && digitsOnly.length !== 10) {
        errorMsg = "Please enter a valid US phone number";
      }
    }

    // 🔹 Update Errors (Nested)
    const updatedErrors = { ...errors };
    if (!updatedErrors.addresses[index]) {
      updatedErrors.addresses[index] = {};
    }

    updatedErrors.addresses[index][field] = errorMsg;

    setErrors(updatedErrors);
  };

  // const handleInput = (e) => {
  //   const { name, value, files, type, checked } = e.target;

  //   setFormData((prev) => ({
  //     ...prev,
  //     [name]:
  //       type === "file"
  //         ? files[0]
  //         : type === "checkbox"
  //           ? checked
  //           : value,
  //   }));
  // };

  const handleInput = (e) => {
    const { name, value, files, type, checked } = e.target;

    let updatedValue = value;
    if (name === "dob") {
      updatedValue = value.replace(/[^0-9Xx-]/g, "");

      // If only year is entered
      if (/^\d{4}$/.test(updatedValue)) {
        updatedValue = `XX-XX-${updatedValue}`;
      }
    }
    if (
      [
        "firstName",
        "middleName",
        "lastName",
        "city",
        "state",
        "county",
        "spouseFullName",
        "spouseEmployerName",
        "occupation",
        "jobTitle",
        "religion",
      ].includes(name)
    ) {
      updatedValue = allowOnlyText(value);
    }
    if (["age", "zipCode", "primaryPhone", "mobilePhone"].includes(name)) {
      updatedValue = allowOnlyNumbers(value);
    }

    setFormData((prev) => ({
      ...prev,
      [name]:
        type === "file"
          ? files[0]
          : type === "checkbox"
            ? checked
            : updatedValue,
    }));
  };

  const stepValidation = {
    1: [
      { field: formData.juryNumber, message: "Jury Number is required" },
      { field: formData.firstName, message: "First Name is required" },
      { field: formData.lastName, message: "Last Name is required" },
    ],

    // 2: [
    //   {
    //     field: formData.addresses?.[0]?.primaryEmail,
    //     message: "Primary Email is required"
    //   },
    //   {
    //     field: formData.addresses?.[0]?.primaryPhone,
    //     message: "Primary Phone Number is required"
    //   },
    //   {
    //     field: formData.addresses?.[0]?.streetAddress,
    //     message: "Street Address is required"
    //   }
    // ],

    3: [
      // { field: formData.age, message: "Age is required" },
      { field: formData.gender, message: "Gender is required" },
    ],
  };

  // const handleNext = () => {
  //   if (currentStep < 8) setCurrentStep(currentStep + 1);
  // };

  const handleNext = () => {
    const validations = stepValidation[currentStep] || [];

    const invalidField = validations.find(
      (item) => !String(item.field || "").trim(),
    );

    if (invalidField) {
      toast.error(invalidField.message);
      return;
    }

    if (currentStep < 8) {
      setCurrentStep((prev) => prev + 1);
    }
  };

  const handlePrev = () => {
    if (currentStep > 1) setCurrentStep(currentStep - 1);
  };

  const handleAddJuror = async (e) => {
    e.preventDefault();

    const validations = stepValidation[1] || [];

    const invalidField = validations.find(
      (item) => !String(item.field || "").trim(),
    );

    if (invalidField) {
      toast.error(invalidField.message);
      return;
    }

    try {
      const payload = new FormData();
      // payload.append("id", formData.id);
      payload.append("case", data?.id || formData.caseNumber || "");
      payload.append("first_name", formData.firstName || "");
      payload.append("middle_name", formData.middleName || "");
      payload.append("last_name", formData.lastName || "");
      payload.append("juror_number", formData.juryNumber || "");
      payload.append("date_of_birth", formData.dob || "");
      payload.append("age", formData.age || "");
      payload.append("gender", formData.gender || "");
      payload.append("race", formData.race || "");
      payload.append("birth_country", formData.birthCountry || "");
      payload.append("us_citizen", formData.usCitizen === "Yes");
      payload.append("education_level", formData.educationLevel || "");
      payload.append("marital_status", formData.maritalStatus || "");
      payload.append("spouse_full_name", formData.spouseFullName || "");
      payload.append(
        "spouse_employment_status",
        formData.spouseEmploymentStatus || "",
      );
      payload.append("spouse_occupation", formData.spouseOccupation || "");
      payload.append("spouse_employer_name", formData.spouseEmployerName || "");
      const address = formData.addresses?.[0] || {};
      payload.append("email", address.primaryEmail || "");
      payload.append(
        "primary_phone",
        toUSPhoneE164(address.primaryPhone) || "",
      );
      payload.append("cell_phone", toUSPhoneE164(address.mobilePhone) || "");
      payload.append("street_address", address.streetAddress || "");
      payload.append("city", address.city || "");
      payload.append("state", address.state || "");
      payload.append("county", address.county || "");
      payload.append("zipcode", address.zipCode || "");
      payload.append("house_ownership", address.houseOwnership || "");
      payload.append("religion", formData.religion || "");
      payload.append("political_party", formData.politicalAffiliation || "");
      payload.append("voting_record", formData.votingRecord || "");
      payload.append(
        "relative_in_law_enforcement",
        formData.relativeLawEnforcement || "",
      );
      payload.append("employer", formData.employerBusinessName || "");
      payload.append("job_title", formData.jobTitle || "");
      payload.append("employment_status", formData.employmentStatus || "");
      payload.append("occupation", formData.occupation || "");
      payload.append("civil_jury", formData.civilJury);
      payload.append("criminal_jury", formData.criminalJury);
      payload.append("grand_jury", formData.grandJury);
      payload.append("verdict_reached", formData.verdictReached === "Y");
      payload.append("party_to_civil_suit", formData.partyToCivilSuit);
      payload.append(
        "accused_in_criminal_trial",
        formData.accusedCriminalTrial,
      );
      payload.append(
        "complainant_in_criminal_trial",
        formData.complainantCriminalTrial,
      );
      payload.append(
        "witness_in_criminal_trial",
        formData.witnessCriminalTrial,
      );
      payload.append(
        "felony_probation_history",
        formData.felonyProbationHistory,
      );
      payload.append(
        "misdemeanor_theft_conviction",
        formData.misdemeanorTheftConviction,
      );
      payload.append("analyst_notes", formData.analystNotes || "");
      payload.append("notes", formData.notes || "");
      payload.append("id_json_file_name", formData.idiJson || "");
      payload.append("status", formData.status);
      const socialMedia = [];
      if (formData.socialInformationLink) {
        socialMedia.push({
          platform: "custom",
          url: formData.socialInformationLink,
          username: "",
        });
      }
      payload.append("social_media", JSON.stringify(socialMedia));
      if (formData.photo) {
        payload.append("photo", formData.photo);
      }
      await createJurors(payload);
      toast.success("Juror Added Successfully");
      fetchJurors();
      setFormData((prev) => ({
        ...prev,
        id: `JUR-${Date.now()}`,
        firstName: "",
        middleName: "",
        lastName: "",
        juryNumber: "",
        dob: "",
        age: "",
        gender: "",
        photo: null,
      }));

      setCurrentStep(1);
    } catch (error) {
      const apiError = error?.response?.data;

      if (apiError) {
        const firstError = Object.values(apiError)?.[0];

        if (Array.isArray(firstError) && firstError.length > 0) {
          toast.error(firstError[0]);
          return;
        }

        if (typeof firstError === "string") {
          toast.error(firstError);
          return;
        }
      }

      toast.error("Failed to add juror");
    }
  };

  // const handleChange = (e) => {
  //   const { name, value } = e.target;

  //   setFormData((prev) => ({
  //     ...prev,
  //     [name]: value,
  //   }));
  // };

  const toUSPhoneE164 = (value) => {
    const digits = value.replace(/\D/g, "").slice(0, 10);
    return digits.length === 10 ? digits : "";
  };

  const handleCsvUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    try {
      await importJurors(formData);

      toast.success("CSV Imported Successfully!");
      const { data } = await getAllJurors();
      setAvailableJurors(data.results || []);

      event.target.value = "";
    } catch (error) {
      console.error("CSV Import Error:", error);
      toast.error("Failed to import CSV. Check CSV format.");
    }
  };

  const handleAssignJurors = async () => {
    if (selectedJurors.length === 0) {
      toast.warn("Select at least one juror");
      return;
    }

    try {
      await assignJurorToCase(data.id, { juror_ids: selectedJurors });
      toast.success("Jurors Assigned Successfully!");

      // Refresh UI
      fetchAssignedJurors();
      setSelectedJurors([]);
    } catch (error) {
      toast.error("Failed to assign jurors");
    }
  };

  const handleDownloadSampleCsv = () => {
    const csvContent = [
      [
        "Juror #",
        "Name",
        "City",
        "State",
        "Age",
        "Gender",
        "Race",
        "Occupation",
        "Marital Status",
      ],
      [
        "2025-11906602",
        "Hall Sally",
        "Austin",
        "TX",
        "38",
        "Female",
        "White or Caucasian",
        "Project Manager",
        "Married",
      ],
      [
        "2025-11906603",
        "Kihnel Candice",
        "Austin",
        "TX",
        "42",
        "Female",
        "American Indian / Alaskan Native",
        "Pharmacy Technician",
        "Divorced",
      ],
      [
        "2025-11906604",
        "Sutton Jill Podlech",
        "Austin",
        "TX",
        "47",
        "Female",
        "White or Caucasian",
        "Not Specified",
        "Married",
      ],
    ]
      .map((row) => row.join(","))
      .join("\n");

    const blob = new Blob([csvContent], {
      type: "text/csv;charset=utf-8;",
    });

    const url = window.URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "juror_sample.csv";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    window.URL.revokeObjectURL(url);
  };

  const handleCancel = () => {
    setFormData({
      id: `JUR-${Date.now()}`,

      firstName: "",
      middleName: "",
      lastName: "",
      juryNumber: "",
      caseNumber: data?.case_id || "",
      caseName: data?.name || "",

      dob: "",
      age: "",
      gender: "",
      usCitizen: "",
      educationLevel: "",
      maritalStatus: "",
      race: "",
      birthCountry: "",

      spouseFullName: "",
      spouseEmploymentStatus: "",
      spouseOccupation: "",
      spouseEmployerName: "",

      religion: "",
      politicalAffiliation: "",
      votingRecord: "",
      relativeLawEnforcement: "",

      employerBusinessName: "",
      employmentStatus: "",
      occupation: "",
      jobTitle: "",

      civilJury: false,
      criminalJury: false,
      grandJury: false,
      verdictReached: "",

      partyToCivilSuit: false,
      accusedCriminalTrial: false,
      complainantCriminalTrial: false,
      witnessCriminalTrial: false,
      felonyProbationHistory: false,
      misdemeanorTheftConviction: false,

      analystNotes: "",
      notes: "",
      idiJson: "",
      status: "unassigned",

      photo: null,
      socialInformationLink: "",

      addresses: [
        {
          primaryEmail: "",
          streetAddress: "",
          city: "",
          state: "",
          county: "",
          zipCode: "",
          primaryPhone: "",
          mobilePhone: "",
          houseOwnership: "",
        },
      ],
    });

    setErrors({
      addresses: [],
    });
  };

  return (
    <div className="profilefrmtabopen">
      <div className="tab-content" id="myTabContent">
        <div
          className="tab-pane fade show active"
          id="ViewCaseInfo-tab-pane"
          role="tabpanel"
          aria-labelledby="ViewCaseInfo-tab"
          tabIndex="0"
        >
          <div className="profilefrmshowsd">
            {/* <div className="profilefrmhder">
              <h3>Juror Selection Status</h3>
              <p>
                {selectedJurors.length} juror(s) selected from {availableJurors?.filter(i => !assignedJurors.includes(i.id))?.length} available • {availableJurors?.filter(i => !assignedJurors.includes(i.id))?.length} currently
              </p>
            </div> */}

            <div className="row">
              {/* NEW START  */}

              <div className="d-flex justify-content-between mb-0">
                <button
                  className="heading-btn"
                  type="button"
                  onClick={handleDownloadSampleCsv}
                >
                  <svg
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M7.5 1V9M7.5 9L4.5 6M7.5 9L10.5 6"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M2 11.5V12.5C2 13.0523 2.44772 13.5 3 13.5H12C12.5523 13.5 13 13.0523 13 12.5V11.5"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Download Sample CSV</span>
                </button>
                <button
                  className="heading-btn"
                  type="button"
                  onClick={() => document.getElementById("uploadCsv").click()}
                >
                  <svg viewBox="0 0 13 15" fill="none">
                    <path
                      d="M7.4987 0.5V3.29948C7.4987 3.67071 7.64617 4.02674 7.90867 4.28924C8.17117 4.55175 8.5272 4.69922 8.89844 4.69922H11.6979M3.29948 8.19857H4.69922M7.4987 8.19857H8.89844M3.29948 10.998H4.69922M7.4987 10.998H8.89844M8.19857 0.5H1.89974C1.52851 0.5 1.17248 0.647472 0.909974 0.909974C0.647472 1.17248 0.5 1.52851 0.5 1.89974V13.0977C0.5 13.4689 0.647472 13.8249 0.909974 14.0874C1.17248 14.3499 1.52851 14.4974 1.89974 14.4974H10.2982C10.6694 14.4974 11.0254 14.3499 11.2879 14.0874C11.5504 13.8249 11.6979 13.4689 11.6979 13.0977V3.99935L8.19857 0.5Z"
                      stroke="currentColor"
                    />
                  </svg>
                  <span>Import CSV</span>
                </button>

                <input
                  type="file"
                  id="uploadCsv"
                  accept=".csv"
                  style={{ display: "none" }}
                  onChange={handleCsvUpload}
                />
              </div>

              {/* NEW END */}

              {/* Left side Available Jurors */}
              {/* <div className="col-xl-6 col-lg-6 col-sm-12 col-12 mt-3 mt-md-4">
                <div className="casetabnx">

                  <div className="d-flex justify-content-between flex-column gap-2 mb-2 mb-md-3">
                    <div className="d-flex justify-content-between mb-2">
                      <button
                        className="import-btn"
                        type="button"
                        onClick={handleDownloadSampleCsv}
                      >
                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.5 1V9M7.5 9L4.5 6M7.5 9L10.5 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          <path d="M2 11.5V12.5C2 13.0523 2.44772 13.5 3 13.5H12C12.5523 13.5 13 13.0523 13 12.5V11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                        <span>Download Sample CSV</span>
                      </button>
                      <button
                        className="import-btn"
                        type="button"
                        onClick={() => document.getElementById("uploadCsv").click()}
                      >
                        <svg width="13" height="15" viewBox="0 0 13 15" fill="none">
                          <path
                            d="M7.4987 0.5V3.29948C7.4987 3.67071 7.64617 4.02674 7.90867 4.28924C8.17117 4.55175 8.5272 4.69922 8.89844 4.69922H11.6979M3.29948 8.19857H4.69922M7.4987 8.19857H8.89844M3.29948 10.998H4.69922M7.4987 10.998H8.89844M8.19857 0.5H1.89974C1.52851 0.5 1.17248 0.647472 0.909974 0.909974C0.647472 1.17248 0.5 1.52851 0.5 1.89974V13.0977C0.5 13.4689 0.647472 13.8249 0.909974 14.0874C1.17248 14.3499 1.52851 14.4974 1.89974 14.4974H10.2982C10.6694 14.4974 11.0254 14.3499 11.2879 14.0874C11.5504 13.8249 11.6979 13.4689 11.6979 13.0977V3.99935L8.19857 0.5Z"
                            stroke="currentColor"
                          />
                        </svg>
                        <span>Import CSV</span>
                      </button>

                      <input
                        type="file"
                        id="uploadCsv"
                        accept=".csv"
                        style={{ display: "none" }}
                        onChange={handleCsvUpload}
                      />
                    </div>
                    <div className="w-100">
                      <h4>Available Jurors ({availableJurors?.filter(i => !assignedJurors.includes(i.id))?.length})</h4>
                      <p>Select jurors from the available pool to add to this case.</p>
                    </div>
                  </div>

                  <div className="importedlistouter">
                    {availableJurors
                      .filter(
                        (juror) =>
                          juror.first_name?.trim() &&
                          !assignedJurors.includes(juror.id)
                      )
                      .map((juror) => (
                        <div className="importedlist" key={juror.id}>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              id={`juror-${juror.id}`}
                              disabled={assignedJurors.includes(juror.id)}
                              checked={
                                assignedJurors.includes(juror.id) ||
                                selectedJurors.includes(juror.id)
                              }
                              onChange={() => handleCheckbox(juror.id)}
                            />
                          </div>

                          <div className="importedmediabx">
                            <div className="importedmedia">
                              {`${juror.first_name?.[0] || ""}${juror.last_name?.[0] || ""}`.toUpperCase()}
                            </div>

                            <div className="importedmediact">
                              <h5>
                                {juror.first_name} {juror.last_name}
                              </h5>

                              <p>
                                {juror.employment_history?.length > 0
                                  ? juror.employment_history
                                    .map(
                                      (emp) =>
                                        `${emp.emp_name} (${emp.job_title}, ${emp.emp_address})`
                                    )
                                    .join(", ")
                                  : "No employment info"}
                              </p>
                            </div>
                          </div>

                          <div className="importedlistbtm">
                            <p>
                              {[
                                juror.street_address,
                                juror.city,
                                juror.state,
                                juror.zip_code,
                              ]
                                .filter(Boolean)
                                .join(", ") || "No address available"}
                            </p>

                            <p>{juror.phone_numbers || "No phone"}</p>
                          </div>
                        </div>
                      ))}
                  </div>

                  <div className="text-end">
                    <button className="adduser d-inline-flex gap-2 mt-3" type="button" onClick={handleAssignJurors}>
                      <svg width="15" height="13" viewBox="0 0 15 13" fill="none">
                        <path
                          d="M9.76002 12.4057V11.0829C9.76002 10.3812 9.48128 9.70824 8.98511 9.21207C8.48894 8.7159 7.81599 8.43716 7.1143 8.43716H3.14572C2.44403 8.43716 1.77108 8.7159 1.27491 9.21207C0.778745 9.70824 0.5 10.3812 0.5 11.0829V12.4057M12.3633 3.97656V6.11328M12.3633 6.11328V8.25M12.3633 6.11328H14.5M12.3633 6.11328H10.2266M7.77573 3.14572C7.77573 4.60691 6.5912 5.79144 5.13001 5.79144C3.66882 5.79144 2.48429 4.60691 2.48429 3.14572C2.48429 1.68453 3.66882 0.5 5.13001 0.5C6.5912 0.5 7.77573 1.68453 7.77573 3.14572Z"
                          stroke="currentColor"
                        />
                      </svg>
                      <span>Assign Juror</span>
                    </button>
                  </div>
                </div>
              </div> */}

              {/* Right side Step Form */}
              {/* <div className="col-xl-6 col-lg-6 col-sm-12 col-12 mt-3 mt-md-4"> */}

              {/* Commented on 22-06-2026 */}

              {/* <div className="col-xl-12 col-lg-12 col-sm-12 col-12 mt-3 mt-md-4">
                <div className="casetabnx">
                  <div className="d-flex justify-content-between gap-2 mb-2 mb-md-3">
                    <div className="w-100">
                      <h4>Add New Juror</h4>
                      <p>
                        Create a new juror profile and add them to this case.
                      </p>
                    </div>
                    <span className="step-label">Step {currentStep} of 8</span>
                  </div>

                  <div className="step-progress-wrapper">
                    <div className="step-progress">
                      {[1, 2, 3, 4, 5, 6, 7, 8].map((step) => (
                        <div
                          key={step}
                          className={`step-item ${currentStep >= step ? "active" : ""}`}
                        ></div>
                      ))}
                    </div>
                  </div>

                  <div className="row gx-2">
                    {currentStep === 1 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 1: Indentification </label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Jury Number{" "}
                              <span style={{ color: "red" }}>*</span>
                            </label>
                            <input
                              type="text"
                              placeholder="Enter Jury Number"
                              name="juryNumber"
                              value={formData.juryNumber}
                              onChange={handleInput}
                              required
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Case Name <span style={{ color: "red" }}>*</span>
                            </label>
                            <input
                              type="text"
                              placeholder="Case Name"
                              name="caseName"
                              value={formData.caseName}
                              onChange={handleInput}
                              required
                              readOnly
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              First Name <span style={{ color: "red" }}>*</span>
                            </label>
                            <input
                              type="text"
                              placeholder="Enter first name"
                              name="firstName"
                              value={formData.firstName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Middle Name</label>
                            <input
                              type="text"
                              placeholder="Enter middle name"
                              name="middleName"
                              value={formData.middleName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Last Name <span style={{ color: "red" }}>*</span>
                            </label>
                            <input
                              type="text"
                              placeholder="Enter last name"
                              name="lastName"
                              value={formData.lastName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Photo</label>
                            <input
                              className="mt-2 mt-md-3"
                              type="file"
                              name="photo"
                              accept="image/*"
                              onChange={handleInput}
                            />
                            {formData.photo && (
                              <div style={{ marginTop: "10px" }}>
                                <img
                                  src={
                                    typeof formData.photo === "string"
                                      ? formData.photo
                                      : URL.createObjectURL(formData.photo)
                                  }
                                  alt="Preview"
                                  width="100"
                                  height="100"
                                  style={{
                                    objectFit: "cover",
                                    borderRadius: "8px",
                                  }}
                                />
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label className="required">
                              <span style={{ color: "red" }}>*</span> Required
                              fields
                            </label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button className="canselbtn">Cancel</button>
                              </li>
                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 2 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm d-flex justify-content-between align-items-center">
                            <label>Step 2: Contact Information</label>

                            <button
                              type="button"
                              className="add-btn"
                              onClick={() => {
                                setFormData({
                                  ...formData,
                                  addresses: [
                                    ...formData.addresses,
                                    {
                                      primaryEmail: "",
                                      streetAddress: "",
                                      city: "",
                                      state: "",
                                      county: "",
                                      zipCode: "",
                                      houseOwnership: "",
                                      primaryPhone: "",
                                      mobilePhone: "",
                                    },
                                  ],
                                });
                              }}
                            >
                              + Add Address
                            </button>
                          </div>
                        </div>

                        {formData.addresses.map((addr, index) => (
                          <div className="col-12" key={index}>
                            <div className="row gx-2">
                              {index > 0 && (
                                <div className="col-12 d-flex justify-content-end mt-4">
                                  <button
                                    type="button"
                                    className="remove-btn"
                                    style={{ color: "red" }}
                                    onClick={() => {
                                      const updated = formData.addresses.filter(
                                        (_, i) => i !== index,
                                      );

                                      setFormData({
                                        ...formData,
                                        addresses: updated,
                                      });
                                    }}
                                  >
                                    - Remove Address
                                  </button>
                                </div>
                              )}

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Primary Email</label>
                                  <input
                                    type="email"
                                    placeholder="Enter email"
                                    value={addr.primaryEmail}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "primaryEmail",
                                        e.target.value,
                                      )
                                    }
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Street Address</label>
                                  <input
                                    type="text"
                                    placeholder="Enter street address"
                                    value={addr.streetAddress}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "streetAddress",
                                        e.target.value,
                                      )
                                    }
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>City</label>
                                  <input
                                    type="text"
                                    placeholder="Enter city"
                                    value={addr.city}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "city",
                                        e.target.value,
                                      )
                                    }
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>State</label>

                                  <CustomSelect
                                    value={addr.state}
                                    placeholder="Select State"
                                    options={stateOptions}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].state = e.target.value;

                                      setFormData({
                                        ...formData,
                                        addresses: updated,
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>County</label>
                                  <input
                                    type="text"
                                    placeholder="Enter county"
                                    value={addr.county}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "county",
                                        e.target.value,
                                      )
                                    }
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Zip</label>
                                  <input
                                    type="text"
                                    placeholder="Enter zip"
                                    value={addr.zipCode}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "zipCode",
                                        e.target.value,
                                      )
                                    }
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>House Ownership</label>

                                  <CustomSelect
                                    value={addr.houseOwnership}
                                    placeholder="Select ownership"
                                    options={[
                                      { label: "Owned", value: "owned" },
                                      { label: "Rented", value: "rented" },
                                      { label: "Family", value: "family" },
                                    ]}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].houseOwnership =
                                        e.target.value;

                                      setFormData({
                                        ...formData,
                                        addresses: updated,
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Primary Phone Number</label>
                                  <input
                                    type="text"
                                    placeholder="Enter primary phone"
                                    value={addr.primaryPhone}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "primaryPhone",
                                        e.target.value,
                                      )
                                    }
                                  />
                                  {errors?.addresses?.[index]?.primaryPhone && (
                                    <p className="text-danger d-block mt-1">
                                      {errors.addresses[index].primaryPhone}
                                    </p>
                                  )}
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Mobile Phone Number</label>
                                  <input
                                    type="text"
                                    placeholder="Enter mobile phone"
                                    value={addr.mobilePhone}
                                    onChange={(e) =>
                                      handleAddressChange(
                                        index,
                                        "mobilePhone",
                                        e.target.value,
                                      )
                                    }
                                  />
                                  {errors?.addresses?.[index]?.mobilePhone && (
                                    <p className="text-danger d-block mt-1">
                                      {errors.addresses[index].mobilePhone}
                                    </p>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 3 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 3: Demographics</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Gender <span style={{ color: "red" }}>*</span>
                            </label>

                            <CustomSelect
                              name="gender"
                              value={formData.gender}
                              onChange={handleInput}
                              placeholder="Select Gender"
                              options={[
                                { label: "Male", value: "M" },
                                { label: "Female", value: "F" },
                                { label: "Other", value: "O" },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Age</label>
                            <input
                              type="number"
                              placeholder="Enter age"
                              name="age"
                              value={formData.age}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>DOB</label>
                            <input
                              type="text"
                              name="dob"
                              value={formData.dob}
                              onChange={handleInput}
                              onBlur={(e) => {
                                const value = e.target.value.trim();

                                if (/^\d{4}$/.test(value)) {
                                  setFormData((prev) => ({
                                    ...prev,
                                    dob: `XX-XX-${value}`,
                                  }));
                                }
                              }}
                              placeholder="MM-DD-YYYY"
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Race</label>
                            <input
                              type="text"
                              placeholder="Enter race"
                              name="race"
                              value={formData.race}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Education Level</label>

                            <CustomSelect
                              name="educationLevel"
                              value={formData.educationLevel}
                              onChange={handleInput}
                              placeholder="Select Education"
                              options={educationLevelOptions}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Religion</label>
                            <input
                              type="text"
                              placeholder="Enter religion"
                              name="religion"
                              value={formData.religion}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>US Citizen</label>

                            <CustomSelect
                              name="usCitizen"
                              value={formData.usCitizen}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false },
                                // { label: "Unknown", value: "unknown" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Birth Country</label>
                            <input
                              type="text"
                              placeholder="Enter birth country"
                              name="birthCountry"
                              value={formData.birthCountry}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Political Affiliation</label>
                            <input
                              type="text"
                              placeholder="Enter political affiliation"
                              name="politicalAffiliation"
                              value={formData.politicalAffiliation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Voting Record</label>

                            <textarea
                              rows="4"
                              placeholder="Enter voting record"
                              name="votingRecord"
                              value={formData.votingRecord}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 4 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 4: Family Background</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Marital Status</label>

                            <CustomSelect
                              name="maritalStatus"
                              value={formData.maritalStatus}
                              onChange={handleInput}
                              placeholder="Select Marital Status"
                              options={maritalStatusOptions}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Full Name</label>
                            <input
                              type="text"
                              placeholder="Enter spouse full name"
                              name="spouseFullName"
                              value={formData.spouseFullName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Employment Status</label>

                            <CustomSelect
                              name="spouseEmploymentStatus"
                              value={formData.spouseEmploymentStatus}
                              onChange={handleInput}
                              placeholder="Employment Status"
                              options={[
                                { label: "Unknown", value: "unknown" },
                                { label: "Retired", value: "retired" },
                                {
                                  label: "Self Employed",
                                  value: "selfemployed",
                                },
                                { label: "Employed", value: "employed" },
                                { label: "Unemployed", value: "unemployed" },
                                { label: "Other", value: "other" },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Occupation</label>
                            <input
                              type="text"
                              placeholder="Enter spouse occupation"
                              name="spouseOccupation"
                              value={formData.spouseOccupation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Employer Name</label>
                            <input
                              type="text"
                              placeholder="Enter employer name"
                              name="spouseEmployerName"
                              value={formData.spouseEmployerName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Relative in Law Enforcement?</label>

                            <textarea
                              rows="4"
                              placeholder="Enter details"
                              name="relativeLawEnforcement"
                              value={formData.relativeLawEnforcement}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 5 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 5: Employment</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Employment Status</label>

                            <CustomSelect
                              name="employmentStatus"
                              value={formData.employmentStatus}
                              onChange={handleInput}
                              placeholder="Employment Status"
                              options={[
                                { label: "Unknown", value: "unknown" },
                                { label: "Retired", value: "retired" },
                                {
                                  label: "Self Employed",
                                  value: "selfemployed",
                                },
                                { label: "Employed", value: "employed" },
                                { label: "Unemployed", value: "unemployed" },
                                { label: "Other", value: "other" },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Occupation</label>
                            <input
                              type="text"
                              placeholder="Enter occupation"
                              name="occupation"
                              value={formData.occupation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Job Title</label>
                            <input
                              type="text"
                              placeholder="Enter job title"
                              name="jobTitle"
                              value={formData.jobTitle}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Employer / Business Name</label>
                            <input
                              type="text"
                              placeholder="Enter employer/business name"
                              name="employerBusinessName"
                              value={formData.employerBusinessName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 6 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 6: Prior Jury Experience</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Civil Jury</label>

                            <CustomSelect
                              name="civilJury"
                              value={formData.civilJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Criminal Jury</label>

                            <CustomSelect
                              name="criminalJury"
                              value={formData.criminalJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Grand Jury</label>

                            <CustomSelect
                              name="grandJury"
                              value={formData.grandJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Verdict Reached</label>

                            <CustomSelect
                              name="verdictReached"
                              value={formData.verdictReached}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: "Y" },
                                { label: "No", value: "N" },
                                { label: "N/A", value: "NA" },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 7 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 7: Prior Trial Experience</label>
                          </div>
                        </div>

                        {[
                          {
                            label: "Party to Civil Suit?",
                            name: "partyToCivilSuit",
                          },
                          {
                            label: "Accused in Criminal Trial?",
                            name: "accusedCriminalTrial",
                          },
                          {
                            label: "Complainant in Criminal Trial?",
                            name: "complainantCriminalTrial",
                          },
                          {
                            label: "Witness in Criminal Trial?",
                            name: "witnessCriminalTrial",
                          },
                          {
                            label: "Felony Probation History?",
                            name: "felonyProbationHistory",
                          },
                          {
                            label: "Theft Conviction?",
                            name: "misdemeanorTheftConviction",
                          },
                        ].map((item, index) => (
                          <div className="col-lg-6 col-sm-6 col-12" key={index}>
                            <div className="datafrm">
                              <label>{item.label}</label>

                              <CustomSelect
                                name={item.name}
                                value={formData[item.name]}
                                onChange={handleInput}
                                placeholder="Select"
                                options={[
                                  { label: "Yes", value: true },
                                  { label: "No", value: false },
                                ]}
                              />
                            </div>
                          </div>
                        ))}

                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Social Information Link</label>

                            <input
                              type="text"
                              name="socialInformationLink"
                              value={formData.socialInformationLink}
                              placeholder="Enter social link"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Analyst Notes</label>

                            <textarea
                              rows="4"
                              name="analystNotes"
                              value={formData.analystNotes}
                              placeholder="Enter analyst notes"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>Next</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 8 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 8: Internal Use Fields</label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>IDI JSON</label>

                            <textarea
                              rows="5"
                              name="idiJson"
                              value={formData.idiJson}
                              placeholder="Paste JSON data"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Status <span style={{ color: "red" }}>*</span>
                            </label>

                            <CustomSelect
                              name="status"
                              value={formData.status}
                              onChange={handleInput}
                              placeholder="Select Status"
                              options={[
                                {
                                  label: "UNASSIGNED",
                                  value: "unassigned",
                                },
                                {
                                  label: "In Process",
                                  value: "in_process",
                                },
                                {
                                  label: "Enriched",
                                  value: "enriched",
                                },
                                {
                                  label: "Complete",
                                  value: "complete",
                                },
                                {
                                  label: "SELECTED",
                                  value: "selected",
                                },
                                {
                                  label: "REJECTED",
                                  value: "rejected",
                                },
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleAddJuror}>Submit</button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 9 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 5: Additional Notes</label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Notes</label>
                            <textarea
                              name="notes"
                              placeholder="Enter any additional notes or comments about this juror..."
                              value={formData.notes}
                              onChange={handleInput}
                            ></textarea>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>
                              <li>
                                <button onClick={handleAddJuror}>
                                  Add Juror
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </div> */}

              <div className="col-xl-12 col-lg-12 col-sm-12 col-12 mt-3 mt-md-4">
                <div className="casetabnx">
                  <div className="d-flex justify-content-between gap-2 mb-2 mb-md-3">
                    <div className="w-100">
                      <h4>Add New Juror</h4>
                      <p>
                        Create a new juror profile and add them to this case.
                      </p>
                    </div>
                  </div>

                  <div className="row gx-2">
                    <div className="col-lg-12 col-sm-12 col-12">
                      <div className="datafrm">
                        <label>Juror Information</label>
                      </div>
                    </div>

                    {/* Juror ID */}
                    {/* <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Juror ID</label>
                        <input
                          type="text"
                          placeholder="System Generated"
                          value={formData.jurorId || ""}
                          readOnly
                        />
                      </div>
                    </div> */}

                    {/* Juror Number */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>
                          Juror Number <span style={{ color: "red" }}>*</span>
                        </label>
                        <input
                          type="text"
                          placeholder="Enter Juror Number"
                          name="juryNumber"
                          value={formData.juryNumber}
                          onChange={handleInput}
                        />
                      </div>
                    </div>

                    {/* Case Name */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>
                          Case Name <span style={{ color: "red" }}>*</span>
                        </label>
                        <input
                          type="text"
                          name="caseName"
                          value={formData.caseName}
                          readOnly
                        />
                      </div>
                    </div>
                    {/* Last Name */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>
                          Last Name <span style={{ color: "red" }}>*</span>
                        </label>
                        <input
                          type="text"
                          placeholder="Enter last name"
                          name="lastName"
                          value={formData.lastName}
                          onChange={handleInput}
                        />
                      </div>
                    </div>
                    {/* First Name */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>
                          First Name <span style={{ color: "red" }}>*</span>
                        </label>
                        <input
                          type="text"
                          placeholder="Enter first name"
                          name="firstName"
                          value={formData.firstName}
                          onChange={handleInput}
                        />
                      </div>
                    </div>

                    {/* Middle Name */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Middle Name</label>
                        <input
                          type="text"
                          placeholder="Enter middle name"
                          name="middleName"
                          value={formData.middleName}
                          onChange={handleInput}
                        />
                      </div>
                    </div>

                    {/* Gender */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Gender</label>

                        <CustomSelect
                          name="gender"
                          value={formData.gender}
                          onChange={handleInput}
                          placeholder="Select Gender"
                          options={[
                            { label: "Male", value: "M" },
                            { label: "Female", value: "F" },
                            { label: "Other", value: "O" },
                          ]}
                        />
                      </div>
                    </div>

                    {/* Birth Year */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Birth Year</label>
                        <input
                          type="text"
                          placeholder="MM-DD-YYYY"
                          name="dob"
                          value={formData.dob}
                          onChange={handleInput}
                          onBlur={(e) => {
                            const value = e.target.value.trim();

                            if (/^\d{4}$/.test(value)) {
                              setFormData((prev) => ({
                                ...prev,
                                dob: `XX-XX-${value}`,
                              }));
                            }
                          }}
                        />
                      </div>
                    </div>

                    {/* Age */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Age</label>
                        <input
                          type="number"
                          placeholder="Enter age"
                          name="age"
                          value={formData.age}
                          onChange={handleInput}
                        />
                      </div>
                    </div>

                    {/* Address */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Address</label>
                        <input
                          type="text"
                          placeholder="Enter address"
                          value={formData.addresses?.[0]?.streetAddress || ""}
                          onChange={(e) =>
                            handleAddressChange(
                              0,
                              "streetAddress",
                              e.target.value,
                            )
                          }
                        />
                      </div>
                    </div>

                    {/* City */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>City</label>
                        <input
                          type="text"
                          placeholder="Enter city"
                          value={formData.addresses?.[0]?.city || ""}
                          onChange={(e) =>
                            handleAddressChange(0, "city", e.target.value)
                          }
                        />
                      </div>
                    </div>

                    {/* State */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>
                          State <span style={{ color: "red" }}>*</span>
                        </label>

                        <CustomSelect
                          value={formData.addresses?.[0]?.state || ""}
                          placeholder="Select State"
                          options={stateOptions}
                          onChange={(e) => {
                            const updated = [...formData.addresses];
                            updated[0].state = e.target.value;

                            setFormData({
                              ...formData,
                              addresses: updated,
                            });
                          }}
                        />
                      </div>
                    </div>

                    {/* County */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>County</label>
                        <input
                          type="text"
                          placeholder="Enter county"
                          value={formData.addresses?.[0]?.county || ""}
                          onChange={(e) =>
                            handleAddressChange(0, "county", e.target.value)
                          }
                        />
                      </div>
                    </div>

                    {/* Phone */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Phone </label>
                        <input
                          type="text"
                          placeholder="Enter phone number"
                          value={formData.addresses?.[0]?.primaryPhone || ""}
                          onChange={(e) =>
                            handleAddressChange(
                              0,
                              "primaryPhone",
                              e.target.value,
                            )
                          }
                        />

                        {errors?.addresses?.[0]?.primaryPhone && (
                          <p className="text-danger d-block mt-1">
                            {errors.addresses[0].primaryPhone}
                          </p>
                        )}
                      </div>
                    </div>

                    {/* Email */}
                    <div className="col-lg-6 col-sm-6 col-12">
                      <div className="datafrm">
                        <label>Email</label>
                        <input
                          type="email"
                          placeholder="Enter email"
                          value={formData.addresses?.[0]?.primaryEmail || ""}
                          onChange={(e) =>
                            handleAddressChange(
                              0,
                              "primaryEmail",
                              e.target.value,
                            )
                          }
                        />
                      </div>
                    </div>

                    <div className="col-12">
                      <div className="datafrm">
                        <label className="required">
                          <span style={{ color: "red" }}>*</span> Required
                          fields
                        </label>
                      </div>
                    </div>

                    <div className="col-12">
                      <div className="datafrmbtn">
                        <ul>
                          <li>
                            <button
                              className="canselbtn"
                              onClick={handleCancel}
                            >
                              Cancel
                            </button>
                          </li>

                          <li>
                            <button onClick={handleAddJuror}>Submit</button>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
