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 { 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';
const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
  const { control, watch, setValue } = useForm();
  const { isDesktop, isMobile } = useDevice();
  const {
    formPengiriman,
    errorsPengiriman,
    validatePengiriman,
    updateFormPengiriman,
  } = usePengajuanTempoStorePengiriman();
  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [sameAddress, setSameAddress] = useState(false);
  const [sameAddressStreet, setSameAddressStreet] = useState(false);
  const [everyWeekday, setEveryWeekday] = useState(false);
  const [everyWeek, setEveryWeek] = useState(false);
  const [tukarInvoice, setTukarInvoice] = useState(false);
  const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false);
  const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false);
  const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false);
  const [selectedRadio, setSelectedRadio] = useState('');
  const [selectedRadioInvoice, setSelectedRadioInvoice] = 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();
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
  }, []);

  const watchState = watch('statePengiriman');
  useEffect(() => {
    // updateFormPengiriman('cityPengiriman', '');
    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();
    }
  }, [watchCity]);
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFormPengiriman(name, value);
    validatePengiriman();
  };
  const handleRadioChange = (value) => {
    setSelectedRadio(value);
    if (value == 'everyWeekday') {
      setEveryWeekday(!everyWeekday);
    } else if (value == 'everyWeek') {
      setEveryWeek(!everyWeek);
    } else {
      setTukarInvoice(!tukarInvoice);
    }
    validatePengiriman();
  };
  const handleRadioChangeInvoice = (value) => {
    setSelectedRadioInvoice(value);
    if (value == 'everyWeekdayPembayaran') {
      setEveryWeekdayPembayaran(!everyWeekdayPembayaran);
    } else if (value == 'everyWeekPembayaran') {
      setEveryWeekPembayaran(!everyWeekPembayaran);
    } else {
      setTukarInvoicePembayaran(!tukarInvoicePembayaran);
    }
    validatePengiriman();
  };
  const handleEveryWeekday = () => {
    setEveryWeekday(!everyWeekday);
  };
  const handleEveryWeek = () => {
    setEveryWeek(!everyWeek);
  };
  const handleTukarInvoice = () => {
    setTukarInvoice(!tukarInvoice);
  };
  const handleEveryWeekdayPembayaran = () => {
    setEveryWeekdayPembayaran(!everyWeekdayPembayaran);
  };
  const handleEveryWeekPembayaran = () => {
    setEveryWeekPembayaran(!everyWeekPembayaran);
  };
  const handleTukarInvoicePembayaran = () => {
    setTukarInvoicePembayaran(!tukarInvoicePembayaran);
  };

  // useEffect(() => {
  //   updateFormPengiriman('everyWeekday', everyWeekday);
  //   updateFormPengiriman('everyWeek', everyWeek);
  //   updateFormPengiriman('tukarInvoice', tukarInvoice);
  //   updateFormPengiriman('everyWeekdayPembayaran', everyWeekdayPembayaran);
  //   updateFormPengiriman('everyWeekPembayaran', everyWeekPembayaran);
  //   updateFormPengiriman('tukarInvoicePembayaran', tukarInvoicePembayaran);
  //   validatePengiriman();
  // }, [
  //   everyWeekday,
  //   everyWeek,
  //   tukarInvoice,
  //   everyWeekdayPembayaran,
  //   everyWeekPembayaran,
  //   tukarInvoicePembayaran,
  // ]);

  const isFormValid = useMemo(
    () => Object.keys(errorsPengiriman).length === 0,
    [errorsPengiriman]
  );

  const PICNameRef = useRef(null);
  const streetPengirimanRef = useRef(null);
  const statePengirimanRef = useRef(null);
  const cityPengirimanRef = useRef(null);
  const zipRef = useRef(null);
  const invoicePicRef = useRef(null);
  const streetInvoiceRef = useRef(null);
  const stateInvoiceRef = useRef(null);
  const cityInvoiceRef = 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.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.zip && zipRef.current) {
          zipRef.current.scrollIntoView(options);
          return;
        }
        if (errorsPengiriman.invoicePic && invoicePicRef.current) {
          invoicePicRef.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.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);
    }
  }, [formPengiriman.isSameAddreesStreet]);
  useEffect(() => {
    if (formPengiriman.isSameAddrees == 'true') {
      setSameAddress(true);
    }
  }, [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 (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('streetInvoice', '');
      // updateFormPengiriman('stateInvoice', '');
      // updateFormPengiriman('cityInvoice', '');
      // setValue('streetInvoice', '');
      // setValue('stateInvoice', '');
      // setValue('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 (sameAddressStreet) {
      console.log('form.state', form);
      updateFormPengiriman('streetPengiriman', form.street);
      updateFormPengiriman('statePengiriman', form.state);
      setValue('statePengiriman', parseInt(form.state));
      updateFormPengiriman('cityPengiriman', form.city);
      setValue('cityPengiriman', parseInt(form.city));
      updateFormPengiriman('zipPengiriman', form.zip);
      updateFormPengiriman('isSameAddreesStreet', `${sameAddressStreet}`);
    }
    // else {
    //   updateFormPengiriman('streetPengiriman', '');
    //   updateFormPengiriman('statePengiriman', '');
    //   updateFormPengiriman('cityPengiriman', '');
    //   updateFormPengiriman('zipPengiriman', '');
    //   setValue('streetPengiriman', '');
    //   setValue('statePengiriman', '');
    //   setValue('cityPengiriman', '');
    // }
    validatePengiriman();
  }, [sameAddressStreet]);

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

  useEffect(() => {
    const options = {
      behavior: 'smooth',
      block: 'center',
    };

    const loadIndustries = async () => {
      const watchZip = formPengiriman.zipPengiriman?.trim(); // Menghapus spasi berlebih

      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
      if (watchZip && watchZip.length >= 5) {
        const loadZip = async () => {
          try {
            const response = await fetch(
              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
            );

            const result = await response.json();

            if (!result.result.length > 0) {
              toast.error('Alamat pos salah');
              updateFormPengiriman('zipPengiriman', ''); // Reset form.zip jika salah
              validate(); // Memanggil validasi formulir
              return false;
            } else {
              updateFormPengiriman('zipPengiriman', watchZip);
              validate();
              return true; // Jika valid
            }
          } catch (error) {
            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
            console.error('Error:', error);
            return false;
          }
        };

        const isValidZip = await loadZip();
        if (!isValidZip) {
          zipRef.current.scrollIntoView(options);
        }
      }
    };

    loadIndustries();
  }, [formPengiriman.zipPengiriman]);

  console.log('formPengiriman', formPengiriman);
  console.log('errorsPengiriman', errorsPengiriman);

  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}
                    </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 bisnis
                  </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 flex-row w-full gap-3'>
                      <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-1/3' 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 className='w-1/3'>
                        <input
                          id='zipPengiriman'
                          aria-label='zipPengiriman'
                          disabled={sameAddressStreet}
                          name='zipPengiriman'
                          ref={zipRef}
                          placeholder='Kode Pos'
                          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>
              </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}
                    </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 pengiriman
                    </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 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>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label   text-wrap'>
                    Jadwal Penukaran Invoice{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Pilih jika bisnis anda memiliki 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}
                    cols={40}
                    onChange={handleInputChange}
                  />
                </div>
              </div>

              <div className='flex flex-row  justify-between items-start'>
                <div className='w-2/5'>
                  <label className='form-label text-nowrap'>
                    Jadwal Pembayaran{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Pilih jika bisnis anda memiliki 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'
                    rows={4}
                    cols={40}
                    onChange={handleInputChange}
                  />
                </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)}
                      onChange={() => handleCheckboxChange(4)}
                    >
                      Lainnya
                    </Checkbox>
                    <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}
                    />
                  </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 saat Pengiriman Barang{' '}
                    <span className=' opacity-60'>(Opsional)</span>
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Dokumen lampiran 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}
                  </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 bisnis
                </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-1/3'
                    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>

              <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}
                  </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>

              <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 bisnis 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 bisnis 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='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>

                  {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 saat Pengiriman Barang
                </label>
                {!isKonfirmasi && (
                  <span className='text-xs opacity-60'>
                    Dokumen lampiran 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;