@{
    ViewData["Title"] = "Dashboard Satpel";
}

<!-- Modal Notifikasi -->
<dialog id="modalNotifikasi" class="modal">
    <div class="modal-box max-w-lg rounded-2xl bg-white p-8 shadow-xl">
        <!-- Icon Warning -->
        <div class="flex justify-center mb-6">
            <div class="relative w-24 h-24 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 flex items-center justify-center ring-4 ring-amber-400">
                <div class="w-14 h-14 rounded-lg bg-amber-500 flex items-center justify-center rotate-45">
                    <span class="text-white text-3xl font-bold -rotate-45">!</span>
                </div>
            </div>
        </div>

        <!-- Title -->
        <h3 class="text-xl font-bold text-center text-gray-900 mb-5 px-8">
            Selamat Datang Bapak/Ibu Hartono
        </h3>

        <!-- Message -->
        <div class="text-center text-gray-600 text-base leading-relaxed mb-8 space-y-3 px-10">
            <p>
                Menginformasikan bahwa ada <span class="font-semibold text-gray-900">45 checklist harian</span> belum verifikasi (terlewat/diragukan kebenarannya).
            </p>
            <p>
                Mohon untuk segera melakukan pengecekan checklist harian dan verifikasi jika sudah pasti kebenarannya. Terimakasih
            </p>
        </div>

        <div class="modal-action justify-center mt-0 px-6">
            <button onclick="modalNotifikasi.close()" class="btn w-full max-w-md rounded-full border-2 border-gray-300 bg-white hover:bg-gray-50 text-gray-900 font-semibold normal-case text-base h-12 min-h-12 outline-none focus:outline-none focus:ring-0 active:ring-0">
            Tutup
            </button>
        </div>

    </div>
    <!-- Backdrop -->
    <form method="dialog" class="modal-backdrop bg-black/40">
        <button>close</button>
    </form>
</dialog>

<div class="grid grid-cols-1 items-stretch gap-4 lg:grid-cols-12">
    <!-- Profil RW -->
    <div class="card card-border h-full bg-white lg:col-span-9">
        <div class="card-body">
            <div class="flex flex-col items-center justify-between gap-2 lg:flex-row">
                <h2 class="w-full text-lg font-bold md:w-1/2">Profil Suku Dinas Lingkungan Hidup Jakarta Timur</h2>
                <div class="flex w-full items-center justify-end gap-2 md:w-1/2">
                    <select id="filterPeriod" class="select select-bordered select-sm w-32">
                        <option selected>Tahunan</option>
                        <option>Bulanan</option>
                        <option>Harian</option>
                    </select>
                    <input type="month" id="monthPicker" class="input input-bordered input-sm w-40 hidden" placeholder="Pilih Bulan">
                </div>
            </div>
            <div class="h-2"></div>
            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4">
                <!-- Stat Jumlah RT -->
                <div class="stats bg-primary border border-gray-300 text-white">
                    <div class="stat">
                        <div class="stat-title items-center text-lg text-white">
                            <i class="ph ph-house-simple"></i>
                            <span class="font-semibold">Jumlah RW</span>
                        </div>
                        <div class="stat-value">23</div>
                    </div>
                </div>
                <!-- Stat Jumlah Rumah -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-house-line"></i>
                            <span class="font-semibold">Jumlah Rumah</span>
                        </div>
                        <div class="stat-value">23,004</div>
                    </div>
                </div>
                <!-- Stat Jumlah Jiwa -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-users-four"></i>
                            <span class="font-semibold">Jumlah Jiwa (Orang)</span>
                        </div>
                        <div class="stat-value">179,797</div>
                    </div>
                </div>
                <!-- Stat Estimasi Timbulan -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-trash"></i>
                            <span class="font-semibold">Estimasi Timbulan</span>
                        </div>
                        <div class="stat-value">3,341</div>
                        <div class="stat-desc">Kg/Hari</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card h-full lg:col-span-3">
        <div class="card-body flex h-full flex-col gap-4 p-0">
            <!-- Stat Jumlah Rumah Memilah -->
            <div class="stats flex-1 bg-white">
                <div class="stat">
                    <div class="stat-title items-center text-lg">
                        <i class="ph ph-trash"></i>
                        <span class="font-semibold">Jumlah Rumah Memilah</span>
                    </div>
                    <div class="flex items-end gap-3">
                        <div class="stat-value">46</div>
                        <span class="badge badge-soft badge-outline badge-success rounded-full border-2 px-2 py-1 text-sm">40%</span>
                    </div>
                </div>
            </div>
            <!-- Stat Jumlah Rumah Nasabah -->
            <div class="stats flex-1 bg-white">
                <div class="stat">
                    <div class="stat-title items-center text-lg">
                        <i class="ph ph-trash"></i>
                        <span class="font-semibold">Jumlah Rumah Nasabah</span>
                    </div>
                    <div class="flex items-end gap-3">
                        <div class="stat-value">46</div>
                        <span class="badge badge-soft badge-outline badge-success rounded-full border-2 px-2 py-1 text-sm">40%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="h-4"></div>

