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

@section('content')
{{-- Welcome banner --}}
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-red-700 via-red-800 to-zinc-900 text-white p-7 mb-6 shadow-lg shadow-red-900/20">
    <div class="absolute -right-14 -top-20 w-64 h-64 rounded-full bg-white/5"></div>
    <div class="relative flex items-center justify-between flex-wrap gap-4">
        <div>
            <h1 class="text-xl font-semibold mb-1">Welcome back, {{ explode(' ', auth()->user()->name ?? 'there')[0] }}! 👋</h1>
            <p class="text-red-100 text-sm mb-4">Here's what's happening at {{ auth()->user()->client->brand_name ?? 'your restaurant' }} today.</p>
            <div class="flex items-center gap-2 flex-wrap">
                <span class="inline-flex items-center gap-1.5 bg-white/10 rounded-full px-3 py-1 text-xs">
                    🗓️ {{ now()->format('l, d F Y') }}
                </span>
                <span class="inline-flex items-center gap-1.5 bg-emerald-400/20 text-emerald-200 rounded-full px-3 py-1 text-xs font-medium">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> System Online
                </span>
            </div>
        </div>
        <div class="w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center text-2xl flex-shrink-0">📈</div>
    </div>
</div>

{{-- Stat cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach ([
        ['Today\'s Orders', $todaysOrders, 'Today', '🧾'],
        ['Today\'s Revenue', '₹'.number_format($todaysRevenue, 2), 'Today', '💰'],
        ['Avg. Order Value', '₹'.number_format($avgOrderValue, 2), 'Per order', '📊'],
        ['Low Stock Items', $lowStockItems, $lowStockItems > 0 ? 'Needs restock' : 'All good', '📦'],
    ] as [$label, $value, $caption, $icon])
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition flex items-center justify-between gap-3">
            <div class="min-w-0">
                <p class="text-sm text-gray-500 truncate">{{ $label }}</p>
                <p class="text-2xl font-bold mt-1 text-gray-900">{{ $value }}</p>
                <p class="text-xs mt-1 {{ $label === 'Low Stock Items' && $lowStockItems > 0 ? 'text-red-500 font-medium' : 'text-gray-400' }}">{{ $caption }}</p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-700 to-zinc-900 text-white flex items-center justify-center text-xl flex-shrink-0">
                {{ $icon }}
            </div>
        </div>
    @endforeach
</div>

{{-- Sales chart + top products --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
        <h2 class="font-semibold mb-4">Sales by Hour (Today)</h2>
        <canvas id="salesChart" height="90"></canvas>
    </div>
    <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
        <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>

{{-- Quick actions --}}
<div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm mb-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="font-semibold flex items-center gap-2">⚡ Quick Actions</h2>
    </div>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        @foreach ([
            ['Add Staff', 'admin.staff.index', '👤', 'from-red-600 to-red-700'],
            ['View Orders', 'admin.orders.index', '📋', 'from-zinc-800 to-zinc-900'],
            ['Manage Products', 'admin.products.index', '📦', 'from-violet-600 to-violet-700'],
            ['View Reports', 'admin.reports.index', '📄', 'from-emerald-600 to-emerald-700'],
        ] as [$label, $route, $icon, $gradient])
            <a href="{{ route($route) }}" class="relative bg-gradient-to-br {{ $gradient }} text-white rounded-xl p-4 hover:opacity-90 transition overflow-hidden">
                <span class="absolute top-3 right-3 text-white/60 text-sm">→</span>
                <span class="text-2xl block mb-3">{{ $icon }}</span>
                <span class="text-sm font-medium block">{{ $label }}</span>
            </a>
        @endforeach
    </div>
</div>

<div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
    <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-red-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-red-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: '#b91c1c',
                backgroundColor: 'rgba(185,28,28,0.1)',
                fill: true,
                tension: 0.3,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
    });
</script>
@endsection