@extends('admin.layout')
@section('title', 'Métricas - Admin IMOZA')
@section('header', 'Métricas')

@section('content')
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <p class="text-sm font-medium text-gray-500">Ventas Hoy</p>
        <p class="text-2xl font-extrabold text-imoza-blue-dark mt-1">{{ $todayCount }}</p>
        <p class="text-sm text-green-600 font-semibold mt-1">${{ number_format($todayTotal, 2) }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <p class="text-sm font-medium text-gray-500">Ventas del Mes</p>
        <p class="text-2xl font-extrabold text-imoza-blue-dark mt-1">{{ $monthCount }}</p>
        <p class="text-sm text-green-600 font-semibold mt-1">${{ number_format($monthTotal, 2) }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <p class="text-sm font-medium text-gray-500">Ticket Promedio</p>
        <p class="text-2xl font-extrabold text-imoza-blue-dark mt-1">${{ $todayCount > 0 ? number_format($todayTotal / $todayCount, 2) : '0.00' }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <p class="text-sm font-medium text-gray-500">Promedio Diario (30d)</p>
        <p class="text-2xl font-extrabold text-imoza-blue-dark mt-1">${{ $salesByDay->count() > 0 ? number_format($salesByDay->sum('total') / $salesByDay->count(), 2) : '0.00' }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-bold text-imoza-blue-dark mb-4">Ventas por Categoría</h3>
        @if($salesByCategory->isEmpty())
        <p class="text-gray-400 text-sm">Sin datos disponibles.</p>
        @else
        <div class="space-y-3">
            @foreach($salesByCategory as $cat)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-700">{{ $cat->name }}</span>
                <span class="text-sm font-bold text-imoza-blue-dark">${{ number_format($cat->total_revenue, 2) }}</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-bold text-imoza-blue-dark mb-4">Top 10 Productos</h3>
        @if($topProducts->isEmpty())
        <p class="text-gray-400 text-sm">Sin datos disponibles.</p>
        @else
        <div class="space-y-3">
            @foreach($topProducts as $p)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-700">{{ $p->name }}</span>
                <span class="text-sm font-bold text-imoza-blue-dark">{{ $p->sale_items_count }} vendidos</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-bold text-imoza-blue-dark mb-4">Ventas Últimos 30 Días</h3>
        @if($salesByDay->isEmpty())
        <p class="text-gray-400 text-sm">Sin datos disponibles.</p>
        @else
        <div class="space-y-2 max-h-64 overflow-y-auto">
            @foreach($salesByDay->reverse() as $day)
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-500">{{ \Carbon\Carbon::parse($day->date)->format('d/m') }}</span>
                <span class="font-semibold text-imoza-blue-dark">${{ number_format($day->total, 2) }} <span class="text-gray-400">({{ $day->count }})</span></span>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-bold text-imoza-blue-dark mb-4">Top 10 Clientes</h3>
        @if($topCustomers->isEmpty())
        <p class="text-gray-400 text-sm">Sin datos disponibles.</p>
        @else
        <div class="space-y-3">
            @foreach($topCustomers as $c)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-700">{{ $c->name }}</span>
                <span class="text-sm font-bold text-imoza-blue-dark">${{ number_format($c->sales_sum_total ?? 0, 2) }} <span class="text-gray-400">({{ $c->sales_count }})</span></span>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection