HeirApplicationAdd.js

import axios from "axios";
import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import backendURL from "../consts";

// const HeirInformation = ({ inheritor, index }) => {
//   return (
//     <tr key={index}>
//       <th scope="row" className="text-center">
//         {index + 1}
//       </th>
//       <td className="text-center">
//         <input
//           type="text"
//           className="form-control"
//           id="text"
//           placeholder="নাম"
//           name="inheritorName"
//           value={inheritor.inheritorName}
//           onChange={(e) => {}}
//         />
//       </td>
//       <td className="text-center">
//         <input
//           type="text"
//           className="form-control"
//           id="text"
//           placeholder="সম্পর্ক"
//         />
//       </td>
//       <td className="text-center">
//         <input
//           type="text"
//           className="form-control"
//           id="text"
//           placeholder="মন্তব্য"
//         />
//       </td>
//       <td className="text-center">
//         {index == 0 ? null : (
//           <button
//             type="button"
//             className="btn-icon btn-outline-lightblue font-weight-bold mr-2"
//           >
//             -
//           </button>
//         )}
//         <button
//           type="button"
//           className="btn-icon btn-outline-lightblue font-weight-bold mr-2"
//         >
//           +
//         </button>
//       </td>
//     </tr>
//   );
// };

const HeirApplicationAdd = () => {
  const [heirInfo, setHeirInfo] = useState({
    applicantsName: "",
    fathersName: "",
    mothersName: "",
    spousesName: "",
    voterIdNo: "",
    mobileNo: "",
    nationality: "",
    wardNo: 5,
    postOffice: "",
    upozilla: "",
    district: "",
    nameOfDead: "",
    fathersNameOfDead: "",
    mothersNameOfDead: "",
    spousesNameOfDead: "",
    voterIdNoOfDead: "",
    mobileNoOfDead: "",
    nationalityOfDead: "",
    wardNoOfDead: "",
    postOfficeOfDead: "",
    upozillaOfDead: "",
    districtOfDead: "",
    listOfInheritors: [
      {
        inheritorName: "",
        relationship: "",
        comment: "",
      },
      {
        inheritorName: "",
        relationship: "",
        comment: "",
      },
    ],
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setHeirInfo({ ...heirInfo, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // axios call for sending to database
    try {
      await axios.post(
        backendURL + "/api/inheritance-certificate/add",
        heirInfo
      );
    } catch (err) {
      console.log(err);
    }
  };

  const HeirInformation = ({ inheritor, index }) => {
    return (
      <tr>
        <th scope="row" className="text-center">
          {index + 1}
        </th>
        <td className="text-center">
          <input
            type="text"
            className="form-control"
            id="text"
            placeholder="নাম"
            name="inheritorName"
            value={inheritor.inheritorName}
            onChange={(e) => {
              const { name, value } = e.target;

              setHeirInfo({
                ...heirInfo,
                listOfInheritors: heirInfo.listOfInheritors.map((item, idx) =>
                  idx === index ? { ...item, [name]: value } : item
                ),
              });
            }}
          />
        </td>
        <td className="text-center">
          <input
            type="text"
            className="form-control"
            id="text"
            placeholder="সম্পর্ক"
          />
        </td>
        <td className="text-center">
          <input
            type="text"
            className="form-control"
            id="text"
            placeholder="মন্তব্য"
          />
        </td>
        <td className="text-center">
          {index == 0 ? null : (
            <button
              type="button"
              className="btn-icon btn-outline-lightblue font-weight-bold mr-2"
            >
              -
            </button>
          )}
          <button
            type="button"
            className="btn-icon btn-outline-lightblue font-weight-bold mr-2"
          >
            +
          </button>
        </td>
      </tr>
    );
  };

  return (
    <>
      <div className="content-wrapper">
        {/* ---------------- Content Header Page Header ---------------- */}
        <div className="content-header">
          <div className="container-fluid">
            <div className="row mb-2">
              <div className="col-sm-6">
                <h1 className="m-0">ওয়ারিশান সনদের আবেদন</h1>
              </div>
              <div className="col-sm-6">
                <ol className="breadcrumb float-sm-right">
                  <li className="breadcrumb-item">
                    <NavLink to="/">হোম</NavLink>
                  </li>
                  <li className="breadcrumb-item active">
                    ওয়ারিশান সনদের আবেদন
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        {/* ---------------- Main Content Start ---------------- */}
        <section className="content">
          <div className="container-fluid">
            {/* ---------------- Container Start ---------------- */}
            <div className="row">
              <div className="col-lg-3 col-md-3 col-sm-3"></div>
              <div className="col-lg-3 col-md-3 col-sm-3"></div>
              <div className="col-lg-3 col-md-3 col-sm-3"></div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <button type="button" className="btn btn-block btn-lightblue">
                  সবগুলো দেখুন
                </button>
              </div>
            </div>
            <div className="row mt-3 p-3 rounded main-bg">
              {/* <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">Text</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="Text"
                  />
                </div>
              </div> */}
              <div className="col-lg-12 col-md-12 col-sm-12 pt-4 pb-3">
                <h4 className="text-center">আবেদনকারীর তথ্য</h4>
              </div>

              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">আবেদনকারীর নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="আবেদনকারীর নাম"
                    name="applicantsName"
                    value={heirInfo.applicantsName}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">পিতার নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="পিতার নাম"
                    name="fathersName"
                    value={heirInfo.fathersName}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">মাতার নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="মাতার নাম"
                    name="mothersName"
                    value={heirInfo.mothersName}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">স্বামী/স্ত্রী-র নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="স্বামী/স্ত্রী-র নাম"
                    name="spousesName"
                    value={heirInfo.spousesName}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">ভোটার আইডি নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ভোটার আইডি নং"
                    name="voterIdNo"
                    value={heirInfo.voterIdNo}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">মোবাইল নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="মোবাইল নং"
                    name="mobileNo"
                    value={heirInfo.mobileNo}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">জাতীয়তা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="জাতীয়তা"
                    name="nationality"
                    value={heirInfo.nationality}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">ওয়ার্ড নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ওয়ার্ড নং"
                    name="wardNo"
                    value={heirInfo.wardNo}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">ডাকঘর</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ডাকঘর"
                    name="postOffice"
                    value={heirInfo.postOffice}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">উপজেলা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="উপজেলা"
                    name="upozilla"
                    value={heirInfo.upozilla}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">জেলা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="জেলা"
                    name="district"
                    value={heirInfo.district}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <div className="col-lg-12 col-md-12 col-sm-12 pt-4 pb-3">
                <h4 className="text-center">মৃত ব্যক্তির তথ্য</h4>
              </div>

              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">মৃত ব্যক্তির নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="মৃত ব্যক্তির নাম"
                    name="nameOfDead"
                    value={heirInfo.nameOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">পিতার নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="পিতার নাম"
                    name="fathersNameOfDead"
                    value={heirInfo.fathersNameOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">মাতার নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="মাতার নাম"
                    name="mothersNameOfDead"
                    value={heirInfo.mothersNameOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">স্বামী/স্ত্রী-র নাম</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="স্বামী/স্ত্রী-র নাম"
                    name="spousesNameOfDead"
                    value={heirInfo.spousesNameOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-6 col-md-6 col-sm-6">
                <div className="form-group">
                  <label htmlFor="text">ভোটার আইডি নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ভোটার আইডি নং"
                    name="voterIdNoOfDead"
                    value={heirInfo.voterIdNoOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">মোবাইল নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="মোবাইল নং"
                    name="mobileNoOfDead"
                    value={heirInfo.mobileNoOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">জাতীয়তা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="জাতীয়তা"
                    name="nationalityOfDead"
                    value={heirInfo.nationalityOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">ওয়ার্ড নং</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ওয়ার্ড নং"
                    name="wardNoOfDead"
                    value={heirInfo.wardNoOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">ডাকঘর</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="ডাকঘর"
                    name="postOfficeOfDead"
                    value={heirInfo.postOfficeOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">উপজেলা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="উপজেলা"
                    name="upozillaOfDead"
                    value={heirInfo.upozillaOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>
              <div className="col-lg-3 col-md-3 col-sm-3">
                <div className="form-group">
                  <label htmlFor="text">জেলা</label>
                  <input
                    type="text"
                    className="form-control"
                    id="text"
                    placeholder="জেলা"
                    name="districtOfDead"
                    value={heirInfo.districtOfDead}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <div className="col-lg-12 col-md-12 col-sm-12 pt-4 pb-3">
                <h4 className="text-center">ওয়ারিশানগনের তথ্য দিন</h4>
              </div>

              <div className="col-lg-12 col-md-12 col-sm-12 table-responsive">
                <table className="table table-striped" width="100%;">
                  <thead>
                    <tr>
                      <th scope="col" className="text-center">
                        #
                      </th>
                      <th scope="col" className="text-center">
                        নাম
                      </th>
                      <th scope="col" className="text-center">
                        সম্পর্ক
                      </th>
                      <th scope="col" className="text-center">
                        মন্তব্য
                      </th>
                      <th scope="col" className="text-center actionTable">
                        একশন
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {heirInfo.listOfInheritors.map((inheritor, index) => (
                      <HeirInformation
                        key={index}
                        inheritor={inheritor}
                        index={index}
                      />
                    ))}
                  </tbody>
                  <tfoot>
                    {/* <tr>
                      <th className="text-center"> </th>
                      <th> </th>
                      <th> </th>
                      <th scope="row" className="text-center"></th>
                      <th scope="row" className="text-right"></th>
                      <th className="text-center"> </th>
                    </tr> */}
                  </tfoot>
                </table>
              </div>

              <div className="col-lg-4 col-md-4 col-sm-4"></div>
              <div className="col-lg-4 col-md-4 col-sm-4">
                <button
                  type="button"
                  className="btn btn-block btn-lightblue"
                  onClick={handleSubmit}
                >
                  জমা দিন
                </button>
              </div>
              <div className="col-lg-4 col-md-4 col-sm-4"></div>
            </div>
            {/* ---------------- Container End ---------------- */}
          </div>
        </section>
        {/* ---------------- Main Content End ---------------- */}
      </div>
    </>
  );
};

export default HeirApplicationAdd;