@extends('layouts.dashboard')

@section('title', 'Registrar 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">Registrar Dashboard</h1>
            <p class="text-gray-600 mt-1">Student Admissions, Records & Enrollment Management</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>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Pending Applications -->
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-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-yellow-100 text-sm font-medium mb-1">Pending Review</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['pending_applications']) }}</p>
                    <a href="{{ route('applications.index') }}?status=pending" class="text-yellow-100 hover:text-white text-xs font-medium mt-2 inline-block">Review now →</a>
                </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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Under Review -->
        <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">Under Review</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['under_review']) }}</p>
                    <p class="text-blue-100 text-xs mt-2">Being processed</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>

        <!-- Pending Enrollment -->
        <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">Pending Enrollment</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['accepted_pending_enrollment']) }}</p>
                    <p class="text-green-100 text-xs mt-2">Ready to enroll</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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Enrolled This Year -->
        <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">Enrolled This Year</p>
                    <p class="text-3xl font-bold">{{ number_format($stats['total_enrolled_this_year']) }}</p>
                    <p class="text-purple-100 text-xs mt-2">New students</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 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>
    </div>

    <!-- Academic Records & Examination Management -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Student Records 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 Records</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 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 class="space-y-3">
                <a href="{{ route('students.index') }}" 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">Total Students</span>
                    <span class="text-sm font-bold text-blue-600">{{ number_format($recordStats['total_students'] ?? 0) }}</span>
                </a>
                <a href="{{ route('students.index') }}?status=active" 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">Active Students</span>
                    <span class="text-sm font-bold text-green-600">{{ number_format($recordStats['active_students'] ?? 0) }}</span>
                </a>
                <a href="{{ route('examinations.transcripts') }}" 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">Transcripts</span>
                    <svg class="w-4 h-4 text-purple-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>

        <!-- Examination Coordination -->
        <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">Examinations</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="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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-3">
                <a href="{{ route('examinations.index') }}" 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">Upcoming Exams</span>
                    <span class="text-sm font-bold text-purple-600">{{ $examinationStats['upcoming'] ?? 0 }}</span>
                </a>
                <a href="{{ route('exam-schedules.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">Exam Schedules</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>
                <a href="{{ route('grade-scales.index') }}" class="flex items-center justify-between p-3 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-indigo-900">Grade Management</span>
                    <svg class="w-4 h-4 text-indigo-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>

        <!-- Course Registration -->
        <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">Registration</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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                </div>
            </div>
            <div class="space-y-3">
                <a href="{{ route('registration.manage') }}" 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">Manage Registration</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('registration.report') }}" class="flex items-center justify-between p-3 bg-teal-50 hover:bg-teal-100 rounded-lg transition-colors">
                    <span class="text-sm font-medium text-teal-900">Enrollment Report</span>
                    <svg class="w-4 h-4 text-teal-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('academic-years.index') }}" 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">Academic Calendar</span>
                    <svg class="w-4 h-4 text-blue-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>
    </div>

    <!-- Recent Applications Table -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Applications -->
        <div class="lg:col-span-2 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="overflow-x-auto">
                <table class="w-full">
                    <thead class="border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Application #</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Applicant</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Program</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Status</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Date</th>
                            <th class="text-right py-3 px-4 text-sm font-semibold text-gray-600">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($recentApplications as $application)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 text-sm font-mono text-gray-600">{{ $application->application_number }}</td>
                                <td class="py-3 px-4">
                                    <div class="font-medium text-gray-900">{{ $application->first_name }} {{ $application->last_name }}</div>
                                    <div class="text-sm text-gray-500">{{ $application->email }}</div>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-900">{{ $application->program->code ?? 'N/A' }}</td>
                                <td class="py-3 px-4">
                                    @php
                                        $statusColors = [
                                            'submitted' => 'bg-yellow-100 text-yellow-800',
                                            'under_review' => 'bg-blue-100 text-blue-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-2 py-1 text-xs font-medium rounded-full {{ $statusColor }}">
                                        {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-600">{{ $application->submitted_at ? $application->submitted_at->format('M d, Y') : 'N/A' }}</td>
                                <td class="py-3 px-4 text-right">
                                    <a href="{{ route('applications.show', $application->id) }}" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Review</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-8 text-center text-gray-500">No recent applications</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Application Status Breakdown -->
        <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">Applications Overview</h2>
            </div>
            <div class="space-y-4">
                @foreach($applicationsByStatus as $status)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full mr-3 
                                {{ $status->status === 'submitted' ? 'bg-yellow-500' : '' }}
                                {{ $status->status === 'under_review' ? 'bg-blue-500' : '' }}
                                {{ $status->status === 'approved' ? 'bg-green-500' : '' }}
                                {{ $status->status === 'rejected' ? 'bg-red-500' : '' }}
                                {{ $status->status === 'withdrawn' ? 'bg-gray-500' : '' }}">
                            </div>
                            <span class="text-sm text-gray-700 capitalize font-medium">{{ str_replace('_', ' ', $status->status) }}</span>
                        </div>
                        <span class="text-sm font-semibold text-gray-900">{{ $status->count }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Documents & Applications by Program -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Pending Document Verification -->
        <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">Documents Pending Verification</h2>
                <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">{{ count($pendingDocuments) }}</span>
            </div>
            <div class="space-y-3">
                @forelse($pendingDocuments->take(5) as $doc)
                    <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">{{ $doc->first_name }} {{ $doc->last_name }}</p>
                            <p class="text-xs text-gray-500">{{ $doc->application_number }} • {{ $doc->document_type ?? 'Document' }}</p>
                        </div>
                        <a href="{{ route('applications.show', $doc->id) }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Verify</a>
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center py-8">
                        <svg class="w-12 h-12 text-green-500 mb-2" 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>
                        <p class="text-sm text-gray-500">All documents verified!</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Applications 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">Applications by Program</h2>
            </div>
            <div class="space-y-3">
                @forelse($applicationsByProgram as $item)
                    <div class="flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">{{ $item->program->name }}</p>
                            <p class="text-xs text-gray-500">{{ $item->program->code }}</p>
                        </div>
                        <span class="px-3 py-1 bg-blue-500 text-white text-sm font-semibold rounded-full">{{ $item->count }}</span>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-8">No applications</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">Registrar Actions</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-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">
                📋 Process Applications
            </a>
            <a href="{{ route('students.create') }}" 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">
                ➕ Enroll Student
            </a>
            <a href="{{ route('registration.manage') }}" 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">
                📝 Course Registration
            </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('examinations.transcripts') }}" 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">
                📜 Generate Transcripts
            </a>
            <a href="{{ route('students.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">
                📂 Student Records
            </a>
            <a href="{{ route('academic-years.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">
                📅 Academic Calendar
            </a>
            <a href="{{ route('registration.report') }}" 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">
                📊 Enrollment Reports
            </a>
        </div>
    </div>
</div>
@endsection