@extends('admin.layout')

@section('title', 'Manage Users')

@section('admin')
    <h1 class="text-2xl font-extrabold tracking-tight">Users</h1>

    <form method="GET" class="mt-6 flex gap-2">
        <input type="search" name="q" value="{{ $q }}" placeholder="Search by name or email…" class="field">
        <button type="submit" class="btn btn-ghost">Search</button>
    </form>

    <div class="surface mt-6 overflow-x-auto">
        <table class="w-full min-w-[40rem] text-left text-sm">
            <thead class="border-b border-ink-700 text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3 font-semibold">User</th>
                    <th class="px-4 py-3 font-semibold">Joined</th>
                    <th class="px-4 py-3 font-semibold">Membership</th>
                    <th class="px-4 py-3 font-semibold">Role</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-ink-700">
                @forelse ($users as $user)
                    <tr class="hover:bg-ink-800/50">
                        <td class="px-4 py-3">
                            <p class="font-medium text-slate-100">{{ $user->name }}</p>
                            <p class="text-xs text-slate-500">{{ $user->email }}</p>
                        </td>
                        <td class="px-4 py-3 text-slate-400">{{ $user->created_at->format('M j, Y') }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs font-bold uppercase {{ $user->is_premium ? 'text-brand-300' : 'text-slate-500' }}">
                                {{ $user->is_premium ? 'Member' : 'Free' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs font-bold uppercase {{ $user->is_admin ? 'text-amber-400' : 'text-slate-500' }}">
                                {{ $user->is_admin ? 'Admin' : 'User' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex justify-end gap-3">
                                <form method="POST" action="{{ route('admin.users.premium', $user) }}">
                                    @csrf
                                    <button type="submit" class="text-xs font-semibold text-brand-300 hover:text-brand-200">
                                        {{ $user->is_premium ? 'Revoke membership' : 'Grant membership' }}
                                    </button>
                                </form>

                                @unless (auth()->user()->is($user))
                                    <form method="POST" action="{{ route('admin.users.admin', $user) }}">
                                        @csrf
                                        <button type="submit" class="text-xs font-semibold text-slate-400 hover:text-white">
                                            {{ $user->is_admin ? 'Remove admin' : 'Make admin' }}
                                        </button>
                                    </form>
                                @endunless
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-10 text-center text-slate-500">No users found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">{{ $users->links() }}</div>
@endsection