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

<div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
    <div class="prose">
        <span class="text-xl font-semibold text-black">Dashboard BSU</span> <-- Update data --!>
    </div>
</div>

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

<div class="card bg-white md:bg-[url(/images/image-welcome-dashboard.png)] md:bg-local md:bg-right md:bg-no-repeat mb-2">
    <div class="card-body gap-0">
        <span class="text-gray-500">Selamat Datang</span>
        <span class="bg-gradient-to-r from-[#089A7B] to-[#46C881] bg-clip-text text-2xl font-semibold text-transparent">BSU Jakarta Timur</span>
    </div>
</div>

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
    <div class="stats bg-white">
        <div class="stat">
            <div class="stat-title">Total Sampah BSU</div>
            <div class="stat-value">5,812 Kg</div>
            <div class="stat-desc">
                <span class="text-green-600">
                    <i class="ph ph-arrow-up"></i>
                    40%
                </span>
                vs bulan kemarin
            </div>
        </div>
    </div>
    <div class="stats bg-white">
        <div class="stat">
            <div class="stat-title">Total Sampah BSU</div>
            <div class="stat-value">5,812 Kg</div>
            <div class="stat-desc">
                <span class="text-green-600">
                    <i class="ph ph-arrow-up"></i>
                    40%
                </span>
                vs bulan kemarin
            </div>
        </div>
    </div>
    <div class="stats bg-white">
        <div class="stat">
            <div class="stat-title">Total Sampah Offtaker</div>
            <div class="stat-value">89.4 Kg</div>
            <div class="stat-desc">
                <span class="text-green-600">
                    <i class="ph ph-arrow-up"></i>
                    40%
                </span>
                vs bulan kemarin
            </div>
        </div>
    </div>
</div>

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

<div class="grid grid-cols-1 gap-4">
    <div class="card bg-white shadow-sm">
        <div class="card-body pt-4 px-3">
            <div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
                <div class="prose">
                    <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
                        Sampah Daur Ulang Terkelola (Kg)
                    </span>
                </div>
                <select class="bg-transparent focus:outline-none text-sm px-2 py-1">
                    <option selected>Yearly</option>
                    <option>Monthly</option>
                    <option>Quarterly</option>
                </select>
            </div>
        
            <div class="w-full overflow-x-auto">
                <div class="w-full"> 
                    <div class="h-64 md:h-96 relative">
                    <canvas id="recycleChart_1" class="w-full h-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

 <div class="card bg-white shadow-sm">
    <div class="card-body pt-4 px-3">
       <div class="w-full overflow-x-auto">
            <table class="table-zebra table w-full" id="example">
                <!-- head -->
                <thead>
                    <tr>
                        <th class="w-[10%]">No</th>
                        <th class="w-[45%]">Kategori Sampah</th>
                        <th class="w-[45%]">Total Berat Sampah(Kg)</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="~/js/chart.js"></script>
@section Scripts {
<script type="text/javascript">
    const labels = [
        "Jan", "Feb", "Mar", "Apr", "Mei", "Jun",
        "Jul", "Agu", "Sep", "Okt", "Nov", "Des"
    ];

    const dataValues = [
        50000, 38000, 45000, 60000, 100000,
        20000, 55000, 70000, 60000, 75000,
        90000, 110000
    ];

    $(document).ready(() => {
        new DataTable('#example', {
            ajax: '/Main/Dashboard/Table',
            scrollX: true,
            autoWidth: false,
            initComplete: () => {
                $('div.dt-scroll-body thead').css('visibility', 'collapse');
            },
            columns: [
                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                { data: 'kategori' },
                { data: 'total_berat' },
            ]
        });
    });

    // ---------------------------------------------------------
    //  Utility: Create gradient
    // ---------------------------------------------------------
    function createGradient(ctx, color, color2) {
        const g = ctx.createLinearGradient(0, 0, 0, 220);
        g.addColorStop(0, color);
        g.addColorStop(1, color2);
        return g;
    }

    // ---------------------------------------------------------
    //  Utility: Create Chart
    // ---------------------------------------------------------
    function createLineChart(canvasId, borderColor, gradientColor, gradientColor2) {
        const ctx = document.getElementById(canvasId).getContext("2d");

        new Chart(ctx, {
            type: "line",
            data: {
                labels,
                datasets: [
                    {
                        data: dataValues,
                        borderColor: borderColor,
                        borderWidth: 3,
                        backgroundColor: createGradient(ctx, gradientColor, gradientColor2),
                        fill: true,
                        tension: 0,
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 0,
                        pointRadius: 0,
                        pointHoverRadius: 0,
                        borderDash: [6, 6],
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: "#6b7280", font: { size: 12 } }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: v => v >= 1000 ? v / 1000 + "k" : v,
                            color: "#6b7280",
                            font: { size: 12 }
                        },
                        grid: { color: "rgba(0,0,0,0.06)" }
                    }
                }
            }
        });
    }

    // ---------------------------------------------------------
    //  Render Both Charts
    // ---------------------------------------------------------
    createLineChart("recycleChart_1", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0)");
</script>

}