@extends('admin.layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    @foreach([
        ['label' => 'Posts', 'value' => $stats['posts'], 'color' => 'indigo', 'icon' => 'document-text'],
        ['label' => 'Pages', 'value' => $stats['pages'], 'color' => 'purple', 'icon' => 'document'],
        ['label' => 'Users', 'value' => $stats['users'], 'color' => 'green', 'icon' => 'users'],
        ['label' => 'Drafts', 'value' => $stats['drafts'], 'color' => 'yellow', 'icon' => 'pencil'],
    ] as $stat)
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 flex items-center gap-4">
        <div class="w-12 h-12 rounded-lg bg-{{ $stat['color'] }}-100 dark:bg-{{ $stat['color'] }}-900/30 flex items-center justify-center">
            <x-admin-icon :name="$stat['icon']" class="w-6 h-6 text-{{ $stat['color'] }}-600 dark:text-{{ $stat['color'] }}-400" />
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stat['value'] }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $stat['label'] }}</p>
        </div>
    </div>
    @endforeach
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h2 class="font-semibold text-gray-900 dark:text-white">Recent Content</h2>
        <a href="{{ route('admin.posts.index', 'post') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
    </div>
    <div class="divide-y divide-gray-200 dark:divide-gray-700">
        @forelse($recentPosts as $post)
        <div class="px-6 py-4 flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $post->title }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $post->author->name }} · {{ $post->created_at->diffForHumans() }}</p>
            </div>
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                {{ $post->status === 'published' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' }}">
                {{ ucfirst($post->status) }}
            </span>
        </div>
        @empty
        <div class="px-6 py-8 text-center text-sm text-gray-400">No content yet.</div>
        @endforelse
    </div>
</div>
@endsection
