@extends('layouts.dashboard')

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

@php
    // Determine gender-based theme (default to male if not set)
    $gender = strtolower(auth()->user()->gender ?? 'male');
    $isFemale = $gender === 'female';
    
    // Female theme - elegant, soft, vibrant
    $femaleTheme = [
        'primary' => 'from-pink-500 via-rose-500 to-fuchsia-600',
        'secondary' => 'from-purple-400 to-pink-400',
        'accent' => 'bg-gradient-to-r from-pink-100 to-purple-100',
        'card' => 'bg-white shadow-lg border-2 border-pink-100',
        'badge' => 'bg-gradient-to-r from-pink-500 to-rose-500 text-white',
        'text' => 'text-pink-600',
        'progress' => 'from-pink-400 via-rose-400 to-fuchsia-500',
        'button' => 'bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600',
        'icon' => 'text-pink-500',
        'hover' => 'hover:bg-pink-50',
        'border' => 'border-pink-200',
    ];
    
    // Male theme - gentle, professional, subtle
    $maleTheme = [
        'primary' => 'from-blue-600 to-indigo-700',
        'secondary' => 'from-blue-500 to-cyan-600',
        'accent' => 'bg-gradient-to-r from-blue-50 to-indigo-50',
        'card' => 'bg-white shadow-sm border border-gray-100',
        'badge' => 'bg-blue-600 text-white',
        'text' => 'text-blue-600',
        'progress' => 'from-blue-500 to-indigo-600',
        'button' => 'bg-blue-600 hover:bg-blue-700',
        'icon' => 'text-blue-500',
        'hover' => 'hover:bg-gray-50',
        'border' => 'border-gray-200',
    ];
    
    $theme = $isFemale ? $femaleTheme : $maleTheme;
@endphp

<style>
    /* Removed heavy animations to prevent browser freezing */
</style>

