import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Controller, set, useForm } from 'react-hook-form';
import { usePengajuanTempoStoreDokumen } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import ProgressBar from '@ramonak/react-progress-bar';
import { UseToastOptions } from '@chakra-ui/react';
import { toast } from 'react-hot-toast';
import getFileBase64 from '@/core/utils/getFileBase64';
import Image from 'next/image';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import { EyeIcon } from '@heroicons/react/24/outline';
import useDevice from '@/core/hooks/useDevice';
import imageCompression from 'browser-image-compression';
const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch } = useForm();
  const [isExample, setIsExample] = useState(false);
  const { isDesktop, isMobile } = useDevice();
  const [base64, setBase64] = useState();
  const [pdfData, setPdfData] = useState();
  const [format, setFormat] = useState();
  const [url, setUrl] = useState();
  const [popUpSource, setSource] = useState();
  const {
    formDokumen,
    errorsDokumen,
    validateDokumen,
    updateFormDokumen,
    getJumlahDokumenDiisi,
  } = usePengajuanTempoStoreDokumen();

  const handleConfirmSubmit = (format, base64) => {
    if (format == 'pdf') {
      setFormat(`application/${format}`);
    } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
      setFormat(`image/${format}`);
    } else {
      setFormat(format);
    }
    setBase64(
      base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
    );
    setIsExample(!isExample);
  };
  const handleInputChange = async (event) => {
    let fileBase64 = '';
    const { name } = event.target;
    const file = event.target.files?.[0];
    // Allowed file extensions
    const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
    let fileExtension = '';
    if (file) {
      fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension

      // Check if the file extension is allowed
      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
        toast.error(
          'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
          { duration: 4000 }
        );

        event.target.value = '';
        return;
      }

      // Check for file size
      if (file.size > 500000) {
        try {
          const toastId = toast.loading('mencoba mengompresi file...');
          // Compress image file
          const options = {
            maxSizeMB: 0.5, // Target size in MB
            maxWidthOrHeight: 1920, // Adjust as needed
            useWebWorker: true,
          };
          const compressedFile = await imageCompression(file, options);
          toast.success('berhasil mengompresi file', { duration: 4000 });
          // Convert compressed file to Base64
          fileBase64 = await getFileBase64(compressedFile);
          updateFormDokumen(
            name,
            compressedFile.name,
            fileExtension,
            fileBase64
          );
        } catch (error) {
          toast.error('Gagal mengompresi file', { duration: 4000 });
        }
      } else {
        // Convert file to Base64
        fileBase64 = await getFileBase64(file);
        updateFormDokumen(name, file.name, fileExtension, fileBase64);
      }
      validateDokumen();
    }
  };

  const isFormValid = useMemo(
    () => Object.keys(errorsDokumen).length === 0,
    [errorsDokumen]
  );
  const dokumenNibRef = useRef(null);
  const dokumenNpwpRef = useRef(null);
  const dokumenSppkpRef = useRef(null);
  const dokumenAktaPerubahanRef = useRef(null);
  const dokumenKtpDirutRef = useRef(null);
  const dokumenAktaPendirianRef = useRef(null);
  const dokumenLaporanKeuanganRef = useRef(null);
  const dokumenFotoKantorRef = useRef(null);
  const dokumenTempatBekerjaRef = useRef(null);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errorsDokumen.dokumenNib && dokumenNibRef.current) {
          dokumenNibRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenNpwp && dokumenNpwpRef.current) {
          dokumenNpwpRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenSppkp && dokumenSppkpRef.current) {
          dokumenSppkpRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenAktaPerubahan &&
          dokumenAktaPerubahanRef.current
        ) {
          dokumenAktaPerubahanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenKtpDirut && dokumenKtpDirutRef.current) {
          dokumenKtpDirutRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenAktaPendirian &&
          dokumenAktaPendirianRef.current
        ) {
          dokumenAktaPendirianRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenLaporanKeuangan &&
          dokumenLaporanKeuanganRef.current
        ) {
          dokumenLaporanKeuanganRef.current.scrollIntoView(options);
          return;
        }
        if (errorsDokumen.dokumenFotoKantor && dokumenFotoKantorRef.current) {
          dokumenFotoKantorRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsDokumen.dokumenTempatBekerja &&
          dokumenTempatBekerjaRef.current
        ) {
          dokumenTempatBekerjaRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    validateDokumen();
  }, [buttonSubmitClick]);
  return (
    <>
      {isDesktop && (
        <div>
          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
            Dokumen
          </h1>
          <form className='flex flex-col w-full gap-5  '>
            <div className='w-full flex flex-row items-center  '>
              <div className='w-2/5 flex'>
                <label className='form-label  text-nowrap'>
                  NPWP Perusahaan
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenNpwp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNpwp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenNpwp?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNpwp'
                      name='dokumenNpwp'
                      type='file'
                      title=' '
                      ref={dokumenNpwpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNpwp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNpwp.format,
                          formDokumen.dokumenNpwp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNpwp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>SPPKP</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenSppkp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSppkp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenSppkp?.name.length > 0
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSppkp'
                      name='dokumenSppkp'
                      type='file'
                      title=' '
                      ref={dokumenSppkpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSppkp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSppkp.format,
                          formDokumen.dokumenSppkp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSppkp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>NIB</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenNib?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNib'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNib'
                      name='dokumenNib'
                      type='file'
                      title=' '
                      ref={dokumenNibRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNib}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNib.format,
                          formDokumen.dokumenNib.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNib}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  SIUP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenSiup?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSiup'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen.dokumenSiup.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSiup'
                      name='dokumenSiup'
                      type='file'
                      title=' '
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSiup}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSiup.format,
                          formDokumen.dokumenSiup.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSiup}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  TDP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenTdp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTdp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen.dokumenTdp.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTdp'
                      name='dokumenTdp'
                      type='file'
                      title=' '
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTdp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTdp.format,
                          formDokumen.dokumenTdp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTdp}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  SKDP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenSkdp?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSkdp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen.dokumenSkdp.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSkdp'
                      name='dokumenSkdp'
                      type='file'
                      title=' '
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSkdp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSkdp.format,
                          formDokumen.dokumenSkdp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkdp}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  SKT <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenSkt?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSkt'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen.dokumenSkt.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSkt'
                      name='dokumenSkt'
                      type='file'
                      title=' '
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSkt}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSkt.format,
                          formDokumen.dokumenSkt.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkt}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenAktaPendirian?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPendirian'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenAktaPendirian?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPendirian'
                      name='dokumenAktaPendirian'
                      type='file'
                      title=' '
                      ref={dokumenAktaPendirianRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPendirian.format,
                          formDokumen.dokumenAktaPendirian.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPendirian}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  {' '}
                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenAktaPerubahan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPerubahan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen.dokumenAktaPerubahan.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPerubahan'
                      name='dokumenAktaPerubahan'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPerubahan.format,
                          formDokumen.dokumenAktaPerubahan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPerubahan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Foto Ruangan Tempat Kerja
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenTempatBekerja?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTempatBekerja'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenTempatBekerja?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTempatBekerja'
                      name='dokumenTempatBekerja'
                      type='file'
                      title=' '
                      ref={dokumenTempatBekerjaRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTempatBekerja.format,
                          formDokumen.dokumenTempatBekerja.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTempatBekerja}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Foto Kantor (Tampak Depan)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenFotoKantor?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenFotoKantor'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenFotoKantor'
                      name='dokumenFotoKantor'
                      type='file'
                      title=' '
                      ref={dokumenFotoKantorRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenFotoKantor}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenFotoKantor.format,
                          formDokumen.dokumenFotoKantor.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenFotoKantor}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  KTP Dirut/Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenKtpDirut?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenKtpDirut'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenKtpDirut'
                      name='dokumenKtpDirut'
                      type='file'
                      title=' '
                      ref={dokumenKtpDirutRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenKtpDirut}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenKtpDirut.format,
                          formDokumen.dokumenKtpDirut.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenKtpDirut}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-nowrap'>
                  Laporan Keuangan
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-3/5  text-gray-600 truncate max-w-48'>
                    {formDokumen?.dokumenLaporanKeuangan?.name}
                  </span>
                  <div className='w-2/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenLaporanKeuangan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenLaporanKeuangan?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenLaporanKeuangan'
                      name='dokumenLaporanKeuangan'
                      type='file'
                      title=' '
                      ref={dokumenLaporanKeuanganRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenLaporanKeuangan.format,
                          formDokumen.dokumenLaporanKeuangan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenLaporanKeuangan}
                  </div>
                )}
              </div>
            </div>
          </form>
        </div>
      )}
      {isMobile && (
        <div className=''>
          <h1 className={`font-bold ${isKonfirmasi ? 'hidden' : 'text-xl'}`}>
            Dokumen
          </h1>
          <form className='flex flex-col w-full gap-5 text-sm'>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>NPWP Perusahaan</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenNpwp?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNpwp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenNpwp?.name ? 'Sudah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNpwp'
                      name='dokumenNpwp'
                      type='file'
                      title=' '
                      ref={dokumenNpwpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNpwp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNpwp.format,
                          formDokumen.dokumenNpwp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNpwp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>SPPKP</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenSppkp?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSppkp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenSppkp?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSppkp'
                      name='dokumenSppkp'
                      type='file'
                      title=' '
                      ref={dokumenSppkpRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSppkp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSppkp.format,
                          formDokumen.dokumenSppkp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSppkp}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>NIB</label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-center justify-start'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenNib?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenNib'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenNib?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenNib'
                      name='dokumenNib'
                      type='file'
                      title=' '
                      ref={dokumenNibRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenNib}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenNib.format,
                          formDokumen.dokumenNib.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenNib}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  SIUP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenSiup?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSiup'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenSiup?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSiup'
                      name='dokumenSiup'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSiup}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSiup.format,
                          formDokumen.dokumenSiup.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSiup}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  TDP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenTdp?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTdp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenTdp?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTdp'
                      name='dokumenTdp'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTdp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTdp.format,
                          formDokumen.dokumenTdp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTdp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  SKDP <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenSkdp?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSkdp'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenSkdp?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSkdp'
                      name='dokumenSkdp'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSkdp}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSkdp.format,
                          formDokumen.dokumenSkdp.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkdp}
                  </div>
                )}
              </div>
            </div>
            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  SKT <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenSkt?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenSkt'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenSkt?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenSkt'
                      name='dokumenSkt'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenSkt}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenSkt.format,
                          formDokumen.dokumenSkt.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenSkt}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  {' '}
                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenAktaPerubahan?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPerubahan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenAktaPerubahan?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPerubahan'
                      name='dokumenAktaPerubahan'
                      type='file'
                      title=' '
                      ref={dokumenAktaPerubahanRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPerubahan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPerubahan.format,
                          formDokumen.dokumenAktaPerubahan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPerubahan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  KTP Dirut/Direktur{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenKtpDirut?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenKtpDirut'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenKtpDirut?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenKtpDirut'
                      name='dokumenKtpDirut'
                      type='file'
                      title=' '
                      ref={dokumenKtpDirutRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenKtpDirut}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenKtpDirut.format,
                          formDokumen.dokumenKtpDirut.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenKtpDirut}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenAktaPendirian?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenAktaPendirian'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenAktaPendirian?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenAktaPendirian'
                      name='dokumenAktaPendirian'
                      type='file'
                      title=' '
                      ref={dokumenAktaPendirianRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenAktaPendirian}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenAktaPendirian.format,
                          formDokumen.dokumenAktaPendirian.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenAktaPendirian}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Laporan Keuangan
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenLaporanKeuangan?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenLaporanKeuangan'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenLaporanKeuangan?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenLaporanKeuangan'
                      name='dokumenLaporanKeuangan'
                      type='file'
                      title=' '
                      ref={dokumenLaporanKeuanganRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenLaporanKeuangan.format,
                          formDokumen.dokumenLaporanKeuangan.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenLaporanKeuangan}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Foto Kantor (Tampak Depan)
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate '>
                    {formDokumen?.dokumenFotoKantor?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenFotoKantor'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20 text-center'
                    >
                      {formDokumen?.dokumenFotoKantor?.name ? 'Ubah' : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenFotoKantor'
                      name='dokumenFotoKantor'
                      type='file'
                      title=' '
                      ref={dokumenFotoKantorRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenFotoKantor}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenFotoKantor.format,
                          formDokumen.dokumenFotoKantor.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenFotoKantor}
                  </div>
                )}
              </div>
            </div>

            <div className='w-full flex flex-row items-center '>
              <div className='w-2/5'>
                <label className='form-label  text-wrap'>
                  Foto Ruangan Tempat Kerja
                </label>
              </div>
              <div className='w-3/5'>
                <div className='flex flex-row items-start justify-between'>
                  <span className='w-2/5  text-gray-600 truncate'>
                    {formDokumen?.dokumenTempatBekerja?.name}
                  </span>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <label
                      htmlFor='dokumenTempatBekerja'
                      className='cursor-pointer bg-red-500 hover:bg-red-600 text-white py-1 px-3 text-sm rounded min-w-20'
                    >
                      {formDokumen?.dokumenTempatBekerja?.name
                        ? 'Ubah'
                        : 'Upload'}
                    </label>
                    <input
                      // value={formDokumen?.dokumenNib?.name}
                      id='dokumenTempatBekerja'
                      name='dokumenTempatBekerja'
                      type='file'
                      title=' '
                      ref={dokumenTempatBekerjaRef}
                      className='hidden'
                      aria-invalid={errorsDokumen.dokumenTempatBekerja}
                      onChange={handleInputChange}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <button
                      className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
                      type='button'
                      onClick={() =>
                        handleConfirmSubmit(
                          formDokumen.dokumenTempatBekerja.format,
                          formDokumen.dokumenTempatBekerja.base64
                        )
                      }
                    >
                      <EyeIcon className={`w-4 ${isDesktop && ''}`} />
                    </button>
                  </div>
                  {/* <Image
               src={`data:image/png;base64, ${formDokumen.dokumenNib.base64}`}
               alt='Contoh SPPKP'
               className='w-full h-full '
               width={800}
               height={800}
               quality={85}
             /> */}
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsDokumen.dokumenTempatBekerja}
                  </div>
                )}
              </div>
            </div>
          </form>
        </div>
      )}
      {isDesktop && (
        <BottomPopup
          className='w-full h-full'
          title='Dokumen'
          active={isExample}
          close={() => setIsExample(false)}
        >
          <div className='flex  justify-center items-center p-2'>
            <iframe
              // src={`${
              //   format == null ? url : `data:${format};base64,${base64}`
              // }`}
              // src={`http://192.168.23.244:8069` + `${format}`}
              src={`data:${format};base64,${base64}`}
              width='800px'
              height='600px'
              title='Document'
            ></iframe>
            {/* <embed
              src={`data:${format};base64,${base64}`}
              width='100%'
              height='600px'
            /> */}
          </div>
        </BottomPopup>
      )}
      {isMobile && (
        <BottomPopup
          className='!container'
          title='Dokumen'
          active={isExample}
          close={() => setIsExample(false)}
        >
          <div className='flex  justify-center items-center p-2'>
            {/* <iframe
              // src={`${
              //   format == null ? url : `data:${format};base64,${base64}`
              // }`}
              src={`http://192.168.23.244:8069` + `${format}`}
              // src={format}
              width='800px'
              height='600px'
              title='Document'
            ></iframe> */}
            <embed
              src={`data:${format};base64,${base64}`}
              width='100%'
              height='600px'
            />
          </div>
        </BottomPopup>
      )}
    </>
  );
};

