@extends('layouts.app')
@section('title', 'Teacher Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
    $maxAttendance = collect($chartData)->max(fn($d) => $d['present'] + $d['absent']) ?: 1;
@endphp

<div class="space-y-6">

    {{-- Greeting --}}
    <div>
        <h2 class="text-2xl font-bold text-stone-800">{{ $greeting }}, {{ explode(' ', auth()->user()->name)[0] }}</h2>
        <p class="text-stone-500 text-sm mt-0.5">Here's an overview of your classes and activities</p>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-chalkboard text-amber-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">My Classes</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">{{ $classes->count() }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-user-graduate text-blue-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Total Students</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">{{ $totalStudents }}</p>
        </div>
        <div class="bg-amber-500 rounded-2xl p-5 shadow-sm text-white">
            <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-inbox text-white"></i>
            </div>
            <p class="text-xs text-amber-100 font-medium uppercase tracking-wide">Pending Reviews</p>
            <p class="text-3xl font-extrabold mt-1">{{ $pendingAssignments }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-file-alt text-purple-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Upcoming Exams</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">{{ $upcomingExams->count() }}</p>
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Left content --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Attendance Chart --}}
            @if(count($chartData) > 0)
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <div class="flex items-center justify-between mb-5">
                    <div>
                        <h3 class="font-bold text-stone-800">Attendance Report</h3>
                        <p class="text-xs text-stone-400 mt-0.5">Your classes · Last 10 days</p>
                    </div>
                    <div class="flex items-center gap-4 text-xs">
                        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-amber-500 rounded-full"></span> Present</span>
                        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-stone-800 rounded-full"></span> Absent</span>
                    </div>
                </div>
                <div class="flex items-end gap-2 h-44">
                    @foreach($chartData as $day)
                    <div class="flex-1 flex flex-col items-center gap-1">
                        <div class="w-full flex flex-col justify-end gap-0.5" style="height: 170px;">
                            @if($day['absent'] > 0)
                            <div class="bg-stone-800 rounded-t-sm w-full" style="height: {{ ($day['absent'] / $maxAttendance) * 100 }}%"
                                 title="Absent: {{ $day['absent'] }}"></div>
                            @endif
                            <div class="bg-amber-500 rounded-t-sm w-full" style="height: {{ ($day['present'] / $maxAttendance) * 100 }}%"
                                 title="Present: {{ $day['present'] }}"></div>
                        </div>
                        <span class="text-[9px] text-stone-400 font-medium">{{ $day['date'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- My Classes --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <h3 class="font-bold text-stone-800 mb-4">My Classes</h3>
                <div class="grid sm:grid-cols-2 gap-3">
                    @foreach($classes as $class)
                    <div class="flex items-center gap-3 p-3 bg-stone-50 rounded-xl">
                        <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
                            <span class="text-xs font-bold text-amber-700">{{ preg_replace('/[^0-9]/', '', $class->name) }}</span>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-stone-700">{{ $class->full_name }}</p>
                            <p class="text-[10px] text-stone-400">{{ $class->students->count() ?? 0 }} students</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Upcoming Exams --}}
            @if($upcomingExams->isNotEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <h3 class="font-bold text-stone-800 mb-4">Upcoming Exams</h3>
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-[11px] text-stone-400 uppercase tracking-wider border-b border-stone-100">
                            <th class="text-left pb-3 font-semibold">Exam</th>
                            <th class="text-left pb-3 font-semibold">Subject</th>
                            <th class="text-left pb-3 font-semibold">Class</th>
                            <th class="text-left pb-3 font-semibold">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($upcomingExams as $exam)
                        <tr class="border-b border-stone-50 hover:bg-stone-50/50">
                            <td class="py-2.5 font-medium text-stone-700">{{ $exam->name }}</td>
                            <td class="py-2.5 text-stone-500">{{ $exam->subject->name ?? '—' }}</td>
                            <td class="py-2.5 text-stone-500">{{ $exam->class_?->full_name ?? '—' }}</td>
                            <td class="py-2.5">
                                <span class="inline-flex items-center px-2 py-0.5 bg-amber-50 text-amber-700 rounded text-xs font-semibold">
                                    {{ $exam->exam_date->format('d M') }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>

        {{-- Right sidebar --}}
        <div class="space-y-6">

            {{-- Quick Actions --}}
            <div class="bg-amber-50 rounded-2xl ring-1 ring-amber-200/60 p-5">
                <h3 class="font-bold text-stone-800 text-sm mb-3">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{{ route('attendance.index') }}" class="flex items-center gap-3 p-3 bg-white rounded-xl hover:shadow-sm transition ring-1 ring-stone-200/40">
                        <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-clipboard-check text-amber-600 text-xs"></i>
                        </div>
                        <span class="text-xs font-semibold text-stone-600">Mark Attendance</span>
                    </a>
                    <a href="{{ route('academics.exams.index') }}" class="flex items-center gap-3 p-3 bg-white rounded-xl hover:shadow-sm transition ring-1 ring-stone-200/40">
                        <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-pen text-amber-600 text-xs"></i>
                        </div>
                        <span class="text-xs font-semibold text-stone-600">Enter Marks</span>
                    </a>
                    <a href="{{ route('assignments.index') }}" class="flex items-center gap-3 p-3 bg-white rounded-xl hover:shadow-sm transition ring-1 ring-stone-200/40">
                        <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-tasks text-amber-600 text-xs"></i>
                        </div>
                        <span class="text-xs font-semibold text-stone-600">Assignments</span>
                    </a>
                </div>
            </div>

            {{-- Mini Calendar --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-5">
                @php $today = now(); $firstDay = $today->copy()->startOfMonth(); $lastDay = $today->copy()->endOfMonth(); @endphp
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-stone-800 text-sm">{{ $today->format('F Y') }}</h3>
                </div>
                <div class="grid grid-cols-7 gap-0.5 text-center">
                    @foreach(['S','M','T','W','T','F','S'] as $d)
                    <div class="text-[10px] font-semibold text-stone-400 py-1">{{ $d }}</div>
                    @endforeach
                    @for($i = 0; $i < $firstDay->dayOfWeek; $i++)
                    <div class="text-[11px] text-stone-300 py-1.5"></div>
                    @endfor
                    @for($d = 1; $d <= $lastDay->day; $d++)
                    <div class="text-[11px] py-1.5 font-medium rounded-lg {{ $d == $today->day ? 'bg-amber-500 text-white font-bold' : 'text-stone-600' }}">{{ $d }}</div>
                    @endfor
                </div>
            </div>

            {{-- Upcoming Events --}}
            @include('components.upcoming-events')

            {{-- Announcements --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-stone-100">
                    <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-bullhorn text-amber-500 mr-2"></i>Announcements</h3>
                </div>
                @forelse($recentAnnouncements as $a)
                <div class="px-5 py-3 border-b border-stone-50 last:border-0">
                    <p class="text-sm font-semibold text-stone-700">{{ $a->title }}</p>
                    <p class="text-[10px] text-stone-300 mt-0.5">{{ $a->created_at->diffForHumans() }}</p>
                </div>
                @empty
                <div class="p-5 text-center text-stone-400 text-sm">No announcements</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection