@extends('layouts.dashboard')

@section('title', 'Dean Dashboard')

@section('page-content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Dean Dashboard</h1>
            <p class="text-gray-600 mt-1">{{ $department->name }}</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ route('departments.show', $department->id) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                View Department Details
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Department Students -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium mb-1">Department Students</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['department_students']) }}</p>
                    <p class="text-blue-100 text-xs mt-2">Across all programs</p>
                </div>
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M12 14l9-5-9-5-9 5 9 5z"/>
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Faculty Members -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium mb-1">Faculty Members</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['department_staff']) }}</p>
                    <p class="text-purple-100 text-xs mt-2">Teaching staff</p>
                </div>
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Active Programs -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium mb-1">Active Programs</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['department_programs']) }}</p>
                    <p class="text-green-100 text-xs mt-2">Degree programs</p>
                </div>
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Total Courses -->
        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium mb-1">Total Courses</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['department_courses']) }}</p>
                    <p class="text-orange-100 text-xs mt-2">Course offerings</p>
                </div>
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Analytics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Students by Program -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Students by Program</h2>
                <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-4">
                @forelse($studentsByProgram as $program)
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <span class="text-sm font-medium text-gray-900">{{ $program->name }}</span>
                                <span class="text-xs text-gray-500 ml-2">({{ $program->code }})</span>
                            </div>
                            <span class="text-sm font-semibold text-blue-600">{{ $program->students_count }} students</span>
                        </div>
                        @php
                            $percentage = $stats['department_students'] > 0 ? ($program->students_count / $stats['department_students']) * 100 : 0;
                        @endphp
                        <div class="w-full bg-blue-100 rounded-full h-2.5">
                            <div class="bg-blue-600 rounded-full h-2.5 transition-all duration-500" style="width: {{ $percentage }}%"></div>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No programs found</p>
                @endforelse
            </div>
        </div>

        <!-- Student Performance -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Student Performance Overview</h2>
                <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-4">
                @if(isset($studentPerformance))
                    @foreach($studentPerformance as $level => $performance)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Level {{ $level }}</p>
                                <p class="text-xs text-gray-600">Average GPA: {{ number_format($performance['avg_gpa'] ?? 0, 2) }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-semibold text-gray-900">{{ $performance['count'] ?? 0 }}</p>
                                <p class="text-xs text-gray-600">Students</p>
                            </div>
                        </div>
                    @endforeach
                @else
                    <p class="text-gray-500 text-center py-8">Performance data not available</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Faculty Management & Curriculum -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Faculty Members -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Faculty Members</h2>
                <a href="{{ route('staff.index') }}?department={{ $department->id }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View All →</a>
            </div>
            <div class="space-y-3">
                @forelse($facultyMembers->take(5) as $faculty)
                    <div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0">
                            {{ strtoupper(substr($faculty->user->name, 0, 1)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 truncate">{{ $faculty->user->name }}</p>
                            <p class="text-xs text-gray-500 capitalize">{{ str_replace('_', ' ', $faculty->position) }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No faculty members</p>
                @endforelse
            </div>
        </div>

        <!-- Curriculum Administration -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Curriculum Management</h2>
                <div class="w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-3">
                <a href="{{ route('programs.index') }}?department={{ $department->id }}" class="flex items-center justify-between p-3 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-purple-900">Programs</span>
                    <span class="text-sm font-bold text-purple-600">{{ number_format($stats['department_programs']) }}</span>
                </a>
                <a href="{{ route('courses.index') }}?department={{ $department->id }}" class="flex items-center justify-between p-3 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-blue-900">Courses</span>
                    <span class="text-sm font-bold text-blue-600">{{ number_format($stats['department_courses']) }}</span>
                </a>
                <a href="{{ route('timetable.index') }}" class="flex items-center justify-between p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-green-900">Timetables</span>
                    <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
                <a href="{{ route('examinations.index') }}" class="flex items-center justify-between p-3 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-orange-900">Examinations</span>
                    <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>

        <!-- Resource Allocation -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Resource Overview</h2>
                <div class="w-10 h-10 bg-orange-50 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <span class="text-sm font-medium text-gray-700">Active Venues</span>
                    <span class="text-sm font-bold text-gray-900">{{ $resourceStats['venues'] ?? 0 }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <span class="text-sm font-medium text-gray-700">Scheduled Classes</span>
                    <span class="text-sm font-bold text-gray-900">{{ $resourceStats['classes'] ?? 0 }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <span class="text-sm font-medium text-gray-700">Learning Modules</span>
                    <span class="text-sm font-bold text-gray-900">{{ $resourceStats['modules'] ?? 0 }}</span>
                </div>
                <a href="{{ route('venues.index') }}" class="block text-center text-sm text-blue-600 hover:text-blue-800 font-medium mt-4">
                    Manage Resources →
                </a>
            </div>
        </div>
    </div>

    <!-- Recent Applications & Department Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Applications -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Recent Applications</h2>
                <a href="{{ route('applications.index') }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View All →</a>
            </div>
            <div class="space-y-3">
                @forelse($recentApplications as $application)
                    <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">{{ $application->first_name }} {{ $application->last_name }}</p>
                            <p class="text-xs text-gray-600">{{ $application->program->name ?? 'N/A' }}</p>
                        </div>
                        <div>
                            @php
                                $statusColors = [
                                    'submitted' => 'bg-blue-100 text-blue-800',
                                    'under_review' => 'bg-yellow-100 text-yellow-800',
                                    'approved' => 'bg-green-100 text-green-800',
                                    'rejected' => 'bg-red-100 text-red-800',
                                ];
                                $statusColor = $statusColors[$application->status] ?? 'bg-gray-100 text-gray-800';
                            @endphp
                            <span class="px-3 py-1 text-xs font-semibold rounded-full {{ $statusColor }}">
                                {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                            </span>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No recent applications</p>
                @endforelse
            </div>
        </div>

        <!-- Department Activity -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-bold text-gray-900">Recent Activity</h2>
            </div>
            <div class="space-y-3">
                @forelse($departmentActivity->take(5) as $activity)
                    <div class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-xs font-semibold text-white">
                                {{ $activity->user ? strtoupper(substr($activity->user->name, 0, 1)) : 'S' }}
                            </span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-gray-900">{{ $activity->description }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $activity->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No recent activity</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6">
        <h2 class="text-lg font-bold mb-6 text-white">Department Management</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            <a href="{{ route('programs.index') }}?department={{ $department->id }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📚 Manage Programs
            </a>
            <a href="{{ route('courses.index') }}?department={{ $department->id }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📖 Manage Courses
            </a>
            <a href="{{ route('staff.index') }}?department={{ $department->id }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                👥 Faculty Management
            </a>
            <a href="{{ route('timetable.index') }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📅 View Timetables
            </a>
            <a href="{{ route('applications.index') }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📋 Review Applications
            </a>
            <a href="{{ route('examinations.index') }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📝 Manage Examinations
            </a>
            <a href="{{ route('attendance.analytics') }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                📊 Attendance Analytics
            </a>
            <a href="{{ route('departments.show', $department->id) }}" class="block w-full bg-white bg-opacity-20 hover:bg-opacity-30 text-blue-500 rounded-lg px-4 py-3 text-sm font-medium transition">
                🏛️ Department Details
            </a>
        </div>
    </div>
</div>
@endsection