@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Total Orders</div>
                <div class="fs-3 fw-bold">{{ number_format($stats['total_orders']) }}</div>
                <div class="text-muted small">{{ $stats['orders_today'] }} today</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Revenue Today</div>
                <div class="fs-3 fw-bold">₹{{ number_format($stats['revenue_today'], 2) }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Active Restaurants</div>
                <div class="fs-3 fw-bold">{{ number_format($stats['active_restaurants']) }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Active (Online) Riders</div>
                <div class="fs-3 fw-bold">{{ number_format($stats['active_riders']) }}</div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Pending Restaurant KYC</div>
                <div class="fs-4 fw-bold text-warning">{{ $stats['pending_restaurant_kyc'] }}</div>
                <a href="{{ route('admin.restaurants.index', ['status' => 'pending']) }}" class="small">Review &rarr;</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card p-3">
                <div class="text-muted small">Pending Rider KYC</div>
                <div class="fs-4 fw-bold text-warning">{{ $stats['pending_rider_kyc'] }}</div>
                <a href="{{ route('admin.riders.index', ['status' => 'pending']) }}" class="small">Review &rarr;</a>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-md-7">
            <div class="stat-card p-3">
                <h6 class="mb-3">Orders - Last 7 Days</h6>
                <canvas id="ordersChart" height="120"></canvas>
            </div>
        </div>
        <div class="col-md-5">
            <div class="stat-card p-3">
                <h6 class="mb-3">Top Selling Items</h6>
                <table class="table table-sm mb-0">
                    <thead>
                        <tr><th>Item</th><th class="text-end">Qty Sold</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($topSellingItems as $row)
                            <tr>
                                <td>{{ $row->menuItem->name ?? 'Deleted item' }}</td>
                                <td class="text-end">{{ $row->total_qty }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="2" class="text-muted">No sales data yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </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>
    const ctx = document.getElementById('ordersChart');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: [@foreach ($ordersByDay as $row)'{{ $row->day }}',@endforeach],
            datasets: [{
                label: 'Orders',
                data: [@foreach ($ordersByDay as $row){{ $row->total }},@endforeach],
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13,110,253,0.1)',
                tension: 0.3,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
</script>
@endpush