@extends('layouts.admin')
@section('title', 'Dashboard')
@section('header', 'Dashboard')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-accent">
        <div class="text-gray-500 text-sm">Total Posts</div>
        <div class="text-3xl font-bold text-primary mt-2">{{ $stats['total_posts'] }}</div>
    </div>
    <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-green-500">
        <div class="text-gray-500 text-sm">Published</div>
        <div class="text-3xl font-bold text-green-600 mt-2">{{ $stats['published'] }}</div>
    </div>
    <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-yellow-500">
        <div class="text-gray-500 text-sm">Drafts</div>
        <div class="text-3xl font-bold text-yellow-600 mt-2">{{ $stats['drafts'] }}</div>
    </div>
    <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500">
        <div class="text-gray-500 text-sm">Total Views</div>
        <div class="text-3xl font-bold text-blue-600 mt-2">{{ number_format($stats['total_views']) }}</div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-primary">Recent Posts</h2>
            <a href="{{ route('admin.posts.index') }}" class="text-accent text-sm hover:underline">View All</a>
        </div>
        <table class="w-full">
            <thead>
                <tr class="text-left text-sm text-gray-500 border-b">
                    <th class="pb-3">Title</th>
                    <th class="pb-3">Status</th>
                    <th class="pb-3">Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentPosts as $post)
                <tr class="border-b">
                    <td class="py-3">
                        <a href="{{ route('admin.posts.edit', $post) }}" class="text-primary hover:underline">{{ $post->title }}</a>
                    </td>
                    <td class="py-3">
                        <span class="px-2 py-1 text-xs rounded {{ $post->is_published ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                            {{ $post->is_published ? 'Published' : 'Draft' }}
                        </span>
                    </td>
                    <td class="py-3 text-gray-500 text-sm">{{ $post->created_at->format('M d') }}</td>
                </tr>
                @endforeach
                @if($recentPosts->isEmpty())
                <tr>
                    <td colspan="3" class="py-4 text-center text-gray-500">No posts yet</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>

    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-primary">Recent Messages</h2>
            <a href="{{ route('admin.contacts.index') }}" class="text-accent text-sm hover:underline">View All</a>
        </div>
        @if($unreadMessages > 0)
        <div class="bg-yellow-50 text-yellow-700 px-4 py-2 rounded-lg mb-4 text-sm">
            {{ $unreadMessages }} unread message(s)
        </div>
        @endif
        <div class="space-y-4">
            @foreach($recentContacts as $contact)
            <div class="flex items-start justify-between p-3 bg-gray-50 rounded-lg">
                <div>
                    <div class="font-medium text-primary">{{ $contact->name }}</div>
                    <div class="text-sm text-gray-500">{{ $contact->email }}</div>
                    <div class="text-sm text-gray-400 mt-1 line-clamp-1">{{ $contact->message }}</div>
                </div>
                <div class="text-xs text-gray-400">{{ $contact->created_at->format('M d') }}</div>
            </div>
            @endforeach
            @if($recentContacts->isEmpty())
            <p class="text-center text-gray-500 py-4">No messages yet</p>
            @endif
        </div>
    </div>
</div>
@endsection