import { useEffect, useState } from "react";
import Link from "next/link";
import Layout from "@/app/layout";

const Detail = () => {
  const [activeTab, setActiveTab] = useState("#info");
  const [isClient, setIsClient] = useState(false);

  const showTab = (tab: string) => {
    console.log(`Tab clicked: ${tab}`);
    setActiveTab(tab);
  };

  useEffect(() => {
    setIsClient(true); // Chỉ set khi component đã mount trên client
  }, []);

  if (!isClient) {
    return null; // Tránh render trên server
  }

  return (
    <Layout>
      <div className="page-job detail">
        <div className="container-job">
          <h2 className="title">Nhân viên phát triển thị trường</h2>
          <div className="content-job flex">
            <div className="left-job">
              <div className="item">
                <p>Địa điểm</p>
                <b>Hà Nội</b>
              </div>
              <div className="item">
                <p>Hình thức làm việc</p>
                <b>Toàn thời gian cố định</b>
              </div>
              <div className="item">
                <p>Số lượng tuyển</p>
                <b>7</b>
              </div>
            </div>
            <div className="right-job">
              <div className="list-tab flex items-center">
                <div
                  onClick={() => showTab("#info")}
                  data-id="#info"
                  className={`item-tab ${
                    activeTab === "#info" ? "active" : ""
                  }`}
                >
                  Chi tiết
                </div>
                <div
                  onClick={() => showTab("#formjob")}
                  data-id="#formjob"
                  className={`item-tab ${
                    activeTab === "#formjob" ? "active" : ""
                  }`}
                >
                  Nộp hồ sơ
                </div>
              </div>
              <div
                className={`content-tab ${
                  activeTab === "#info" ? "active" : ""
                }`}
                id="info"
              >
                <b>Vị trí: Nhân viên phát triển thị trường</b>

                <h2 className="title">Mô tả công việc</h2>
                <ul>
                  <li>
                    Tìm kiếm khách hàng mới, tiếp cận khai thác Khách hàng tiềm
                    năng.
                  </li>
                  <li>Tư vấn khách hàng về sản phẩm, dịch vụ của công ty.</li>
                  <li>
                    Chốt hợp đồng khách hàng, triển khai quy trình làm việc với
                    khách hàng.
                  </li>
                  <li>
                    Hỗ trợ và chăm sóc khách hàng (tiềm năng, hiện tại, cũ) tạo
                    mối quan hệ với khách hàng.
                  </li>
                  <li>
                    Tiếp thu ý kiến khách hàng, phối hợp với các bộ phận khác để
                    khai thác tối đa lợi ích của dịch vụ, khách hàng.
                  </li>
                  <li>
                    Hoàn thành chỉ tiêu kinh doanh nhóm và chỉ tiêu cá nhân.
                  </li>
                </ul>
                <p>&nbsp;</p>
                <h2 className="title">Yêu cầu ứng viên:</h2>
                <ul>
                  <li>
                    Tốt nghiệp Cao Đẳng trở lên các trường đào tạo chuyên ngành
                    quản trị kinh doanh, CNTT hoặc các ngành liên quan.
                  </li>
                  <li>
                    Đặc biệt ưu tiên có kinh nghiệm làm việc ở các lĩnh vực kinh
                    doanh phần mềm, bán hàng, tư vấn, tiếp thị các sản phẩm về
                    CNTT là 1 lợi thế.
                  </li>
                  <li>
                    Có kỹ năng giao tiếp thuyết phục đàm phán tốt , năng động,
                    cải tiến, sáng tạo, chủ động trong công việc.
                  </li>
                  <li>
                    Tinh thần trách nhiệm trong công việc. Yêu thích công việc
                    kinh doanh và không ngừng học hỏi, sẵn sàng tiếp thu các
                    kiến thức mới.
                  </li>
                  <li>Có laptop, có phương tiện đi lại.</li>
                </ul>
                <p>&nbsp;</p>
                <h2 className="title">Quyền lợi:</h2>
                <ul>
                  <li>
                    Môi trường làm việc chuyên nghiệp, năng động, thân thiện
                  </li>
                  <li>Luôn được tiếp xúc với công nghệ và thử thách mới.</li>
                  <li>
                    Lương: Lương cứng + hoa hồng + phụ cấp xăng xe, điện thoại
                  </li>
                  <li>Thưởng theo ngày lễ, tết</li>
                  <li>
                    Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình
                    huống…..)
                  </li>
                  <li>Làm việc từ T2 – sáng T7</li>
                  <li>Đóng bảo hiểm theo quy định của Nhà nước</li>
                  <li>
                    Được hưởng đầy đủ các chế độ theo quy định của luật lao động
                  </li>
                </ul>
                <p>
                  Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email{" "}
                  <a href="mailto:info@hurasoft.com">info@hurasoft.com</a>
                </p>

                <a
                  href="javascript:void(0)"
                  onClick={() => showTab("#formjob")}
                  className="btn apply-job"
                >
                  Ứng tuyển ngay
                </a>
              </div>
              <div
                className={`content-tab ${
                  activeTab === "#formjob" ? "active" : ""
                }`}
                id="formjob"
              >
                <input type="hidden" id="js-job_id" value="13" />
                <div className="item-upload d-flex flex-wrap align-items">
                  <div className="upload-left">
                    <div className="d-flex align-items">
                      <i className="fa-solid fa-cloud-arrow-up"></i>
                      <p className="name-up">Tải lên sơ yếu lý lịch</p>
                    </div>
                    <p className="gray">
                      Tải sơ yếu lý lịch của bạn lên đây để tự động điền các
                      thông tin chính.
                    </p>
                  </div>
                  <div className="upload-right">
                    <input id="js-file-upload-id" type="hidden" value="" />
                    <div id="js-container-selector">
                      <a
                        id="js-select-file"
                        href="javascript:void(0);"
                        className="btn-upload d-block dz-clickable"
                      >
                        Upload file
                      </a>
                    </div>
                  </div>
                  <div className="pd-preview-file-upload">
                    <div id="js-file-uploaded-list"></div>
                    <div id="js-preview-file-upload"></div>
                  </div>
                </div>
                <div className="item-form">
                  <label>
                    Tên <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="name"
                    id="js-user_name"
                    placeholder="Nhập họ và tên"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>
                    Email <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="email"
                    id="js-user_email"
                    placeholder="Nhập địa chỉ email"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>
                    Số điện thoại <span>*</span>
                  </label>
                  <input
                    type="text"
                    className="input-item"
                    name="phone"
                    id="js-user_mobile"
                    placeholder="Nhập số điện thoại"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>Thông tin bổ sung</label>
                  <span className="ghichu">
                    Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi
                    biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các
                    bối cảnh bổ sung liên quan đến hồ sơ của bạn.
                  </span>
                  <textarea
                    className="input-item"
                    name="messenger"
                    id="js-user_note"
                    placeholder="Nhập nội dung bổ sung"
                  ></textarea>
                </div>
                <a href="javascript:void(0)" className="btn btn-submit">
                  Nộp đơn <i className="fa-regular fa-paper-plane"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Detail;