<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
    <!-- Card Bank Sampah -->
    <div class="card bg-white lg:col-span-4 xl:col-span-2">
        <div class="card-body">
            <h2 class="card-title">
                Bank Sampah
            </h2>
            <div class="flex flex-row items-center justify-between gap-2 rounded p-4">
                <div class="flex items-center">
                    <div class="badge badge-success badge-xs me-2"></div>
                    Aktif
                </div>
                <span class="text-primary font-bold">35</span>
            </div>
            <div class="flex flex-row items-center justify-between gap-2 rounded p-4">
                <div class="flex items-center">
                    <div class="badge badge-error badge-xs me-2"></div>
                    Tidak Aktif
                </div>
                <span class="text-primary font-bold">35</span>
            </div>

            <div class="card-actions justify-center">
                <a href="@Url.Action("Index", "DataBankSampah")" class="btn btn-link text-primary no-underline"> Selengkapnya</a>
            </div>
        </div>
    </div>
    <!-- Card Profil Satuan Pelaksana Pancoran -->
    <div class="card bg-white lg:col-span-4 xl:col-span-7">
        <div class="card-body">
            <div class="flex flex-col items-center xl:flex-row">
                <h2 class="w-full text-lg font-bold xl:w-1/2">Volume Jenis Sampah</h2>
                <div class="flex w-full flex-col justify-end gap-4 xl:w-1/2 xl:flex-row">
                    <a href="@Url.Action("Index", "DataBeratSampah")" class="btn btn-link text-primary no-underline"> Selengkapnya</a>
                </div>
            </div>
            <div class="h-2"></div>
            <div class="grid grid-cols-1 gap-2 xl:grid-cols-4">
                <!-- Stat Organik -->
                <div class="stats bg-primary border border-gray-300 text-white">
                    <div class="stat">
                        <div class="stat-title items-center text-lg text-white">
                            <i class="ph ph-leaf"></i>
                            <span class="font-semibold">Organik</span>
                        </div>
                        <div class="stat-value">46</div>
                    </div>
                </div>
                <!-- Stat Anorganik -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-cylinder"></i>
                            <span class="font-semibold">Anorganik</span>
                        </div>
                        <div class="stat-value">179,797</div>
                    </div>
                </div>
                <!-- Stat B3 -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-car-battery"></i>
                            <span class="font-semibold">B3</span>
                        </div>
                        <div class="stat-value">3,341</div>
                    </div>
                </div>
                <!-- Stat Total -->
                <div class="stats border border-gray-300">
                    <div class="stat">
                        <div class="stat-title items-center text-lg">
                            <i class="ph ph-arrows-counter-clockwise"></i>
                            <span class="font-semibold">Total</span>
                        </div>
                        <div class="stat-value">23,004</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Card Neraca Sampah -->
    <div class="card bg-white lg:col-span-4 xl:col-span-3">
        <div class="card-body">
            <h2 class="card-title">
                Neraca Sampah
            </h2>
            <span class="text-gray-500">Estimasi Timbulan - Pengurangan Sampah</span>
            <span class="text-primary font-semibold">73.112 - 0</span>
            <div class="bg-primary flex flex-row items-center justify-between gap-2 rounded p-4 text-white">
                <span>Neraca Sampah</span>
                <span class="font-bold">73.112</span>
            </div>
        </div>
    </div>
</div>

<div class="h-4"></div>

