@{
    Layout = "_LayoutApp";
    ViewData["Title"] = "Data Bank Sampah";
    ViewData["DataBankSampahActive"] = "menu-active";
}

<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
    <div class="prose">
        <span class="text-xl font-semibold text-black">
            Data Bank Sampah
        </span>
    </div>

    <div>
        <button class="btn btn-sm rounded-full bg-white" onclick="modal_filter.showModal()">
            <i class="ph ph-funnel-simple"></i>
            Filter
        </button>
    </div>
</div>

<!-- Modal Filter -->
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box w-full sm:max-w-sm">
        <h3 class="text-lg font-bold">Filter</h3>
        <form action="#" method="get">
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Jenis Bank Sampah</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih salah satu</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kategori Bank Sampah</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih salah satu</option>
                </select>
            </fieldset>
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Status Bank Sampah</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih salah satu</option>
                </select>
            </fieldset>
            <div class="modal-action">
                <button type="button" class="btn btn-outline rounded-full" onclick="modal_filter.close()">Tutup</button>
                <button type="submit" class="btn bg-bank-sampah-primary-500 rounded-full text-white">Terapkan</button>
            </div>
        </form>
    </div>
</dialog>
<!-- /modal filter -->

<div class="h-6"></div>

<div class="card bg-white">
    <div class="card-body p-2">
        @await Html.PartialAsync("Components/Table/_Control")
        <div class="overflow-x-auto">
            <table class="table-zebra table">
                <!-- head -->
                <thead>
                    <tr>
                        <th></th>
                        <th>Nama Bank Sampah</th>
                        <th>Kabupaten</th>
                        <th>Kecamatan</th>
                        <th>Kelurahan</th>
                        <th>Jenis Bank Sampah</th>
                        <th>Kategori Bank Sampah</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td>Bank Sampah Hijau Sej...</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Cipayung</td>
                        <td>Kebon Jeruk</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-success badge-soft rounded-full">
                                Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>Bank Sampah Cinta Lin...</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Matraman</td>
                        <td>Pancoran</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-success badge-soft rounded-full">
                                Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>Bank Sampah Bersih Ja...</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Kramat Jati</td>
                        <td>Kembangan</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-success badge-soft rounded-full">
                                Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>4</th>
                        <td>Bank Sampah Mandiri</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Pulogadung</td>
                        <td>Sene</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-success badge-soft rounded-full">
                                Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>5</th>
                        <td>Bank Sampah Roda Hij...</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Cakung</td>
                        <td>Kebayoran Baru</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-error badge-soft rounded-full">
                                Belum Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>6</th>
                        <td>Bank Sampah Karya Be...</td>
                        <td>Kota Adm Jakar...</td>
                        <td>Jatinegara</td>
                        <td>Menteng</td>
                        <td>BSU</td>
                        <td>Warga</td>
                        <td>
                            <div class="badge badge-error badge-soft rounded-full">
                                Belum Disetujui
                            </div>
                        </td>
                        <td>
                            <a href="#" class="btn btn-circle btn-primary btn-sm">
                                <i class="ph ph-eye"></i>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        @await Html.PartialAsync("Components/Table/_Pagination")
    </div>
</div>