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

@section('breadcrumbs')
    @include('layouts.components.breadcrumbs', ['items' => [['label' => 'Admin', 'url' => '/admin/dashboard'], ['label' => 'Users']]])
@endsection

@section('page-actions')
    <a href="{{ route('admin.users.create') }}" class="btn-primary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Add User
    </a>
@endsection

@section('content')
    <div class="card-static animate-fade-up">
        <div class="px-5 py-3 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center gap-3">
            <form method="GET" class="flex items-center gap-2 flex-1 flex-wrap">
                <div class="relative flex-1 min-w-[180px] max-w-xs">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search users..." class="form-input pl-9">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                <select name="role" class="form-select w-auto" onchange="this.form.submit()">
                    <option value="">All Roles</option>
                    @foreach(['super_admin'=>'Super Admin','company_admin'=>'Company Admin','company_user'=>'Company User','employee'=>'Employee'] as $v=>$l)
                        <option value="{{ $v }}" {{ request('role') === $v ? 'selected' : '' }}>{{ $l }}</option>
                    @endforeach
                </select>
                <select name="company_id" class="form-select w-auto" onchange="this.form.submit()">
                    <option value="">All Companies</option>
                    @foreach($companies as $id => $name)
                        <option value="{{ $id }}" {{ request('company_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead><tr><th>User</th><th>Role</th><th>Company</th><th>Status</th><th>Last Login</th><th class="text-right">Actions</th></tr></thead>
                <tbody>
                    @forelse($users as $user)
                    <tr>
                        <td>
                            <div class="flex items-center gap-3">
                                <div class="avatar avatar-sm bg-gradient-to-br from-primary-600 to-accent-500">{{ $user->initials }}</div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $user->name }}</p>
                                    <p class="text-xxs text-gray-400">{{ $user->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge badge-info">{{ $user->role_label }}</span></td>
                        <td>{{ $user->company?->name ?? '—' }}</td>
                        <td>
                            @if($user->is_active)
                                <span class="badge badge-active"><span class="badge-dot"></span>Active</span>
                            @else
                                <span class="badge badge-inactive"><span class="badge-dot"></span>Inactive</span>
                            @endif
                        </td>
                        <td class="text-xs text-gray-500">{{ $user->last_login_at?->diffForHumans() ?? 'Never' }}</td>
                        <td class="text-right">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('admin.users.edit', $user) }}" class="btn-icon w-8 h-8" title="Edit">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </a>
                                <form method="POST" action="{{ route('admin.users.toggle-active', $user) }}">
                                    @csrf
                                    <button type="submit" class="btn-icon w-8 h-8" title="{{ $user->is_active ? 'Deactivate' : 'Activate' }}">
                                        @if($user->is_active)
                                            <svg class="w-4 h-4 text-warning-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                        @else
                                            <svg class="w-4 h-4 text-success-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                        @endif
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6">@include('layouts.components.empty-state', ['icon' => 'users', 'title' => 'No users found'])</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($users->hasPages())
            <div class="px-5 py-3 border-t border-gray-100">@include('layouts.components.pagination', ['paginator' => $users])</div>
        @endif
    </div>
@endsection