"use client";

import { useEffect, useState } from "react";
import { useParams, usePathname } from "next/navigation";
import axios from "@/utils/axios-config";
import { Collapse, message } from "antd";
import Image from "next/image";
import { saveProduct } from "@/store/product/actions";
import { useDispatch } from "react-redux";
import Link from "next/link";
import { LuEye } from "react-icons/lu";
import { IoMdCloseCircle } from "react-icons/io";
import Slider from "react-slick";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";
import { Breadcrumb } from "antd";
import Product from "@/components/product/product";
import { fetchOffersFailure } from "@/store/offer/actions";
import ProductSkeleton from "@/components/skeletons/skeleton";
import { useTranslations, useLocale } from "next-intl";
import { FaCalendarAlt } from "react-icons/fa";
import { SUPPORTED_TEST_RUNNERS_LIST } from "next/dist/cli/next-test";
type offer = {
  id: number;
  title: string;
  image: string;
  free_quantity: number;
  discount_value: number;
  buy_quantity: number;
  discount_type: string;
  type: number;
};

export interface DataType {
  offers: offer[];
  title?: string;
}

type product = {
  id: number;
  image: string;
  name: string;
  sub_category_id: number;
  brand_name: string;
  requires_prescription: number;
  price: string;
  offer_id: null;
  offer_price: string;
  offer_title: string;
  is_favourite: number;
  is_cart: number;
};
const orderSkeleton = (
  <div className="flex justify-between">
    <div className="w-[45%]">
      <div className="w-full h-40 bg-gray-300 rounded-md animate-pulse"></div>
      <div className="w-full h-10 mt-[20px] bg-gray-300 rounded-md animate-pulse"></div>
    </div>
    <div className="w-[45%]">
      <div className="w-full h-40 bg-gray-300 rounded-md animate-pulse"></div>
      <div className="w-full h-10 mt-[20px] bg-gray-300 rounded-md animate-pulse"></div>
    </div>
  </div>
);

