@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
    <p class="text-gray-600">Welcome back, {{ Auth::user()->name }}</p>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Total Posts</p>
                <p class="text-3xl font-bold text-gray-900">{{ $stats['total_posts'] }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-newspaper text-blue-600 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-2">{{ $stats['published_posts'] }} published</p>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Subscribers</p>
                <p class="text-3xl font-bold text-gray-900">{{ $stats['total_subscribers'] }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-users text-green-600 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-2">Active subscribers</p>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Total Views</p>
                <p class="text-3xl font-bold text-gray-900">{{ number_format($stats['total_views']) }}</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-eye text-purple-600 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-2">{{ $stats['views_today'] }} today</p>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Messages</p>
                <p class="text-3xl font-bold text-gray-900">{{ $stats['unread_messages'] }}</p>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-envelope text-yellow-600 text-xl"></i>
            </div>
        </div>
        <p class="text-sm text-gray-500 mt-2">Unread messages</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Views Chart -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-semibold text-gray-900 mb-4">Views - Last 7 Days</h3>
        <canvas id="viewsChart" height="200"></canvas>
    </div>
    
    <!-- Top Posts -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-semibold text-gray-900 mb-4">Top Posts</h3>
        <div class="space-y-4">
            @foreach($topPosts as $post)
            <div class="flex items-center justify-between">
                <a href="{{ route('admin.blog.edit', $post) }}" class="text-gray-700 hover:text-blue-600 truncate pr-4">{{ Str::limit($post->title, 40) }}</a>
                <span class="text-sm text-gray-500">{{ number_format($post->views) }} views</span>
            </div>
            @endforeach
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Subscribers -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-900">Recent Subscribers</h3>
            <a href="{{ route('admin.subscribers.index') }}" class="text-sm text-blue-600 hover:text-blue-800">View All</a>
        </div>
        <div class="space-y-4">
            @forelse($recentSubscribers as $subscriber)
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-700">{{ $subscriber->email }}</p>
                    <p class="text-sm text-gray-500">{{ $subscriber->subscribed_at->diffForHumans() }}</p>
                </div>
                <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">Active</span>
            </div>
            @empty
            <p class="text-gray-500 text-sm">No subscribers yet.</p>
            @endforelse
        </div>
    </div>
    
    <!-- Recent Messages -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-900">Recent Messages</h3>
            <a href="{{ route('admin.messages.index') }}" class="text-sm text-blue-600 hover:text-blue-800">View All</a>
        </div>
        <div class="space-y-4">
            @forelse($recentMessages as $message)
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-700">{{ $message->name }}</p>
                    <p class="text-sm text-gray-500 truncate">{{ Str::limit($message->message, 50) }}</p>
                </div>
                @if(!$message->is_read)
                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                @endif
            </div>
            @empty
            <p class="text-gray-500 text-sm">No messages yet.</p>
            @endforelse
        </div>
    </div>
</div>

@push('scripts')
<script>
const ctx = document.getElementById('viewsChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: {!! json_encode($last7Days->pluck('date')) !!},
        datasets: [{
            label: 'Views',
            data: {!! json_encode($last7Days->pluck('views')) !!},
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            fill: true,
            tension: 0.4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
@endpush
@endsection