mediahub-fe/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import React, { useEffect, useState } from "react";
import { format } from "date-fns";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  detailSchedule,
  listSchedule,
  listScheduleNextPublic,
  listSchedulePrevPublic,
  listScheduleTodayPublic,
  searchSchedules,
} from "@/service/schedule/schedule";
import { usePathname, useRouter } from "@/i18n/routing";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import { Input } from "@/components/ui/input";
import { getUserLevelForAssignments } from "@/service/task";
import { useParams } from "next/navigation";

const timeList = [
  {
    id: "6",
    time: "06:00",
  },
  {
    id: "7",
    time: "07:00",
  },
  {
    id: "8",
    time: "08:00",
  },
  {
    id: "9",
    time: "09:00",
  },
  {
    id: "10",
    time: "10:00",
  },
  {
    id: "11",
    time: "11:00",
  },
  {
    id: "12",
    time: "12:00",
  },
  {
    id: "13",
    time: "13:00",
  },
  {
    id: "14",
    time: "14:00",
  },
  {
    id: "15",
    time: "15:00",
  },
  {
    id: "16",
    time: "16:00",
  },
  {
    id: "17",
    time: "17:00",
  },
  {
    id: "18",
    time: "18:00",
  },
  {
    id: "19",
    time: "19:00",
  },
  {
    id: "20",
    time: "20:00",
  },
  {
    id: "21",
    time: "21:00",
  },
  {
    id: "22",
    time: "22:00",
  },
  {
    id: "23",
    time: "23:00",
  },
  {
    id: "24",
    time: "24:00",
  },
  {
    id: "1",
    time: "01:00",
  },
  {
    id: "2",
    time: "02:00",
  },
  {
    id: "3",
    time: "03:00",
  },
  {
    id: "4",
    time: "04:00",
  },
  {
    id: "5",
    time: "05:00",
  },
];

