@{
    ViewData["Title"] = "Detail Checklist Harian";
    var tanggal = DateTime.Parse(ViewBag.Tanggal);
    var tanggalDisplay = tanggal.ToString("dddd, dd MMMM yyyy", new System.Globalization.CultureInfo("id-ID"));
}

<div class="breadcrumbs text-sm">
    <ul>
        <li class="text-gray-500"><a>Data Verifikasi</a></li>
        <li class="text-gray-500"><a href="/DataVerifikasiChecklistHarian/Index">Checklist Harian</a></li>
        <li>Detail</li>
    </ul>
</div>

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mb-6">
    <div>
        <h3 class="text-2xl font-semibold">@tanggalDisplay</h3>
    </div>
    <div class="justify-self-end lg:self-center">
        <a href="/DataVerifikasiChecklistHarian/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>
    </div>
</div>

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

<!-- Table Card -->
<div class="card bg-white shadow-sm">
    <div class="card-body p-0">
        <table class="table table-zebra" id="detailTable">
            <thead>
                <tr>
                    <th class="w-[5%]">No</th>
                    <th class="w-[35%]">Alamat Rumah</th>
                    <th class="w-[8%]">RW</th>
                    <th class="w-[10%]">Mudah Terurai</th>
                    <th class="w-[10%]">Material Daur</th>
                    <th class="w-[8%]">B3</th>
                    <th class="w-[10%]">Residu</th>
                    <th class="w-[14%]">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="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>
    $(document).ready(function () {
        new DataTable('#detailTable', {
            ajax: '/DataVerifikasiChecklistHarian/DetailTable?tanggal=@ViewBag.Tanggal&rw=@ViewBag.RW',
            scrollX: true,
            autoWidth: false,
            initComplete: function () {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: 'no' },
                { data: 'alamat_rumah' },
                { data: 'rw' },
                {
                    data: 'mudah_terurai',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'material_daur',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'b3',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'residu',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                { data: 'photo' }
            ]
        });

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