@extends('layouts.app')

@section('content')
<div class="mt-8">
    <div class="mb-8 flex justify-between items-end">
        <div>
            <h1 class="text-2xl font-bold text-white">Staff Portal</h1>
            <p class="text-slate-400 mt-1">Overview of system status and recent activity.</p>
        </div>
        <div class="flex gap-4">
             <div class="relative">
                <input type="text" placeholder="Search client, IP, domain..." class="bg-slate-800 border-slate-600 text-white text-sm rounded-lg block w-64 p-2.5 focus:ring-cyan-500 focus:border-cyan-500">
             </div>
        </div>
    </div>

    <!-- Staff Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="glass-card p-6 rounded-xl border-l-4 border-red-500">
            <h3 class="text-sm font-medium text-slate-400">Pending Orders</h3>
            <p class="mt-2 text-3xl font-bold text-white">{{ $stats['pending_orders'] }}</p>
        </div>
        <div class="glass-card p-6 rounded-xl border-l-4 border-orange-500">
            <h3 class="text-sm font-medium text-slate-400">Open Tickets</h3>
            <p class="mt-2 text-3xl font-bold text-white">{{ $stats['open_tickets'] }}</p>
        </div>
        <div class="glass-card p-6 rounded-xl border-l-4 border-green-500">
            <h3 class="text-sm font-medium text-slate-400">Active Services</h3>
            <p class="mt-2 text-3xl font-bold text-white">{{ $stats['active_services'] }}</p>
        </div>
        <div class="glass-card p-6 rounded-xl border-l-4 border-blue-500">
            <h3 class="text-sm font-medium text-slate-400">Monthly Revenue</h3>
            <p class="mt-2 text-3xl font-bold text-white">{{ $stats['monthly_revenue'] }}</p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid md:grid-cols-2 gap-8">
        <div class="glass-card rounded-xl p-6">
            <h3 class="text-lg font-medium text-white mb-4">Quick Shortcuts</h3>
            <div class="grid grid-cols-2 gap-4">
                <button class="p-4 bg-slate-800 hover:bg-slate-700 rounded-lg text-left transition">
                    <div class="text-cyan-400 mb-2">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <span class="font-medium text-slate-300">Create New Client</span>
                </button>
                 <button class="p-4 bg-slate-800 hover:bg-slate-700 rounded-lg text-left transition">
                    <div class="text-purple-400 mb-2">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 6v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-6V7a2 2 0 00-2-2H5z"></path></svg>
                    </div>
                    <span class="font-medium text-slate-300">View Recent Tickets</span>
                </button>
            </div>
        </div>

         <div class="glass-card rounded-xl p-6">
            <h3 class="text-lg font-medium text-white mb-4">System Health</h3>
             <ul class="space-y-4">
                <li class="flex justify-between items-center text-sm">
                    <span class="text-slate-400">Upstream API Connection</span>
                    <span class="text-green-400 font-medium">● Connected</span>
                </li>
                 <li class="flex justify-between items-center text-sm">
                    <span class="text-slate-400">Database Latency</span>
                    <span class="text-green-400 font-medium">12ms</span>
                </li>
                 <li class="flex justify-between items-center text-sm">
                    <span class="text-slate-400">Pending Cron Jobs</span>
                    <span class="text-slate-300 font-medium">0</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection