import { Skeleton, Spinner } from '@chakra-ui/react';
import {
  BanknotesIcon,
  ChevronLeftIcon,
  ClockIcon,
  ExclamationCircleIcon,
} from '@heroicons/react/24/outline';
import axios from 'axios';
import { AnimatePresence, motion } from 'framer-motion';
import { useRouter } from 'next/router';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'react-hot-toast';
import { useQuery } from 'react-query';
import snakecaseKeys from 'snakecase-keys';

import Alert from '@/core/components/elements/Alert/Alert';
import Divider from '@/core/components/elements/Divider/Divider';
import Image from '@/core/components/elements/Image/Image';
import Link from '@/core/components/elements/Link/Link';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import useAuth from '@/core/hooks/useAuth';
import { getItemAddress } from '@/core/utils/address';
import { deleteItemCart } from '@/core/utils/cart';
import currencyFormat from '@/core/utils/currencyFormat';
import getFileBase64 from '@/core/utils/getFileBase64';
import { gtagPurchase } from '@/core/utils/googleTag';
import whatsappUrl from '@/core/utils/whatsappUrl';
import addressesApi from '@/lib/address/api/addressesApi';
import { MapPinIcon } from 'lucide-react';
import CartItem from '~/modules/cart/components/Item.tsx';
import ExpedisiList from '../api/ExpedisiList';
import { getVoucher } from '../api/getVoucher';
import { useAddress } from '../stores/useAdress';
import SectionExpedition from './SectionExpedition';
import { useCheckout } from '../stores/stateCheckout';
import { formatShipmentRange, getToDate } from '../utils/functionCheckouit';

const SELF_PICKUP_ID = 32;

const { checkoutApi } = require('../api/checkoutApi');
const { getProductsCheckout } = require('../api/checkoutApi');

function convertToInternational(number) {
  if (typeof number !== 'string') {
    throw new Error('Input harus berupa string');
  }

  if (number.startsWith('08')) {
    return '+62' + number.slice(2);
  }

  return number;
}

