'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';


export default function InformasiBerkala() {
    const searchInput = (
        <Input
            aria-label="Search"
            className="w-full"
            classNames={{
                inputWrapper: "bg-white hover:!bg-gray-100",
                input: "text-sm",
            }}
            labelPlacement="outside"
            placeholder="Search..."
            startContent={
                <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
            }
            endContent={
                <Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
            }
            type="search"
        />
    )

    const animals = [
        { label: "Title", value: "title" },
        { label: "Date", value: "date" },
        { label: "Created At", value: "createdAt" },
    ];
    return (
        <div className='md:flex '>
            <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2 md:px-0 lg:px-5 text-black'>
                <div className='p-1 md:p-5 lg:p-8'>
                    <div className='font-bold text-xl'>Informasi Berkala</div>
                    <div className="pt-2">
                        <Breadcrumbs color='primary'>
                            <BreadcrumbItem>Beranda</BreadcrumbItem>
                            <BreadcrumbItem>Informasi Publik</BreadcrumbItem>
                            <BreadcrumbItem>Informasi Berkala</BreadcrumbItem>
                        </Breadcrumbs>
                    </div>
                    <div className='pt-4 space-y-5'>
                        <div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Berkala</div>
                        <div className="flex items-center gap-3">
                            {searchInput}
                            <Select
                                label="Sort By"
                                size="sm"
                                className="w-1/5"
                                classNames={{
                                    // base: "bg-red-500",
                                    // mainWrapper: "border-2 border-red-500",
                                    label: "text-black",
                                    value: "!text-black",
                                    trigger: "bg-white hover:!bg-gray-100",
                                    // innerWrapper: "bg-red-500"
                                    // selectorIcon: "bg-red-500"
                                    // listboxWrapper: "bg-red-500"
                                    // listbox: "bg-red-500"
                                    popoverContent: "bg-white"
                                }}
                                listboxProps={{
                                    itemClasses: {
                                        base: "text-black",
                                        wrapper: "!bg-white ",
                                    }
                                }}
                            // onChange={onChangeFilterEnterprising}
                            >
                                <SelectSection >
                                    {animals.map((list: any) => (
                                        <SelectItem key={list.id}>{list.label}</SelectItem>
                                    ))}
                                </SelectSection>
                            </Select>
                            <Select
                                label="Tanggal Publikasi"
                                size="sm"
                                className="w-1/4"
                                classNames={{
                                    // base: "bg-red-500",
                                    // mainWrapper: "border-2 border-red-500",
                                    label: "text-black",
                                    value: "!text-black",
                                    trigger: "bg-white hover:!bg-gray-100",
                                    // innerWrapper: "bg-red-500"
                                    // selectorIcon: "bg-red-500"
                                    // listboxWrapper: "bg-red-500"
                                    // listbox: "bg-red-500"
                                    popoverContent: "bg-white"
                                }}
                                listboxProps={{
                                    itemClasses: {
                                        base: "text-black",
                                        wrapper: "!bg-white ",
                                    }
                                }}
                            // onChange={onChangeFilterEnterprising}
                            >
                                <SelectSection >
                                    {animals.map((list: any) => (
                                        <SelectItem key={list.id}>{list.label}</SelectItem>
                                    ))}
                                </SelectSection>
                            </Select>
                        </div>
                        <div>
                            <div className="flex flex-col gap-3">
                                <Table
                                    color='warning'
                                    selectionMode="single"
                                    defaultSelectedKeys={["1"]}
                                    aria-label="Example static collection table"
                                    classNames={{
                                        wrapper: "bg-white",
                                        base: 'font-bold',
                                        td: "font-medium"
                                    }}
                                >
                                    <TableHeader>
                                        <TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
                                    </TableHeader>
                                    <TableBody>
                                        <TableRow key="1">
                                            <TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis.</TableCell>
                                        </TableRow>
                                        <TableRow key="2">
                                            <TableCell className='flex items-center justify-between'>
                                                <div>1. Informasi mengenai kedudukan, domisili, beserta alamat lengkap dan kontak.</div>
                                                <div><EyeFilledIcon color="#DD8306" className="min-w-max" /></div>
                                            </TableCell>
                                        </TableRow>
                                        <TableRow key="3">
                                            <TableCell className='flex items-center justify-between'>2. Struktur Organisasi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="4">
                                            <TableCell className='flex items-center justify-between'>3. Ruang Lingkup Kegiatan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="5">
                                            <TableCell className='flex items-center justify-between'>4. Maksud dan Tujuan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="6">
                                            <TableCell className='flex items-center justify-between'>5. Gambaran umum Satker. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="7">
                                            <TableCell className='flex items-center justify-between'>6. Profile singkat pejabat struktural. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="8">
                                            <TableCell className='flex items-center justify-between'>7. Tugas dan Fungsi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="9">
                                            <TableCell className='flex items-center justify-between'>8. Visi dan Misi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="10">
                                            <TableCell className='flex items-center justify-between'>9. LHPKN Pejabat Polri yang telah diperiksa, diverifikasi, dan telah dikirimkan ke Komisi Pemberantasan Korupsi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="11">
                                            <TableCell className='flex items-center justify-between'>B. Ringkasan informasi tentang program dan/atau kegiatan yang sedang dijalankan dalam lingkup badan publik. </TableCell>
                                        </TableRow>
                                        <TableRow key="12">
                                            <TableCell className='flex items-center justify-between'>1. Matrik program, kegiatan dan target Polri(Renja, Renstra, Peta Strategi, RKA, Dipa). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="13">
                                            <TableCell className='flex items-center justify-between'>2. Agenda penting terkait pelaksanaan tugas BadanPublik (Polri). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="14">
                                            <TableCell className='flex items-center justify-between'>3. Informasi khusus lainnya yang berkaitan langsungdengan hak-hak masyarakat. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="15">
                                            <TableCell className='flex items-center justify-between'>4. Informasi tentang penerimaan calon peserta didikpada Badan Publik (Polri) yang menyelenggarakan kegiatan pendidikan untuk umum.. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="16">
                                            <TableCell className='flex items-center justify-between'>5. Informasi tentang penerimaan calon pegawai  dan/atau pejabat Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="17">
                                            <TableCell className='flex items-center justify-between'>C. Ringkasan  informasi tentang kinerja dalam lingkup Badan Publik berupa narasi tentang  realisasi kegiatan yang telah maupun sedang dijalankan beserta capaiannya. </TableCell>
                                        </TableRow>
                                        <TableRow key="18">
                                            <TableCell className='flex items-center justify-between'>1. Layanan Kepolisian Negara Republik Indonesia  (Polri). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="19">
                                            <TableCell className='flex items-center justify-between'>2. Laporan  Kinerja (Lakip) Polri 5 tahun terkahir. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="20">
                                            <TableCell className='flex items-center justify-between'>3. Laporan Tahunan (5 tahun terkahir). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="21">
                                            <TableCell className='flex items-center justify-between'>4. Rencana  Strategis Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="22">
                                            <TableCell className='flex items-center justify-between'>5. Rencana Kerja Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="23">
                                            <TableCell className='flex items-center justify-between'>D. Ringkasan Laporan Keuangan.</TableCell>
                                        </TableRow>
                                        <TableRow key="24">
                                            <TableCell className='flex items-center justify-between'>1. Laporan Keuangan Polri (5 tahun terkahir). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="25">
                                            <TableCell className='flex items-center justify-between'>2. Rencana  Kerja Tahunan Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="26">
                                            <TableCell className='flex items-center justify-between'>3. Daftar Isian Pelaksanaan Anggaran  Kementerian Pertanian (DIPA Induk) Polri (5 tahun terkahir).. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="27">
                                            <TableCell className='flex items-center justify-between'>4. Realisasi  Belanja Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="28">
                                            <TableCell className='flex items-center justify-between'>5. Realisasi Pendapatan Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="29">
                                            <TableCell className='flex items-center justify-between'>6. Rencana  Umum Pengadaan (RUP) Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="30">
                                            <TableCell className='flex items-center justify-between'>E. Ringkasan laporan akses Informasi Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="31">
                                            <TableCell className='flex items-center justify-between'>F. Informasi  tentang peraturan, keputusan, dan/atau kebijakan yang mengikat dan/atau  berdampak bagi publik yang dikeluarkan oleh Badan Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="32">
                                            <TableCell className='flex items-center justify-between'>G. Informasi tentang hak dan tata cara  memperoleh Informasi Publik, serta tata cara pengajuan keberatan serta proses  penyelesaian sengketa Informasi Publik berikut pihak-pihak yang  bertanggungjawab yang dapat dihubungi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="33">
                                            <TableCell className='flex items-center justify-between'>H. Informasi  tentang tata cara pengaduan penyalahgunaan wewenang atau pelanggaran yang  dilakukan baik oleh pejabat Badan Publik maupun pihak yang mendapatkan izin  atau perjanjian kerja dari Badan Publik yang bersangkutan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="34">
                                            <TableCell className='flex items-center justify-between'>I. Informasi tentang pengumuman pengadaan barangdan jasa.</TableCell>
                                        </TableRow>
                                        <TableRow key="35">
                                            <TableCell className='flex items-center justify-between'>1. LPSE Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="36">
                                            <TableCell className='flex items-center justify-between'>2. SIRUP LKPP - Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="37">
                                            <TableCell className='flex items-center justify-between'>3. IRencana Umum Pengadaan (RUP) Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="38">
                                            <TableCell className='flex items-center justify-between'>J. Informasi  tentang prosedur peringatan dini dan prosedur evakuasi keadaan darurat di  setiap kantor Badan Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                        <TableRow key="39">
                                            <TableCell className='flex items-center justify-between'>K. Daftar  rancangan peraturan perundang-undangan Polri yang sedang dalam proses  pembahasan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
                                        </TableRow>
                                    </TableBody>
                                </Table>
                            </div>
                        </div>
                    </div>
                </div>
                <div>

                </div>
            </div>
            <div className='w-auto md:w-1/3 lg:w-[25%]'>
                <PPIDSidebar />
            </div>
        </div>
    )
}