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

@section('content')
<div class="space-y-6">
    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Students</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($totalStudents) }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-user-graduate text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Teachers</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($totalTeachers) }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Active Classes</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ $totalClasses }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-school text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Pending Fees</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">₹{{ number_format($pendingFees) }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-orange-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Announcements & Quick Actions --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-4"><i class="fas fa-bullhorn text-blue-500 mr-2"></i>Recent Announcements</h3>
            @forelse($recentAnnouncements as $announcement)
                <div class="border-b border-gray-100 py-3 last:border-0">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="font-medium text-gray-800">{{ $announcement->title }}</p>
                            <p class="text-sm text-gray-500 mt-1">{{ Str::limit($announcement->content, 80) }}</p>
                        </div>
                        @if($announcement->type === 'emergency')
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">Emergency</span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-400 mt-1">{{ $announcement->created_at->diffForHumans() }}</p>
                </div>
            @empty
                <p class="text-gray-500 text-sm">No recent announcements.</p>
            @endforelse
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-4"><i class="fas fa-bolt text-yellow-500 mr-2"></i>Quick Actions</h3>
            <div class="grid grid-cols-2 gap-3">
                <a href="{{ route('communication.announcements') }}" class="flex items-center p-3 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
                    <i class="fas fa-bullhorn text-blue-600 mr-3"></i>
                    <span class="text-sm font-medium text-gray-700">New Announcement</span>
                </a>
                <a href="{{ route('academics.exams.create') }}" class="flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
                    <i class="fas fa-plus-circle text-green-600 mr-3"></i>
                    <span class="text-sm font-medium text-gray-700">Create Exam</span>
                </a>
                <a href="{{ route('attendance.index') }}" class="flex items-center p-3 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
                    <i class="fas fa-clipboard-check text-purple-600 mr-3"></i>
                    <span class="text-sm font-medium text-gray-700">Mark Attendance</span>
                </a>
                <a href="{{ route('fees.index') }}" class="flex items-center p-3 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors">
                    <i class="fas fa-file-invoice text-orange-600 mr-3"></i>
                    <span class="text-sm font-medium text-gray-700">Fee Management</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection