@extends('layouts.admin', ['title' => 'Dashboard'])

@section('content')
    @php
        $cardStyles = [
            'pages' => ['from' => 'from-emerald-500/20', 'via' => 'via-emerald-500/5', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" 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"/>', 'route' => 'admin.pages.index'],
            'courses' => ['from' => 'from-cyan-500/20', 'via' => 'via-cyan-500/5', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M4 19.5A2.5 2.5 0 016.5 17H20V4H6.5A2.5 2.5 0 004 6.5v13z"/>', 'route' => 'admin.courses.index'],
            'blog_posts' => ['from' => 'from-indigo-500/20', 'via' => 'via-indigo-500/5', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" 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"/>', 'route' => 'admin.blog.index'],
            'gallery_items' => ['from' => 'from-rose-500/20', 'via' => 'via-rose-500/5', 'icon' => '<rect x="3" y="5" width="18" height="14" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 16l5-5 4 4 3-3 6 6"/><circle cx="9" cy="10" r="1.5"/>', 'route' => 'admin.gallery.index'],
            'testimonials' => ['from' => 'from-amber-500/20', 'via' => 'via-amber-500/5', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M12 17.3l-5.5 3 1-6.1L3 9.8l6.1-.9L12 3.4l2.9 5.5 6.1.9-4.5 4.4 1 6.1z"/>', 'route' => 'admin.testimonials.index'],
            'contact_messages' => ['from' => 'from-fuchsia-500/20', 'via' => 'via-fuchsia-500/5', 'icon' => '<rect x="3" y="5" width="18" height="14" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 7l9 6 9-6"/>', 'route' => 'admin.contact.index'],
        ];
    @endphp

    <div class="overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-emerald-500/10 via-cyan-500/5 to-indigo-500/10 p-8 ring-soft">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/50">Welcome back</div>
                <div class="mt-1 text-3xl font-semibold tracking-tight">Hi, {{ auth()->user()->name ?? 'Admin' }} 👋</div>
                <div class="mt-2 max-w-xl text-sm text-white/65">Manage website content, pages, courses, students, and inbox — all from one console.</div>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('admin.courses.create') }}" class="lift inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-white/90">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                    New Course
                </a>
                <a href="{{ route('admin.blog.create') }}" class="lift inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-semibold text-white hover:bg-white/10">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                    Write Blog
                </a>
            </div>
        </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach($counts as $label => $count)
            @php
                $style = $cardStyles[$label] ?? ['from' => 'from-white/10', 'via' => 'via-white/0', 'icon' => '', 'route' => 'admin.dashboard'];
            @endphp
            <a href="{{ route($style['route']) }}" class="reveal lift group relative overflow-hidden rounded-2xl border border-white/10 bg-slate-950/40 p-6 ring-soft hover:border-white/20" style="animation-delay: {{ 0.05 * $loop->index }}s">
                <div class="pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br {{ $style['from'] }} {{ $style['via'] }} to-transparent blur-2xl transition group-hover:scale-110"></div>
                <div class="relative flex items-start justify-between">
                    <div>
                        <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/45">{{ ucwords(str_replace('_', ' ', $label)) }}</div>
                        <div class="mt-3 text-4xl font-semibold tracking-tight">{{ $count }}</div>
                        <div class="mt-2 inline-flex items-center gap-1 text-xs text-emerald-300/80">
                            <span>Manage</span>
                            <svg class="h-3.5 w-3.5 transition group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                        </div>
                    </div>
                    <div class="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-white/10 bg-white/[0.06] text-white/80">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">{!! $style['icon'] !!}</svg>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
        <div class="reveal reveal-delay-2 rounded-2xl border border-white/10 bg-white/5 p-6 lg:col-span-2 ring-soft">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm font-semibold">Quick Actions</div>
                    <div class="mt-1 text-xs text-white/55">Common admin tasks at a glance.</div>
                </div>
            </div>
            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                <a href="{{ route('admin.content.edit') }}" class="lift flex items-center gap-3 rounded-xl border border-white/10 bg-slate-950/40 p-4 hover:bg-white/5">
                    <div class="grid h-10 w-10 place-items-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500"><svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg></div>
                    <div>
                        <div class="text-sm font-semibold">Edit Site Content</div>
                        <div class="text-xs text-white/55">Hero, about, services & more</div>
                    </div>
                </a>
                <a href="{{ route('admin.pages.create') }}" class="lift flex items-center gap-3 rounded-xl border border-white/10 bg-slate-950/40 p-4 hover:bg-white/5">
                    <div class="grid h-10 w-10 place-items-center rounded-lg bg-gradient-to-br from-cyan-500 to-indigo-500"><svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg></div>
                    <div>
                        <div class="text-sm font-semibold">New Page</div>
                        <div class="text-xs text-white/55">Add a custom page to the site</div>
                    </div>
                </a>
                <a href="{{ route('admin.gallery.index') }}" class="lift flex items-center gap-3 rounded-xl border border-white/10 bg-slate-950/40 p-4 hover:bg-white/5">
                    <div class="grid h-10 w-10 place-items-center rounded-lg bg-gradient-to-br from-rose-500 to-fuchsia-500"><svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 16l5-5 4 4 3-3 6 6"/><circle cx="9" cy="10" r="1.5"/></svg></div>
                    <div>
                        <div class="text-sm font-semibold">Manage Gallery</div>
                        <div class="text-xs text-white/55">Upload & organise images</div>
                    </div>
                </a>
                <a href="{{ route('admin.students.index') }}" class="lift flex items-center gap-3 rounded-xl border border-white/10 bg-slate-950/40 p-4 hover:bg-white/5">
                    <div class="grid h-10 w-10 place-items-center rounded-lg bg-gradient-to-br from-amber-500 to-rose-500"><svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20v-2a4 4 0 00-3-3.87M9 20v-2a4 4 0 014-4h.5M7 8a4 4 0 108 0 4 4 0 00-8 0zm10 4a3 3 0 110-6 3 3 0 010 6z"/></svg></div>
                    <div>
                        <div class="text-sm font-semibold">Students &amp; Certificates</div>
                        <div class="text-xs text-white/55">Bulk import, export & issue</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="reveal reveal-delay-3 rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-500/15 via-cyan-500/10 to-emerald-500/15 p-6 ring-soft">
            <div class="text-sm font-semibold">Tips &amp; Shortcuts</div>
            <div class="mt-1 text-xs text-white/60">Get more done in less time.</div>
            <ul class="mt-5 space-y-3 text-sm">
                <li class="flex items-start gap-3">
                    <span class="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-md bg-white/10 text-[10px] font-semibold">⌘K</span>
                    <span class="text-white/80">Quick-jump to any admin page from the search bar.</span>
                </li>
                <li class="flex items-start gap-3">
                    <span class="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-md bg-white/10 text-[10px] font-semibold">☰</span>
                    <span class="text-white/80">Collapse the sidebar for a wider workspace.</span>
                </li>
                <li class="flex items-start gap-3">
                    <span class="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-md bg-white/10 text-[10px] font-semibold">Esc</span>
                    <span class="text-white/80">Close any open menu or drawer.</span>
                </li>
            </ul>
        </div>
    </div>
@endsection