@{
    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="flex items-center gap-2 text-sm mb-6">
    <span class="text-gray-600">Checklist Harian</span>
    <span class="text-gray-400">›</span>
    <span class="font-medium">Detail</span>
</div>

<!-- Header -->
<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-semibold">@tanggalDisplay</h2>
    <a href="/ChecklistHarian/Index" class="btn bg-white hover:bg-gray-50 rounded-full border border-gray-200">
        <span class="icon">arrow_back</span>
        Kembali
    </a>
</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-[30%] 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>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<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 () {

        new DataTable('#detailTable', {
            ajax: '/ChecklistHarian/DetailTable?tanggal=@ViewBag.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: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'material_daur',
                    className: '!align-middle !text-center',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'b3',
                    className: '!align-middle !text-center',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                },
                {
                    data: 'residu',
                    className: '!align-middle !text-center',
                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
                }
            ]
        });
    });
</script>