@extends('layouts.admin')

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold font-display text-ink-900">Users</h1>
        <a href="{{ route('admin.users.create') }}" class="bg-seal-blue-700 text-white px-4 py-2 rounded hover:bg-seal-blue-700/90">Create User</a>
    </div>

    <form method="GET" class="mb-6 flex gap-4 items-end">
        <div>
            <label class="block text-sm font-medium text-ink-600 mb-1">Search</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or Email"
                class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-64">
        </div>
        <div>
            <label class="block text-sm font-medium text-ink-600 mb-1">Role</label>
            <select name="role" class="border border-graphite-400/50 rounded px-3 py-2 text-sm">
                <option value="">All Roles</option>
                <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                <option value="institute_admin" {{ request('role') == 'institute_admin' ? 'selected' : '' }}>Institute Admin</option>
                <option value="examiner" {{ request('role') == 'examiner' ? 'selected' : '' }}>Examiner</option>
                <option value="private_candidate" {{ request('role') == 'private_candidate' ? 'selected' : '' }}>Private Candidate</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-ink-600 mb-1">Status</label>
            <select name="status" class="border border-graphite-400/50 rounded px-3 py-2 text-sm">
                <option value="">All</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
        <button type="submit" class="bg-ink-600 text-white px-4 py-2 rounded hover:bg-ink-900 text-sm">Filter</button>
        <a href="{{ route('admin.users.index') }}" class="text-graphite-400 hover:text-ink-600 text-sm py-2">Clear</a>
    </form>

    <div class="bg-white border border-graphite-400/30 rounded overflow-hidden">
        <table class="min-w-full divide-y divide-graphite-400/30">
            <thead class="bg-paper-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Role</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Institute</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-graphite-400/30">
                @forelse($users as $user)
                    <tr>
                        <td class="px-6 py-4 text-sm text-ink-900">{{ $user->name }}</td>
                        <td class="px-6 py-4 text-sm text-ink-900">{{ $user->email }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800">
                                {{ str_replace('_', ' ', ucfirst($user->role)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-ink-900">{{ $user->institute->name ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-2 py-1 text-xs font-medium rounded-full
                                {{ $user->status === 'active' ? 'bg-green-100 text-ledger-green-700' : 'bg-red-100 text-redpen-600' }}">
                                {{ ucfirst($user->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm">
                            <a href="{{ route('admin.users.edit', $user) }}" class="text-indigo-600 hover:text-indigo-800 mr-3">Edit</a>
                            <form action="{{ route('admin.users.destroy', $user) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this user?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-redpen-600 hover:text-redpen-600">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-sm text-graphite-400 text-center">No users found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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