@extends('admin.layout')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard Overview')

@section('content')
<div class="max-w-full">

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5 mb-6">
        @php
            $cards = [
                ['label' => 'Projects', 'value' => $stats['projects'], 'icon' => 'fas fa-folder-open', 'color' => 'indigo', 'bg' => 'bg-indigo-500/10'],
                ['label' => 'Blogs', 'value' => $stats['blogs'], 'icon' => 'fas fa-blog', 'color' => 'purple', 'bg' => 'bg-purple-500/10'],
                ['label' => 'Team', 'value' => $stats['team_members'], 'icon' => 'fas fa-users', 'color' => 'cyan', 'bg' => 'bg-cyan-500/10'],
                ['label' => 'Messages', 'value' => $stats['messages'], 'icon' => 'fas fa-envelope', 'color' => 'emerald', 'bg' => 'bg-emerald-500/10'],
            ];
        @endphp
        @foreach($cards as $card)
            <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-6 hover:border-gray-700 transition-all">
                <div class="flex items-center justify-between mb-3">
                    <div class="{{ $card['bg'] }} rounded-xl p-2.5 sm:p-3">
                        <i class="{{ $card['icon'] }} text-{{ $card['color'] }}-400 text-sm sm:text-xl"></i>
                    </div>
                    @if($card['label'] === 'Messages' && $stats['unread_messages'] > 0)
                        <span class="bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">{{ $stats['unread_messages'] }}</span>
                    @endif
                </div>
                <p class="text-2xl sm:text-3xl font-bold text-white mb-1">{{ $card['value'] }}</p>
                <p class="text-xs sm:text-sm text-gray-500">Total {{ $card['label'] }}</p>
            </div>
        @endforeach
    </div>

    <!-- Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6">

        <!-- Recent Messages -->
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 sm:p-6">
            <div class="flex items-center justify-between mb-5">
                <h3 class="font-semibold text-white flex items-center gap-2 text-sm sm:text-base">
                    <i class="fas fa-envelope text-indigo-400 text-sm"></i>
                    Recent Messages
                </h3>
                <a href="{{ route('admin.messages.index') }}" class="text-xs text-indigo-400 hover:text-indigo-300">View All →</a>
            </div>
            @forelse($recent_messages as $msg)
                <a href="{{ route('admin.messages.show', $msg) }}" class="flex items-start gap-3 p-3 rounded-xl hover:bg-gray-800 transition-all mb-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-sm flex-shrink-0">{{ substr($msg->name, 0, 1) }}</div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <p class="text-sm font-medium text-white truncate">{{ $msg->name }}</p>
                            @if(!$msg->is_read)<span class="w-2 h-2 bg-indigo-500 rounded-full flex-shrink-0"></span>@endif
                        </div>
                        <p class="text-xs text-gray-500 truncate">{{ Str::limit($msg->message, 60) }}</p>
                        <p class="text-xs text-gray-600 mt-0.5">{{ $msg->created_at->diffForHumans() }}</p>
                    </div>
                </a>
            @empty
                <p class="text-sm text-gray-500 text-center py-8">No messages yet</p>
            @endforelse
        </div>

        <!-- Recent Blogs -->
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 sm:p-6">
            <div class="flex items-center justify-between mb-5">
                <h3 class="font-semibold text-white flex items-center gap-2 text-sm sm:text-base">
                    <i class="fas fa-blog text-purple-400 text-sm"></i>
                    Recent Blog Posts
                </h3>
                <a href="{{ route('admin.blog.index') }}" class="text-xs text-indigo-400 hover:text-indigo-300">View All →</a>
            </div>
            @forelse($recent_blogs as $blog)
                <div class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-800 transition-all mb-2 gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-white truncate">{{ $blog->title }}</p>
                        <p class="text-xs text-gray-500">{{ $blog->created_at->format('M d, Y') }}</p>
                    </div>
                    <span class="flex-shrink-0 px-2.5 py-0.5 text-xs rounded-full font-medium {{ $blog->is_published ? 'bg-green-500/10 text-green-400' : 'bg-yellow-500/10 text-yellow-400' }}">
                        {{ $blog->is_published ? 'Published' : 'Draft' }}
                    </span>
                </div>
            @empty
                <p class="text-sm text-gray-500 text-center py-8">No posts yet</p>
            @endforelse
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 sm:p-6">
        <h3 class="font-semibold text-white mb-4 flex items-center gap-2 text-sm sm:text-base">
            <i class="fas fa-bolt text-yellow-400 text-sm"></i>
            Quick Actions
        </h3>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3">
            @php
                $actions = [
                    ['route' => 'admin.projects.create', 'icon' => 'fas fa-plus', 'label' => 'Add Project', 'color' => 'indigo'],
                    ['route' => 'admin.blog.create', 'icon' => 'fas fa-pen', 'label' => 'New Post', 'color' => 'purple'],
                    ['route' => 'admin.team.create', 'icon' => 'fas fa-user-plus', 'label' => 'Add Member', 'color' => 'cyan'],
                    ['route' => 'admin.messages.index', 'icon' => 'fas fa-inbox', 'label' => 'Messages', 'color' => 'emerald'],
                ];
            @endphp
            @foreach($actions as $action)
                <a href="{{ route($action['route']) }}" class="flex flex-col items-center gap-2 p-3 sm:p-4 bg-gray-800 hover:bg-gray-700 rounded-xl transition-all group">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 bg-{{ $action['color'] }}-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="{{ $action['icon'] }} text-{{ $action['color'] }}-400 text-xs sm:text-sm"></i>
                    </div>
                    <span class="text-[10px] sm:text-xs text-gray-400 font-medium text-center">{{ $action['label'] }}</span>
                </a>
            @endforeach
        </div>
    </div>

</div>
@endsection