"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, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import React, { useEffect, useState } from "react";
import { format } from "date-fns";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";

const Jadwal = () => {
  const city = [
    {
      key: 1,
      id: "metro-jaya",
      name: "Polda Metro Jaya",
    },
    {
      key: 2,
      id: "jawa-barat",
      name: "Polda Jawa Barat",
    },
    {
      key: 3,
      id: "banten",
      name: "Polda Banten",
    },
    {
      key: 4,
      id: "jawa-tengah",
      name: "Polda Jawa Tengah",
    },
    {
      key: 5,
      id: "daerah-istimewa-yogyakarta",
      name: "Polda D.I Yogyakarta",
    },
    {
      key: 6,
      id: "jawa-timur",
      name: "Polda Jawa Timur",
    },
    {
      key: 7,
      id: "aceh",
      name: "Polda Aceh",
    },
    {
      key: 8,
      id: "sumatera-utara",
      name: "Polda Sumatera Utara",
    },
    {
      key: 9,
      id: "sumatera-barat",
      name: "Polda Sumatera Barat",
    },
  ];

  const days = ["S", "S", "R", "K", "J", "S", "M"];

  const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

  const [startDate, setStartDate] = useState<Date | undefined>(new Date());
  const [dateAWeek, setDateAWeek] = useState<string[]>([]);
  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);

  useEffect(() => {
    async function initState() {
      setDateAWeek(dateList);
    }

    initState();
  }, []);

  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 categories = [
    { id: 1, title: "POLDA METRO JAYA" },
    { id: 2, title: "POLDA JAWA BARAT" },
    { id: 3, title: "POLDA BANTEN" },
    { id: 4, title: "POLDA JAWA TENGAH" },
    { id: 5, title: "POLDA D.I YOGYAKARTA" },
    { id: 6, title: "POLDA JAWA TIMUR" },
    { id: 7, title: "POLDA ACEH" },
    { id: 8, title: "POLDA SUMATERA UTARA" },
    { id: 9, title: "POLDA SUMATERA BARAT" },
  ];

  return (
    <>
      {/* Awal Komponen Kiri */}
      <div className="relative px-4 lg:px-28 md:py-10 py-4 bg-gray-50 dark:bg-slate-800">
        <Popover>
          <PopoverTrigger asChild>
            <Button variant={"outline"} className={cn("w-[240px] py-4 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 className="container relative">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <a className="text-black flex flex-row gap-2 py-4 items-center cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                  <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
                </svg>
                Filter
                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
                </svg>
              </a>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="flex p-0 rounded-md">
              <DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
                <div className="gap-6 flex flex-row justify-end">
                  <div> Filter</div>
                  <button className="text-blue-400">Simpan</button>
                </div>
                <div className="border w-full border-t  border-slate-500"></div>
                <div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
                  <p>Region Filter</p>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                  <div className="mt-2 gap-2 flex flex-row">
                    <Checkbox id="terms" />
                    <p>POLDA METRO JAYA</p>
                  </div>
                </div>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      <div className="flex flex-col lg:flex-row">
        <div className="h-[500px] w-3/4 overflow-y-auto">
          <div className="container-fluid relative">
            <div className="grid grid-cols-1 mt-8">
              <div className="relative block bg-white dark:bg-slate-900">
                <table className="w-full text-sm text-start">
                  <thead className="text-md">
                    <tr className="h-full">
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
                      <th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
                          <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>{dateAWeek[0]?.split("-")[2]}</p>
                          <p>Monday</p>
                        </div>
                      </th>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
                      </th>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
                      </th>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
                      </th>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div>{dateAWeek[4]?.split("-")[2]}</div>Friday
                      </th>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
                      </th>
                      <th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
                        <div className="flex flex-col ">
                          <p>{dateAWeek[6]?.split("-")[2]}</p>
                          <p>Sunday</p>
                        </div>
                        <a onClick={() => changeNextWeek()} 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>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>

                    <tr>
                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                      <td className="border border-gray-100 dark:border-gray-700"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      {/* Akhir Komponen Kiri */}

      {/* Awal Komponent Kanan */}
      <div className="w-1/4">
        <div>
          <h1>HALO</h1>
        </div>
      </div>
      {/* Akhir Komponen Kanan */}
    </>
  );
};

export default Jadwal;
