@extends('layouts.app')

@section('page_title', 'Admin Dashboard')

@section('content')
    <div class="grid">
        <div class="card">
            <div class="kpi-label">Started Today</div>
            <div class="kpi-value">{{ $todayStarted }}</div>
        </div>
        <div class="card">
            <div class="kpi-label">Stopped Today</div>
            <div class="kpi-value">{{ $todayStopped }}</div>
        </div>
        <div class="card">
            <div class="kpi-label">Currently on Lunch</div>
            <div class="kpi-value">{{ $activeLunchCount }}</div>
        </div>
        <div class="card">
            <div class="kpi-label">Pending Tasks</div>
            <div class="kpi-value">{{ $pendingTasks }}</div>
        </div>
    </div>

    <div class="grid-2" style="margin-top: 8px;">
        <div class="card">
            <h3 style="margin-top:0;">Operational Focus</h3>
            <p class="small">Keep an eye on lunch overuse, missing stop updates and pending review queue for accurate salary automation.</p>
            <div class="soft-card">
                <div><span class="badge">Realtime</span> Attendance overview</div>
                <div style="margin-top: 8px;"><span class="badge">Critical</span> Pending task approvals</div>
            </div>
        </div>

        <div class="card">
            <h3 style="margin-top:0;">Quick Actions</h3>
            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <a class="btn" href="{{ route('admin.tasks.index') }}" style="text-decoration:none;">Go to Admin Task Review</a>
                <a class="btn btn-secondary" href="{{ route('attendance.index') }}" style="text-decoration:none;">Open Attendance Monitor</a>
            </div>
        </div>
    </div>
@endsection