@extends('layouts.app')

@section('page_title', 'User Management')
@section('page_subtitle', 'Create, edit, delete users and manage their roles')

@section('page_actions')
    <a class="btn btn-primary" href="{{ route('users.create') }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        Create User
    </a>
@endsection

@section('content')

    {{-- Filters --}}
    <div class="card card-pad" style="margin-bottom:18px;">
        <form method="GET" action="{{ route('users.index') }}" class="grid grid-4" style="align-items:end;">
            <label>
                <span>Search</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or email…">
            </label>
            <label>
                <span>Role</span>
                <select name="role">
                    <option value="">All roles</option>
                    <option value="admin"   {{ request('role') === 'admin'   ? 'selected' : '' }}>Admin</option>
                    <option value="manager" {{ request('role') === 'manager' ? 'selected' : '' }}>Manager</option>
                    <option value="user"    {{ request('role') === 'user'    ? 'selected' : '' }}>User</option>
                </select>
            </label>
            <div class="toolbar">
                <button class="btn btn-primary" type="submit">Filter</button>
                <a class="btn" href="{{ route('users.index') }}">Reset</a>
            </div>
        </form>
    </div>

    <div class="section-head">
        <div>
            <h2>All Users</h2>
            <p>{{ $users->total() }} users found</p>
        </div>
    </div>

    <div class="card table-wrap">
        <table>
            <thead>
            <tr>
                <th>User</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Role</th>
                <th>Last Login</th>
                <th>Created</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @forelse ($users as $user)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px;">
                            {{-- Avatar --}}
                            @if ($user->profile_image)
                                <img src="{{ asset('storage/' . $user->profile_image) }}" alt="{{ $user->name }}"
                                     style="width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--color-border);">
                            @else
                                <div style="width:34px;height:34px;border-radius:50%;background:var(--color-brand-soft);color:var(--color-brand-strong);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                            @endif
                            <div>
                                <strong>{{ $user->name }}</strong>
                                @if ($user->id === auth()->id())
                                    <span class="badge" style="margin-left:6px;font-size:.7rem;">You</span>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="muted">{{ $user->email }}</td>
                    <td class="muted">{{ $user->phone ?? '—' }}</td>
                    <td>
                        @php
                            $roleCls = match($user->role) {
                                'admin'   => 'badge-info',
                                'manager' => 'badge-warning',
                                default   => ''
                            };
                        @endphp
                        <span class="badge {{ $roleCls }}">{{ ucfirst($user->role) }}</span>
                    </td>
                    <td class="muted" style="font-size:.85rem;">
                        {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : '—' }}
                    </td>
                    <td class="muted" style="font-size:.85rem;">{{ $user->created_at->format('d M Y') }}</td>
                    <td>
                        <div class="toolbar">
                            <a class="btn" href="{{ route('users.edit', $user) }}">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
                                Edit
                            </a>
                            @if ($user->id !== auth()->id())
                                <form method="POST" action="{{ route('users.destroy', $user) }}"
                                      data-confirm="Delete user '{{ addslashes($user->name) }}'? This cannot be undone.">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger" type="submit">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
                                        Delete
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7"><div class="empty">No users found.</div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top:16px;">{{ $users->links() }}</div>

@endsection