{{-- resources/views/admin/users/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Users')
@section('page_title', 'Users')
@section('breadcrumb', 'All property staff and owners')

@section('content')

{{-- Filter Bar --}}
<div class="card mb-4">
    <div class="card-body" style="padding:14px 18px;">
        <form method="GET" class="d-flex align-items-center gap-2 flex-wrap">

            <div style="position:relative;flex:1;min-width:200px;max-width:340px;">
                <i class="bi bi-search"
                   style="position:absolute;left:10px;top:50%;transform:translateY(-50%);
                          color:var(--muted);font-size:.8rem;pointer-events:none;"></i>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="Search name or email…"
                       class="form-control form-control-sm"
                       style="padding-left:30px;">
            </div>

            <button type="submit" class="btn btn-sm btn-primary">Search</button>

            @if(request('search'))
                <a href="{{ route('admin.users.index') }}"
                   class="btn btn-sm btn-outline-secondary">Clear</a>
            @endif

            <span style="margin-left:auto;font-size:.75rem;color:var(--muted);">
                {{ $users->total() }} users
            </span>

        </form>
    </div>
</div>

{{-- Table --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">All Users</span>
    </div>

    @if($users->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-people" style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No users found</p>
            <p class="text-muted" style="font-size:.82rem;">Try adjusting your search</p>
        </div>
    @else
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Property</th>
                        <th>Role</th>
                        <th>Verified</th>
                        <th>Last Login</th>
                        <th>Joined</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td>
                                <div style="display:flex;align-items:center;gap:9px;">
                                    <div style="width:30px;height:30px;border-radius:7px;
                                                background:var(--clay-light);color:var(--clay);
                                                display:flex;align-items:center;
                                                justify-content:center;
                                                font-size:.72rem;font-weight:700;flex-shrink:0;">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="fw-semibold" style="font-size:.82rem;">
                                            {{ $user->name }}
                                        </div>
                                        <div style="font-size:.7rem;color:var(--muted);">
                                            {{ $user->email }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($user->property)
                                    <a href="{{ route('admin.properties.show', $user->property) }}"
                                       style="font-size:.8rem;color:var(--clay);text-decoration:none;font-weight:500;">
                                        {{ $user->property->name }}
                                    </a>
                                    @if($user->is_property_owner)
                                        <div style="font-size:.65rem;color:var(--clay);font-weight:600;">
                                            Owner
                                        </div>
                                    @endif
                                @else
                                    <span style="color:var(--muted);font-size:.78rem;">—</span>
                                @endif
                            </td>
                            <td>
                                <span style="font-size:.75rem;color:var(--muted);">
                                    {{ str_replace('_', ' ', $user->account_type) }}
                                </span>
                            </td>
                            <td>
                                @if($user->email_verified_at)
                                    <i class="bi bi-check-circle-fill"
                                       style="color:var(--success);font-size:.85rem;"
                                       title="{{ $user->email_verified_at->format('d M Y') }}"></i>
                                @else
                                    <i class="bi bi-circle"
                                       style="color:var(--muted);font-size:.85rem;"
                                       title="Not verified"></i>
                                @endif
                            </td>
                            <td style="font-size:.75rem;color:var(--muted);white-space:nowrap;">
                                {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                            </td>
                            <td style="font-size:.75rem;color:var(--muted);white-space:nowrap;">
                                {{ $user->created_at->format('d M Y') }}
                            </td>
                            <td>
                                @if($user->is_active)
                                    <span class="badge-status bs-active">Active</span>
                                @else
                                    <span class="badge-status bs-suspended">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('admin.users.show', $user) }}"
                                   class="btn btn-xs btn-outline-secondary">
                                    View →
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($users->hasPages())
            <div class="card-body" style="border-top:1px solid var(--border);padding:12px 18px;">
                {{ $users->links() }}
            </div>
        @endif
    @endif
</div>

@endsection