<!-- app/Views/admin/users/index.php -->

<div class="space-y-6">

    <!-- Page Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-white">Users</h1>
            <p class="text-slate-400 mt-1">Manage passengers, drivers and platform accounts.</p>
        </div>

        <a href="#"
           class="inline-flex items-center justify-center px-5 py-3 rounded-2xl bg-cyan-400 text-slate-950 font-semibold shadow-lg shadow-cyan-500/20 hover:bg-cyan-300 transition">
            + Add User
        </a>
    </div>

    <!-- Toolbar -->
    <div class="rounded-3xl border border-white/10 bg-white/[0.03] p-4 shadow-xl">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

            <div class="md:col-span-2">
                <input
                    type="text"
                    placeholder="Search users by name, email, phone..."
                    class="w-full px-4 py-3 rounded-2xl bg-slate-950/70 border border-white/10 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-cyan-400/60 focus:ring-4 focus:ring-cyan-400/10"
                >
            </div>

            <select class="px-4 py-3 rounded-2xl bg-slate-950/70 border border-white/10 text-slate-300 focus:outline-none focus:border-cyan-400/60">
                <option>All roles</option>
                <option>Passenger</option>
                <option>Driver</option>
                <option>Admin</option>
            </select>

            <select class="px-4 py-3 rounded-2xl bg-slate-950/70 border border-white/10 text-slate-300 focus:outline-none focus:border-cyan-400/60">
                <option>All statuses</option>
                <option>Active</option>
                <option>Pending</option>
                <option>Suspended</option>
            </select>

        </div>
    </div>

    <!-- Table Card -->
    <div class="rounded-3xl border border-white/10 bg-white/[0.03] shadow-2xl shadow-black/20 overflow-hidden">

        <!-- Desktop Table -->
        <div class="hidden lg:block overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-white/[0.04] border-b border-white/10">
                    <tr>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">User</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Role</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Rides</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Joined</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-white/10">
 <?php foreach ($users as $user): ?>
                    <tr class="hover:bg-white/[0.04] transition">
                        <td class="px-6 py-5">
                            <div class="flex items-center gap-4">
                                <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-slate-950 font-bold">
                                   <img class="rounded-2xl" src="<?= htmlspecialchars(avatar($user['avatar'])) ?>" />
                                </div>
                                <div>
                                    <p class="text-white font-semibold"><?= htmlspecialchars($user['name']) ?></p>
                                    <p class="text-slate-500 text-sm"><?= htmlspecialchars($user['email']) ?></p>
                                </div>
                            </div>
                        </td>

                        <td class="px-6 py-5">
                            <span class="px-3 py-1 rounded-full bg-purple-400/10 text-purple-300 text-xs font-medium">
                               <?= htmlspecialchars($user['role']) ?>
                            </span>
                        </td>

                        <td class="px-6 py-5">
                            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-400/10 text-emerald-300 text-xs font-medium">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                               <?= htmlspecialchars($user['verification_status']) ?>
                            </span>
                        </td>

                        <td class="px-6 py-5 text-slate-300">128</td>

                        <td class="px-6 py-5 text-slate-400"><?= htmlspecialchars($user['created_at']) ?></td>

                        <td class="px-6 py-5">
                            <div class="flex justify-end gap-2">
                                <a href="#" class="px-3 py-2 rounded-xl bg-white/[0.05] text-slate-300 hover:text-white hover:bg-white/[0.1] transition">
                                    View
                                </a>
                                <a href="#" class="px-3 py-2 rounded-xl bg-cyan-400/10 text-cyan-300 hover:bg-cyan-400/20 transition">
                                    Edit
                                </a>
                            </div>
                        </td>
                    </tr>
  <?php endforeach; ?>


                </tbody>
            </table>
        </div>

        <!-- Mobile Cards -->
        <div class="lg:hidden divide-y divide-white/10">

            <div class="p-5 space-y-4">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-slate-950 font-bold">
                        AM
                    </div>
                    <div>
                        <p class="text-white font-semibold text-lg">Alex Morgan</p>
                        <p class="text-slate-500 text-sm">alex.morgan@example.com</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div class="rounded-2xl bg-white/[0.04] p-3">
                        <p class="text-slate-500">Role</p>
                        <p class="text-purple-300 font-medium">Driver</p>
                    </div>

                    <div class="rounded-2xl bg-white/[0.04] p-3">
                        <p class="text-slate-500">Status</p>
                        <p class="text-emerald-300 font-medium">Active</p>
                    </div>

                    <div class="rounded-2xl bg-white/[0.04] p-3">
                        <p class="text-slate-500">Rides</p>
                        <p class="text-white font-medium">128</p>
                    </div>

                    <div class="rounded-2xl bg-white/[0.04] p-3">
                        <p class="text-slate-500">Joined</p>
                        <p class="text-white font-medium">May 12</p>
                    </div>
                </div>

                <div class="flex gap-3">
                    <a href="#" class="flex-1 text-center px-4 py-3 rounded-2xl bg-white/[0.05] text-slate-300">
                        View
                    </a>
                    <a href="#" class="flex-1 text-center px-4 py-3 rounded-2xl bg-cyan-400/10 text-cyan-300">
                        Edit
                    </a>
                </div>
            </div>

        </div>

        <!-- Pagination -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 px-6 py-5 border-t border-white/10">
            <p class="text-slate-500 text-sm">Showing 1 to 10 of 248 users</p>

            <div class="flex gap-2">
                <a href="#" class="px-4 py-2 rounded-xl bg-white/[0.05] text-slate-400 hover:text-white">
                    Prev
                </a>
                <a href="#" class="px-4 py-2 rounded-xl bg-cyan-400 text-slate-950 font-semibold">
                    1
                </a>
                <a href="#" class="px-4 py-2 rounded-xl bg-white/[0.05] text-slate-400 hover:text-white">
                    2
                </a>
                <a href="#" class="px-4 py-2 rounded-xl bg-white/[0.05] text-slate-400 hover:text-white">
                    Next
                </a>
            </div>
        </div>

    </div>

</div>