@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Tableau de Bord</h1>
            <p class="text-gray-500 text-sm">Bienvenue dans l'atelier, Laeti'Fée ! 🧚‍♀️</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('home') }}" target="_blank" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded shadow-sm hover:bg-gray-50 text-sm font-bold">
                <i class="fas fa-eye mr-2"></i> Voir le site
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">

        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-green-500 p-5 flex items-center">
            <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
                <i class="fas fa-euro-sign text-green-600 text-xl"></i>
            </div>
            <div class="ml-5 w-0 flex-1">
                <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">CA Encaissé</dt>
                    <dd class="text-2xl font-bold text-gray-900">{{ number_format($revenue, 2) }} €</dd>
                </dl>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-primary p-5 flex items-center">
            <div class="flex-shrink-0 bg-pink-100 rounded-md p-3">
                <i class="fas fa-box-open text-primary text-xl"></i>
            </div>
            <div class="ml-5 w-0 flex-1">
                <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">À préparer</dt>
                    <dd class="text-2xl font-bold text-gray-900">{{ $pendingOrders }}</dd>
                </dl>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-blue-500 p-5 flex items-center">
            <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
                <i class="fas fa-users text-blue-600 text-xl"></i>
            </div>
            <div class="ml-5 w-0 flex-1">
                <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">Clients</dt>
                    <dd class="text-2xl font-bold text-gray-900">{{ $clientsCount }}</dd>
                </dl>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 {{ $pendingTickets > 0 ? 'border-red-500' : 'border-gray-300' }} p-5 flex items-center">
            <div class="flex-shrink-0 {{ $pendingTickets > 0 ? 'bg-red-100' : 'bg-gray-100' }} rounded-md p-3">
                <i class="fas fa-headset {{ $pendingTickets > 0 ? 'text-red-600' : 'text-gray-400' }} text-xl"></i>
            </div>
            <div class="ml-5 w-0 flex-1">
                <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">SAV / Tickets</dt>
                    <dd class="text-2xl font-bold {{ $pendingTickets > 0 ? 'text-red-600' : 'text-gray-900' }}">
                        {{ $pendingTickets }}
                    </dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <div class="lg:col-span-1 space-y-6">

            <div class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg rounded-lg p-6">
                <h3 class="font-bold text-lg mb-4"><i class="fas fa-store-alt mr-2"></i> Mode Marché</h3>
                <p class="text-white/80 text-sm mb-4">Outils rapides pour la vente physique.</p>
                <div class="space-y-2">
                    <a href="{{ route('admin.users.create') }}" class="block w-full text-center bg-white text-purple-700 hover:bg-gray-100 font-bold py-2 rounded shadow transition">
                        <i class="fas fa-user-plus mr-2"></i> Créer Client Rapide
                    </a>
                    <a href="{{ route('admin.orders.index') }}" class="block w-full text-center border border-white text-white hover:bg-white/10 font-bold py-2 rounded transition">
                        <i class="fas fa-file-invoice-dollar mr-2"></i> Gérer Paiements
                    </a>
                </div>
            </div>

            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="font-bold text-gray-800 mb-4 border-b pb-2">📦 Contenu du Site</h3>
                <nav class="space-y-2">
                    <a href="{{ route('admin.products.index') }}" class="flex justify-between items-center p-2 hover:bg-gray-50 rounded text-gray-700 group">
                        <span><i class="fas fa-mug-hot w-6 text-gray-400 group-hover:text-primary"></i> Produits</span>
                        <i class="fas fa-chevron-right text-xs text-gray-300"></i>
                    </a>
                    <a href="{{ route('admin.categories.index') }}" class="flex justify-between items-center p-2 hover:bg-gray-50 rounded text-gray-700 group">
                        <span><i class="fas fa-tags w-6 text-gray-400 group-hover:text-primary"></i> Catégories</span>
                        <i class="fas fa-chevron-right text-xs text-gray-300"></i>
                    </a>
                    <a href="{{ route('admin.gallery.index') }}" class="flex justify-between items-center p-2 hover:bg-gray-50 rounded text-gray-700 group">
                        <span><i class="fas fa-images w-6 text-gray-400 group-hover:text-primary"></i> Galerie Photos</span>
                        <i class="fas fa-chevron-right text-xs text-gray-300"></i>
                    </a>
                </nav>
            </div>

            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="font-bold text-gray-800 mb-4 border-b pb-2">❤️ Relation Client</h3>
                <nav class="space-y-2">
                    <a href="{{ route('admin.users.index') }}" class="flex justify-between items-center p-2 hover:bg-gray-50 rounded text-gray-700 group">
                        <span><i class="fas fa-address-book w-6 text-gray-400 group-hover:text-blue-500"></i> Annuaire Clients</span>
                        <i class="fas fa-chevron-right text-xs text-gray-300"></i>
                    </a>
                    <a href="{{ route('admin.tickets.index') }}" class="flex justify-between items-center p-2 hover:bg-gray-50 rounded text-gray-700 group">
                        <span><i class="fas fa-life-ring w-6 text-gray-400 group-hover:text-red-500"></i> Support SAV</span>
                        @if($pendingTickets > 0)
                            <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">{{ $pendingTickets }}</span>
                        @endif
                    </a>
                </nav>
            </div>

        </div>

        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg overflow-hidden h-full">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
                    <h3 class="font-bold text-gray-800">Dernières Commandes</h3>
                    <a href="{{ route('admin.orders.index') }}" class="text-sm text-primary hover:text-primary-dark font-bold">Tout voir →</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full leading-normal">
                        <thead>
                            <tr>
                                <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">Réf</th>
                                <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">Client</th>
                                <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">Total</th>
                                <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">Paiement</th>
                                <th class="px-5 py-3 border-b border-gray-200"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($latestOrders as $order)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-5 py-4 border-b border-gray-200 text-sm font-bold text-gray-700">
                                    #{{ $order->id }}
                                    <div class="text-xs font-normal text-gray-400">{{ $order->created_at->format('d/m H:i') }}</div>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-200 text-sm">
                                    {{ $order->customer_name }}
                                </td>
                                <td class="px-5 py-4 border-b border-gray-200 text-sm font-bold">
                                    {{ number_format($order->total_price, 2) }} €
                                </td>
                                <td class="px-5 py-4 border-b border-gray-200 text-sm">
                                    @if($order->payment_status == 'paye')
                                        <span class="text-green-600 font-bold text-xs"><i class="fas fa-check-circle"></i> Payé</span>
                                    @else
                                        <span class="text-orange-500 font-bold text-xs"><i class="fas fa-clock"></i> Attente</span>
                                    @endif
                                </td>
                                <td class="px-5 py-4 border-b border-gray-200 text-sm text-right">
                                    <a href="{{ route('admin.orders.show', $order->id) }}" class="text-white bg-gray-800 hover:bg-black px-3 py-1 rounded text-xs font-bold shadow">Gérer</a>
                                </td>
                            </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-5 py-10 text-center text-gray-500 italic">
                                        Aucune commande pour le moment.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection