@{
    Layout = "_LayoutApp";
    ViewData["Title"] = "Laporan RW";
    ViewData["LaporanRwActive"] = "menu-active";
}

<div class="breadcrumbs text-sm">
    <ul>
        <li class="text-gray-500"><a>Data Verifikasi</a></li>
        <li>Laporan RW</li>
    </ul>
</div>

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="prose">
        <h3 class="mb-2">Laporan RW</h3>
    </div>
    <div class="justify-self-end lg:self-center">
        <a class="btn bg-white rounded-full" href="#">
            <span class="icon icon-fill me-2">download</span>
            Unduh Laporan
        </a>
        <button class="btn bg-white rounded-full" onclick="modal_filter.showModal()">
            <span class="icon icon-fill me-2">filter_list</span>
            Filter
        </button>
    </div>
</div>

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

<div class="card bg-white shadow-sm">
    <div class="card-body p-2">
        <div class="overflow-x-auto">
            <table class="table table-zebra">
                <!-- head -->
                <thead>
                <tr>
                    <th>No</th>
                    <th>Kelurahan</th>
                    <th>RW</th>
                    <th>Bulan</th>
                    <th>Rumah Aktif Memilah</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>1</th>
                    <td>Kebon Jeruk</td>
                    <td>03</td>
                    <td>September</td>
                    <td>104</td>
                    <td>
                        <div class="badge badge-error rounded-full badge-soft">
                            Belum Verifikasi
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Pancoran</td>
                    <td>01</td>
                    <td>April</td>
                    <td>67</td>
                    <td>
                        <div class="badge badge-error rounded-full badge-soft">
                            Belum Verifikasi
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>Kembangan</td>
                    <td>02</td>
                    <td>Maret</td>
                    <td>110</td>
                    <td>
                        <div class="badge badge-error rounded-full badge-soft">
                            Belum Verifikasi
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>4</th>
                    <td>Senen</td>
                    <td>04</td>
                    <td>Februari</td>
                    <td>88</td>
                    <td>
                        <div class="badge badge-success rounded-full badge-soft">
                            Verifikasi Sudin
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>5</th>
                    <td>Kebayoran Baru</td>
                    <td>05</td>
                    <td>Oktober</td>
                    <td>90</td>
                    <td>
                        <div class="badge badge-success rounded-full badge-soft">
                            Verifikasi Sudin
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>6</th>
                    <td>Menteng</td>
                    <td>06</td>
                    <td>Agustus</td>
                    <td>72</td>
                    <td>
                        <div class="badge badge-success rounded-full badge-soft">
                            Verifikasi Sudin
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>7</th>
                    <td>Cilandak</td>
                    <td>07</td>
                    <td>Juli</td>
                    <td>81</td>
                    <td>
                        <div class="badge badge-success rounded-full badge-soft">
                            Verifikasi Sudin
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>8</th>
                    <td>Cakung</td>
                    <td>08</td>
                    <td>Januari</td>
                    <td>65</td>
                    <td>
                        <div class="badge badge-success rounded-full badge-soft">
                            Verifikasi Sudin
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-sm rounded-full bg-white">
                            Detail
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="flex flex-col gap-2 md:flex-row justify-between items-center">
            <a href="#" class="btn btn-ghost btn-sm">
                <span class="icon icon-fill text-sm me-2">arrow_back</span>
            Prev
            </a>
            <div class="join gap-2">
                <button class="join-item btn btn-circle bg-bpsrw-500 text-white">1</button>
                <button class="join-item btn btn-circle bg-white text-gray-500">2</button>
                <button class="join-item btn btn-circle bg-white text-gray-500">...</button>
                <button class="join-item btn btn-circle bg-white text-gray-500">5</button>
                <button class="join-item btn btn-circle bg-white text-gray-500">6</button>
            </div>
            <a href="#" class="btn btn-ghost btn-sm">
                Next
                <span class="icon icon-fill text-sm ms-2">arrow_forward</span>
            </a>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<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">
            <p class="py-4">
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">Bulan Awal</legend>
                    <input type="month" class="input w-full">
                </fieldset>
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">Bulan Akhir</legend>
                    <input type="month" class="input w-full">
                </fieldset>
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">Kecamatan</legend>
                    <select class="select w-full">
                        <option disabled selected>Pilih Kecamatan</option>
                    </select>
                </fieldset>
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">Kelurahan</legend>
                    <select class="select w-full">
                        <option disabled selected>Pilih Kelurahan</option>
                    </select>
                </fieldset>
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">RW</legend>
                    <select class="select w-full">
                        <option disabled selected>Pilih RW</option>
                    </select>
                </fieldset>
                <fieldset class="fieldset max-w-sm">
                    <legend class="fieldset-legend">Status</legend>
                    <select class="select w-full">
                        <option disabled selected>Pilih Status</option>
                    </select>
                </fieldset>
            </p>
            <div class="modal-action">
                <button type="button" class="btn" onclick="modal_filter.close()">Tutup</button>
                <button type="submit" class="btn btn-neutral">Terapkan</button>
            </div>
        </form>
    </div>
</dialog>