<%- include('partials/header', { title: 'Admin Dashboard' }) %>

<div class="app-container pb-6 mt-1 px-6 sm:px-6 max-w-full overflow-x-hidden">

  <%
    // Hitung jumlah request withdraw yang masih pending
    // Pastikan variabel 'withdrawals' sudah dikirim dari controller
    const pendingWithdrawals = withdrawals.filter(w => w.status === 'pending');
    const pendingWithdrawCount = pendingWithdrawals.length;
    // Opsional: total nominal pending, bisa diaktifkan jika ingin menampilkan nominal
    // const pendingWithdrawAmount = pendingWithdrawals.reduce((sum, w) => sum + w.amount, 0);
  %>

  <div class="grid grid-cols-2 gap-4 mb-8">
    
    <!-- Total Pengguna -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Total Pengguna</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0"><%= stats.totalUsers %></p>
      </div>
    </div>

    <!-- Total Uang Masuk -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Total Deposit</p>
      </div>
      <div class="px-4 py-5 flex items-center justify-start gap-2">
        <p class="text-base font-medium text-gray-800 mb-0">Rp <%= stats.totalDepositAmount.toLocaleString('id-ID') %></p>        
      </div>
    </div>

    <!-- Fee TRX Masuk -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Fee TRX Masuk</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0">Rp <%= stats.totalDepositFee.toLocaleString('id-ID') %></p>
      </div>
    </div>

    <!-- Total Withdraw -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Total Withdraw</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0">Rp <%= stats.totalWithdrawAmount.toLocaleString('id-ID') %></p>
      </div>
    </div>

    <!-- Fee WD Masuk -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Fee WD Masuk</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0">Rp <%= stats.totalWithdrawFee.toLocaleString('id-ID') %></p>
      </div>
    </div>

    <!-- Total Transaksi -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Total Transaksi</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0"><%= stats.totalTransactions %></p>
      </div>
    </div>

    <!-- Total Saldo Pengguna -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Saldo Pengguna</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0">Rp <%= stats.totalUserBalance.toLocaleString('id-ID') %></p>
      </div>
    </div>

    <!-- Request Withdraw (Pending) -->
    <div class="bg-white border border-[#dddddd] rounded-[2px]">
      <div class="bg-[#f9f9f9] border-b border-[#dddddd] px-4 py-3">
        <p class="text-sm font-medium text-gray-700 mb-0">Request Withdraw</p>
      </div>
      <div class="px-4 py-5">
        <p class="text-base font-medium text-gray-800 mb-0"><%= pendingWithdrawCount %></p>
      </div>
    </div>

  </div>
</div>

<%- include('partials/footer') %>