import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
import stateApi from '@/lib/address/api/stateApi.js';
import districtApi from '@/lib/address/api/districtApi';
import subDistrictApi from '@/lib/address/api/subDistrictApi';
import { yupResolver } from '@hookform/resolvers/yup';
import React, {
  useEffect,
  useRef,
  useState,
  forwardRef,
  useImperativeHandle,
} from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import { Controller, useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import * as Yup from 'yup';
import createMerchantApi from '../api/createMerchantApi';
import getMerchantApi from '../api/getMerchantApi';
import addressApi from '@/lib/address/api/addressApi';
import PageContent from '@/lib/content/components/PageContent';
import { useRouter } from 'next/router';
import useAuth from '@/core/hooks/useAuth';
import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
import { EyeIcon } from '@heroicons/react/24/outline';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import Image from 'next/image';
import ImageBanner from '~/components/ui/image';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import getFileBase64 from '@/core/utils/getFileBase64';
import odooApi from '~/libs/odooApi';

const CreateMerchant = forwardRef(
  ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
    const isError = (value) => {
      // Logika menentukan error
      const result = value ? true : false;
      handleIsError(result); // Panggil handleIsError dari Merchant
      return result;
    };
    // React.useEffect(() => {
    //   handleIsError(isError());
    // }, [handleIsError]);
    const {
      register,
      handleSubmit,
      formState: { errors },
      control,
      reset,
      watch,
      setValue,
      getValues,
    } = useForm({
      resolver: yupResolver(validationSchema),
      defaultValues,
    });
    const [bisnisType, setBisnisType] = useState([]);
    const [state, setState] = useState([]);
    const [cities, setCities] = useState([]);
    const [districts, setDistricts] = useState([]);
    const [subDistricts, setSubDistricts] = useState([]);
    const [zips, setZips] = useState([]);
    const [isExample, setIsExample] = useState(false);
    const [isPkp, setIsPkp] = useState(false);
    const [fileNames, setFileNames] = useState({});
    const [DeatailFile, setDetailFile] = useState({});
    const npwpRef = useRef(null);
    const sppkpRef = useRef(null);
    const ktpDirutRef = useRef(null);
    const kartuNamaRef = useRef(null);
    const suratPernyataanRef = useRef(null);
    const fotoKantorRef = useRef(null);
    const bisnisTypeRef = useRef(null);

     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();
        }
      };
    

    useEffect(() => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    }, []);


    useImperativeHandle(ref, () => () => {
      handleSubmit(onSubmitHandler)();
    });

    const recaptchaRef = useRef(null);
    const router = useRouter();

    const auth = useAuth();
    if (auth == false) {
      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
    }
    const dataBisnisType = [
      { value: 1, label: 'PT' },
      { value: 2, label: 'CV' },
      { value: 3, label: 'Perorangan' },
    ];
    const dataCategoryPerusahaan = [
      { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
      { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
      { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
      { value: 4, label: 'Importer (Pengimpor Barang)' },
      { value: 5, label: 'Wholesaler (Pedagang Besar)' },
    ];

    const handleFileChange = async (event) => {
          let fileBase64 = '';
          const file = event.target.files[0];
    
          if (file.size > 2000000) {
            // 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);
            // } catch (error) {
            //   toast.error('Gagal mengompresi file', { duration: 4000 });
            // }
            toast.error('Maks file size 2MB', { duration: 4000 });
          } else {
            // Convert file to Base64
            fileBase64 = await getFileBase64(file);
          }
          const fieldName = event.target.name; // Nama input file
          setDetailFile((prev) => ({
            ...prev,
            [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
          }));
          setFileNames((prev) => ({
            ...prev,
            [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
          }));
        };

    useEffect(() => {
      const loadData = async () => {
        try {
          const data = await getMerchantApi();
          if (data) {
            reset({
              name: data.name ? data.name : '',
              address: data.address ? data.address : '',
              state: data.state ? data.state : '',
              city: data.city || '',
              district: data.district || '',
              subDistrict: data.subDistrict || '',
              zip: parseInt(data.zip) || '',
              email: data.emailCompany || '',
              emailSales: data.emailSales || '',
              emailFinance: data.emailFinance || '',
              bank: data.bankName || '',
              rekening: data.rekeningName || '',
              accountNumber: data.accountNumber || '',
              phone: data.phone || '',
              mobile: data.mobile || '',
              bisnisType: data.bisnisType || '',
              categoryPerusahaan: data.categoryPerusahaan
                ? parseInt(data.categoryPerusahaan)
                : null,
              website: data.website || '',
            });
             setFileNames((prev) => ({
              ...prev,
              ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
              ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
              ['dokumenKtpDirut']: data.fileDokumenKtpDirut
                ? data.fileDokumenKtpDirut.name
                : '',
              ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
              ['suratPernyataan']: data.fileSuratPernyataan
                ? data.fileSuratPernyataan.name
                : '',
              ['fotoKantor']: data.fileFotoKantor
                ? data.fileFotoKantor.name
                : '',
              ['dataProduk']: data.fileDataProduk
                ? data.fileDataProduk.name
                : '',
            }));
          }
        } catch (error) {
          console.error('Error loading profile:', error);
          handleIsError(true); // Jika ada error, panggil fungsi error handler
        }
      };

      loadData();
    }, [reset, handleIsError]);

    useEffect(() => {
      if (errors.bisnisType && bisnisTypeRef.current) {
        bisnisTypeRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }, [errors.bisnisType]);

    useEffect(() => {
      const loadProfile = async () => {
        try {
          const dataProfile = await addressApi({
            id: auth.parentId ? auth.parentId : auth.partnerId,
          });
          if (dataProfile.companyType == 'pkp') {
            setIsPkp(true);
          }
          setValue('name', dataProfile?.name);
          setValue('address', dataProfile?.alamatBisnis);
          setValue('state', parseInt(dataProfile.stateId.id));
          setValue('city', parseInt(dataProfile.city.id));
          setValue('district', parseInt(dataProfile.district.id));
          setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
          setValue('zip', parseInt(dataProfile.zip));
        } catch (error) {
          console.error('Error loading profile:', error);
        }
      };
      const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
      const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
      const dokumenKtpDirut = {
        name: fileNames.dokumenKtpDirut,
        format: DeatailFile.dokumenKtpDirut,
      };
      const kartuNama = {
        name: fileNames.kartuNama,
        format: DeatailFile.kartuNama,
      };
      const suratPernyataan = {
        name: fileNames.suratPernyataan,
        format: DeatailFile.suratPernyataan,
      };
      const fotoKantor = {
        name: fileNames.fotoKantor,
        format: DeatailFile.fotoKantor,
      };
      const dataProduk = {
        name: fileNames.dataProduk,
        format: DeatailFile.dataProduk,
      };
      const pricelist = {
        name: fileNames.pricelist,
        format: DeatailFile.pricelist,
      };
   const dokumen = {
        file_npwp: { details: npwp.format ? npwp : '' },
        file_sppkp: { details: sppkp.format ? sppkp : '' },
        file_dokumenKtpDirut: {
          details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
        },
        file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
        file_suratPernyataan: {
          details: suratPernyataan.format ? suratPernyataan : '',
        },
        file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
        file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
      };
      
      let data = {
        file_dokumen: JSON.stringify(dokumen),
      };

      loadProfile();
    }, [auth?.parentId]);

    useEffect(() => {
      const loadState = async () => {
        let dataState = await stateApi({ tempo: false });
        dataState = dataState.map((state) => ({
          value: state.id,
          label: state.name,
        }));
        setState(dataState);
      };
      loadState();
    }, []);

    const watchState = watch('state');
    useEffect(() => {
      if (auth == false) {
        return;
      }
      if (watchState) {
        // setValue('city', '');
        const loadCities = async () => {
          let dataCities = await cityApi({ stateId: watchState });
          dataCities = dataCities?.map((city) => ({
            value: city.id,
            label: city.name,
          }));
          setCities(dataCities);
        };
        loadCities();
      }
    }, [auth, watchState]);

    const watchCity = watch('city');
    useEffect(() => {
      if (watchCity) {
        // setValue('district', '');
        const loadDistricts = async () => {
          let dataDistricts = await districtApi({ cityId: watchCity });
          dataDistricts = dataDistricts.map((district) => ({
            value: district.id,
            label: district.name,
          }));
          setDistricts(dataDistricts);
        };
        loadDistricts();
      }
    }, [watchCity]);

    const watchDistrict = watch('district');
    useEffect(() => {
      if (watchDistrict) {
        // setValue('subDistrict', '');
        const loadSubDistricts = async () => {
          let dataSubDistricts = await subDistrictApi({
            districtId: watchDistrict,
          });
          dataSubDistricts = dataSubDistricts.map((district) => ({
            value: district.id,
            label: district.name,
          }));
          setSubDistricts(dataSubDistricts);
        };
        loadSubDistricts();
      }
    }, [watchDistrict]);

    const watchsubDistrict = watch('subDistrict');

    useEffect(() => {
      let kelurahan = '';
      let kecamatan = '';

      if (watchDistrict) {
        // setValue('zip', '');
        for (const data in districts) {
          if (districts[data].value == watchDistrict) {
            kecamatan = districts[data].label.toLowerCase();
          }
        }
      }

      if (watchsubDistrict) {
        for (const data in subDistricts) {
          if (subDistricts[data].value == watchsubDistrict) {
            kelurahan = subDistricts[data].label.toLowerCase();
          }
        }
        const loadZip = async () => {
          const response = await fetch(
            `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
          );

          let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses

          const result = await response.json();

          // Filter dan map data
          const dataZips = result.result
            .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
            .filter((zip) => {
              // Pastikan zip.kodepos belum ada di dataMasuk
              if (dataMasuk.includes(zip.kodepos)) {
                return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
              } else {
                dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
                return true; // Tambahkan zip ke hasil
              }
            })
            .map((zip) => ({
              value: parseInt(zip.kodepos),
              label: zip.kodepos,
            }));

          setZips(dataZips); // Set hasil ke state
        };

        loadZip();
      }
    }, [watchsubDistrict, subDistricts]);
    const [selected, setSelected] = useState('PKP');
    const onSubmitHandler = async (values) => {
       const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
      const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
      const dokumenKtpDirut = {
        name: fileNames.dokumenKtpDirut,
        format: DeatailFile.dokumenKtpDirut,
      };
      const kartuNama = {
        name: fileNames.kartuNama,
        format: DeatailFile.kartuNama,
      };
      const suratPernyataan = {
        name: fileNames.suratPernyataan,
        format: DeatailFile.suratPernyataan,
      };
      const fotoKantor = {
        name: fileNames.fotoKantor,
        format: DeatailFile.fotoKantor,
      };
      const toastId = toast.loading('Mengirimkan formulir merchant...');
      const dokumen = {
        file_npwp: { details: npwp.format ? npwp : '' },
        file_sppkp: { details: sppkp.format ? sppkp : '' },
        file_dokumenKtpDirut: {
          details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
        },
        file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
        file_suratPernyataan: {
          details: suratPernyataan.format ? suratPernyataan : '',
        },
        file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
      };
      const data = {
        name_merchant: 'Form Merchant - ' + values.name,
        address: values.address,
        state: parseInt(values.state),
        city: parseInt(values.city),
        district: parseInt(values.district),
        subDistrict: parseInt(values.subDistrict),
        zip: values.zip,
        bank_name: values.bank,
        rekening_name: values.rekening,
        account_number: values.accountNumber,
        email_company: values.email,
        email_sales: values.emailSales,
        email_finance: values.emailFinance,
        phone: values.phone,
        mobile: values.mobile,
        bisnis_type: values.bisnisType,
        description:
          'Nama Perusahaan : ' +
          values.name +
          ' \r\n  Alamat  : ' +
          values.address +
          ' \r\n  Kota  : ' +
          values.city +
          ' \r\n  Telepon: ' +
          values.phone +
          ' \r\n  Email  : ' +
          values.email +
          ' \r\n No Hp : ' +
          values.mobile,
        file_dokumen: JSON.stringify(dokumen),
      };
      const options = {
        behavior: 'smooth',
        block: 'center',
      };
      if (!dokumenKtpDirut.name && !isPkp) {
        toast.error('KTP Dirut/Direktur wajib di tambahkan');
        if (ktpDirutRef?.current) {
          ktpDirutRef.current.scrollIntoView(options);
        }
        return;
      }
      if (!fotoKantor.name) {
        toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
        if (fotoKantorRef?.current) {
          fotoKantorRef.current.scrollIntoView(options);
        }
        return;
      }
      const create_leads = await createMerchantApi({ data });
      if (create_leads) {
        toast.dismiss(toastId);
        toast.success('Berhasil menambahkan data');
        isError(false);
        reset();
        // router.push('/');
      } else {
        toast.dismiss(toastId);
        toast.error('Gagal menambahkan data');
      }
    };

    // const DownLoadSurat = () => {
    //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
    // };

    if (!auth) {
      return;
    }
    // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
     const onInvalid = (errors) => {
    console.error('Form validation errors:', errors);
  };

    

    return (
      <>
        <BottomPopup
          className=''
          title='Contoh SPPKP'
          active={isExample}
          close={() => setIsExample(false)}
        >
          <div className='flex p-2'>
            <Image
              src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
              alt='Contoh SPPKP'
              className='w-full h-full '
              width={800}
              height={800}
              quality={85}
            />
          </div>
        </BottomPopup>
        <DesktopView>
          <div className='container flex flex-col items-star py-4 '>
            <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
              Informasi Bisnis
            </h2>

            <div className='w-full mt-4'>
              <form
              
                onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
                className='flex flex-col gap-4'
              >
                <Controller
                  name="bisnisType"
                  control={control}
                  render={({ field }) => (
                    <div ref={bisnisTypeRef} className="space-y-2 w-full flex flex-row">
                      <div className="w-2/5">
                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
                      </div>
                      <div className="flex items-center space-x-6 .w-3/5">
                        {dataBisnisType.map((option) => (
                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
                            <input
                              type="radio"
                              value={option.label}
                              checked={field.value === option.value}
                              onChange={() => field.onChange(option.value)}
                              className="sr-only peer"
                            />
                             <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
               peer-checked:border-[5px] peer-checked:border-red-500 
               peer-focus:outline peer-focus:outline-red-100">
                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
                            </div>
                            <span className=" text-gray-800">{option.label}</span>
                          </label>
                          
                        ))}
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.bisnisType?.message}
                </div>
                      </div>
                    </div>
                  )}
                />
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Nama BIsnis
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('name')}
                      placeholder='Masukkan nama perusahaan'
                      type='text'
                      className='form-input'
                    />
                    <span className='opacity-65 text-xs'>
                      Format: PT. INDOTEKNIK DOTCOM GEMILANG{''}
                    </span>
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.name?.message}
                    </div>
                  </div>
                </div>
                {/* <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Pejabat Berwenang
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        isi dengan nama pejabat yang berwewenang di perusahaan
                        anda
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('pejabatName')}
                      placeholder='Masukkan nama pejabat berwenang'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.pejabatName?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>Nama PIC</label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        isi dengan nama sales / penanggung jawab
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('PICName')}
                      placeholder='Masukkan nama PIC'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.PICName?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Jabatan PIC
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        isi dengan jabatan sales / penanggung jawab
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('PICPosition')}
                      placeholder='Masukkan jabatan PIC'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.PICPosition?.message}
                    </div>
                  </div>
                </div> */}
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Alamat Perusahaan
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Alamat sesuai dengan alamat perusahaan{''}
                      </span>
                    )}
                  </div>
                  <div className='w-3/5 flex flex-col'>
                    <div>
                      <input
                        {...register('address')}
                        placeholder='Masukkan alamat lengkap perusahaan'
                        type='text'
                        className='form-input'
                      />
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.address?.message}
                      </div>
                    </div>
                    <div
                      className={` sub-alamat flex ${
                        isKonfirmasi ? 'flex-col' : 'flex-row'
                      } w-full gap-3`}
                    >
                      <div
                        className={`flex  ${
                          isKonfirmasi
                            ? ' flex-row gap-3 w-full'
                            : 'flex-row gap-3 w-2/5'
                        }`}
                      >
                        <div className='provinsi w-full'>
                          <Controller
                            name='state'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={state}
                                placeholder='Provinsi'
                              />
                            )}
                          />
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errors.state?.message}
                          </div>
                        </div>
                        <div className='kab w-full'>
                          <Controller
                            name='city'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={cities}
                                disabled={!watchState}
                                placeholder='Kab/Kota'
                              />
                            )}
                          />
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errors.city?.message}
                          </div>
                        </div>
                      </div>
                      <div
                        className={`flex-row flex gap-2 justify-between  ${
                          isKonfirmasi ? 'w-full' : 'w-3/5'
                        }`}
                      >
                        <div className='kec w-full'>
                          <Controller
                            name='district'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={districts}
                                disabled={!watchState || !watchCity}
                                placeholder='Kecamatan'
                              />
                            )}
                          />
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errors.district?.message}
                          </div>
                        </div>
                        <div className='kel w-full'>
                          <Controller
                            name='subDistrict'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={subDistricts}
                                disabled={!watchDistrict}
                                placeholder='Kelurahan'
                              />
                            )}
                          />
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errors.subDistrict?.message}
                          </div>
                        </div>
                        <div className='zip  w-full'>
                          <Controller
                          name="zip"
                          control={control}
                          render={({ field }) => (
                            <input
                              {...field}
                              placeholder="Kode Pos"
                              type="number"
                              className="form-input"
                              disabled={!watchsubDistrict}
                            />
                          )}
                          />
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errors.zip?.message}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>Data Bank</label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Isi detail data bank perusahaan anda
                      </span>
                    )}
                  </div>
                  <div className='w-3/5 flex flex-row gap-2'>
                    <div>
                      <input
                        {...register('bank')}
                        placeholder='Nama bank'
                        type='text'
                        className='form-input'
                      />
                      {!isKonfirmasi && (
                        <span className='opacity-65 text-xs'>
                          Format: BCA, Mandiri, CIMB, BNI dll
                        </span>
                      )}
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.bank?.message}
                      </div>
                    </div>
                    <div>
                      <input
                        {...register('rekening')}
                        placeholder='Nama Rekening'
                        type='text'
                        className='form-input'
                      />
                      {!isKonfirmasi && (
                        <span className='opacity-65 text-xs'>
                          Format: John Doe
                        </span>
                      )}
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.rekening?.message}
                      </div>
                    </div>
                    <div>
                      <input
                        {...register('accountNumber')}
                        placeholder='Nomor Rekening Bank'
                        type='number'
                        className='form-input'
                      />
                      {!isKonfirmasi && (
                        <span className='opacity-65 text-xs'>
                          Format: 01234567896
                        </span>
                      )}
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.accountNumber?.message}
                      </div>
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Email Bisnis
                    </label>
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('email')}
                      placeholder='contoh@email.com'
                      type='email'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.email?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Email Sales
                    </label>
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('emailSales')}
                      placeholder='contoh@email.com'
                      type='email'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.emailSales?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      Email Finance
                    </label>
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('emailFinance')}
                      placeholder='contoh@email.com'
                      type='email'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.emailFinance?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      No. Telepon Bisnis
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Isi no telepon perusahaan yang sesuai
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('phone', {
                        required: 'Nomor telepon wajib diisi.',
                        pattern: {
                          value: /^\+?[0-9]{10,15}$/,
                          message: 'Nomor telepon tidak valid.',
                        },
                      })}
                      placeholder='Masukkan nomor telepon perusahaan'
                      type='tel'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.phone?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      No. Handphone
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Isi no handphone perusahaan yang sesuai
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('mobile')}
                      placeholder='Masukkan nomor handphone'
                      type='tel'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.mobile?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      KTP Dirut/Direktur{' '}
                      {isPkp && <span className=' opacity-60'>(Opsional)</span>}
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Pastikan dokumen yang anda upload sudah benar
                      </span>
                    )}
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                    ref={ktpDirutRef}
                  >
                    <div
                      className={`flex flex-row items-start ${
                        isKonfirmasi ? 'justify-end' : 'justify-start'
                      } gap-2 w-full`}
                    >
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.dokumenKtpDirut}
                        </span>
                      )}
                      <label
                        htmlFor='dokumenKtpDirut'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.dokumenKtpDirut
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('dokumenKtpDirut')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='dokumenKtpDirut'
                        onChange={handleFileChange}
                        aria-invalid={errors.dokumenKtpDirut?.message}
                      />
                      {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.dokumenKtpDirut}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}

                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.dokumenKtpDirut?.message}
                    </div>
                  </div>
                </div>

                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label
                      className='form-label  text-nowrap'
                      ref={kartuNamaRef}
                    >
                      Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Pastikan dokumen yang anda upload sudah benar
                      </span>
                    )}
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                  >
                    <div className='flex flex-row items-start justify-start gap-2'>
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.kartuNama}
                        </span>
                      )}
                      <label
                        htmlFor='kartuNama'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.kartuNama
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('kartuNama')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='kartuNama'
                        onChange={handleFileChange}
                        aria-invalid={errors.kartuNama?.message}
                      />
                      {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.kartuNama}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}

                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.kartuNama?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>
                      NPWP{' '}
                      {!isPkp && (
                        <span className=' opacity-60'>(Opsional)</span>
                      )}
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Pastikan dokumen yang anda upload sudah benar
                      </span>
                    )}
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                    ref={npwpRef}
                  >
                    <div
                      className={`flex flex-row items-start gap-2 w-full ${
                        isKonfirmasi ? 'justify-end' : 'justify-start'
                      }`}
                    >
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.npwp}
                        </span>
                      )}
                      <label
                        htmlFor='npwp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('npwp')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='npwp'
                        onChange={(e) => {
                          handleFileChange(e); // Untuk update UI (opsional)
                        }}
                        aria-invalid={errors.npwp?.message}
                      />
                      {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.npwp}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}

                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.npwp?.message}
                    </div>
                  </div>
                </div>
                 <div
                  className={`w-full flex flex-row items-start ${
                    isKonfirmasi && 'gap-2'
                  } `}
                >
                  <div className='w-2/5 flex flex-row justify-between items-center '>
                    <div>
                      <label className='form-label  text-nowrap' ref={sppkpRef}>
                        SPPKP{' '}
                        {!isPkp && (
                          <span className=' opacity-60'>(Opsional)</span>
                        )}
                      </label>
                      {!isKonfirmasi && (
                        <span className='opacity-65 text-xs'>
                          Pastikan dokumen yang anda upload sudah benar
                        </span>
                      )}
                    </div>
                    <div
                      onClick={() => setIsExample(!isExample)}
                      className={`h-fit ${
                        !isKonfirmasi && 'mr-8'
                      }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
                    >
                      <EyeIcon
                        className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
                      />
                      {!isKonfirmasi && (
                        <p className='font-light text-xs '>Lihat Contoh</p>
                      )}
                    </div>
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                  >
                    <div className='flex flex-row items-start justify-start gap-2'>
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2 '>
                          {fileNames.sppkp}
                        </span>
                      )}
                      <label
                        htmlFor='sppkp'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('sppkp')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='sppkp'
                        onChange={handleFileChange}
                        aria-invalid={errors.sppkp?.message}
                      />
                    {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.sppkp}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}

                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.sppkp?.message}
                    </div>
                  </div>
                </div>
                
                <div className='w-full flex flex-row items-start '>
                  <div className='w-2/5 flex flex-row justify-between items-center '>
                    <div>
                      <label
                        className={`form-label  ${
                          isKonfirmasi ? 'text-wrap' : ' text-nowrap'
                        }`}
                        ref={suratPernyataanRef}
                      >
                        Surat Pernyataan Nomor Rekening{' '}
                        <span className=' opacity-60'>(Opsional)</span>
                      </label>
                      {!isKonfirmasi && (
                        <span className='opacity-65 text-xs'>
                          Wajib diisi jika nomor rekening berbeda dengan nama
                          perusahaan
                        </span>
                      )}
                    </div>
                    <a
                      href='/file/Surat Pernyataan Nomor Rekening.docx'
                      download='Surat Pernyataan Nomor Rekening.docx'
                      className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
                    >
                      <p className='font-light text-xs'>Download Template</p>
                    </a>
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                  >
                    <div className='flex flex-row items-start justify-start gap-2'>
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.suratPernyataan}
                        </span>
                      )}
                      <label
                        htmlFor='suratPernyataan'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.suratPernyataan
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('suratPernyataan')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='suratPernyataan'
                        onChange={handleFileChange}
                        aria-invalid={errors.suratPernyataan?.message}
                      />
                      {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.suratPernyataan}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}

                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.suratPernyataan?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-row items-start '>
                  <div className='w-2/5 flex flex-col justify-start items-start '>
                    <label
                      className={`form-label   ${
                        isKonfirmasi ? 'text-wrap' : 'text-nowrap'
                      }`}
                      ref={fotoKantorRef}
                    >
                      Foto Gudang / Kantor Bagian Depan
                    </label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        Pastikan dokumen yang anda upload sudah benar
                      </span>
                    )}
                  </div>
                  <div
                    className={`w-3/5 flex flex-col justify-between ${
                      isKonfirmasi ? 'items-end' : 'items-start'
                    }`}
                  >
                    <div className='flex flex-row items-start justify-start gap-2'>
                      {isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.fotoKantor}
                        </span>
                      )}
                      <label
                        htmlFor='fotoKantor'
                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                      >
                        {fileNames.fotoKantor
                          ? 'Ubah Dokumen'
                          : 'Upload Dokumen'}
                      </label>
                      <input
                        {...register('fotoKantor')}
                        type='file'
                        className='form-input hidden'
                        accept='.pdf,.png,.jpg,.jpeg'
                        id='fotoKantor'
                        onChange={handleFileChange}
                        aria-invalid={errors.fotoKantor?.message}
                      />
                      {!isKonfirmasi && (
                        <span className='mt-2 text-gray-600 line-clamp-2'>
                          {fileNames.fotoKantor}
                        </span>
                      )}
                    </div>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60 text-red-500'>
                        Format: pdf, jpeg, jpg, png. max file size 2MB
                      </span>
                    )}
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.fotoKantor?.message}
                    </div>
                  </div>
                </div>
{/* 
                <div className='flex flex-row  justify-between items-center'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Tipe Bisnis
                    </label>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60'>
                        Pilih tipe bisnis yang sesuai
                      </span>
                    )}
                  </div>
                  <div className='w-3/5 flex flex-col '>
                    <div className='flex flex-row items-center gap-3'>
                      <div
                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
                      //   ref={tempoDurationRef}
                      >
                        <Controller
                          name='bisnisType'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={dataBisnisType}
                              placeholder={'Pilih tipe bisnis'}
                            />
                          )}
                        />

                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.bisnisType?.message}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className='flex flex-row  justify-between items-center'>
                  <div className='w-2/5'>
                    <label className='form-label text-nowrap'>
                      Kategori Perusahaan
                    </label>
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60'>
                        Pilih kategori perusahaan yang sesuai
                      </span>
                    )}
                  </div>
                  <div className='w-3/5 flex flex-col '>
                    <div className='flex flex-row items-center gap-3'>
                      <div
                        //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
                        className='w-[55%]'
                        //   ref={tempoDurationRef}
                      >
                        <Controller
                          name='categoryPerusahaan'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={dataCategoryPerusahaan}
                              placeholder={'Pilih category perusahaan'}
                            />
                          )}
                        />

                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.categoryPerusahaan?.message}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className='w-full flex flex-row'>
                  <div className='w-2/5'>
                    <label className='form-label  text-nowrap'>Website</label>
                    {!isKonfirmasi && (
                      <span className='opacity-65 text-xs'>
                        isi dengan website perusahaan anda
                      </span>
                    )}
                  </div>
                  <div className='w-3/5'>
                    <input
                      {...register('website')}
                      placeholder='Masukkan website'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.website?.message}
                    </div>
                  </div>
                </div> */}

                <div className=''>
                  {/* <div>
                  <ReCAPTCHA
                    ref={recaptchaRef}
                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
                  />
                </div> */}
                </div>
                <div className='flex justify-end'>
                  {/* <Button
                  colorScheme='red'
                  className='w-full md:w-fit'
                  type='submit'
                >
                  Daftar Merchant{' '}
                  {<ChevronRightIcon className='w-5' color='white' />}
                </Button> */}
                  {!isKonfirmasi && (
                    <div>
                      <span className='text-xs opacity-60'>
                        *Pastikan data yang anda masukan sudah benar dan sesuai
                      </span>
                      <button
                        type='submit'
                        className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
                      >
                        <span className={` `}>Daftar Merchant</span>
                        {<ChevronRightIcon className='w-5' />}
                      </button>
                    </div>
                  )}
                </div>
              </form>
              <PageContent path='/daftar-merchant' />
            </div>
          </div>
        </DesktopView>
        <MobileView>
          <div className='container flex flex-col items-star py-4'>
            {!isKonfirmasi && (
              <h2 className='font-semibold mb-6 text-xl'>
                Informasi Perusahaan
              </h2>
            )}
             <Controller
                  name="bisnisType"
                  control={control}
                  render={({ field }) => (
                    <div ref={bisnisTypeRef} className="space-y-2">
                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
                      <div className="flex items-center space-x-6">
                        {dataBisnisType.map((option) => (
                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
                            <input
                              type="radio"
                              value={option.value}
                              checked={field.bisnisType === option.label}
                              onChange={() => field.onChange(option.label)}
                              className="sr-only peer"
                            />
                            <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
               peer-checked:border-[5px] peer-checked:border-red-500 
               peer-focus:outline peer-focus:outline-red-100">
                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
                            </div>
                            <span className="text-sm text-gray-800">{option.label}</span>
                          </label>
                          
                        ))}
                      </div>
                    </div>
                  )}
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.bisnisType?.message}
                </div>
            <div className='w-full mt-4'>
              <form
                onSubmit={handleSubmit(onSubmitHandler)}
                className='flex flex-col gap-4'
              >
                <div className='w-full flex flex-col'>
                  <div className='w-full'>
                    <label className='form-label  text-nowrap'>
                      Nama Bisnis
                    </label>
                    <input
                      {...register('name')}
                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.name?.message}
                    </div>
                    <span className='opacity-65 text-xs'>
                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
                    </span>
                  </div>
                </div>
                {/* <div className='w-full flex flex-col'>
                  <div className='w-full'>
                    <label className='form-label  text-nowrap'>
                      Pejabat Berwenang
                    </label>
                    <input
                      {...register('pejabatName')}
                      placeholder='Masukkan nama pejabat berwenang'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.pejabatName?.message}
                    </div>
                    <span className='opacity-65 text-xs'>
                      isi dengan nama pejabat yang berwewenang di perusahaan
                      anda{' '}
                    </span>
                  </div>
                </div>
                <div className='w-full flex flex-col'>
                  <div className='w-full'>
                    <label className='form-label  text-nowrap'>Nama PIC</label>
                    <input
                      {...register('PICName')}
                      placeholder='Masukkan Nama PIC '
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.PICName?.message}
                    </div>
                    <span className='opacity-65 text-xs'>
                      Isi dengan nama sales / penanggung jawab
                    </span>
                  </div>
                </div>
                <div className='w-full flex flex-col'>
                  <div className='w-full'>
                    <label className='form-label  text-nowrap'>
                      Jabatan PIC
                    </label>
                    <input
                      {...register('PICPosition')}
                      placeholder='Masukkan jabatan PIC '
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.PICPosition?.message}
                    </div>
                    <span className='opacity-65 text-xs'>
                      isi dengan jabatan sales / penanggung jawab
                    </span>
                  </div>
                </div> */}
                <div className='w-full flex flex-col'>
                  <div className='w-full'>
                    <label className='form-label text-nowrap'>
                      Alamat Perusahaan
                    </label>
                    <input
                      {...register('address')}
                      placeholder='Masukkan alamat lengkap perusahaan'
                      type='text'
                      className='form-input'
                    />
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.address?.message}
                    </div>
                    <div className='flex flex-row w-full justify-between gap-2'>
                      <div className='provinsi w-full'>
                        <Controller
                          name='state'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={state}
                              placeholder='Provinsi'
                            />
                          )}
                        />
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.state?.message}
                        </div>
                      </div>
                      <div className='kab w-full'>
                        <Controller
                          name='city'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={cities}
                              disabled={!watchState}
                              placeholder='Kab/Kota'
                            />
                          )}
                        />
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.city?.message}
                        </div>
                      </div>
                    </div>
                    <div className='flex flex-row w-full justify-between gap-2'>
                      <div className='kec w-full'>
                        <Controller
                          name='district'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={districts}
                              disabled={!watchState || !watchCity}
                              placeholder='Kecamatan'
                            />
                          )}
                        />
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.district?.message}
                        </div>
                      </div>
                      <div className='kel w-full'>
                        <Controller
                          name='subDistrict'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={subDistricts}
                              disabled={!watchDistrict}
                              placeholder='Kelurahan'
                            />
                          )}
                        />
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.subDistrict?.message}
                        </div>
                      </div>
                      <div className='zip  w-full'>
                        <Controller
                          name="zip"
                          control={control}
                          render={({ field }) => (
                            <input
                              {...field}
                              placeholder="Kode Pos"
                              type="number"
                              className="form-input"
                              disabled={!watchsubDistrict}
                            />
                          )}
                          />
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errors.zip?.message}
                        </div>
                      </div>
                    </div>
                  </div>
                  <span className='opacity-65 text-xs'>
                    Alamat sesuai dengan alamat perusahaan
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>Data Bank</label>
                  <div className='w-full flex flex-row gap-2'>
                    <div>
                      <input
                        {...register('bank')}
                        placeholder='Nama bank'
                        type='text'
                        className='form-input'
                      />
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.bank?.message}
                      </div>
                    </div>
                    <div>
                      <input
                        {...register('rekening')}
                        placeholder='Nama Rekening'
                        type='text'
                        className='form-input'
                      />
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.rekening?.message}
                      </div>
                    </div>
                    <div>
                      <input
                        {...register('accountNumber')}
                        placeholder='Nomor Rekening Bank'
                        type='number'
                        className='form-input'
                      />
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errors.accountNumber?.message}
                      </div>
                    </div>
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail data bank perusahaan anda
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>
                    Email Bisnis
                  </label>
                  <input
                    {...register('email')}
                    placeholder='contoh@email.com'
                    type='email'
                    className='form-input'
                  />
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.email?.message}
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail perusahaan sesuai dengan data yang terdaftar
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>Email Sales</label>
                  <input
                    {...register('emailSales')}
                    placeholder='contoh@email.com'
                    type='email'
                    className='form-input'
                  />
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.emailSales?.message}
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail perusahaan sesuai dengan data yang terdaftar
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>
                    Email Finance
                  </label>
                  <input
                    {...register('emailFinance')}
                    placeholder='contoh@email.com'
                    type='email'
                    className='form-input'
                  />
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.emailFinance?.message}
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail perusahaan sesuai dengan data yang terdaftar
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>
                    No. Telepon Bisnis
                  </label>
                  <input
                    {...register('phone')}
                    placeholder='Format: 08123456789 / (021) 123 4567'
                    type='tel'
                    className='form-input'
                  />
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.phone?.message}
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail perusahaan sesuai dengan data yang terdaftar
                  </span>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>
                    No. Handphone
                  </label>
                  <input
                    {...register('mobile')}
                    placeholder='Masukkan nomor handphone'
                    type='tel'
                    className='form-input'
                  />
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.mobile?.message}
                  </div>
                  <span className='opacity-65 text-xs'>
                    Isi detail perusahaan sesuai dengan data yang terdaftar
                  </span>
                </div>
                <div className='w-full flex flex-col gap-2'>
                  <label className='form-label  text-nowrap'>
                    KTP Dirut/Direktur{' '}
                    {isPkp && <span className=' opacity-60'>(Opsional)</span>}
                  </label>
                  <div className='flex flex-row items-center justify-start gap-2 '>
                    <label
                      htmlFor='dokumenKtpDirut'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.dokumenKtpDirut
                        ? 'Ubah Dokumen'
                        : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('dokumenKtpDirut')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='dokumenKtpDirut'
                      onChange={handleFileChange}
                      aria-invalid={errors.dokumenKtpDirut?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.dokumenKtpDirut}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.dokumenKtpDirut?.message}
                  </div>
                </div>
                <div className='w-full flex flex-col gap-2'>
                  <label className='form-label  text-nowrap'>
                    Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
                  </label>
                  <div className='flex flex-row items-center justify-start gap-2'>
                    <label
                      htmlFor='kartuNama'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('kartuNama')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='kartuNama'
                      onChange={handleFileChange}
                      aria-invalid={errors.kartuNama?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.kartuNama}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.kartuNama?.message}
                  </div>
                </div>

                <div className='w-full flex flex-col gap-2'>
                  <label className='form-label  text-nowrap'>
                    NPWP{' '}
                    {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
                  </label>
                  <div className='flex flex-row items-center justify-start gap-2'>
                    <label
                      htmlFor='npwp'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('npwp')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='npwp'
                      onChange={(e) => {
                        handleFileChange(e); // Untuk update UI (opsional)
                      }}
                      aria-invalid={errors.npwp?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.npwp}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.npwp?.message}
                  </div>
                </div>

                <div className='w-full flex flex-col gap-2 items-start '>
                  <div className='flex flex-row w-full justify-between items-center '>
                    <label className='form-label  text-nowrap'>
                      SPPKP{' '}
                      {!isPkp && (
                        <span className=' opacity-60'>(Opsional)</span>
                      )}
                    </label>
                    <div
                      onClick={() => setIsExample(!isExample)}
                      className='h-fit  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
                    >
                      <EyeIcon className={`w-4 mr-2 `} />

                      <p className='font-light text-xs '>Lihat Contoh</p>
                    </div>
                  </div>
                  <div className='flex flex-row items-center justify-start gap-2'>
                    <label
                      htmlFor='sppkp'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('sppkp')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='sppkp'
                      onChange={handleFileChange}
                      aria-invalid={errors.sppkp?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.sppkp}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.sppkp?.message}
                  </div>
                </div>

                <div className='w-full flex flex-col gap-2 items-start '>
                  <div className='flex flex-row w-full justify-between items-center'>
                    <label className='form-label  text-wrap'>
                      Surat Pernyataan Nomor Rekening{' '}
                      <span className=' opacity-60'>(Opsional)</span>
                    </label>
                    <a
                      href='/file/Surat Pernyataan Nomor Rekening.docx'
                      download='Surat Pernyataan Nomor Rekening.docx'
                      className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
                    >
                      <p className='font-light text-xs text-nowrap'>
                        Download Template
                      </p>
                    </a>
                  </div>
                  <div className='flex flex-row items-center justify-start gap-2'>
                    <label
                      htmlFor='suratPernyataan'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.suratPernyataan
                        ? 'Ubah Dokumen'
                        : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('suratPernyataan')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='suratPernyataan'
                      onChange={handleFileChange}
                      aria-invalid={errors.suratPernyataan?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.suratPernyataan}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.suratPernyataan?.message}
                  </div>
                </div>

                <div className='w-full flex flex-col gap-2 items-start '>
                  <label className='form-label  text-nowrap'>
                    Foto Gudang / Kantor Bagian Depan
                  </label>
                  <div className='flex flex-row items-center justify-start gap-2 '>
                    <label
                      htmlFor='fotoKantor'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
                    </label>
                    <input
                      {...register('fotoKantor')}
                      type='file'
                      className='form-input hidden'
                      accept='.pdf,.png,.jpg,.jpeg'
                      id='fotoKantor'
                      onChange={handleFileChange}
                      aria-invalid={errors.fotoKantor?.message}
                    />
                    <span className=' text-gray-600 line-clamp-2'>
                      {fileNames.fotoKantor}
                    </span>
                  </div>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>

                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.fotoKantor?.message}
                  </div>
                </div>
                {/* <div className='flex flex-col'>
                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
                  <div className='flex flex-col '>
                    <Controller
                      name='bisnisType'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={dataBisnisType}
                          placeholder={'Pilih tipe bisnis'}
                        />
                      )}
                    />
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60'>
                        Pilih tipe bisnis yang sesuai
                      </span>
                    )}
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.bisnisType?.message}
                    </div>
                  </div>
                </div>
                <div className='flex flex-col'>
                  <label className='form-label text-nowrap'>
                    Kategori Perusahaan
                  </label>
                  <div className='flex flex-col '>
                    <Controller
                      name='categoryPerusahaan'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={dataCategoryPerusahaan}
                          placeholder={'Pilih category perusahaan'}
                        />
                      )}
                    />
                    {!isKonfirmasi && (
                      <span className='text-xs opacity-60'>
                        Pilih kategori perusahaan yang sesuai
                      </span>
                    )}
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errors.categoryPerusahaan?.message}
                    </div>
                  </div>
                </div>
                <div className='w-full flex flex-col'>
                  <label className='form-label  text-nowrap'>Website</label>
                  <input
                    {...register('website')}
                    placeholder='Masukkan website'
                    type='text'
                    className='form-input'
                  />
                  {!isKonfirmasi && (
                    <span className='opacity-65 text-xs'>
                      isi dengan website perusahaan anda
                    </span>
                  )}
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errors.website?.message}
                  </div>
                </div> */}

                <div className=''>
                  {/* <div>
                  <ReCAPTCHA
                    ref={recaptchaRef}
                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
                  />
                </div> */}
                </div>
                <div className='flex justify-center w-full '>
                  {/* <Button
                  colorScheme='red'
                  className='w-full md:w-fit'
                  type='submit'
                >
                  Daftar Merchant{' '}
                  {<ChevronRightIcon className='w-5' color='white' />}
                </Button> */}
                  {!isKonfirmasi && (
                    <div className='w-full'>
                      <span className='text-xs opacity-60'>
                        *Pastikan data yang anda masukan sudah benar dan sesuai
                      </span>
                      <button
                        type='submit'
                        className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
                      >
                        <span className={` `}>Daftar Merchant</span>
                        {<ChevronRightIcon className='w-5' />}
                      </button>
                    </div>
                  )}
                </div>
              </form>
              <PageContent path='/daftar-merchant' />
            </div>
          </div>
        </MobileView>
      </>
    );
  }
);

