@extends('layouts.admin')
@section('title', 'Tableau de bord')

@section('content')

{{-- Stats Cards --}}
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8">
    @foreach([
        ['label' => 'Produits', 'value' => $stats['total_products'], 'icon' => 'box', 'color' => 'blue', 'link' => route('admin.produits.index')],
        ['label' => 'Catégories', 'value' => $stats['total_categories'], 'icon' => 'tags', 'color' => 'indigo', 'link' => route('admin.categories.index')],
        ['label' => 'Commandes', 'value' => $stats['total_orders'], 'icon' => 'shopping-bag', 'color' => 'green', 'link' => route('admin.orders.index')],
        ['label' => 'En attente', 'value' => $stats['pending_orders'], 'icon' => 'clock', 'color' => 'amber', 'link' => route('admin.orders.index', ['status' => 'pending'])],
        ['label' => 'Messages', 'value' => $stats['unread_messages'], 'icon' => 'envelope', 'color' => 'red', 'link' => route('admin.messages.index')],
        ['label' => 'Chiffre d\'aff.', 'value' => number_format($stats['total_revenue'], 0, ',', ' ') . ' FCFA', 'icon' => 'chart-line', 'color' => 'purple', 'link' => route('admin.orders.index')],
    ] as $stat)
    <a href="{{ $stat['link'] }}" class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
        <div class="flex items-center justify-between mb-3">
            <div class="w-9 h-9 bg-{{ $stat['color'] }}-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-{{ $stat['icon'] }} text-{{ $stat['color'] }}-600 text-sm"></i>
            </div>
            <i class="fas fa-arrow-right text-gray-300 group-hover:text-{{ $stat['color'] }}-400 text-xs transition-colors"></i>
        </div>
        <p class="text-2xl font-extrabold text-gray-900">{{ $stat['value'] }}</p>
        <p class="text-xs text-gray-500 mt-0.5">{{ $stat['label'] }}</p>
    </a>
    @endforeach
</div>

<div class="grid lg:grid-cols-2 gap-6">

    {{-- Recent Orders --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h2 class="font-bold text-gray-900 flex items-center gap-2"><i class="fas fa-shopping-bag text-blue-600 text-sm"></i> Dernières commandes</h2>
            <a href="{{ route('admin.orders.index') }}" class="text-xs text-blue-600 hover:text-blue-800 font-medium">Voir tout →</a>
        </div>
        @if($recentOrders->isEmpty())
            <div class="p-8 text-center text-gray-400 text-sm">Aucune commande pour le moment.</div>
        @else
            <div class="divide-y divide-gray-50">
                @foreach($recentOrders as $order)
                <a href="{{ route('admin.orders.show', $order) }}" class="flex items-center justify-between px-5 py-3 hover:bg-gray-50 transition-colors">
                    <div>
                        <p class="text-sm font-semibold text-gray-800">{{ $order->order_number }}</p>
                        <p class="text-xs text-gray-500">{{ $order->customer_name }} · {{ $order->created_at->format('d/m/Y') }}</p>
                    </div>
                    <div class="text-right">
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold {{ $order->status_badge }}">{{ $order->status_label }}</span>
                        <p class="text-xs font-bold text-gray-800 mt-1">{{ number_format($order->total_amount, 2) }} FCFA</p>
                    </div>
                </a>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Recent Messages --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h2 class="font-bold text-gray-900 flex items-center gap-2"><i class="fas fa-envelope text-amber-500 text-sm"></i> Derniers messages</h2>
            <a href="{{ route('admin.messages.index') }}" class="text-xs text-blue-600 hover:text-blue-800 font-medium">Voir tout →</a>
        </div>
        @if($recentMessages->isEmpty())
            <div class="p-8 text-center text-gray-400 text-sm">Aucun message pour le moment.</div>
        @else
            <div class="divide-y divide-gray-50">
                @foreach($recentMessages as $message)
                <a href="{{ route('admin.messages.show', $message) }}" class="flex items-center justify-between px-5 py-3 hover:bg-gray-50 transition-colors {{ !$message->is_read ? 'bg-blue-50/50' : '' }}">
                    <div class="min-w-0 flex-1">
                        <div class="flex items-center gap-2">
                            @if(!$message->is_read)
                                <span class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
                            @endif
                            <p class="text-sm font-semibold text-gray-800 truncate">{{ $message->name }}</p>
                        </div>
                        <p class="text-xs text-gray-500 truncate pl-4">{{ $message->subject }}</p>
                    </div>
                    <p class="text-xs text-gray-400 ml-3 flex-shrink-0">{{ $message->created_at->format('d/m') }}</p>
                </a>
                @endforeach
            </div>
        @endif
    </div>
</div>

{{-- Quick Actions --}}
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
    <h2 class="font-bold text-gray-900 mb-4">Actions rapides</h2>
    <div class="flex flex-wrap gap-3">
        <a href="{{ route('admin.produits.create') }}" class="inline-flex items-center gap-2 bg-blue-600 text-white text-sm font-semibold px-4 py-2.5 rounded-xl hover:bg-blue-700 transition-colors">
            <i class="fas fa-plus"></i> Nouveau produit
        </a>
        <a href="{{ route('admin.categories.create') }}" class="inline-flex items-center gap-2 bg-indigo-600 text-white text-sm font-semibold px-4 py-2.5 rounded-xl hover:bg-indigo-700 transition-colors">
            <i class="fas fa-plus"></i> Nouvelle catégorie
        </a>
        <a href="{{ route('admin.orders.index', ['status' => 'pending']) }}" class="inline-flex items-center gap-2 bg-amber-500 text-white text-sm font-semibold px-4 py-2.5 rounded-xl hover:bg-amber-600 transition-colors">
            <i class="fas fa-clock"></i> Commandes en attente
        </a>
        <a href="{{ route('admin.messages.index', ['filter' => 'unread']) }}" class="inline-flex items-center gap-2 bg-red-500 text-white text-sm font-semibold px-4 py-2.5 rounded-xl hover:bg-red-600 transition-colors">
            <i class="fas fa-envelope"></i> Messages non lus
        </a>
    </div>
</div>

@endsection