@extends('backend.master')
@section('title','Admin Dashboard')

@section('content')

{{-- Chart.js CDN --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

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

    {{-- Header --}}
    <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>

    {{-- ========== 8 STAT CARDS ========== --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-6">

        {{-- Total users --}}
        <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">{{ number_format($totalUsers) }}</p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Active: <span class="font-semibold text-emerald-600">{{ 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>

        {{-- Total loans --}}
        <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">{{ number_format($totalLoans) }}</p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Running: <span class="font-semibold text-sky-600">{{ 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>

        {{-- Pending loans --}}
        <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">{{ 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>

        {{-- Completed / rejected --}}
        <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">
                        {{ 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">{{ 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>

        {{-- Total disbursed --}}
        <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">
                        ৳ {{ 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>

        {{-- EMI stats --}}
        <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">{{ number_format($overdueEmi) }}</p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Overdue EMI • Paid:
                        <span class="font-semibold text-emerald-600">{{ 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>

        {{-- Withdraws --}}
        <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">{{ number_format($pendingWithdraw) }}</p>
                    <p class="mt-1 text-[11px] text-slate-500">
                        Approved amount: <span class="font-semibold text-slate-800">
                            ৳ {{ 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>

        {{-- Active balance (all users total balance) --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
            @php
                $totalBalance = \App\Models\User::sum('balance');
            @endphp
            <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">
                        ৳ {{ 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>

    {{-- ========== CHARTS ROW (2 ta graph) ========== --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- Chart 1: Loans created vs approved (last 6 months) --}}
        <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>

            {{-- 🔹 FIXED HEIGHT container (220px) --}}
            <div style="height:220px; max-height:220px;">
                <canvas id="loansChart"></canvas>
            </div>
        </div>

        {{-- Chart 2: Deposits vs Withdraws (amount) --}}
        <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>

            {{-- 🔹 FIXED HEIGHT container (220px) --}}
            <div style="height:220px; max-height:220px;">
                <canvas id="moneyChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ====== Chart JS Setup ====== --}}
<script>
    const chartLabels      = @json($chartMonths);
    const loansCreated     = @json($chartLoansCreated);
    const loansApproved    = @json($chartLoansApproved);
    const depositAmounts   = @json($chartDepositAmount);
    const withdrawAmounts  = @json($chartWithdrawAmount);

    // 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>

@endsection