Untitled

"use client";

import MainLayout from "@/components/HOC/layout/MainLayout";
import React, { useEffect, useState } from "react";
import { useRouter, useParams } from "next/navigation";
import Image from "next/image";
import axios from "axios";
import { apiEndpoint } from "@/app/api/config";
import Cookies from "js-cookie";

export default function CCTVCertificatePage() {
  const [selectedFile, setSelectedFile] = useState<any | null>(null);
  const [company, setCompany] = useState<any>(null);
  const [businessUnits, setBusinessUnits] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);
  const [uploadError, setUploadError] = useState<string | null>(null);
  const [uploadSuccess, setUploadSuccess] = useState<any | null>(null);
  const [uploadedData, setUploadedData] = useState<any>(null);
  const [companyDocuments, setCompanyDocuments] = useState<any[]>([]);
  const [documentsLicense, setDocumentsLicense] = useState<any[]>([]);
  const [business, setBusiness] = useState<any>(null);
  const [companies, setCompanies] = useState<any[]>([]);
  const [userName, setUserName] = useState<string | null>(null);
  const [documentsLicenseNumber, setDocumentsLicenseNumber] = useState<any>();

  const handleView = (idDoc: any) => {
    router.push(`/business/cctv-certificate/${id}/detail/${idDoc}`);
  };

  const router = useRouter();
  const { id } = useParams();

  useEffect(() => {
    const fetchBusinessDetails = async () => {
      try {
        const userId = Cookies.get("authUserId");
        const storedUserName = Cookies.get("authUserName");

        if (!userId || !storedUserName) {
          router.push("/login");
          return;
        }

        setUserName(storedUserName);

        const companiesResponse = await axios.get(
          `${apiEndpoint}/api/companies?owner_id=${userId}`
        );
        const fetchedCompanies = companiesResponse.data.data;
        setCompanies(fetchedCompanies);

        const businessResponse = await axios.get(
          `${apiEndpoint}/api/business_units/${id}`
        );
        const fetchedBusinesses = businessResponse.data.data;
        setBusiness(fetchedBusinesses);

        const documentsResponseChamber = await axios.get(
          `${apiEndpoint}/api/business_units/${id}/documents?type=cctv_certificate`
        );
        const fetchedDocumentsChamber = documentsResponseChamber.data.data;
        const transformedDocuments = fetchedDocumentsChamber.map(
          (doc: any) => ({
            ...doc,
            data:
              typeof doc.data === "string" ? JSON.parse(doc.data) : doc.data,
            license_number: "balbalba",
            remind_at: null, // Set to null as needed
            expired_at: null, // Set to null as needed
            created_at: "2024-08-26T01:47:09.129Z", // Example static date
            updated_at: "2024-09-02T06:51:21.111Z", // Example static date
          })
        );
        console.log(transformedDocuments);
        setDocumentsLicense(transformedDocuments);
        setDocumentsLicenseNumber(transformedDocuments[0]);
        console.log(documentsLicenseNumber);
      } catch (error) {
        setError("Failed to fetch business details.");
        console.error("Error fetching business details:", error);
      } finally {
        setLoading(false);
      }
    };

    if (id) {
      fetchBusinessDetails();
    }
  }, [id]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleViewDetail = () => {
    router.push(`/business/cctv-certificate/${id}/detail/${documentsLicenseNumber.id}`);
  };

  const handleUpload = async () => {
    router.push(`/business/cctv-certificate/upload/${id}`);
  };

  const handleRemove = () => {
    const fileInput = document.getElementById(
      "dropzone-file"
    ) as HTMLInputElement;
    if (fileInput) {
      fileInput.value = ""; // Reset the input file value
    }
    setSelectedFile(null);
    setUploadSuccess(false);
    setUploadError(null);
  };

  if (loading) {
    return (
      <MainLayout>
        <div className="flex justify-center items-center min-h-screen">
          <p className="text-blue-500">Loading...</p>
        </div>
      </MainLayout>
    );
  }

  if (error) {
    return (
      <MainLayout>
        <div className="flex justify-center items-center min-h-screen">
          <p className="text-red-500">{error}</p>
        </div>
      </MainLayout>
    );
  }

  return (
    <MainLayout>
      <div className="border-solid bg-white p-8 rounded-xl border-2 relative">
        <h3 className="text-base text-gray-400 mb-2">Latest update</h3>
        <div className="flex">
          {company?.name === "Kuwais International Ltd." ? (
            <Image
              className="h-20 w-20 rounded-xl bg-white border-solid border-2"
              src="/images/Police.png"
              alt="Company Profile"
              width={200}
              height={200}
            />
          ) : (
            <Image
              className="h-20 w-20 rounded-xl bg-white border-solid border-2"
              src="/images/Police.png"
              alt="Company Profile"
              width={200}
              height={200}
            />
          )}
          <div className="ml-6 mt-4">
            {documentsLicense.length > 0 ? (
              documentsLicense.map((doc, index) => (
                <ul key={index} className="space-y-4">
                  <div className="flex justify-between space-x-8">
                    <li>
                      <h2 className="text-gray-400 text-sm">License Number</h2>
                      <h2 className="text-gray-700 font-bold text-lg">
                        {doc.license_number ? doc.license_number : "-"}
                      </h2>
                    </li>
                  </div>
                </ul>
              ))
            ) : (
              <li className="mb-5">
                <h2>-</h2>
              </li>
            )}
          </div>
        </div>
        <h1 className="text-black text-2xl font-bold py-4 ">
          CCTV Certificate
        </h1>

        <div onClick={handleViewDetail} className="absolute cursor-pointer right-4 top-4 mb-4 flex justify-center items-center w-20 h-8 border-2 border-solid border-gray-400 bg-white rounded-full ">
          <h2 className="text-gray-400 text-xs">Detail</h2>
        </div>


        <div className="flex flex-col items-center w-full ">
          <div
            className="flex flex-col items-center justify-center w-full h-20 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50"
            onClick={handleUpload}
          >
            <div className="flex space-x-2 text-center items-center justify-center pt-5 pb-6">
              {selectedFile ? (
                selectedFile ? (
                  <p className="text-lg font-semibold mt-2 text-gray-500">
                    {selectedFile.name}
                  </p>
                ) : (
                  <p className="text-lg font-semibold mt-2 text-gray-500">
                    Unsupported file type
                  </p>
                )
              ) : (
                <>
                  <Image
                    className=" min-w-fit"
                    src="/images/add.png"
                    alt="Upload"
                    width={30}
                    height={30}
                  />
                  <p className="text-xs whitespace-nowrap tracking-wider font-semibold mt-2 text-gray-500">
                    Upload
                  </p>
                </>
              )}
            </div>
            <input
              id="dropzone-file"
              type="file"
              className="hidden"
              onChange={handleFileChange}
            />
          </div>
          {selectedFile && !uploadSuccess && (
            <>
              <div className="flex justify-center p-2 w-full items-center border border-solid border-gray-200 bg-gray-200 mt-6 rounded-xl">
                <Image
                  className=" h-8 w-8 "
                  src="/images/trash.png"
                  alt="Add Document"
                  width={30}
                  height={30}
                />
                <button
                  onClick={handleRemove}
                  className="p-2 bg-gray-200 text-xs text-gray-500 -"
                  disabled={uploading}
                >
                  Remove Document
                </button>
              </div>

              <button
                onClick={handleUpload}
                className="mt-4 px-4 py-4 w-full bg-blue-500 text-white rounded-xl"
                disabled={uploading}
              >
                {uploading ? "Uploading..." : "Upload File"}
              </button>
            </>
          )}

          {uploadSuccess && !selectedFile && <div></div>}
          {uploadError && <p className="text-red-500 mt-2">{uploadError}</p>}

          {/* Display the uploaded file data */}
        </div>
      </div>

      <div className="mt-5">
        <ol className="relative border-gray-500">
          {documentsLicense.length > 0 ? (
            documentsLicense.map((doc, index) => (
              <li key={index} className="mb-5">
                <div
                  onClick={() => handleView(doc.id)}
                  className="border-2 w-full border-solid cursor-pointer bg-white rounded-xl p-2 flex items-center"
                >
                  <Image
                    className="h-12 w-12 rounded-xl border-2 border-gray-200 border-solid m-2"
                    src="/images/PdfImage.png"
                    alt="File Icon"
                    width={100}
                    height={100}
                  />
                  <div className="flex-grow">
                    <h3 className="font-semibold  ">CCTV Certificate</h3>
                    <h3 className="text-xs text-gray-400">
                      Upload: {doc.data.startDate || "Not available"}
                    </h3>
                  </div>
                  <div className="ml-auto">
                    <Image
                      className="h-6 w-6"
                      src="/images/IconDetail.png"
                      alt="Detail Icon"
                      width={24}
                      height={24}
                    />
                  </div>
                </div>
              </li>
            ))
          ) : (
            <li className="mb-5">
              <p className="text-gray-500">
                No CCTV Certificate documents available.
              </p>
            </li>
          )}
        </ol>
      </div>
    </MainLayout>
  );
}