{{-- resources/views/guru/dashboard.blade.php & resources/views/siswa/dashboard.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    {{ __('My Dashboard') }}
                </h2>
                <p class="text-sm text-gray-600 mt-1">
                    @if(Auth::user()->isGuru())
                        Teacher Progress & Assessment Center
                    @else
                        Student Learning & Assessment Center
                    @endif
                    @if(Auth::user()->school)
                        - {{ Auth::user()->school->name }}
                    @endif
                </p>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('assessment.index') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
                    Take Assessment
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">

            <!-- Welcome Message -->
            <div class="bg-yellow-600 text-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">Welcome back, {{ Auth::user()->name }}!</h3>
                            <p class="@if(Auth::user()->isGuru()) text-yellow-100 @else text-purple-100 @endif mt-1">
                                @if(Auth::user()->isGuru())
                                    Ready to enhance your digital teaching skills?
                                @else
                                    Continue your digital literacy journey!
                                @endif
                            </p>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold">{{ now()->format('d M Y') }}</div>
                            <div class="@if(Auth::user()->isGuru()) text-yellow-100 @else text-purple-100 @endif">{{ now()->format('l') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Progress Stats -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 @if(Auth::user()->isGuru()) bg-yellow-500 @else bg-purple-500 @endif rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">My Assessments</dt>
                                    <dd class="flex items-baseline">
                                        <span class="text-2xl font-semibold text-gray-900">{{ $stats['my_assessments'] ?? 0 }}</span>
                                        <span class="ml-2 text-sm font-medium @if(Auth::user()->isGuru()) text-yellow-600 @else text-purple-600 @endif">Total</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
                                    <dd class="flex items-baseline">
                                        <span class="text-2xl font-semibold text-gray-900">{{ $stats['completed_assessments'] ?? 0 }}</span>
                                        <span class="ml-2 text-sm font-medium text-green-600">Finished</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5V3z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Average Score</dt>
                                    <dd class="flex items-baseline">
                                        <span class="text-2xl font-semibold text-gray-900">{{ number_format($stats['average_score'] ?? 0, 1) }}%</span>
                                        <span class="ml-2 text-sm font-medium text-blue-600">Overall</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">In Progress</dt>
                                    <dd class="flex items-baseline">
                                        <span class="text-2xl font-semibold text-gray-900">{{ $stats['in_progress'] ?? 0 }}</span>
                                        <span class="ml-2 text-sm font-medium text-orange-600">Active</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Assessment Quick Start -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-medium text-gray-900">Available Assessments</h3>
                        <a href="{{ route('assessment.index') }}" class="text-sm text-blue-600 hover:text-blue-800">View all →</a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- Sample assessment cards -->
                        @if(Auth::user()->isGuru())
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="font-medium text-gray-900">Teacher Readiness</h4>
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        Guru
                                    </span>
                                </div>
                                <p class="text-sm text-gray-600 mb-4">Assess your digital teaching readiness and skills</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-500">25 questions</span>
                                    <a href="{{ route('assessment.index') }}"
                                        class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-sm transition-colors">
                                        Start
                                    </a>
                                </div>
                            </div>
                        @else
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="font-medium text-gray-900">Digital Literacy</h4>
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                        Siswa
                                    </span>
                                </div>
                                <p class="text-sm text-gray-600 mb-4">Test your digital skills and knowledge</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-500">25 questions</span>
                                    <a href="{{ route('assessment.index') }}"
                                        class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-sm transition-colors">
                                        Start
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Progress & Performance -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- My Progress Chart -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">My Progress Over Time</h3>
                        <div class="relative h-64">
                            <canvas id="progressChart"></canvas>
                        </div>
                        <div class="mt-4 text-center">
                            <div class="text-sm text-gray-600">
                                @if(Auth::user()->isGuru())
                                    Your digital teaching skills are improving!
                                @else
                                    Keep up the great learning progress!
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Performance Breakdown -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Performance Breakdown</h3>

                        <div class="space-y-4">
                            @if(Auth::user()->isGuru())
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Technology Integration</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-yellow-600 h-2 rounded-full" style="width: 85%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-yellow-600">85%</span>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Digital Pedagogy</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-green-600">78%</span>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Digital Assessment</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: 72%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-blue-600">72%</span>
                                    </div>
                                </div>
                            @else
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Basic Digital Skills</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-purple-600 h-2 rounded-full" style="width: 82%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-purple-600">82%</span>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Information Literacy</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-green-600">75%</span>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium text-gray-700">Digital Communication</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-3">
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: 68%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-blue-600">68%</span>
                                    </div>
                                </div>
                            @endif

                            <!-- Current Level Badge -->
                            <div class="mt-6 text-center">
                                <div class="inline-flex items-center px-4 py-2 rounded-full @if(Auth::user()->isGuru()) bg-yellow-100 text-yellow-800 @else bg-purple-100 text-purple-800 @endif">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25s4.544.16 6.75.471v1.515M18.75 4.236c.982.143 1.954.317 2.916.52a6.003 6.003 0 01-4.395 5.472M18.75 4.236V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.228V2.721m-2.48 5.228A9.014 9.014 0 0112 14.25c-2.357 0-4.52-.906-6.12-2.394"/>
                                    </svg>
                                    @if(Auth::user()->isGuru())
                                        Digital Educator - Intermediate
                                    @else
                                        Digital Native - Developing
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity & Next Steps -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Recent Activity -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Recent Activity</h3>
                        <div class="flow-root">
                            <ul class="-mb-8">
                                <li>
                                    <div class="relative pb-8">
                                        <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                                        <div class="relative flex space-x-3">
                                            <div>
                                                <span class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
                                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                <div>
                                                    <p class="text-sm text-gray-500">
                                                        @if(Auth::user()->isGuru())
                                                            Completed <span class="font-medium text-gray-900">Digital Pedagogy Assessment</span> - Score: 85%
                                                        @else
                                                            Completed <span class="font-medium text-gray-900">Basic Digital Skills</span> - Score: 82%
                                                        @endif
                                                    </p>
                                                </div>
                                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                    <time>2 days ago</time>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="relative pb-8">
                                        <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                                        <div class="relative flex space-x-3">
                                            <div>
                                                <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                <div>
                                                    <p class="text-sm text-gray-500">
                                                        @if(Auth::user()->isGuru())
                                                            Started <span class="font-medium text-gray-900">Technology Integration Assessment</span>
                                                        @else
                                                            Started <span class="font-medium text-gray-900">Information Literacy Assessment</span>
                                                        @endif
                                                    </p>
                                                </div>
                                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                    <time>1 week ago</time>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="relative">
                                        <div class="relative flex space-x-3">
                                            <div>
                                                <span class="h-8 w-8 rounded-full @if(Auth::user()->isGuru()) bg-yellow-500 @else bg-purple-500 @endif flex items-center justify-center ring-8 ring-white">
                                                    <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25s4.544.16 6.75.471v1.515M18.75 4.236c.982.143 1.954.317 2.916.52a6.003 6.003 0 01-4.395 5.472M18.75 4.236V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.228V2.721m-2.48 5.228A9.014 9.014 0 0112 14.25c-2.357 0-4.52-.906-6.12-2.394"/>
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                <div>
                                                    <p class="text-sm text-gray-500">
                                                        @if(Auth::user()->isGuru())
                                                            Achieved <span class="font-medium text-gray-900">Digital Educator Badge</span>
                                                        @else
                                                            Achieved <span class="font-medium text-gray-900">Digital Communicator Badge</span>
                                                        @endif
                                                    </p>
                                                </div>
                                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                    <time>2 weeks ago</time>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Next Steps & Recommendations -->
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Recommended Next Steps</h3>

                        <div class="space-y-4">
                            @if(Auth::user()->isGuru())
                                <div class="p-4 border border-yellow-200 bg-yellow-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-yellow-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12V15.75z"/>
                                        </svg>
                                        <div>
                                            <h4 class="text-sm font-medium text-yellow-800">Focus on Digital Assessment</h4>
                                            <p class="text-sm text-yellow-700 mt-1">Your digital assessment skills need improvement. Consider taking advanced courses.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-4 border border-green-200 bg-green-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-green-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        <div>
                                            <h4 class="text-sm font-medium text-green-800">Complete Technology Integration</h4>
                                            <p class="text-sm text-green-700 mt-1">You're doing great! Complete the remaining technology integration modules.</p>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="p-4 border border-purple-200 bg-purple-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-purple-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12V15.75z"/>
                                        </svg>
                                        <div>
                                            <h4 class="text-sm font-medium text-purple-800">Improve Digital Communication</h4>
                                            <p class="text-sm text-purple-700 mt-1">Practice online collaboration and digital communication tools.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-4 border border-blue-200 bg-blue-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
                                        </svg>
                                        <div>
                                            <h4 class="text-sm font-medium text-blue-800">Explore Learning Resources</h4>
                                            <p class="text-sm text-blue-700 mt-1">Check out our digital literacy learning materials and tutorials.</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- Call to Action -->
                            <div class="pt-4">
                                <a href="{{ route('assessment.index') }}"
                                   class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white @if(Auth::user()->isGuru()) bg-yellow-600 hover:bg-yellow-700 @else bg-purple-600 hover:bg-purple-700 @endif">
                                    Continue Learning Journey
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Progress Chart
        const progressCtx = document.getElementById('progressChart');
        if (progressCtx) {
            new Chart(progressCtx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Assessment Score (%)',
                        data: [65, 68, 72, 75, 78, {{ number_format($stats['average_score'] ?? 80, 0) }}],
                        borderColor: @if(Auth::user()->isGuru()) '#D97706' @else '#7C3AED' @endif,
                        backgroundColor: @if(Auth::user()->isGuru()) '#FEF3C7' @else '#EDE9FE' @endif,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        }
    });
    </script>
</x-app-layout>