const validationSchema = Yup.object().shape({
  bisnisType: Yup.string().required('Harus dipilih'),
  name: Yup.string().required('Harus di-isi'),
  address: Yup.string().required('Harus di-isi'),
  state: Yup.string().required('Harus dipilih'),
  city: Yup.string().required('Harus dipilih'),
  district: Yup.string().required('Harus dipilih'),
  subDistrict: Yup.string().required('Harus dipilih'),
  zip: Yup.string().required('Harus di-isi'),
  bank: Yup.string().required('Harus di-isi'),
  rekening: Yup.string().required('Harus di-isi'),
  accountNumber: Yup.string().required('Harus di-isi'),
  email: Yup.string()
    .email('Format harus seperti contoh@email.com')
    .required('Harus di-isi'),
  emailSales: Yup.string()
    .email('Format harus seperti contoh@email.com')
    .required('Harus di-isi'),
  emailFinance: Yup.string()
    .email('Format harus seperti contoh@email.com')
    .required('Harus di-isi'),
  phone: Yup.string().required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
});
const defaultValues = {
  name: '',
  address: '',
  state: '',
  city: '',
  district: '',
  subDistrict: '',
  zip: '',
  email: '',
  emailSales: '',
  emailFinance: '',
  bank: '',
  rekening: '',
  accountNumber: '',
  phone: '',
  mobile: '',
  bisnisType: '',
};

export default CreateMerchant;