@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Overview</p>
            <h1>Dashboard</h1>
            <p class="muted">Welcome back! Here's what's happening today.</p>
        </div>
    </header>

    <section class="card-grid four-col">
        @foreach ($stats as $stat)
            <article class="stat-card">
                <p class="muted">{{ $stat['label'] }}</p>
                <h3>{{ $stat['value'] }}</h3>
                <p class="stat-meta">{{ $stat['meta'] }}</p>
            </article>
        @endforeach
    </section>

    <section class="panel">
        <div class="panel__header">
            <h2>Quick Actions</h2>
        </div>
        <div class="quick-actions">
            @foreach ($quickActions as $action)
                <button type="button" class="ghost-btn">{{ $action }}</button>
            @endforeach
        </div>
    </section>

    <section class="split-panel">
        <article class="panel">
            <div class="panel__header">
                <h2>Recent Applications</h2>
            </div>
            <ul class="stacked-list">
                @foreach ($recentApplications as $application)
                    <li class="list-row">
                        <div class="list-row__avatar">{{ $application['initials'] }}</div>
                        <div class="list-row__body">
                            <p class="list-row__title">{{ $application['name'] }}</p>
                            <p class="muted">{{ $application['position'] }}</p>
                        </div>
                        <div class="list-row__badge {{ strtolower($application['status']) }}">
                            {{ $application['status'] }}
                        </div>
                        <p class="muted">{{ $application['date'] }}</p>
                    </li>
                @endforeach
            </ul>
        </article>
        <article class="panel">
            <div class="panel__header">
                <h2>Pending Attendance Approvals</h2>
            </div>
            <ul class="stacked-list">
                @foreach ($attendanceRequests as $request)
                    <li class="list-row">
                        <div class="list-row__avatar">{{ $request['initials'] }}</div>
                        <div class="list-row__body">
                            <p class="list-row__title">{{ $request['name'] }}</p>
                            <p class="muted">{{ $request['date'] }} · {{ $request['shift'] }}</p>
                        </div>
                        <div class="list-row__actions">
                            <button class="ghost-btn small">Approve</button>
                            <button class="ghost-btn small danger">Reject</button>
                        </div>
                    </li>
                @endforeach
            </ul>
        </article>
    </section>
@endsection