<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Pelanggan | BERKAH.TRF</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style> body { font-family: 'Plus Jakarta Sans', sans-serif; } </style>
    <x-pwa />
</head>
<body class="bg-[#F8FAFC] antialiased text-gray-900">
    <x-loading />

    {{-- NAVIGASI ADMIN --}}
    <nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex justify-between h-20">
                <div class="flex items-center gap-10">
                    <h1 class="text-xl font-black italic tracking-tighter text-blue-600">BERKAH.TRF</h1>
                    <div class="hidden md:flex items-center gap-2">
                        {{-- Dashboard --}}
                        <a href="{{ route('admin.index') }}" 
                           class="px-4 py-2 text-sm font-bold rounded-xl transition {{ request()->routeIs('admin.index') ? 'text-blue-600 bg-blue-50' : 'text-gray-400 hover:text-blue-600' }}">
                            Dashboard
                        </a>
                        
                        {{-- Pesanan --}}
                        <a href="{{ route('admin.orders') }}" 
                           class="px-4 py-2 text-sm font-bold rounded-xl transition {{ request()->routeIs('admin.orders') ? 'text-blue-600 bg-blue-50' : 'text-gray-400 hover:text-blue-600' }}">
                            Pesanan
                        </a>

                        {{-- Pelanggan (Sedang Aktif) --}}
                        <a href="{{ route('admin.users') }}" 
                           class="px-4 py-2 text-sm font-bold rounded-xl transition {{ request()->routeIs('admin.users') ? 'text-blue-600 bg-blue-50' : 'text-gray-400 hover:text-blue-600' }}">
                            Pelanggan
                        </a>
                    </div>
                </div>
                <div class="flex items-center gap-6">
                    <a href="{{ route('front.index') }}" class="text-[10px] font-black tracking-widest text-gray-400 border border-gray-100 px-4 py-2 rounded-full hover:bg-gray-50 transition">
                        VIEW STORE <i class="fas fa-store ml-1"></i>
                    </a>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button class="text-red-400 hover:text-red-600 transition text-sm">
                            <i class="fas fa-power-off"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-6 py-10">
        <div class="mb-10 flex justify-between items-end">
            <div>
                <h2 class="text-3xl font-extrabold tracking-tight">Data Pelanggan</h2>
                <p class="text-gray-500 mt-1">Daftar pengguna yang telah mendaftar di toko Anda.</p>
            </div>
            <div class="bg-blue-50 text-blue-600 px-4 py-2 rounded-xl font-bold text-sm">
                {{-- Menggunakan total() jika object adalah paginator, agar yang dihitung semua data di DB --}}
                Total: {{ method_exists($users, 'total') ? $users->total() : $users->count() }} User
            </div>
        </div>

        <div class="bg-white rounded-[2rem] shadow-sm border border-gray-100 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-gray-50 text-gray-400 text-[10px] uppercase tracking-wider font-bold">
                            <th class="p-6">Nama Pengguna</th>
                            <th class="p-6">Email</th>
                            <th class="p-6">Tanggal Daftar</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($users as $user)
                        <tr class="group hover:bg-gray-50 transition">
                            <td class="p-6">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold">
                                        {{ substr($user->name, 0, 1) }}
                                    </div>
                                    <span class="font-bold text-gray-900">{{ $user->name }}</span>
                                </div>
                            </td>
                            <td class="p-6 text-gray-600">{{ $user->email }}</td>
                            <td class="p-6 text-gray-500 text-sm">
                                {{ $user->created_at->format('d M Y, H:i') }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="p-10 text-center text-gray-400">
                                <div class="flex flex-col items-center gap-2">
                                    <i class="fas fa-users-slash text-2xl opacity-30"></i>
                                    <span>Belum ada user yang mendaftar.</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- BLOK PAGINATION --}}
            @if(method_exists($users, 'links'))
            <div class="p-6 border-t border-gray-100 bg-gray-50/50">
                {{ $users->appends(request()->query())->links() }}
            </div>
            @endif

        </div>
        
        <div class="mt-20 text-center">
            <p class="text-[10px] font-bold text-gray-300 uppercase tracking-widest italic">BERKAH THRIFT Management System v2.0</p>
        </div>
    </div>
</body>
</html>