<div class="card bg-white">
    <div class="card-body h-80 w-full">
        <div class="flex flex-col items-center justify-between lg:flex-row">
            <h2 class="w-full text-lg font-bold md:w-1/2">Grafik Rumah Aktif Memilah</h2>
        </div>
        <canvas id="acquisitions" class="h-full w-full"></canvas>
    </div>
</div>

<div class="h-4"></div>

<!-- Table Laporan Rumah Memilah -->
<div class="card bg-white shadow-sm">
    <div class="card-body">
        <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
            <h2 class="text-lg font-bold">Laporan Rumah Memilah</h2>
            <div class="flex flex-wrap items-center gap-2">
                <input type="month" id="filterBulanTable" class="px-4 py-2 border bg-white rounded-full"
                    min="2020-01" max="@DateTime.Now.ToString("yyyy-MM")" value="@DateTime.Now.ToString("yyyy-MM")" />
                <a class="btn btn-primary text-white rounded-full" href="#">
                    <span class="icon icon-fill me-2">download</span>
                    Download
                </a>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <table class="table table-zebra w-full" id="tableLaporanRumahMemilah">
            <thead>
                <tr>
                    <th class="w-[5%]">No</th>
                    <th class="w-[35%]">Wilayah</th>
                    <th class="w-[20%]">Total Rumah</th>
                    <th class="w-[20%]">Total Rumah Memilah</th>
                    <th class="w-[20%]">Capaian Target (%)</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script src="/lib/chart.js/chart.umd.js"></script>
<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>

    // Filter period handler
    const filterPeriod = document.getElementById('filterPeriod');
    const monthPicker = document.getElementById('monthPicker');
    const now = new Date();
    const currentMonth = now.toISOString().slice(0, 7); 
    monthPicker.value = currentMonth;
    
    filterPeriod.addEventListener('change', function() {
        if (this.value === 'Bulanan') {
            monthPicker.classList.remove('hidden');
            monthPicker.value = currentMonth;
        } else {
            monthPicker.classList.add('hidden');
        }
    });
    
    monthPicker.addEventListener('change', function() {
        console.log('Selected month:', this.value);
    });

    const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

    // contoh data variasi
    const greenData = [10, 15, 12, 20, 18, 25, 23, 28, 26, 30, 32, 35];
    const redData   = [8, 12, 10, 15, 14, 18, 17, 22, 20, 25, 24, 28];

    new Chart(document.getElementById("acquisitions"), {
      type: "line",
      data: {
        labels: labels,
        datasets: [
          {
            label: "Data Hijau",
            data: greenData,
            borderColor: "oklch(72.3% 0.219 149.579)",
            backgroundColor: "oklch(92.5% 0.084 155.995 / 0.25)",
            tension: 0.4,
            fill: true,
            borderWidth: 2,
            pointRadius: 3,
          },
          {
            label: "Data Merah",
            data: redData,
            borderColor: "oklch(63.7% 0.237 25.331)",
            backgroundColor: "oklch(63.7% 0.237 25.331 / 0.25)",
            tension: 0.4,
            fill: true,
            borderWidth: 2,
            pointRadius: 3,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
          padding: {
            bottom: 32
          }
        },
        plugins: {
          legend: {
            position: "bottom",
            display: true,
            labels: {
              usePointStyle: true,
              pointStyle: "circle",
            }
          },
          tooltip: {
            enabled: true
          }
        },
        scales: {
          x: {
            grid: { display: false }
          },
          y: {
            beginAtZero: true,
            grid: { color: "rgba(0,0,0,0.05)" }
          }
        }
      }
    });

    // DataTable initialization
    $(document).ready(function () {
        const table = new DataTable('#tableLaporanRumahMemilah', {
            ajax: '@Url.Action("Table", "DashboardSudin")',
            scrollX: true,
            autoWidth: false,
            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: 'wilayah' },
                { 
                    data: 'totalRumah',
                    render: data => data.toLocaleString("id-ID")
                },
                { 
                    data: 'totalRumahMemilah',
                    render: data => data.toLocaleString("id-ID")
                },
                { data: 'capaianTarget' }
            ]
        });

        // Filter bulan handler
        $('#filterBulanTable').on('change', function() {
            const bulan = $(this).val();
            console.log('Filter bulan:', bulan);
        });

        // Auto show modal notification on page load
        const modal = document.getElementById('modalNotifikasi');
        if (modal) {
            modal.showModal();
        }
    });
</script>