@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')

<div class="max-w-6xl mx-auto px-6 py-10" style="font-family: 'Plus Jakarta Sans', sans-serif;">

    {{-- ── Greeting ── --}}
    <div class="mb-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-4xl font-black text-slate-800 italic tracking-tight">
                Halo, <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-rose-400">{{ $user->name }}</span> 👋
            </h1>
            <p class="text-slate-400 font-bold text-sm mt-1">Selamat datang kembali di ATK!</p>
        </div>
        <a href="{{ route('user.products.index') }}"
           class="inline-flex items-center gap-2 bg-pink-500 hover:bg-pink-600 text-white font-black text-xs uppercase tracking-widest px-6 py-3.5 rounded-2xl shadow-lg shadow-pink-200 transition-all active:scale-95">
            <i data-lucide="shopping-bag" class="w-4 h-4"></i>
            Mulai Belanja
        </a>
    </div>

    {{-- ── Stat Cards ── --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-10">

        {{-- Total Pesanan --}}
        <div class="bg-white rounded-[28px] border border-pink-50 shadow-sm p-6 hover:shadow-md transition-all">
            <div class="w-11 h-11 bg-pink-100 rounded-2xl flex items-center justify-center mb-4">
                <i data-lucide="package" class="w-5 h-5 text-pink-500"></i>
            </div>
            <p class="text-[11px] font-black uppercase tracking-widest text-slate-400 mb-1">Total Pesanan</p>
            <p class="text-4xl font-black text-slate-800">{{ $totalPesanan }}</p>
            <p class="text-xs text-slate-400 font-bold mt-1">pesanan kamu</p>
        </div>

        {{-- Total Spending --}}
        <div class="bg-white rounded-[28px] border border-pink-50 shadow-sm p-6 hover:shadow-md transition-all">
            <div class="w-11 h-11 bg-emerald-100 rounded-2xl flex items-center justify-center mb-4">
                <i data-lucide="wallet" class="w-5 h-5 text-emerald-500"></i>
            </div>
            <p class="text-[11px] font-black uppercase tracking-widest text-slate-400 mb-1">Total Belanja</p>
            <p class="text-2xl font-black text-slate-800 leading-tight">
                Rp {{ number_format($totalSpending, 0, ',', '.') }}
            </p>
            <p class="text-xs text-slate-400 font-bold mt-1">lifetime spending</p>
        </div>

        {{-- Produk Tersedia --}}
        <div class="bg-gradient-to-br from-pink-500 to-rose-500 rounded-[28px] shadow-lg shadow-pink-200 p-6 text-white relative overflow-hidden">
            <div class="w-11 h-11 bg-white/20 rounded-2xl flex items-center justify-center mb-4">
                <i data-lucide="layers" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-[11px] font-black uppercase tracking-widest opacity-80 mb-1">Koleksi Tersedia</p>
            <p class="text-4xl font-black">{{ $totalProduk }}</p>
            <p class="text-xs opacity-70 font-bold mt-1">dari {{ $kategori }} kategori</p>
            <i data-lucide="sparkles" class="absolute -right-3 -bottom-3 w-24 h-24 opacity-10"></i>
        </div>

    </div>

    {{-- ── Pesanan Terbaru ── --}}
    <div class="bg-white rounded-[28px] border border-pink-50 shadow-sm p-6 mb-8">
        <div class="flex items-center justify-between mb-5">
            <h2 class="font-black text-slate-800 flex items-center gap-2">
                <i data-lucide="clock" class="w-5 h-5 text-pink-400"></i>
                Pesanan Terbaru
            </h2>
            <a href="{{ route('user.orders.index') }}"
               class="text-[10px] font-black uppercase tracking-widest text-pink-400 hover:text-pink-600 transition bg-pink-50 px-3 py-1.5 rounded-xl">
                Lihat Semua
            </a>
        </div>

        @if($pesananTerbaru->count())
        <div class="space-y-3">
            @foreach($pesananTerbaru as $order)
            @php
                $statusConfig = match($order->status) {
                    'pending'    => ['label' => 'Menunggu Pembayaran', 'color' => 'bg-yellow-100 text-yellow-600'],
                    'paid'       => ['label' => 'Dibayar',             'color' => 'bg-blue-100 text-blue-600'],
                    'processing' => ['label' => 'Diproses',            'color' => 'bg-indigo-100 text-indigo-600'],
                    'shipped'    => ['label' => 'Dikirim',             'color' => 'bg-purple-100 text-purple-600'],
                    'delivered'  => ['label' => 'Selesai',             'color' => 'bg-emerald-100 text-emerald-600'],
                    'cancelled'  => ['label' => 'Dibatalkan',          'color' => 'bg-red-100 text-red-500'],
                    default      => ['label' => ucfirst($order->status), 'color' => 'bg-slate-100 text-slate-500'],
                };
            @endphp
            <a href="{{ route('user.orders.show', $order->id) }}"
               class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-pink-50 transition-all group">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="receipt" class="w-4 h-4 text-pink-400"></i>
                    </div>
                    <div>
                        <p class="text-xs font-black text-slate-700">Order #{{ $order->id }}</p>
                        <p class="text-[10px] text-slate-400 font-bold">{{ $order->created_at->format('d M Y') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-[10px] font-black px-2.5 py-1 rounded-full {{ $statusConfig['color'] }}">
                        {{ $statusConfig['label'] }}
                    </span>
                    <p class="text-xs font-black text-pink-500 italic">
                        Rp {{ number_format($order->total_price, 0, ',', '.') }}
                    </p>
                    <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:text-pink-400 transition"></i>
                </div>
            </a>
            @endforeach
        </div>
        @else
        <div class="text-center py-10 bg-slate-50 rounded-2xl border-2 border-dashed border-pink-100">
            <i data-lucide="package-open" class="w-10 h-10 text-pink-200 mx-auto mb-3"></i>
            <p class="text-sm text-slate-400 font-bold mb-3">Belum ada pesanan.</p>
            <a href="{{ route('user.products.index') }}"
               class="inline-flex items-center gap-2 bg-pink-500 text-white text-xs font-black uppercase tracking-widest px-4 py-2.5 rounded-xl shadow-lg shadow-pink-200">
                Yuk Belanja Sekarang!
            </a>
        </div>
        @endif
    </div>

    {{-- ── Produk Terbaru ── --}}
    <div class="bg-white rounded-[28px] border border-pink-50 shadow-sm p-6">
        <div class="flex items-center justify-between mb-5">
            <h2 class="font-black text-slate-800 flex items-center gap-2">
                <i data-lucide="sparkles" class="w-5 h-5 text-pink-400"></i>
                Produk Terbaru
            </h2>
            <a href="{{ route('user.products.index') }}"
               class="text-[10px] font-black uppercase tracking-widest text-pink-400 hover:text-pink-600 transition bg-pink-50 px-3 py-1.5 rounded-xl">
                Lihat Semua
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
            @foreach($products as $product)
            <a href="{{ route('user.products.show', $product->id) }}"
               class="group bg-slate-50 rounded-2xl overflow-hidden hover:shadow-md hover:shadow-pink-100 transition-all">
                <div class="aspect-square overflow-hidden">
                    <img src="{{ asset('storage/' . $product->image) }}"
                         alt="{{ $product->name }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                </div>
                <div class="p-3">
                    <p class="text-xs font-black text-slate-700 truncate">{{ $product->name }}</p>
                    <p class="text-xs font-black text-pink-500 italic mt-0.5">
                        Rp {{ number_format($product->price, 0, ',', '.') }}
                    </p>
                </div>
            </a>
            @endforeach
        </div>
    </div>

</div>

<script>lucide.createIcons();</script>
@endsection