<x-app-layout>\u000d\u000a    <x-slot name="header">\u000d\u000a        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">\u000d\u000a            <div>\u000d\u000a                <h1 class="text-4xl font-black text-slate-900 tracking-tight font-outfit">Management Dashboard</h1>\u000d\u000a                <p class="text-slate-400 font-medium mt-1 italic uppercase tracking-widest text-[10px]">Administrative Overview</p>\u000d\u000a            </div>\u000d\u000a            <div class="flex items-center gap-3">\u000d\u000a                <div class="hidden md:flex flex-col items-end mr-4">\u000d\u000a                    <span class="text-xs font-black text-slate-900">{{ auth()->user()->name }}</span>\u000d\u000a                    <span class="text-[10px] font-bold text-indigo-500 uppercase tracking-tighter">System Administrator</span>\u000d\u000a                </div>\u000d\u000a                <a href="{{ route('admin.notes.create') }}" class="btn btn-indigo gap-2 px-6 shadow-indigo-200">\u000d\u000a                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" /></svg>\u000d\u000a                    New Entry\u000d\u000a                </a>\u000d\u000a            </div>\u000d\u000a        </div>\u000d\u000a    </x-slot>\u000d\u000a\u000d\u000a    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">\u000d\u000a        <!-- Stats Cards with hover effects and cleaner icons -->\u000d\u000a        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">\u000d\u000a            <div class="w-14 h-14 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">\u000d\u000a                <svg class="w-7 h-7" 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>\u000d\u000a            </div>\u000d\u000a            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Total Repository</p>\u000d\u000a            <p class="text-3xl font-black text-slate-900 tabular-nums">{{ number_format($stats['total_notes']) }} <span class="text-xs font-bold text-slate-300 ml-1">Notes</span></p>\u000d\u000a        </div>\u000d\u000a\u000d\u000a        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">\u000d\u000a            <div class="w-14 h-14 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-300">\u000d\u000a                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>\u000d\u000a            </div>\u000d\u000a            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Global Reach</p>\u000d\u000a            <p class="text-3xl font-black text-slate-900 tabular-nums">{{ number_format($stats['total_views']) }} <span class="text-xs font-bold text-slate-300 ml-1">Views</span></p>\u000d\u000a        </div>\u000d\u000a\u000d\u000a        <!-- Student Access Control Card -->\u000d\u000a        <a href="{{ route('admin.users.index') }}" class="bg-indigo-600 p-8 rounded-[2rem] shadow-xl hover:shadow-indigo-200 hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden">\u000d\u000a            <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl"></div>\u000d\u000a            <div class="w-14 h-14 bg-white/20 text-white rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-indigo-600 transition-all duration-300">\u000d\u000a                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>\u000d\u000a            </div>\u000d\u000a            <p class="text-[10px] font-black text-indigo-200 uppercase tracking-[0.2em] mb-1">Authorization</p>\u000d\u000a            <p class="text-2xl font-black text-white leading-tight">Manage Student <span class="block">Access</span></p>\u000d\u000a            <div class="mt-4 flex items-center gap-2 text-[10px] font-black text-white/60 uppercase tracking-widest">\u000d\u000a                Grant Access \u000d\u000a                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7-7 7" /></svg>\u000d\u000a            </div>\u000d\u000a        </a>\u000d\u000a\u000d\u000a        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">\u000d\u000a            <div class="w-14 h-14 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-600 group-hover:text-white transition-colors duration-300">\u000d\u000a                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>\u000d\u000a            </div>\u000d\u000a            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Subject Areas</p>\u000d\u000a            <p class="text-3xl font-black text-slate-900 tabular-nums">{{ number_format($stats['total_categories']) }} <span class="text-xs font-bold text-slate-300 ml-1">Topics</span></p>\u000d\u000a        </div>\u000d\u000a    </div>\u000d\u000a\u000d\u000a    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">\u000d\u000a        <!-- Recent Notes Table-like view -->\u000d\u000a        <div class="lg:col-span-2 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden flex flex-col">\u000d\u000a            <div class="p-8 border-b border-slate-50 flex items-center justify-between bg-slate-50/30">\u000d\u000a                <h3 class="text-xl font-black text-slate-800 font-outfit">Recent Repository Entries</h3>\u000d\u000a                <a href="{{ route('admin.notes.index') }}" class="btn btn-secondary !py-2 !px-4 text-[10px] tracking-widest">Master List</a>\u000d\u000a            </div>\u000d\u000a            <div class="overflow-x-auto">\u000d\u000a                <table class="w-full text-left">\u000d\u000a                    <thead>\u000d\u000a                        <tr class="bg-slate-50/50">\u000d\u000a                            <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Entry Title</th>\u000d\u000a                            <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Classification</th>\u000d\u000a                            <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>\u000d\u000a                            <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>\u000d\u000a                        </tr>\u000d\u000a                    </thead>\u000d\u000a                    <tbody class="divide-y divide-slate-50">\u000d\u000a                        @foreach($recent_notes as $note)\u000d\u000a                            <tr class="hover:bg-slate-50/80 transition-colors group">\u000d\u000a                                <td class="px-8 py-5">\u000d\u000a                                    <div class="flex items-center gap-4 min-w-0">\u000d\u000a                                        <div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center font-black text-xs shrink-0 group-hover:bg-indigo-600 group-hover:text-white transition-all">\u000d\u000a                                            {{ substr($note->title, 0, 1) }}\u000d\u000a                                        </div>\u000d\u000a                                        <span class="text-sm font-bold text-slate-800 truncate" title="{{ $note->title }}">{{ $note->title }}</span>\u000d\u000a                                    </div>\u000d\u000a                                </td>\u000d\u000a                                <td class="px-8 py-5">\u000d\u000a                                    <span class="text-[10px] font-black text-slate-500 bg-slate-100 px-3 py-1 rounded-full uppercase tracking-wider">\u000d\u000a                                        {{ $note->category->name }}\u000d\u000a                                    </span>\u000d\u000a                                </td>\u000d\u000a                                <td class="px-8 py-5">\u000d\u000a                                    <div class="flex items-center gap-1.5">\u000d\u000a                                        <span class="w-2 h-2 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>\u000d\u000a                                        <span class="text-[10px] font-bold text-slate-400 uppercase">Live</span>\u000d\u000a                                    </div>\u000d\u000a                                </td>\u000d\u000a                                <td class="px-8 py-5">\u000d\u000a                                    <div class="flex items-center gap-3">\u000d\u000a                                        <a href="{{ route('admin.notes.edit', $note) }}" class="p-2 bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-white hover:shadow-md rounded-lg transition-all">\u000d\u000a                                            <svg class="w-4 h-4" 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>\u000d\u000a                                        </a>\u000d\u000a                                        <a href="{{ route('notes.show', $note) }}" class="p-2 bg-slate-50 text-slate-400 hover:text-emerald-600 hover:bg-white hover:shadow-md rounded-lg transition-all">\u000d\u000a                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>\u000d\u000a                                        </a>\u000d\u000a                                    </div>\u000d\u000a                                </td>\u000d\u000a                            </tr>\u000d\u000a                        @endforeach\u000d\u000a                    </tbody>\u000d\u000a                </table>\u000d\u000a            </div>\u000d\u000a        </div>\u000d\u000a\u000d\u000a        <!-- Sidebar Activity/Popular -->\u000d\u000a        <div class="bg-slate-900 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden group">\u000d\u000a            <!-- Decorative circle -->\u000d\u000a            <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600/10 rounded-full -mr-32 -mt-32 blur-3xl"></div>\u000d\u000a            \u000d\u000a            <div class="relative z-10 flex flex-col h-full">\u000d\u000a                <h3 class="text-xl font-black text-white font-outfit mb-8 flex items-center gap-3">\u000d\u000a                    <span class="w-2 h-2 bg-indigo-400 rounded-full"></span>\u000d\u000a                    High Performance\u000d\u000a                </h3>\u000d\u000a                \u000d\u000a                <div class="space-y-6 flex-grow">\u000d\u000a                    @foreach($top_notes as $index => $note)\u000d\u000a                        <div class="flex items-center justify-between group/item gap-4">\u000d\u000a                            <div class="flex items-center gap-4 min-w-0">\u000d\u000a                                <div class="text-xs font-black text-slate-700 tabular-nums shrink-0">0{{ $index + 1 }}</div>\u000d\u000a                                <div class="min-w-0">\u000d\u000a                                    <p class="text-sm font-bold text-slate-300 group-hover/item:text-white transition-colors truncate" title="{{ $note->title }}">{{ $note->title }}</p>\u000d\u000a                                    <p class="text-[10px] font-bold text-slate-500 uppercase">{{ number_format($note->view_count) }} Views</p>\u000d\u000a                                </div>\u000d\u000a                            </div>\u000d\u000a                            <div class="w-16 h-1 bg-slate-800 rounded-full overflow-hidden shrink-0">\u000d\u000a                                <div class="h-full bg-indigo-500 rounded-full group-hover/item:bg-indigo-400 transition-all duration-700" style="width: {{ ($note->view_count / max($top_notes->pluck('view_count')->toArray())) * 100 }}%"></div>\u000d\u000a                            </div>\u000d\u000a                        </div>\u000d\u000a                    @endforeach\u000d\u000a                </div>\u000d\u000a\u000d\u000a                <div class="mt-12 pt-8 border-t border-slate-800 text-center">\u000d\u000a                    <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-4">System Integrity</p>\u000d\u000a                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-500 rounded-full text-[10px] font-black uppercase tracking-widest border border-emerald-500/20">\u000d\u000a                        <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>\u000d\u000a                        Operational\u000d\u000a                    </div>\u000d\u000a                </div>\u000d\u000a            </div>\u000d\u000a        </div>\u000d\u000a    </div>\u000d\u000a</x-app-layout>