import React from "react";
import Button from "../../../component/Button.jsx";
import ContentTitle from "../../../component/ContentTitle.jsx";
import { useNavigate } from "react-router";
import Title from "../../../component/Title.jsx";

export default function VisitInsert() {
  const navigate = useNavigate();
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };
  return (
    <main>
      <div className="content-wrap">
      <ContentTitle contentTitle={"방문 등록"} />
        <div className="margin-bottom2 insert flex-align-start">
        <div className="flex30">
            <div className="flex margin-bottom">
              <input
                type="text"
                name=""
                id=""
                className="flex80"
                placeholder="사용자 검색"
              />
              <Button btnName={"검색"} className={"flex20"} />
            </div>
            <ul className="user-list">
              <li>검색 내역이 없습니다.</li>
            </ul>
          </div>
          <table className="flex70">
            <tbody>
              <tr>
                <th>대상자</th>
                <td colSpan={3}>
                  <input type="text" name="" id="" disabled />
                </td>
              </tr>
              <tr>
                <th>생년월일</th>
                <td colSpan={3}>
                <input type="text" name="" id="" disabled />
                </td>
              </tr>
              <tr>
                <th>성별</th>
                <td>
                <input type="text" name="" id="" disabled />
                </td>
              </tr>
              <tr>
                <th>주소</th>
                <td>
                <input type="text" name="" id="" disabled />
                </td>
              </tr>
              <tr>
                <th>방문날짜</th>
                <td colSpan={3}>
                  <input type="date" name="" id="" />
                </td>
              </tr>
              <tr>
                <th>방문사유</th>
                <td className="flex">
                  <div className="flex-start">
                    <input type="checkbox" className="flex10"/>
                    <label htmlFor="" className="flex90">
                      정기방문
                    </label>
                  </div>
                  <div className="flex-start">
                    <input type="checkbox"  className="flex10"/>
                    <label htmlFor="" className="flex90">
                      어르신케어
                    </label>
                  </div>
                  <div className="flex-start">
                    <input type="checkbox"  className="flex10"/>
                    <label htmlFor="" className="flex90">
                      장비점검
                    </label>
                  </div>
                </td>
              </tr>
              <tr>
                <th>방문 상세 사유</th>
                <td colSpan={3}>
                  <textarea style={{height:"225px"}} name="" id="" cols="30" rows="10"></textarea>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="btn-wrap flex-center">
          <Button className={"btn-large gray-btn"} btnName={"취소"} />
          <Button className={"btn-large green-btn"} btnName={"등록"} />
        </div>
      </div>
    </main>
  );
}