@extends('admin.layouts.admin')

@section('title', 'Admin Profile')
@section('page_title', 'User Profile')

@section('content')
    <div class="max-w-4xl">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <!-- Profile Card -->
            <div class="lg:col-span-1">
                <div
                    class="bg-white rounded-lg shadow-sm border border-slate-200 p-8 text-center dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
                    <div class="relative inline-block mb-6">
                        <div
                            class="w-24 h-24 rounded-full bg-slate-200 flex items-center justify-center border-4 border-slate-50 dark:bg-white/5 dark:border-white/5">
                            <i class="fas fa-user text-slate-400 text-4xl dark:text-slate-600"></i>
                        </div>
                    </div>
                    <h3 class="text-lg font-black text-[#404e67] dark:text-slate-200">Admin User</h3>
                    <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mt-1">Super Administrator</p>
                    <div class="mt-8 pt-8 border-t border-slate-100 flex justify-around text-center dark:border-white/5">
                        <div>
                            <p class="text-lg font-black text-[#404e67] dark:text-slate-200">42</p>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Posts</p>
                        </div>
                        <div>
                            <p class="text-lg font-black text-[#404e67] dark:text-slate-200">12</p>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Pages</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Update Information -->
            <div class="lg:col-span-2">
                <div
                    class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
                    <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                        <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">Personal Information</h3>
                    </div>
                    <form class="p-8 space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label
                                    class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Full
                                    Name</label>
                                <input type="text" value="Admin User"
                                    class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                            </div>
                            <div class="space-y-2">
                                <label
                                    class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Email
                                    Address</label>
                                <input type="email" value="admin@onehostbd.com"
                                    class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                            </div>
                            <div class="space-y-2 col-span-2">
                                <label
                                    class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">New
                                    Password</label>
                                <input type="password" placeholder="Leave blank to keep current"
                                    class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                            </div>
                        </div>
                        <div class="pt-6 border-t border-slate-100 flex justify-end dark:border-white/5">
                            <button type="button"
                                class="bg-primary text-white px-8 py-3 rounded-lg font-bold text-xs shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all transform hover:-translate-y-0.5 uppercase tracking-widest">
                                Update Profile
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection