@{
    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 -->

<!-- Modal Informasi belum lengkap  -->
<dialog id="not_complete_modal" class="modal">
    <div class="modal-box max-w-2xl">
      <!-- Close button -->
      <form method="dialog">
        <button onclick="not_complete_modal.close()" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
      </form>
      
        <!-- Content -->
        <div class="p-6">
            <!-- Icon -->
            <div class="flex mb-4">
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                    <i class="ph ph-info text-3xl text-red-600"></i>
                </div>
            </div>
            
            <!-- Heading -->
            <h3 class="font-bold text-lg mb-3 text-gray-800">
            Hai, [Nama Nasabah]!
            </h3>
            
            <!-- Paragraph -->
            <p class="text-gray-600 text-sm leading-relaxed">
            Saat ini Anda belum terdaftar pada Bank Sampah Unit di wilayah tempat tinggal Anda. Silakan lakukan pendaftaran melalui menu "Bank Sampah Saya" agar dapat mulai melakukan transaksi sampah dan berkontribusi dalam pengelolaan lingkungan bersama DLH DKI Jakarta 🌿
            </p>
        </div>
    </div>
    
    <!-- Modal backdrop -->
    <form method="dialog" class="modal-backdrop">
      <button onclick="not_complete_modal.close()">close</button>
    </form>
</dialog>
<!-- /modaModal Informasi belum lengkap -->

<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 cursor-pointer" onclick="not_complete_modal.showModal()">
            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>

}