@extends('layouts.app')

@php
    $eyebrow = 'Administration';
    $pageTitle = 'User Management';
@endphp

@section('content')

<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
        <p class="text-muted mb-0">Everyone who can log in and work on this account</p>
    </div>
    <a href="{{ route('users.create') }}" class="btn btn-brand btn-sm">
        <i class="bi bi-person-plus-fill me-1"></i>Add team member
    </a>
</div>

<div class="surface-card">
    <div class="table-responsive">
        <table class="table table-modern mb-0 align-middle">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($members as $member)
                    <tr>
                        <td class="d-flex align-items-center gap-2">
                            <span class="row-avatar">{{ strtoupper(substr($member->name, 0, 1)) }}</span>
                            <span class="fw-semibold">{{ $member->name }}</span>
                        </td>
                        <td>{{ $member->email }}</td>
                        <td>
                            @if($member->id === $owner->id)
                                <span class="badge-status st-violet">Owner</span>
                            @else
                                @php
                                    $roleColor = ['manager' => 'st-blue', 'staff' => 'st-gray'];
                                @endphp
                                <span class="badge-status {{ $roleColor[$member->role] ?? 'st-gray' }}">{{ ucfirst($member->role) }}</span>
                            @endif
                        </td>
                        <td class="text-end text-nowrap">
                            @if($member->id !== $owner->id)
                                <a href="{{ route('users.edit', $member->id) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-pencil-fill"></i>
                                </a>
                                <form method="POST" action="{{ route('users.destroy', $member->id) }}" class="d-inline"
                                      onsubmit="return confirm('Remove this team member? They will no longer be able to log in.')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="surface-card mt-3 p-4">
    <p class="fw-semibold mb-2"><i class="bi bi-info-circle-fill me-1 text-primary"></i>What each role can access</p>
    <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead>
                <tr><th>Area</th><th>Admin</th><th>Manager</th><th>Staff</th></tr>
            </thead>
            <tbody class="small text-muted">
                <tr><td>Tenants, leases, units, payments, invoices, maintenance</td><td>Full</td><td>Full</td><td>Full</td></tr>
                <tr><td>Buildings, owners, expenses, suppliers, assets, meters</td><td>Full</td><td>Full</td><td>No access</td></tr>
                <tr><td>Reports</td><td>Full</td><td>View</td><td>No access</td></tr>
                <tr><td>Human resources &amp; payroll</td><td>Full</td><td>No access</td><td>No access</td></tr>
                <tr><td>User management &amp; system settings</td><td>Full</td><td>No access</td><td>No access</td></tr>
            </tbody>
        </table>
    </div>
</div>
@endsection