@extends('layouts.admin')

@section('admin-content')
<h2 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem;">Resumen del Sistema</h2>

<!-- Metrics Cards -->
<div class="metrics-grid">
    <div class="metric-card glass" style="border-left: 4px solid var(--primary-color);">
        <span class="metric-title">Ventas Totales</span>
        <span class="metric-value">${{ number_format($totalSales, 2) }}</span>
    </div>
    
    <div class="metric-card glass" style="border-left: 4px solid var(--secondary-color);">
        <span class="metric-title">Pedidos Realizados</span>
        <span class="metric-value">{{ $ordersCount }}</span>
    </div>

    <div class="metric-card glass" style="border-left: 4px solid var(--accent-color);">
        <span class="metric-title">Clientes Registrados</span>
        <span class="metric-value">{{ $customersCount }}</span>
    </div>

    <div class="metric-card glass" style="border-left: 4px solid #64748b;">
        <span class="metric-title">Productos Activos</span>
        <span class="metric-value">{{ $productsCount }}</span>
    </div>
</div>

<!-- Recent Orders Table -->
<h3 style="font-size: 1.25rem; font-weight: 700; margin-top: 2rem;">Pedidos Recientes</h3>
<div class="table-responsive">
    @if($recentOrders->isEmpty())
        <p style="color: var(--text-muted); margin-top: 1rem;">Aún no se han registrado compras en el sistema.</p>
    @else
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Cliente</th>
                    <th>Monto</th>
                    <th>IP Visitante</th>
                    <th>Fecha</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentOrders as $order)
                    <tr>
                        <td><strong>#{{ $order->id }}</strong></td>
                        <td>{{ $order->user->name ?? 'Usuario Eliminado' }}</td>
                        <td style="font-weight: 600; color: var(--primary-color);">${{ number_format($order->total_amount, 2) }}</td>
                        <td><code>{{ $order->ip_address }}</code></td>
                        <td>{{ $order->created_at->format('d/m/Y H:i') }}</td>
                        <td><span class="badge badge-success">Completado</span></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>
@endsection