@extends('layouts.app')

@section('title', 'User Management')

@push('styles')
<style>
    .filter-bar { background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap; }
    .filter-bar select, .filter-bar input[type="text"] { padding:.45rem .75rem;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.82rem;color:var(--gray-700);background:#fff;transition:border-color .15s; }
    .filter-bar select:focus, .filter-bar input:focus { outline:none;border-color:var(--green); }
    .btn-filter { padding:.45rem 1rem;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer; }
    .btn-clear { padding:.45rem .9rem;background:transparent;color:var(--gray-500);border:1.5px solid var(--gray-200);border-radius:8px;font-size:.82rem;cursor:pointer;font-weight:600; }

    .page-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .page-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }

    table.users-table { width:100%;border-collapse:collapse; }
    .users-table th { padding:.65rem 1.1rem;font-size:.72rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;background:var(--gray-50);border-bottom:1px solid var(--gray-200);text-align:left; }
    .users-table td { padding:.85rem 1.1rem;font-size:.85rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle; }
    .users-table tr:last-child td { border-bottom:none; }
    .users-table tr:hover td { background:var(--gray-50); }

    .u-avatar { width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0; }
    .ua-admin { background:linear-gradient(135deg,#7c3aed,#5b21b6); }
    .ua-management { background:linear-gradient(135deg,#2563eb,#1d4ed8); }
    .ua-employee { background:linear-gradient(135deg,var(--green),var(--green-dark)); }

    .role-badge { display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:20px;font-size:.68rem;font-weight:700; }
    .role-admin      { background:#ede9fe;color:#5b21b6; }
    .role-management { background:#dbeafe;color:#1d4ed8; }
    .role-employee   { background:var(--green-light);color:var(--green-dark); }

    .active-badge { display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.68rem;font-weight:700; }
    .active-yes { background:#dcfce7;color:#166534; }
    .active-no  { background:#fee2e2;color:#dc2626; }
    .active-dot-grn { width:5px;height:5px;border-radius:50%;background:#00a651; }
    .active-dot-red { width:5px;height:5px;border-radius:50%;background:#ef4444; }

    .action-cell { display:flex;gap:.35rem; }
    .btn-xs { display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .6rem;border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;border:none;transition:all .15s; }
    .btn-xs-green { background:var(--green);color:#fff; }
    .btn-xs-green:hover { background:var(--green-dark);color:#fff; }
    .btn-xs-amber { background:#fef3c7;color:#92400e; }
    .btn-xs-amber:hover { background:#fde68a;color:#78350f; }
    .btn-xs-red { background:#fee2e2;color:#dc2626; }
    .btn-xs-red:hover { background:#fecaca;color:#b91c1c; }

    .pagination-wrap { padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-100);font-size:.8rem;color:var(--gray-500);flex-wrap:wrap;gap:.5rem; }
    .empty-state { text-align:center;padding:3rem;color:var(--gray-400); }
    .empty-state i { font-size:2.5rem;margin-bottom:.75rem;display:block; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">User Management</h1>
        <p class="page-subtitle">Create, edit, and manage platform users.</p>
    </div>
    <a href="{{ route('admin.users.create') }}" class="btn-primary">
        <i class="fas fa-user-plus"></i> Add User
    </a>
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('admin.users.index') }}" class="filter-bar">
    <input type="text" name="search" placeholder="Name, email, or employee ID…" value="{{ request('search') }}" style="min-width:220px;">
    <select name="role">
        <option value="">All Roles</option>
        @foreach($roles as $role)
        <option value="{{ $role->name }}" {{ request('role') === $role->name ? 'selected' : '' }}>{{ $role->display_name }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn-filter"><i class="fas fa-search"></i> Search</button>
    @if(request()->hasAny(['search','role']))
    <a href="{{ route('admin.users.index') }}" class="btn-clear">Clear</a>
    @endif
    <span style="margin-left:auto;font-size:.78rem;color:var(--gray-400);">{{ $users->total() }} user{{ $users->total() !== 1 ? 's' : '' }}</span>
</form>

<div class="page-card">
    <div class="page-card-header">
        <span style="font-weight:700;color:var(--gray-900);">All Users</span>
        <span style="font-size:.78rem;color:var(--gray-500);">Page {{ $users->currentPage() }} of {{ $users->lastPage() }}</span>
    </div>

    @if($users->count())
    <div style="overflow-x:auto;">
        <table class="users-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Employee ID</th>
                    <th>Department</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Joined</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:.65rem;">
                            <div class="u-avatar {{ $user->role?->name === 'admin' ? 'ua-admin' : ($user->role?->name === 'management' ? 'ua-management' : 'ua-employee') }}">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div style="font-weight:600;color:var(--gray-900);">{{ $user->name }}</div>
                                <div style="font-size:.72rem;color:var(--gray-400);">{{ $user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td>{{ $user->employee_id ?? '—' }}</td>
                    <td>{{ $user->department ?? '—' }}</td>
                    <td>
                        @php $rname = $user->role?->name ?? 'employee'; @endphp
                        <span class="role-badge role-{{ $rname }}">
                            {{ $user->role?->display_name ?? 'Employee' }}
                        </span>
                    </td>
                    <td>
                        @if($user->is_active)
                            <span class="active-badge active-yes"><span class="active-dot-grn"></span> Active</span>
                        @else
                            <span class="active-badge active-no"><span class="active-dot-red"></span> Inactive</span>
                        @endif
                    </td>
                    <td style="font-size:.78rem;color:var(--gray-400);">{{ $user->created_at->format('d M Y') }}</td>
                    <td>
                        <div class="action-cell">
                            <a href="{{ route('admin.users.edit', $user) }}" class="btn-xs btn-xs-green">
                                <i class="fas fa-pen"></i> Edit
                            </a>
                            @if($user->id !== auth()->id())
                            <form method="POST" action="{{ route('admin.users.toggle', $user) }}" style="display:inline;">
                                @csrf @method('PATCH')
                                <button type="submit" class="btn-xs btn-xs-amber" onclick="return confirm('{{ $user->is_active ? 'Deactivate' : 'Activate' }} this user?')">
                                    <i class="fas fa-{{ $user->is_active ? 'ban' : 'check' }}"></i>
                                    {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.users.destroy', $user) }}" style="display:inline;">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-xs btn-xs-red" onclick="return confirm('Delete user {{ $user->name }}? This cannot be undone.')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
    <div class="pagination-wrap">
        <span>Showing {{ $users->firstItem() }}–{{ $users->lastItem() }} of {{ $users->total() }}</span>
        {{ $users->links() }}
    </div>
    @endif

    @else
    <div class="empty-state">
        <i class="fas fa-users"></i>
        <p>No users found matching your search.</p>
    </div>
    @endif
</div>

@endsection