@extends('layouts.school')
@section('title', 'Staff Dashboard')
@section('header', 'Staff Management')
@section('content')
    @php $sid = request()->route('schoolId'); @endphp

    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="page-title">Staff Dashboard</h2>
            <p class="page-subtitle">Workforce overview across every category — teaching and non-teaching.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('school.staff.attendance', $sid) }}" class="btn-secondary btn-sm">Mark Attendance</a>
            <a href="{{ route('school.staff.create', $sid) }}" class="btn-primary btn-sm">+ Add Staff</a>
        </div>
    </div>

    <div class="grid grid-cols-2 gap-4 mb-6 lg:grid-cols-5">
        <div class="stat-card"><p class="page-subtitle">Total Staff</p><p class="mt-1 text-3xl font-bold text-gray-900">{{ $stats['total'] }}</p></div>
        <div class="stat-card"><p class="page-subtitle">Active</p><p class="mt-1 text-3xl font-bold text-green-600">{{ $stats['active'] }}</p></div>
        <div class="stat-card"><p class="page-subtitle">On Leave</p><p class="mt-1 text-3xl font-bold text-amber-500">{{ $stats['on_leave'] }}</p></div>
        <div class="stat-card"><p class="page-subtitle">Teaching</p><p class="mt-1 text-3xl font-bold text-indigo-600">{{ $stats['teachers'] }}</p></div>
        <div class="stat-card"><p class="page-subtitle">Portal Accounts</p><p class="mt-1 text-3xl font-bold text-blue-600">{{ $stats['accounts'] }}</p></div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div class="card">
            <h3 class="section-label">Today's Attendance ({{ now()->format('D, d M Y') }})</h3>
            @if ($today['marked'])
                <div class="mt-2 grid grid-cols-4 gap-3 text-center">
                    <div><p class="text-2xl font-bold text-green-600">{{ $today['present'] }}</p><p class="text-xs text-gray-500">Present</p></div>
                    <div><p class="text-2xl font-bold text-red-500">{{ $today['absent'] }}</p><p class="text-xs text-gray-500">Absent</p></div>
                    <div><p class="text-2xl font-bold text-amber-500">{{ $today['late'] }}</p><p class="text-xs text-gray-500">Late</p></div>
                    <div><p class="text-2xl font-bold text-blue-500">{{ $today['excused'] }}</p><p class="text-xs text-gray-500">Excused</p></div>
                </div>
            @else
                <p class="empty-state mt-2 !py-6">Attendance has not been marked today.
                    <a href="{{ route('school.staff.attendance', $sid) }}" class="font-semibold text-primary-600 hover:underline">Mark it now</a>.</p>
            @endif
        </div>

        <div class="card">
            <h3 class="section-label">Active Staff by Category</h3>
            <ul class="mt-2 space-y-2 text-sm">
                @forelse ($byCategory as $cat)
                    <li>
                        <a href="{{ route('school.staff.index', [$sid, 'category' => $cat->id]) }}" class="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-gray-50 group">
                            <span class="font-medium text-gray-700 group-hover:text-primary-600">{{ $cat->name }}</span>
                            <span class="badge badge-indigo">{{ $cat->staff_members_count }}</span>
                        </a>
                    </li>
                @empty
                    <li class="empty-state !border-0 !py-6">No staff yet.</li>
                @endforelse
            </ul>
        </div>

        <div class="card lg:col-span-2">
            <h3 class="section-label">Recent Hires</h3>
            <div class="overflow-x-auto mt-2">
                <table class="table-modern">
                    <thead><tr><th>Name</th><th>Designation</th><th>Department</th><th>Employed On</th><th>Status</th></tr></thead>
                    <tbody>
                        @foreach ($recentHires as $m)
                            <tr class="hover:bg-gray-50">
                                <td><a href="{{ route('school.staff.show', [$sid, $m]) }}" class="font-medium text-primary-600 hover:underline">{{ $m->fullName() }}</a></td>
                                <td class="text-sm text-gray-600">{{ $m->designation?->name ?? '—' }}</td>
                                <td class="text-sm text-gray-600">{{ $m->department?->name ?? '—' }}</td>
                                <td class="text-sm text-gray-600">{{ $m->employed_on?->format('d M Y') ?? '—' }}</td>
                                <td><span class="badge {{ $m->statusBadgeClass() }}">{{ str_replace('_', ' ', ucfirst($m->status)) }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection