@extends('layouts.app')

@section('title', 'Users · DocShare')
@section('section', 'Admin console')
@section('subtitle', 'Manage user accounts, roles, and access permissions.')

@section('content')
<div class="flex items-end justify-between">
    <div></div>
    <a href="{{ route('admin.users.create') }}" class="btn-primary inline-flex items-center justify-center">+ Create user</a>
</div>

@if(session('status'))
    <div class="mt-6 rounded-xl border border-emerald-400/30 bg-emerald-50 p-4 text-emerald-700">{{ session('status') }}</div>
@endif

<form class="mt-8 flex gap-3" method="get">
    <input name="search" value="{{ request('search') }}" placeholder="Search ID, name, or email" class="flex-1 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
    <button class="btn-secondary text-sm">Search</button>
</form>

<section class="surface mt-6 overflow-hidden">
    <div class="grid grid-cols-[1fr_210px_150px_120px] gap-4 border-b border-slate-100 px-6 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">
        <span>User</span><span>Company / location</span><span>Role</span><span>Status</span>
    </div>
    @forelse($users as $user)
    <div class="grid grid-cols-[1fr_210px_150px_120px] items-center gap-4 border-b border-slate-100 px-6 py-5 last:border-0">
        <div>
            <p class="font-medium text-slate-800">{{ $user->name }}</p>
            <p class="mt-1 text-sm text-slate-500">{{ $user->custom_user_id }} · {{ $user->email }}</p>
        </div>
        <span class="text-sm text-slate-600">{{ $user->company ?: '—' }}{{ $user->region ? ' · '.$user->region->name : '' }}</span>
        <span class="text-sm text-slate-600">{{ $user->role?->name ?? '—' }}</span>
        <a href="{{ route('admin.users.edit',$user) }}" class="text-sm font-medium capitalize text-teal-600 hover:text-teal-800">{{ $user->status }}</a>
    </div>
    @empty
    <div class="px-6 py-16 text-center text-slate-400">No users found.</div>
    @endforelse
</section>

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