<div>

    {{-- ── Page Header ─────────────────────────────────────────────── --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-800">Dashboard</h1>
        <p class="text-sm text-slate-500 mt-0.5">
            Halo, <span class="font-medium text-slate-700">{{ auth()->user()->name }}</span>! —
            {{ now()->translatedFormat('l, d F Y') }}
        </p>
    </div>

    {{-- ── Stat Cards ──────────────────────────────────────────────── --}}
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">

        {{-- Produk --}}
        <div class="bg-white rounded-xl border border-slate-200 p-4 hover:border-slate-300 transition-colors">
            <div class="flex items-start justify-between mb-3">
                <div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center">
                    <flux:icon.cube class="w-5 h-5 text-blue-600" />
                </div>
            </div>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($stats['total_produk']) }}</p>
            <p class="text-xs text-slate-500 mt-0.5">Produk Aktif</p>
        </div>

        {{-- Pesanan --}}
        <div class="bg-white rounded-xl border border-slate-200 p-4 hover:border-slate-300 transition-colors">
            <div class="flex items-start justify-between mb-3">
                <div class="w-9 h-9 bg-purple-50 rounded-lg flex items-center justify-center">
                    <flux:icon.shopping-bag class="w-5 h-5 text-purple-600" />
                </div>
            </div>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($stats['total_pesanan']) }}</p>
            <p class="text-xs text-slate-500 mt-0.5">Total Pesanan</p>
        </div>

        {{-- Customer --}}
        <div class="bg-white rounded-xl border border-slate-200 p-4 hover:border-slate-300 transition-colors">
            <div class="flex items-start justify-between mb-3">
                <div class="w-9 h-9 bg-green-50 rounded-lg flex items-center justify-center">
                    <flux:icon.users class="w-5 h-5 text-green-600" />
                </div>
            </div>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($stats['total_customer']) }}</p>
            <p class="text-xs text-slate-500 mt-0.5">Customer</p>
        </div>

        {{-- Mitra --}}
        <div class="bg-white rounded-xl border border-slate-200 p-4 hover:border-slate-300 transition-colors">
            <div class="flex items-start justify-between mb-3">
                <div class="w-9 h-9 bg-amber-50 rounded-lg flex items-center justify-center">
                    <flux:icon.building-storefront class="w-5 h-5 text-amber-600" />
                </div>
            </div>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($stats['total_mitra']) }}</p>
            <p class="text-xs text-slate-500 mt-0.5">Mitra Aktif</p>
        </div>

        {{-- Pendapatan hari ini --}}
        <div class="col-span-2 lg:col-span-1 bg-orange-500 rounded-xl p-4">
            <div class="flex items-start justify-between mb-3">
                <div class="w-9 h-9 bg-white/20 rounded-lg flex items-center justify-center">
                    <flux:icon.banknotes class="w-5 h-5 text-white" />
                </div>
            </div>
            <p class="text-2xl font-bold text-white">
                Rp {{ number_format($stats['pendapatan_hari_ini'], 0, ',', '.') }}
            </p>
            <p class="text-xs text-orange-100 mt-0.5">Pendapatan Hari Ini</p>
        </div>

    </div>

    {{-- ── Pesanan Terbaru ─────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl border border-slate-200">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
            <h2 class="font-semibold text-slate-800">Pesanan Terbaru</h2>
            <a href="{{ route('admin.pesanan') }}"
               class="text-sm text-orange-600 hover:text-orange-700 font-medium">
                Lihat semua →
            </a>
        </div>

        @if ($recentOrders->isEmpty())
            <div class="px-5 py-12 text-center">
                <svg class="w-10 h-10 text-slate-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                <p class="text-sm text-slate-400">Belum ada pesanan masuk.</p>
            </div>
        @else
            <div class="divide-y divide-slate-50">
                @foreach ($recentOrders as $order)
                    @php
                        $color = match($order->status->value) {
                            'pending'    => 'bg-slate-100 text-slate-600',
                            'paid'       => 'bg-blue-100 text-blue-700',
                            'processing' => 'bg-indigo-100 text-indigo-700',
                            'delivering' => 'bg-cyan-100 text-cyan-700',
                            'completed'  => 'bg-green-100 text-green-700',
                            'cancelled'  => 'bg-red-100 text-red-600',
                            default      => 'bg-slate-100 text-slate-600',
                        };
                    @endphp
                    <a href="{{ route('admin.pesanan.show', $order->id) }}"
                       class="block px-4 py-3.5 hover:bg-slate-50 transition-colors">
                        {{-- Baris 1: nomor pesanan + badge status --}}
                        <div class="flex items-center justify-between gap-2 mb-1.5">
                            <p class="text-sm font-semibold text-slate-800 truncate">
                                {{ $order->order_number }}
                            </p>
                            <span class="shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded-full {{ $color }}">
                                {{ $order->status->label() }}
                            </span>
                        </div>
                        {{-- Baris 2: nama customer + tanggal + total --}}
                        <div class="flex items-center justify-between gap-2">
                            <div class="min-w-0">
                                <p class="text-xs text-slate-500 truncate">{{ $order->customer_name }}</p>
                                <p class="text-[11px] text-slate-400 mt-0.5">
                                    {{ $order->created_at->translatedFormat('d M Y, H:i') }}
                                </p>
                            </div>
                            <p class="shrink-0 text-sm font-bold text-slate-700">
                                Rp {{ number_format($order->grand_total, 0, ',', '.') }}
                            </p>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    {{-- ── Quick Links (placeholder untuk modul belum dibuat) ─────── --}}
    <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-3">
        @php
            $quickLinks = [
                ['label' => 'Tambah Produk',   'route' => 'admin.produk',    'icon' => 'plus-circle',   'color' => 'blue'],
                ['label' => 'Verifikasi Bayar', 'route' => 'admin.pembayaran','icon' => 'banknotes',     'color' => 'green'],
                ['label' => 'Lihat Pesanan',   'route' => 'admin.pesanan',   'icon' => 'shopping-bag',  'color' => 'purple'],
                ['label' => 'Kelola Mitra',    'route' => 'admin.mitra',     'icon' => 'building-storefront', 'color' => 'amber'],
            ];
        @endphp
        @foreach ($quickLinks as $link)
            <a href="{{ route($link['route']) }}"
               class="flex items-center gap-3 bg-white border border-slate-200 rounded-xl px-4 py-3 hover:border-slate-300 hover:bg-slate-50 transition-colors">
                <flux:icon :name="$link['icon']" class="w-5 h-5 text-slate-500" />
                <span class="text-sm font-medium text-slate-700">{{ $link['label'] }}</span>
            </a>
        @endforeach
    </div>

</div>