export default function OrderDetails() {
  const locale = useLocale();
  const { id } = useParams();

  const [orderDetails, setOrderDetails] = useState<any>({});
  const [loading, setLoading] = useState(true);
  const [viewPrescription, setViewPrescription] = useState(false);
  const [isRemoteShipping, setIsRemoteShipping] = useState(false);
  const [error, setError] = useState("");
  const pathName = usePathname();
  const dispatch = useDispatch();
  const [pagination, setPagination] = useState({
    pageSize: 20,
    totalCount: 0,
    currentPage: 0,
  });
  const t = useTranslations();
  const orderStatusObj: { [key: number]: string } = {
    1: t("pending"),
    2: t("accepted"),
    3: t("away"),
    4: t("completed"),
    5: t("canceled"),
    6: t("rejected"),
    7: t("refuneded"),
  };
  const durationObj: { [key: string]: string } = {
    day: t("day"),
    days: t("days"),
    hour: t("hour"),
    hours: t("hours"),
  };
  const distanceObj: { [key: string]: string } = {
    km: t("km"),
    m: t("m"),
  };
  const formatDateTime = (dateTimeStr: string) => {
    try {
      const date = new Date(dateTimeStr.replace(" ", "T"));

      if (locale === "ar") {
        // Arabic month names
        const arabicMonths = [
          "يناير",
          "فبراير",
          "مارس",
          "أبريل",
          "مايو",
          "يونيو",
          "يوليو",
          "أغسطس",
          "سبتمبر",
          "أكتوبر",
          "نوفمبر",
          "ديسمبر",
        ];

        const day = date.getDate();
        const month = arabicMonths[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const ampm = hours >= 12 ? "م" : "ص";
        const hours12 = hours % 12 || 12;

        // Format: "20 مايو 2025، 1:16 م"
        return `${day} ${month} ${year}، ${hours12}:${minutes
          .toString()
          .padStart(2, "0")} ${ampm}`;
      } else {
        return date.toLocaleString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
          second: "2-digit",
          hour12: true,
        });
      }
    } catch (e) {
      return dateTimeStr;
    }
  };

  function isValidDateTime(datetime: string) {
    const date = new Date(datetime);
    return !isNaN(date.getTime());
  }

  const getDuration = (text: string) => {
    if (!text) return "";

    if (isValidDateTime(text)) {
      return formatDateTime(text);
    } else {
      let duration = "";
      const durationParts = text.split(" ");
      durationParts.forEach((ele) => {
        duration += Object.keys(durationObj).includes(ele)
          ? ` ${durationObj[ele]}`
          : ` ${ele}`;
      });
      return duration.trim();
    }
  };
  const getDistance = (text: string) => {
    if (!text) return "";

    let distance = "";
    const distanceParts = text.split(" ");
    distanceParts.forEach((ele) => {
      distance += Object.keys(distanceObj).includes(ele)
        ? ` ${distanceObj[ele]}`
        : ` ${ele}`;
    });
    return distance.trim();
  };
  const settings = {
    dots: true,

    // customPaging: () => (
    //     <div className="w-10 h-1  mx-auto"></div>
    //   ),
    customPaging: () => (
      <div className="w-10 h-1 bg-gray-200 mx-auto transition-colors duration-300"></div>
    ),
    dotsClass: "slick-dots custom-dots",
    infinite:
      orderDetails?.prescriptions?.length &&
      orderDetails?.prescriptions?.length === 1
        ? false
        : true,
    arrows: false,
    autoplay: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  const fetchOrderData = async () => {
    //   const params: { [key: string]: string | number } = {};
    //   if (typeof pagination.currentPage === "number") {
    //     params.skip = pagination.currentPage * pagination.pageSize;
    //     params.take = pagination.pageSize;
    //   }
    try {
      const response = await axios.get(`/orders/${id}`);

      const data = await response?.data?.data;
      console.log("order details:", data);

      setOrderDetails(data);
      if (data?.is_remote_shipping === 1) {
        setIsRemoteShipping(true);
      }
    } catch (err: any) {
      message.error(err?.message);
    } finally {
      setLoading(false);
    }
  };
  const trackRemoteOrder = async () => {
    //   const params: { [key: string]: string | number } = {};
    //   if (typeof pagination.currentPage === "number") {
    //     params.skip = pagination.currentPage * pagination.pageSize;
    //     params.take = pagination.pageSize;
    //   }
    try {
      const response = await axios.get(`/orders/${id}/track`);

      // const data = await response?.data?.data;
      // setOrderDetails(data);
      fetchOrderData();
    } catch (err: any) {
      //message.error(err?.message);
    } finally {
    }
  };
  useEffect(() => {
    if (!id) return;

    fetchOrderData();
  }, [id]);
  useEffect(() => {
    if (isRemoteShipping) {
      trackRemoteOrder();
    }
  }, [isRemoteShipping]);
  const offerDiscreption = (
    buyQuantity: number,
    freeQuantity: number,
    discountType: number,
    discountValue: number,
  ) => {
    return (
      <>
        {freeQuantity === 0 ? (
          <div
            className={`${
              locale === "en" ? "flex-row-reverse" : "flex-row"
            } flex items-center`}
          >
            <span className={`${locale === "en" ? "ms-2" : "me-2"}`}>
              {t("off")}
            </span>

            {discountValue}
            {discountType === 1 ? (
              <Image
                src={"/images/ryial.svg"}
                alt="currancy icon"
                width={12}
                height={12}
                className="ms-1"
              />
            ) : (
              "%"
            )}
          </div>
        ) : discountValue === 100 && discountType === 2 ? (
          ` ${buyQuantity} + ${freeQuantity} ${t("for-free")}`
        ) : (
          <>
            {/* {t("buy")} {buyQuantity} + {freeQuantity} {t("and-get")} */}
            <>
              {" "}
              <span className="ps-[2px]">{discountValue}</span>
              {discountType === 1 ? (
                <Image
                  src={"/images/currancy-white.svg"}
                  alt="currency icon"
                  width={15}
                  height={15}
                  className="inline"
                />
              ) : (
                "%"
              )}{" "}
              {Number(buyQuantity) === 1
                ? t("off-on-second-item")
                : t("off-on-third-item")}
            </>
          </>
        )}
      </>
    );
  };
  if (!id) return <p>Loading...</p>;

  return (
    <>
      {loading ? (
        // <orderSkeleton />
        orderSkeleton
      ) : (
        <>
          <div className="min-h-[50px] p-4 w-full bg-gray-100">
            <Breadcrumb
              items={[
                {
                  href: "",
                  title: (
                    <Link href={`/${locale}/`} locale={false}>
                      <HomeOutlined className="text-gray-500 mx-1" />
                      <span className="text-gray-500 !font-semibold">
                        {t("home")}
                      </span>
                    </Link>
                  ),
                },
                {
                  href: "",
                  title: (
                    <>
                      <Link
                        href={`/${locale}/orders`}
                        className="!text-gray-500 !font-semibold"
                      >
                        {t("my-orders")}
                      </Link>
                    </>
                  ),
                },
                {
                  title: (
                    <span className="text-primary !font-semibold">
                      {t("order-details")}
                    </span>
                  ),
                },
              ]}
            />
          </div>
          <div className="bg-[#F1FBFF] w-full p-6 mb-6">
            <p className="pb-[40px] text-center text-[16px] md:text-[18px] font-[600]">
              {t("order-history")}
            </p>
            <div className="flex justify-center items-center order-status">
              <div className="flex flex-col self-stretch min-h-[100px] w-[70px] sm:w-[96px] justify-start items-center gap-2 bg-primary rounded-sm py-2 px-4">
                <div
                  className={`bg-white flex justify-center items-center rounded-[50%] p-2   w-[30px] h-[30px]`}
                >
                  <Image
                    src={"/images/check-icon.svg"}
                    width={20}
                    height={20}
                    alt="icon"
                  />
                </div>
                <p className={`text-white text-[14px] text-center`}>
                  {t("ordered")}
                </p>
              </div>
              <div
                className={`h-[2px] w-[20px] sm:w-[50px] ${
                  orderDetails?.status === 1 || orderDetails?.status === 5
                    ? "bg-gray-300"
                    : "bg-primary"
                } `}
              ></div>
              <div
                className={`flex flex-col self-stretch min-h-[100px] w-[70px] sm:w-[96px] justify-start items-center gap-2  rounded-sm py-2 px-4 ${
                  orderDetails?.status === 1
                    ? "bg-white"
                    : orderDetails?.status === 5
                      ? "bg-custom-red"
                      : "bg-primary"
                }`}
              >
                <div
                  className={`${
                    orderDetails?.status === 1 ? "bg-primary" : "bg-white"
                  } flex justify-center items-center rounded-[50%] p-2   w-[30px] h-[30px]`}
                >
                  {orderDetails?.status === 5 ? (
                    <Image
                      src={"/images/x-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  ) : orderDetails?.status === 1 ? (
                    <p className={`text-white`}>2</p>
                  ) : (
                    <Image
                      src={"/images/check-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  )}
                </div>
                <p
                  className={`${
                    orderDetails?.status === 1 ? "text-primary" : "text-white"
                  } text-[14px] text-center`}
                >
                  {orderDetails?.delivery_method === 1
                    ? t("ready-for-pickup")
                    : t("ready")}
                </p>
              </div>
              <div
                className={`h-[2px] w-[20px] sm:w-[50px] ${
                  orderDetails?.status === 3 ||
                  orderDetails?.status === 4 ||
                  orderDetails?.status === 7
                    ? "bg-primary"
                    : "bg-gray-300"
                } `}
              ></div>
              <div
                className={`flex flex-col self-stretch py-2 px-4 min-h-[100px] w-[70px] sm:w-[96px] justify-start items-center gap-2  rounded-sm ${
                  orderDetails?.status === 4 ||
                  orderDetails?.status === 3 ||
                  orderDetails?.status === 7
                    ? "bg-primary"
                    : orderDetails?.status === 5 || orderDetails?.status === 6
                      ? "bg-custom-red"
                      : "bg-white"
                }`}
              >
                <div
                  className={`${
                    orderDetails?.status === 1 || orderDetails?.status === 2
                      ? "bg-primary"
                      : "bg-white"
                  } flex justify-center items-center rounded-[50%] p-2   w-[30px] h-[30px]`}
                >
                  {orderDetails?.status === 4 ||
                  orderDetails?.status === 3 ||
                  orderDetails?.status === 7 ? (
                    <Image
                      src={"/images/check-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  ) : orderDetails?.status === 5 ||
                    orderDetails?.status === 6 ? (
                    <Image
                      src={"/images/x-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  ) : (
                    <p className={`text-white`}>3</p>
                  )}
                </div>
                <p
                  className={`text-primary text-[14px] text-center ${
                    orderDetails?.status === 1 || orderDetails?.status === 2
                      ? "text-primary"
                      : "text-white"
                  }`}
                >
                  {orderDetails?.delivery_method === 1
                    ? t("awaiting-pickup")
                    : t("inshipping")}
                </p>
              </div>
              <div
                className={`h-[2px] w-[20px] sm:w-[50px] ${
                  orderDetails?.status === 4 ? "bg-primary" : "bg-gray-300"
                } `}
              ></div>
              <div
                className={`flex flex-col self-stretch py-2 px-4 min-h-[100px] w-[70px] sm:w-[96px] justify-start items-center gap-2  rounded-sm ${
                  orderDetails?.status === 4
                    ? "bg-primary"
                    : orderDetails?.status === 5 ||
                        orderDetails?.status === 6 ||
                        orderDetails?.status === 7
                      ? "bg-custom-red"
                      : "bg-white"
                }`}
              >
                <div
                  className={`${
                    orderDetails?.status === 1 ||
                    orderDetails?.status === 2 ||
                    orderDetails?.status === 3
                      ? "bg-primary"
                      : "bg-white"
                  } flex justify-center items-center rounded-[50%] p-2  text-white w-[30px] h-[30px]`}
                >
                  {orderDetails?.status === 4 ? (
                    <Image
                      src={"/images/check-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  ) : orderDetails?.status === 5 ||
                    orderDetails?.status === 6 ||
                    orderDetails?.status === 7 ? (
                    <Image
                      src={"/images/x-icon.svg"}
                      width={20}
                      height={20}
                      alt="icon"
                    />
                  ) : (
                    <p className="text-white">4</p>
                  )}
                </div>
                <p
                  className={`text-primary text-[14px] text-center ${
                    orderDetails?.status === 1 ||
                    orderDetails?.status === 2 ||
                    orderDetails?.status === 3
                      ? "text-primary"
                      : "text-white"
                  }`}
                >
                  {orderDetails?.delivery_method === 1
                    ? t("picked-up")
                    : t("delivered")}
                </p>
              </div>
            </div>
          </div>
          <div className="container mx-auto px-4  p-6">
            <div className="">
              <div>
                <div className="flex  flex-wrap  justify-between">
                  <div className="w-full lg:w-[calc(50%-10px)]">
                    {(orderDetails?.delivery_method === 2 &&
                      (orderDetails?.duration || orderDetails?.distance) &&
                      orderDetails?.is_remote_shipping === 1) && (
                        <div className="flex flex-wrap justify-between items-center border-solid border-[1px] border-gray-300 rounded-[10px] mb-3 p-4">
                          <p className="font-semibold text-secondary me-2 text-[18px]">
                            {t("delivering-date")}:
                          </p>
                          <div className="flex items-center gap-2 bg-[#d9fffb] justify-center rounded-[5px] py-1 px-2">
                            <div className="flex items-center justify-center ">
                              <Image
                                src={"/images/time.svg"}
                                alt="time icon"
                                width={16}
                                height={16}
                              />
                              <p className="rounded-[5px] p-1 text-center ">
                                {t("within-three-five-days")}
                              </p>
                            </div>
                          </div>
                        </div>
                      )}
                    {(orderDetails?.delivery_method === 2 &&
                      (orderDetails?.duration || orderDetails?.distance) &&
                      orderDetails?.is_remote_shipping === 0) && (
                        <div className="flex flex-wrap justify-between items-center border-solid border-[1px] border-gray-300 rounded-[10px] mb-3 p-4">
                          <p className="font-semibold text-secondary me-2 text-[18px]">
                            {t("delivering-date")}:
                          </p>

                          <div className="flex items-center justify-center ">
                            <Image
                              src={"/images/time.svg"}
                              alt="time icon"
                              width={16}
                              height={16}
                            />
                            <p className="rounded-[5px] p-1 text-gray-500 text-center">
                              {t("within-two-hours")}
                            </p>
                          </div>
                        </div>
                      )}
                    {(orderDetails?.delivery_method === 1 ||
                      ((orderDetails?.duration || orderDetails?.distance) &&
                        orderDetails?.is_remote_shipping === 0)) && (
                          <div className="flex flex-wrap justify-between items-center border-solid border-[1px] border-gray-300 rounded-[10px] mb-3 p-4">
                            <p className="font-semibold text-secondary me-2 text-[18px]">
                              {t("distance")}:
                            </p>

                            <div className="flex items-center justify-center ">
                              <Image
                                src={"/images/time.svg"}
                                alt="time icon"
                                width={16}
                                height={16}
                              />
                              <p className="rounded-[5px] p-1 text-gray-500 text-center">
                                {getDistance(orderDetails?.distance)}
                              </p>
                            </div>
                          </div>
                        )}
                    <div className="border-solid border-[1px] border-gray-300 rounded-[10px]  p-4">
                      <div className="flex justify-between items-center py-2">
                        <p className="text-[16px] md:text-[18px] font-semibold">
                          <span className="text-[#EBAB0F]">#</span>
                          {orderDetails?.id}
                        </p>
                        {/* <button className="py-1 px-3 font-semibold flex justify-center items-center rounded-[5px] border-solid border-[1px] border-primary text-primary">
                            <TbArrowForwardUp className="me-1 text-[20px]" /> {t("return")}
                          </button> */}
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <p className="text-[15px] md:text-[16px] font-semibold text-primary">
                          {t("total")}
                        </p>
                        {/* <p className="text-[15px] md:text-[16px] font-semibold text-primary">
                    {(+orderDetails?.total_price).toFixed(2)}
                    <sup className="mx-1"><Image
                                                              src={"/images/ryial.svg"}
                                                              alt="currancy icon"
                                                              width={22}
                                                              height={22}
                                                            /></sup>
                  </p> */}
                        <p className="text-[18px] md:text-[20px] text-primary text-center">
                          {Number(orderDetails?.total_price).toFixed(2)}
                          <sup className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </sup>
                          {/* {t("sar")} */}
                        </p>
                      </div>
                      <div className="flex justify-between items-center py-2">
                        <p className="text-[15px] md:text-[16px] font-semibold flex items-center text-gray-500">
                          <FaCalendarAlt className="text-gray-400 text-[16px] me-1" />{" "}
                          {orderDetails?.date}
                        </p>
                        <p
                          className={`text-[14px] md:text-[16px] py-1 px-2 ${
                            orderDetails?.status === 2 ||
                            orderDetails?.status === 4
                              ? "bg-[#d9fffb] text-primary"
                              : "bg-[#FFF6E1] text-[#EBAB0F]"
                          }  rounded-[5px]`}
                        >
                          {orderStatusObj[orderDetails?.status]}
                        </p>
                      </div>
                      {/* <hr className="text-gray-300 w-full my-4" /> */}
                      {/* <div className="flex justify-center items-center">
                              <button onClick={()=>router.push(`/${locale}/orders/${item.id}`)} className="!text-primary !bg-white border-solid border-[1px] !border-primary !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] w-[48%]  !rounded-[12px]">
                                {t("view-order")}{" "}
                              </button>
                              {ordersType === "history" && item?.status === 4 && (
                                <button className="!text-white !bg-primary !border-none !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] w-[48%]  !rounded-[12px]">
                                  {t("refund")}
                                </button>
                              )}
                              {ordersType === "in_progress" && item?.status === 1 && (
                              <button
                                className="!text-custom-red !bg-white border-solid border-[1px] !border-custom-red !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] w-[48%]  !rounded-[12px]"
                                onClick={() => {
                                  setOrderId(item.id)
                                  setCancelOrderOpen(true)}}
                              >
                                {t("cancel-order")}
                              </button>
                               )} 
                              {((item?.payment_method == 2 || item?.payment_method == 1) && item?.payment_status == 1)
                                && (
                                  <button
                                    className="!bg-primary !text-white border-solid border-[1px]  !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] w-[48%]  !rounded-[12px]"
                                    onClick={() => checkoutFunc(item.id)}
                                  >
                                    {t("complete-order")}
                                  </button>
                                )}
                            </div> */}
                    </div>
                    <div className="flex flex-wrap items-center border-solid border-[1px] border-gray-300 rounded-[10px] my-3 p-4">
                      <p className="font-semibold text-secondary me-2 text-[18px]">
                        {t("delivering-method")}:
                      </p>
                      <p>
                        {orderDetails?.delivery_method === 1
                          ? t("pharmacy-pickup")
                          : t("home-delivery")}
                      </p>
                    </div>
                    {orderDetails?.refund_reason && (
                      <div className="flex flex-wrap items-center border-solid border-[1px] border-gray-300 rounded-[10px] my-3 p-4">
                        <p className="font-semibold text-secondary me-2 text-[18px]">
                          {t("refund_reason")}:
                        </p>
                        <p>{orderDetails?.refund_reason}</p>
                      </div>
                    )}
                    {orderDetails?.reject_reason && (
                      <div className="flex flex-wrap items-center border-solid border-[1px] border-gray-300 rounded-[10px] my-3 p-4">
                        <p className="font-semibold text-secondary me-2 text-[18px]">
                          {t("reject_reason")}:
                        </p>
                        <p>{orderDetails?.reject_reason}</p>
                      </div>
                    )}
                    {orderDetails?.has_prescription === 1 && (
                      <div className="flex flex-wrap justify-between items-center border-solid border-[1px] border-gray-300 rounded-[10px] my-3 p-4">
                        <p className="font-semibold text-secondary me-2 text-[18px]">
                          {t("prescription-s")}:
                        </p>
                        <div
                          className="relative cursor-pointer flex items-center gap-2 w-fit py-1 px-2 bg-gray-200 rounded-md"
                          onClick={() => setViewPrescription(true)}
                        >
                          <LuEye className="text-[20px] text-gray-500" />
                          {t("view-prescription")}
                        </div>
                      </div>
                    )}
                    {viewPrescription && (
                      <div className="fixed bg-gray-800/70  top-0 left-0 w-full h-full flex justify-center items-center z-[999]">
                        <IoMdCloseCircle
                          className="absolute top-[50px] text-[30px] md:text-[50px] right-[20px] md:right-[50px] text-primary cursor-pointer"
                          onClick={() => setViewPrescription(false)}
                        />
                        <div className="slider-container flex justify-center items-center w-[90%] sm:w-[60%] rounded-md bg-white z-[99999]   md:w-[40%] relative">
                          <Slider
                            {...settings}
                            className="w-[200px] h-[400px] sm:w-[250px] md:h-[400px] lg:h-[500px] lg:w-[350px] p-4"
                          >
                            {orderDetails?.prescriptions?.map(
                              (item: any, index: number) => (
                                <div key={index} className="relative w-full aspect-[1/1] ">
                                  {/* // <img
                                //   key={item?.url}
                                //   src={item?.url}
                                //   className="max-w-full max-h-[90%] object-cover"
                                // /> */}

                                  <Image
                                    src={item?.url}
                                    alt="prescription"
                                    // width={200}
                                    // height={250}
                                    //           fill
                                    sizes="100vw"
                                    fill
                                    // style={{aspectRatio: "1/1"}}
                                    //className="object-contain "
                                  />
                                </div>
                              ),
                            )}
                          </Slider>
                        </div>
                      </div>
                    )}
                    {/* {orderDetails?.prescriptions?.length > 0 && (
                <Collapse
                  items={[
                    {
                      key: "1",
                      label: (
                        <p className="font-semibold text-secondary  md:text-[18px]">
                          {t("prescriptions")}
                        </p>
                      ),
                      children: (
                        <div className="max-h-[400px] p-4 overflow-y-auto flex flex-wrap">
                          {orderDetails?.prescriptions.map(
                            (prescription: any) => (
                              <div className="m-2">
                                <Image
                                  src={prescription?.url}
                                  width={200}
                                  height={200}
                                  alt="image"
                                />
                              </div>
                            )
                          )}
                        </div>
                      ),
                    },
                  ]}
                />
              )} */}
                    <div className="rounded-[10px] my-4 border-solid border-[1px] border-primary bg-custom-gradient p-4">
                      <div className="py-2 flex  items-center border-solid border-b-[1px] border-gray-200">
                        <p className="font-semibold">{t("your-location")}</p>
                      </div>
                      <p className="text-[16] font-[400] text-[#424242]  mb-[10px]">
                        <strong>{t("governate")}:</strong>{" "}
                        {orderDetails?.address?.governorate}
                      </p>
                      <p className="text-[16] font-[400] text-[#424242]  mb-[10px]">
                        <strong>{t("city")}:</strong>{" "}
                        {orderDetails?.address?.city}
                      </p>
                      <p className="text-[16] font-[400] text-[#424242]  mb-[10px]">
                        <strong>{t("address")}:</strong>{" "}
                        {orderDetails?.address?.address}
                      </p>
                      <p className="text-[16] font-[400] text-[#424242]  mb-[10px]">
                        <strong>{t("branch")}:</strong>{" "}
                        {orderDetails?.branch?.name}
                      </p>
                    </div>
                  </div>
                  <div className="w-full lg:w-[calc(50%-10px)]">
                    <div className="rounded-[10px] bg-custom-gradient mb-4 p-2 border-solid border-[1px] border-primary">
                      <p className="py-2 text-third text-[18px] md:text-[24px]">
                        {t("order-items")}
                      </p>
                    </div>
                    <div>
                      {orderDetails?.products?.map((item: any, index: any) => (
                        <div
                          key={index}
                          className="cart-product flex justify-between items-center py-4 border-solid border-b-[1px] border-gray-300"
                        >
                          <div className="flex items-center justify-start ">
                            <div className="text-custom-red text-[16px]">
                              {item?.quantity}
                            </div>
                            <span className="text-custom-red text-[13px]">
                              x
                            </span>
                            <div
                              className="relative p-2 w-[80px]  bg-[#F1FBFF]"
                              onClick={() => dispatch(saveProduct(item))}
                            >
                              {/* <img
                                src={item?.image}
                                className="h-[80px] w-[95%]  mx-auto "
                              /> */}
                              <Image
                                src={item?.image}
                                width={75}
                                height={80}
                                alt=""
                                loading="lazy"
                              />
                              <Link
                                href={`/${locale}/products/${(item?.name)
                                  .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                                  .replace(/^-+|-+$/g, "")
                                  .toLowerCase()}?id=${item.id}`}
                                locale={false}
                                className="absolute w-full  h-full top-0 left-0 z-[40] "
                              ></Link>
                            </div>

                            <div className="px-2 w-[calc(100%-90px)]">
                              {item?.offer_title && (
                                <p className=" z-[40] flex gap-1 items-center justify-center flex-wrap  bg-red-500 text-white py-1 rounded-e-full text-[12px]   px-1 text-wrap opacity-80 w-fit">
                                  {/* <span>{item?.offer_title}</span>
                                  {item?.offer_discount_value ? (
                                    <span className="flex items-center font-medium  rounded-full   text-center   ">
                                      {item?.offer_discount_value}{" "}
                                      {item?.offer_discount_type === 1 ? (
                                        <Image
                                          src={"/images/ryial.svg"}
                                          alt="currancy icon"
                                          width={12}
                                          height={12}
                                          className="ms-1"
                                        />
                                      ) : (
                                        "%"
                                      )}{" "}
                                    </span>
                                  ) : null} */}
                                  {offerDiscreption(
                                    item?.offer_buy_quantity,
                                    item?.offer_free_quantity,
                                    item?.offer_discount_type,
                                    item?.offer_discount_value,
                                  )}
                                </p>
                              )}
                              <div
                                className="relative"
                                onClick={() => dispatch(saveProduct(item))}
                              >
                                <Link
                                  href={`/${locale}/products/${(item?.name)
                                    .replace(/[^a-zA-Z0-9\u0600-\u06FF]+/g, "-")
                                    .replace(/^-+|-+$/g, "")
                                    .toLowerCase()}?id=${item.id}`}
                                  locale={false}
                                  className="absolute w-full  h-full top-0 left-0 z-[40] "
                                ></Link>
                                <p>{item?.name}</p>
                              </div>
                              <p>{item?.specifications}</p>
                            </div>
                          </div>

                          <div className="flex flex-wrap py-2 w-fit md:w-[80px] lg:w-fit">
                            {item?.offer_price &&
                              Number(item?.offer_price) <
                                Number(item?.price) && (
                                <div className="flex items-center">
                                  <p className="text-primary  md:text-[20px] ms-1">
                                    {" "}
                                    {item?.offer_price}{" "}
                                  </p>
                                  <sup>
                                    <Image
                                      src={"/images/ryial.svg"}
                                      alt="currancy icon"
                                      width={12}
                                      height={12}
                                      className="ms-1"
                                    />
                                  </sup>
                                </div>
                              )}
                            <div className="flex items-center">
                              <p
                                className={`${
                                  item?.offer_price &&
                                  Number(item?.offer_price) <
                                    Number(item?.price)
                                    ? "line-through text-gray-400"
                                    : "text-primary"
                                }   md:text-[20px] ms-1`}
                              >
                                {" "}
                                {item?.price}{" "}
                              </p>
                              <sup>
                                <Image
                                  src={"/images/ryial.svg"}
                                  alt="currancy icon"
                                  width={12}
                                  height={12}
                                  className="ms-1"
                                />
                              </sup>
                            </div>
                          </div>
                          {item?.requires_prescription === 1 && (
                            <div className="flex w-fit items-center justify-center  gap-1 px-2 py-1  h-fit bg-[#FBC43A] text-white rounded-[5px]">
                              <Image
                                src={"/images/prescription-icon.svg"}
                                alt="prescription icon"
                                width={18}
                                height={18}
                              />
                              <p className="text-[12px] px-1 text-nowrap">
                                {t("prescription")}
                              </p>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>

                    {/**** Cart Summary ****/}
                    <div className="bg-custom-gradient border-[1px] border-solid border-primary rounded-[10px] p-4 mt-2">
                      <div className="f py-1">
                        <p className="font-semibold text-[18px] md:text-[20px] py-2 text-primary">
                          {t("shopping-cart-summary")}
                        </p>
                      </div>
                      <div className="flex justify-between items-center py-1">
                        <p className="font-semibold max-w-[225px] sm:max-w-full">
                          {t("subtotal-exc-vat")}
                        </p>
                        <div className="flex items-center">
                          <p className="text-gray-600 text-[17px] font-semibold">
                            {Number(orderDetails?.initial_price).toFixed(2)}
                          </p>
                          <span className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center py-1">
                        <p className="font-semibold max-w-[225px] sm:max-w-full">
                          {t("subtotal-incl-vat")}
                        </p>
                        <div className="flex items-center">
                          <p className="text-gray-600 text-[17px] font-semibold">
                            {(
                              Number(orderDetails?.initial_price) +
                              Number(orderDetails?.tax)
                            ).toFixed(2)}
                            {/* {t("sar")} */}{" "}
                          </p>
                          <span className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        </div>
                      </div>

                      <div className="flex justify-between items-center py-1">
                        <p className="font-semibold max-w-[225px] sm:max-w-full">
                          {t("vat-value")}
                        </p>
                        <div className="flex items-center">
                          <p className="text-gray-600 text-[17px] font-semibold">
                            {Number(orderDetails?.tax).toFixed(2)}
                          </p>
                          <span className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        </div>
                      </div>
                      {orderDetails?.delivery_method === 2 && (
                        <>
                          <div className="flex justify-between items-center py-1">
                            <p className="font-semibold max-w-[225px] sm:max-w-full">
                              {t("total-shipping")}
                            </p>
                            <div className="flex items-center">
                              <p className="text-gray-600 text-[17px] font-semibold">
                                {Number(orderDetails?.shipping_price).toFixed(
                                  2,
                                )}
                              </p>
                              <span className="inline-block ">
                                <Image
                                  src={"/images/ryial.svg"}
                                  alt="currancy icon"
                                  width={12}
                                  height={1}
                                  className="ms-1"
                                />
                              </span>
                            </div>
                          </div>
                          <div className="flex justify-between items-center py-1">
                            <p className="font-semibold max-w-[225px] sm:max-w-full">
                              {t("shipping-vat")}
                            </p>
                            <div className="flex items-center">
                              <p className="text-gray-600 text-[17px] font-semibold">
                                {Number(
                                  orderDetails?.tax_shipping_price,
                                ).toFixed(2)}
                              </p>
                              <span className="inline-block ">
                                <Image
                                  src={"/images/ryial.svg"}
                                  alt="currancy icon"
                                  width={12}
                                  height={12}
                                  className="ms-1"
                                />
                              </span>
                            </div>
                          </div>
                        </>
                      )}

                      {orderDetails?.delivery_method === 2 &&
                        orderDetails?.payment_method === 3 && (
                          <>
                            <div className="flex justify-between items-center py-1">
                              <p className="font-semibold max-w-[225px] sm:max-w-full">
                                {t("cash-on-delivery")}
                              </p>
                              <div className="flex items-center">
                                <p className="text-gray-600 text-[17px] font-semibold">
                                  {Number(
                                    orderDetails?.cash_delivery_fee,
                                  ).toFixed(2)}
                                </p>
                                <span className="inline-block ">
                                  <Image
                                    src={"/images/ryial.svg"}
                                    alt="currancy icon"
                                    width={12}
                                    height={12}
                                    className="ms-1"
                                  />
                                </span>
                              </div>
                            </div>
                            <div className="flex justify-between items-center py-1">
                              <p className="font-semibold max-w-[225px] sm:max-w-full">
                                {t("cash-on-delivery-vat")}
                              </p>
                              <div className="flex items-center">
                                <p className="text-gray-600 text-[17px] font-semibold">
                                  {Number(
                                    orderDetails?.tax_cash_delivery_fee,
                                  ).toFixed(2)}
                                </p>
                                <span className="inline-block ">
                                  <Image
                                    src={"/images/ryial.svg"}
                                    alt="currancy icon"
                                    width={12}
                                    height={12}
                                    className="ms-1"
                                  />
                                </span>
                              </div>
                            </div>
                          </>
                        )}
                      <div className="flex justify-between items-center py-1">
                        <p className="font-semibold max-w-[225px] sm:max-w-full">
                          {t("discount")}
                        </p>
                        <div className="flex items-center">
                          <p
                            className={`text-gray-600 text-[17px] font-semibold`}
                          >
                            {Number(orderDetails?.coupon_price).toFixed(2)}
                          </p>
                          <span className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center py-4 border-solid border-t-[1px]">
                        <p className="font-semibold max-w-[225px] sm:max-w-full">
                          {t("total-price")}
                        </p>
                        <div className="flex items-center">
                          <p className="font-semibold text-[17px]">
                            {Number(orderDetails?.total_price).toFixed(2)}
                          </p>
                          <span className="inline-block ">
                            <Image
                              src={"/images/ryial.svg"}
                              alt="currancy icon"
                              width={12}
                              height={12}
                              className="ms-1"
                            />
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
}