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

@section('content')
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <p class="text-sm text-gray-500">Today's Orders</p>
        <p class="text-3xl font-semibold mt-2">{{ $todaysOrders }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <p class="text-sm text-gray-500">Today's Revenue</p>
        <p class="text-3xl font-semibold mt-2">₹{{ number_format($todaysRevenue, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <p class="text-sm text-gray-500">Avg. Order Value</p>
        <p class="text-3xl font-semibold mt-2">₹{{ number_format($avgOrderValue, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <p class="text-sm text-gray-500">Low Stock Items</p>
        <p class="text-3xl font-semibold mt-2 {{ $lowStockItems > 0 ? 'text-red-500' : '' }}">{{ $lowStockItems }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
        <h2 class="font-semibold mb-4">Sales by Hour (Today)</h2>
        <canvas id="salesChart" height="90"></canvas>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <h2 class="font-semibold mb-4">Top Products Today</h2>
        @forelse ($topProducts as $p)
            <div class="flex justify-between text-sm py-1.5 border-b border-gray-50 last:border-0">
                <span>{{ $p->name }}</span>
                <span class="text-gray-500">{{ $p->qty_sold }} sold</span>
            </div>
        @empty
            <p class="text-sm text-gray-400">No sales yet today.</p>
        @endforelse
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-100 p-5">
    <div class="flex justify-between items-center mb-4">
        <h2 class="font-semibold">Recent Orders</h2>
        <a href="{{ route('admin.orders.index') }}" class="text-sm text-orange-600 hover:underline">View all</a>
    </div>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-500 border-b border-gray-100">
                <th class="py-2">Order #</th>
                <th>Source / Staff</th>
                <th>Table</th>
                <th>Items</th>
                <th>Total</th>
                <th>Status</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($recentOrders as $order)
                <tr class="border-b border-gray-50 last:border-0">
                    <td class="py-2">
                        <a href="{{ route('admin.orders.show', $order) }}" class="text-orange-600 hover:underline">{{ $order->order_number }}</a>
                    </td>
                    <td>{{ $order->source === 'mobile' ? 'Mobile / '.($order->placedByStaff->name ?? 'Staff') : 'Kiosk / '.($order->cashier->name ?? '—') }}</td>
                    <td>{{ $order->restaurantTable->name ?? '—' }}</td>
                    <td>{{ $order->items->sum('qty') }}</td>
                    <td>₹{{ number_format($order->grand_total, 2) }}</td>
                    <td>
                        <span class="px-2 py-0.5 rounded-full text-xs
                            {{ $order->status === 'completed' ? 'bg-green-50 text-green-700' :
                               ($order->status === 'cancelled' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700') }}">
                            {{ \App\Models\Order::STATUS_LABELS[$order->status] ?? $order->status }}
                        </span>
                    </td>
                    <td>{{ $order->created_at->format('h:i A') }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('salesChart');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: [@foreach(range(0,23) as $h) '{{ sprintf('%02d:00', $h) }}', @endforeach],
            datasets: [{
                label: 'Revenue (₹)',
                data: [@foreach($hourlyData as $v) {{ $v }}, @endforeach],
                borderColor: '#f97316',
                backgroundColor: 'rgba(249,115,22,0.1)',
                fill: true,
                tension: 0.3,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
    });
</script>
@endsection