@extends('layouts.dashboard')

@section('title', 'Vice-Chancellor 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">Executive Dashboard</h1>
            <p class="text-gray-600 mt-1">Institutional Performance & Strategic Overview</p>
        </div>
        <div class="flex items-center space-x-3">
            @if($currentYear)
                <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg font-medium">
                    {{ $currentYear->name }}
                </span>
            @endif
            @if($currentSemester)
                <span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-lg font-medium">
                    {{ $currentSemester->name }}
                </span>
            @endif
        </div>
    </div>

    <!-- Executive KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total 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">Total Students</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['total_students']) }}</p>
                    <p class="text-blue-100 text-xs mt-2">
                        <span class="font-semibold">{{ number_format($stats['active_students']) }}</span> Active
                    </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 & Staff -->
        <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">Faculty & Staff</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['total_staff']) }}</p>
                    <p class="text-green-100 text-xs mt-2">
                        <span class="font-semibold">{{ number_format($stats['active_staff']) }}</span> Active
                    </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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Academic Programs -->
        <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">Programs</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['total_programs']) }}</p>
                    <p class="text-purple-100 text-xs mt-2">
                        <span class="font-semibold">{{ number_format($stats['total_departments']) }}</span> Departments
                    </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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Applications -->
        <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">Pending Applications</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['pending_applications']) }}</p>
                    <p class="text-orange-100 text-xs mt-2">Requires Review</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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Enrollment Distribution -->
        <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 Distribution by Level</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">
                @foreach($studentsByLevel as $level => $count)
                    @php
                        $percentage = $stats['active_students'] > 0 ? ($count / $stats['active_students'] * 100) : 0;
                        $colors = [
                            100 => ['bg' => 'bg-blue-500', 'light' => 'bg-blue-100', 'text' => 'text-blue-600'],
                            200 => ['bg' => 'bg-green-500', 'light' => 'bg-green-100', 'text' => 'text-green-600'],
                            300 => ['bg' => 'bg-purple-500', 'light' => 'bg-purple-100', 'text' => 'text-purple-600'],
                            400 => ['bg' => 'bg-orange-500', 'light' => 'bg-orange-100', 'text' => 'text-orange-600'],
                        ];
                        $color = $colors[$level] ?? ['bg' => 'bg-gray-500', 'light' => 'bg-gray-100', 'text' => 'text-gray-600'];
                    @endphp
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">Level {{ $level }}</span>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm font-semibold {{ $color['text'] }}">{{ number_format($count) }}</span>
                                <span class="text-xs text-gray-500">({{ number_format($percentage, 1) }}%)</span>
                            </div>
                        </div>
                        <div class="w-full {{ $color['light'] }} rounded-full h-2.5">
                            <div class="{{ $color['bg'] }} h-2.5 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Student Status Overview -->
        <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 Status Distribution</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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-4">
                @foreach($studentStatus as $status => $count)
                    @php
                        $percentage = $stats['total_students'] > 0 ? ($count / $stats['total_students'] * 100) : 0;
                        $statusColors = [
                            'active' => ['bg' => 'bg-green-500', 'light' => 'bg-green-100', 'text' => 'text-green-600', 'label' => 'Active'],
                            'suspended' => ['bg' => 'bg-yellow-500', 'light' => 'bg-yellow-100', 'text' => 'text-yellow-600', 'label' => 'Suspended'],
                            'graduated' => ['bg' => 'bg-blue-500', 'light' => 'bg-blue-100', 'text' => 'text-blue-600', 'label' => 'Graduated'],
                            'withdrawn' => ['bg' => 'bg-red-500', 'light' => 'bg-red-100', 'text' => 'text-red-600', 'label' => 'Withdrawn'],
                        ];
                        $statusColor = $statusColors[$status] ?? ['bg' => 'bg-gray-500', 'light' => 'bg-gray-100', 'text' => 'text-gray-600', 'label' => ucfirst($status)];
                    @endphp
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">{{ $statusColor['label'] }}</span>
                            <div class="flex items-center space-x-2">
                                <span class="text-sm font-semibold {{ $statusColor['text'] }}">{{ number_format($count) }}</span>
                                <span class="text-xs text-gray-500">({{ number_format($percentage, 1) }}%)</span>
                            </div>
                        </div>
                        <div class="w-full {{ $statusColor['light'] }} rounded-full h-2.5">
                            <div class="{{ $statusColor['bg'] }} h-2.5 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Department Performance & Timetable Overview -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Department 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">Departmental Overview</h2>
                <a href="{{ route('departments.index') }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View All →</a>
            </div>
            <div class="space-y-4">
                @forelse($topDepartments as $dept)
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex-1">
                            <h3 class="font-semibold text-gray-900">{{ $dept->name }}</h3>
                            <p class="text-sm text-gray-600">{{ $dept->code }}</p>
                        </div>
                        <div class="flex items-center space-x-6 text-sm">
                            <div class="text-center">
                                <p class="font-bold text-gray-900">{{ $dept->students_count ?? 0 }}</p>
                                <p class="text-xs text-gray-600">Students</p>
                            </div>
                            <div class="text-center">
                                <p class="font-bold text-gray-900">{{ $dept->programs_count ?? 0 }}</p>
                                <p class="text-xs text-gray-600">Programs</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No department data available</p>
                @endforelse
            </div>
        </div>

        <!-- Timetable Statistics -->
        <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">Timetable Overview</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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 bg-purple-50 rounded-lg">
                    <div>
                        <p class="text-sm text-purple-600 font-medium">Total Classes Scheduled</p>
                        <p class="text-2xl font-bold text-purple-900">{{ number_format($timetableStats['total_classes'] ?? 0) }}</p>
                    </div>
                    <svg class="w-12 h-12 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                </div>
                <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
                    <div>
                        <p class="text-sm text-blue-600 font-medium">Active Venues</p>
                        <p class="text-2xl font-bold text-blue-900">{{ number_format($timetableStats['total_venues'] ?? 0) }}</p>
                    </div>
                    <svg class="w-12 h-12 text-blue-300" 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 class="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                    <div>
                        <p class="text-sm text-green-600 font-medium">Total Courses</p>
                        <p class="text-2xl font-bold text-green-900">{{ number_format($stats['total_courses'] ?? 0) }}</p>
                    </div>
                    <svg class="w-12 h-12 text-green-300" 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>

    <!-- Recent Activity & Applications -->
    <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="font-medium text-gray-900">{{ $application->first_name }} {{ $application->last_name }}</p>
                            <p class="text-sm 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>

        <!-- Quick Actions -->
        <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6 text-white">
            <h2 class="text-lg font-bold mb-6 text-white">Executive Actions</h2>
            <div class="space-y-3">
                <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 flex items-center justify-between">
                    <span>📋 Review Applications</span>
                    @if($stats['pending_applications'] > 0)
                        <span class="bg-red-500 text-white px-2 py-1 rounded-full text-xs">{{ $stats['pending_applications'] }}</span>
                    @endif
                </a>
                <a href="{{ route('departments.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 Departments
                </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('staff.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 Staff
                </a>
                <a href="{{ route('audit-logs.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 Audit Logs
                </a>
                <a href="{{ route('settings.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">
                    ⚙️ System Settings
                </a>
            </div>
        </div>
    </div>
</div>
@endsection