@extends('layouts.admin')
@section('page-title', 'Admin Dashboard')

@section('content')
<div class="row g-3 mb-4">
    @php
        $cards = [
            ['Total Customers', $totalUsers, 'people'],
            ['Active Customers', $activeUsers, 'person-check'],
            ['Total Products', $totalProducts, 'box-seam'],
            ['Total Stock Value', '₹' . number_format($stockValue, 2), 'cash-stack'],
            ["Today's Orders", $todaysOrders, 'clipboard-check'],
            ['Pending Orders', $pendingOrders, 'hourglass-split'],
            ['Monthly Sales', '₹' . number_format($monthlySales, 2), 'graph-up'],
            ['Outstanding Payments', '₹' . number_format($outstanding, 2), 'exclamation-triangle'],
        ];
    @endphp
    @foreach ($cards as [$label, $value, $icon])
    <div class="col-6 col-lg-3">
        <div class="card card-stat h-100">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small text-uppercase">{{ $label }}</div>
                    <div class="display-6 fs-4">{{ $value }}</div>
                </div>
                <i class="bi bi-{{ $icon }} fs-2 text-primary"></i>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h6 class="fw-bold mb-3">Monthly Sales (last 6 months)</h6>
                <canvas id="salesChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h6 class="fw-bold mb-3">Top Selling Products</h6>
                <canvas id="topProductsChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h6 class="fw-bold mb-3">Stock Status</h6>
                <canvas id="stockChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('salesChart'), {
    type: 'line',
    data: {
        labels: @json($salesByMonth->pluck('label')),
        datasets: [{ label: 'Sales (₹)', data: @json($salesByMonth->pluck('sales')), borderColor: '#2f5fe0', tension: 0.3 }]
    }
});
new Chart(document.getElementById('topProductsChart'), {
    type: 'bar',
    data: {
        labels: @json($topProducts->pluck('product_name')),
        datasets: [{ label: 'Revenue (₹)', data: @json($topProducts->pluck('revenue')), backgroundColor: '#2f5fe0' }]
    },
    options: { indexAxis: 'y' }
});
new Chart(document.getElementById('stockChart'), {
    type: 'doughnut',
    data: {
        labels: @json($stockStatus->pluck('status')),
        datasets: [{ data: @json($stockStatus->pluck('count')), backgroundColor: ['#2f5fe0', '#f59e0b', '#ef4444', '#94a3b8'] }]
    }
});
</script>
@endpush