@extends('layouts.app') 
@section('content')
<div class="p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        <div class="mb-10">
            <p class="text-[10px] font-black uppercase tracking-[0.3em] text-pink-400 mb-2">windyazhrtsyfa</p>
            <h1 class="text-4xl font-extrabold text-slate-800">
                Halo, <span class="text-pink-500">{{ explode(' ', auth()->user()->name)[0] }}</span>! 🌸
            </h1>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
            <div class="bg-white rounded-[30px] p-6 border border-white shadow-xl shadow-pink-100/50">
                <p class="text-[10px] font-black text-pink-300 uppercase tracking-widest mb-1">Total Produk</p>
                <h3 class="text-3xl font-black text-slate-800">{{ number_format($totalProduk) }}</h3>
            </div>
            <div class="bg-white rounded-[30px] p-6 border border-white shadow-xl shadow-pink-100/50">
                <p class="text-[10px] font-black text-orange-300 uppercase tracking-widest mb-1">Stok Menipis</p>
                <h3 class="text-3xl font-black text-orange-500">{{ number_format($stokMenipis) }}</h3>
            </div>
            <div class="bg-white rounded-[30px] p-6 border border-white shadow-xl shadow-pink-100/50">
                <p class="text-[10px] font-black text-pink-300 uppercase tracking-widest mb-1">Kategori</p>
                <h3 class="text-3xl font-black text-slate-800">{{ number_format($totalKategori) }}</h3>
            </div>
            <div class="bg-white rounded-[30px] p-6 border border-white shadow-xl shadow-pink-100/50">
                <p class="text-[10px] font-black text-green-300 uppercase tracking-widest mb-1">Valuasi</p>
                <h3 class="text-xl font-black text-slate-800">Rp {{ number_format($totalValuasi, 0, ',', '.') }}</h3>
            </div>
        </div>
    </div>
</div>
@endsection