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

<div class="text-sm breadcrumbs mb-6">
    <ul>
        <li class="text-gray-500"><a href="/DataPendampingRw/Index">Data Pendamping RW</a></li>
        <li><a class="text-gray-600">Checklist</a></li>
        <li><a class="text-gray-600">@nama</a></li>
        <li class="font-medium">Detail</li>
    </ul>
</div>


<!-- Header -->
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-4 mb-6">
    <h2 class="text-2xl font-semibold">
        Rabu, 22 Oktober 2025
    </h2>
    <div class="flex flex-wrap gap-3 justify-end">
        <a href="/DataPendampingRw/Index" 
           class="btn bg-white hover:bg-gray-50 rounded-full">
            <span class="icon">arrow_back</span>
            Kembali
        </a>
        <button type="button" 
                class="btn btn-primary rounded-full text-white border-0">
            <span class="icon icon-fill me-2">check_circle</span>
            Verifikasi
        </button>
        <button class="btn rounded-full bg-white">
            <span class="icon icon-fill me-2">filter_list</span>
            Filter
        </button>
    </div>
</div>


<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="card bg-green-600 text-white shadow-sm rounded-xl">
        <div class="card-body">
            <p class="text-sm opacity-90 mb-1">Mudah Terurai</p>
            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
        </div>
    </div>
    <div class="card bg-yellow-500 text-white shadow-sm rounded-xl">
        <div class="card-body">
            <p class="text-sm opacity-90 mb-1">Material Daur</p>
            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
        </div>
    </div>
    <div class="card bg-red-500 text-white shadow-sm rounded-xl">
        <div class="card-body">
            <p class="text-sm opacity-90 mb-1">B3</p>
            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
        </div>
    </div>
    <div class="card bg-black text-white shadow-sm rounded-xl">
        <div class="card-body">
            <p class="text-sm opacity-90 mb-1">Residu</p>
            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
        </div>
    </div>
</div>

<!-- Table Card -->
<div class="card bg-white shadow-sm rounded-xl">
    <div class="card-body p-0">
        <table class="table" id="detailTable">
            <thead class="bg-gray-50">
                <tr>
                    <th class="w-[5%] text-gray-600 font-medium">No</th>
                    <th class="w-[25%] text-gray-600 font-medium">Alamat Rumah</th>
                    <th class="w-[8%] text-gray-600 font-medium">RW</th>
                    <th class="w-[12%] text-gray-600 font-medium text-center">Mudah Terurai</th>
                    <th class="w-[12%] text-gray-600 font-medium text-center">Material Daur</th>
                    <th class="w-[8%] text-gray-600 font-medium text-center">B3</th>
                    <th class="w-[12%] text-gray-600 font-medium text-center">Residu</th>
                    <th class="w-[10%] text-gray-600 font-medium text-center">Photo</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Modal Image Popup -->
<dialog id="modal_image" class="modal">
    <div class="modal-box max-w-lg p-4">
        <h3 class="font-bold text-base mb-3">Foto Sampah</h3>
        <div class="mb-3">
            <img src="/images/weightrash.jpg" alt="Foto Sampah" class="w-full h-auto rounded-lg">
        </div>
        <div class="modal-action mt-3">
            <form method="dialog">
                <button class="btn btn-sm btn-neutral">Tutup</button>
            </form>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>


<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>

<script>
    $(document).ready(function () {
        const rw = '@rw';
        const tanggal = '@tanggal';

        console.log('RW:', rw, 'Tanggal:', tanggal);

        new DataTable('#detailTable', {
            ajax: '/DataPendampingRw/TableDetailPendamping?rw=' + rw + '&tanggal=' + tanggal,
            scrollX: true,
            autoWidth: false,
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: 'no', className: '!align-middle' },
                { data: 'alamat_rumah', className: '!align-middle' },
                { data: 'rw', className: '!align-middle' },

                {
                    data: 'mudah_terurai',
                    className: '!align-middle !text-center',
                    render: (v) => v
                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
                        : '<input type="checkbox" class="checkbox" />'
                },
                {
                    data: 'material_daur',
                    className: '!align-middle !text-center',
                    render: (v) => v
                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
                        : '<input type="checkbox" class="checkbox" />'
                },
                {
                    data: 'b3',
                    className: '!align-middle !text-center',
                    render: (v) => v
                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
                        : '<input type="checkbox" class="checkbox" />'
                },
                {
                    data: 'residu',
                    className: '!align-middle !text-center',
                    render: (v) => v
                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
                        : '<input type="checkbox" class="checkbox" />'
                },
                {
                    data: 'photo',
                    className: '!align-middle !text-center',
                    render: () => `
                        <button class="btn btn-sm bg-white border rounded-full btn-lihat-gambar">Photo</button>`
                }
            ]
        });

        $(document).on('click', '.btn-lihat-gambar', function() {
            modal_image.showModal();
        });
    });
</script>