@extends('admin.layouts.app')

@section('title', 'Users')

@section('breadcrumb')
    <span class="current">Users</span>
@endsection

@section('content')

<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
    <div>
        <h1 class="page-title">
            <span class="title-icon"><i data-lucide="users" style="width:20px;height:20px;"></i></span>
            Users
        </h1>
        <p class="page-subtitle">Manage admin and system users</p>
    </div>
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
        <i data-lucide="user-plus" style="width:14px;height:14px;"></i>
        Add User
    </a>
</div>

{{-- Filters --}}
<div class="glass-sm" style="border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <form method="GET" action="{{ route('admin.users.index') }}" style="display:flex;align-items:center;gap:10px;flex:1;min-width:200px;">
        <div class="search-wrap" style="flex:1;max-width:320px;">
            <i data-lucide="search" class="search-icon" style="width:13px;height:13px;"></i>
            <input type="text" name="search" value="{{ request('search') }}"
                   class="search-input" style="width:100%;" placeholder="Search users...">
        </div>
        <select name="role" class="form-control" style="width:140px;">
            <option value="">All Roles</option>
            @foreach($roles ?? [] as $role)
                <option value="{{ $role->id }}" {{ request('role') == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn btn-secondary btn-sm">
            <i data-lucide="filter" style="width:12px;height:12px;"></i>
            Filter
        </button>
        @if(request('search') || request('role'))
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-sm">
                <i data-lucide="x" style="width:12px;height:12px;"></i>
                Clear
            </a>
        @endif
    </form>
    <div style="font-size:12px;color:var(--vsc-text-secondary);">
        {{ $users->total() }} user(s)
    </div>
</div>

{{-- Table --}}
<div class="admin-table-wrap">
    <div class="admin-table-header">
        <div class="admin-table-title">
            <i data-lucide="users" class="icon" style="width:14px;height:14px;"></i>
            All Users
        </div>
    </div>
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th style="width:36px;">
                        <input type="checkbox" id="select-all"
                               style="width:12px;height:12px;accent-color:var(--vsc-blue);">
                    </th>
                    <th>User</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Email Verified</th>
                    <th>Joined</th>
                    <th style="text-align:right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                    <tr>
                        <td>
                            <input type="checkbox" class="row-check"
                                   style="width:12px;height:12px;accent-color:var(--vsc-blue);">
                        </td>
                        <td>
                            <div style="display:flex;align-items:center;gap:10px;">
                                <div class="avatar avatar-{{ ['blue','teal','green','purple','orange'][$loop->index % 5] }}">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div style="font-weight:500;color:var(--vsc-text-active);">{{ $user->name }}</div>
                                    <div style="font-size:11px;color:var(--vsc-text-secondary);">{{ $user->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-blue">{{ $user->role?->name ?? 'user' }}</span>
                        </td>
                        <td>
                            @if($user->is_active ?? true)
                                <span class="badge badge-green"><i data-lucide="circle" style="width:6px;height:6px;fill:currentColor;"></i> Active</span>
                            @else
                                <span class="badge badge-gray"><i data-lucide="circle" style="width:6px;height:6px;fill:currentColor;"></i> Inactive</span>
                            @endif
                        </td>
                        <td>
                            @if($user->email_verified_at)
                                <span class="badge badge-green">Verified</span>
                            @else
                                <span class="badge badge-orange">Unverified</span>
                            @endif
                        </td>
                        <td style="color:var(--vsc-text-secondary);font-size:12px;">
                            {{ $user->created_at->format('d M Y') }}
                        </td>
                        <td>
                            <div style="display:flex;justify-content:flex-end;gap:4px;">
                                <a href="{{ route('admin.users.show', $user) }}"
                                   class="btn btn-icon btn-secondary" data-tooltip="View">
                                    <i data-lucide="eye" style="width:13px;height:13px;"></i>
                                </a>
                                <a href="{{ route('admin.users.edit', $user) }}"
                                   class="btn btn-icon btn-secondary" data-tooltip="Edit">
                                    <i data-lucide="pencil" style="width:13px;height:13px;"></i>
                                </a>
                                @if($user->id !== auth()->id())
                                    <form method="POST" action="{{ route('admin.users.destroy', $user) }}">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="btn btn-icon btn-danger"
                                                data-tooltip="Delete"
                                                data-confirm-delete="Delete user {{ $user->name }}?">
                                            <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" style="text-align:center;padding:48px;color:var(--vsc-text-secondary);">
                            <i data-lucide="users" style="width:32px;height:32px;display:block;margin:0 auto 12px;opacity:0.3;"></i>
                            <div style="font-size:14px;">No users found</div>
                            <div style="font-size:12px;margin-top:4px;">
                                <a href="{{ route('admin.users.create') }}" style="color:var(--vsc-text-link);">Add the first user</a>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
        <div class="pagination">
            <span style="font-size:12px;color:var(--vsc-text-secondary);margin-right:8px;">
                Showing {{ $users->firstItem() }}–{{ $users->lastItem() }} of {{ $users->total() }}
            </span>
            @if($users->onFirstPage())
                <button class="page-btn" disabled><i data-lucide="chevron-left" style="width:12px;height:12px;"></i></button>
            @else
                <a class="page-btn" href="{{ $users->previousPageUrl() }}"><i data-lucide="chevron-left" style="width:12px;height:12px;"></i></a>
            @endif

            @foreach($users->getUrlRange(max(1, $users->currentPage()-2), min($users->lastPage(), $users->currentPage()+2)) as $page => $url)
                <a class="page-btn {{ $page == $users->currentPage() ? 'active' : '' }}" href="{{ $url }}">{{ $page }}</a>
            @endforeach

            @if($users->hasMorePages())
                <a class="page-btn" href="{{ $users->nextPageUrl() }}"><i data-lucide="chevron-right" style="width:12px;height:12px;"></i></a>
            @else
                <button class="page-btn" disabled><i data-lucide="chevron-right" style="width:12px;height:12px;"></i></button>
            @endif
        </div>
    @endif
</div>

@endsection