@extends('layouts.app')
@section('title', 'Site Roster')
@section('content')
<div class="card mb-4">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
        <div><h6 class="mb-0">{{ $site->name }}</h6><span class="text-sm text-muted">{{ $site->client }} · {{ $site->code }}</span></div>
        <a href="{{ route('sites.edit', $site) }}" class="btn btn-sm btn-outline-primary mb-0"><i class="bi bi-pencil me-1"></i>Edit</a>
    </div>
    <div class="card-body">
        <div class="table-responsive"><table class="table align-items-center mb-0">
            <thead><tr class="text-xxs text-uppercase text-secondary"><th class="ps-2">Name</th><th>Passport</th><th>Nationality</th><th>Permit Exp.</th><th>Status</th></tr></thead>
            <tbody>
            @forelse($roster as $s)
                <tr>
                    <td class="ps-2"><a href="{{ route('staff.show', $s) }}" class="font-weight-bold text-sm">{{ $s->name }}</a></td>
                    <td class="text-sm">{{ $s->passport_no ?? '—' }}</td>
                    <td class="text-sm">{{ $s->nationality?->name ?? '—' }}</td>
                    <td class="text-sm">{{ optional($s->permit_expiry)->format('d/m/y') ?? '—' }}</td>
                    <td><span class="badge bg-{{ $s->statusColor() }}">{{ ucfirst($s->status) }}</span></td>
                </tr>
            @empty
                <tr><td colspan="5" class="text-center text-muted py-4">No staff assigned to this site.</td></tr>
            @endforelse
            </tbody>
        </table></div>
        <div class="mt-3">{{ $roster->links() }}</div>
    </div>
</div>
@endsection