@extends('admin.layouts.app')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-black text-slate-800 uppercase tracking-tight">System Overview</h1>
        <p class="text-sm text-slate-500 font-medium mt-1">Welcome back, {{ explode(' ', auth()->user()->name)[0] ?? 'Admin' }}! Here is what's happening today.</p>
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-blue-500">
            <h3 class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Total Active Users</h3>
            <p class="text-3xl font-black text-slate-800">1,248</p>
        </div>
        
        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-green-500">
            <h3 class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Monthly Revenue</h3>
            <p class="text-3xl font-black text-slate-800">₹4.2L</p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-yellow-500">
            <h3 class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Pending Orders</h3>
            <p class="text-3xl font-black text-slate-800">56</p>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 border-l-4 border-l-purple-500">
            <h3 class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Support Tickets</h3>
            <p class="text-3xl font-black text-slate-800">12</p>
        </div>
    </div>
@endsection