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

<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 Nasabah</span>
    </div>
</div>

<!-- Modal Popup Informasi Prestasi  -->
<dialog id="success_modal" class="modal">
    <div class="modal-box max-w-2xl">
      <!-- Close button -->
      <form method="dialog">
        <button onclick="success_modal.close()" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
      </form>
      
      <!-- Content with horizontal layout -->
      <div class="flex gap-6 py-4">
        <!-- Left side - Confetti icon -->
        <div class="flex-shrink-0 w-24 h-24 bg-cover bg-center bg-no-repeat hidden md:block" style="background-image: url('/images/welcome_modal.svg');">
          
        </div>

        <!-- Right side - Text content -->
        <div class="flex-1 text-left">
          <!-- Heading -->
          <h3 class="font-bold text-xl mb-3 text-gray-800">
            Selamat, [Nama Nasabah]!
          </h3>
          
          <!-- First paragraph -->
          <p class="text-gray-700 mb-4 leading-relaxed">
            Anda telah berhasil melakukan transaksi sebanyak <span class="font-semibold">[jumlah_kg]</span> Kg pada bulan ini.
          </p>
          
          <!-- Second paragraph -->
          <p class="text-gray-700 leading-relaxed">
            Terima kasih telah berpartisipasi aktif dalam program e-Bank Sampah DLH DKI Jakarta untuk menjaga kebersihan dan kelestarian lingkungan 🌱
          </p>
        </div>
      </div>
    </div>
    
    <!-- Modal backdrop -->
    <form method="dialog" class="modal-backdrop">
      <button onclick="success_modal.close()">close</button>
    </form>
</dialog>
<!-- /modal Popup Informasi Prestasi -->

<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">Ikhdan Nizar Maulana</span>
        <div class="badge badge-warning text-white text-xs bg-[#F97316] rounded-full mt-4">
            Status Aktif
        </div>
    </div>
</div>

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div class="stats bg-white">
        <div class="stat">
            <div class="stat-title">Sampah hari ini total sampah yang anda kelola sebanyak</div>
            <div class="text-3xl">25.343 Kg</div>
        </div>
    </div>
    <div class="stats bg-white">
        <div class="stat">
            <div class="stat-title">Rupiah yang anda peroleh sebanyak</div>
            <div class="text-3xl">Rp. 124.000</div>
        </div>
    </div>
</div>

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <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>Monthly</option>
                    <option>Quarterly</option>
                    <option>Yearly</option>
                </select>
            </div>
        
            <div class="w-full overflow-x-auto">
                <div class="min-w-[900px]"> 
                    <div class="h-64 md:h-96 relative">
                    <canvas id="recycleChart_1" class="w-full h-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>Monthly</option>
                    <option>Quarterly</option>
                    <option>Yearly</option>
                </select>
            </div>
        
            <div class="w-full overflow-x-auto">
                <div class="min-w-[900px]"> 
                    <div class="h-64 md:h-96 relative">
                    <canvas id="recycleChart_2" 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(() => {
        success_modal.showModal();
        new DataTable('#example', {
            ajax: '/Main/DashboardNasabah/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,
                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)");
    createLineChart("recycleChart_2", "rgba(247, 144, 9, 0.41)", "rgba(247, 144, 9, 0.41)", "rgba(255, 219, 172, 0)");
</script>

}