<div class="card">
    <div class="card-header d-flex flex-column flex-md-row gap-2 align-items-md-center justify-content-md-between">
        <h5 class="card-title mb-0">Staff Members</h5>
        <form action="{{ route('staff.index') }}" method="GET" class="d-flex gap-2">
            <input type="hidden" name="tab" value="staff">
            <input type="search" name="search" class="form-control form-control-sm" placeholder="Search staff..."
                   value="{{ request('search') }}">
            <button type="submit" class="btn btn-outline-secondary btn-sm">Search</button>
        </form>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th class="d-none d-md-table-cell">Phone</th>
                        <th class="d-none d-lg-table-cell">Role</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($staff ?? [] as $member)
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <span>{{ $member->name }}</span>
                                    @if ($member->is_primary_admin)
                                        <span class="badge bg-primary" title="Created during installation">
                                            <i class="bi bi-shield-lock me-1"></i>Primary Admin
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td>{{ $member->email }}</td>
                            <td class="d-none d-md-table-cell">{{ $member->phone ?? '—' }}</td>
                            <td class="d-none d-lg-table-cell">{{ $member->roles->pluck('name')->join(', ') ?: '—' }}</td>
                            <td>
                                @php
                                    $status = $member->status ?? null;
                                    $statusValue = $status instanceof \App\Enums\UserStatus
                                        ? $status->value
                                        : (string) ($status ?? 'active');
                                @endphp
                                <span class="badge bg-{{ $statusValue === 'active' ? 'success' : 'secondary' }}">
                                    {{ $status instanceof \App\Enums\UserStatus ? $status->label() : ucfirst($statusValue) }}
                                </span>
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('staff.edit', $member) }}" class="btn btn-sm btn-outline-primary"
                                       title="Edit staff">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    @can('delete', $member)
                                        @unless ($member->is_primary_admin)
                                            <form action="{{ route('staff.destroy', $member) }}" method="POST"
                                                  onsubmit="return confirm('Delete {{ $member->name }}?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete staff">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        @endunless
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">No staff members found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if (isset($staff) && method_exists($staff, 'links'))
        <div class="card-footer">
            {{ $staff->withQueryString()->links() }}
        </div>
    @endif
</div>
