<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-2xl text-gray-800 dark:text-gray-100 leading-tight">
            Dashboard
        </h2>
    </x-slot>

    @php
        $totalRevenue  = \App\Models\Order::where('status', 'paid')->sum('amount');
        $totalOrders   = \App\Models\Order::count();
        $pendingOrders = \App\Models\Order::where('status', 'pending')->count();
        $totalProducts = \App\Models\Product::count();
        $totalUsers    = \App\Models\User::role('user')->count();
        $latestOrders  = \App\Models\Order::with(['user', 'product'])->latest()->limit(8)->get();

        $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'DigiShop';
        $today   = now()->translatedFormat('l, d F Y');
    @endphp

    {{-- ============================= --}}
    {{-- WELCOME BANNER                --}}
    {{-- ============================= --}}
    <div class="relative overflow-hidden rounded-2xl mb-8 bg-gradient-to-br from-slate-800 via-indigo-900 to-slate-900 shadow-lg">
        {{-- Decorative circles --}}
        <div class="absolute -top-10 -right-10 w-52 h-52 bg-indigo-500/20 rounded-full blur-2xl pointer-events-none"></div>
        <div class="absolute -bottom-12 -left-8 w-40 h-40 bg-violet-500/20 rounded-full blur-2xl pointer-events-none"></div>
        <div class="absolute top-4 right-56 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none"></div>

        <div class="relative px-8 py-7 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <p class="text-indigo-300 text-xs font-bold uppercase tracking-widest mb-1.5">{{ $today }}</p>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-white leading-tight">
                    Selamat datang, {{ Auth::user()->name }}! 👋
                </h1>
                <p class="text-slate-400 text-sm mt-1.5">
                    Anda berada di panel admin <span class="text-indigo-300 font-semibold">{{ $appName }}</span>. Berikut ringkasan aktivitas hari ini.
                </p>
            </div>
            <div class="flex-shrink-0">
                <a href="{{ route('home') }}" target="_blank"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-white/10 hover:bg-white/20 border border-white/20 text-white text-sm font-bold rounded-xl transition-all backdrop-blur-sm">
                    <x-heroicon-o-arrow-top-right-on-square class="w-4 h-4" />
                    Lihat Toko
                </a>
            </div>
        </div>
    </div>

    {{-- ============================= --}}
    {{-- STAT WIDGETS                  --}}
    {{-- ============================= --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">

        {{-- Widget: Total Pendapatan --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 p-5 flex items-center gap-4 group hover:shadow-md transition-shadow">
            <div class="p-3 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 flex-shrink-0 group-hover:scale-110 transition-transform">
                <x-heroicon-o-banknotes class="w-6 h-6" />
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wide">Total Pendapatan</p>
                <p class="text-2xl font-extrabold text-gray-900 dark:text-white mt-0.5 truncate">
                    Rp {{ number_format($totalRevenue, 0, ',', '.') }}
                </p>
                <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">Dari pesanan lunas</p>
            </div>
        </div>

        {{-- Widget: Total Pesanan --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 p-5 flex items-center gap-4 group hover:shadow-md transition-shadow">
            <div class="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 flex-shrink-0 group-hover:scale-110 transition-transform">
                <x-heroicon-o-shopping-bag class="w-6 h-6" />
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wide">Total Pesanan</p>
                <p class="text-2xl font-extrabold text-gray-900 dark:text-white mt-0.5">{{ $totalOrders }}</p>
                @if($pendingOrders > 0)
                <p class="text-[11px] text-amber-500 font-bold mt-0.5">{{ $pendingOrders }} menunggu konfirmasi</p>
                @else
                <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">Semua pesanan</p>
                @endif
            </div>
        </div>

        {{-- Widget: Total Produk --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 p-5 flex items-center gap-4 group hover:shadow-md transition-shadow">
            <div class="p-3 rounded-xl bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex-shrink-0 group-hover:scale-110 transition-transform">
                <x-heroicon-o-cube class="w-6 h-6" />
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wide">Total Produk</p>
                <p class="text-2xl font-extrabold text-gray-900 dark:text-white mt-0.5">{{ $totalProducts }}</p>
                <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">Produk digital aktif</p>
            </div>
        </div>

        {{-- Widget: Total Pelanggan --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 p-5 flex items-center gap-4 group hover:shadow-md transition-shadow">
            <div class="p-3 rounded-xl bg-orange-50 dark:bg-orange-900/30 text-orange-500 dark:text-orange-400 flex-shrink-0 group-hover:scale-110 transition-transform">
                <x-heroicon-o-users class="w-6 h-6" />
            </div>
            <div class="min-w-0">
                <p class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wide">Total Pelanggan</p>
                <p class="text-2xl font-extrabold text-gray-900 dark:text-white mt-0.5">{{ $totalUsers }}</p>
                <p class="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">Pengguna terdaftar</p>
            </div>
        </div>

    </div>

    {{-- ============================= --}}
    {{-- LATEST ORDERS TABLE           --}}
    {{-- ============================= --}}
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <x-heroicon-o-clock class="w-5 h-5 text-gray-400" />
                <h3 class="text-base font-bold text-gray-900 dark:text-white">Pesanan Terbaru</h3>
            </div>
            <a href="{{ route('admin.orders.index') }}"
               class="text-sm font-bold text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 flex items-center gap-1">
                Lihat Semua <x-heroicon-o-arrow-right class="w-4 h-4" />
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100 dark:divide-slate-700 text-sm">
                <thead>
                    <tr class="bg-gray-50 dark:bg-slate-700/50">
                        <th class="px-6 py-3.5 text-left text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Order ID</th>
                        <th class="px-6 py-3.5 text-left text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Pelanggan</th>
                        <th class="px-6 py-3.5 text-left text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Produk</th>
                        <th class="px-6 py-3.5 text-left text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Total</th>
                        <th class="px-6 py-3.5 text-left text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Metode</th>
                        <th class="px-6 py-3.5 text-center text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Status</th>
                        <th class="px-6 py-3.5 text-center text-[11px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50 dark:divide-slate-700/50">
                    @forelse($latestOrders as $order)
                    <tr class="hover:bg-gray-50/50 dark:hover:bg-slate-700/30 transition-colors">
                        <td class="px-6 py-4">
                            <span class="font-mono text-xs font-bold text-indigo-600 dark:text-indigo-400">
                                #{{ $order->order_code }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2.5">
                                <div class="w-7 h-7 rounded-full bg-slate-700 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                    {{ strtoupper(substr($order->user->name ?? '?', 0, 1)) }}
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ $order->user->name ?? '-' }}</p>
                                    <p class="text-xs text-gray-400">{{ $order->user->email ?? '' }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 max-w-[180px] truncate">
                                {{ $order->product->name ?? '-' }}
                            </p>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm font-bold text-gray-800 dark:text-gray-200">
                                Rp {{ number_format($order->amount, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-xs font-bold uppercase text-gray-500 dark:text-gray-400">
                                {{ $order->method ?? '-' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            @php
                                $statusMap = [
                                    'pending'   => ['label' => 'Pending',   'class' => 'bg-amber-50 text-amber-700 border-amber-200',    'dot' => 'bg-amber-400'],
                                    'paid'      => ['label' => 'Lunas',     'class' => 'bg-emerald-50 text-emerald-700 border-emerald-200','dot' => 'bg-emerald-500'],
                                    'cancelled' => ['label' => 'Dibatalkan','class' => 'bg-red-50 text-red-700 border-red-200',           'dot' => 'bg-red-400'],
                                    'confirmed' => ['label' => 'Dikonfirmasi','class' => 'bg-blue-50 text-blue-700 border-blue-200',      'dot' => 'bg-blue-500'],
                                ];
                                $s = $statusMap[$order->status] ?? ['label' => ucfirst($order->status), 'class' => 'bg-gray-100 text-gray-600 border-gray-200', 'dot' => 'bg-gray-400'];
                            @endphp
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border {{ $s['class'] }}">
                                <span class="w-1.5 h-1.5 rounded-full {{ $s['dot'] }}"></span>
                                {{ $s['label'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <a href="{{ route('admin.orders.show', $order) }}"
                               class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-bold text-slate-700 bg-slate-50 hover:bg-slate-100 rounded-lg border border-slate-200 transition-colors">
                                <x-heroicon-o-eye class="w-3.5 h-3.5" /> Detail
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-14 text-center">
                            <div class="flex flex-col items-center justify-center">
                                <x-heroicon-o-inbox class="w-12 h-12 text-gray-200 dark:text-slate-600 mb-3" />
                                <p class="text-sm font-semibold text-gray-400 dark:text-gray-500">Belum ada pesanan masuk</p>
                                <p class="text-xs text-gray-300 dark:text-gray-600 mt-1">Pesanan akan muncul di sini setelah pelanggan checkout</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</x-admin-layout>
