@extends('layouts.app')
@section('title', __('Department team'))
@section('content')
<section class="panel-card mb-5 p-5 sm:p-7">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div><p class="text-xs font-bold uppercase tracking-widest text-blue-700">{{ $department->code }}</p><h2 class="mt-1 text-2xl font-extrabold">{{ $department->name }}</h2><p class="mt-2 text-sm text-slate-500">{{ $department->description }}</p></div>
    <a href="{{ route('admin.departments.edit', $department) }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-bold">{{ __('Edit department') }}</a>
  </div>
  <p class="mt-4 text-sm text-slate-600">{{ __('Department manager') }}: <strong>{{ $department->manager?->name ?? '—' }}</strong></p>
</section>
<section class="panel-card overflow-hidden">
  <div class="table-scroll"><table class="w-full text-left text-sm"><thead class="bg-slate-50 text-xs uppercase text-slate-400"><tr><th class="px-5 py-3">{{ __('Employee') }}</th><th class="px-5 py-3">{{ __('Job title') }}</th><th class="px-5 py-3">{{ __('Phone') }}</th><th class="px-5 py-3">{{ __('Hire date') }}</th><th class="px-5 py-3">{{ __('Status') }}</th></tr></thead><tbody class="divide-y divide-slate-100">
    @forelse($employees as $profile)<tr><td class="px-5 py-4 font-semibold">{{ $profile->user->name }} · {{ $profile->user->member_id }}</td><td class="px-5 py-4">{{ $profile->job_title ?: '—' }}</td><td class="px-5 py-4">{{ $profile->phone ?: '—' }}</td><td class="px-5 py-4">{{ $profile->hire_date?->format('M d, Y') ?? '—' }}</td><td class="px-5 py-4">{{ $profile->user->is_active ? __('Active') : __('Inactive') }}</td></tr>@empty<tr><td colspan="5" class="px-5 py-10 text-center text-slate-400">{{ __('No employees assigned to this department.') }}</td></tr>@endforelse
  </tbody></table></div><div class="border-t border-slate-100 px-5 py-4">{{ $employees->links() }}</div>
</section>
@endsection