@{
    ViewData["Title"] = "Data PILP Pendamping";
    var nama = ViewBag.Nama as string;
    var rw = ViewBag.RW as string;
}

<div class="breadcrumbs text-sm mb-4">
    <ul>
        <li class="text-gray-500"><a href="/DataPendampingRw/Index">Data Pendamping RW</a></li>
        <li class="text-gray-500"><a>Checklist</a></li>
        <li id="breadcrumb-active">@nama</li>
    </ul>
</div>

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-semibold text-gray-800">Data PJLP Pendamping</h2>
        <p class="text-sm text-gray-600 mt-1">@nama</p>
    </div>
    <div class="flex items-center gap-3">
        <label class="text-sm font-medium text-gray-700">RW :</label>
        <select class="select select-bordered rounded-lg px-4 py-2" id="select-rt" style="width: 120px;">
            <option value="">Pilih RW</option>
            @for (int i = 1; i <= 10; i++)
            {
                <option>@i.ToString("D2")</option>
            }
        </select>
    </div>
</div>

<div class="card bg-white shadow-sm">
    <div class="card-body p-0">
        <table class="table w-full" id="tableDetailPendamping">
            <thead>
                <tr>
                    <th class="w-12"></th>
                    <th>Tanggal</th>
                    <th>RW</th>
                    <th>Kelurahan</th>
                    <th>Mudah Terurai<br>(Jumlah/Berat)</th>
                    <th>Materi Daur<br>(Jumlah/Berat)</th>
                    <th>B3<br>(Jumlah/Berat)</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script>
    let table;
    let currentRW = '@rw';

    $(document).ready(function () {
        table = new DataTable('#tableDetailPendamping', {
            ajax: {
                url: '@Url.Action("TableDetailPendamping", "DataPendampingRw")',
                data: (d) => ({ rw: currentRW })
            },
            scrollX: true,
            autoWidth: false,
            searching: true,
            paging: true,
            pageLength: 10,
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                {
                    className: 'dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: '<button class="btn btn-xs btn-circle"><span class="icon icon-fill">expand_more</span></button>'
                },
                { data: 'tanggal' },
                { data: 'rw' },
                { data: 'kelurahan' },
                { data: 'mudah_terurai' },
                { data: 'materi_daur' },
                { data: 'b3' }
            ]
        });

        $('#tableDetailPendamping tbody').on('click', 'td.dt-control', function () {
            const tr = $(this).closest('tr');
            const row = table.row(tr);
            const btn = $(this).find('.icon');

            if (row.child.isShown()) {
                row.child.hide();
                btn.text('expand_more');
                tr.removeClass('shown');
            } else {
                row.child(getExpandedContent(row.data())).show();
                btn.text('expand_less');
                tr.addClass('shown');
            }
        });
    });

    // Expand row content
    function getExpandedContent(data) {
        return `
            <div class="px-4 py-3 bg-base-100">
                <div class="flex justify-between items-center pl-10">
                    <div class="grid grid-cols-2 gap-24">
                        <div>
                            <span class="text-sm text-gray-600">Residu (Jumlah/Berat):</span>
                            <div class="font-semibold">${data.residu_jumlah}</div>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">Photo:</span>
                            <div class="font-semibold">${data.photo}</div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-sm btn-ghost rounded-full">Detail</button>
                    </div>
                </div>
            </div>
        `;
    }
</script>