<?php $__env->startSection('title','Admin Dashboard'); ?>

<?php $__env->startSection('content'); ?>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="w-full px-4 sm:px-6 lg:px-8 py-6">

    
    <div class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl sm:text-2xl font-extrabold text-slate-800">
                Admin Dashboard
            </h1>
            <p class="text-xs sm:text-sm text-slate-500 mt-1">
                Loan, user & transaction overview (live data).
            </p>
        </div>
    </div>

    
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-6">

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Total Users</p>
                    <p class="mt-2 text-2xl font-extrabold text-slate-900"><?php echo e(number_format($totalUsers)); ?></p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Active: <span class="font-semibold text-emerald-600"><?php echo e(number_format($activeUsers)); ?></span>
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                    <i class="fa-solid fa-users"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Total Loans</p>
                    <p class="mt-2 text-2xl font-extrabold text-slate-900"><?php echo e(number_format($totalLoans)); ?></p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Running: <span class="font-semibold text-sky-600"><?php echo e(number_format($runningLoans)); ?></span>
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600">
                    <i class="fa-solid fa-layer-group"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Pending Loans</p>
                    <p class="mt-2 text-2xl font-extrabold text-amber-500"><?php echo e(number_format($pendingLoans)); ?></p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Waiting for deposit / approval
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-500">
                    <i class="fa-solid fa-hourglass-half"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Completed / Rejected</p>
                    <p class="mt-2 text-xl font-extrabold text-emerald-600">
                        <?php echo e(number_format($completedLoans)); ?>

                        <span class="text-xs text-slate-400">completed</span>
                    </p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Rejected: <span class="font-semibold text-rose-600"><?php echo e(number_format($rejectedLoans)); ?></span>
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                    <i class="fa-solid fa-circle-check"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Total Disbursed</p>
                    <p class="mt-2 text-2xl font-extrabold text-slate-900">
                        ৳ <?php echo e(number_format($totalDisbursed)); ?>

                    </p>
                    <p class="mt-1 text-[11px] text-slate-500">Running + Completed loans amount</p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                    <i class="fa-solid fa-sack-dollar"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Installments</p>
                    <p class="mt-2 text-2xl font-extrabold text-rose-500"><?php echo e(number_format($overdueEmi)); ?></p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Overdue EMI • Paid:
                        <span class="font-semibold text-emerald-600"><?php echo e(number_format($paidEmi)); ?></span>
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-50 text-rose-500">
                    <i class="fa-solid fa-calendar-xmark"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Withdraw Requests</p>
                    <p class="mt-2 text-2xl font-extrabold text-indigo-600"><?php echo e(number_format($pendingWithdraw)); ?></p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Approved amount: <span class="font-semibold text-slate-800">
                            ৳ <?php echo e(number_format($totalWithdrawn)); ?>

                        </span>
                    </p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                    <i class="fa-solid fa-arrow-right-arrow-left"></i>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <?php
                $totalBalance = \App\Models\User::sum('balance');
            ?>
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-slate-500 font-semibold">Total Wallet Balance</p>
                    <p class="mt-2 text-2xl font-extrabold text-slate-900">
                        ৳ <?php echo e(number_format($totalBalance)); ?>

                    </p>
                    <p class="mt-1 text-[11px] text-slate-500">Current user wallet sum</p>
                </div>
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-50 text-slate-600">
                    <i class="fa-solid fa-wallet"></i>
                </div>
            </div>
        </div>

    </div>

    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h2 class="text-sm font-semibold text-slate-800">Loans – Created vs Approved</h2>
                    <p class="text-[11px] text-slate-500">Last 6 months</p>
                </div>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-sky-50 text-sky-600">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
            </div>

            
            <div style="height:220px; max-height:220px;">
                <canvas id="loansChart"></canvas>
            </div>
        </div>

        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h2 class="text-sm font-semibold text-slate-800">Deposits vs Withdraw</h2>
                    <p class="text-[11px] text-slate-500">Approved amount (last 6 months)</p>
                </div>
                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                    <i class="fa-solid fa-chart-column"></i>
                </div>
            </div>

            
            <div style="height:220px; max-height:220px;">
                <canvas id="moneyChart"></canvas>
            </div>
        </div>
    </div>
</div>


<script>
    const chartLabels      = <?php echo json_encode($chartMonths, 15, 512) ?>;
    const loansCreated     = <?php echo json_encode($chartLoansCreated, 15, 512) ?>;
    const loansApproved    = <?php echo json_encode($chartLoansApproved, 15, 512) ?>;
    const depositAmounts   = <?php echo json_encode($chartDepositAmount, 15, 512) ?>;
    const withdrawAmounts  = <?php echo json_encode($chartWithdrawAmount, 15, 512) ?>;

    // Chart 1
    const ctxLoans = document.getElementById('loansChart').getContext('2d');
    new Chart(ctxLoans, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [
                {
                    label: 'Loans Created',
                    data: loansCreated,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99,102,241,.12)',
                    tension: 0.3,
                    borderWidth: 2,
                    pointRadius: 3,
                },
                {
                    label: 'Loans Approved',
                    data: loansApproved,
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34,197,94,.12)',
                    tension: 0.3,
                    borderWidth: 2,
                    pointRadius: 3,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false, // 📌 container height (220px) follow করবে
            scales: {
                y: { beginAtZero: true, ticks: { precision:0 } }
            },
            plugins: {
                legend: { labels:{ font:{ size:11 } } }
            }
        }
    });

    // Chart 2
    const ctxMoney = document.getElementById('moneyChart').getContext('2d');
    new Chart(ctxMoney, {
        type: 'bar',
        data: {
            labels: chartLabels,
            datasets: [
                {
                    label: 'Approved Deposits (৳)',
                    data: depositAmounts,
                    backgroundColor: 'rgba(14,165,233,.85)',
                    borderRadius: 6,
                    maxBarThickness: 26
                },
                {
                    label: 'Approved Withdraw (৳)',
                    data: withdrawAmounts,
                    backgroundColor: 'rgba(248,113,113,.85)',
                    borderRadius: 6,
                    maxBarThickness: 26
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false, // 📌 container height (220px) follow করবে
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { callback: v => v.toLocaleString() }
                }
            },
            plugins: {
                legend: { labels:{ font:{ size:11 } } }
            }
        }
    });
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('backend.master', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/ecareba2/loan.rkmotorsbike.top/resources/views/backend/dashboard.blade.php ENDPATH**/ ?>