export default KonfirmasiDokumen;

{
  /* <iframe
  src={`data:application/octet-stream;base64, ${base64}`}
  // src={`data:application/${format};base64, ${base64}`}
  width='800px'
  height='600px'
  title='NPWP File'
  frameBorder='0'
  sandbox
  ></iframe> */
}
{
  /* <Image
  src={`data:image/${format};base64, ${base64}`}
  alt='Contoh SPPKP'
  className='w-full h-full '
  width={1200}
  height={1200}
  quality={85}
  /> */
}

// <div className='flex  justify-center items-center p-2'>
//   {!format.includes('undifined') ? (
//     <object
//       data={`data:${format};base64,${base64}`}
//       type={format}
//       width='100%'
//       height='100%'
//       onError={(e) => {
//         // Jika <object> gagal menampilkan PDF, unduh otomatis
//         const link = document.createElement('a');
//         link.href = `data:${format};base64,${base64}`;
//         link.download = 'document.pdf';
//         link.click();
//       }}
//     >
//       PDF tidak dapat ditampilkan.
//       <a
//         href={`data:${format};base64,${base64}`}
//         download='document.pdf'
//       >
//         {' '}
//         Klik <span className='text-red-500'>di sini</span> untuk
//         mengunduh PDF
//       </a>
//     </object>
//   ) : (
//     <embed
//       src={
//         '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
//       }
//       width='100%'
//       height='600px'
//     />
//   )}
//   {/* <embed
//     src={
//       '/web/image/2540181?unique=7050288dd34d7318bf059e7f362540f6ad5533f9'
//     }
//     width='100%'
//     height='600px'
//   /> */}
// </div>