@extends('layouts.admin')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Dashboard Admin</h1>
    <p class="text-gray-600">Selamat datang, {{ Auth::user()->nama }}! Lihat ikhtisar toko Anda di bawah ini.</p>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="card p-6">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-teal-100 text-teal-600">
                <i class="fas fa-users text-2xl"></i>
            </div>
            <div class="ml-4">
                <h2 class="text-gray-600 text-sm">Total Pengguna</h2>
                <p class="text-2xl font-semibold text-gray-800">{{ $totalPengguna }}</p>
            </div>
        </div>
        <div class="mt-4">
            <a href="{{ route('admin.users.index') }}" class="text-teal-600 hover:text-teal-800 text-sm font-medium">
                Lihat semua pengguna <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>

    <div class="card p-6">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                <i class="fas fa-box text-2xl"></i>
            </div>
            <div class="ml-4">
                <h2 class="text-gray-600 text-sm">Total Barang</h2>
                <p class="text-2xl font-semibold text-gray-800">{{ $totalBarang }}</p>
            </div>
        </div>
        <div class="mt-4">
            <a href="{{ route('admin.barang.index') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                Lihat semua barang <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>

    <div class="card p-6">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
                <i class="fas fa-shopping-cart text-2xl"></i>
            </div>
            <div class="ml-4">
                <h2 class="text-gray-600 text-sm">Total Pesanan</h2>
                <p class="text-2xl font-semibold text-gray-800">{{ $totalPesanan }}</p>
            </div>
        </div>
        <div class="mt-4">
            <a href="{{ route('admin.pesanan.index') }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
                Lihat semua pesanan <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>

    <div class="card p-6">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-green-100 text-green-600">
                <i class="fas fa-money-bill-wave text-2xl"></i>
            </div>
            <div class="ml-4">
                <h2 class="text-gray-600 text-sm">Total Pendapatan</h2>
                <p class="text-2xl font-semibold text-gray-800">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</p>
            </div>
        </div>
        <div class="mt-4">
            <a href="https://dijeeelektronik.oyi.web.id/admin/pesanan" class="text-green-600 hover:text-green-800 text-sm font-medium">
                Lihat semua pesanan <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
</div>

<!-- Recent Orders & Top Products -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Recent Orders -->
    <div class="card p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-gray-800">Pesanan Terbaru</h2>
            <a href="{{ route('admin.pesanan.index') }}" class="text-teal-600 hover:text-teal-800 text-sm font-medium">
                Lihat semua
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse ($pesananTerbaru as $pesanan)
                    <tr>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $pesanan->id }}</div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $pesanan->user->nama }}</div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            @if($pesanan->status == 'pending')
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                    Pending
                                </span>
                            @elseif($pesanan->status == 'processing')
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    Diproses
                                </span>
                            @elseif($pesanan->status == 'completed')
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    Selesai
                                </span>
                            @elseif($pesanan->status == 'cancelled')
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    Dibatalkan
                                </span>
                            @endif
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $pesanan->created_at->format('d M Y') }}</div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-4 py-3 text-center text-sm text-gray-500">
                            Belum ada pesanan
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Top Products -->
    <div class="card p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-gray-800">Produk Terlaris</h2>
            <a href="{{ route('admin.barang.index') }}" class="text-teal-600 hover:text-teal-800 text-sm font-medium">
                Lihat semua
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produk</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategori</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Terjual</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stok</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse ($produkTerlaris as $barang)
                    <tr>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-10 w-10 flex-shrink-0 mr-3">
                                    @if($barang->gambar)
                                        <img class="h-10 w-10 rounded-full object-cover" src="{{ Storage::url($barang->gambar) }}" alt="{{ $barang->nama_barang }}">
                                    @else
                                        <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                            <span class="text-gray-500"><i class="fas fa-image"></i></span>
                                        </div>
                                    @endif
                                </div>
                                <div class="ml-3">
                                    <div class="text-sm font-medium text-gray-900">{{ $barang->nama_barang }}</div>
                                    <div class="text-sm text-gray-500">Rp {{ number_format($barang->harga, 0, ',', '.') }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $barang->kategori }}</div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $barang->total_terjual }}</div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $barang->stok }}</div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-4 py-3 text-center text-sm text-gray-500">
                            Belum ada data produk
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Recent Activities -->
<div class="card p-6 mb-8">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-semibold text-gray-800">Aktivitas Terbaru</h2>
    </div>
    <div class="space-y-4">
        @forelse ($aktivitasTerbaru as $aktivitas)
        <div class="flex items-start space-x-4">
            <div class="flex-shrink-0">
                @if($aktivitas->type == 'order')
                    <div class="bg-blue-100 text-blue-600 p-2 rounded-full">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                @elseif($aktivitas->type == 'payment')
                    <div class="bg-green-100 text-green-600 p-2 rounded-full">
                        <i class="fas fa-money-bill-wave"></i>
                    </div>
                @elseif($aktivitas->type == 'user')
                    <div class="bg-teal-100 text-teal-600 p-2 rounded-full">
                        <i class="fas fa-user"></i>
                    </div>
                @else
                    <div class="bg-gray-100 text-gray-600 p-2 rounded-full">
                        <i class="fas fa-bell"></i>
                    </div>
                @endif
            </div>
            <div class="flex-1">
                <p class="text-sm font-medium text-gray-900">{{ $aktivitas->description }}</p>
                <p class="text-xs text-gray-500">{{ $aktivitas->created_at->diffForHumans() }}</p>
            </div>
        </div>
        @empty
        <p class="text-sm text-gray-500 text-center py-4">Belum ada aktivitas terbaru</p>
        @endforelse
    </div>
</div>
@endsection