const Schedule = (props: any) => {
  const router = useRouter();
  const asPath = usePathname();
  const [startDate, setStartDate] = useState<Date | undefined>(new Date());
  const [dateAWeek, setDateAWeek] = useState<string[]>([]);
  const [todayList, setTodayList] = useState([]);
  const [prevdayList, setPrevdayList] = useState([]);
  const [nextdayList, setNextdayList] = useState([]);
  const [schedules, setSchedules] = useState([]);
  const [openDialog, setOpenDialog] = useState(false);
  const [detail, setDetail] = useState<any>();
  const [content, setContent] = useState();
  const { id } = props;
  const t = useTranslations("LandingPage");
  const [search, setSearch] = useState<any>();
  const [scheduleSearch, setScheduleSearch] = useState<any>();
  let typingTimer: any;
  const doneTypingInterval = 1500;
  const [regionFilter, setRegionFilter] = useState<any>([]);
  const [regionName, setRegionName] = useState<any>([]);
  const isPolda = asPath.includes("/polda");
  const userId = getCookiesDecrypt("uie");

  async function doneTyping() {
    if (search?.length > 2) {
      const resSchedule = await searchSchedules(search);
      setScheduleSearch(resSchedule.data?.data);
    } else {
      setScheduleSearch([]);
    }
  }

  const handleKeyUp = () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
  };

  const handleKeyDown = () => {
    clearTimeout(typingTimer);
  };

  useEffect(() => {
    async function getDataSchedule() {
      const response = await detailSchedule(id);
      setDetail(response?.data?.data);
      setContent(response?.data?.data?.files);
    }

    getDataSchedule();
  }, [id]);

  useEffect(() => {
    async function initState() {
      const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
      const resSchedule = await listSchedule(group);
      setSchedules(resSchedule.data?.data);
      console.log(resSchedule);
      setDateAWeek(dateList);
      getDataByDate(); // let today = new Date();
      // if (!dateList.includes(today.getDate())){
      //   changeNextWeek();
      // }
      console.log("GROUP", group);
    }

    initState();
  }, []);

  async function getDataByDate() {
    const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
    const resToday = await listScheduleTodayPublic(group as string);
    const today = resToday.data?.data;
    
    setTodayList(today);
    const resNext = await listScheduleNextPublic(group as string);
    const next = resNext.data?.data;

    setNextdayList(next);
    const resPrev = await listSchedulePrevPublic(group as string);
    const prev = resPrev.data?.data;

    setPrevdayList(prev);
  }

  const curr = new Date();
  const startDays = (curr.getDay() + 7 - 1) % 7;

  curr.setDate(curr.getDate() - startDays);
  const dateListInit = [];
  curr.setDate(curr.getDate() - curr.getDay() + 1);
  for (let i = 0; i < 7; i++) {
    dateListInit.push(new Date(curr).toISOString().slice(0, 10));
    curr.setDate(curr.getDate() + 1);
  }
  const [dateList, setDateList] = useState<string[]>(dateListInit);

  const handleChangeDate = (date: Date | undefined) => {
    setStartDate(date);
    const dateListTemp = [];
    const curr = date;
    if (curr) {
      const startDays = (curr.getDay() + 7 - 1) % 7;

      curr.setDate(curr.getDate() - startDays);
      curr.setDate(curr.getDate() - curr.getDay() + 1);
      for (let i = 0; i < 7; i++) {
        dateListTemp.push(new Date(curr).toISOString().slice(0, 10));
        curr.setDate(curr.getDate() + 1);
      }

      console.log("Change Date :", dateListTemp);
      setDateList(dateListTemp);
      setDateAWeek(dateListTemp);
    }
  };

  function getLastWeek(today: Date | undefined) {
    if (today) {
      return new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() - 7
      );
    }
  }

  function getNextWeek(today: Date | undefined) {
    if (today) {
      return new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + 7
      );
    }
  }

  const changeNextWeek = () => {
    console.log("Today :", startDate);
    const dayInNextWeek = getNextWeek(startDate);
    console.log("Next week :", dayInNextWeek);
    const dateListTemp = [];
    const curr = dayInNextWeek;
    if (curr) {
      const startDays = (curr.getDay() + 7 - 1) % 7;

      curr.setDate(curr.getDate() - startDays);
      curr.setDate(curr.getDate() - curr.getDay() + 1);
      for (let i = 0; i < 7; i++) {
        const newDate = new Date(curr);

        if (i == 0) {
          setStartDate(newDate);
        }

        const dateFormatter = Intl.DateTimeFormat("sv-SE");
        dateListTemp.push(dateFormatter.format(newDate));
        curr.setDate(curr.getDate() + 1);
      }

      console.log(dateListTemp);
      setDateList(dateListTemp);
      setDateAWeek(dateListTemp);
    }
  };

  const changePrevWeek = () => {
    console.log(startDate);
    const dayInPrevWeek = getLastWeek(startDate);
    console.log("Prev week :", dayInPrevWeek);
    console.log(startDate);
    const dateListTemp = [];
    const curr = dayInPrevWeek;
    if (curr) {
      const startDays = (curr.getDay() + 7 - 1) % 7;

      curr.setDate(curr.getDate() - startDays);
      curr.setDate(curr.getDate() - curr.getDay() + 1);
      for (let i = 0; i < 7; i++) {
        const newDate = new Date(curr);

        if (i == 0) {
          setStartDate(newDate);
        }

        const dateFormatter = Intl.DateTimeFormat("sv-SE");
        dateListTemp.push(dateFormatter.format(newDate));
        curr.setDate(curr.getDate() + 1);
      }

      console.log(dateListTemp);
      setDateList(dateListTemp);
      setDateAWeek(dateListTemp);
    }
  };

  const getItem = async (itemFound: any) => {
    loading();
    const response = await detailSchedule(itemFound?.id);
    setDetail(response?.data?.data);
    setContent(response?.data?.data?.files);
    console.log("item Found", itemFound);
    close();
    setOpenDialog(true);
  };

  const handleRegionFilter = (e: any) => {
    let regions = [...regionFilter];

    if (e.target.checked) {
      regions = [...regionFilter, e.target.value];
    } else {
      regions.splice(regionFilter.indexOf(e.target.value), 1);
    }

    console.log(regions);
    setRegionFilter(regions);
  };

  const goLogin = () => {
    router.push("/auth");
  };

  const deleteFilterhandler = (filterId: any) => {
    console.log("hapus", filterId);
    const deletedReg = regionName.filter((list: any) => list.id !== filterId);
    const filtered = regionFilter.filter((list: any) => list !== filterId);

    setRegionName(deletedReg);
    setRegionFilter(filtered);
  };

  function setItemSchedule(id: string, date: string) {
    const itemFound: any = schedules?.filter(
      (s: any) =>
        s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
    );

    if (itemFound?.length > 0) {
      if (itemFound?.length == 1) {
        return (
          <a
            className={`cursor-pointer text-center ${
              Number(itemFound[0]?.uploaderLevelNumber) == 1
                ? "bg-yellow-300"
                : Number(itemFound[0]?.uploaderLevelNumber) == 2
                ? "bg-blue-400"
                : "bg-gray-500"
            }`}
            onClick={() => {
              getItem(itemFound[0]);
            }}
          >
            <p>
              <b>{itemFound[0]?.title}</b>
            </p>
            {itemFound[0].isYoutube == true ? (
              <div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto mt-2">
                <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                <span>LIVE</span>
              </div>
            ) : (
              ""
            )}
            {/* <p className="address">{itemFound[0].address}</p> */}
          </a>
        );
      }

      // for (let i = 0; i < itemFound.length; i++) {
      //   const item = itemFound[i];
      // }
      return (
        <div className="text-left">
          <p>
            <b>{t(`${itemFound?.length}simultaneousSchedule`)}</b>
          </p>
          <DropdownMenu>
            <DropdownMenuTrigger className="font-bold text-blue-300">
              {t("viewSchedule")}
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              {itemFound?.map((list: any) => (
                <DropdownMenuItem
                  key={list.id}
                  className="cursor-pointer"
                  onClick={() => {
                    getItem(itemFound[0]);
                  }}
                >
                  <p>
                    <b>{list.title}</b>
                  </p>
                  {list.isYoutube == true ? (
                    <div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto pt-4">
                      <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                      <span>LIVE</span>
                    </div>
                  ) : (
                    ""
                  )}
                  {/* <p className="address">{list.address}</p> */}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
          <div
            className="border-0 dropdown-menu schedule-list"
            aria-labelledby="view-schedule"
          ></div>
        </div>
      );
    }
  }

  return (
    <>
      {/* Awal Komponen Kiri */}
      <div className="relative pl-4 lg:px-8 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800 min-h-[80vh]">
        <div className="flex flex-row items-center">
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant={"outline"}
                className={cn(
                  "w-[240px] py-3 justify-start text-left font-normal",
                  !startDate && "text-muted-foreground"
                )}
              >
                <CalendarIcon />
                {startDate ? (
                  format(startDate, "MMM yyyy")
                ) : (
                  <span>Pick a date</span>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <Calendar
                mode="single"
                selected={startDate}
                onSelect={(e) => {
                  handleChangeDate(e);
                }}
                initialFocus
              />
            </PopoverContent>
          </Popover>
        </div>
        <div className="flex flex-col lg:flex-row gap-1">
          <div className="h-[500px] overflow-y-auto md:overflow-y-auto w-full lg:w-3/4 ">
            <div className="container-fluid relative">
              <div className="grid grid-cols-1 mt-8">
                <div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
                  <table className="w-full text-sm text-start table-fixed">
                    <thead className="text-md">
                      <tr className="h-full">
                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[210px]">
                          {t("timeTable", { defaultValue: "Time Table" })}
                        </th>
                        <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
                          <a
                            onClick={() => changePrevWeek()}
                            className="cursor-pointer h-fit self-center bottom-0"
                          >
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="40px"
                              height="40px"
                              viewBox="0 0 24 24"
                            >
                              <path
                                fill="currentColor"
                                d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
                              />
                            </svg>
                          </a>
                        </th>
                        <th
                          className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[0]
                              ? "bg-red-600 text-white"
                              : ""
                          }`}
                        >
                          {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
                            </svg>
                          </a>{" "} */}
                          <div className="flex flex-col ">
                            <p className="text-2xl">
                              {dateAWeek[0]?.split("-")[2]}
                            </p>
                            <p>{t("monday", { defaultValue: "Monday" })}</p>
                          </div>
                        </th>
                        <th
                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[1]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="text-2xl">
                            {dateAWeek[1]?.split("-")[2]}
                          </div>
                          {t("tuesday", { defaultValue: "Tuesday" })}
                        </th>
                        <th
                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[2]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="text-2xl">
                            {dateAWeek[2]?.split("-")[2]}
                          </div>
                          {t("wednesday", { defaultValue: "Wednesday" })}
                        </th>
                        <th
                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[3]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="text-2xl">
                            {dateAWeek[3]?.split("-")[2]}
                          </div>
                          {t("thursday", { defaultValue: "Thursday" })}
                        </th>
                        <th
                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[4]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="text-2xl">
                            {dateAWeek[4]?.split("-")[2]}
                          </div>
                          {t("friday", { defaultValue: "Friday" })}
                        </th>
                        <th
                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[5]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="text-2xl">
                            {dateAWeek[5]?.split("-")[2]}
                          </div>
                          {t("saturday", { defaultValue: "Saturday" })}
                        </th>
                        <th
                          onClick={() => changeNextWeek()}
                          className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
                            new Date().toISOString().slice(0, 10) ==
                            dateAWeek[6]
                              ? "bg-[#BE0106] text-white rounded-lg"
                              : ""
                          }`}
                        >
                          <div className="flex flex-col ">
                            <p className="text-2xl">
                              {dateAWeek[6]?.split("-")[2]}
                            </p>
                            <p>{t("sunday", { defaultValue: "Sunday" })}</p>
                          </div>
                          {/* <a  className="cursor-pointer h-fit p-0 m-0 self-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
                            </svg>
                          </a> */}
                        </th>
                        <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 pr-12 w-[20px]">
                          <a
                            onClick={() => changeNextWeek()}
                            className="cursor-pointer"
                          >
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="40px"
                              height="40px"
                              viewBox="0 0 24 24"
                            >
                              <path
                                fill="currentColor"
                                d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
                              />
                            </svg>
                          </a>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {timeList.map((times) => (
                        <tr key={times.id}>
                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">
                            {times.time}
                          </th>
                          <td
                            colSpan={2}
                            className="p-3 border border-gray-100 dark:border-gray-700 "
                          >
                            {setItemSchedule(times.id, dateList[0])}
                          </td>
                          <td className="border border-gray-100 dark:border-gray-700">
                            {setItemSchedule(times.id, dateList[1])}
                          </td>
                          <td className="border border-gray-100 dark:border-gray-700">
                            {setItemSchedule(times.id, dateList[2])}
                          </td>
                          <td className="border border-gray-100 dark:border-gray-700">
                            {setItemSchedule(times.id, dateList[3])}
                          </td>
                          <td className="p-3 border border-gray-100 dark:border-gray-700">
                            {setItemSchedule(times.id, dateList[4])}
                          </td>
                          <td className="border border-gray-100 dark:border-gray-700">
                            {setItemSchedule(times.id, dateList[5])}
                          </td>
                          <td
                            colSpan={2}
                            className="border border-gray-100 dark:border-gray-700"
                          >
                            {setItemSchedule(times.id, dateList[6])}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          {/* komponen Kanan */}
          <div className="w-full lg:w-1/4 flex flex-col gap-6 ml-4">
            <div className="relative text-gray-600 dark:text-white">
              <input
                onChange={(e) => setSearch(e.target.value)}
                onKeyUp={handleKeyUp}
                onKeyDown={handleKeyDown}
                type="text"
                placeholder={t("titleSchedule", {
                  defaultValue: "Title Schedule",
                })}
                className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
              />
              <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  viewBox="0 0 24 24"
                >
                  <g fill="none" fill-rule="evenodd">
                    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                    <path
                      fill="currentColor"
                      d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
                    />
                  </g>
                </svg>
              </span>
            </div>

            {/* jadwal hari ini */}
            {/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
              <CollapsibleTrigger>
                <h5 className="py-2 flex justify-between items-center">
                  Jadwal Hari Ini
                  <span className="flex items-end">
                    <Icon icon="fa:angle-down" className="ml-1" />
                  </span>
                </h5>
              </CollapsibleTrigger>
              {todayList?.map((list: any) => (
                <CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
                  <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
                  <div className="flex flex-col">
                    <h3 className="font-bold">{list?.title}</h3>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="iconamoon:clock-thin" />
                      {list?.startTime} - {list?.endTime} WIB
                    </p>
                    <p className="flex flex-row items-start gap-2 ">
                      <Icon icon="bxs:map" width={40} />
                      {list?.address}
                    </p>
                    <p>Pembicara :</p>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="ic:round-person" />
                      {list?.speakerTitle}&nbsp;{list?.speakerName}
                    </p>
                  </div>
                </CollapsibleContent>
              ))}
            </Collapsible> */}

            <Accordion type="single" collapsible className="w-full">
              <AccordionItem value="item-1">
                <AccordionTrigger>
                  {t("todaySchedule", { defaultValue: "Today Schedule" })}
                </AccordionTrigger>
                {todayList?.map((list: any) => (
                  <AccordionContent
                    key={list?.id}
                    className="flex flex-row gap-3"
                  >
                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                      {new Date(list.startDate).getDate()}
                    </div>
                    <div className="flex flex-col gap-2">
                      <h3 className="font-bold">{list?.title}</h3>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="iconamoon:clock-thin" />
                        {list?.startTime} - {list?.endTime} WIB
                      </p>
                      <p className="flex flex-row items-start gap-2 ">
                        <Icon icon="bxs:map" />
                        {list?.address}
                      </p>
                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="ic:round-person" />
                        {list?.speakerTitle}&nbsp;{list?.speakerName}
                      </p>
                    </div>
                  </AccordionContent>
                ))}
              </AccordionItem>

              <AccordionItem value="item-2">
                <AccordionTrigger>
                  {t("previousSchedule", { defaultValue: "Previous Schedule" })}
                </AccordionTrigger>
                {prevdayList?.map((list: any) => (
                  <AccordionContent
                    key={list?.id}
                    className="flex flex-row gap-3"
                  >
                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                      {new Date(list.startDate).getDate()}
                    </div>
                    <div className="flex flex-col gap-2">
                      <h3 className="font-bold">{list?.title}</h3>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="iconamoon:clock-thin" />
                        {list?.startTime} - {list?.endTime} WIB
                      </p>
                      <p className="flex flex-row items-start gap-2 ">
                        <Icon icon="bxs:map" />
                        {list?.address}
                      </p>
                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="ic:round-person" />
                        {list?.speakerTitle}&nbsp;{list?.speakerName}
                      </p>
                    </div>
                  </AccordionContent>
                ))}
              </AccordionItem>

              <AccordionItem value="item-3">
                <AccordionTrigger>
                  {t("nextSchedule", { defaultValue: "Next Schedule" })}
                </AccordionTrigger>
                {nextdayList?.map((list: any) => (
                  <AccordionContent
                    key={list?.id}
                    className="flex flex-row gap-3"
                  >
                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                      {new Date(list.startDate).getDate()}
                    </div>
                    <div className="flex flex-col gap-2">
                      <h3 className="font-bold">{list?.title}</h3>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="iconamoon:clock-thin" />
                        {list?.startTime} - {list?.endTime} WIB
                      </p>
                      <p className="flex flex-row items-start gap-2 ">
                        <Icon icon="bxs:map" />
                        {list?.address}
                      </p>
                      <p>{t("speaker", { defaultValue: "Speaker" })}</p>
                      <p className="flex flex-row items-center gap-2">
                        <Icon icon="ic:round-person" />
                        {list?.speakerTitle}&nbsp;{list?.speakerName}
                      </p>
                    </div>
                  </AccordionContent>
                ))}
              </AccordionItem>
            </Accordion>

            {/* jadwal sebelumnya */}
            {/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
              <CollapsibleTrigger>
                <h5 className="py-2 flex justify-between items-center">
                  Jadwal Sebelumnya
                  <span className="flex items-end">
                    <Icon icon="fa:angle-down" className="ml-1" />
                  </span>
                </h5>
              </CollapsibleTrigger>
              {prevdayList?.map((list: any) => (
                <CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
                  <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
                  <div className="flex flex-col">
                    <h3 className="font-bold">{list?.title}</h3>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="iconamoon:clock-thin" />
                      {list?.startTime} - {list?.endTime} WIB
                    </p>
                    <p className="flex flex-row items-start gap-2 ">
                      <Icon icon="bxs:map" width={40} />
                      {list?.address}
                    </p>
                    <p>Pembicara :</p>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="ic:round-person" />
                      {list?.speakerTitle}&nbsp;{list?.speakerName}
                    </p>
                  </div>
                </CollapsibleContent>
              ))}
            </Collapsible> */}

            {/* jadwal selanjutnya */}
            {/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
              <CollapsibleTrigger>
                <h5 className="py-2 flex justify-end items-center">
                  Jadwal Selanjutnya
                  <span className="flex items-end">
                    <Icon icon="fa:angle-down" className="ml-1 flex" />
                  </span>
                </h5>
              </CollapsibleTrigger>
              {nextdayList?.map((list: any) => (
                <CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
                  <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
                  <div className="flex flex-col">
                    <h3 className="font-bold">{list?.title}</h3>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="iconamoon:clock-thin" />
                      {list?.startTime} - {list?.endTime} WIB
                    </p>
                    <p className="flex flex-row items-start gap-2 ">
                      <Icon icon="bxs:map" width={40} />
                      {list?.address}
                    </p>
                    <p>Pembicara :</p>
                    <p className="flex flex-row items-center gap-2">
                      <Icon icon="ic:round-person" />
                      {list?.speakerTitle}&nbsp;{list?.speakerName}
                    </p>
                  </div>
                </CollapsibleContent>
              ))}
            </Collapsible> */}
          </div>
        </div>
      </div>

      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
        <DialogContent size="md">
          <DialogHeader>
            <DialogTitle>
              <h1 className="my-4 font-light">
                {t("timeTable1")}
                {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
              </h1>
              <p className="font-bold">{detail?.title}</p>
            </DialogTitle>
            <DialogDescription>
              <p className="flex flex-row items-center gap-2">
                <Icon icon="iconamoon:clock-thin" />
                {detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
                {detail?.timezone ? detail.timezone : "WIB"}
              </p>
            </DialogDescription>
            <DialogDescription>
              <p className="flex flex-row items-center gap-2 ">
                <Icon icon="bxs:map" fontSize={20} />
                {detail?.address}
              </p>
            </DialogDescription>
            <DialogDescription>
              <p className="flex flex-row items-center gap-2">
                <Icon icon="ic:round-person" />
                {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
              </p>
            </DialogDescription>
            <DialogDescription>
              {detail?.isYoutube == true ? (
                userId == null ? (
                  <div className="login-live-streaming mt-5 text-dark">
                    <p className="mb-0">
                      Untuk menonton Live Streaming silahkan
                      <a className="login" onClick={() => goLogin()}>
                        {" "}
                        Login{" "}
                      </a>
                      terlebih dahulu
                    </p>
                  </div>
                ) : (
                  <div className="video-player mt-4">
                    <iframe
                      width="100%"
                      height="480"
                      src={`${detail?.youtubeEmbedUrl}?autoplay=1&mute=1&enablejsapi=1&origin=${window.location.origin}`}
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                      allowFullScreen
                      title={detail?.title}
                    />
                  </div>
                )
              ) : (
                ""
              )}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setOpenDialog(false)}>Close</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default Schedule;