<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - Academia</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-slate-50 min-h-screen">
    <!-- Sidebar -->
    <aside class="fixed left-0 top-0 h-full w-64 bg-slate-900 text-white p-6 hidden lg:block">
        <div class="flex items-center gap-3 mb-12">
            <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
                <i data-lucide="graduation-cap" class="w-5 h-5"></i>
            </div>
            <span class="text-xl font-bold">Academia Admin</span>
        </div>
        
        <nav class="space-y-4">
            <a href="#" class="flex items-center gap-3 px-4 py-3 bg-indigo-600 rounded-xl text-white">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
            </a>
            <a href="{{ route('admin.logout') }}" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white transition-colors">
                <i data-lucide="log-out" class="w-5 h-5"></i> Logout
            </a>
        </nav>
    </aside>

    <!-- Main Content -->
    <main class="lg:ml-64 p-8">
        <header class="flex justify-between items-center mb-12">
            <div>
                <h1 class="text-3xl font-extrabold text-slate-900">Dashboard Overview</h1>
                <p class="text-slate-500">Manage your website content and view student inquiries.</p>
            </div>
            <div class="flex items-center gap-4">
                <div class="bg-white p-3 rounded-xl shadow-sm border border-slate-200">
                    <span class="text-slate-900 font-bold">Admin Account</span>
                </div>
            </div>
        </header>

        @if(session('success'))
            <div class="bg-green-50 text-green-600 p-4 rounded-2xl mb-8 border border-green-100 font-medium">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid lg:grid-cols-2 gap-10">
            <!-- Content Management -->
            <section class="bg-white rounded-[2rem] shadow-sm border border-slate-100 overflow-hidden">
                <div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                    <h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
                        <i data-lucide="edit-3" class="w-5 h-5 text-indigo-600"></i> Edit Site Content
                    </h2>
                </div>
                <div class="p-8">
                    <div class="space-y-8">
                        @foreach($contents as $content)
                            <form action="{{ route('admin.content.update') }}" method="POST" class="space-y-3">
                                @csrf
                                <div class="flex justify-between items-center">
                                    <label class="text-xs font-black uppercase tracking-widest text-slate-400">{{ str_replace('_', ' ', $content->key) }}</label>
                                    <button type="submit" class="text-xs font-bold text-indigo-600 hover:underline">Update</button>
                                </div>
                                <input type="hidden" name="key" value="{{ $content->key }}">
                                @if(strlen($content->value) > 100)
                                    <textarea name="value" rows="3" class="w-full px-6 py-4 bg-slate-50 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all text-slate-700">{{ $content->value }}</textarea>
                                @else
                                    <input type="text" name="value" value="{{ $content->value }}" class="w-full px-6 py-4 bg-slate-50 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all text-slate-700">
                                @endif
                            </form>
                        @endforeach
                    </div>
                </div>
            </section>

            <!-- Contact Messages -->
            <section class="bg-white rounded-[2rem] shadow-sm border border-slate-100 overflow-hidden">
                <div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                    <h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
                        <i data-lucide="mail" class="w-5 h-5 text-indigo-600"></i> Recent Inquiries
                    </h2>
                    <span class="bg-indigo-100 text-indigo-600 text-xs font-bold px-3 py-1 rounded-full">{{ $messages->count() }} Total</span>
                </div>
                <div class="p-8">
                    <div class="space-y-6">
                        @forelse($messages as $msg)
                            <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100">
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h4 class="font-bold text-slate-900">{{ $msg->name }}</h4>
                                        <p class="text-sm text-indigo-600 font-medium">{{ $msg->email }}</p>
                                    </div>
                                    <span class="text-[10px] text-slate-400 font-bold uppercase">{{ $msg->created_at->diffForHumans() }}</span>
                                </div>
                                <p class="text-slate-600 text-sm leading-relaxed bg-white p-4 rounded-xl border border-slate-100">{{ $msg->message }}</p>
                            </div>
                        @empty
                            <div class="text-center py-12 text-slate-400">
                                <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-4 opacity-20"></i>
                                <p>No messages yet.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </section>
        </div>
    </main>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>