const Checkout = () => {
  const PPN = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0;
  const router = useRouter();
  const query = router.query.source ?? null;
  const qVoucher = router.query.voucher ?? null;
  const auth = useAuth();

  const [activeVoucher, SetActiveVoucher] = useState(null);
  const [activeVoucherShipping, setActiveVoucherShipping] = useState(null);

  const { data: cartCheckout } = useQuery(
    ['cartCheckout', activeVoucher, activeVoucherShipping],
    () =>
      getProductsCheckout({
        source: query,
        voucher: activeVoucher,
        voucher_shipping: activeVoucherShipping,
      }),
    {
      keepPreviousData: true, // Menjaga data sebelumnya sampai data baru tersedia
    }
  );

  const {
    selectedAddress,
    setSelectedAddress,
    addresses,
    setAddresses,
    setAddressMaps,
    setCoordinate,
    setPostalCode,
  } = useAddress();

  useEffect(() => {
    if (!auth) return;

    const getAddresses = async () => {
      const dataAddresses = await addressesApi();
      setAddresses(dataAddresses);
    };

    getAddresses();
  }, [auth]);

  useEffect(() => {
    if (!addresses) return;

    const matchAddress = (key) => {
      if (key === 'invoicing') {
        key = 'invoice';
      }
      const addressToMatch = getItemAddress(key);
      const foundAddress = addresses.filter(
        (address) => address.id == addressToMatch
      );
      if (foundAddress.length > 0) {
        return foundAddress[0];
      }
      return addresses[0];
    };

    let ship = matchAddress('shipping');

    setSelectedAddress({
      shipping: matchAddress('shipping'),
      invoicing: matchAddress('invoicing'),
    });
    setPostalCode(ship?.zip);
    if (ship?.addressMap) {
      setAddressMaps(ship?.addressMap);
      setCoordinate({
        destination_latitude: ship?.latitude,
        destination_longitude: ship?.longtitude,
      });
    }
  }, [addresses]);

  const [totalWeight, setTotalWeight] = useState(0);
  const [priceCheck, setPriceCheck] = useState(false);
  const [listserviceExpedisi, setListServiceExpedisi] = useState([]);
  const [selectedExpedisi, setSelectedExpedisi] = useState(0);
  const [selectedCarrierId, setselectedCarrierId] = useState(0);
  const [selectedCarrier, setselectedCarrier] = useState(0);
  const [selectedServiceType, setSelectedServiceType] = useState(null);
  const [selectedExpedisiService, setselectedExpedisiService] = useState(null);
  // const [etd, setEtd] = useState(null);
  // const [etdFix, setEtdFix] = useState(null);
  const [bottomPopup, SetBottomPopup] = useState(null);
  const [bottomPopupTnC, SetBottomPopupTnC] = useState(null);
  const [itemTnC, setItemTnC] = useState(null);
  const [listVouchers, SetListVoucher] = useState(null);
  const [listVoucherShippings, SetListVoucherShipping] = useState(null);
  const [discountVoucher, SetDiscountVoucher] = useState(0);
  const [codeVoucher, SetCodeVoucher] = useState(null);
  const [findCodeVoucher, SetFindVoucher] = useState(null);
  const [selisihHargaCode, SetSelisihHargaCode] = useState(null);
  const [buttonTerapkan, SetButtonTerapkan] = useState(false);
  const [loadingVoucher, setLoadingVoucher] = useState(true);
  const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false);
  const [grandTotal, setGrandTotal] = useState(0);

  const {
    checkWeigth,
    setCheckWeight,
    hasFlashSale,
    setHasFlashSale,
    checkoutValidation,
    setCheckoutValidation,
    biayaKirim,
    products,
    setProducts,
    etd,
    unit,
    selectedCourier,
    selectedCourierId,
    selectedService,
    listExpedisi,
    setExpedisi,
    productSla
  } = useCheckout();

  const expedisiValidation = useRef(null);

  const voucher = async () => {
    if (!listVouchers) {
      try {
        setLoadingVoucher(true);
        let dataVoucher = await getVoucher(auth?.id, {
          source: query,
          type: 'all,brand',
          partner_id : auth?.partnerId,
        });
        SetListVoucher(dataVoucher);

        let dataVoucherShipping = await getVoucher(auth?.id, {
          source: query,
          type: 'shipping',
        });
        SetListVoucherShipping(dataVoucherShipping);
      } finally {
        setLoadingVoucher(false);
      }
    }
  };

  const VoucherCode = async (code) => {
    // let dataVoucher = await findVoucher(code, auth.id, query);
    let dataVoucher = await getVoucher(auth?.id, {
      source: query,
      code: code,
    });
    if (dataVoucher.length <= 0) {
      SetFindVoucher(1);
      return;
    }


    dataVoucher.forEach((addNewLine) => {
      if (addNewLine.applyType !== 'shipping') {
        // Mencari voucher dalam listVouchers
        let checkList = listVouchers?.findIndex(
          (voucher) => voucher.code === addNewLine.code
        );

        if (checkList >= 0) {
          if (listVouchers[checkList].canApply) {
            ToggleSwitch(addNewLine.code); // Perbaikan: Gunakan code voucher yang benar
            SetCodeVoucher(null);
          } else {
            SetSelisihHargaCode(listVouchers[checkList].differenceToApply);
            SetFindVoucher(2);
          }
          return; // Hentikan eksekusi lebih lanjut pada iterasi ini
        }
        // Memeriksa apakah subtotal memenuhi syarat minimal pembelian
        if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) {
          SetSelisihHargaCode(
            currencyFormat(
              addNewLine.minPurchaseAmount - cartCheckout?.subtotal
            )
          );
          SetFindVoucher(2);
          return;
        } else {
          SetFindVoucher(3);
          SetButtonTerapkan(true);
        }

        // Tambahkan voucher ke list dan set voucher aktif
        SetListVoucher((prevList) => [addNewLine, ...prevList]);
        if (addNewLine.canApply) {
          SetActiveVoucher(addNewLine.code);
        }
      } else {
        // Mencari voucher dalam listVoucherShippings
        let checkList = listVoucherShippings?.findIndex(
          (voucher) => voucher.code === addNewLine.code
        );

        if (checkList >= 0) {
          if (listVoucherShippings[checkList].canApply) {
            ToggleSwitch(addNewLine.code); // Perbaikan: Gunakan code voucher yang benar
            SetCodeVoucher(null);
          } else {
            SetSelisihHargaCode(
              listVoucherShippings[checkList].differenceToApply
            );
            SetFindVoucher(2);
          }
          return; // Hentikan eksekusi lebih lanjut pada iterasi ini
        }

        // Memeriksa apakah subtotal memenuhi syarat minimal pembelian
        if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) {
          SetSelisihHargaCode(
            currencyFormat(
              addNewLine.minPurchaseAmount - cartCheckout?.subtotal
            )
          );
          SetFindVoucher(2);
          return;
        } else {
          SetFindVoucher(3);
          SetButtonTerapkan(true);
        }

        // Tambahkan voucher ke list pengiriman dan set voucher aktif pengiriman
        SetListVoucherShipping((prevList) => [addNewLine, ...prevList]);
        if (addNewLine.canApply) {
          setActiveVoucherShipping(addNewLine.code);
        }
      }
    });

    // let addNewLine = dataVoucher[0];
  };

  useEffect(() => {
    SetFindVoucher(null);
  }, [bottomPopup]);

  useEffect(() => {
    // voucher();
    const loadExpedisi = async () => {
      let dataExpedisi = await ExpedisiList();
      dataExpedisi = dataExpedisi.map((expedisi) => ({
        value: expedisi.id,
        label: expedisi.name,
        carrierId: expedisi.deliveryCarrierId,
        logo: expedisi.image,
      }));
      setExpedisi(dataExpedisi);
    };
    loadExpedisi();

    const handlePopState = () => {
      router.push('/shop/cart');
    };

    window.onpopstate = handlePopState;

    return () => {
      window.onpopstate = null;
    };
  }, []);

  useEffect(() => {
    if (qVoucher === 'PASTIHEMAT' && listVouchers) {
      let code = qVoucher;
      VoucherCode(code);
    }
  }, [listVouchers]);

  useEffect(() => {
    setProducts(cartCheckout?.products);
    setCheckWeight(cartCheckout?.hasProductWithoutWeight);
    setTotalWeight(cartCheckout?.totalWeight.g);
    const hasFlashSale = cartCheckout?.products.some(
      (product) => product.hasFlashsale
    );
    setHasFlashSale(hasFlashSale);
  }, [cartCheckout]);

  const poNumber = useRef(null);
  const poFile = useRef(null);

  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const GT =
      cartCheckout?.grandTotal +
      Math.round(parseInt(finalShippingAmt * 1.1) / 1000) * 1000;
    const finalGT = GT < 0 ? 0 : GT;
    setGrandTotal(finalGT);
  }, [
    biayaKirim,
    cartCheckout?.grandTotal,
    activeVoucher,
    activeVoucherShipping,
  ]);

  const checkout = async () => {
    const file = poFile.current.files[0];
    if (typeof file !== 'undefined' && file.size > 5000000) {
      toast.error('Maksimal ukuran file adalah 5MB', {
        position: 'bottom-center',
      });
      return;
    }
    if (selectedCourier === 0 || !selectedCourier) {
      setCheckoutValidation(true);
      if (expedisiValidation.current) {
        const position = expedisiValidation.current.getBoundingClientRect();
        window.scrollTo({
          top: position.top - 300 + window.pageYOffset,
          behavior: 'smooth',
        });
      }
      return;
    }
    if (selectedCourierId !== SELF_PICKUP_ID) { // Menggunakan selectedCourierId karena lebih spesifik dan numerik
        if (!selectedService) { // Jika kurir bukan Self Pickup, maka harus ada layanan yang dipilih
            toast.error('Harap pilih tipe layanan pengiriman');
            return;
        }
        // Validasi biaya kirim hanya untuk kurir selain Self Pickup (dan ID kurir 1 jika itu kasus khusus)
        // Jika selectedCourierId adalah 1 (misalnya kurir internal yang bisa gratis), lewati validasi biayaKirim 0
        if (selectedCourierId !== 1 && biayaKirim === 0) {
            toast.error('Maaf, layanan tidak tersedia untuk ekspedisi ini. Mohon pilih ekspedisi lain atau layanan lain.');
            return;
        }
    }
    setIsLoading(true);
    const productOrder = products.map((product) => ({
      product_id: product.id,
      quantity: product.quantity,
      available_quantity: product?.availableQuantity,
    }));

    let eta_courier = 0;
    let eta_courier_start = 0;

    if (selectedCourierId !== SELF_PICKUP_ID && etd) {
      const estimated_courier = etd.split('-').map(Number);
      eta_courier = Math.max(...estimated_courier);
      eta_courier_start = Math.min(...estimated_courier);
    }

    // let estimated_courier = etd.split('-').map(Number);
    // let eta_courier = Math.max(...estimated_courier);
    // let eta_courier_start = Math.min(...estimated_courier);

    let data = {
      // partner_shipping_id: auth.partnerId,,
      // partner_invoice_id: auth.partnerId,
      partner_shipping_id: selectedAddress?.shipping?.id || auth.partnerId,
      partner_invoice_id: selectedAddress?.invoicing?.id || auth.partnerId,
      user_id: auth.id,
      order_line: JSON.stringify(productOrder),
      delivery_amount: biayaKirim,
      carrier_id: selectedCourierId,
      estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla),
      estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla),
      delivery_service_type: selectedService?.service_type,
      flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false
      voucher: activeVoucher,
      voucher_shipping: activeVoucherShipping,
      type: 'sale_order',
    };
    if (query) {
      data.source = 'buy';
    }
    if (poNumber.current.value) {
      if (typeof file == 'undefined') {
        toast.error(
          'Nomor PO ' +
          poNumber.current.value +
          ' telah dimasukkan, Harap upload file PO yang dimaksud'
        );
        setIsLoading(false);
        return;
      }
      data.po_number = poNumber.current.value;
    }
    if (typeof file !== 'undefined') data.po_file = await getFileBase64(file);

    const isCheckouted = await checkoutApi({ data });

    if (!isCheckouted?.id) {
      toast.error('Gagal melakukan transaksi, terjadi kesalahan internal');
      setIsLoading(false);
      return;
    } else {
      gtagPurchase(products, biayaKirim, isCheckouted.name);

      gtag('event', 'conversion', {
        send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD',
        value:
          cartCheckout?.grandTotal +
          Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
        currency: 'IDR',
        transaction_id: isCheckouted.id,
      });

      gtag('set', 'user_data', {
        email: auth.email,
        phone_number:
          convertToInternational(auth.mobile) ??
          convertToInternational(auth.phone),
      });

      gtag('config', 'AW-954540379', { ' allow_enhanced_conversions': true });

      for (const product of products) deleteItemCart({ productId: product.id });
      if (grandTotal > 0) {
        const payment = await axios.post(
          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
        );
        setIsLoading(false);
        window.location.href = payment.data.redirectUrl;
      } else {
        window.location.href = `${
          process.env.NEXT_PUBLIC_SELF_HOST
        }/shop/checkout/success?order_id=${isCheckouted.name.replace(
          /\//g,
          '-'
        )}`;
      }
    }
  };

  const handlingActivateCode = async () => {
    VoucherCode(codeVoucher);
  };

  const handleUseVoucher = async (code, isCheck) => {
    if (isCheck) {
      if (code === activeVoucher) {
        SetActiveVoucher(null);
        SetDiscountVoucher(0);
      } else {
        SetActiveVoucher(code);
        SetFindVoucher(null);
        document.getElementById('uniqCode')
          ? (document.getElementById('uniqCode').value = '')
          : '';
        SetButtonTerapkan(false);
      }
    } else {
      SetActiveVoucher(code);
      SetFindVoucher(null);
      document.getElementById('uniqCode')
        ? (document.getElementById('uniqCode').value = '')
        : '';
      SetButtonTerapkan(false);
    }
  };

  const onChangeCodeVoucher = async (e) => {
    SetCodeVoucher(e.target.value);
    SetButtonTerapkan(false);
  };

  const [isChecked, setIsChecked] = useState(false);

  const ToggleSwitch = (code) => {
    setIsChecked(!isChecked);
    handleUseVoucher(code, !isChecked);
  };

  const handlingTnC = async (item) => {
    setItemTnC(item);
    SetBottomPopupTnC(true);
  };

  const hasNoPrice = useMemo(() => {
    if (!products) return false;
    for (const item of products) {
      if (item.price.priceDiscount == 0) return true;
    }
    return false;
  }, [products]);

  const voucherShippingAmt = cartCheckout?.discountVoucherShipping || 0;
  const discShippingAmt = Math.min(biayaKirim, voucherShippingAmt);

  const finalShippingAmt = biayaKirim - discShippingAmt;

  const totalDiscountVoucher =
    cartCheckout?.discountVoucher +
    (cartCheckout?.discountVoucherShipping || 0);

  return (
    <>
      <BottomPopup
        className='w-full md:!w-[40%] !min-h-[90vh]'
        active={bottomPopupTnC}
        close={() => {
          SetBottomPopupTnC(false);
          SetBottomPopup(false);
        }}
        title={
          <div>
            <button
              className='flex gap-x-2 items-center'
              onClick={() => SetBottomPopupTnC(false)}
            >
              <ChevronLeftIcon class='h- w-5 text-black' />{' '}
              <span className='text-lg'>Voucher</span>
            </button>{' '}
          </div>
        }
      >
        <div className='row'>
          <h3 className='font-semibold mb-4'> {itemTnC?.name}</h3>
          <div className='flex items-center justify-between bg-gray-50 rounded-lg border-t border-b border-green-50 p-3'>
            <div className='flex items-center gap-x-1'>
              <ClockIcon class='h-6 w-6 text-green-500' />{' '}
              <span className='text-sm'>
                {' '}
                Berakhir dalam :{' '}
                <span className='text-sm text-red-500'>
                  {itemTnC?.remainingTime} lagi
                </span>
              </span>
            </div>
            <div className='flex items-center gap-x-1'>
              <BanknotesIcon class='h-6 w-6 text-green-500' />
              <span className='text-sm'> Kode Voucher : </span>
              <span className='text-red-500 font-semibold'>
                {itemTnC?.code}
              </span>
            </div>
          </div>
          <div>
            <h3 className='font-semibold mb-4 mt-4'>Syarat dan Ketentuan</h3>
            <hr />
            <div className='p-2 pl-4 pr-4 mx-auto text-sm'>
              <div
                className='prose prose-sm'
                dangerouslySetInnerHTML={{ __html: itemTnC?.termsConditions }}
              ></div>
            </div>
          </div>
        </div>
      </BottomPopup>

      <BottomPopup
        className='w-full md:!w-[40%] !min-h-[350px]'
        active={bottomPopup}
        close={() => SetBottomPopup(false)}
        title='Gunakan Promo'
      >
        <div className='row'>
          <div className='flex justify-between items-center gap-x-4'>
            <div className='flex flex-1 md:w-[70%]'>
              <input
                type='text'
                id='uniqCode'
                name='uniqCode'
                className='form-input w-full rounded-md'
                placeholder='Kode Voucher'
                autoCapitalize='true'
                onChange={(e) => onChangeCodeVoucher(e)}
              />
            </div>
            <div className='flex'>
              <button
                className='btn-solid-red flex-1 md:flex-none rounded-md'
                type='button'
                onClick={() => handlingActivateCode()}
                disabled={buttonTerapkan}
              >
                Terapkan
              </button>
            </div>
          </div>
          {findCodeVoucher === 3 && activeVoucher === codeVoucher && (
            <div className='mt-2'>
              <span className='text-caption-1 mt-2 text-green-600'>
                Voucher berhasil ditambahkan{' '}
              </span>
            </div>
          )}
          {findCodeVoucher === 1 && (
            <div className='mt-2'>
              <span className='text-caption-1 mt-2 text-red-600'>
                Kode voucher salah / sudah tidak berlaku lagi. Coba voucher
                lainnya, ya.
              </span>
            </div>
          )}
          {findCodeVoucher === 2 && (
            <div className='mt-2'>
              <span className='text-caption-1 mt-2 text-red-600'>
                Tambah <span className='text-red-600'>{selisihHargaCode}</span>{' '}
                untuk pakai promo ini
              </span>
            </div>
          )}

          <hr className='mt-8 mb-4 border-gray_r-8' />

          {listVoucherShippings && listVoucherShippings?.length > 0 && (
            <div>
              <h3 className='font-semibold mb-4'>
                Promo Extra Potongan Ongkir
              </h3>
              {listVoucherShippings?.map((item) => (
                <div key={item.id} className='relative'>
                  <div
                    className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}
                  >
                    {item.canApply && (
                      <div
                        class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400'
                        role='alert'
                      >
                        <p>
                          Potensi potongan sebesar{' '}
                          <span className='text-green font-bold'>
                            {currencyFormat(item.discountVoucher)}
                          </span>
                        </p>
                      </div>
                    )}
                    {!item.canApply && (
                      <div
                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
                        role='alert'
                        onClick={() => handlingTnC(item)}
                      >
                        <p>
                          Voucher tidak bisa di gunakan,{' '}
                          <span className='text-red font-bold'>
                            Baca Selengkapnya !
                          </span>
                        </p>
                      </div>
                    )}

                    <div className={`flex gap-x-3 relative`}>
                      {item.canApply === false && (
                        <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                      )}
                      <div className='hidden md:w-[250px] md:block'>
                        <Image
                          src={item.image}
                          alt={item.name}
                          className={`object-cover`}
                        />
                      </div>
                      <div className='w-full'>
                        <div className='flex justify-between gap-x-2 mb-1 items-center'>
                          <div className=''>
                            <h3 className='font-semibold'>{item.name}</h3>
                            <div className='mt-1'>
                              <span className='text-sm line-clamp-3'>
                                {item.description}{' '}
                              </span>
                            </div>
                          </div>
                          <div className='flex justify-end'>
                            <label class='relative inline-flex items-center cursor-pointer'>
                              <input
                                type='checkbox'
                                value=''
                                class='sr-only peer'
                                checked={activeVoucherShipping === item.code}
                                onChange={() =>
                                  setActiveVoucherShipping(
                                    activeVoucherShipping === item.code
                                      ? null
                                      : item.code
                                  )
                                }
                              />
                              <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
                            </label>
                          </div>
                        </div>
                        <hr className='mt-2 my-2 border-gray_r-8' />
                        <div className='flex justify-between items-center'>
                          <p className='text-justify text-sm md:text-xs'>
                            Kode Voucher :{' '}
                            <span className='text-red-500 font-semibold'>
                              {item.code}
                            </span>
                          </p>
                          <p className='text-sm md:text-xs'>
                            {activeVoucher === item.code && (
                              <span className=' text-green-600'>
                                Voucher digunakan{' '}
                              </span>
                            )}
                          </p>
                        </div>
                        <div className='flex items-center mt-3'>
                          <svg
                            aria-hidden='true'
                            fill='none'
                            stroke='currentColor'
                            stroke-width='1.5'
                            viewBox='0 0 24 24'
                            className='w-5 text-black'
                          >
                            <path
                              d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
                              stroke-linecap='round'
                              stroke-linejoin='round'
                            ></path>
                          </svg>
                          <div className='flex justify-between items-center'>
                            <div className='text-left ml-3 text-sm '>
                              Berakhir dalam{' '}
                              <span className='text-red-600'>
                                {item.remainingTime}
                              </span>{' '}
                              lagi,{' '}
                            </div>
                            <div
                              className='text-sm ml-2 text-red-600'
                              onClick={() => handlingTnC(item)}
                            >
                              Baca S&K
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className='mt-3'>
                      <p className='text-justify text-sm '></p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          <hr className='mt-8 mb-4 border-gray_r-8' />

          <div>
            {!loadingVoucher && listVouchers?.length > 0 && (
              <h3 className='font-semibold mb-4'>
                Promo Khusus Untuk {auth?.name}
              </h3>
            )}
            {loadingVoucher && (
              <>
                <div
                  className={`border border-solid  w-full hover:cursor-pointer  p-2`}
                >
                  <div class='flex items-center space-x-3'>
                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
                      <svg
                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
                        aria-hidden='true'
                        xmlns='http://www.w3.org/2000/svg'
                        fill='currentColor'
                        viewBox='0 0 16 20'
                      >
                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
                      </svg>
                    </div>
                    <div>
                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                    </div>
                  </div>
                </div>
                <div
                  className={`border border-solid  w-full hover:cursor-pointer  p-2`}
                >
                  <div class='flex items-center space-x-3'>
                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
                      <svg
                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
                        aria-hidden='true'
                        xmlns='http://www.w3.org/2000/svg'
                        fill='currentColor'
                        viewBox='0 0 16 20'
                      >
                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
                      </svg>
                    </div>
                    <div>
                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                    </div>
                  </div>
                </div>
              </>
            )}
            {!loadingVoucher &&
              listVouchers?.map((item) => (
                <div key={item.id} className='relative'>
                  <div
                    className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}
                  >
                    {item.canApply && (
                      <div
                        class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400'
                        role='alert'
                      >
                        <p>
                          Potensi potongan sebesar{' '}
                          <span className='text-green font-bold'>
                            {currencyFormat(item.discountVoucher)}
                          </span>
                        </p>
                      </div>
                    )}
                    {!item.canApply && (
                      <div
                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
                        role='alert'
                        onClick={() => handlingTnC(item)}
                      >
                        <p>
                          Voucher tidak bisa di gunakan,{' '}
                          <span className='text-red font-bold'>
                            Baca Selengkapnya !
                          </span>
                        </p>
                      </div>
                    )}

                    <div className={`flex gap-x-3 relative`}>
                      {item.canApply === false && (
                        <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                      )}
                      <div className='hidden md:w-[250px] md:block'>
                        <Image
                          src={item.image}
                          alt={item.name}
                          className={`object-cover`}
                        />
                      </div>
                      <div className='w-full'>
                        <div className='flex justify-between gap-x-2 mb-1 items-center'>
                          <div className=''>
                            <h3 className='font-semibold'>{item.name}</h3>
                            <div className='mt-1'>
                              <span className='text-sm line-clamp-3'>
                                {item.description}{' '}
                              </span>
                            </div>
                          </div>
                          <div className='flex justify-end'>
                            <label class='relative inline-flex items-center cursor-pointer'>
                              <input
                                type='checkbox'
                                value=''
                                class='sr-only peer'
                                checked={
                                  activeVoucher === item.code ? true : false
                                }
                                onChange={() => ToggleSwitch(item.code)}
                              />
                              <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
                            </label>
                          </div>
                        </div>
                        <hr className='mt-2 my-2 border-gray_r-8' />
                        <div className='flex justify-between items-center'>
                          <p className='text-justify text-sm md:text-xs'>
                            Kode Voucher :{' '}
                            <span className='text-red-500 font-semibold'>
                              {item.code}
                            </span>
                          </p>
                          <p className='text-sm md:text-xs'>
                            {activeVoucher === item.code && (
                              <span className=' text-green-600'>
                                Voucher digunakan{' '}
                              </span>
                            )}
                          </p>
                        </div>
                        <div className='flex items-center mt-3'>
                          <svg
                            aria-hidden='true'
                            fill='none'
                            stroke='currentColor'
                            stroke-width='1.5'
                            viewBox='0 0 24 24'
                            className='w-5 text-black'
                          >
                            <path
                              d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
                              stroke-linecap='round'
                              stroke-linejoin='round'
                            ></path>
                          </svg>
                          <div className='flex justify-between items-center'>
                            <div className='text-left ml-3 text-sm '>
                              Berakhir dalam{' '}
                              <span className='text-red-600'>
                                {item.remainingTime}
                              </span>{' '}
                              lagi,{' '}
                            </div>
                            <div
                              className='text-sm ml-2 text-red-600'
                              onClick={() => handlingTnC(item)}
                            >
                              Baca S&K
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className='mt-3'>
                      <p className='text-justify text-sm '></p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </BottomPopup>

      <MobileView>
        <div className='p-4'>
          <Alert type='info' className='text-caption-2 flex gap-x-3'>
            <div>
              <ExclamationCircleIcon className='w-7 text-blue-700' />
            </div>
            <span className='leading-5'>
              Jika mengalami kesulitan dalam melakukan pembelian di website
              Indoteknik. <a href={whatsappUrl()}>Hubungi kami disini</a>
            </span>
          </Alert>
        </div>

        <Divider />

        {selectedCarrierId == SELF_PICKUP_ID && (
          <div className='p-4'>
            <div
              class='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
              role='alert'
            >
              <svg
                class='flex-shrink-0 inline w-4 h-4 mr-3'
                aria-hidden='true'
                fill='currentColor'
                viewBox='0 0 20 20'
              >
                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
              </svg>
              <span class='sr-only'>Info</span>
              <div className='text-justify'>
                Fitur Self Pickup, hanya berlaku untuk customer di area jakarta.
                Apa bila memilih fitur ini, anda akan dihubungi setelah barang
                siap diambil.
              </div>
            </div>
          </div>
        )}

        {selectedCourierId == SELF_PICKUP_ID && (
          <PickupAddress label='Alamat Pickup' />
        )}
        {selectedCourierId != SELF_PICKUP_ID && (
          <Skeleton
            isLoaded={!!selectedAddress.invoicing && !!selectedAddress.shipping}
            minHeight={320}
          >
            <SectionAddress
              address={selectedAddress.shipping}
              label='Alamat Pengiriman'
              url='/my/address?select=shipping'
            />
            <Divider />
            <SectionAddress
              address={selectedAddress.invoicing}
              label='Alamat Penagihan'
              url='/my/address?select=invoice'
            />
          </Skeleton>
        )}
        <Divider />
        <SectionValidation address={selectedAddress.invoicing} />
        {/* <SectionExpedisi
          address={selectedAddress.shipping}
          listExpedisi={listExpedisi}
          setSelectedExpedisi={setSelectedExpedisi}
          checkWeigth={checkWeigth}
          checkoutValidation={checkoutValidation}
          expedisiValidation={expedisiValidation}
          loadingRajaOngkir={loadingRajaOngkir}
        />
        <Divider />
        <SectionListService
          listserviceExpedisi={listserviceExpedisi}
          setSelectedServiceType={setSelectedServiceType}
        /> */}

        <div className='p-4 flex flex-col gap-y-4'>
          {!!products &&
            snakecaseKeys(products).map((item, index) => (
              <CartItem
                key={index}
                item={item}
                editable={false}
                selfPicking={selectedExpedisi === '1,32' ? true : false}
              />
            ))}
        </div>

        <Divider />
        {products && <SectionExpedition products={products} />}
        <div className='p-4'>
          <div className='flex justify-between items-center'>
            <div className='font-medium'>Ringkasan Pesanan</div>
          </div>
          <hr className='my-4 border-gray_r-6' />
          {!cartCheckout ? (
            <div
              role='status'
              class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
            >
              <div class='flex items-center justify-between'>
                <div>
                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                </div>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
              <div class='flex items-center justify-between pt-4'>
                <div>
                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                </div>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
              <div class='flex items-center justify-between pt-4'>
                <div>
                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                </div>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
              <div class='flex items-center justify-between pt-4'>
                <div>
                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                </div>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
              <div class='flex items-center justify-between pt-4'>
                <div>
                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                </div>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
            </div>
          ) : (
            <div className='flex flex-col gap-y-4'>
              <div className='flex gap-x-2 justify-between'>
                <div className='text-gray_r-11'>Total Belanja</div>
                <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
              </div>
              <div className='flex gap-x-2 justify-between'>
                <div className='text-gray_r-11'>Diskon Produk</div>
                <div className='text-danger-500'>
                  - {currencyFormat(cartCheckout?.totalDiscount)}
                </div>
              </div>
              {activeVoucher && (
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Diskon Voucher</div>
                  <div className='text-danger-500'>
                    - {currencyFormat(cartCheckout?.discountVoucher)}
                  </div>
                </div>
              )}
              <div className='flex gap-x-2 justify-between'>
                <div className='text-gray_r-11'>Subtotal</div>
                <div>{currencyFormat(cartCheckout?.subtotal)}</div>
              </div>
              <div className='flex gap-x-2 justify-between'>
                <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
                <div>{currencyFormat(cartCheckout?.tax)}</div>
              </div>
              <div className='flex gap-x-2 justify-between'>
                <div className='text-gray_r-11'>
                  Biaya Kirim{' '}
                  <p className='text-xs mt-1'>
                    {formatShipmentRange(etd, unit, productSla)}
                  </p>
                </div>
                <div>
                  {currencyFormat(
                    Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                  )}
                </div>
              </div>
              {activeVoucherShipping && voucherShippingAmt && (
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Diskon Kirim</div>
                  <div className='text-danger-500'>
                    - {currencyFormat(discShippingAmt)}
                  </div>
                </div>
              )}
            </div>
          )}

          <hr className='my-4 border-gray_r-6' />
          {!cartCheckout ? (
            <div className='flex gap-x-2 justify-between mb-4'>
              <div>
                {' '}
                <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
              </div>
              <div className='font-semibold text-gray_r-12'>
                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
              </div>
            </div>
          ) : (
            <div className='flex gap-x-2 justify-between mb-4'>
              <div>Grand Total</div>
              <div className='font-semibold text-gray_r-12'>
                {currencyFormat(grandTotal)}
              </div>
            </div>
          )}

          <hr className='my-4 border-gray_r-6' />

          <div className='mt-4 mb-4'>
            <button
              type='button'
              onClick={async () => {
                SetBottomPopup(true);
                voucher();
              }}
              className='text-gray-900 p-4 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
            >
              <div className='flex items-center justify-between gap-x-3'>
                <span className='text-left text-gray_r-9'>
                  <Image
                    src={'/images/DISKONICON.svg'}
                    alt={''}
                    className='object-contain object-center h-6 rounded-md'
                  />
                </span>
                {activeVoucher || activeVoucherShipping ? (
                  <div className=''>
                    <div className='text-left text-sm text-black font-semibold'>
                      Potongan Senilai {currencyFormat(totalDiscountVoucher)}
                    </div>
                    <div className='text-left mt-1 text-green-600 text-xs'>
                      Voucher berhasil digunakan
                    </div>
                  </div>
                ) : (
                  <span className='text-left text-sm text-gray_r-9'>
                    Hemat belanja dengan promo
                  </span>
                )}
              </div>

              <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
            </button>
          </div>
          {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
          <p className='text-caption-2 text-gray_r-10 leading-5'>
            Dengan melakukan pembelian melalui website Indoteknik, saya
            menyetujui{' '}
            <Link href='/syarat-ketentuan' className='inline font-normal'>
              Syarat & Ketentuan
            </Link>{' '}
            yang berlaku
          </p>
        </div>

        <Divider />

        <div className='p-4'>
          <div className='font-medium'>Purchase Order</div>

          <div className='mt-4 flex gap-x-3'>
            <div className='w-6/12'>
              <label className='form-label font-normal'>Dokumen PO</label>
              <input
                type='file'
                className='form-input mt-2 h-12'
                accept='image/*,application/pdf'
                ref={poFile}
              />
            </div>
            <div className='w-6/12'>
              <label className='form-label font-normal'>Nomor PO</label>
              <input
                type='text'
                className='form-input mt-2 h-12'
                ref={poNumber}
              />
            </div>
          </div>
          <p className='text-caption-2 text-gray_r-11 mt-2'>
            Ukuran dokumen PO Maksimal 5MB
          </p>
        </div>

        <Divider />

        <div className='flex gap-x-3 p-4'>
          <button
            className='flex-1 btn-yellow'
            onClick={checkout}
            disabled={
              !products ||
              products?.length == 0 ||
              priceCheck ||
              hasNoPrice
            }
          >
            {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
          </button>
        </div>
        {priceCheck && (
          <div className='px-4 mb-4'>
            <span className='text-danger-500'>
              *) Terdapat produk yang belum memiliki harga,{' '}
              <a href={whatsappUrl()} className='underline'>
                Hubungi Kami untuk meminta harga.
              </a>
            </span>
          </div>
        )}
      </MobileView>

      <DesktopView>
        <div className='container mx-auto py-10'>
          {selectedCarrierId == SELF_PICKUP_ID && (
            <div
              class='flex items-center p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300'
              role='alert'
            >
              <svg
                class='flex-shrink-0 inline w-4 h-4 mr-3'
                aria-hidden='true'
                fill='currentColor'
                viewBox='0 0 20 20'
              >
                <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
              </svg>
              <span class='sr-only'>Info</span>
              <div>
                Fitur Self Pickup, hanya berlaku untuk customer di area jakarta.
                Apa bila memilih fitur ini, anda akan dihubungi setelah barang
                siap diambil.
              </div>
            </div>
          )}

          <div className='flex'>
            {' '}
            <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
              {selectedCourierId == SELF_PICKUP_ID && (
                <PickupAddress label='Alamat Pickup' />
              )}
              {selectedCarrierId != SELF_PICKUP_ID && (
                <>
                  {(!selectedAddress?.shipping || !selectedAddress?.invoicing) ? (
                    <div className="p-4 border rounded-xl text-center text-red-600 bg-red-50">
                      <p>⚠️ Anda belum memiliki alamat yang terdaftar.</p>
                      <a
                        href="/my/address?select=shipping"
                        className="mt-2 inline-block px-4 py-2 bg-solid-red text-white rounded-lg"
                      >
                        Tambahkan Alamat
                      </a>
                    </div>
                  ) : (
                    <Skeleton isLoaded minHeight={290}>
                      <SectionAddress
                        address={selectedAddress.shipping}
                        label="Alamat Pengiriman"
                        url="/my/address?select=shipping"
                      />
                      <Divider />
                      <SectionAddress
                        address={selectedAddress.invoicing}
                        label="Alamat Penagihan"
                        url="/my/address?select=invoice"
                      />
                    </Skeleton>
                  )}
                </>
              )}
              {products && <SectionExpedition products={products} />}
              <Divider />
              <SectionValidation address={selectedAddress.invoicing} />
              {/* <SectionExpedisi
                address={selectedAddress.shipping}
                listExpedisi={listExpedisi}
                setSelectedExpedisi={setSelectedExpedisi}
                checkWeigth={checkWeigth}
                checkoutValidation={checkoutValidation}
                expedisiValidation={expedisiValidation}
                loadingRajaOngkir={loadingRajaOngkir}
              />
              <Divider />
              <SectionListService
                listserviceExpedisi={listserviceExpedisi}
                setSelectedServiceType={setSelectedServiceType}
              /> */}

              <div className='p-4'>
                <div className='font-medium mb-6'>Detail Pesanan</div>
                <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
                  {!!products &&
                    snakecaseKeys(products).map((item, index) => (
                      <CartItem
                        key={index}
                        item={item}
                        editable={false}
                        selfPicking={selectedExpedisi === '1,32' ? true : false}
                      />
                    ))}
                </div>
              </div>
            </div>
            <div className='w-1/4 pl-4'>
              <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
                <div className='flex justify-between items-center'>
                  <div className='font-medium'>Ringkasan Pesanan</div>
                  <div className='text-gray_r-11 text-caption-1'>
                    {cartCheckout?.totalWeight.kg} Kg
                  </div>
                </div>

                <hr className='my-4 border-gray_r-6' />
                {!cartCheckout ? (
                  <div
                    role='status'
                    class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
                  >
                    <div class='flex items-center justify-between'>
                      <div>
                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                      </div>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                    <div class='flex items-center justify-between pt-4'>
                      <div>
                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                      </div>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                    <div class='flex items-center justify-between pt-4'>
                      <div>
                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                      </div>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                    <div class='flex items-center justify-between pt-4'>
                      <div>
                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                      </div>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                    <div class='flex items-center justify-between pt-4'>
                      <div>
                        <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                      </div>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                  </div>
                ) : (
                  <div className='flex flex-col gap-y-4'>
                    <div className='flex gap-x-2 justify-between'>
                      <div className='text-gray_r-11'>Total Belanja</div>
                      <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                    </div>
                    <div className='flex gap-x-2 justify-between'>
                      <div className='text-gray_r-11'>Diskon Produk</div>
                      <div className='text-danger-500'>
                        - {currencyFormat(cartCheckout?.totalDiscount)}
                      </div>
                    </div>
                    {activeVoucher && (
                      <div className='flex gap-x-2 justify-between'>
                        <div className='text-gray_r-11'>Diskon Voucher</div>
                        <div className='text-danger-500'>
                          - {currencyFormat(cartCheckout?.discountVoucher)}
                        </div>
                      </div>
                    )}
                    <div className='flex gap-x-2 justify-between'>
                      <div className='text-gray_r-11'>Subtotal</div>
                      <div>{currencyFormat(cartCheckout?.subtotal)}</div>
                    </div>
                    <div className='flex gap-x-2 justify-between'>
                      <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
                      <div>{currencyFormat(cartCheckout?.tax)}</div>
                    </div>
                    <div className='flex gap-x-2 justify-between'>
                      <div className='text-gray_r-11'>
                        Biaya Kirim
                        <p className='text-xs mt-1'>
                          {formatShipmentRange(etd, unit, productSla)}
                        </p>
                      </div>
                      <div>
                        {currencyFormat(
                          Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                        )}
                      </div>
                    </div>
                    {activeVoucherShipping && voucherShippingAmt && (
                      <div className='flex gap-x-2 justify-between'>
                        <div className='text-gray_r-11'>Diskon Kirim</div>
                        <div className='text-danger-500'>
                          - {currencyFormat(discShippingAmt)}
                        </div>
                      </div>
                    )}
                  </div>
                )}

                <hr className='my-4 border-gray_r-6' />
                {!cartCheckout ? (
                  <div className='flex gap-x-2 justify-between mb-4'>
                    <div>
                      {' '}
                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
                    </div>
                    <div className='font-semibold text-gray_r-12'>
                      <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                    </div>
                  </div>
                ) : (
                  <div className='flex gap-x-2 justify-between mb-4'>
                    <div>Grand Total</div>
                    <div className='font-semibold text-gray_r-12'>
                      {currencyFormat(grandTotal)}
                    </div>
                  </div>
                )}

                <hr className='my-4 border-gray_r-6' />

                <div className='mt-4 mb-4'>
                  <button
                    type='button'
                    onClick={() => {
                      SetBottomPopup(true);
                      voucher();
                    }}
                    className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                  >
                    <div className='flex items-center justify-between gap-x-3'>
                      <span className='text-left text-gray_r-9'>
                        <Image
                          src={'/images/DISKONICON.svg'}
                          alt={''}
                          className='object-contain object-center h-6 w-full rounded-md'
                        />
                      </span>
                      {activeVoucher || activeVoucherShipping ? (
                        <div className=''>
                          <div className='text-left text-sm text-black font-semibold'>
                            Hemat {currencyFormat(totalDiscountVoucher)}
                          </div>
                          <div className='text-left mt-1 text-green-600 text-xs'>
                            Voucher berhasil digunakan
                          </div>
                        </div>
                      ) : (
                        <span className='text-left text-sm text-gray_r-9'>
                          Hemat belanja dengan promo
                        </span>
                      )}
                    </div>
                    <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                  </button>
                </div>

                <p className='text-caption-2 text-gray_r-11 leading-5'>
                  Dengan melakukan pembelian melalui website Indoteknik, saya
                  menyetujui{' '}
                  <Link href='/syarat-ketentuan' className='inline font-normal'>
                    Syarat & Ketentuan
                  </Link>{' '}
                  yang berlaku
                </p>

                <hr className='my-4 border-gray_r-6' />

                <div className='font-medium mt-4'>
                  Purchase Order{' '}
                  <span className='font-normal text-gray_r-11'>(Opsional)</span>
                </div>

                <div className='mt-4 flex gap-x-3'>
                  <div className='w-6/12'>
                    <label className='form-label font-normal'>Dokumen PO</label>
                    <input
                      type='file'
                      className='form-input mt-2 h-12'
                      accept='image/*,application/pdf'
                      ref={poFile}
                    />
                  </div>
                  <div className='w-6/12'>
                    <label className='form-label font-normal'>Nomor PO</label>
                    <input
                      type='text'
                      className='form-input mt-2 h-12'
                      ref={poNumber}
                    />
                  </div>
                </div>
                <p className='text-caption-2 text-gray_r-11 mt-2'>
                  Ukuran dokumen PO Maksimal 5MB
                </p>

                <hr className='my-4 border-gray_r-6' />

                <button
                  className='w-full btn-yellow mt-4'
                  onClick={checkout}
                  disabled={
                    !products ||
                    products?.length == 0 ||
                    priceCheck ||
                    hasNoPrice
                  }
                >
                  {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
                </button>
                {priceCheck && (
                  <div className='mt-4'>
                    <span className='text-danger-500'>
                      *) Terdapat produk yang belum memiliki harga,{' '}
                      <a href={whatsappUrl()} className='underline'>
                        Hubungi Kami untuk meminta harga.
                      </a>
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  );
};

const SectionAddress = ({ address, label, url }) => (
  <div className='p-4'>
    <div className='flex justify-between items-center'>
      <div className='font-medium'>{label}</div>
      <Link className='text-caption-1' href={url}>
        Pilih Alamat Lain
      </Link>
    </div>

    {address && (
      <div className='mt-4 text-caption-1'>
        <div className='badge-red mb-2'>
          {address.type.charAt(0).toUpperCase() +
            address.type.slice(1) +
            ' Address'}
        </div>
        <p className='font-medium'>{address.name}</p>
        <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
        <p className='mt-1 text-gray_r-11'>
          {address.street}, {address?.city?.name}
        </p>
        <div className='flex gap-x-2 items-center mt-4 cursor-pointer'>
          <MapPinIcon
            className={
              address.addressMap
                ? `h-6 w-6 text-gray-500`
                : `h-6 w-6 text-red-500`
            }
          />
          {address.addressMap ? (
            <label>Sudah Pinpoint</label>
          ) : (
            <Link href={'/my/address/' + address.id + '/edit'} target='_blank' className='cursor-pointer'>
              <label className='text-red-500 cursor-pointer '>Belum Pinpoint</label>
            </Link>
          )}
        </div>
      </div>
    )}
  </div>
);

const SectionValidation = ({ address }) =>
  address?.stateId == 0 && (
    <BottomPopup active={true} title='Update Alamat'>
      <div className='leading-7 text-gray_r-12/80'>
        Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
      </div>
      <div className='flex justify-center mt-6 gap-x-4'>
        <Link
          className='btn-solid-red w-full md:w-fit text-white'
          href={`/my/address/${address?.id}/edit`}
        >
          Update Alamat
        </Link>
      </div>
    </BottomPopup>
  );

const SectionExpedisi = ({
                           address,
                           listExpedisi,
                           setSelectedExpedisi,
                           checkWeigth,
                           checkoutValidation,
                           expedisiValidation,
                           loadingRajaOngkir,
                         }) =>
  address?.rajaongkirCityId > 0 && (
    <div className='p-4' ref={expedisiValidation}>
      <div className='flex justify-between items-center'>
        <div className='font-medium'>Pilih Ekspedisi: </div>
        <div className='w-[250px]'>
          <div className='flex items-center gap-x-4'>
            <select
              className={`form-input ${
                checkoutValidation ? 'border-red-500 shake' : ''
              }`}
              onChange={(e) => setSelectedExpedisi(e.target.value)}
              required
            >
              <option value='0,0'>Pilih Pengiriman</option>
              <option value='1,32'>SELF PICKUP</option>
              {checkWeigth != true &&
                listExpedisi.map((expedisi) => (
                  <option
                    disabled={checkWeigth}
                    value={expedisi.label + ',' + expedisi.carrierId}
                    key={expedisi.value}
                  >
                    {' '}
                    {expedisi.label.toUpperCase()}{' '}
                  </option>
                ))}
            </select>

            <AnimatePresence>
              {loadingRajaOngkir && (
                <motion.div
                  initial={{ opacity: 0, width: 0 }}
                  animate={{ opacity: 1, width: '28px' }}
                  exit={{ opacity: 0, width: 0 }}
                  transition={{
                    duration: 0.25,
                  }}
                  className='overflow-hidden'
                >
                  <Spinner thickness='3px' speed='0.5s' color='red.500' />
                </motion.div>
              )}
            </AnimatePresence>
          </div>
          {checkoutValidation && (
            <span className='text-sm text-red-500'>
              *silahkan pilih expedisi
            </span>
          )}
        </div>
        <style jsx>{`
            .shake {
                animation: shake 0.4s ease-in-out;
            }
        `}</style>
      </div>
      {checkWeigth == true && (
        <p className='mt-4 text-gray_r-11 leading-6'>
          Mohon maaf, pengiriman hanya tersedia untuk self pickup karena
          terdapat barang yang belum diatur beratnya. Mohon atur berat barang
          dengan menghubungi admin melalui{' '}
          <a
            className='text-danger-500 inline'
            href='https://api.whatsapp.com/send?phone=6281717181922'
          >
            tautan ini
          </a>
        </p>
      )}
    </div>
  );

const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
  listserviceExpedisi?.length > 0 && (
    <>
      <div className='p-4'>
        <div className='flex justify-between items-center'>
          <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
          <div>
            <select
              className='form-input'
              onChange={(e) => setSelectedServiceType(e.target.value)}
            >
              {listserviceExpedisi.map((service) => (
                <option
                  value={
                    service.cost[0].value +
                    ',' +
                    service.description +
                    '-' +
                    service.service +
                    ',' +
                    extractDuration(service.cost[0].etd)
                  }
                  key={service.service}
                >
                  {' '}
                  {service.description} - {service.service.toUpperCase()}
                  {extractDuration(service.cost[0].etd) &&
                    ` (Estimasi Tiba ${extractDuration(
                      service.cost[0].etd
                    )} Hari)`}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
      <Divider />
    </>
  );

function addDays(date, days) {
  const result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

function formatDate(date) {
  const day = date.getDate();
  const month = date.toLocaleString('default', { month: 'short' });
  return `${day} ${month}`;
}

function calculateEstimatedArrival(duration) {
  if (duration) {
    let estimationDate = duration.split('-');
    estimationDate[0] = parseInt(estimationDate[0]);
    estimationDate[1] = parseInt(estimationDate[1]);
    const from = addDays(new Date(), estimationDate[0] + 3);
    const to = addDays(new Date(), estimationDate[1] + 3);

    let etdText = `*Estimasi tiba ${formatDate(from)}`;

    if (estimationDate[1] > estimationDate[0]) {
      etdText += ` - ${formatDate(to)}`;
    }

    return etdText;
  }

  return '';
}

function splitDuration(duration) {
  if (duration) {
    let estimationDate = null;
    if (duration.includes('-')) {
      estimationDate = duration.split('-');
      estimationDate = parseInt(estimationDate[1]);
    } else {
      estimationDate = parseInt(duration);
    }

    return estimationDate;
  }

  return '';
}

const extractDuration = (text) => {
  const matches = text.match(/\d+(?:-\d+)?/g);

  if (matches && matches.length === 1) {
    const parts = matches[0].split('-');
    const min = parseInt(parts[0]);
    const max = parseInt(parts[1]);

    if (min === max) {
      return min.toString();
    }

    return matches[0];
  }

  return '';
};

const PickupAddress = ({ label }) => (
  <div className='p-4'>
    <div className='flex justify-between items-center'>
      <div className='font-medium'>{label}</div>
    </div>
    <div className='mt-4 text-caption-1'>
      <p className='font-medium'>Indoteknik</p>
      <p className='mt-2 mb-2 text-gray_r-11 leading-6'>
        Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec.
        Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta, Indonesia
        Kodepos : 14440
      </p>
      <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
      <p className='mt-1 text-gray_r-11 hover:text-red-500'>
        <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
          Mobile : 0817-1718-1922
        </a>
      </p>
    </div>
  </div>
);

export default Checkout;