@extends('layouts.app')
@section('page-title', 'User Management')

@section('content')
<div class="page-header">
    <h1><i class="fas fa-user-shield" style="color:#0097c4"></i> User Management</h1>
    <a href="{{ route('users.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add User
    </a>
</div>

<form method="GET">
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-end;">
        <div style="flex:1;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Search</label>
            <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Name or email...">
        </div>
        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
        <a href="{{ route('users.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i> Reset</a>
    </div>
</form>

<div class="card">
    <div class="card-header"><i class="fas fa-users"></i> System Users ({{ $users->total() }})</div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr><th>#</th><th>Name</th><th>Email</th><th>Role</th><th>Employee</th><th>Created</th><th>Actions</th></tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="width:34px;height:34px;border-radius:50%;background:#e0f5fb;color:#0097c4;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;flex-shrink:0;">
                                {{ strtoupper(substr($user->name,0,1)) }}
                            </div>
                            {{ $user->name }}
                        </div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <span class="badge {{ match($user->role) {
                            'admin' => 'badge-danger',
                            'hr'    => 'badge-info',
                            default => 'badge-secondary'
                        } }}">{{ ucfirst($user->role) }}</span>
                    </td>
                    <td>{{ $user->employee?->name ?? '—' }}</td>
                    <td>{{ $user->created_at->format('d M Y') }}</td>
                    <td>
                        <div class="flex gap-2">
                            <a href="{{ route('users.edit', $user) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                            @if(auth()->id() !== $user->id)
                            <form method="POST" action="{{ route('users.destroy', $user) }}" onsubmit="return confirm('Delete this user?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center" style="padding:30px;color:#94a3b8;">No users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
        <div style="padding:16px;">{{ $users->links() }}</div>
    @endif
</div>
@endsection