@section('page-content')
<div class="space-y-6">
    <!-- Page Header with Gender-Based Theme -->
    <div class="flex items-center justify-between {{ $isFemale ? 'relative' : '' }}">
        @if($isFemale)
            <!-- Decorative sparkles for female theme -->
            <div class="absolute -top-4 -left-4 text-pink-300 sparkle">✨</div>
            <div class="absolute -top-2 right-20 text-fuchsia-300 sparkle" style="animation-delay: 0.5s;">✨</div>
        @endif
        <div>
            <h1 class="text-3xl font-bold {{ $isFemale ? 'bg-gradient-to-r from-pink-600 via-rose-600 to-fuchsia-600 bg-clip-text text-transparent' : 'text-gray-900' }}">
                {{ $isFemale ? '✨ ' : '' }}Student Dashboard{{ $isFemale ? ' ✨' : '' }}
            </h1>
            <p class="text-gray-600 mt-1">Welcome back, <span class="font-semibold {{ $theme['text'] }}">{{ auth()->user()->name }}</span></p>
        </div>
        <div class="flex items-center space-x-3">
            @if($currentYear)
                <span class="px-4 py-2 {{ $theme['badge'] }} rounded-lg font-medium shadow-md">{{ $currentYear->name }}</span>
            @endif
            @if($currentSemester)
                <span class="px-4 py-2 {{ $isFemale ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white' : 'bg-purple-100 text-purple-800' }} rounded-lg font-medium shadow-md">{{ $currentSemester->name }}</span>
            @endif
        </div>
    </div>

    <!-- Student Profile Card & Quick Stats -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Student Profile - Elegant Card -->
        <div class="lg:col-span-3">
            <div class="bg-gradient-to-br {{ $theme['primary'] }} rounded-xl shadow-xl p-6 text-white relative overflow-hidden">
                <div class="absolute top-0 right-0 w-40 h-40 bg-white opacity-10 rounded-full -mr-20 -mt-20"></div>
                
                <div class="relative z-10">
                    <!-- Avatar & Name -->
                    <div class="flex items-center space-x-4 mb-5">
                        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center text-2xl font-bold shadow-lg {{ $isFemale ? 'text-pink-600' : 'text-blue-600' }}">
                            {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="text-lg font-bold truncate">{{ auth()->user()->name }}</h3>
                            <p class="text-sm opacity-90">{{ $studentInfo['student_id'] }}</p>
                        </div>
                    </div>
                    
                    <!-- Stats Grid -->
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-white rounded-lg p-3 shadow-md">
                            <p class="text-xs mb-1 font-semibold {{ $isFemale ? 'text-pink-600' : 'text-blue-600' }}">CGPA</p>
                            <p class="text-2xl font-black {{ $isFemale ? 'text-pink-900' : 'text-blue-900' }}">{{ number_format($studentInfo['cgpa'], 2) }}</p>
                        </div>
                        <div class="bg-white rounded-lg p-3 shadow-md">
                            <p class="text-xs mb-1 font-semibold {{ $isFemale ? 'text-purple-600' : 'text-indigo-600' }}">Credits</p>
                            <p class="text-xl font-bold {{ $isFemale ? 'text-purple-900' : 'text-indigo-900' }}">{{ $studentInfo['total_credits'] }}<span class="text-sm text-gray-600">/{{ $requiredCredits }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Cards -->
        <div class="lg:col-span-9">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Program -->
                <div class="{{ $theme['card'] }} rounded-xl p-5 border-l-4 {{ $isFemale ? 'border-pink-400' : 'border-blue-400' }}">
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="text-2xl">🎓</span>
                        <p class="text-xs font-semibold text-gray-500 uppercase">Program</p>
                    </div>
                    <h4 class="text-lg font-bold {{ $theme['text'] }} mb-1">{{ $studentInfo['program'] }}</h4>
                    <p class="text-sm text-gray-600">{{ $studentInfo['department'] }}</p>
                </div>

                <!-- Semester -->
                <div class="{{ $theme['card'] }} rounded-xl p-5 border-l-4 {{ $isFemale ? 'border-purple-400' : 'border-indigo-400' }}">
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="text-2xl">📚</span>
                        <p class="text-xs font-semibold text-gray-500 uppercase">Semester</p>
                    </div>
                    <h4 class="text-3xl font-black {{ $theme['text'] }} mb-1">{{ $studentInfo['current_semester'] ?? 'N/A' }}</h4>
                    <div class="flex items-center space-x-1.5">
                        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                        <p class="text-sm font-medium text-green-600">{{ $studentInfo['status'] }}</p>
                    </div>
                </div>

                <!-- Graduation -->
                <div class="{{ $theme['card'] }} rounded-xl p-5 border-l-4 {{ $isFemale ? 'border-orange-400' : 'border-green-400' }}">
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="text-2xl">🎯</span>
                        <p class="text-xs font-semibold text-gray-500 uppercase">Graduation</p>
                    </div>
                    <h4 class="text-lg font-bold text-gray-900 mb-1">
                        {{ $studentInfo['expected_graduation'] ? \Carbon\Carbon::parse($studentInfo['expected_graduation'])->format('M Y') : 'TBD' }}
                    </h4>
                    <p class="text-sm text-gray-600">Admitted {{ \Carbon\Carbon::parse($studentInfo['admission_date'])->format('M/y') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Academic Progress -->
    <div class="{{ $theme['card'] }} rounded-xl p-6 {{ $isFemale ? 'transform hover:scale-[1.02] transition-all duration-300' : '' }}">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                @if($isFemale)
                    <span class="text-2xl">📊</span>
                @endif
                Academic Progress
            </h2>
            <span class="text-sm font-bold {{ $theme['text'] }} px-4 py-2 {{ $isFemale ? 'bg-pink-50' : 'bg-blue-50' }} rounded-full">
                {{ number_format($progressPercentage, 1) }}% Complete
            </span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-6 mb-3 {{ $isFemale ? 'shadow-inner' : '' }} relative overflow-hidden">
            <div class="bg-gradient-to-r {{ $theme['progress'] }} rounded-full h-6 transition-all duration-1000 ease-out {{ $isFemale ? 'shimmer' : '' }} flex items-center justify-end pr-3" style="width: {{ min($progressPercentage, 100) }}%">
                <span class="text-white text-xs font-bold">{{ min($progressPercentage, 100) }}%</span>
            </div>
        </div>
        <div class="flex items-center justify-between text-sm text-gray-600">
            <span class="font-medium">{{ $studentInfo['total_credits'] }} credits earned</span>
            <span class="font-medium">{{ $requiredCredits }} credits required</span>
        </div>
    </div>

    <!-- My Academic Activities -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- My Attendance Today -->
        <div class="bg-gradient-to-br {{ $isFemale ? 'from-green-50 via-emerald-50 to-teal-50 border-2 border-green-200' : 'from-green-50 to-emerald-50 border border-green-100' }} rounded-xl shadow-sm p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <p class="text-sm font-medium {{ $isFemale ? 'text-green-700' : 'text-green-600' }} mb-1 flex items-center gap-1">
                        @if($isFemale)✨@endif My Attendance
                    </p>
                    <h3 class="text-3xl font-bold text-gray-900">{{ number_format($attendanceStats['percentage'], 1) }}%</h3>
                </div>
                <div class="w-12 h-12 {{ $isFemale ? 'bg-gradient-to-br from-green-200 to-emerald-300' : 'bg-green-100' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-lg float-animation' : '' }}">
                    <svg class="w-6 h-6 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="flex items-center justify-between text-sm mb-3">
                <span class="text-gray-600">Present: <span class="font-semibold text-green-600">{{ $attendanceStats['attended'] }}</span></span>
                <span class="text-gray-600">Absent: <span class="font-semibold text-red-600">{{ $attendanceStats['absent'] }}</span></span>
            </div>
            <div class="mt-3 pt-3 border-t {{ $isFemale ? 'border-green-200' : 'border-green-100' }}">
                <a href="{{ route('attendance.index') }}" class="text-xs {{ $isFemale ? 'text-green-700 font-semibold' : 'text-green-600' }} hover:underline flex items-center gap-1">
                    View Details @if($isFemale)💚@else→@endif
                </a>
            </div>
        </div>

        <!-- My Classes Today -->
        <div class="bg-gradient-to-br {{ $isFemale ? 'from-purple-50 via-pink-50 to-fuchsia-50 border-2 border-purple-200' : 'from-purple-50 to-pink-50 border border-purple-100' }} rounded-xl shadow-sm p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <p class="text-sm font-medium {{ $isFemale ? 'text-purple-700' : 'text-purple-600' }} mb-1 flex items-center gap-1">
                        @if($isFemale)📅@endif Today's Schedule
                    </p>
                    <h3 class="text-3xl font-bold text-gray-900">{{ $todaysClasses->count() }}</h3>
                </div>
                <div class="w-12 h-12 {{ $isFemale ? 'bg-gradient-to-br from-purple-200 to-pink-300' : 'bg-purple-100' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-lg float-animation' : '' }}" style="animation-delay: 0.5s;">
                    <svg class="w-6 h-6 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="text-sm mb-3">
                @if($nextClass)
                <div class="flex items-center justify-between mb-1">
                    <span class="text-gray-600">Next Class:</span>
                    <span class="font-semibold {{ $isFemale ? 'text-purple-700' : 'text-purple-600' }}">{{ date('g:i A', strtotime($nextClass->start_time)) }}</span>
                </div>
                <p class="text-xs text-gray-700 font-medium">{{ $nextClass->code }} - {{ $nextClass->venue }}</p>
                @elseif($todaysClasses->count() > 0)
                <p class="text-xs text-gray-600">All classes completed for today!</p>
                @else
                <p class="text-xs text-gray-600">No classes scheduled today</p>
                @endif
            </div>
            <div class="mt-3 pt-3 border-t {{ $isFemale ? 'border-purple-200' : 'border-purple-100' }}">
                <a href="{{ route('timetable.weekly') }}" class="text-xs {{ $isFemale ? 'text-purple-700 font-semibold' : 'text-purple-600' }} hover:underline flex items-center gap-1">
                    View Timetable @if($isFemale)💜@else→@endif
                </a>
            </div>
        </div>

        <!-- Upcoming Exams -->
        <div class="bg-gradient-to-br {{ $isFemale ? 'from-orange-50 via-amber-50 to-yellow-50 border-2 border-orange-200' : 'from-orange-50 to-amber-50 border border-orange-100' }} rounded-xl shadow-sm p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <p class="text-sm font-medium {{ $isFemale ? 'text-orange-700' : 'text-orange-600' }} mb-1 flex items-center gap-1">
                        @if($isFemale)📝@endif My Exams
                    </p>
                    <h3 class="text-3xl font-bold text-gray-900">{{ $upcomingExams->count() }}</h3>
                </div>
                <div class="w-12 h-12 {{ $isFemale ? 'bg-gradient-to-br from-orange-200 to-yellow-300' : 'bg-orange-100' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-lg float-animation' : '' }}" style="animation-delay: 1s;">
                    <svg class="w-6 h-6 text-orange-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 2"/>
                    </svg>
                </div>
            </div>
            <div class="text-sm mb-3">
                @if($upcomingExams->count() > 0)
                @php
                    $nextExam = $upcomingExams->first();
                    $daysUntil = now()->diffInDays($nextExam->exam_date);
                @endphp
                <div class="flex items-center justify-between mb-1">
                    <span class="text-gray-600">Next Exam:</span>
                    <span class="font-semibold {{ $isFemale ? 'text-orange-700' : 'text-orange-600' }}">{{ $daysUntil }} {{ $daysUntil == 1 ? 'day' : 'days' }}</span>
                </div>
                <p class="text-xs text-gray-700 font-medium">{{ $nextExam->code }} - {{ date('M d', strtotime($nextExam->exam_date)) }}</p>
                @else
                <p class="text-xs text-gray-600">No upcoming exams scheduled</p>
                @endif
            </div>
            <div class="mt-3 pt-3 border-t {{ $isFemale ? 'border-orange-200' : 'border-orange-100' }}">
                <a href="{{ route('examinations.index') }}" class="text-xs {{ $isFemale ? 'text-orange-700 font-semibold' : 'text-orange-600' }} hover:underline flex items-center gap-1">
                    View All Exams @if($isFemale)🧡@else→@endif
                </a>
            </div>
        </div>
    </div>

    <!-- Two Column Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Enrolled Courses (Current Semester) -->
        <div class="lg:col-span-2 {{ $theme['card'] }} rounded-xl p-6 {{ $isFemale ? 'transform hover:scale-[1.01] transition-all duration-300' : '' }}">
            <div class="flex items-center justify-between mb-5">
                <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                    @if($isFemale)
                        <span class="text-2xl">📖</span>
                    @endif
                    My Courses - Current Semester
                </h2>
                <div class="flex items-center space-x-3">
                    <span class="text-sm font-medium {{ $theme['text'] }} px-3 py-1 {{ $isFemale ? 'bg-pink-50' : 'bg-blue-50' }} rounded-full">
                        {{ $enrolledCourses->count() }} enrolled
                    </span>
                    <a href="{{ route('courses.register') }}" class="{{ $theme['button'] }} text-white px-4 py-2 text-sm rounded-lg shadow-md transform hover:scale-105 transition-all duration-200 font-medium">
                        + Register Courses
                    </a>
                </div>
            </div>
            
            @if($enrolledCourses->isEmpty())
                <div class="text-center py-12 border-2 border-dashed {{ $theme['border'] }} rounded-xl {{ $isFemale ? 'bg-gradient-to-br from-pink-50 to-purple-50' : 'bg-gray-50' }}">
                    <div class="{{ $isFemale ? 'float-animation' : '' }}">
                        <svg class="mx-auto h-16 w-16 {{ $theme['icon'] }}" 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>
                    <p class="mt-4 text-base font-semibold text-gray-900">No Courses Enrolled Yet</p>
                    <p class="text-sm text-gray-600 mt-2">Start your academic journey by registering for courses</p>
                    <a href="{{ route('courses.register') }}" class="mt-6 inline-block {{ $theme['button'] }} text-white px-6 py-3 text-sm font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200">
                        {{ $isFemale ? '✨ ' : '' }}Register for Courses{{ $isFemale ? ' ✨' : '' }}
                    </a>
                </div>
            @else
                <div class="space-y-3">
                    @foreach($enrolledCourses as $enrollment)
                        <div class="border-2 {{ $theme['border'] }} rounded-xl p-4 {{ $theme['hover'] }} transition-all duration-200 {{ $isFemale ? 'transform hover:translate-x-2' : '' }}">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-3">
                                        <span class="font-mono text-sm font-bold {{ $theme['text'] }} px-3 py-1 {{ $isFemale ? 'bg-gradient-to-r from-pink-100 to-purple-100' : 'bg-blue-50' }} rounded-lg">
                                            {{ $enrollment->course->code }}
                                        </span>
                                        <span class="text-sm font-semibold text-gray-800">{{ $enrollment->course->name }}</span>
                                    </div>
                                    <div class="flex items-center space-x-4 mt-3">
                                        <span class="text-xs {{ $isFemale ? 'text-pink-600 font-semibold' : 'text-gray-600' }} flex items-center gap-1">
                                            @if($isFemale)⭐@endif {{ $enrollment->course->credit_hours }} credits
                                        </span>
                                        <span class="text-xs text-gray-600 px-2 py-1 bg-gray-100 rounded-full">{{ $enrollment->course->course_type }}</span>
                                        @if($enrollment->grade)
                                            <span class="text-xs font-bold text-green-600 px-3 py-1 bg-green-100 rounded-full">Grade: {{ $enrollment->grade }}</span>
                                        @endif
                                    </div>
                                </div>
                                <span class="px-3 py-1 {{ $isFemale ? 'bg-gradient-to-r from-green-400 to-emerald-500 text-white' : 'bg-green-100 text-green-700' }} text-xs font-semibold rounded-full shadow-sm">
                                    Enrolled
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <div class="mt-5 pt-5 border-t-2 {{ $theme['border'] }}">
                    <div class="flex items-center justify-between text-sm mb-3 px-2">
                        <span class="text-gray-700 font-medium">Total Credits This Semester:</span>
                        <span class="font-bold {{ $theme['text'] }} text-lg">{{ $enrolledCourses->sum(fn($e) => $e->course->credit_hours) }} credits</span>
                    </div>
                    <a href="{{ route('courses.enrolled') }}" class="block text-center text-sm {{ $theme['text'] }} hover:underline font-semibold py-2 {{ $isFemale ? 'bg-gradient-to-r from-pink-50 to-purple-50' : 'bg-blue-50' }} rounded-lg">
                        View All My Courses & History →
                    </a>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Learning Resources -->
            <div class="{{ $theme['card'] }} rounded-xl p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    @if($isFemale)
                        <span class="text-2xl">📚</span>
                    @endif
                    Learning Resources
                </h2>
                <div class="space-y-3">
                    <a href="{{ route('lms.modules') }}" class="flex items-center justify-between p-3 rounded-xl {{ $isFemale ? 'bg-gradient-to-r from-blue-100 to-indigo-100 border-2 border-blue-200' : 'bg-blue-50' }} {{ $isFemale ? 'transform hover:translate-x-2 transition-all duration-200' : 'hover:bg-blue-100' }} transition-all">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 {{ $isFemale ? 'bg-gradient-to-br from-blue-400 to-indigo-500' : 'bg-blue-600' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-md' : '' }}">
                                <svg class="w-5 h-5 text-white" 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>
                                <p class="text-sm font-semibold {{ $isFemale ? 'text-blue-800' : 'text-blue-900' }}">Learning Modules</p>
                                <p class="text-xs {{ $isFemale ? 'text-blue-600' : 'text-blue-600' }}">{{ $lmsStats['total_modules'] }} modules available</p>
                            </div>
                        </div>
                        <svg class="w-5 h-5 {{ $isFemale ? 'text-blue-600' : 'text-blue-500' }}" 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('lms.modules') }}" class="flex items-center justify-between p-3 rounded-xl {{ $isFemale ? 'bg-gradient-to-r from-purple-100 to-pink-100 border-2 border-purple-200' : 'bg-purple-50' }} {{ $isFemale ? 'transform hover:translate-x-2 transition-all duration-200' : 'hover:bg-purple-100' }} transition-all">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 {{ $isFemale ? 'bg-gradient-to-br from-purple-400 to-pink-500' : 'bg-purple-600' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-md' : '' }}">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-semibold {{ $isFemale ? 'text-purple-800' : 'text-purple-900' }}">Video Lectures</p>
                                <p class="text-xs {{ $isFemale ? 'text-purple-600' : 'text-purple-600' }}">{{ $lmsStats['new_videos'] }} new videos</p>
                            </div>
                        </div>
                        <span class="px-2 py-1 {{ $isFemale ? 'bg-gradient-to-r from-green-400 to-emerald-500' : 'bg-green-600' }} text-white text-xs font-bold rounded-full {{ $isFemale ? 'shadow-md' : '' }}">New</span>
                    </a>

                    <a href="{{ route('lms.forums') }}" class="flex items-center justify-between p-3 rounded-xl {{ $isFemale ? 'bg-gradient-to-r from-green-100 to-teal-100 border-2 border-green-200' : 'bg-green-50' }} {{ $isFemale ? 'transform hover:translate-x-2 transition-all duration-200' : 'hover:bg-green-100' }} transition-all">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 {{ $isFemale ? 'bg-gradient-to-br from-green-400 to-teal-500' : 'bg-green-600' }} rounded-lg flex items-center justify-center {{ $isFemale ? 'shadow-md' : '' }}">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-semibold {{ $isFemale ? 'text-green-800' : 'text-green-900' }}">Discussion Forums</p>
                                <p class="text-xs {{ $isFemale ? 'text-green-600' : 'text-green-600' }}">Join discussions</p>
                            </div>
                        </div>
                        <svg class="w-5 h-5 {{ $isFemale ? 'text-green-600' : 'text-green-500' }}" 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>

            <!-- Upcoming Events -->
            <div class="{{ $theme['card'] }} rounded-xl p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    @if($isFemale)
                        <span class="text-2xl">🗓️</span>
                    @endif
                    Upcoming Events
                </h2>
                <div class="space-y-3">
                    @forelse($upcomingEvents as $event)
                        <div class="flex items-start space-x-3 p-3 rounded-xl {{ $event['type'] === 'deadline' ? ($isFemale ? 'bg-gradient-to-r from-red-100 to-pink-100 border-2 border-red-200' : 'bg-red-50') : ($isFemale ? 'bg-gradient-to-r from-blue-100 to-purple-100 border-2 border-blue-200' : 'bg-blue-50') }} {{ $isFemale ? 'transform hover:translate-x-2 transition-all duration-200' : '' }}">
                            <div class="flex-shrink-0">
                                @if($event['type'] === 'deadline')
                                    <svg class="w-6 h-6 {{ $isFemale ? 'text-red-500' : 'text-red-600' }}" 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>
                                @else
                                    <svg class="w-6 h-6 {{ $isFemale ? 'text-blue-500' : 'text-blue-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>
                                @endif
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold {{ $event['type'] === 'deadline' ? ($isFemale ? 'text-red-800' : 'text-red-900') : ($isFemale ? 'text-blue-800' : 'text-blue-900') }}">
                                    {{ $event['title'] }}
                                </p>
                                <p class="text-xs {{ $event['type'] === 'deadline' ? 'text-red-600' : 'text-blue-600' }} mt-1 font-medium">
                                    {{ \Carbon\Carbon::parse($event['date'])->format('M d, Y') }}
                                </p>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-gray-500 text-center py-6 {{ $isFemale ? 'bg-gradient-to-r from-pink-50 to-purple-50' : 'bg-gray-50' }} rounded-xl">
                            @if($isFemale)
                                ✨ No upcoming events ✨
                            @else
                                No upcoming events
                            @endif
                        </p>
                    @endforelse
                </div>
            </div>

            <!-- Quick Links -->
            <div class="{{ $theme['card'] }} rounded-xl p-6 {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300' : '' }}">
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    @if($isFemale)
                        <span class="text-2xl">⚡</span>
                    @endif
                    Quick Links
                </h2>
                <div class="space-y-2">
                    <a href="{{ route('profile.edit') }}" class="flex items-center justify-between p-3 rounded-xl {{ $theme['hover'] }} transition-all duration-200 group {{ $isFemale ? 'border-2 border-transparent hover:border-pink-200' : '' }}">
                        <span class="text-sm font-medium text-gray-700 group-hover:{{ $theme['text'] }}">
                            @if($isFemale)👤 @endif My Profile
                        </span>
                        <svg class="w-4 h-4 {{ $theme['icon'] }} transform group-hover:translate-x-1 transition-transform" 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="#" class="flex items-center justify-between p-3 rounded-xl {{ $theme['hover'] }} transition-all duration-200 group {{ $isFemale ? 'border-2 border-transparent hover:border-pink-200' : '' }}">
                        <span class="text-sm font-medium text-gray-700 group-hover:{{ $theme['text'] }}">
                            @if($isFemale)📄 @endif My Documents
                        </span>
                        <svg class="w-4 h-4 {{ $theme['icon'] }} transform group-hover:translate-x-1 transition-transform" 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="#" class="flex items-center justify-between p-3 rounded-xl {{ $theme['hover'] }} transition-all duration-200 group {{ $isFemale ? 'border-2 border-transparent hover:border-pink-200' : '' }}">
                        <span class="text-sm font-medium text-gray-700 group-hover:{{ $theme['text'] }}">
                            @if($isFemale)🎓 @endif Academic Records
                        </span>
                        <svg class="w-4 h-4 {{ $theme['icon'] }} transform group-hover:translate-x-1 transition-transform" 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('courses.register') }}" class="flex items-center justify-between p-3 rounded-xl {{ $theme['hover'] }} transition-all duration-200 group {{ $isFemale ? 'border-2 border-transparent hover:border-pink-200' : '' }}">
                        <span class="text-sm font-medium text-gray-700 group-hover:{{ $theme['text'] }}">
                            @if($isFemale)📚 @endif Course Registration
                        </span>
                        <svg class="w-4 h-4 {{ $theme['icon'] }} transform group-hover:translate-x-1 transition-transform" 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>

            <!-- Help & Support -->
            <div class="bg-gradient-to-br {{ $isFemale ? 'from-purple-500 via-pink-500 to-rose-500' : 'from-purple-600 to-pink-600' }} rounded-xl shadow-lg p-6 text-white {{ $isFemale ? 'transform hover:scale-105 transition-all duration-300 pulse-glow' : '' }} relative overflow-hidden">
                @if($isFemale)
                    <div class="absolute top-0 right-0 text-6xl opacity-20">💖</div>
                @endif
                <div class="relative z-10">
                    <h2 class="text-xl font-bold mb-2 flex items-center gap-2">
                        @if($isFemale)💬 @endif Need Help?
                    </h2>
                    <p class="text-sm {{ $isFemale ? 'text-pink-100' : 'text-purple-100' }} mb-4">
                        {{ $isFemale ? 'We\'re here for you! Contact student services anytime' : 'Contact student services for assistance' }}
                    </p>
                    <a href="#" class="block w-full bg-white {{ $theme['text'] }} text-center font-bold py-3 px-4 rounded-lg hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105 shadow-lg">
                        {{ $isFemale ? '✨ Get Support ✨' : 'Get Support' }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection