@extends('layouts.admin')

@section('title', 'Tableau de bord')
@section('page-title', 'Tableau de bord')

@section('content')

{{-- ── Cartes statistiques ── --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5 mb-8">

    @php
    $cards = [
        ['label'=>'Produits actifs',   'value'=>$stats['active_products'],   'icon'=>'fas fa-box-open',    'color'=>'bg-blue-500',   'sub'=>$stats['total_products'].' au total'],
        ['label'=>'Commandes totales', 'value'=>$stats['total_orders'],      'icon'=>'fas fa-shopping-cart','color'=>'bg-purple-500', 'sub'=>$stats['pending_orders'].' en attente'],
        ['label'=>'En attente',        'value'=>$stats['pending_orders'],    'icon'=>'fas fa-clock',       'color'=>'bg-yellow-500', 'sub'=>'À traiter'],
        ['label'=>'Revenus',           'value'=>number_format($stats['total_revenue'],2).' DH','icon'=>'fas fa-coins','color'=>'bg-green-500','sub'=>'Commandes confirmées'],
        ['label'=>'Messages',          'value'=>$stats['new_messages'],      'icon'=>'fas fa-envelope',    'color'=>'bg-pink-500',   'sub'=>'Non lus'],
        ['label'=>'Total produits',    'value'=>$stats['total_products'],    'icon'=>'fas fa-layer-group', 'color'=>'bg-indigo-500', 'sub'=>'Dans le catalogue'],
    ];
    @endphp

    @foreach($cards as $card)
    <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 xl:col-span-1 col-span-1">
        <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 {{ $card['color'] }} rounded-xl flex items-center justify-center">
                <i class="{{ $card['icon'] }} text-white text-sm"></i>
            </div>
        </div>
        <div class="text-2xl font-bold text-gray-800">{{ $card['value'] }}</div>
        <div class="text-sm font-medium text-gray-700 mt-0.5">{{ $card['label'] }}</div>
        <div class="text-xs text-gray-400 mt-1">{{ $card['sub'] }}</div>
    </div>
    @endforeach
</div>

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

    {{-- ── Commandes récentes ── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-shopping-cart text-purple-500"></i> Commandes récentes
            </h2>
            <a href="{{ route('admin.orders.index') }}" class="text-sm text-primary hover:underline">Tout voir</a>
        </div>
        @if($recentOrders->count())
        <div class="divide-y divide-gray-50">
            @foreach($recentOrders as $order)
            <div class="px-6 py-3 hover:bg-gray-50 transition-colors">
                <div class="flex items-center justify-between">
                    <div>
                        <a href="{{ route('admin.orders.show', $order) }}"
                           class="text-sm font-medium text-gray-800 hover:text-primary">
                            {{ $order->order_number }}
                        </a>
                        <p class="text-xs text-gray-400">{{ $order->customer_name }} · {{ $order->created_at->diffForHumans() }}</p>
                    </div>
                    <div class="text-right">
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium
                            @if($order->status === 'pending') bg-yellow-100 text-yellow-700
                            @elseif($order->status === 'confirmed') bg-blue-100 text-blue-700
                            @elseif($order->status === 'delivered') bg-green-100 text-green-700
                            @elseif($order->status === 'cancelled') bg-red-100 text-red-700
                            @else bg-gray-100 text-gray-700 @endif">
                            {{ $order->status_label }}
                        </span>
                        <p class="text-sm font-bold text-gray-800 mt-0.5">{{ number_format($order->total_amount, 2) }} DH</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="px-6 py-8 text-center text-gray-400">
            <i class="fas fa-inbox text-3xl mb-2"></i>
            <p class="text-sm">Aucune commande pour le moment.</p>
        </div>
        @endif
    </div>

    {{-- ── Messages non lus ── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-envelope text-pink-500"></i> Nouveaux messages
            </h2>
            <a href="{{ route('admin.contacts.index') }}" class="text-sm text-primary hover:underline">Tout voir</a>
        </div>
        @if($recentMessages->count())
        <div class="divide-y divide-gray-50">
            @foreach($recentMessages as $msg)
            <div class="px-6 py-3 hover:bg-gray-50 transition-colors">
                <div class="flex items-start justify-between gap-3">
                    <div class="w-8 h-8 bg-pink-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-xs font-bold text-pink-600">{{ strtoupper(substr($msg->name, 0, 1)) }}</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <a href="{{ route('admin.contacts.show', $msg) }}"
                           class="text-sm font-medium text-gray-800 hover:text-primary">{{ $msg->name }}</a>
                        <p class="text-xs text-gray-500 truncate">{{ $msg->subject }}</p>
                        <p class="text-xs text-gray-400">{{ $msg->created_at->diffForHumans() }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="px-6 py-8 text-center text-gray-400">
            <i class="fas fa-envelope-open text-3xl mb-2"></i>
            <p class="text-sm">Aucun nouveau message.</p>
        </div>
        @endif
    </div>
</div>

{{-- ── Actions rapides ── --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
    <h2 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
        <i class="fas fa-bolt text-yellow-500"></i> Actions rapides
    </h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('admin.products.create') }}"
           class="flex flex-col items-center gap-2 p-4 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors text-center group">
            <div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                <i class="fas fa-plus text-white"></i>
            </div>
            <span class="text-sm font-medium text-blue-700">Ajouter produit</span>
        </a>
        <a href="{{ route('admin.orders.index', ['status' => 'pending']) }}"
           class="flex flex-col items-center gap-2 p-4 bg-yellow-50 rounded-xl hover:bg-yellow-100 transition-colors text-center group">
            <div class="w-10 h-10 bg-yellow-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                <i class="fas fa-clock text-white"></i>
            </div>
            <span class="text-sm font-medium text-yellow-700">Commandes en attente</span>
        </a>
        <a href="{{ route('admin.contacts.index', ['filter' => 'unread']) }}"
           class="flex flex-col items-center gap-2 p-4 bg-pink-50 rounded-xl hover:bg-pink-100 transition-colors text-center group">
            <div class="w-10 h-10 bg-pink-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                <i class="fas fa-envelope text-white"></i>
            </div>
            <span class="text-sm font-medium text-pink-700">Messages non lus</span>
        </a>
        <a href="{{ route('home') }}" target="_blank"
           class="flex flex-col items-center gap-2 p-4 bg-green-50 rounded-xl hover:bg-green-100 transition-colors text-center group">
            <div class="w-10 h-10 bg-green-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                <i class="fas fa-eye text-white"></i>
            </div>
            <span class="text-sm font-medium text-green-700">Voir le site</span>
        </a>
    </div>
</div>

@endsection