@extends('layouts.app')
@section('title', 'Staff Dashboard')
@section('content')
<h2 style="font-size:18px;color:#0b4f2c;margin-bottom:16px;">Staff Dashboard</h2>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;">
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Active Staff</div><div style="font-size:22px;font-weight:bold;color:#0b4f2c;">{{ $stats['active'] }}</div></div>
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">On Leave</div><div style="font-size:22px;font-weight:bold;color:#a67c00;">{{ $stats['on_leave'] }}</div></div>
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Pending Leave Requests</div><div style="font-size:22px;font-weight:bold;">{{ $stats['pending_leave_requests'] }}</div></div>
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Present Today</div><div style="font-size:22px;font-weight:bold;color:#0b4f2c;">{{ $stats['present_today'] }}</div></div>
</div>

<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h3 style="font-size:15px;color:#0b4f2c;">Staff Directory</h3>
        <a href="{{ url('/staff/create') }}" style="background:#0b4f2c;color:#fff;text-decoration:none;padding:8px 16px;border-radius:6px;font-size:13px;">+ Add Staff</a>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <thead><tr style="background:#f4f6f5;text-align:left;">
            <th style="padding:8px;">Staff ID</th><th style="padding:8px;">Name</th><th style="padding:8px;">Department</th><th style="padding:8px;">Designation</th><th style="padding:8px;">Status</th><th style="padding:8px;">Actions</th>
        </tr></thead>
        <tbody>
            @forelse($teachers as $teacher)
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">{{ $teacher->staff_id }}</td>
                    <td style="padding:8px;font-weight:bold;">{{ $teacher->user->name }}</td>
                    <td style="padding:8px;">{{ $teacher->department->name ?? '—' }}</td>
                    <td style="padding:8px;">{{ $teacher->designation->name ?? '—' }}</td>
                    <td style="padding:8px;"><span style="background:#e5f5ea;color:#0b4f2c;padding:2px 8px;border-radius:10px;font-size:11px;">{{ $teacher->status }}</span></td>
                    <td style="padding:8px;">
                        <a href="{{ url('/staff/' . $teacher->id) }}" style="color:#0b4f2c;text-decoration:none;font-size:12px;margin-right:8px;">View</a>
                        <a href="{{ url('/staff/' . $teacher->id . '/edit') }}" style="color:#0b4f2c;text-decoration:none;font-size:12px;">Edit</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" style="padding:20px;text-align:center;color:#999;">No staff records yet.</td></tr>
            @endforelse
        </tbody>
    </table>
    {{ $teachers->links() ?? '' }}
</div>
@endsection