@{
    Layout = "_LayoutApp";
    ViewData["Title"] = "Data Pendamping RW";
    ViewData["DataPendampingRwActive"] = "menu-active";
}

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

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="prose">
        <h3 class="mb-2">Data Pendamping 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">filter_list</span>
            Filter
        </a>
    </div>
</div>

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

<div class="tabs tabs-lift">
    <input type="radio" name="my_tabs_3" class="tab [--tab-bg:green] text-white" aria-label="Rapot" checked="checked"/>
    <div class="tab-content bg-base-100 border-base-300 p-6">
            <div class="overflow-x-auto">
            <table class="table table-zebra">
                <!-- head -->
                <thead>
                <tr>
                    <th style="width: 5%">No</th>
                    <th style="width: 25%">Nama</th>
                    <th style="width: 15%">Checklist</th>
                    <th style="width: 15%">Berat Sampah</th>
                    <th style="width: 10%">Foto</th>
                    <th style="width: 15%">Rumah Aktif Memilah</th>
                    <th style="width: 15%">Status</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>1</th>
                    <td>Risky Adi Putra</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        10
                    </td>
                    <td>
                        <div class="badge badge-error badge-soft rounded-xs px-12">
                            0
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Sulaiman</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-warning badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        889
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-green-100 text-green-600 rounded-full">
                            Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>Siti Nurzaliha</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            12
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        22
                    </td>
                    <td>
                        <div class="badge badge-error badge-soft rounded-xs px-12">
                            0
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-green-100 text-green-600 rounded-full">
                            Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>4</th>
                    <td>Budi Santoso</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            18
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-warning badge-soft rounded-xs px-12">
                            1
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        889
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-green-100 text-green-600 rounded-full">
                            Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>5</th>
                    <td>Dewi Lestari</td>
                    <td>
                        <div class="badge badge-warning badge-soft rounded-xs px-12">
                            1
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        22
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-green-100 text-green-600 rounded-full">
                            Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>6</th>
                    <td>Andi Prabowo</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            17
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        889
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>7</th>
                    <td>Nina Sari</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            15
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        22
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>8</th>
                    <td>Hendra Wijaya</td>
                    <td>
                        <div class="badge badge-warning badge-soft rounded-xs px-12">
                            1
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        889
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>9</th>
                    <td>Lina Marlina</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            12
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        22
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            10
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>10</th>
                    <td>Yudi Hartono</td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            16
                        </div>
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-xs btn-square me-2" disabled>
                            <span class="icon icon-outline text-sm text-black">image</span>
                        </button>
                        889
                    </td>
                    <td>
                        <div class="badge badge-success badge-soft rounded-xs px-12">
                            11
                        </div>
                    </td>
                    <td>
                        <div class="badge bg-blue-100 text-blue-600 rounded-full">
                            Sangat Baik
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="h-4"></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>

    <input type="radio" name="my_tabs_3" class="tab [--tab-bg:green] text-white" aria-label="Checklist" />
    <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>

    <input type="radio" name="my_tabs_3" class="tab [--tab-bg:green] text-white" aria-label="Berat Sampah" />
    <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>