@extends('layouts.app')

@section('title', 'Users')

@section('content')
<div class="users-page">
    <header class="users-header">
        <div>
            <h1>Users</h1>
            <p class="users-subtitle">Create staff accounts with Admin (full access) or Manager (NMI payment links only).</p>
        </div>
        <a href="{{ route('users.create') }}" class="btn btn-primary">Add user</a>
    </header>

    <section class="users-card">
        @if($users->isEmpty())
            <p class="users-empty">No users yet.</p>
        @else
            <div class="users-table-wrap">
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>{{ $user->name }}</td>
                                <td><code>{{ $user->username }}</code></td>
                                <td>
                                    @if(str_ends_with((string) $user->email, '@staff.local'))
                                        <span class="users-muted">—</span>
                                    @else
                                        {{ $user->email }}
                                    @endif
                                </td>
                                <td>
                                    <span class="users-badge users-badge-{{ $user->role }}">
                                        {{ $user->isAdmin() ? 'Admin' : 'Manager' }}
                                    </span>
                                </td>
                                <td class="users-actions">
                                    <a href="{{ route('users.edit', $user) }}" class="btn btn-secondary" style="padding:.35rem .65rem;font-size:.85rem;">Edit</a>
                                    @if($user->id !== auth()->id())
                                        <form action="{{ route('users.destroy', $user) }}" method="POST" onsubmit="return confirm('Delete this user?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger" style="padding:.35rem .65rem;font-size:.85rem;">Delete</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $users->links() }}
        @endif
    </section>
</div>

@push('styles')
<style>
    .users-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
    .users-header h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
    .users-subtitle { margin: 0; color: #6b7280; max-width: 42rem; }
    .users-card { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    .users-empty { margin: 0; color: #6b7280; }
    .users-table-wrap { overflow-x: auto; }
    .users-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
    .users-table th, .users-table td { padding: .65rem .5rem; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; }
    .users-table th { color: #6b7280; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
    .users-actions { display: flex; gap: .4rem; justify-content: flex-end; white-space: nowrap; }
    .users-actions form { margin: 0; }
    .users-muted { color: #9ca3af; }
    .users-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
    .users-badge-admin { background: #dbeafe; color: #1d4ed8; }
    .users-badge-manager { background: #fef3c7; color: #92400e; }
</style>
@endpush
@endsection