@{
    ViewData["Title"] = "Data Pendamping RW";
}

<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 rounded-full bg-white" 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 checked:text-white [--tab-bg:green]" aria-label="Rapot" />
    <div class="tab-content bg-base-100 border-base-300 p-0">

    <!-- Filter Bulan -->
    <div class="flex justify-end items-center gap-2 p-4">
        <span class="whitespace-nowrap text-sm font-medium text-gray-700">Filter Bulan:</span>
        <input type="month" id="filterBulanRapot"
               class="px-4 py-2 border bg-white rounded-md w-[180px] sm:w-[200px]"
               min="2020-01"
               max="@DateTime.Now.ToString("yyyy-MM")"
               value="@DateTime.Now.ToString("yyyy-MM")" />
    </div>
    <div class="overflow-x-auto">
        <table class="table table-zebra w-full" id="tableRapot">
            <thead>
                <tr>
                    <th class="w-[5%]">No</th>
                    <th class="w-[20%]">Nama</th>

                    <!-- CHECKLIST -->
                    <th class="w-[15%]">
                        <div class="flex items-center gap-2">
                            <span>Checklist</span>
                            <div class="tooltip tooltip-top"
                                data-tip="0 = Merah
                                Checklist < 15 = Kuning
                                Checklist > 15 = Hijau">
                                <span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
                                    info
                                </span>
                            </div>
                        </div>
                    </th>

                    <!-- BERAT SAMPAH -->
                    <th class="w-[15%]">
                        <div class="flex items-center gap-2">
                            <span>Berat Sampah</span>
                            <div class="tooltip tooltip-top"
                                data-tip="0 Merah">
                                <span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
                                    info
                                </span>
                            </div>
                        </div>
                    </th>

                    <!-- FOTO -->
                    <th class="w-[10%]">
                        <div class="flex items-center gap-2">
                            <span>Foto</span>
                            <div class="tooltip tooltip-top"
                                data-tip="0 Merah">
                                <span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
                                    info
                                </span>
                            </div>
                        </div>
                    </th>

                    <!-- RUMAH AKTIF MEMILAH -->
                    <th class="w-[20%]">
                        <div class="flex items-center gap-2">
                            <span>Rumah Aktif Memilah</span>
                            <div class="tooltip tooltip-top"
                                data-tip="
                                0 Merah
                                < 10 Kuning
                                >= 10 Hijau">
                                <span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
                                    info
                                </span>
                            </div>
                        </div>
                    </th>

                    <!-- STATUS -->
                    <th class="w-[15%]">
                        <div class="flex items-center gap-2">
                            <span>Status</span>
                            <div class="tooltip tooltip-top"
                                data-tip="Sangat Baik = Semua Hijau
                                Baik = 3 Hijau
                                Cukup Baik = 2 Hijau
                                Kurang Baik = 1 Hijau
                                Tidak Baik = Semua Merah">
                                <span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
                                    info
                                </span>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>

    <input type="radio" name="my_tabs_3" class="tab checked:text-white [--tab-bg:green]" aria-label="Checklist" />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        <div class="overflow-x-auto">
            <table class="table-zebra table" id="tableChecklist">
                <thead>
                    <tr>
                        <th class="w-[5%]">No</th>
                        <th class="w-[35%]">Nama</th>
                        <th class="w-[20%]">Checklist</th>
                        <th class="w-[10%]">Foto</th>
                        <th class="w-[20%]">Rumah Aktif Memilah</th>
                        <th class="w-[20%]">Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <input type="radio" name="my_tabs_3" class="tab checked:text-white [--tab-bg:green]" aria-label="Berat Sampah" checked="checked"  />
    <div class="tab-content bg-base-100 border-base-300 p-0">
        <div class="overflow-x-auto">
            <table class="table-zebra table" id="tableBeratSampah">
                <thead>
                    <tr>
                        <th class="w-[5%]">No</th>
                        <th class="w-[20%]">Nama</th>
                        <th class="w-[15%]">Total Berat (Kg)</th>
                        <th class="w-[15%]">Mudah Terurai</th>
                        <th class="w-[15%]">Material Daur Ulang (Kg)</th>
                        <th class="w-[15%]">B3 (Kg)</th>
                        <th class="w-[15%]">Residu (Kg)</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/sweetalert2/sweetalert2-11.26.4.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script type="text/javascript">
    var tableRapot;
    var tableChecklist;
    var tableBeratSampah;

    $(document).ready(function () {
        tableRapot = new DataTable('#tableRapot', {
            ajax: '@Url.Action("TableRapot", "DataPendampingRw")',
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                { data: 'nama' },
                { data: 'checklist' },
                { data: 'berat_sampah' },
                { data: 'foto' },
                { data: 'rumah_aktif_memilah' },
                { data: 'status' },
            ]
        });

        tableChecklist = new DataTable('#tableChecklist', {
            ajax: '@Url.Action("TableChecklist", "DataPendampingRw")',
            scrollX: true,
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                { data: 'nama' },
                { data: 'checklist' },
                { data: 'foto' },
                { data: 'rumah_aktif_memilah' },
                { data: 'aksi' },
            ]
        });

        tableBeratSampah = new DataTable('#tableBeratSampah', {
            ajax: '@Url.Action("TableBeratSampah", "DataPendampingRw")',
            scrollX: true,
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                { data: 'nama' },
                { data: 'total_berat' },
                { data: 'mudah_terurai' },
                { data: 'material_daur_ulang' },
                { data: 'b3' },
                { data: 'residu' },
            ]
        });
    });
</script>