@extends('layouts.app')
@section('title', 'Staff')
@section('content')
<div class="card mb-4">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Staff Directory <span class="text-sm text-muted">({{ $staff->total() }})</span></h6>
        @if(auth()->user()->isAdmin() || auth()->user()->isSupervisor())
            <a href="{{ route('staff.create') }}" class="btn btn-sm btn-primary mb-0"><i class="bi bi-plus-lg me-1"></i>New Staff</a>
        @endif
    </div>
    <div class="card-body">
        <form method="GET" class="row g-2 mb-3">
            <div class="col-md-4"><input name="q" value="{{ $filters['q'] }}" class="form-control form-control-sm" placeholder="Search name / passport / running no…"></div>
            <div class="col-md-2"><select name="status" class="form-select form-select-sm">
                <option value="">All status</option>
                @foreach(['active','resign','inactive'] as $s)
                    <option value="{{ $s }}" @selected($filters['status']===$s)>{{ ucfirst($s) }}</option>
                @endforeach
            </select></div>
            <div class="col-md-2"><select name="site_id" class="form-select form-select-sm searchable">
                <option value="">All sites</option>
                @foreach($sites as $site)<option value="{{ $site->id }}" @selected($filters['siteId']==$site->id)>{{ $site->name }}</option>@endforeach
            </select></div>
            <div class="col-md-2"><select name="nationality_id" class="form-select form-select-sm searchable">
                <option value="">All nationalities</option>
                @foreach($nationalities as $n)<option value="{{ $n->id }}" @selected($filters['natId']==$n->id)>{{ $n->name }}</option>@endforeach
            </select></div>
            <div class="col-md-2 d-flex gap-1">
                <button class="btn btn-sm btn-primary mb-0 flex-fill">Filter</button>
                <a href="{{ route('staff.index') }}" class="btn btn-sm btn-outline-secondary mb-0">Reset</a>
            </div>
        </form>

        <div class="table-responsive">
        <table class="table align-items-center mb-0">
            <thead><tr class="text-uppercase text-xxs text-secondary font-weight-bolder">
                <th class="ps-2">Name</th><th>Passport</th><th>Nationality</th><th>Site</th>
                <th>Permit</th><th>Passport Exp.</th><th>Status</th><th></th>
            </tr></thead>
            <tbody>
            @forelse($staff as $s)
                <tr>
                    <td class="ps-2"><a href="{{ route('staff.show', $s) }}" class="font-weight-bold text-sm">{{ $s->name }}</a>
                        <div class="text-xs text-muted">#{{ $s->running_no }} {{ $s->worker_code }}</div></td>
                    <td class="text-sm">{{ $s->passport_no ?? '—' }}</td>
                    <td class="text-sm">{{ $s->nationality?->name ?? '—' }}</td>
                    <td class="text-sm">{{ $s->site?->name ?? '—' }}</td>
                    <td class="text-sm">{{ optional($s->permit_expiry)->format('d/m/y') ?? '—' }}</td>
                    <td class="text-sm">{{ optional($s->passport_expiry)->format('d/m/y') ?? '—' }}</td>
                    <td><span class="badge bg-{{ $s->statusColor() }}">{{ ucfirst($s->status) }}</span></td>
                    <td class="text-end pe-2"><a href="{{ route('staff.show', $s) }}" class="text-secondary"><i class="bi bi-eye"></i></a></td>
                </tr>
            @empty
                <tr><td colspan="8" class="text-center text-muted py-4">No staff found.</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
        <div class="mt-3">{{ $staff->links() }}</div>
    </div>
</div>
@endsection