@extends('plantilla.app')
@section('titulo', 'DASHBOARD')
@section('css')

@endsection
@section('contenido')
{{-- CONTENIDO --}}
<!-- KPI cards -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-2xl border border-white/60 bg-white/70 p-4 shadow-xl shadow-indigo-100 backdrop-blur">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-400 to-indigo-500 text-white shadow-lg shadow-indigo-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 4h18M5 8h14v9a2 2 0 01-2 2H7a2 2 0 01-2-2V8z" />
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-slate-500">Total de pedidos</p>
                    <p class="text-xl font-semibold text-slate-800">{{ $pedidos ?? 0 }}</p>
                </div>
            </div>
        </div>
        <p class="mt-3 text-xs text-slate-500">el último mes </p>
    </div>

    <div class="rounded-2xl border border-white/60 bg-white/70 p-4 shadow-xl shadow-indigo-100 backdrop-blur">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-400 to-pink-500 text-white shadow-lg shadow-pink-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-9 4h12M5 8h14" />
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-slate-500">Total Productos</p>
                    <p class="text-xl font-semibold text-slate-800">{{ $productos ?? 0 }}</p>
                </div>
            </div>
        </div>
        <p class="mt-3 text-xs text-slate-500">Registrados hasta la fecha</p>
    </div>

    <div class="rounded-2xl border border-white/60 bg-white/70 p-4 shadow-xl shadow-indigo-100 backdrop-blur">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-lg shadow-amber-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h10m-7 4h7" />
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-slate-500">Total Almacenes</p>
                    <p class="text-xl font-semibold text-slate-800">{{ $almacen ?? 0 }}</p>
                </div>
            </div>
        </div>
        <p class="mt-3 text-xs text-slate-500">Registrados</p>
    </div>

    <div class="rounded-2xl border border-white/60 bg-white/70 p-4 shadow-xl shadow-indigo-100 backdrop-blur">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white shadow-lg shadow-emerald-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m0 0l-4-4m4 4l4-4" />
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-slate-500">Usuarios Registrados</p>
                    <p class="text-xl font-semibold text-slate-800">{{ $usuarios ?? 0 }}</p>
                </div>
            </div>
        </div>
        <p class="mt-3 text-xs text-slate-500">Con acceso al Sistema</p>
    </div>
</div>

{{-- FIN CONTENIDO --}}
@endsection