@extends('layouts.staff')

@section('title', 'Staff Workspace')

@section('content')
@php
    $greeting = now()->format('H') < 12 ? 'Good morning' : (now()->format('H') < 17 ? 'Good afternoon' : 'Good evening');
@endphp

<div class="mb-8 flex flex-wrap items-end justify-between gap-4">
    <div>
        <h1 class="font-display text-2xl font-extrabold text-slate-900">{{ $greeting }}, {{ $user->first_name ?? $user->name }}.</h1>
        <p class="mt-1 text-sm text-slate-500">Here is your day at {{ $school->name }} — {{ now()->format('l, j F Y') }}.</p>
    </div>
    <span class="rounded-full bg-white px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-primary-700 shadow-sm ring-1 ring-slate-200">
        {{ $user->role->label() }}
    </span>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    {{-- Today's classes --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm lg:col-span-2">
        <div class="flex items-center justify-between">
            <h2 class="font-display text-lg font-bold text-slate-900">Today's Classes</h2>
            <a href="{{ route('school.communications.inbox', $school->id) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-500">Inbox</a>
        </div>

        @if ($todayClasses->isEmpty())
            <div class="mt-6 rounded-xl border border-dashed border-slate-200 p-8 text-center">
                <p class="text-sm font-medium text-slate-500">No classes scheduled for today.</p>
                <p class="mt-1 text-xs text-slate-400">Timetable entries for your subjects will appear here.</p>
            </div>
        @else
            <ul class="mt-5 divide-y divide-slate-100">
                @foreach ($todayClasses as $entry)
                    <li class="flex items-center gap-4 py-3.5">
                        <span class="w-24 shrink-0 rounded-lg bg-primary-50 px-2 py-1.5 text-center font-mono text-xs font-bold text-primary-700">
                            {{ substr((string) $entry->start_time, 0, 5) }}–{{ substr((string) $entry->end_time, 0, 5) }}
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-semibold text-slate-800">{{ $entry->subject?->name ?? 'Subject' }}</p>
                            <p class="truncate text-xs text-slate-400">{{ $entry->classroom?->name ?? '—' }} @if($entry->room) · {{ $entry->room }} @endif</p>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- My subjects --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="font-display text-lg font-bold text-slate-900">My Subjects</h2>
        @if ($mySubjects->isEmpty())
            <p class="mt-6 rounded-xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500">No subjects assigned to you yet.</p>
        @else
            <ul class="mt-4 space-y-2">
                @foreach ($mySubjects as $subject)
                    <li class="flex items-center justify-between rounded-xl border border-slate-100 px-4 py-2.5 transition hover:border-primary-200 hover:bg-primary-50/40">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-800">{{ $subject->name }}</p>
                            <p class="text-xs text-slate-400">{{ $subject->classroom?->name ?? 'No class' }}</p>
                        </div>
                        @if ($subject->code)
                            <span class="shrink-0 rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-slate-500">{{ $subject->code }}</span>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- Notices --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm lg:col-span-2">
        <div class="flex items-center justify-between">
            <h2 class="font-display text-lg font-bold text-slate-900">Notices &amp; Messages</h2>
            @if ($unreadNotifications > 0)
                <span class="rounded-full bg-rose-50 px-3 py-1 text-xs font-bold text-rose-600 ring-1 ring-rose-100">{{ $unreadNotifications }} unread</span>
            @endif
        </div>

        @if ($notifications->isEmpty() && $messages->isEmpty())
            <p class="mt-6 rounded-xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500">You're all caught up — no notices or messages.</p>
        @else
            <ul class="mt-4 divide-y divide-slate-100">
                @foreach ($notifications as $notification)
                    <li class="py-3">
                        <p class="text-sm font-semibold {{ $notification->is_read ? 'text-slate-600' : 'text-slate-900' }}">
                            @unless ($notification->is_read)
                                <span class="mr-2 inline-block h-2 w-2 rounded-full bg-rose-500 align-middle"></span>
                            @endunless
                            {{ $notification->title }}
                        </p>
                        <p class="mt-0.5 line-clamp-1 text-xs text-slate-400">{{ $notification->body }}</p>
                    </li>
                @endforeach
                @foreach ($messages as $message)
                    <li class="py-3">
                        <p class="text-sm font-semibold text-slate-900">
                            Message from {{ $message->sender?->name ?? 'School office' }}
                        </p>
                        <p class="mt-0.5 line-clamp-1 text-xs text-slate-400">{{ $message->subject ?? $message->body }}</p>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- Quick links --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="font-display text-lg font-bold text-slate-900">Quick Links</h2>
        <div class="mt-4 grid grid-cols-1 gap-2">
            <a href="{{ route('school.settings.my-profile', $school->id) }}" class="rounded-xl border border-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary-200 hover:bg-primary-50/40">My Profile</a>
            <a href="{{ route('school.settings.change-password', $school->id) }}" class="rounded-xl border border-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary-200 hover:bg-primary-50/40">Change Password</a>
            <a href="{{ route('school.communications.notifications', $school->id) }}" class="rounded-xl border border-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary-200 hover:bg-primary-50/40">All Notifications</a>
        </div>

        @if ($myProfile)
            <div class="mt-6 rounded-xl bg-slate-50 p-4">
                <h3 class="text-xs font-bold uppercase tracking-wider text-slate-500">My Staff Record</h3>
                <dl class="mt-2 space-y-1.5 text-sm">
                    <div class="flex justify-between gap-2"><dt class="text-slate-500">Staff No</dt><dd class="font-semibold text-slate-800">{{ $myProfile->staff_no }}</dd></div>
                    <div class="flex justify-between gap-2"><dt class="text-slate-500">Designation</dt><dd class="font-semibold text-slate-800">{{ $myProfile->designation?->name ?? '—' }}</dd></div>
                    <div class="flex justify-between gap-2"><dt class="text-slate-500">Department</dt><dd class="font-semibold text-slate-800">{{ $myProfile->department?->name ?? '—' }}</dd></div>
                    <div class="flex justify-between gap-2"><dt class="text-slate-500">Status</dt>
                        <dd><span class="badge {{ $myProfile->statusBadgeClass() }}">{{ str_replace('_', ' ', ucfirst($myProfile->status)) }}</span></dd>
                    </div>
                </dl>
                @if ($myAttendance->isNotEmpty())
                    <h3 class="mt-4 text-xs font-bold uppercase tracking-wider text-slate-500">My Recent Attendance</h3>
                    <div class="mt-2 flex flex-wrap gap-1.5">
                        @foreach ($myAttendance as $rec)
                            <span class="badge {{ ['present' => 'badge-green', 'absent' => 'badge-red', 'late' => 'badge-amber', 'excused' => 'badge-blue'][$rec->status] }} !px-2 !py-0.5"
                                  title="{{ ucfirst($rec->status) }}">{{ $rec->date->format('d M') }}</span>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif
    </div>
</div>
@endsection