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 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 dokumen_kirim = [
    ['Surat Tanda Terima Barang (STTB)', '0'],
    ['Good Receipt (GR)', '1'],
    ['Surat Terima Barang (STB)', '2'],
    ['Lembar Penerimaan Barang (LPB)', '3'],
  ];
  const [selectedIds, setSelectedIds] = useState(() => {
    if (formPengiriman.dokumenPengiriman) {
      const selectedDocuments = formPengiriman.dokumenPengiriman
        .split(',')
        .map((item) => item.trim());
      return dokumen_kirim
        .filter(([name]) => selectedDocuments.includes(name))
        .map(([, id]) => Number(id));
    }
    return [];
  });
  console.log('selectedIds', selectedIds);
  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) => {
    console.log('value', 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(() => {
    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);
      updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
    } else {
      updateFormPengiriman('streetInvoice', '');
      updateFormPengiriman('stateInvoice', '');
      updateFormPengiriman('cityInvoice', '');
      setValue('streetInvoice', '');
      setValue('stateInvoice', '');
      setValue('cityInvoice', '');
    }
    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
    validatePengiriman();
  }, [sameAddress]);

  useEffect(() => {
    if (sameAddressStreet) {
      updateFormPengiriman('streetPengiriman', form.street);
      updateFormPengiriman('statePengiriman', form.state);
      updateFormPengiriman('cityPengiriman', form.city);
      updateFormPengiriman('zipPengiriman', form.zip);
    } else {
      updateFormPengiriman('streetPengiriman', '');
      updateFormPengiriman('statePengiriman', '');
      updateFormPengiriman('cityPengiriman', '');
      updateFormPengiriman('zipPengiriman', '');
      setValue('streetPengiriman', '');
      setValue('statePengiriman', '');
      setValue('cityPengiriman', '');
    }
    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
    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 = () => {
    setSameAddressStreet(!sameAddressStreet);
  };
  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'>
                  <input
                    value={formPengiriman.PICName}
                    id='PICName'
                    name='PICName'
                    placeholder='Masukkan nama pic pengiriman disini'
                    type='text'
                    className='form-input'
                    aria-invalid={errorsPengiriman.PICName}
                    ref={PICNameRef}
                    onChange={handleInputChange}
                  />
                  {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 pengiriman
                  </Checkbox>
                  {!sameAddressStreet && (
                    <>
                      <div>
                        <input
                          id='streetPengiriman'
                          name='streetPengiriman'
                          ref={streetPengirimanRef}
                          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-3'>
                        <div className='w-2/5' ref={statePengirimanRef}>
                          <Controller
                            name='statePengiriman'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                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'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={cities}
                                disabled={!watchState}
                                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'
                            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'>
                  <input
                    value={formPengiriman.invoicePic}
                    id='invoicePic'
                    name='invoicePic'
                    placeholder='Masukkan nama pic invoice disini'
                    type='text'
                    className='form-input'
                    aria-invalid={errorsPengiriman.invoicePic}
                    ref={invoicePicRef}
                    onChange={handleInputChange}
                  />
                  {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>
                  {!sameAddress && (
                    <>
                      <div>
                        <input
                          id='streetInvoice'
                          name='streetInvoice'
                          ref={streetInvoiceRef}
                          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}>
                          <Controller
                            name='stateInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={states}
                                placeholder='Provinsi'
                              />
                            )}
                          />
                          {chekValid && (
                            <div className='text-caption-2 text-danger-500 mt-1'>
                              {errorsPengiriman.stateInvoice}
                            </div>
                          )}
                        </div>
                        <div className='w-2/5' ref={cityInvoiceRef}>
                          <Controller
                            name='cityInvoice'
                            control={control}
                            render={(props) => (
                              <HookFormSelect
                                {...props}
                                options={cities}
                                disabled={!watchState}
                                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'>
                  <RadioGroup
                    onChange={handleRadioChange}
                    value={selectedRadio}
                  >
                    <div className='flex gap-3 flex-col'>
                      <Radio value='everyWeekday' colorScheme='red'>
                        Setiap Minggu di hari
                      </Radio>
                      <input
                        id='everyWeekdayInput'
                        name='everyWeekdayInput'
                        ref={everyWeekdayInputRef}
                        placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                        type='text'
                        value={formPengiriman.everyWeekdayInput}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                    </div>
                    <div className='flex gap-3 flex-col'>
                      <Radio value='everyWeek' colorScheme='red'>
                        Setiap Bulan di minggu ke
                      </Radio>
                      <input
                        id='everyWeekInput'
                        name='everyWeekInput'
                        ref={everyWeekInputRef}
                        placeholder='Format: Minggu 1 & Minggu 2'
                        type='text'
                        value={formPengiriman.everyWeekInput}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                    </div>
                    <div className='flex gap-3 flex-col'>
                      <Radio value='tukarInvoice' colorScheme='red'>
                        Lainnya
                      </Radio>
                      <textarea
                        id='tukarInvoiceInput'
                        name='tukarInvoiceInput'
                        placeholder='Isi manual dokumen yang anda mau'
                        value={formPengiriman.tukarInvoiceInput}
                        className='form-input'
                        rows={4}
                        cols={40}
                        onChange={handleInputChange}
                      />
                    </div>
                  </RadioGroup>
                </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'>
                  <RadioGroup
                    onChange={handleRadioChangeInvoice}
                    value={selectedRadioInvoice}
                  >
                    <div className='flex gap-3 flex-col'>
                      <Radio value='everyWeekdayPembayaran' colorScheme='red'>
                        Setiap Minggu di hari
                      </Radio>
                      <input
                        id='everyWeekdayInputPembayaran'
                        name='everyWeekdayInputPembayaran'
                        placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                        type='text'
                        value={formPengiriman.everyWeekdayInputPembayaran}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                    </div>
                    <div className='flex gap-3 flex-col'>
                      <Radio value='everyWeekPembayaran' colorScheme='red'>
                        Setiap Bulan di minggu ke
                      </Radio>
                      <input
                        id='everyWeekInputPembayaran'
                        name='everyWeekInputPembayaran'
                        placeholder='Format: Minggu 1 & Minggu 2'
                        type='text'
                        value={formPengiriman.everyWeekInputPembayaran}
                        className='form-input'
                        onChange={handleInputChange}
                      />
                    </div>
                    <div className='flex gap-3 flex-col'>
                      <Radio value='tukarInvoicePembayaran' colorScheme='red'>
                        Lainnya
                      </Radio>
                      <textarea
                        id='tukarInvoiceInputPembayaran'
                        name='tukarInvoiceInputPembayaran'
                        placeholder='isi manual dokumen yang anda mau'
                        value={formPengiriman.tukarInvoiceInputPembayaran}
                        className='form-input'
                        rows={4}
                        cols={40}
                        onChange={handleInputChange}
                      />
                    </div>
                  </RadioGroup>
                </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
                  </label>
                  {!isKonfirmasi && (
                    <span className='text-xs opacity-60'>
                      Pilih dokumen lampiran saat pengiriman barang
                    </span>
                  )}
                </div>
                <div
                  className='w-3/5 flex gap-3 flex-col'
                  ref={dokumenPengirimanRef}
                >
                  <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'
                      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 yang dilampirkan saat Pengiriman Invoice
                  </label>
                  <span className='text-xs opacity-60'>
                    Dokumen akan dikirimkan sesuai dengan yang anda pilih
                  </span>
                </div>
                <div
                  className='w-3/5 flex gap-3 flex-col'
                  ref={dokumenPengirimanInvoiceRef}
                >
                  <Checkbox
                    colorScheme='red'
                    key='0'
                    isChecked={isCheckedInvoice(0)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(0)
                    }
                  >
                    Invoice Pembelian
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='1'
                    isChecked={isCheckedInvoice(1)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(1)
                    }
                  >
                    Surat Jalan
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='2'
                    isChecked={isCheckedInvoice(2)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(2)
                    }
                  >
                    Berita Acara Serah Terima (BAST)
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='3'
                    isChecked={isCheckedInvoice(3)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(3)
                    }
                  >
                    Faktur Pajak
                  </Checkbox>
                  <Checkbox
                    colorScheme='red'
                    key='4'
                    isChecked={isCheckedInvoice(4)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(4)
                    }
                  >
                    Good Receipt (GR)
                  </Checkbox>

                  <div className='flex gap-3 flex-col'>
                    <Checkbox
                      colorScheme='red'
                      key='5'
                      isChecked={isCheckedInvoice(5)}
                      onChange={() =>
                        handleCheckboxChangeDokumenPengirimanInvoice(5)
                      }
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='dokumenPengirimanInvoiceInput'
                      name='dokumenPengirimanInvoiceInput'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      ref={dokumenPengirimanInvoiceInputRef}
                      value={formPengiriman.dokumenPengirimanInvoiceInput}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </div>
                  {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>
                <input
                  value={formPengiriman.PICName}
                  id='PICName'
                  name='PICName'
                  placeholder='Masukkan nama pic pengiriman disini'
                  type='text'
                  className='form-input'
                  aria-invalid={errorsPengiriman.PICName}
                  ref={PICNameRef}
                  onChange={handleInputChange}
                />
                {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>
                <div className='w-full'>
                  <input
                    id='streetPengiriman'
                    name='streetPengiriman'
                    ref={streetPengirimanRef}
                    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}>
                    <Controller
                      name='statePengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={states}
                          placeholder='Provinsi'
                        />
                      )}
                    />
                  </div>
                  <div className='w-1/3' ref={cityPengirimanRef}>
                    <Controller
                      name='cityPengiriman'
                      control={control}
                      render={(props) => (
                        <HookFormSelect
                          {...props}
                          options={cities}
                          disabled={!watchState}
                          placeholder='Kota'
                        />
                      )}
                    />
                  </div>
                  <div className='w-1/3'>
                    <input
                      id='zipPengiriman'
                      name='zipPengiriman'
                      ref={zipRef}
                      placeholder='Kode Pos'
                      type='number'
                      value={formPengiriman.zipPengiriman}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                  </div>
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.statePengiriman}
                    </div>
                  )}
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.cityPengiriman}
                    </div>
                  )}
                  {chekValid && (
                    <div className='text-caption-2 text-danger-500 mt-1'>
                      {errorsPengiriman.zipPengiriman}
                    </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>
                <input
                  value={formPengiriman.invoicePic}
                  id='invoicePic'
                  name='invoicePic'
                  placeholder='Masukkan nama pic invoice disini'
                  type='text'
                  className='form-input'
                  aria-invalid={errorsPengiriman.invoicePic}
                  ref={invoicePicRef}
                  onChange={handleInputChange}
                />
                {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>
                {!sameAddress && (
                  <>
                    <div className='w-full'>
                      <input
                        id='streetInvoice'
                        name='streetInvoice'
                        ref={streetInvoiceRef}
                        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}>
                        <Controller
                          name='stateInvoice'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={states}
                              placeholder='Provinsi'
                            />
                          )}
                        />
                        {chekValid && (
                          <div className='text-caption-2 text-danger-500 mt-1'>
                            {errorsPengiriman.stateInvoice}
                          </div>
                        )}
                      </div>
                      <div className='w-2/5' ref={cityInvoiceRef}>
                        <Controller
                          name='cityInvoice'
                          control={control}
                          render={(props) => (
                            <HookFormSelect
                              {...props}
                              options={cities}
                              disabled={!watchState}
                              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'>
                    Pilih jika bisnis anda memiliki jadwal penukaran invoice
                  </span>
                )}
                <div className='w-full flex gap-2 flex-col'>
                  <div className='flex gap-2 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={everyWeekday}
                      onChange={handleEveryWeekday}
                    >
                      Setiap Minggu dihari
                    </Checkbox>
                    <input
                      id='everyWeekdayInput'
                      name='everyWeekdayInput'
                      ref={everyWeekdayInputRef}
                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                      type='text'
                      value={formPengiriman.everyWeekdayInput}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                  </div>
                  <div className='flex gap-2 w-full flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={everyWeek}
                      onChange={handleEveryWeek}
                    >
                      Setiap Bulan di minggu ke
                    </Checkbox>
                    <input
                      id='everyWeekInput'
                      name='everyWeekInput'
                      ref={everyWeekInputRef}
                      placeholder='Format: Minggu 1 & Minggu 2'
                      type='text'
                      value={formPengiriman.everyWeekInput}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                  </div>
                  <div className='flex gap-2 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={tukarInvoice}
                      onChange={handleTukarInvoice}
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='tukarInvoiceInput'
                      name='tukarInvoiceInput'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      value={formPengiriman.tukarInvoiceInput}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </div>
                </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'>
                    Pilih jika bisnis anda memiliki jadwal pembayaran
                  </span>
                )}
                <div className='w-full flex gap-2 flex-col'>
                  <div className='flex gap-2 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={everyWeekdayPembayaran}
                      onChange={handleEveryWeekdayPembayaran}
                    >
                      Setiap Minggu dihari
                    </Checkbox>
                    <input
                      id='everyWeekdayInputPembayaran'
                      name='everyWeekdayInputPembayaran'
                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
                      type='text'
                      value={formPengiriman.everyWeekdayInputPembayaran}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                  </div>
                  <div className='flex gap-2 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={everyWeekPembayaran}
                      onChange={handleEveryWeekPembayaran}
                    >
                      Setiap Bulan di minggu ke
                    </Checkbox>
                    <input
                      id='everyWeekInputPembayaran'
                      name='everyWeekInputPembayaran'
                      placeholder='Format: Minggu 1 & Minggu 2'
                      type='text'
                      value={formPengiriman.everyWeekInputPembayaran}
                      className='form-input'
                      onChange={handleInputChange}
                    />
                  </div>
                  <div className='flex gap-2 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      isChecked={tukarInvoicePembayaran}
                      onChange={handleTukarInvoicePembayaran}
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='tukarInvoiceInputPembayaran'
                      name='tukarInvoiceInputPembayaran'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      value={formPengiriman.tukarInvoiceInputPembayaran}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </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'>
                    Pilih dokumen lampiran saat pengiriman barang
                  </span>
                )}
                <div
                  className='w-full flex gap-2 flex-col'
                  ref={dokumenPengirimanRef}
                >
                  <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
                      size='sm'
                      colorScheme='red'
                      key='4'
                      isChecked={isChecked(4)}
                      onChange={() => handleCheckboxChange(4)}
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='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}
                    />
                  </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 dilampirkan saat Pengiriman Invoice
                </label>
                <span className='text-xs opacity-60'>
                  Pilih dokumen lampiran saat pengiriman invoice
                </span>
                <div
                  className='w-full flex gap-2 flex-col'
                  ref={dokumenPengirimanInvoiceRef}
                >
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='0'
                    isChecked={isCheckedInvoice(0)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(0)
                    }
                  >
                    Invoice Pembelian
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='1'
                    isChecked={isCheckedInvoice(1)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(1)
                    }
                  >
                    Surat Jalan
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='2'
                    isChecked={isCheckedInvoice(2)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(2)
                    }
                  >
                    Berita Acara Serah Terima (BAST)
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='3'
                    isChecked={isCheckedInvoice(3)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(3)
                    }
                  >
                    Faktur Pajak
                  </Checkbox>
                  <Checkbox
                    size='sm'
                    colorScheme='red'
                    key='4'
                    isChecked={isCheckedInvoice(4)}
                    onChange={() =>
                      handleCheckboxChangeDokumenPengirimanInvoice(4)
                    }
                  >
                    Good Receipt (GR)
                  </Checkbox>

                  <div className='flex gap-3 flex-col'>
                    <Checkbox
                      size='sm'
                      colorScheme='red'
                      key='5'
                      isChecked={isCheckedInvoice(5)}
                      onChange={() =>
                        handleCheckboxChangeDokumenPengirimanInvoice(5)
                      }
                    >
                      Lainnya
                    </Checkbox>
                    <textarea
                      id='dokumenPengirimanInvoiceInput'
                      name='dokumenPengirimanInvoiceInput'
                      placeholder='isi manual dokumen yang anda mau'
                      type='textarea'
                      ref={dokumenPengirimanInvoiceInputRef}
                      value={formPengiriman.dokumenPengirimanInvoiceInput}
                      className='form-input'
                      rows={4}
                      cols={40}
                      onChange={handleInputChange}
                    />
                  </div>
                  {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;
