import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Controller, set, useForm } from 'react-hook-form';
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import odooApi from '~/libs/odooApi';
import stateApi from '@/lib/address/api/stateApi.js';
import cityApi from '@/lib/address/api/cityApi';
import districtApi from '@/lib/address/api/districtApi';
import subDistrictApi from '@/lib/address/api/subDistrictApi';
import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
import {
  usePengajuanTempoStorePengiriman,
  usePengajuanTempoStore,
} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
import { toast } from 'react-hot-toast';
import useDevice from '@/core/hooks/useDevice';
import getFileBase64 from '@/core/utils/getFileBase64';
const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch, setValue } = useForm();
  const { isDesktop, isMobile } = useDevice();
  const {
    formPengiriman,
    errorsPengiriman,
    validatePengiriman,
    updateFormPengiriman,
    updateDokumenProsedur,
  } = usePengajuanTempoStorePengiriman();
  const { form } = usePengajuanTempoStore();
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [subDistricts, setSubDistricts] = useState([]);
  const [zips, setZips] = useState([]);
  const [citiesInvoice, setCitiesInvoice] = useState([]);
  const [districtsInvoice, setDistrictsInvoice] = useState([]);
  const [subDistrictsInvoice, setSubDistrictsInvoice] = useState([]);
  const [zipsInvoice, setZipsInvoice] = useState([]);
  const [sameAddress, setSameAddress] = useState(false);
  const [sameAddressStreet, setSameAddressStreet] = useState(false);
  const [nameFile, setNameFile] = useState();

  const [selectedIds, setSelectedIds] = useState(
    formPengiriman.dokumenPengiriman
      ? formPengiriman.dokumenPengiriman.split(',').map(Number)
      : []
  );
  const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] =
    useState(
      formPengiriman.dokumenPengirimanInvoice
        ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
        : []
    );

  const handleCheckboxChange = (id) => {
    const updatedSelected = selectedIds.includes(id)
      ? selectedIds.filter((selectedId) => selectedId !== id)
      : [...selectedIds, id];

    setSelectedIds(updatedSelected);

    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom

    updateFormPengiriman('dokumenPengiriman', updatedSelected.join(','));
    validatePengiriman();
  };
  const handleCheckboxChangeDokumenPengirimanInvoice = (id) => {
    const updatedSelected = selectedIdsDokumenInvoice.includes(id)
      ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id)
      : [...selectedIdsDokumenInvoice, id];

    setSelectedIdsselectedIdsDokumenInvoice(updatedSelected);

    // Jika checkbox 'Lainnya' dipilih, aktifkan input custom

    updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(','));
    validatePengiriman();
  };

  useEffect(() => {
    if (formPengiriman.dokumenPengiriman) {
      setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka
    }
  }, [formPengiriman.dokumenPengiriman]);
  useEffect(() => {
    if (formPengiriman.dokumenPengirimanInvoice) {
      setSelectedIdsselectedIdsDokumenInvoice(
        formPengiriman.dokumenPengirimanInvoice.split(',').map(Number)
      ); // Parse string menjadi array angka
    }
  }, [formPengiriman.dokumenPengirimanInvoice]);

  // Fungsi untuk memeriksa apakah item sudah dipilih
  const isChecked = (id) => selectedIds.includes(id);
  const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id);

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

  const watchState = watch('statePengiriman');
  useEffect(() => {
    // updateFormPengiriman('cityPengiriman', '');
    // setValue('cityPengiriman', '');
    // setValue('districtPengiriman', '');
    // setValue('subDistrictPengiriman', '');
    // setValue('zipPengiriman', '');
    if (watchState) {
      updateFormPengiriman('statePengiriman', `${watchState}`);
      validatePengiriman();
      const loadCities = async () => {
        let dataCities = await cityApi({ stateId: watchState });
        dataCities = dataCities.map((city) => ({
          value: city.id,
          label: city.name,
        }));
        setCities(dataCities);
      };
      loadCities();
    }
  }, [watchState]);

  const watchCity = watch('cityPengiriman');

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

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

  const watchsubDistrict = watch('subDistrictPengiriman');

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

    if (watchsubDistrict) {
      updateFormPengiriman('subDistrictPengiriman', `${watchsubDistrict}`);
      validatePengiriman();
      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}`
        );

        const result = await response.json();
        const dataZips = result.result.map((zip) => ({
          value: parseInt(zip.kodepos),
          label: zip.kodepos,
        }));
        setZips(dataZips);
      };
      loadZip();
    }
  }, [watchsubDistrict, setValue, subDistricts]);

  const watchZip = watch('zipPengiriman');
  useEffect(() => {
    if (watchZip) {
      updateFormPengiriman('zipPengiriman', `${watchZip}`);
      validatePengiriman();
    }
  }, [watchZip, setValue]);

  const watchStateInvoice = watch('stateInvoice');
  useEffect(() => {
    // setValue('cityInvoice', '');
    // setValue('districtInvoice', '');
    // setValue('subDistrictInvoice', '');
    // setValue('zipInvoice', '');
    if (watchStateInvoice) {
      updateFormPengiriman('stateInvoice', `${watchStateInvoice}`);
      validatePengiriman();
      const loadCities = async () => {
        let dataCities = await cityApi({ stateId: watchStateInvoice });
        dataCities = dataCities.map((city) => ({
          value: city.id,
          label: city.name,
        }));
        setCitiesInvoice(dataCities);
      };
      loadCities();
    }
  }, [watchStateInvoice]);

  const watchCityInvoice = watch('cityInvoice');
  useEffect(() => {
    if (watchCityInvoice) {
      updateFormPengiriman('cityInvoice', `${watchCityInvoice}`);
      validatePengiriman();
      const loadDistricts = async () => {
        let dataDistricts = await districtApi({ cityId: watchCityInvoice });
        dataDistricts = dataDistricts.map((district) => ({
          value: district.id,
          label: district.name,
        }));
        setDistrictsInvoice(dataDistricts);
      };
      loadDistricts();
    }
  }, [watchCityInvoice]);

  const watchDistrictInvoice = watch('districtInvoice');
  useEffect(() => {
    // setValue('subDistrictInvoice', '');
    if (watchDistrictInvoice) {
      updateFormPengiriman('districtInvoice', `${watchDistrictInvoice}`);
      validatePengiriman();
      const loadSubDistricts = async () => {
        let dataSubDistricts = await subDistrictApi({
          districtId: watchDistrictInvoice,
        });
        dataSubDistricts = dataSubDistricts.map((district) => ({
          value: district.id,
          label: district.name,
        }));
        setSubDistrictsInvoice(dataSubDistricts);
      };
      loadSubDistricts();
    }
  }, [watchDistrictInvoice, setValue]);

  const watchsubDistrictInvoice = watch('subDistrictInvoice');

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

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

        const result = await response.json();
        const dataZips = result.result.map((zip) => ({
          value: parseInt(zip.kodepos),
          label: zip.kodepos,
        }));
        setZipsInvoice(dataZips);
      };
      loadZip();
    }
  }, [watchsubDistrictInvoice, setValue, subDistrictsInvoice]);

  const watchZipInvoice = watch('zipInvoice');
  useEffect(() => {
    if (watchZipInvoice) {
      updateFormPengiriman('zipInvoice', `${watchZipInvoice}`);
      validatePengiriman();
    }
  }, [watchZipInvoice, setValue]);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFormPengiriman(name, value);
    validatePengiriman();
  };

  const handleInputChangeFile = 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 > 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);
        //   updateFormDokumen(
        //     name,
        //     compressedFile.name,
        //     fileExtension,
        //     fileBase64
        //   );
        // } catch (error) {
        //   toast.error('Gagal mengompresi file', { duration: 4000 });
        // }
        toast.error('Max File Upload 2MB', { duration: 4000 });
      } else {
        // Convert file to Base64
        fileBase64 = await getFileBase64(file);
        updateDokumenProsedur(file.name, fileExtension, fileBase64);
      }
      validatePengiriman();
    }
  };
  const isFormValid = useMemo(
    () => Object.keys(errorsPengiriman).length === 0,
    [errorsPengiriman]
  );

  const tukarInvoiceInputRef = useRef(null);
  const tukarInvoiceInputPembayaranRef = useRef(null);
  const PICNameRef = useRef(null);
  const streetPengirimanRef = useRef(null);
  const statePengirimanRef = useRef(null);
  const cityPengirimanRef = useRef(null);
  const districtPengirimanRef = useRef(null);
  const subDistrictPengirimanRef = useRef(null);
  const zipRef = useRef(null);
  const PICBarangMobileRef = useRef(null);
  const invoicePicRef = useRef(null);
  const invoicePicMobileRef = useRef(null);
  const streetInvoiceRef = useRef(null);
  const stateInvoiceRef = useRef(null);
  const cityInvoiceRef = useRef(null);
  const districtInvoiceRef = useRef(null);
  const subDistrictInvoiceRef = useRef(null);
  const zipInvoiceRef = useRef(null);
  const everyWeekdayInputRef = useRef(null);
  const everyWeekInputRef = useRef(null);
  const dokumenPengirimanRef = useRef(null);
  const dokumenPengirimanInputRef = useRef(null);
  const dokumenPengirimanInvoiceRef = useRef(null);
  const dokumenPengirimanInvoiceInputRef = useRef(null);

  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options = {
          behavior: 'smooth',
          block: 'center',
        };
        if (errorsPengiriman.tukarInvoiceInput && tukarInvoiceInputRef.current) {
          tukarInvoiceInputRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.tukarInvoiceInputPembayaran && tukarInvoiceInputPembayaranRef.current) {
          tukarInvoiceInputPembayaranRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.PICName && PICNameRef.current) {
          PICNameRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) {
          streetPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.statePengiriman && statePengirimanRef.current) {
          statePengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) {
          cityPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.districtsPengiriman &&
          districtPengirimanRef.current
        ) {
          districtPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.subDistrictsPengiriman &&
          subDistrictPengirimanRef.current
        ) {
          subDistrictPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.zip && zipRef.current) {
          zipRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.PICBarangMobile && PICBarangMobileRef.current) {
          PICBarangMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.invoicePic && invoicePicRef.current) {
          invoicePicRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.invoicePicMobile && invoicePicMobileRef.current) {
          invoicePicMobileRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) {
          streetInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) {
          stateInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) {
          cityInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.districtsInvoice && districtInvoiceRef.current) {
          districtInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.subDistrictsInvoice &&
          subDistrictInvoiceRef.current
        ) {
          subDistrictInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.zipInvoice && zipInvoiceRef.current) {
          zipInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.everyWeekdayInput &&
          everyWeekdayInputRef.current
        ) {
          everyWeekdayInputRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) {
          everyWeekInputRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.dokumenPengiriman &&
          dokumenPengirimanRef.current
        ) {
          dokumenPengirimanRef.current.scrollIntoView(options);
          return;
        }
        if (
          errorsPengiriman.dokumenInvoice &&
          dokumenPengirimanInvoiceRef.current
        ) {
          dokumenPengirimanInvoiceRef.current.scrollIntoView(options);
          return;
        }
        if (
          selectedIds &&
          formPengiriman.dokumenPengirimanInput === '' &&
          dokumenPengirimanInputRef.current
        ) {
          dokumenPengirimanInputRef.current.scrollIntoView(options);
          return;
        }
        if (
          selectedIdsDokumenInvoice &&
          formPengiriman.dokumenPengirimanInvoiceInput === '' &&
          dokumenPengirimanInvoiceInputRef.current
        ) {
          dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  useEffect(() => {
    if (formPengiriman.isSameAddreesStreet == 'true') {
      setSameAddressStreet(true);
    } else {
      setSameAddressStreet(false);
    }
  }, [formPengiriman.isSameAddreesStreet]);
  useEffect(() => {
    if (formPengiriman.isSameAddrees == 'true') {
      setSameAddress(true);
    } else {
      setSameAddress(false);
    }
  }, [formPengiriman.isSameAddrees]);

  // useEffect(() => {
  //   validatePengiriman();
  //   if (formPengiriman.isSameAddrees) {
  //     const isSame = formPengiriman.isSameAddrees;
  //     if (isSame == 'true') {
  //       setSameAddress(true);
  //     } else {
  //       setSameAddress(false);
  //     }
  //   }
  //   if (formPengiriman.isSameAddreesStreet) {
  //     const isSame = formPengiriman.isSameAddreesStreet;
  //     if (isSame == 'true') {
  //       setSameAddressStreet(true);
  //     } else {
  //       setSameAddressStreet(false);
  //     }
  //   }
  //   validatePengiriman();
  // }, [buttonSubmitClick]);
  // useEffect(() => {
  //   if (formPengiriman.isSameAddrees) {
  //     const isSame = formPengiriman.isSameAddrees;
  //     if (isSame == 'true') {
  //       setSameAddress(true);
  //     } else {
  //       setSameAddress(false);
  //     }
  //   }
  //   if (formPengiriman.isSameAddreesStreet) {
  //     const isSame = formPengiriman.isSameAddreesStreet;
  //     if (isSame == 'true') {
  //       setSameAddressStreet(true);
  //     } else {
  //       setSameAddressStreet(false);
  //     }
  //   }
  //   validatePengiriman();
  // }, [formPengiriman.isSameAddrees, formPengiriman.isSameAddreesStreet]);

  useEffect(() => {
    if (sameAddressStreet) {
      updateFormPengiriman('streetPengiriman', form.street);
      updateFormPengiriman('statePengiriman', form.state);
      setValue('statePengiriman', parseInt(form.state));
      updateFormPengiriman('cityPengiriman', form.city);
      setValue('cityPengiriman', parseInt(form.city));
      updateFormPengiriman('districtPengiriman', form.district);
      setValue('districtPengiriman', parseInt(form.district));
      updateFormPengiriman('subDistrictPengiriman', form.subDistrict);
      setValue('subDistrictPengiriman', parseInt(form.subDistrict));
      updateFormPengiriman('zipPengiriman', form.zip);
      setValue('zipPengiriman', parseInt(form.zip));
    }
    // else {
    //   updateFormPengiriman('streetPengiriman', '');
    //   updateFormPengiriman('statePengiriman', '');
    //   updateFormPengiriman('cityPengiriman', '');
    //   updateFormPengiriman('zipPengiriman', '');
    //   setValue('streetPengiriman', '');
    //   setValue('statePengiriman', '');
    //   setValue('cityPengiriman', '');
    // }
    validatePengiriman();
  }, [
    sameAddressStreet,
    form.state,
    form.city,
    form.district,
    form.subDistrict,
    form.zip,
  ]);

  useEffect(() => {
    if (sameAddress) {
      updateFormPengiriman('streetInvoice', form.street);
      updateFormPengiriman('stateInvoice', form.state);
      setValue('stateInvoice', parseInt(form.state));
      updateFormPengiriman('cityInvoice', form.city);
      setValue('cityInvoice', parseInt(form.city));
      updateFormPengiriman('districtInvoice', form.district);
      setValue('districtInvoice', parseInt(form.district));
      updateFormPengiriman('subDistrictInvoice', form.subDistrict);
      setValue('subDistrictInvoice', parseInt(form.subDistrict));
      updateFormPengiriman('zipInvoice', form.zip);
      setValue('zipInvoice', parseInt(form.zip));
    } else {
      // updateFormPengiriman('streetInvoice', '');
      // updateFormPengiriman('stateInvoice', '');
      // updateFormPengiriman('cityInvoice', '');
      // setValue('streetInvoice', '');
      // setValue('stateInvoice', '');
      // setValue('cityInvoice', '');
    }
    validatePengiriman();
  }, [
    sameAddress,
    form.street,
    form.state,
    form.city,
    form.district,
    form.subDistrict,
  ]);

  // useEffect(() => {
  //   if (sameAddress) {
  //     updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
  //     updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
  //     setValue('stateInvoice', parseInt(formPengiriman.statePengiriman));
  //     updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
  //     setValue('cityInvoice', parseInt(formPengiriman.cityPengiriman));

  //     updateFormPengiriman('isSameAddrees', `${sameAddress}`);
  //   } else {
  //     // updateFormPengiriman('stateInvoice', formPengiriman.stateInvoice);
  //     // setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
  //     // updateFormPengiriman('cityInvoice', formPengiriman.cityInvoice);
  //     // setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
  //   }
  //   validatePengiriman();
  // }, [
  //   sameAddress,
  //   formPengiriman.streetPengiriman,
  //   formPengiriman.statePengiriman,
  //   formPengiriman.cityPengiriman,
  // ]);

  // useEffect(() => {
  //   if (formPengiriman.sameAddressStreet?.toLowerCase().includes('true')) {
  //     setSameAddressStreet(true);
  //   } else {
  //     setSameAddressStreet(false);
  //   }
  // }, [formPengiriman.sameAddressStreet]);

  useEffect(() => {
    if (formPengiriman.statePengiriman) {
      setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
    }
  }, [formPengiriman.statePengiriman]);
  useEffect(() => {
    if (formPengiriman.cityPengiriman) {
      setValue('cityPengiriman', parseInt(formPengiriman.cityPengiriman));
    }
  }, [formPengiriman.cityPengiriman]);
  useEffect(() => {
    if (formPengiriman.districtPengiriman) {
      setValue(
        'districtPengiriman',
        parseInt(formPengiriman.districtPengiriman)
      );
    }
  }, [formPengiriman.districtPengiriman]);
  useEffect(() => {
    if (formPengiriman.subDistrictPengiriman) {
      setValue(
        'subDistrictPengiriman',
        parseInt(formPengiriman.subDistrictPengiriman)
      );
    }
  }, [formPengiriman.subDistrictPengiriman]);
  useEffect(() => {
    if (formPengiriman.zipPengiriman) {
      setValue('zipPengiriman', parseInt(formPengiriman.zipPengiriman));
    }
  }, [formPengiriman.zipPengiriman]);
  useEffect(() => {
    if (formPengiriman.stateInvoice) {
      setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
    }
  }, [formPengiriman.stateInvoice]);
  useEffect(() => {
    if (formPengiriman.cityInvoice) {
      setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
    }
  }, [formPengiriman.cityInvoice]);
  useEffect(() => {
    if (formPengiriman.districtInvoice) {
      setValue('districtInvoice', parseInt(formPengiriman.districtInvoice));
    }
  }, [formPengiriman.districtInvoice]);
  useEffect(() => {
    if (formPengiriman.subDistrictInvoice) {
      setValue(
        'subDistrictInvoice',
        parseInt(formPengiriman.subDistrictInvoice)
      );
    }
  }, [formPengiriman.subDistrictInvoice]);
  useEffect(() => {
    if (formPengiriman.zipInvoice) {
      setValue('zipInvoice', parseInt(formPengiriman.zipInvoice));
    }
  }, [formPengiriman.zipInvoice]);

  const getFromLocalStorage = (key) => {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);
    return item;
  };

  // const cachedData = getFromLocalStorage('Pengiriman');
  // useEffect(() => {
  //   if (cachedData) {
  //     setValue('cityPengiriman', parseInt(cachedData?.cityPengiriman));
  //     updateFormPengiriman('cityPengiriman', `${cachedData?.cityPengiriman}`);
  //   }
  //   if (cachedData?.statePengiriman) {
  //     setValue('statePengiriman', parseInt(cachedData?.statePengiriman));
  //   }
  //   if (cachedData?.stateInvoice) {
  //     setValue('stateInvoice', parseInt(cachedData?.stateInvoice));
  //   }
  //   if (cachedData?.cityInvoice) {
  //     setValue('cityInvoice', parseInt(cachedData?.cityInvoice));
  //   }
  //   if (cachedData?.isSameAddrees) {
  //     updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
  //   }
  //   validatePengiriman();
  // }, [cachedData?.cityPengiriman]);
  // useEffect(() => {
  //   if (cachedData?.everyWeek) {
  //     updateFormPengiriman('everyWeek', cachedData?.everyWeek);
  //     setEveryWeek(cachedData?.everyWeek);
  //   }
  //   if (cachedData?.everyWeekday) {
  //     updateFormPengiriman('everyWeekday', cachedData?.everyWeekday);
  //     setEveryWeekday(cachedData?.everyWeekday);
  //   }
  //   if (cachedData?.tukarInvoice) {
  //     updateFormPengiriman('tukarInvoice', cachedData?.tukarInvoice);
  //     setTukarInvoice(cachedData?.tukarInvoice);
  //   }
  //   if (cachedData?.everyWeekPembayaran) {
  //     updateFormPengiriman(
  //       'everyWeekPembayaran',
  //       cachedData?.everyWeekPembayaran
  //     );
  //     setEveryWeekPembayaran(cachedData?.everyWeekPembayaran);
  //   }
  //   if (cachedData?.everyWeekdayPembayaran) {
  //     updateFormPengiriman(
  //       'everyWeekdayPembayaran',
  //       cachedData?.everyWeekdayPembayaran
  //     );
  //     setEveryWeekdayPembayaran(cachedData?.everyWeekdayPembayaran);
  //   }
  //   if (cachedData?.tukarInvoicePembayaran) {
  //     updateFormPengiriman(
  //       'tukarInvoicePembayaran',
  //       cachedData?.tukarInvoicePembayaran
  //     );
  //     setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
  //   }
  //   validatePengiriman();
  // }, [
  //   cachedData?.everyWeek,
  //   cachedData?.everyWeekday,
  //   cachedData?.tukarInvoice,
  //   cachedData?.everyWeekdayPembayaran,
  //   cachedData?.everyWeekPembayaran,
  //   cachedData?.tukarInvoicePembayaran,
  // ]);
  const handleChangeSameAddress = () => {
    // setSameAddress(!sameAddress);
    // if (sameAddress) {
    //   updateFormPengiriman('sameAddress', `true`);
    // } else {
    // }
    updateFormPengiriman('isSameAddrees', `${!sameAddress}`);
    validatePengiriman();
  };
  const handleChangeSameAddressStreet = () => {
    // updateFormPengiriman('sameAddressStreet', `${!sameAddressStreet}`);
    // setSameAddressStreet(!sameAddressStreet);
    // if (sameAddressStreet == false) {
    //   updateFormPengiriman('streetPengiriman', '');
    //   updateFormPengiriman('statePengiriman', '');
    //   updateFormPengiriman('cityPengiriman', '');
    //   updateFormPengiriman('zipPengiriman', '');
    //   setValue('streetPengiriman', '');
    //   setValue('statePengiriman', '');
    //   setValue('cityPengiriman', '');
    // }
    updateFormPengiriman('isSameAddreesStreet', `${!sameAddressStreet}`);
    validatePengiriman();
  };

  return (
    <>
      {isDesktop && (
        <div>
          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
            Pengiriman
          </h1>
          <form className='flex flex-col w-full '>
            <div className='w-full grid grid-row-2 gap-5'>
              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Nama PIC Penerimaan Barang
                  </label>
                </div>
                <div className='w-3/5'>
                  <div className='flex items-center border border-gray-300 rounded-md'>
                    <select
                      value={formPengiriman.PICTittle || ''}
                      id='PICTittle'
                      name='PICTittle'
                      className=' p-2   rounded-l-md'
                      onChange={handleInputChange}
                    >
                      <option value='' disabled>
                        Pilih
                      </option>
                      <option value='Bpk'>Bpk</option>
                      <option value='Ibu'>Ibu</option>
                    </select>
                    <input
                      value={formPengiriman.PICName}
                      id='PICName'
                      name='PICName'
                      placeholder='Masukkan nama pic penerimaan barang disini'
                      type='text'
                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                      aria-invalid={errorsPengiriman.PICName}
                      ref={PICNameRef}
                      aria-label='PICName'
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.PICName} {errorsPengiriman.PICTittle}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-nowrap'>
                    No. HP PIC Penerimaan Barang
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi nomor PIC penerimaan barang yang bertanggung jawab di
                      perusahaan anda
                    </span>
                  )}
                </div>
                <div className='w-3/5'>
                  <input
                    id='PICBarangMobile'
                    name='PICBarangMobile'
                    ref={PICBarangMobileRef}
                    placeholder='Masukkan nomor PIC penerimaan barang'
                    value={formPengiriman.PICBarangMobile}
                    type='tel'
                    className='form-input'
                    aria-invalid={errorsPengiriman.PICBarangMobile}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.PICBarangMobile}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-nowrap'>
                    Alamat Pengiriman Barang
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      pastikan alamat yang anda isi sesuai dengan alamat kirim
                      barang
                    </span>
                  )}
                </div>
                <div className='w-3/5 flex gap-3 flex-col'>
                  <Checkbox
                    colorScheme='red'
                    isChecked={sameAddressStreet}
                    onChange={handleChangeSameAddressStreet}
                  >
                    Alamat Pengiriman sama dengan alamat perusahaan
                  </Checkbox>

                  <>
                    <div>
                      <input
                        id='streetPengiriman'
                        name='streetPengiriman'
                        ref={streetPengirimanRef}
                        aria-label='streetPengiriman'
                        placeholder='Masukkan alamat lengkap pengiriman barang'
                        type='text'
                        value={formPengiriman.streetPengiriman}
                        className='form-input'
                        onChange={handleInputChange}
                        disabled={sameAddressStreet}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.streetPengiriman}
                        </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='w-full'
                          ref={statePengirimanRef}
                          aria-label='statePengiriman'
                        >
                          <Controller
                            name='statePengiriman'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                disabled={sameAddressStreet}
                                options={states}
                                placeholder='Provinsi'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.statePengiriman}
                            </div>
                          )}
                        </div>
                        <div className='w-full' ref={cityPengirimanRef}>
                          <Controller
                            name='cityPengiriman'
                            aria-label='cityPengiriman'
                            disabled={sameAddressStreet}
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={cities}
                                disabled={!watchState || sameAddressStreet}
                                placeholder='Kota'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.cityPengiriman}
                            </div>
                          )}
                        </div>
                      </div>
                      <div
                        className={`flex-row flex gap-2 justify-between  ${
                          isKonfirmasi ? 'w-full' : 'w-3/5'
                        }`}
                      >
                        <div className='w-full' ref={districtPengirimanRef}>
                          <Controller
                            name='districtPengiriman'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={districts}
                                disabled={
                                  !watchState || !watchCity || sameAddressStreet
                                }
                                placeholder='Kelurahan'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.subDistrictPengiriman}
                            </div>
                          )}
                        </div>
                        <div className='w-full' ref={subDistrictPengirimanRef}>
                          <Controller
                            name='subDistrictPengiriman'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={subDistricts}
                                disabled={!watchDistrict || sameAddressStreet}
                                placeholder='Kelurahan'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.subDistrictPengiriman}
                            </div>
                          )}
                        </div>
                        <div className='w-full' ref={zipRef}>
                          <Controller
                            name='zipPengiriman'
                            control={control}
                            render={(props) => (
                              <>
                                {/* Jika zips tidak kosong, tampilkan dropdown */}
                                {zips.length > 0 ? (
                                  <HookFormSelect
                                    {...props}
                                    options={zips}
                                    disabled={sameAddressStreet}
                                    placeholder='Zip'
                                  />
                                ) : (
                                  // Jika zips kosong, tampilkan input manual
                                  <input
                                    id='zipPengiriman'
                                    name='zipPengiriman'
                                    ref={zipRef}
                                    placeholder='Kode Pos'
                                    type='number'
                                    disabled={sameAddressStreet}
                                    value={formPengiriman.zipPengiriman}
                                    className='form-input'
                                    onChange={handleInputChange}
                                  />
                                )}
                              </>
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.zipPengiriman}
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </>
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Nama PIC Penerimaan Invoice
                  </label>
                </div>
                <div className='w-3/5'>
                  <div className='flex items-center border border-gray-300 rounded-md'>
                    <select
                      value={formPengiriman.invoicePicTittle || ''}
                      id='invoicePicTittle'
                      name='invoicePicTittle'
                      className=' p-2   rounded-l-md'
                      onChange={handleInputChange}
                    >
                      <option value='' disabled>
                        Pilih
                      </option>
                      <option value='Bpk'>Bpk</option>
                      <option value='Ibu'>Ibu</option>
                    </select>
                    <input
                      value={formPengiriman.invoicePic}
                      id='invoicePic'
                      name='invoicePic'
                      aria-label='invoicePic'
                      placeholder='Masukkan nama pic invoice disini'
                      type='text'
                      className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                      aria-invalid={errorsPengiriman.invoicePic}
                      ref={invoicePicRef}
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.invoicePic}{' '}
                      {errorsPengiriman.invoicePicTittle}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-nowrap'>
                    No. HP PIC Penerimaan Invoice
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi nomor PIC penerimaan invoice yang bertanggung jawab di
                      perusahaan anda
                    </span>
                  )}
                </div>
                <div className='w-3/5'>
                  <input
                    id='invoicePicMobile'
                    name='invoicePicMobile'
                    ref={invoicePicMobileRef}
                    placeholder='Masukkan nomor PIC Penerimaan Invoice'
                    value={formPengiriman.invoicePicMobile}
                    type='tel'
                    className='form-input'
                    aria-invalid={errorsPengiriman.invoicePicMobile}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.invoicePicMobile}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Alamat Pengiriman Invoice
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Pastikan alamat yang anda isi sesuai dengan alamat kirim
                      invoice
                    </span>
                  )}
                </div>
                <div className='w-3/5 flex gap-3 flex-col'>
                  <div>
                    <Checkbox
                      colorScheme='red'
                      isChecked={sameAddress}
                      onChange={handleChangeSameAddress}
                    >
                      Alamat invoice sama dengan alamat perusahaan
                    </Checkbox>
                  </div>

                  <>
                    <div>
                      <input
                        id='streetInvoice'
                        name='streetInvoice'
                        aria-label='streetInvoice'
                        ref={streetInvoiceRef}
                        disabled={sameAddress}
                        placeholder='Masukkan alamat lengkap pengiriman invoice'
                        type='text'
                        value={formPengiriman.streetInvoice}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.streetInvoice}
                        </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='w-full'
                          ref={stateInvoiceRef}
                          aria-label='stateInvoice'
                        >
                          <Controller
                            name='stateInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={states}
                                disabled={sameAddress}
                                placeholder='Provinsi'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.stateInvoice}
                            </div>
                          )}
                        </div>
                        <div
                          className='w-full'
                          ref={cityInvoiceRef}
                          aria-label='cityInvoice'
                        >
                          <Controller
                            name='cityInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={citiesInvoice}
                                disabled={!watchStateInvoice || sameAddress}
                                placeholder='Kota'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.cityInvoice}
                            </div>
                          )}
                        </div>
                      </div>
                      <div
                        className={`flex-row flex gap-2 justify-between  ${
                          isKonfirmasi ? 'w-full' : 'w-3/5'
                        }`}
                      >
                        <div className='w-full' ref={districtInvoiceRef}>
                          <Controller
                            name='districtInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={districtsInvoice}
                                disabled={
                                  !watchStateInvoice ||
                                  !watchCityInvoice ||
                                  sameAddress
                                }
                                placeholder='Kecamatan'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.districtInvoice}
                            </div>
                          )}
                        </div>
                        <div className='w-full' ref={subDistrictInvoiceRef}>
                          <Controller
                            name='subDistrictInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={subDistrictsInvoice}
                                disabled={!watchDistrictInvoice || sameAddress}
                                placeholder='Kelurahan'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.subDistrictsInvoice}
                            </div>
                          )}
                        </div>
                        <div className='w-full' ref={zipInvoiceRef}>
                          <Controller
                            name='zipInvoice'
                            control={control}
                            render={(props) => (
                              <>
                                {zipsInvoice.length > 0 ? (
                                  <HookFormSelect
                                    {...props}
                                    options={zipsInvoice}
                                    disabled={sameAddress}
                                    placeholder='Zip'
                                  />
                                ) : (
                                  <input
                                    id='zipInvoice'
                                    name='zipInvoice'
                                    ref={zipInvoiceRef}
                                    placeholder='Kode Pos'
                                    type='number'
                                    disabled={sameAddress}
                                    value={formPengiriman.zipInvoice}
                                    className='form-input'
                                    onChange={handleInputChange}
                                  />
                                )}
                              </>
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.zipInvoice}
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </>
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-wrap'>
                    Jadwal Penukaran Invoice{' '}
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi jadwal penukaran invoice
                    </span>
                  )}
                </div>
                <div className='w-3/5 flex gap-3 flex-col'>
                  <textarea
                    id='tukarInvoiceInput'
                    name='tukarInvoiceInput'
                    aria-label='tukarInvoiceInput'
                    placeholder='Masukkan jadwal penukaran invoice'
                    value={formPengiriman.tukarInvoiceInput}
                    className='form-input'
                    rows={4}
                    aria-invalid={errorsPengiriman.tukarInvoiceInput}
                    ref={tukarInvoiceInputRef}
                    cols={40}
                    onChange={handleInputChange}
                    required
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.tukarInvoiceInput}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Jadwal Pembayaran{' '}
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      isi jadwal pembayaran
                    </span>
                  )}
                </div>
                <div className='w-3/5 flex gap-3 flex-col'>
                  <textarea
                    id='tukarInvoiceInputPembayaran'
                    name='tukarInvoiceInputPembayaran'
                    placeholder='Masukkan jadwal pembayaran'
                    value={formPengiriman.tukarInvoiceInputPembayaran}
                    className='form-input'
                    aria-invalid={errorsPengiriman.tukarInvoiceInputPembayaran}
                    ref={tukarInvoiceInputPembayaranRef}
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                    required
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.tukarInvoiceInputPembayaran}
                    </div>
                  )}
                </div>
              </div>

              <div className='w-full flex flex-row justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label  text-nowrap'>
                    Prosedur Pengiriman{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  <span className='text-xs opacity-60 text-red-500'>
                    Format: pdf, jpeg, jpg, png. max file size 2MB
                  </span>
                </div>
                <div className='w-3/5'>
                  <div className='flex flex-row items-start gap-2'>
                    <label
                      htmlFor='dokumenProsedur'
                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
                    >
                      {formPengiriman?.dokumenProsedur?.name
                        ? 'Ubah Dokumen'
                        : 'Upload Dokumen'}
                    </label>
                    <input
                      id='dokumenProsedur'
                      name='dokumenProsedur'
                      type='file'
                      title=' '
                      className='hidden'
                      aria-invalid={formPengiriman.dokumenProsedur}
                      onChange={handleInputChangeFile}
                      accept='.pdf,.png,.jpg,.jpeg'
                    />
                    <span className='text-gray-600 line-clamp-2'>
                      {formPengiriman?.dokumenProsedur?.name}
                    </span>
                  </div>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenProsedur}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-wrap'>
                    Apakah ada dokumen tanda terima yang diberikan pada saat
                    pengiriman barang?{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Pilih dokumen tanda terima saat pengiriman barang jika ada
                    </span>
                  )}
                </div>
                <div
                  className='w-3/5 flex gap-3 flex-col'
                  ref={dokumenPengirimanRef}
                  aria-label='dokumenPengirimanInput'
                >
                  <Checkbox
                    colorScheme='red'
                    key='0'
                    isChecked={isChecked(0)}
                    onChange={() => handleCheckboxChange(0)}
                  >
                    Surat Tanda Terima Barang (STTB)
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='1'
                    isChecked={isChecked(1)}
                    onChange={() => handleCheckboxChange(1)}
                  >
                    Good Receipt (GR)
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='2'
                    isChecked={isChecked(2)}
                    onChange={() => handleCheckboxChange(2)}
                  >
                    Surat Terima Barang (STB)
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='3'
                    isChecked={isChecked(3)}
                    onChange={() => handleCheckboxChange(3)}
                  >
                    Lembar Penerimaan Barang (LPB)
                  </Checkbox>

                  <div className='flex gap-3 flex-col'>
                    <Checkbox
                      colorScheme='red'
                      key='4'
                      isChecked={
                        isChecked(4) || formPengiriman.dokumenKirimInput
                      }
                      onChange={() => handleCheckboxChange(4)}
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='dokumenKirimInput'
                      name='dokumenKirimInput'
                      aria-label='dokumenKirimInput'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      ref={dokumenPengirimanInputRef}
                      value={formPengiriman.dokumenKirimInput}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenPengiriman}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-wrap'>
                    Dokumen yang dibawa saat pengiriman barang
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Dokumen lampiran yang dibawa saat pengiriman barang
                    </span>
                  )}
                </div>
                <div className='flex gap-3 flex-col w-3/5 '>
                  <textarea
                    id='dokumenPengirimanInput'
                    name='dokumenPengirimanInput'
                    aria-label='dokumenPengirimanInput'
                    placeholder='isi manual dokumen yang anda mau'
                    type='textarea'
                    ref={dokumenPengirimanInputRef}
                    value={formPengiriman.dokumenPengirimanInput}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenPengiriman}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label  text-wrap'>
                    Dokumen yang dilampirkan saat Pengiriman Invoice{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  <span className='text-xs opacity-60'>
                    Dokumen lampiran saat pengiriman invoice
                  </span>
                </div>
                <div className='flex gap-3 flex-col w-3/5'>
                  <textarea
                    id='dokumenPengirimanInvoice'
                    aria-label='dokumenPengirimanInvoice'
                    name='dokumenPengirimanInvoice'
                    placeholder='isi manual dokumen yang anda mau'
                    type='textarea'
                    ref={dokumenPengirimanInvoiceRef}
                    value={formPengiriman.dokumenPengirimanInvoice}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenPengirimanInvoice}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </form>
        </div>
      )}
      {isMobile && (
        <div className='text-sm'>
          <h1
            className={`font-bold py-4 mt-8 ${
              isKonfirmasi ? 'hidden' : 'text-xl'
            }`}
          >
            Pengiriman
          </h1>
          <form className='flex flex-col w-full '>
            <div className='w-full grid grid-row-2 gap-2'>
              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  Nama PIC Penerimaan Barang
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <select
                    value={formPengiriman.PICTittle || ''}
                    id='PICTittle'
                    name='PICTittle'
                    className=' p-2   rounded-l-md'
                    onChange={handleInputChange}
                  >
                    <option value='' disabled>
                      Pilih
                    </option>
                    <option value='Bpk'>Bpk</option>
                    <option value='Ibu'>Ibu</option>
                  </select>
                  <input
                    value={formPengiriman.PICName}
                    id='PICName'
                    name='PICName'
                    aria-label='PICName'
                    placeholder='Masukkan nama pic penerima barang disini'
                    type='text'
                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                    aria-invalid={errorsPengiriman.PICName}
                    ref={PICNameRef}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.PICName} {errorsPengiriman.PICTittle}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  No. HP PIC Penerimaan Barang
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <input
                    id='PICBarangMobile'
                    name='PICBarangMobile'
                    ref={PICBarangMobileRef}
                    value={formPengiriman.PICBarangMobile}
                    placeholder='Masukkan nomor PIC penerimaan barang'
                    type='tel'
                    className='form-input'
                    aria-invalid={errorsPengiriman.PICBarangMobile}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.PICBarangMobile}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label   text-nowrap'>
                  Alamat Pengiriman Barang
                </label>
                <Checkbox
                  colorScheme='red'
                  isChecked={sameAddressStreet}
                  onChange={handleChangeSameAddressStreet}
                  size='sm'
                >
                  Alamat Pengiriman sama dengan alamat perusahaan
                </Checkbox>
                <div className='w-full'>
                  <input
                    id='streetPengiriman'
                    name='streetPengiriman'
                    aria-label='streetPengiriman'
                    ref={streetPengirimanRef}
                    disabled={sameAddressStreet}
                    placeholder='Masukkan alamat lengkap pengiriman barang'
                    type='text'
                    value={formPengiriman.streetPengiriman}
                    className='form-input'
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.streetPengiriman}
                    </div>
                  )}
                </div>
                <div className='sub-alamat flex flex-row w-full gap-2'>
                  <div
                    className='w-2/5'
                    ref={statePengirimanRef}
                    aria-label='statePengiriman'
                  >
                    <Controller
                      name='statePengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          disabled={sameAddressStreet}
                          options={states}
                          placeholder='Provinsi'
                        />
                      )}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.statePengiriman}
                      </div>
                    )}
                  </div>
                  <div
                    className='w-3/5'
                    ref={cityPengirimanRef}
                    aria-label='cityPengiriman'
                  >
                    <Controller
                      name='cityPengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={cities}
                          disabled={!watchState || sameAddressStreet}
                          placeholder='Kota'
                        />
                      )}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.cityPengiriman}
                      </div>
                    )}
                  </div>
                  {/* <div className='w-1/3'>
                    <input
                      id='zipPengiriman'
                      aria-label='zipPengiriman'
                      name='zipPengiriman'
                      ref={zipRef}
                      placeholder='Kode Pos'
                      disabled={sameAddressStreet}
                      type='number'
                      value={formPengiriman.zipPengiriman}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.zipPengiriman}
                      </div>
                    )}
                  </div> */}
                </div>
                <div className='flex flex-row w-full gap-2'>
                  <div className='w-1/3' ref={districtPengirimanRef}>
                    <Controller
                      name='districtPengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={districts}
                          disabled={
                            !watchState || !watchCity || sameAddressStreet
                          }
                          placeholder='Kelurahan'
                        />
                      )}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.subDistrictPengiriman}
                      </div>
                    )}
                  </div>
                  <div className='w-1/3' ref={subDistrictPengirimanRef}>
                    <Controller
                      name='subDistrictPengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={subDistricts}
                          disabled={!watchDistrict || sameAddressStreet}
                          placeholder='Kelurahan'
                        />
                      )}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.subDistrictPengiriman}
                      </div>
                    )}
                  </div>
                  <div className='w-1/3' ref={zipRef}>
                    <Controller
                      name='zipPengiriman'
                      control={control}
                      render={(props) => (
                        <>
                          {/* Jika zips tidak kosong, tampilkan dropdown */}
                          {zips.length > 0 ? (
                            <HookFormSelect
                              {...props}
                              options={zips}
                              disabled={!watchsubDistrict || sameAddressStreet}
                              placeholder='Zip'
                            />
                          ) : (
                            // Jika zips kosong, tampilkan input manual
                            <input
                              id='zipPengiriman'
                              name='zipPengiriman'
                              ref={zipRef}
                              placeholder='Kode Pos'
                              type='number'
                              disabled={!watchsubDistrict || sameAddressStreet}
                              value={formPengiriman.zipPengiriman}
                              className='form-input'
                              onChange={handleInputChange}
                            />
                          )}
                        </>
                      )}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.zipPengiriman}
                      </div>
                    )}
                  </div>
                </div>
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  Nama PIC Penerimaan Invoice
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <select
                    value={formPengiriman.invoicePicTittle || ''}
                    id='invoicePicTittle'
                    name='invoicePicTittle'
                    className=' p-2   rounded-l-md'
                    onChange={handleInputChange}
                  >
                    <option value='' disabled>
                      Pilih
                    </option>
                    <option value='Bpk'>Bpk</option>
                    <option value='Ibu'>Ibu</option>
                  </select>
                  <input
                    value={formPengiriman.invoicePic}
                    id='invoicePic'
                    aria-label='invoicePic'
                    name='invoicePic'
                    placeholder='Masukkan nama pic invoice disini'
                    type='text'
                    className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none'
                    aria-invalid={errorsPengiriman.invoicePic}
                    ref={invoicePicRef}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.invoicePic}{' '}
                    {errorsPengiriman.invoicePicTittle}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-nowrap'>
                  No. HP PIC Penerimaan Invoice
                </label>
                <div className='flex items-center border border-gray-300 rounded-md w-full'>
                  <input
                    id='invoicePicMobile'
                    name='invoicePicMobile'
                    ref={invoicePicMobileRef}
                    value={formPengiriman.invoicePicMobile}
                    placeholder='Masukkan nomor PIC Penerimaan Invoice'
                    type='tel'
                    className='form-input'
                    aria-invalid={errorsPengiriman.invoicePicMobile}
                    onChange={handleInputChange}
                  />
                </div>
                {chekValid && (
                  <div className='text-caption-2 text-danger-500 mt-1'>
                    {errorsPengiriman.PICBarangMobile}
                  </div>
                )}
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label text-nowrap'>
                  Alamat Pengiriman Invoice
                </label>
                <div>
                  <Checkbox
                    colorScheme='red'
                    isChecked={sameAddress}
                    onChange={handleChangeSameAddress}
                    size='sm'
                  >
                    Alamat invoice sama dengan alamat pengiriman
                  </Checkbox>
                </div>

                <>
                  <div className='w-full'>
                    <input
                      id='streetInvoice'
                      aria-label='streetInvoice'
                      name='streetInvoice'
                      ref={streetInvoiceRef}
                      disabled={sameAddress}
                      placeholder='Masukkan alamat lengkap pengiriman invoice'
                      type='text'
                      value={formPengiriman.streetInvoice}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                    {chekValid && (
                      <div className='text-caption-2 text-danger-500 mt-1'>
                        {errorsPengiriman.streetInvoice}
                      </div>
                    )}
                  </div>
                  <div className='sub-alamat flex flex-row w-full gap-3'>
                    <div
                      className='w-3/5'
                      ref={stateInvoiceRef}
                      aria-label='stateInvoice'
                    >
                      <Controller
                        name='stateInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={states}
                            disabled={sameAddress}
                            placeholder='Provinsi'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.stateInvoice}
                        </div>
                      )}
                    </div>
                    <div
                      className='w-2/5'
                      ref={cityInvoiceRef}
                      aria-label='cityInvoice'
                    >
                      <Controller
                        name='cityInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={cities}
                            disabled={!watchState || sameAddress}
                            placeholder='Kota'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.cityInvoice}
                        </div>
                      )}
                    </div>
                  </div>
                  <div className='sub-alamat flex flex-row w-full gap-3'>
                    <div className='w-1/3' ref={districtInvoiceRef}>
                      <Controller
                        name='districtInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={districtsInvoice}
                            disabled={
                              !watchStateInvoice ||
                              !watchCityInvoice ||
                              sameAddress
                            }
                            placeholder='Kecamatan'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.districtInvoice}
                        </div>
                      )}
                    </div>
                    <div className='w-1/3' ref={subDistrictInvoiceRef}>
                      <Controller
                        name='subDistrictInvoice'
                        control={control}
                        render={(props) => (
                          <HookFormSelect
                            {...props}
                            options={subDistrictsInvoice}
                            disabled={!watchDistrictInvoice || sameAddress}
                            placeholder='Kelurahan'
                          />
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.subDistrictsInvoice}
                        </div>
                      )}
                    </div>
                    <div className='w-1/3' ref={zipInvoiceRef}>
                      <Controller
                        name='zipInvoice'
                        control={control}
                        render={(props) => (
                          <>
                            {zipsInvoice.length > 0 ? (
                              <HookFormSelect
                                {...props}
                                options={zipsInvoice}
                                disabled={
                                  !watchsubDistrictInvoice || sameAddress
                                }
                                placeholder='Zip'
                              />
                            ) : (
                              <input
                                id='zipInvoice'
                                name='zipInvoice'
                                ref={zipInvoiceRef}
                                placeholder='Kode Pos'
                                type='number'
                                disabled={
                                  !watchsubDistrictInvoice || sameAddress
                                }
                                value={formPengiriman.zipInvoice}
                                className='form-input'
                                onChange={handleInputChange}
                              />
                            )}
                          </>
                        )}
                      />
                      {chekValid && (
                        <div className='text-caption-2 text-danger-500 mt-1'>
                          {errorsPengiriman.zipInvoice}
                        </div>
                      )}
                    </div>
                  </div>
                </>
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label   text-wrap'>
                  Jadwal Penukaran Invoice
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                {!isKonfirmasi && (
                  <span className='text-xs opacity-60'>
                    isi jika perusahaan anda memiliki jadwal penukaran invoice
                  </span>
                )}
                <div className='w-full flex gap-2 flex-col'>
                  <textarea
                    id='tukarInvoiceInput'
                    name='tukarInvoiceInput'
                    placeholder='Masukkan jadwal penukaran invoice'
                    type='textarea'
                    value={formPengiriman.tukarInvoiceInput}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                </div>
                <div className='w-2/5'></div>
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label text-nowrap'>
                  Jadwal Pembayaran
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                {!isKonfirmasi && (
                  <span className='text-xs opacity-60'>
                    isi jika perusahaan anda memiliki jadwal pembayaran
                  </span>
                )}
                <div className='w-full flex gap-2 flex-col'>
                  <textarea
                    id='tukarInvoiceInputPembayaran'
                    name='tukarInvoiceInputPembayaran'
                    placeholder='Masukkan jadwal pembayaran'
                    type='textarea'
                    value={formPengiriman.tukarInvoiceInputPembayaran}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                </div>
              </div>

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

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label   text-wrap'>
                  Apakah ada dokumen tanda terima yang diberikan pada saat
                  pengiriman barang?{' '}
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                {!isKonfirmasi && (
                  <span className='text-xs opacity-60'>
                    Pilih dokumen lampiran saat pengiriman barang
                  </span>
                )}
                <div
                  className='w-full flex gap-2 flex-col'
                  ref={dokumenPengirimanRef}
                  aria-label='dokumenPengirimanInput'
                >
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='0'
                    isChecked={isChecked(0)}
                    onChange={() => handleCheckboxChange(0)}
                  >
                    Surat Tanda Terima Barang (STTB)
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='1'
                    isChecked={isChecked(1)}
                    onChange={() => handleCheckboxChange(1)}
                  >
                    Good Receipt (GR)
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='2'
                    isChecked={isChecked(2)}
                    onChange={() => handleCheckboxChange(2)}
                  >
                    Surat Terima Barang (STB)
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='3'
                    isChecked={isChecked(3)}
                    onChange={() => handleCheckboxChange(3)}
                  >
                    Lembar Penerimaan Barang (LPB)
                  </Checkbox>
                  <div className='flex gap-3 flex-col'>
                    <Checkbox
                      colorScheme='red'
                      key='4'
                      isChecked={
                        isChecked(4) || formPengiriman.dokumenKirimInput
                      }
                      onChange={() => handleCheckboxChange(4)}
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='dokumenKirimInput'
                      name='dokumenKirimInput'
                      aria-label='dokumenKirimInput'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      ref={dokumenPengirimanInputRef}
                      value={formPengiriman.dokumenKirimInput}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </div>

                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenPengiriman}
                    </div>
                  )}
                </div>
              </div>
              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label   text-wrap'>
                  Dokumen yang dibawa saat pengiriman barang
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                {!isKonfirmasi && (
                  <span className='text-xs opacity-60'>
                    Dokumen lampiran yang dibawa saat pengiriman barang
                  </span>
                )}
                <div className='flex gap-3 flex-col w-full'>
                  <textarea
                    id='dokumenPengirimanInput'
                    aria-label='dokumenPengirimanInput'
                    name='dokumenPengirimanInput'
                    placeholder='isi manual dokumen yang anda mau'
                    type='textarea'
                    ref={dokumenPengirimanInputRef}
                    value={formPengiriman.dokumenPengirimanInput}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenPengiriman}
                    </div>
                  )}
                </div>
              </div>

              <div className='flex flex-col gap-2  justify-between items-start'>
                <label className='form-label  text-wrap'>
                  Dokumen yang dilampirkan saat Pengiriman Invoice
                  <span className=' opacity-60'>(Opsional)</span>
                </label>
                <span className='text-xs opacity-60'>
                  Dokumen lampiran saat pengiriman invoice
                </span>
                <div className='flex gap-3 flex-col w-full'>
                  <textarea
                    id='dokumenPengirimanInvoice'
                    aria-label='dokumenPengirimanInvoice'
                    name='dokumenPengirimanInvoice'
                    placeholder='isi manual dokumen yang anda mau'
                    type='textarea'
                    ref={dokumenPengirimanInvoiceRef}
                    value={formPengiriman.dokumenPengirimanInvoice}
                    className='form-input'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.dokumenInvoicePengiriman}
                    </div>
                  )}
                </div>
                <div className='w-2/5'></div>
              </div>
            </div>
          </form>
        </div>
      )}
    </>
  );
};

export default Pengiriman;